mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
Merge branch '2.x' into dev
This commit is contained in:
chenjiahan
commit
8ce14496f5
@ -2,21 +2,81 @@
|
||||
|
||||
### Intro
|
||||
|
||||
Vant provides a set of default themes, if you want to custom the theme color or other styles, you can use the following methods:
|
||||
Vant use [Less](http://lesscss.org/) as css preprocessor，you can override the default less variables to custom theme.
|
||||
|
||||
### Less variables
|
||||
|
||||
Vant use [Less](http://lesscss.org/) as css preprocessor，you can modify less variables to custom theme.
|
||||
|
||||
There are some basic variables below, all available variables could be found in [var.less](https://github.com/youzan/vant/blob/dev/src/style/var.less)。
|
||||
|
||||
```less
|
||||
// Color Palette
|
||||
@black: #000;
|
||||
@white: #fff;
|
||||
@gray-1: #f7f8fa;
|
||||
@gray-2: #f2f3f5;
|
||||
@gray-3: #ebedf0;
|
||||
@gray-4: #dcdee0;
|
||||
@gray-5: #c8c9cc;
|
||||
@gray-6: #969799;
|
||||
@gray-7: #646566;
|
||||
@gray-8: #323233;
|
||||
@red: #ee0a24;
|
||||
@blue: #1989fa;
|
||||
@orange: #ff976a;
|
||||
@orange-dark: #ed6a0c;
|
||||
@orange-light: #fffbe8;
|
||||
@green: #07c160;
|
||||
|
||||
// Gradient Colors
|
||||
@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
|
||||
@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
|
||||
|
||||
// Component Colors
|
||||
@text-color: #323233;
|
||||
@border-color: #ebedf0;
|
||||
@active-color: #f2f3f5;
|
||||
@background-color: #f7f8fa;
|
||||
@text-color: @gray-8;
|
||||
@active-color: @gray-2;
|
||||
@active-opacity: 0.7;
|
||||
@disabled-opacity: 0.5;
|
||||
@background-color: @gray-1;
|
||||
@background-color-light: #fafafa;
|
||||
@text-link-color: #576b95;
|
||||
|
||||
// Padding
|
||||
@padding-base: 4px;
|
||||
@padding-xs: @padding-base * 2;
|
||||
@padding-sm: @padding-base * 3;
|
||||
@padding-md: @padding-base * 4;
|
||||
@padding-lg: @padding-base * 6;
|
||||
@padding-xl: @padding-base * 8;
|
||||
|
||||
// Font
|
||||
@font-size-xs: 10px;
|
||||
@font-size-sm: 12px;
|
||||
@font-size-md: 14px;
|
||||
@font-size-lg: 16px;
|
||||
@font-weight-bold: 500;
|
||||
@line-height-xs: 14px;
|
||||
@line-height-sm: 18px;
|
||||
@line-height-md: 20px;
|
||||
@line-height-lg: 22px;
|
||||
@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
|
||||
Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
|
||||
'Microsoft Yahei', sans-serif;
|
||||
@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
|
||||
sans-serif;
|
||||
|
||||
// Animation
|
||||
@animation-duration-base: 0.3s;
|
||||
@animation-duration-fast: 0.2s;
|
||||
@animation-timing-function-enter: ease-out;
|
||||
@animation-timing-function-leave: ease-in;
|
||||
|
||||
// Border
|
||||
@border-color: @gray-3;
|
||||
@border-width-base: 1px;
|
||||
@border-radius-sm: 2px;
|
||||
@border-radius-md: 4px;
|
||||
@border-radius-lg: 8px;
|
||||
@border-radius-max: 999px;
|
||||
```
|
||||
|
||||
## How to custom theme
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以使用下面提供的方法。
|
||||
Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以按照本文档进行主题定制。
|
||||
|
||||
### 示例工程
|
||||
|
||||
@ -12,15 +12,77 @@ Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用
|
||||
|
||||
Vant 使用了 [Less](http://lesscss.org/) 对样式进行预处理，并内置了一些样式变量，通过替换样式变量即可定制你自己需要的主题。
|
||||
|
||||
下面是一些基本的样式变量，所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant/blob/dev/src/style/var.less)。
|
||||
下面是所有的基础样式变量，组件的颜色变量请参考各个组件的文档或[配置文件](https://github.com/youzan/vant/blob/dev/src/style/var.less)。
|
||||
|
||||
```less
|
||||
// Color Palette
|
||||
@black: #000;
|
||||
@white: #fff;
|
||||
@gray-1: #f7f8fa;
|
||||
@gray-2: #f2f3f5;
|
||||
@gray-3: #ebedf0;
|
||||
@gray-4: #dcdee0;
|
||||
@gray-5: #c8c9cc;
|
||||
@gray-6: #969799;
|
||||
@gray-7: #646566;
|
||||
@gray-8: #323233;
|
||||
@red: #ee0a24;
|
||||
@blue: #1989fa;
|
||||
@orange: #ff976a;
|
||||
@orange-dark: #ed6a0c;
|
||||
@orange-light: #fffbe8;
|
||||
@green: #07c160;
|
||||
|
||||
// Gradient Colors
|
||||
@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
|
||||
@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
|
||||
|
||||
// Component Colors
|
||||
@text-color: #323233;
|
||||
@border-color: #ebedf0;
|
||||
@active-color: #f2f3f5;
|
||||
@background-color: #f7f8fa;
|
||||
@text-color: @gray-8;
|
||||
@active-color: @gray-2;
|
||||
@active-opacity: 0.7;
|
||||
@disabled-opacity: 0.5;
|
||||
@background-color: @gray-1;
|
||||
@background-color-light: #fafafa;
|
||||
@text-link-color: #576b95;
|
||||
|
||||
// Padding
|
||||
@padding-base: 4px;
|
||||
@padding-xs: @padding-base * 2;
|
||||
@padding-sm: @padding-base * 3;
|
||||
@padding-md: @padding-base * 4;
|
||||
@padding-lg: @padding-base * 6;
|
||||
@padding-xl: @padding-base * 8;
|
||||
|
||||
// Font
|
||||
@font-size-xs: 10px;
|
||||
@font-size-sm: 12px;
|
||||
@font-size-md: 14px;
|
||||
@font-size-lg: 16px;
|
||||
@font-weight-bold: 500;
|
||||
@line-height-xs: 14px;
|
||||
@line-height-sm: 18px;
|
||||
@line-height-md: 20px;
|
||||
@line-height-lg: 22px;
|
||||
@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
|
||||
Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
|
||||
'Microsoft Yahei', sans-serif;
|
||||
@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
|
||||
sans-serif;
|
||||
|
||||
// Animation
|
||||
@animation-duration-base: 0.3s;
|
||||
@animation-duration-fast: 0.2s;
|
||||
@animation-timing-function-enter: ease-out;
|
||||
@animation-timing-function-leave: ease-in;
|
||||
|
||||
// Border
|
||||
@border-color: @gray-3;
|
||||
@border-width-base: 1px;
|
||||
@border-radius-sm: 2px;
|
||||
@border-radius-md: 4px;
|
||||
@border-radius-lg: 8px;
|
||||
@border-radius-max: 999px;
|
||||
```
|
||||
|
||||
## 定制方法
|
||||
|
||||
@ -126,3 +126,22 @@ Use `badge` prop to show badge in icon.
|
||||
| Name | Description |
|
||||
| ------- | -------------- |
|
||||
| default | Button content |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| ---------------------------------- | ------------------ | ----------- |
|
||||
| @goods-action-background-color | `@white` | - |
|
||||
| @goods-action-height | `50px` | - |
|
||||
| @goods-action-icon-width | `48px` | - |
|
||||
| @goods-action-icon-height | `100%` | - |
|
||||
| @goods-action-icon-color | `@text-color` | - |
|
||||
| @goods-action-icon-size | `18px` | - |
|
||||
| @goods-action-icon-font-size | `@font-size-xs` | - |
|
||||
| @goods-action-icon-active-color | `@active-color` | - |
|
||||
| @goods-action-icon-text-color | `@gray-7` | - |
|
||||
| @goods-action-button-height | `40px` | - |
|
||||
| @goods-action-button-warning-color | `@gradient-orange` | - |
|
||||
| @goods-action-button-danger-color | `@gradient-red` | - |
|
||||
|
||||
@ -106,7 +106,7 @@ export default {
|
||||
### ActionBarButton Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| text | 按钮文字 | _string_ | - |
|
||||
| type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | _string_ | `default` |
|
||||
| color | 按钮颜色，支持传入`linear-gradient`渐变色 | _string_ | - |
|
||||
@ -129,3 +129,22 @@ export default {
|
||||
| 名称 | 说明 |
|
||||
| ------- | ------------ |
|
||||
| default | 按钮显示内容 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ---------------------------------- | ------------------ | ---- |
|
||||
| @goods-action-background-color | `@white` | - |
|
||||
| @goods-action-height | `50px` | - |
|
||||
| @goods-action-icon-width | `48px` | - |
|
||||
| @goods-action-icon-height | `100%` | - |
|
||||
| @goods-action-icon-color | `@text-color` | - |
|
||||
| @goods-action-icon-size | `18px` | - |
|
||||
| @goods-action-icon-font-size | `@font-size-xs` | - |
|
||||
| @goods-action-icon-active-color | `@active-color` | - |
|
||||
| @goods-action-icon-text-color | `@gray-7` | - |
|
||||
| @goods-action-button-height | `40px` | - |
|
||||
| @goods-action-button-warning-color | `@gradient-orange` | - |
|
||||
| @goods-action-button-danger-color | `@gradient-red` | - |
|
||||
|
||||
@ -198,3 +198,32 @@ export default {
|
||||
| --------------------- | ------------------ |
|
||||
| default | Custom content |
|
||||
| description `v2.10.4` | Custom description |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| -------------------------------------- | ------------------- | ----------- |
|
||||
| @action-sheet-max-height | `80%` | - |
|
||||
| @action-sheet-header-height | `48px` | - |
|
||||
| @action-sheet-header-font-size | `@font-size-lg` | - |
|
||||
| @action-sheet-description-color | `@gray-6` | - |
|
||||
| @action-sheet-description-font-size | `@font-size-md` | - |
|
||||
| @action-sheet-description-line-height | `@line-height-md` | - |
|
||||
| @action-sheet-item-background | `@white` | - |
|
||||
| @action-sheet-item-font-size | `@font-size-lg` | - |
|
||||
| @action-sheet-item-line-height | `@line-height-lg` | - |
|
||||
| @action-sheet-item-text-color | `@text-color` | - |
|
||||
| @action-sheet-item-disabled-text-color | `@gray-5` | - |
|
||||
| @action-sheet-subname-color | `@gray-6` | - |
|
||||
| @action-sheet-subname-font-size | `@font-size-sm` | - |
|
||||
| @action-sheet-subname-line-height | `@line-height-sm` | - |
|
||||
| @action-sheet-close-icon-size | `22px` | - |
|
||||
| @action-sheet-close-icon-color | `@gray-5` | - |
|
||||
| @action-sheet-close-icon-active-color | `@gray-6` | - |
|
||||
| @action-sheet-close-icon-padding | `0 @padding-md` | - |
|
||||
| @action-sheet-cancel-text-color | `@gray-7` | - |
|
||||
| @action-sheet-cancel-padding-top | `@padding-xs` | - |
|
||||
| @action-sheet-cancel-padding-color | `@background-color` | - |
|
||||
| @action-sheet-loading-icon-size | `22px` | - |
|
||||
|
||||
@ -207,6 +207,35 @@ export default {
|
||||
| default | 自定义面板的展示内容 |
|
||||
| description `v2.10.4` | 自定义描述文案 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| -------------------------------------- | ------------------- | ---- |
|
||||
| @action-sheet-max-height | `80%` | - |
|
||||
| @action-sheet-header-height | `48px` | - |
|
||||
| @action-sheet-header-font-size | `@font-size-lg` | - |
|
||||
| @action-sheet-description-color | `@gray-6` | - |
|
||||
| @action-sheet-description-font-size | `@font-size-md` | - |
|
||||
| @action-sheet-description-line-height | `@line-height-md` | - |
|
||||
| @action-sheet-item-background | `@white` | - |
|
||||
| @action-sheet-item-font-size | `@font-size-lg` | - |
|
||||
| @action-sheet-item-line-height | `@line-height-lg` | - |
|
||||
| @action-sheet-item-text-color | `@text-color` | - |
|
||||
| @action-sheet-item-disabled-text-color | `@gray-5` | - |
|
||||
| @action-sheet-subname-color | `@gray-6` | - |
|
||||
| @action-sheet-subname-font-size | `@font-size-sm` | - |
|
||||
| @action-sheet-subname-line-height | `@line-height-sm` | - |
|
||||
| @action-sheet-close-icon-size | `22px` | - |
|
||||
| @action-sheet-close-icon-color | `@gray-5` | - |
|
||||
| @action-sheet-close-icon-active-color | `@gray-6` | - |
|
||||
| @action-sheet-close-icon-padding | `0 @padding-md` | - |
|
||||
| @action-sheet-cancel-text-color | `@gray-7` | - |
|
||||
| @action-sheet-cancel-padding-top | `@padding-xs` | - |
|
||||
| @action-sheet-cancel-padding-color | `@background-color` | - |
|
||||
| @action-sheet-loading-icon-size | `22px` | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 引入时提示 dependencies not found？
|
||||
|
||||
@ -144,3 +144,15 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Addres
|
||||
### Area Data Structure
|
||||
|
||||
Please refer to [Area](#/en-US/area) component。
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| --- | --- | --- |
|
||||
| @address-edit-padding | `@padding-sm` | - |
|
||||
| @address-edit-buttons-padding | `@padding-xl @padding-base` | - |
|
||||
| @address-edit-button-margin-bottom | `@padding-sm` | - |
|
||||
| @address-edit-detail-finish-color | `@blue` | - |
|
||||
| @address-edit-detail-finish-font-size | `@font-size-sm` | - |
|
||||
|
||||
@ -150,3 +150,15 @@ export default {
|
||||
### 省市县列表数据格式
|
||||
|
||||
请参考 [Area](#/zh-CN/area) 组件。
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ------------------------------------- | --------------------------- | ---- |
|
||||
| @address-edit-padding | `@padding-sm` | - |
|
||||
| @address-edit-buttons-padding | `@padding-xl @padding-base` | - |
|
||||
| @address-edit-button-margin-bottom | `@padding-sm` | - |
|
||||
| @address-edit-detail-finish-color | `@blue` | - |
|
||||
| @address-edit-detail-finish-font-size | `@font-size-sm` | - |
|
||||
|
||||
@ -111,3 +111,23 @@ export default {
|
||||
| default | Custom content after list | - |
|
||||
| top | Custom content before list | - |
|
||||
| item-bottom `v2.5.0` | Custom content after list item | item |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| --- | --- | --- |
|
||||
| @address-list-padding | `@padding-sm @padding-sm 80px` | - |
|
||||
| @address-list-disabled-text-color | `@gray-6` | - |
|
||||
| @address-list-disabled-text-padding | `@padding-base * 5 0 @padding-md` | - |
|
||||
| @address-list-disabled-text-font-size | `@font-size-md` | - |
|
||||
| @address-list-disabled-text-line-height | `@line-height-md` | - |
|
||||
| @address-list-add-button-z-index | `999` | - |
|
||||
| @address-list-item-padding | `@padding-sm` | - |
|
||||
| @address-list-item-text-color | `@text-color` | - |
|
||||
| @address-list-item-disabled-text-color | `@gray-5` | - |
|
||||
| @address-list-item-font-size | `13px` | - |
|
||||
| @address-list-item-line-height | `@line-height-sm` | - |
|
||||
| @address-list-item-radio-icon-color | `@red` | - |
|
||||
| @address-list-edit-icon-size | `20px` | - |
|
||||
|
||||
@ -115,3 +115,23 @@ export default {
|
||||
| default | 在列表下方插入内容 | - |
|
||||
| top | 在顶部插入内容 | - |
|
||||
| item-bottom `v2.5.0` | 在列表项底部插入内容 | 列表项的值 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| --- | --- | --- |
|
||||
| @address-list-padding | `@padding-sm @padding-sm 80px` | - |
|
||||
| @address-list-disabled-text-color | `@gray-6` | - |
|
||||
| @address-list-disabled-text-padding | `@padding-base * 5 0 @padding-md` | - |
|
||||
| @address-list-disabled-text-font-size | `@font-size-md` | - |
|
||||
| @address-list-disabled-text-line-height | `@line-height-md` | - |
|
||||
| @address-list-add-button-z-index | `999` | - |
|
||||
| @address-list-item-padding | `@padding-sm` | - |
|
||||
| @address-list-item-text-color | `@text-color` | - |
|
||||
| @address-list-item-disabled-text-color | `@gray-5` | - |
|
||||
| @address-list-item-font-size | `13px` | - |
|
||||
| @address-list-item-line-height | `@line-height-sm` | - |
|
||||
| @address-list-item-radio-icon-color | `@red` | - |
|
||||
| @address-list-edit-icon-size | `20px` | - |
|
||||
|
||||
@ -76,3 +76,20 @@ app.use(Badge);
|
||||
| Name | Description |
|
||||
| ------- | ------------ |
|
||||
| default | Default slot |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| --- | --- | --- |
|
||||
| @badge-size | `16px` | - |
|
||||
| @badge-color | `@white` | - |
|
||||
| @badge-padding | `0 3px` | - |
|
||||
| @badge-font-size | `@font-size-sm` | - |
|
||||
| @badge-font-weight | `@font-weight-bold` | - |
|
||||
| @badge-border-width | `@border-width-base` | - |
|
||||
| @badge-background-color | `@red` | - |
|
||||
| @badge-dot-color | `@red` | - |
|
||||
| @badge-dot-size | `8px` | - |
|
||||
| @badge-font-family | `-apple-system-font, Helvetica Neue, Arial, sans-serif` | - |
|
||||
|
||||
@ -89,3 +89,20 @@ app.use(Badge);
|
||||
| ------- | ---------------- |
|
||||
| default | 徽标包裹的子元素 |
|
||||
| content | 自定义徽标内容 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| --- | --- | --- |
|
||||
| @badge-size | `16px` | - |
|
||||
| @badge-color | `@white` | - |
|
||||
| @badge-padding | `0 3px` | - |
|
||||
| @badge-font-size | `@font-size-sm` | - |
|
||||
| @badge-font-weight | `@font-weight-bold` | - |
|
||||
| @badge-border-width | `@border-width-base` | - |
|
||||
| @badge-background-color | `@red` | - |
|
||||
| @badge-dot-color | `@red` | - |
|
||||
| @badge-dot-size | `8px` | - |
|
||||
| @badge-font-family | `-apple-system-font, Helvetica Neue, Arial, sans-serif` | - |
|
||||
|
||||
69
src/badge/index.js
Normal file
69
src/badge/index.js
Normal file
@ -0,0 +1,69 @@
|
||||
import { isDef, createNamespace } from '../utils';
|
||||
import { isNumeric } from '../utils/validate/number';
|
||||
|
||||
const [createComponent, bem] = createNamespace('badge');
|
||||
|
||||
export default createComponent({
|
||||
props: {
|
||||
dot: Boolean,
|
||||
max: [Number, String],
|
||||
color: String,
|
||||
content: [Number, String],
|
||||
tag: {
|
||||
type: String,
|
||||
default: 'div',
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
hasContent() {
|
||||
return !!(
|
||||
this.$scopedSlots.content ||
|
||||
(isDef(this.content) && this.content !== '')
|
||||
);
|
||||
},
|
||||
|
||||
renderContent() {
|
||||
const { dot, max, content } = this;
|
||||
|
||||
if (!dot && this.hasContent()) {
|
||||
if (this.$scopedSlots.content) {
|
||||
return this.$scopedSlots.content();
|
||||
}
|
||||
|
||||
if (isDef(max) && isNumeric(content) && +content > max) {
|
||||
return `${max}+`;
|
||||
}
|
||||
|
||||
return content;
|
||||
}
|
||||
},
|
||||
|
||||
renderBadge() {
|
||||
if (this.hasContent() || this.dot) {
|
||||
return (
|
||||
<div
|
||||
class={bem({ dot: this.dot, fixed: !!this.$scopedSlots.default })}
|
||||
style={{ background: this.color }}
|
||||
>
|
||||
{this.renderContent()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
render() {
|
||||
if (this.$scopedSlots.default) {
|
||||
const { tag } = this;
|
||||
return (
|
||||
<tag class={bem('wrapper')}>
|
||||
{this.$scopedSlots.default()}
|
||||
{this.renderBadge()}
|
||||
</tag>
|
||||
);
|
||||
}
|
||||
|
||||
return this.renderBadge();
|
||||
},
|
||||
});
|
||||
@ -141,3 +141,39 @@ app.use(Button);
|
||||
| ----------------- | ------------------- |
|
||||
| default | Default slot |
|
||||
| loading `v2.10.1` | Custom loading icon |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| -------------------------------- | -------------------- | ----------- |
|
||||
| @button-mini-height | `24px` | - |
|
||||
| @button-mini-font-size | `@font-size-xs` | - |
|
||||
| @button-small-height | `32px` | - |
|
||||
| @button-small-font-size | `@font-size-sm` | - |
|
||||
| @button-normal-font-size | `@font-size-md` | - |
|
||||
| @button-large-height | `50px` | - |
|
||||
| @button-default-height | `44px` | - |
|
||||
| @button-default-line-height | `1.2` | - |
|
||||
| @button-default-font-size | `@font-size-lg` | - |
|
||||
| @button-default-color | `@text-color` | - |
|
||||
| @button-default-background-color | `@white` | - |
|
||||
| @button-default-border-color | `@border-color` | - |
|
||||
| @button-primary-color | `@white` | - |
|
||||
| @button-primary-background-color | `@green` | - |
|
||||
| @button-primary-border-color | `@green` | - |
|
||||
| @button-info-color | `@white` | - |
|
||||
| @button-info-background-color | `@blue` | - |
|
||||
| @button-info-border-color | `@blue` | - |
|
||||
| @button-danger-color | `@white` | - |
|
||||
| @button-danger-background-color | `@red` | - |
|
||||
| @button-danger-border-color | `@red` | - |
|
||||
| @button-warning-color | `@white` | - |
|
||||
| @button-warning-background-color | `@orange` | - |
|
||||
| @button-warning-border-color | `@orange` | - |
|
||||
| @button-border-width | `@border-width-base` | - |
|
||||
| @button-border-radius | `@border-radius-sm` | - |
|
||||
| @button-round-border-radius | `@border-radius-max` | - |
|
||||
| @button-plain-background-color | `@white` | - |
|
||||
| @button-disabled-opacity | `@disabled-opacity` | - |
|
||||
|
||||
@ -168,3 +168,39 @@ app.use(Button);
|
||||
| ----------------- | -------------- |
|
||||
| default | 按钮内容 |
|
||||
| loading `v2.10.1` | 自定义加载图标 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| -------------------------------- | -------------------- | ---- |
|
||||
| @button-mini-height | `24px` | - |
|
||||
| @button-mini-font-size | `@font-size-xs` | - |
|
||||
| @button-small-height | `32px` | - |
|
||||
| @button-small-font-size | `@font-size-sm` | - |
|
||||
| @button-normal-font-size | `@font-size-md` | - |
|
||||
| @button-large-height | `50px` | - |
|
||||
| @button-default-height | `44px` | - |
|
||||
| @button-default-line-height | `1.2` | - |
|
||||
| @button-default-font-size | `@font-size-lg` | - |
|
||||
| @button-default-color | `@text-color` | - |
|
||||
| @button-default-background-color | `@white` | - |
|
||||
| @button-default-border-color | `@border-color` | - |
|
||||
| @button-primary-color | `@white` | - |
|
||||
| @button-primary-background-color | `@green` | - |
|
||||
| @button-primary-border-color | `@green` | - |
|
||||
| @button-info-color | `@white` | - |
|
||||
| @button-info-background-color | `@blue` | - |
|
||||
| @button-info-border-color | `@blue` | - |
|
||||
| @button-danger-color | `@white` | - |
|
||||
| @button-danger-background-color | `@red` | - |
|
||||
| @button-danger-border-color | `@red` | - |
|
||||
| @button-warning-color | `@white` | - |
|
||||
| @button-warning-background-color | `@orange` | - |
|
||||
| @button-warning-border-color | `@orange` | - |
|
||||
| @button-border-width | `@border-width-base` | - |
|
||||
| @button-border-radius | `@border-radius-sm` | - |
|
||||
| @button-round-border-radius | `@border-radius-max` | - |
|
||||
| @button-plain-background-color | `@white` | - |
|
||||
| @button-disabled-opacity | `@disabled-opacity` | - |
|
||||
|
||||
@ -318,3 +318,35 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Calend
|
||||
| Name | Description | Attribute | Return value |
|
||||
| ----- | ----------------------------------- | --------- | ------------ |
|
||||
| reset | Reset selected date to default date | - | - |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| --- | --- | --- |
|
||||
| @calendar-background-color | `@white` | - |
|
||||
| @calendar-popup-height | `80%` | - |
|
||||
| @calendar-header-box-shadow | `0 2px 10px rgba(125, 126, 128, 0.16)` | - |
|
||||
| @calendar-header-title-height | `44px` | - |
|
||||
| @calendar-header-title-font-size | `@font-size-lg` | - |
|
||||
| @calendar-header-subtitle-font-size | `@font-size-md` | - |
|
||||
| @calendar-weekdays-height | `30px` | - |
|
||||
| @calendar-weekdays-font-size | `@font-size-sm` | - |
|
||||
| @calendar-month-title-font-size | `@font-size-md` | - |
|
||||
| @calendar-month-mark-color | `fade(@gray-2, 80%)` | - |
|
||||
| @calendar-month-mark-font-size | `160px` | - |
|
||||
| @calendar-day-height | `64px` | - |
|
||||
| @calendar-day-font-size | `@font-size-lg` | - |
|
||||
| @calendar-range-edge-color | `@white` | - |
|
||||
| @calendar-range-edge-background-color | `@red` | - |
|
||||
| @calendar-range-middle-color | `@red` | - |
|
||||
| @calendar-range-middle-background-opacity | `0.1` | - |
|
||||
| @calendar-selected-day-size | `54px` | - |
|
||||
| @calendar-selected-day-color | `@white` | - |
|
||||
| @calendar-info-font-size | `@font-size-xs` | - |
|
||||
| @calendar-info-line-height | `@line-height-xs` | - |
|
||||
| @calendar-selected-day-background-color | `@red` | - |
|
||||
| @calendar-day-disabled-color | `@gray-5` | - |
|
||||
| @calendar-confirm-button-height | `36px` | - |
|
||||
| @calendar-confirm-button-margin | `7px 0` | - |
|
||||
|
||||
@ -323,6 +323,38 @@ export default {
|
||||
| ------ | ---------------------- | ---- | ------ |
|
||||
| reset | 重置选中的日期到默认值 | - | - |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| --- | --- | --- |
|
||||
| @calendar-background-color | `@white` | - |
|
||||
| @calendar-popup-height | `80%` | - |
|
||||
| @calendar-header-box-shadow | `0 2px 10px rgba(125, 126, 128, 0.16)` | - |
|
||||
| @calendar-header-title-height | `44px` | - |
|
||||
| @calendar-header-title-font-size | `@font-size-lg` | - |
|
||||
| @calendar-header-subtitle-font-size | `@font-size-md` | - |
|
||||
| @calendar-weekdays-height | `30px` | - |
|
||||
| @calendar-weekdays-font-size | `@font-size-sm` | - |
|
||||
| @calendar-month-title-font-size | `@font-size-md` | - |
|
||||
| @calendar-month-mark-color | `fade(@gray-2, 80%)` | - |
|
||||
| @calendar-month-mark-font-size | `160px` | - |
|
||||
| @calendar-day-height | `64px` | - |
|
||||
| @calendar-day-font-size | `@font-size-lg` | - |
|
||||
| @calendar-range-edge-color | `@white` | - |
|
||||
| @calendar-range-edge-background-color | `@red` | - |
|
||||
| @calendar-range-middle-color | `@red` | - |
|
||||
| @calendar-range-middle-background-opacity | `0.1` | - |
|
||||
| @calendar-selected-day-size | `54px` | - |
|
||||
| @calendar-selected-day-color | `@white` | - |
|
||||
| @calendar-info-font-size | `@font-size-xs` | - |
|
||||
| @calendar-info-line-height | `@line-height-xs` | - |
|
||||
| @calendar-selected-day-background-color | `@red` | - |
|
||||
| @calendar-day-disabled-color | `@gray-5` | - |
|
||||
| @calendar-confirm-button-height | `36px` | - |
|
||||
| @calendar-confirm-button-margin | `7px 0` | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 在 iOS 系统上初始化组件失败？
|
||||
|
||||
@ -101,3 +101,26 @@ Use slot to custom content.
|
||||
| tag | Custom thumb tag |
|
||||
| tags | Custom tags |
|
||||
| footer | Custom footer |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| ----------------------------- | ---------------------------- | ----------- |
|
||||
| @card-padding | `@padding-xs @padding-md` | - |
|
||||
| @card-font-size | `@font-size-sm` | - |
|
||||
| @card-text-color | `@text-color` | - |
|
||||
| @card-background-color | `@background-color-light` | - |
|
||||
| @card-thumb-size | `88px` | - |
|
||||
| @card-thumb-border-radius | `@border-radius-lg` | - |
|
||||
| @card-title-line-height | `16px` | - |
|
||||
| @card-desc-color | `@gray-7` | - |
|
||||
| @card-desc-line-height | `@line-height-md` | - |
|
||||
| @card-price-color | `@gray-8` | - |
|
||||
| @card-origin-price-color | `@gray-6` | - |
|
||||
| @card-num-color | `@gray-6` | - |
|
||||
| @card-origin-price-font-size | `@font-size-xs` | - |
|
||||
| @card-price-font-size | `@font-size-sm` | - |
|
||||
| @card-price-integer-font-size | `@font-size-lg` | - |
|
||||
| @card-price-font-family | `@price-integer-font-family` | - |
|
||||
|
||||
@ -107,3 +107,26 @@ app.use(Card);
|
||||
| tag | 自定义图片角标 |
|
||||
| tags | 自定义描述下方标签区域 |
|
||||
| footer | 自定义右下角内容 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ----------------------------- | ---------------------------- | ---- |
|
||||
| @card-padding | `@padding-xs @padding-md` | - |
|
||||
| @card-font-size | `@font-size-sm` | - |
|
||||
| @card-text-color | `@text-color` | - |
|
||||
| @card-background-color | `@background-color-light` | - |
|
||||
| @card-thumb-size | `88px` | - |
|
||||
| @card-thumb-border-radius | `@border-radius-lg` | - |
|
||||
| @card-title-line-height | `16px` | - |
|
||||
| @card-desc-color | `@gray-7` | - |
|
||||
| @card-desc-line-height | `@line-height-md` | - |
|
||||
| @card-price-color | `@gray-8` | - |
|
||||
| @card-origin-price-color | `@gray-6` | - |
|
||||
| @card-num-color | `@gray-6` | - |
|
||||
| @card-origin-price-font-size | `@font-size-xs` | - |
|
||||
| @card-price-font-size | `@font-size-sm` | - |
|
||||
| @card-price-integer-font-size | `@font-size-lg` | - |
|
||||
| @card-price-font-family | `@price-integer-font-family` | - |
|
||||
|
||||
@ -175,3 +175,34 @@ app.use(CellGroup);
|
||||
| label | Custom label |
|
||||
| right-icon | Custom right icon |
|
||||
| extra | Custom extra content on the right |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| --- | --- | --- |
|
||||
| @cell-font-size | `@font-size-md` | - |
|
||||
| @cell-line-height | `24px` | - |
|
||||
| @cell-vertical-padding | `10px` | - |
|
||||
| @cell-horizontal-padding | `@padding-md` | - |
|
||||
| @cell-text-color | `@text-color` | - |
|
||||
| @cell-background-color | `@white` | - |
|
||||
| @cell-border-color | `@border-color` | - |
|
||||
| @cell-active-color | `@active-color` | - |
|
||||
| @cell-required-color | `@red` | - |
|
||||
| @cell-label-color | `@gray-6` | - |
|
||||
| @cell-label-font-size | `@font-size-sm` | - |
|
||||
| @cell-label-line-height | `@line-height-sm` | - |
|
||||
| @cell-label-margin-top | `@padding-base` | - |
|
||||
| @cell-value-color | `@gray-6` | - |
|
||||
| @cell-icon-size | `16px` | - |
|
||||
| @cell-right-icon-color | `@gray-6` | - |
|
||||
| @cell-large-vertical-padding | `@padding-sm` | - |
|
||||
| @cell-large-title-font-size | `@font-size-lg` | - |
|
||||
| @cell-large-label-font-size | `@font-size-md` | - |
|
||||
| @cell-group-background-color | `@white` | - |
|
||||
| @cell-group-title-color | `@gray-6` | - |
|
||||
| @cell-group-title-padding | `@padding-md @padding-md @padding-xs` | - |
|
||||
| @cell-group-title-font-size | `@font-size-md` | - |
|
||||
| @cell-group-title-line-height | `16px` | - |
|
||||
|
||||
@ -182,3 +182,34 @@ app.use(CellGroup);
|
||||
| icon | 自定义左侧图标 |
|
||||
| right-icon | 自定义右侧按钮，默认为`arrow` |
|
||||
| extra | 自定义单元格最右侧的额外内容 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ----------------------------- | ------------------------------------- | ---- |
|
||||
| @cell-font-size | `@font-size-md` | - |
|
||||
| @cell-line-height | `24px` | - |
|
||||
| @cell-vertical-padding | `10px` | - |
|
||||
| @cell-horizontal-padding | `@padding-md` | - |
|
||||
| @cell-text-color | `@text-color` | - |
|
||||
| @cell-background-color | `@white` | - |
|
||||
| @cell-border-color | `@border-color` | - |
|
||||
| @cell-active-color | `@active-color` | - |
|
||||
| @cell-required-color | `@red` | - |
|
||||
| @cell-label-color | `@gray-6` | - |
|
||||
| @cell-label-font-size | `@font-size-sm` | - |
|
||||
| @cell-label-line-height | `@line-height-sm` | - |
|
||||
| @cell-label-margin-top | `@padding-base` | - |
|
||||
| @cell-value-color | `@gray-6` | - |
|
||||
| @cell-icon-size | `16px` | - |
|
||||
| @cell-right-icon-color | `@gray-6` | - |
|
||||
| @cell-large-vertical-padding | `@padding-sm` | - |
|
||||
| @cell-large-title-font-size | `@font-size-lg` | - |
|
||||
| @cell-large-label-font-size | `@font-size-md` | - |
|
||||
| @cell-group-background-color | `@white` | - |
|
||||
| @cell-group-title-color | `@gray-6` | - |
|
||||
| @cell-group-title-padding | `@padding-md @padding-md @padding-xs` | - |
|
||||
| @cell-group-title-font-size | `@font-size-md` | - |
|
||||
| @cell-group-title-line-height | `16px` | - |
|
||||
|
||||
@ -225,7 +225,7 @@ export default {
|
||||
### Checkbox Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| v-model (value) | Check status | _boolean_ | `false` |
|
||||
| name | Checkbox name | _any_ | - |
|
||||
| shape | Can be set to `square` | _string_ | `round` |
|
||||
@ -239,7 +239,7 @@ export default {
|
||||
### CheckboxGroup Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| v-model (value) | Names of all checked checkboxes | _any[]_ | - |
|
||||
| disabled | Whether to disable all checkboxes | _boolean_ | `false` |
|
||||
| max | Maximum amount of checked options | _number \| string_ | `0`(Unlimited) |
|
||||
@ -282,3 +282,19 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Checkb
|
||||
| Name | Description | Attribute | Return value |
|
||||
| ------ | ------------------- | ------------------- | ------------ |
|
||||
| toggle | Toggle check status | _checked?: boolean_ | - |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| --- | --- | --- |
|
||||
| @checkbox-size | `20px` | - |
|
||||
| @checkbox-border-color | `@gray-5` | - |
|
||||
| @checkbox-transition-duration | `@animation-duration-fast` | - |
|
||||
| @checkbox-label-margin | `@padding-xs` | - |
|
||||
| @checkbox-label-color | `@text-color` | - |
|
||||
| @checkbox-checked-icon-color | `@blue` | - |
|
||||
| @checkbox-disabled-icon-color | `@gray-5` | - |
|
||||
| @checkbox-disabled-label-color | `@gray-5` | - |
|
||||
| @checkbox-disabled-background-color | `@border-color` | - |
|
||||
|
||||
@ -306,3 +306,19 @@ export default {
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| --- | --- | --- | --- |
|
||||
| toggle | 切换选中状态，传`true`为选中，`false`为取消选中，不传参为取反 | _checked?: boolean_ | - |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ----------------------------------- | -------------------------- | ---- |
|
||||
| @checkbox-size | `20px` | - |
|
||||
| @checkbox-border-color | `@gray-5` | - |
|
||||
| @checkbox-transition-duration | `@animation-duration-fast` | - |
|
||||
| @checkbox-label-margin | `@padding-xs` | - |
|
||||
| @checkbox-label-color | `@text-color` | - |
|
||||
| @checkbox-checked-icon-color | `@blue` | - |
|
||||
| @checkbox-disabled-icon-color | `@gray-5` | - |
|
||||
| @checkbox-disabled-label-color | `@gray-5` | - |
|
||||
| @checkbox-disabled-background-color | `@border-color` | - |
|
||||
|
||||
@ -130,3 +130,14 @@ export default {
|
||||
| Name | Description |
|
||||
| ------- | ------------------- |
|
||||
| default | custom text content |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| ------------------------ | ------------------- | ----------- |
|
||||
| @circle-text-color | `@text-color` | - |
|
||||
| @circle-text-font-weight | `@font-weight-bold` | - |
|
||||
| @circle-text-font-size | `@font-size-md` | - |
|
||||
| @circle-text-line-height | `@line-height-md` | - |
|
||||
|
||||
@ -146,3 +146,14 @@ export default {
|
||||
| 名称 | 说明 |
|
||||
| ------- | -------------- |
|
||||
| default | 自定义文字内容 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ------------------------ | ------------------- | ---- |
|
||||
| @circle-text-color | `@text-color` | - |
|
||||
| @circle-text-font-weight | `@font-weight-bold` | - |
|
||||
| @circle-text-font-size | `@font-size-md` | - |
|
||||
| @circle-text-line-height | `@line-height-md` | - |
|
||||
|
||||
@ -149,3 +149,17 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Collap
|
||||
| Name | Description | Attribute | Return value |
|
||||
| --- | --- | --- | --- |
|
||||
| toggle `v2.10.9` | Toggle expanded status | _expanded: boolean_ | - |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| --- | --- | --- |
|
||||
| @collapse-item-transition-duration | `@animation-duration-base` | - |
|
||||
| @collapse-item-content-padding | `@padding-sm @padding-md` | - |
|
||||
| @collapse-item-content-font-size | `@font-size-md` | - |
|
||||
| @collapse-item-content-line-height | `1.5` | - |
|
||||
| @collapse-item-content-text-color | `@gray-6` | - |
|
||||
| @collapse-item-content-background-color | `@white` | - |
|
||||
| @collapse-item-title-disabled-color | `@gray-5` | - |
|
||||
|
||||
@ -151,3 +151,17 @@ export default {
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| --- | --- | --- | --- |
|
||||
| toggle `v2.10.9` | 切换面试展开状态，传 `true` 为展开，`false` 为收起，不传参为切换 | _expand?: boolean_ | - |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| --------------------------------------- | -------------------------- | ---- |
|
||||
| @collapse-item-transition-duration | `@animation-duration-base` | - |
|
||||
| @collapse-item-content-padding | `@padding-sm @padding-md` | - |
|
||||
| @collapse-item-content-font-size | `@font-size-md` | - |
|
||||
| @collapse-item-content-line-height | `1.5` | - |
|
||||
| @collapse-item-content-text-color | `@gray-6` | - |
|
||||
| @collapse-item-content-background-color | `@white` | - |
|
||||
| @collapse-item-title-disabled-color | `@gray-5` | - |
|
||||
|
||||
@ -88,3 +88,14 @@ export default {
|
||||
| Event | Description | Arguments |
|
||||
| ----- | --------------------------------- | -------------- |
|
||||
| click | Emitted when component is clicked | _event: Event_ |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| ------------------------------- | ----------------- | ----------- |
|
||||
| @contact-card-padding | `@padding-md` | - |
|
||||
| @contact-card-add-icon-size | `40px` | - |
|
||||
| @contact-card-add-icon-color | `@blue` | - |
|
||||
| @contact-card-value-line-height | `@line-height-md` | - |
|
||||
|
||||
@ -87,3 +87,14 @@ export default {
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------ | ---------- | -------------- |
|
||||
| click | 点击时触发 | _event: Event_ |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ------------------------------- | ----------------- | ---- |
|
||||
| @contact-card-padding | `@padding-md` | - |
|
||||
| @contact-card-add-icon-size | `40px` | - |
|
||||
| @contact-card-add-icon-color | `@blue` | - |
|
||||
| @contact-card-value-line-height | `@line-height-md` | - |
|
||||
|
||||
@ -72,3 +72,16 @@ export default {
|
||||
| ---- | ----------- | -------- |
|
||||
| name | Name | _string_ |
|
||||
| tel | Phone | _string_ |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| ---------------------------------- | ------------------- | ----------- |
|
||||
| @contact-edit-padding | `@padding-md` | - |
|
||||
| @contact-edit-fields-radius | `@border-radius-md` | - |
|
||||
| @contact-edit-buttons-padding | `@padding-xl 0` | - |
|
||||
| @contact-edit-button-margin-bottom | `@padding-sm` | - |
|
||||
| @contact-edit-button-font-size | `16px` | - |
|
||||
| @contact-edit-field-label-width | `4.1em` | - |
|
||||
|
||||
@ -76,3 +76,16 @@ export default {
|
||||
| ---- | ------------ | ------------------ |
|
||||
| name | 联系人姓名 | _string_ |
|
||||
| tel | 联系人手机号 | _number \| string_ |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ---------------------------------- | ------------------- | ---- |
|
||||
| @contact-edit-padding | `@padding-md` | - |
|
||||
| @contact-edit-fields-radius | `@border-radius-md` | - |
|
||||
| @contact-edit-buttons-padding | `@padding-xl 0` | - |
|
||||
| @contact-edit-button-margin-bottom | `@padding-sm` | - |
|
||||
| @contact-edit-button-font-size | `16px` | - |
|
||||
| @contact-edit-field-label-width | `4.1em` | - |
|
||||
|
||||
@ -88,3 +88,13 @@ export default {
|
||||
| name | Name | _string_ |
|
||||
| tel | Phone | _string_ |
|
||||
| isDefault | Is default contact | _boolean_ |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| -------------------------------- | ------------- | ----------- |
|
||||
| @contact-list-edit-icon-size | `16px` | - |
|
||||
| @contact-list-add-button-z-index | `999` | - |
|
||||
| @contact-list-item-padding | `@padding-md` | - |
|
||||
|
||||
@ -92,3 +92,13 @@ export default {
|
||||
| name | 联系人姓名 | _string_ |
|
||||
| tel | 联系人手机号 | _number \| string_ |
|
||||
| isDefault | 是否为默认联系人 | _boolean_ |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| -------------------------------- | ------------- | ---- |
|
||||
| @contact-list-edit-icon-size | `16px` | - |
|
||||
| @contact-list-add-button-z-index | `999` | - |
|
||||
| @contact-list-item-padding | `@padding-md` | - |
|
||||
|
||||
@ -165,3 +165,13 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get CountD
|
||||
| start | Start count down | - | - |
|
||||
| pause | Pause count down | - | - |
|
||||
| reset | Reset count down | - | - |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| ----------------------- | ----------------- | ----------- |
|
||||
| @count-down-text-color | `@text-color` | - |
|
||||
| @count-down-font-size | `@font-size-md` | - |
|
||||
| @count-down-line-height | `@line-height-md` | - |
|
||||
|
||||
@ -178,7 +178,17 @@ export default {
|
||||
| --- | --- | --- | --- |
|
||||
| start | 开始倒计时 | - | - |
|
||||
| pause | 暂停倒计时 | - | - |
|
||||
| reset | 重设倒计时，若`auto-start`为`true`，重设后会自动开始倒计时 | - | - |
|
||||
| reset | 重设倒计时，若 `auto-start` 为 `true`，重设后会自动开始倒计时 | - | - |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ----------------------- | ----------------- | ---- |
|
||||
| @count-down-text-color | `@text-color` | - |
|
||||
| @count-down-font-size | `@font-size-md` | - |
|
||||
| @count-down-line-height | `@line-height-md` | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
|
||||
@ -88,7 +88,7 @@ export default {
|
||||
### CouponList Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| v-model | Current exchange code | _string_ | - |
|
||||
| chosen-coupon | Index of chosen coupon | _number_ | `-1` |
|
||||
| coupons | Coupon list | _Coupon[]_ | `[]` |
|
||||
@ -127,3 +127,34 @@ export default {
|
||||
| value | Value | _number_ |
|
||||
| valueDesc | Value Text | _string_ |
|
||||
| unitDesc | Unit Text | _string_ |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| --- | --- | --- |
|
||||
| @coupon-margin | `0 @padding-sm @padding-sm` | - |
|
||||
| @coupon-content-height | `84px` | - |
|
||||
| @coupon-content-padding | `14px 0` | - |
|
||||
| @coupon-background-color | `@white` | - |
|
||||
| @coupon-active-background-color | `@active-color` | - |
|
||||
| @coupon-border-radius | `@border-radius-lg` | - |
|
||||
| @coupon-box-shadow | `0 0 4px rgba(0, 0, 0, 0.1)` | - |
|
||||
| @coupon-head-width | `96px` | - |
|
||||
| @coupon-amount-color | `@red` | - |
|
||||
| @coupon-amount-font-size | `30px` | - |
|
||||
| @coupon-currency-font-size | `40%` | - |
|
||||
| @coupon-name-font-size | `@font-size-md` | - |
|
||||
| @coupon-disabled-text-color | `@gray-6` | - |
|
||||
| @coupon-description-padding | `@padding-xs @padding-md` | - |
|
||||
| @coupon-description-border-color | `@border-color` | - |
|
||||
| @coupon-list-background-color | `@background-color` | - |
|
||||
| @coupon-list-field-padding | `5px 0 5px @padding-md` | - |
|
||||
| @coupon-list-exchange-button-height | `32px` | - |
|
||||
| @coupon-list-close-button-height | `40px` | - |
|
||||
| @coupon-list-empty-image-size | `200px` | - |
|
||||
| @coupon-list-empty-tip-color | `@gray-6` | - |
|
||||
| @coupon-list-empty-tip-font-size | `@font-size-md` | - |
|
||||
| @coupon-list-empty-tip-line-height | `@line-height-md` | - |
|
||||
| @coupon-cell-selected-text-color | `@text-color` | - |
|
||||
|
||||
@ -77,13 +77,13 @@ export default {
|
||||
### CouponCell Props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------- | -------------------- | ------------------ | -------- |
|
||||
| ------------- | -------------------- | ------------------ | -------- | --- |
|
||||
| title | 单元格标题 | _string_ | `优惠券` |
|
||||
| chosen-coupon | 当前选中优惠券的索引 | _number \| string_ | `-1` |
|
||||
| coupons | 可用优惠券列表 | _Coupon[]_ | `[]` |
|
||||
| editable | 能否切换优惠券 | _boolean_ | `true` |
|
||||
| border | 是否显示内边框 | _boolean_ | `true` |
|
||||
| currency | 货币符号 | _string_ | `¥` | - |
|
||||
| currency | 货币符号 | _string_ | `¥` | - |
|
||||
|
||||
### CouponList Props
|
||||
|
||||
@ -129,3 +129,34 @@ export default {
|
||||
| value | 折扣券优惠金额，单位分 | _number_ |
|
||||
| valueDesc | 折扣券优惠金额文案 | _string_ |
|
||||
| unitDesc | 单位文案 | _string_ |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ----------------------------------- | ---------------------------- | ---- |
|
||||
| @coupon-margin | `0 @padding-sm @padding-sm` | - |
|
||||
| @coupon-content-height | `84px` | - |
|
||||
| @coupon-content-padding | `14px 0` | - |
|
||||
| @coupon-background-color | `@white` | - |
|
||||
| @coupon-active-background-color | `@active-color` | - |
|
||||
| @coupon-border-radius | `@border-radius-lg` | - |
|
||||
| @coupon-box-shadow | `0 0 4px rgba(0, 0, 0, 0.1)` | - |
|
||||
| @coupon-head-width | `96px` | - |
|
||||
| @coupon-amount-color | `@red` | - |
|
||||
| @coupon-amount-font-size | `30px` | - |
|
||||
| @coupon-currency-font-size | `40%` | - |
|
||||
| @coupon-name-font-size | `@font-size-md` | - |
|
||||
| @coupon-disabled-text-color | `@gray-6` | - |
|
||||
| @coupon-description-padding | `@padding-xs @padding-md` | - |
|
||||
| @coupon-description-border-color | `@border-color` | - |
|
||||
| @coupon-list-background-color | `@background-color` | - |
|
||||
| @coupon-list-field-padding | `5px 0 5px @padding-md` | - |
|
||||
| @coupon-list-exchange-button-height | `32px` | - |
|
||||
| @coupon-list-close-button-height | `40px` | - |
|
||||
| @coupon-list-empty-image-size | `200px` | - |
|
||||
| @coupon-list-empty-tip-color | `@gray-6` | - |
|
||||
| @coupon-list-empty-tip-font-size | `@font-size-md` | - |
|
||||
| @coupon-list-empty-tip-line-height | `@line-height-md` | - |
|
||||
| @coupon-cell-selected-text-color | `@text-color` | - |
|
||||
|
||||
@ -205,3 +205,29 @@ export default {
|
||||
| ------- | -------------- |
|
||||
| default | Custom message |
|
||||
| title | Custom title |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| --- | --- | --- |
|
||||
| @dialog-width | `320px` | - |
|
||||
| @dialog-small-screen-width | `90%` | - |
|
||||
| @dialog-font-size | `@font-size-lg` | - |
|
||||
| @dialog-transition | `@animation-duration-base` | - |
|
||||
| @dialog-border-radius | `16px` | - |
|
||||
| @dialog-background-color | `@white` | - |
|
||||
| @dialog-header-font-weight | `@font-weight-bold` | - |
|
||||
| @dialog-header-line-height | `24px` | - |
|
||||
| @dialog-header-padding-top | `26px` | - |
|
||||
| @dialog-header-isolated-padding | `@padding-lg 0` | - |
|
||||
| @dialog-message-padding | `@padding-lg` | - |
|
||||
| @dialog-message-font-size | `@font-size-md` | - |
|
||||
| @dialog-message-line-height | `@line-height-md` | - |
|
||||
| @dialog-message-max-height | `60vh` | - |
|
||||
| @dialog-has-title-message-text-color | `@gray-7` | - |
|
||||
| @dialog-has-title-message-padding-top | `@padding-xs` | - |
|
||||
| @dialog-button-height | `48px` | - |
|
||||
| @dialog-round-button-height | `36px` | - |
|
||||
| @dialog-confirm-button-text-color | `@red` | - |
|
||||
|
||||
@ -246,3 +246,29 @@ export default {
|
||||
| ------- | ---------- |
|
||||
| default | 自定义内容 |
|
||||
| title | 自定义标题 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ------------------------------------- | -------------------------- | ---- |
|
||||
| @dialog-width | `320px` | - |
|
||||
| @dialog-small-screen-width | `90%` | - |
|
||||
| @dialog-font-size | `@font-size-lg` | - |
|
||||
| @dialog-transition | `@animation-duration-base` | - |
|
||||
| @dialog-border-radius | `16px` | - |
|
||||
| @dialog-background-color | `@white` | - |
|
||||
| @dialog-header-font-weight | `@font-weight-bold` | - |
|
||||
| @dialog-header-line-height | `24px` | - |
|
||||
| @dialog-header-padding-top | `26px` | - |
|
||||
| @dialog-header-isolated-padding | `@padding-lg 0` | - |
|
||||
| @dialog-message-padding | `@padding-lg` | - |
|
||||
| @dialog-message-font-size | `@font-size-md` | - |
|
||||
| @dialog-message-line-height | `@line-height-md` | - |
|
||||
| @dialog-message-max-height | `60vh` | - |
|
||||
| @dialog-has-title-message-text-color | `@gray-7` | - |
|
||||
| @dialog-has-title-message-padding-top | `@padding-xs` | - |
|
||||
| @dialog-button-height | `48px` | - |
|
||||
| @dialog-round-button-height | `36px` | - |
|
||||
| @dialog-confirm-button-text-color | `@red` | - |
|
||||
|
||||
@ -62,3 +62,18 @@ app.use(Divider);
|
||||
| Name | Description |
|
||||
| ------- | ----------- |
|
||||
| default | content |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| ---------------------------- | --------------- | ----------- |
|
||||
| @divider-margin | `@padding-md 0` | - |
|
||||
| @divider-text-color | `@gray-6` | - |
|
||||
| @divider-font-size | `@font-size-md` | - |
|
||||
| @divider-line-height | `24px` | - |
|
||||
| @divider-border-color | `@border-color` | - |
|
||||
| @divider-content-padding | `@padding-md` | - |
|
||||
| @divider-content-left-width | `10%` | - |
|
||||
| @divider-content-right-width | `10%` | - |
|
||||
|
||||
@ -76,3 +76,18 @@ app.use(Divider);
|
||||
| 名称 | 说明 |
|
||||
| ------- | ---- |
|
||||
| default | 内容 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ---------------------------- | --------------- | ---- |
|
||||
| @divider-margin | `@padding-md 0` | - |
|
||||
| @divider-text-color | `@gray-6` | - |
|
||||
| @divider-font-size | `@font-size-md` | - |
|
||||
| @divider-line-height | `24px` | - |
|
||||
| @divider-border-color | `@border-color` | - |
|
||||
| @divider-content-padding | `@padding-md` | - |
|
||||
| @divider-content-left-width | `10%` | - |
|
||||
| @divider-content-right-width | `10%` | - |
|
||||
|
||||
@ -177,3 +177,22 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Dropdo
|
||||
| text | Text | _string_ |
|
||||
| value | Value | _number \| string_ |
|
||||
| icon | Left icon | _string_ |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| --- | --- | --- |
|
||||
| @dropdown-menu-height | `48px` | - |
|
||||
| @dropdown-menu-background-color | `@white` | - |
|
||||
| @dropdown-menu-box-shadow | `0 2px 12px fade(@gray-7, 12)` | - |
|
||||
| @dropdown-menu-title-font-size | `15px` | - |
|
||||
| @dropdown-menu-title-text-color | `@text-color` | - |
|
||||
| @dropdown-menu-title-active-text-color | `@red` | - |
|
||||
| @dropdown-menu-title-disabled-text-color | `@gray-6` | - |
|
||||
| @dropdown-menu-title-padding | `0 @padding-xs` | - |
|
||||
| @dropdown-menu-title-line-height | `@line-height-lg` | - |
|
||||
| @dropdown-menu-option-active-color | `@red` | - |
|
||||
| @dropdown-menu-content-max-height | `80%` | - |
|
||||
| @dropdown-item-z-index | `10` | - |
|
||||
|
||||
@ -185,3 +185,22 @@ export default {
|
||||
| text | 文字 | _string_ |
|
||||
| value | 标识符 | _number \| string_ |
|
||||
| icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| --- | --- | --- |
|
||||
| @dropdown-menu-height | `48px` | - |
|
||||
| @dropdown-menu-background-color | `@white` | - |
|
||||
| @dropdown-menu-box-shadow | `0 2px 12px fade(@gray-7, 12)` | - |
|
||||
| @dropdown-menu-title-font-size | `15px` | - |
|
||||
| @dropdown-menu-title-text-color | `@text-color` | - |
|
||||
| @dropdown-menu-title-active-text-color | `@red` | - |
|
||||
| @dropdown-menu-title-disabled-text-color | `@gray-6` | - |
|
||||
| @dropdown-menu-title-padding | `0 @padding-xs` | - |
|
||||
| @dropdown-menu-title-line-height | `@line-height-lg` | - |
|
||||
| @dropdown-menu-option-active-color | `@red` | - |
|
||||
| @dropdown-menu-content-max-height | `80%` | - |
|
||||
| @dropdown-item-z-index | `10` | - |
|
||||
|
||||
@ -51,9 +51,7 @@ Use the image prop to display different placeholder images.
|
||||
|
||||
```html
|
||||
<van-empty description="Description">
|
||||
<van-button round type="danger" class="bottom-button">
|
||||
Button
|
||||
</van-button>
|
||||
<van-button round type="danger" class="bottom-button"> Button </van-button>
|
||||
</van-empty>
|
||||
|
||||
<style>
|
||||
@ -81,3 +79,18 @@ Use the image prop to display different placeholder images.
|
||||
| default | Custom bottom content |
|
||||
| image | Custom image |
|
||||
| description | Custom description |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| ------------------------------ | ----------------- | ----------- |
|
||||
| @empty-padding | `@padding-xl 0` | - |
|
||||
| @empty-image-size | `160px` | - |
|
||||
| @empty-description-margin-top | `@padding-md` | - |
|
||||
| @empty-description-padding | `0 60px` | - |
|
||||
| @empty-description-color | `@gray-6` | - |
|
||||
| @empty-description-font-size | `@font-size-md` | - |
|
||||
| @empty-description-line-height | `@line-height-md` | - |
|
||||
| @empty-bottom-margin-top | `24px` | - |
|
||||
|
||||
@ -60,9 +60,7 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下
|
||||
|
||||
```html
|
||||
<van-empty description="描述文字">
|
||||
<van-button round type="danger" class="bottom-button">
|
||||
按钮
|
||||
</van-button>
|
||||
<van-button round type="danger" class="bottom-button"> 按钮 </van-button>
|
||||
</van-empty>
|
||||
|
||||
<style>
|
||||
@ -90,3 +88,18 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下
|
||||
| default | 自定义底部内容 |
|
||||
| image | 自定义图标 |
|
||||
| description | 自定义描述文字 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ------------------------------ | ----------------- | ---- |
|
||||
| @empty-padding | `@padding-xl 0` | - |
|
||||
| @empty-image-size | `160px` | - |
|
||||
| @empty-description-margin-top | `@padding-md` | - |
|
||||
| @empty-description-padding | `0 60px` | - |
|
||||
| @empty-description-color | `@gray-6` | - |
|
||||
| @empty-description-font-size | `@font-size-md` | - |
|
||||
| @empty-description-line-height | `@line-height-md` | - |
|
||||
| @empty-bottom-margin-top | `24px` | - |
|
||||
|
||||
@ -288,3 +288,28 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Field
|
||||
| right-icon | Custom right icon |
|
||||
| button | Insert button |
|
||||
| extra `v2.8.2` | Custom content on the right |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| -------------------------------- | --------------- | ----------- |
|
||||
| @field-label-width | `6.2em` | - |
|
||||
| @field-label-color | `@gray-7` | - |
|
||||
| @field-label-margin-right | `@padding-sm` | - |
|
||||
| @field-input-text-color | `@text-color` | - |
|
||||
| @field-input-error-text-color | `@red` | - |
|
||||
| @field-input-disabled-text-color | `@gray-5` | - |
|
||||
| @field-placeholder-text-color | `@gray-5` | - |
|
||||
| @field-icon-size | `16px` | - |
|
||||
| @field-clear-icon-size | `16px` | - |
|
||||
| @field-clear-icon-color | `@gray-5` | - |
|
||||
| @field-right-icon-color | `@gray-6` | - |
|
||||
| @field-error-message-color | `@red` | - |
|
||||
| @field-error-message-text-color | `12px` | - |
|
||||
| @field-text-area-min-height | `60px` | - |
|
||||
| @field-word-limit-color | `@gray-7` | - |
|
||||
| @field-word-limit-font-size | `@font-size-sm` | - |
|
||||
| @field-word-limit-line-height | `16px` | - |
|
||||
| @field-disabled-text-color | `@gray-5` | - |
|
||||
|
||||
@ -312,6 +312,31 @@ export default {
|
||||
| button | 自定义输入框尾部按钮 |
|
||||
| extra `v2.8.2` | 自定义输入框最右侧的额外内容 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| -------------------------------- | --------------- | ---- |
|
||||
| @field-label-width | `6.2em` | - |
|
||||
| @field-label-color | `@gray-7` | - |
|
||||
| @field-label-margin-right | `@padding-sm` | - |
|
||||
| @field-input-text-color | `@text-color` | - |
|
||||
| @field-input-error-text-color | `@red` | - |
|
||||
| @field-input-disabled-text-color | `@gray-5` | - |
|
||||
| @field-placeholder-text-color | `@gray-5` | - |
|
||||
| @field-icon-size | `16px` | - |
|
||||
| @field-clear-icon-size | `16px` | - |
|
||||
| @field-clear-icon-color | `@gray-5` | - |
|
||||
| @field-right-icon-color | `@gray-6` | - |
|
||||
| @field-error-message-color | `@red` | - |
|
||||
| @field-error-message-text-color | `12px` | - |
|
||||
| @field-text-area-min-height | `60px` | - |
|
||||
| @field-word-limit-color | `@gray-7` | - |
|
||||
| @field-word-limit-font-size | `@font-size-sm` | - |
|
||||
| @field-word-limit-line-height | `16px` | - |
|
||||
| @field-disabled-text-color | `@gray-5` | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 设置 type 为 number 后，为什么 input 标签的类型仍为 text?
|
||||
|
||||
@ -133,3 +133,16 @@ app.use(GridItem);
|
||||
| default | Custom content |
|
||||
| icon | Custom icon |
|
||||
| text | Custom text |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| --- | --- | --- |
|
||||
| @grid-item-content-padding | `@padding-md @padding-xs` | - |
|
||||
| @grid-item-content-background-color | `@white` | - |
|
||||
| @grid-item-content-active-color | `@active-color` | - |
|
||||
| @grid-item-icon-size | `28px` | - |
|
||||
| @grid-item-text-color | `@gray-7` | - |
|
||||
| @grid-item-text-font-size | `@font-size-sm` | - |
|
||||
|
||||
@ -153,3 +153,16 @@ app.use(GridItem);
|
||||
| default | 自定义宫格的所有内容 |
|
||||
| icon | 自定义图标 |
|
||||
| text | 自定义文字 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ----------------------------------- | ------------------------- | ---- |
|
||||
| @grid-item-content-padding | `@padding-md @padding-xs` | - |
|
||||
| @grid-item-content-background-color | `@white` | - |
|
||||
| @grid-item-content-active-color | `@active-color` | - |
|
||||
| @grid-item-icon-size | `28px` | - |
|
||||
| @grid-item-text-color | `@gray-7` | - |
|
||||
| @grid-item-text-font-size | `@font-size-sm` | - |
|
||||
|
||||
@ -189,3 +189,20 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get ImagePreview instance and call i
|
||||
| --------- | ---------------------- | -------- |
|
||||
| index | Index of current image | _number_ |
|
||||
| scale | scale of current image | _number_ |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| --------------------------------------- | -------------------- | ----------- |
|
||||
| @image-preview-index-text-color | `@white` | - |
|
||||
| @image-preview-index-font-size | `@font-size-md` | - |
|
||||
| @image-preview-index-line-height | `@line-height-md` | - |
|
||||
| @image-preview-index-text-shadow | `0 1px 1px @gray-8` | - |
|
||||
| @image-preview-overlay-background-color | `rgba(0, 0, 0, 0.9)` | - |
|
||||
| @image-preview-close-icon-size | `22px` | - |
|
||||
| @image-preview-close-icon-color | `@gray-5` | - |
|
||||
| @image-preview-close-icon-active-color | `@gray-6` | - |
|
||||
| @image-preview-close-icon-margin | `@padding-md` | - |
|
||||
| @image-preview-close-icon-z-index | `1` | - |
|
||||
|
||||
@ -233,6 +233,23 @@ export default {
|
||||
| index | 当前图片的索引值 | _number_ |
|
||||
| scale | 当前图片的缩放值 | _number_ |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| --------------------------------------- | -------------------- | ---- |
|
||||
| @image-preview-index-text-color | `@white` | - |
|
||||
| @image-preview-index-font-size | `@font-size-md` | - |
|
||||
| @image-preview-index-line-height | `@line-height-md` | - |
|
||||
| @image-preview-index-text-shadow | `0 1px 1px @gray-8` | - |
|
||||
| @image-preview-overlay-background-color | `rgba(0, 0, 0, 0.9)` | - |
|
||||
| @image-preview-close-icon-size | `22px` | - |
|
||||
| @image-preview-close-icon-color | `@gray-5` | - |
|
||||
| @image-preview-close-icon-active-color | `@gray-6` | - |
|
||||
| @image-preview-close-icon-margin | `@padding-md` | - |
|
||||
| @image-preview-close-icon-z-index | `1` | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 在桌面端无法操作组件？
|
||||
|
||||
@ -106,3 +106,17 @@ app.use(Lazyload);
|
||||
| default `v2.9.0` | Custom the content below the image |
|
||||
| loading | Custom loading placeholder |
|
||||
| error | Custom error placeholder |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| ----------------------------------- | ------------------- | ----------- |
|
||||
| @image-placeholder-text-color | `@gray-6` | - |
|
||||
| @image-placeholder-font-size | `@font-size-md` | - |
|
||||
| @image-placeholder-background-color | `@background-color` | - |
|
||||
| @image-loading-icon-size | `32px` | - |
|
||||
| @image-loading-icon-color | `@gray-4` | - |
|
||||
| @image-error-icon-size | `32px` | - |
|
||||
| @image-error-icon-color | `@gray-4` | - |
|
||||
|
||||
@ -139,6 +139,20 @@ app.use(Lazyload);
|
||||
| loading | 自定义加载中的提示内容 |
|
||||
| error | 自定义加载失败时的提示内容 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ----------------------------------- | ------------------- | ---- |
|
||||
| @image-placeholder-text-color | `@gray-6` | - |
|
||||
| @image-placeholder-font-size | `@font-size-md` | - |
|
||||
| @image-placeholder-background-color | `@background-color` | - |
|
||||
| @image-loading-icon-size | `32px` | - |
|
||||
| @image-loading-icon-color | `@gray-4` | - |
|
||||
| @image-error-icon-size | `32px` | - |
|
||||
| @image-error-icon-color | `@gray-4` | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 如何引用本地图片？
|
||||
|
||||
@ -64,7 +64,7 @@ export default {
|
||||
### IndexBar Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| index-list | Index List | _string[] \| number[]_ | `A-Z` |
|
||||
| z-index | z-index | _number \| string_ | `1` |
|
||||
| sticky | Whether to enable anchor sticky top | _boolean_ | `true` |
|
||||
@ -89,3 +89,23 @@ export default {
|
||||
| Name | Description |
|
||||
| ------- | ------------------------------------- |
|
||||
| default | Anchor content, show index by default |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| ------------------------------------- | ------------------- | ----------- |
|
||||
| @index-bar-sidebar-z-index | `2` | - |
|
||||
| @index-bar-index-font-size | `@font-size-xs` | - |
|
||||
| @index-bar-index-line-height | `@line-height-xs` | - |
|
||||
| @index-bar-index-active-color | `@green` | - |
|
||||
| @index-anchor-z-index | `1` | - |
|
||||
| @index-anchor-padding | `0 @padding-md` | - |
|
||||
| @index-anchor-text-color | `@text-color` | - |
|
||||
| @index-anchor-font-weight | `@font-weight-bold` | - |
|
||||
| @index-anchor-font-size | `@font-size-md` | - |
|
||||
| @index-anchor-line-height | `32px` | - |
|
||||
| @index-anchor-background-color | `transparent` | - |
|
||||
| @index-anchor-sticky-text-color | `@green` | - |
|
||||
| @index-anchor-sticky-background-color | `@white` | - |
|
||||
|
||||
@ -93,3 +93,23 @@ export default {
|
||||
| 名称 | 说明 |
|
||||
| ------- | -------------------------------- |
|
||||
| default | 锚点位置显示内容，默认为索引字符 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ------------------------------------- | ------------------- | ---- |
|
||||
| @index-bar-sidebar-z-index | `2` | - |
|
||||
| @index-bar-index-font-size | `@font-size-xs` | - |
|
||||
| @index-bar-index-line-height | `@line-height-xs` | - |
|
||||
| @index-bar-index-active-color | `@green` | - |
|
||||
| @index-anchor-z-index | `1` | - |
|
||||
| @index-anchor-padding | `0 @padding-md` | - |
|
||||
| @index-anchor-text-color | `@text-color` | - |
|
||||
| @index-anchor-font-weight | `@font-weight-bold` | - |
|
||||
| @index-anchor-font-size | `@font-size-md` | - |
|
||||
| @index-anchor-line-height | `32px` | - |
|
||||
| @index-anchor-background-color | `transparent` | - |
|
||||
| @index-anchor-sticky-text-color | `@green` | - |
|
||||
| @index-anchor-sticky-background-color | `@white` | - |
|
||||
|
||||
@ -177,3 +177,14 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get List i
|
||||
| loading | Custom loading tips |
|
||||
| finished | Custom finished tips |
|
||||
| error | Custom error tips |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| ----------------------- | --------------- | ----------- |
|
||||
| @list-icon-margin-right | `5px` | - |
|
||||
| @list-text-color | `@gray-6` | - |
|
||||
| @list-text-font-size | `@font-size-md` | - |
|
||||
| @list-text-line-height | `50px` | - |
|
||||
|
||||
@ -193,6 +193,17 @@ export default {
|
||||
| finished | 自定义加载完成后的提示文案 |
|
||||
| error | 自定义加载失败后的提示文案 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ----------------------- | --------------- | ---- |
|
||||
| @list-icon-margin-right | `5px` | - |
|
||||
| @list-text-color | `@gray-6` | - |
|
||||
| @list-text-font-size | `@font-size-md` | - |
|
||||
| @list-text-line-height | `50px` | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### List 的运行机制是什么？
|
||||
|
||||
@ -65,3 +65,15 @@ app.use(Loading);
|
||||
| Name | Description |
|
||||
| ------- | ------------ |
|
||||
| default | Loading text |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| ----------------------------------- | --------------- | ----------- |
|
||||
| @loading-text-color | `@gray-6` | - |
|
||||
| @loading-text-font-size | `@font-size-md` | - |
|
||||
| @loading-spinner-color | `@gray-5` | - |
|
||||
| @loading-spinner-size | `30px` | - |
|
||||
| @loading-spinner-animation-duration | `0.8s` | - |
|
||||
|
||||
@ -79,3 +79,15 @@ app.use(Loading);
|
||||
| 名称 | 说明 |
|
||||
| ------- | -------- |
|
||||
| default | 加载文案 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ----------------------------------- | --------------- | ---- |
|
||||
| @loading-text-color | `@gray-6` | - |
|
||||
| @loading-text-font-size | `@font-size-md` | - |
|
||||
| @loading-spinner-color | `@gray-5` | - |
|
||||
| @loading-spinner-size | `30px` | - |
|
||||
| @loading-spinner-animation-duration | `0.8s` | - |
|
||||
|
||||
@ -80,3 +80,18 @@ export default {
|
||||
| ----------- | ---------------------------------------- | --------- |
|
||||
| click-left | Emitted when the left button is clicked | - |
|
||||
| click-right | Emitted when the right button is clicked | - |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| ------------------------- | --------------- | ----------- |
|
||||
| @nav-bar-height | `46px` | - |
|
||||
| @nav-bar-background-color | `@white` | - |
|
||||
| @nav-bar-arrow-size | `16px` | - |
|
||||
| @nav-bar-icon-color | `@blue` | - |
|
||||
| @nav-bar-text-color | `@blue` | - |
|
||||
| @nav-bar-title-font-size | `@font-size-lg` | - |
|
||||
| @nav-bar-title-text-color | `@text-color` | - |
|
||||
| @nav-bar-z-index | `1` | - |
|
||||
|
||||
@ -82,3 +82,18 @@ export default {
|
||||
| ----------- | ------------------ | -------- |
|
||||
| click-left | 点击左侧按钮时触发 | - |
|
||||
| click-right | 点击右侧按钮时触发 | - |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ------------------------- | --------------- | ---- |
|
||||
| @nav-bar-height | `46px` | - |
|
||||
| @nav-bar-background-color | `@white` | - |
|
||||
| @nav-bar-arrow-size | `16px` | - |
|
||||
| @nav-bar-icon-color | `@blue` | - |
|
||||
| @nav-bar-text-color | `@blue` | - |
|
||||
| @nav-bar-title-font-size | `@font-size-lg` | - |
|
||||
| @nav-bar-title-text-color | `@text-color` | - |
|
||||
| @nav-bar-z-index | `1` | - |
|
||||
|
||||
@ -34,21 +34,15 @@ app.use(NoticeBar);
|
||||
### Wrapable
|
||||
|
||||
```html
|
||||
<van-notice-bar wrapable :scrollable="false">
|
||||
Notice Content
|
||||
</van-notice-bar>
|
||||
<van-notice-bar wrapable :scrollable="false"> Notice Content </van-notice-bar>
|
||||
```
|
||||
|
||||
### Mode
|
||||
|
||||
```html
|
||||
<van-notice-bar mode="closeable">
|
||||
Notice Content
|
||||
</van-notice-bar>
|
||||
<van-notice-bar mode="closeable"> Notice Content </van-notice-bar>
|
||||
|
||||
<van-notice-bar mode="link">
|
||||
Notice Content
|
||||
</van-notice-bar>
|
||||
<van-notice-bar mode="link"> Notice Content </van-notice-bar>
|
||||
```
|
||||
|
||||
### Custom Style
|
||||
@ -88,7 +82,7 @@ app.use(NoticeBar);
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| mode | Mode, can be set to `closeable` `link` | _string_ | `''` |
|
||||
| text | Notice text content | _string_ | `''` | - |
|
||||
| color | Text color | _string_ | `#f60` |
|
||||
@ -114,3 +108,19 @@ app.use(NoticeBar);
|
||||
| default | Notice text content |
|
||||
| left-icon | Custom left icon |
|
||||
| right-icon | Custom right icon |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| ---------------------------- | ------------------------- | ----------- |
|
||||
| @notice-bar-height | `40px` | - |
|
||||
| @notice-bar-padding | `0 @padding-md` | - |
|
||||
| @notice-bar-wrapable-padding | `@padding-xs @padding-md` | - |
|
||||
| @notice-bar-text-color | `@orange-dark` | - |
|
||||
| @notice-bar-font-size | `@font-size-md` | - |
|
||||
| @notice-bar-line-height | `24px` | - |
|
||||
| @notice-bar-background-color | `@orange-light` | - |
|
||||
| @notice-bar-icon-size | `16px` | - |
|
||||
| @notice-bar-icon-min-width | `24px` | - |
|
||||
|
||||
@ -60,14 +60,10 @@ app.use(NoticeBar);
|
||||
|
||||
```html
|
||||
<!-- closeable 模式，在右侧显示关闭按钮 -->
|
||||
<van-notice-bar mode="closeable">
|
||||
技术是开发它的人的共同灵魂。
|
||||
</van-notice-bar>
|
||||
<van-notice-bar mode="closeable"> 技术是开发它的人的共同灵魂。 </van-notice-bar>
|
||||
|
||||
<!-- link 模式，在右侧显示链接箭头 -->
|
||||
<van-notice-bar mode="link">
|
||||
技术是开发它的人的共同灵魂。
|
||||
</van-notice-bar>
|
||||
<van-notice-bar mode="link"> 技术是开发它的人的共同灵魂。 </van-notice-bar>
|
||||
```
|
||||
|
||||
### 自定义样式
|
||||
@ -137,3 +133,19 @@ app.use(NoticeBar);
|
||||
| default | 通知文本内容 |
|
||||
| left-icon | 自定义左侧图标 |
|
||||
| right-icon | 自定义右侧图标 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ---------------------------- | ------------------------- | ---- |
|
||||
| @notice-bar-height | `40px` | - |
|
||||
| @notice-bar-padding | `0 @padding-md` | - |
|
||||
| @notice-bar-wrapable-padding | `@padding-xs @padding-md` | - |
|
||||
| @notice-bar-text-color | `@orange-dark` | - |
|
||||
| @notice-bar-font-size | `@font-size-md` | - |
|
||||
| @notice-bar-line-height | `24px` | - |
|
||||
| @notice-bar-background-color | `@orange-light` | - |
|
||||
| @notice-bar-icon-size | `16px` | - |
|
||||
| @notice-bar-icon-min-width | `24px` | - |
|
||||
|
||||
@ -87,7 +87,7 @@ export default {
|
||||
### Methods
|
||||
|
||||
| Methods | Attribute | Return value | Description |
|
||||
| --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Notify | `options | message` | notify instance | Show notify |
|
||||
| Notify.clear | - | `void` | Close notify |
|
||||
| Notify.setDefaultOptions | `options` | `void` | Set default options of all notifies |
|
||||
@ -96,7 +96,7 @@ export default {
|
||||
### Options
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| type | Can be set to `primary` `success` `warning` | _string_ | `danger` |
|
||||
| message | Message | _string_ | - |
|
||||
| duration | Duration(ms), won't disappear if value is 0 | _number \| string_ | `3000` |
|
||||
@ -106,3 +106,18 @@ export default {
|
||||
| onClick | Callback function after click | _Function_ | - |
|
||||
| onOpened | Callback function after opened | _Function_ | - |
|
||||
| onClose | Callback function after close | _Function_ | - |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| -------------------------------- | ------------------------- | ----------- |
|
||||
| @notify-text-color | `@white` | - |
|
||||
| @notify-padding | `@padding-xs @padding-md` | - |
|
||||
| @notify-font-size | `@font-size-md` | - |
|
||||
| @notify-line-height | `@line-height-md` | - |
|
||||
| @notify-primary-background-color | `@blue` | - |
|
||||
| @notify-success-background-color | `@green` | - |
|
||||
| @notify-danger-background-color | `@red` | - |
|
||||
| @notify-warning-background-color | `@orange` | - |
|
||||
|
||||
@ -124,7 +124,7 @@ export default {
|
||||
### 方法
|
||||
|
||||
| 方法名 | 说明 | 参数 | 返回值 |
|
||||
| --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| Notify | 展示提示 | `options | message` | notify 实例 |
|
||||
| Notify.clear | 关闭提示 | - | `void` |
|
||||
| Notify.setDefaultOptions | 修改默认配置，对所有 Notify 生效 | `options` | `void` |
|
||||
@ -143,3 +143,18 @@ export default {
|
||||
| onClick | 点击时的回调函数 | _Function_ | - |
|
||||
| onOpened | 完全展示后的回调函数 | _Function_ | - |
|
||||
| onClose | 关闭时的回调函数 | _Function_ | - |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| -------------------------------- | ------------------------- | ---- |
|
||||
| @notify-text-color | `@white` | - |
|
||||
| @notify-padding | `@padding-xs @padding-md` | - |
|
||||
| @notify-font-size | `@font-size-md` | - |
|
||||
| @notify-line-height | `@line-height-md` | - |
|
||||
| @notify-primary-background-color | `@blue` | - |
|
||||
| @notify-success-background-color | `@green` | - |
|
||||
| @notify-danger-background-color | `@red` | - |
|
||||
| @notify-warning-background-color | `@orange` | - |
|
||||
|
||||
@ -15,9 +15,7 @@ app.use(NumberKeyboard);
|
||||
### Default Keyboard
|
||||
|
||||
```html
|
||||
<van-cell @touchstart.stop="show = true">
|
||||
Show Keyboard
|
||||
</van-cell>
|
||||
<van-cell @touchstart.stop="show = true"> Show Keyboard </van-cell>
|
||||
<van-number-keyboard
|
||||
:show="show"
|
||||
@blur="show = false"
|
||||
@ -177,3 +175,28 @@ export default {
|
||||
| delete | Custom delete key content |
|
||||
| extra-key | Custom extra key content |
|
||||
| title-left | Custom title left content |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| --- | --- | --- |
|
||||
| @number-keyboard-background-color | `@gray-2` | - |
|
||||
| @number-keyboard-key-height | `48px` | - |
|
||||
| @number-keyboard-key-font-size | `28px` | - |
|
||||
| @number-keyboard-key-active-color | `@gray-3` | - |
|
||||
| @number-keyboard-delete-font-size | `@font-size-lg` | - |
|
||||
| @number-keyboard-title-color | `@gray-7` | - |
|
||||
| @number-keyboard-title-height | `34px` | - |
|
||||
| @number-keyboard-title-font-size | `@font-size-lg` | - |
|
||||
| @number-keyboard-close-padding | `0 @padding-md` | - |
|
||||
| @number-keyboard-close-color | `@text-link-color` | - |
|
||||
| @number-keyboard-close-font-size | `@font-size-md` | - |
|
||||
| @number-keyboard-button-text-color | `@white` | - |
|
||||
| @number-keyboard-button-background-color | `@blue` | - |
|
||||
| @number-keyboard-cursor-color | `@text-color` | - |
|
||||
| @number-keyboard-cursor-width | `1px` | - |
|
||||
| @number-keyboard-cursor-height | `40%` | - |
|
||||
| @number-keyboard-cursor-animation-duration | `1s` | - |
|
||||
| @number-keyboard-z-index | `100` | - |
|
||||
|
||||
@ -21,9 +21,7 @@ app.use(NumberKeyboard);
|
||||
数字键盘提供了 `input`、`delete`、`blur` 事件，分别对应输入内容、删除内容和失去焦点的动作。
|
||||
|
||||
```html
|
||||
<van-cell @touchstart.stop="show = true">
|
||||
弹出默认键盘
|
||||
</van-cell>
|
||||
<van-cell @touchstart.stop="show = true"> 弹出默认键盘 </van-cell>
|
||||
<van-number-keyboard
|
||||
:show="show"
|
||||
@blur="show = false"
|
||||
@ -191,6 +189,31 @@ export default {
|
||||
| extra-key | 自定义左下角按键内容 |
|
||||
| title-left | 自定义标题栏左侧内容 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ------------------------------------------ | ------------------ | ---- |
|
||||
| @number-keyboard-background-color | `@gray-2` | - |
|
||||
| @number-keyboard-key-height | `48px` | - |
|
||||
| @number-keyboard-key-font-size | `28px` | - |
|
||||
| @number-keyboard-key-active-color | `@gray-3` | - |
|
||||
| @number-keyboard-delete-font-size | `@font-size-lg` | - |
|
||||
| @number-keyboard-title-color | `@gray-7` | - |
|
||||
| @number-keyboard-title-height | `34px` | - |
|
||||
| @number-keyboard-title-font-size | `@font-size-lg` | - |
|
||||
| @number-keyboard-close-padding | `0 @padding-md` | - |
|
||||
| @number-keyboard-close-color | `@text-link-color` | - |
|
||||
| @number-keyboard-close-font-size | `@font-size-md` | - |
|
||||
| @number-keyboard-button-text-color | `@white` | - |
|
||||
| @number-keyboard-button-background-color | `@blue` | - |
|
||||
| @number-keyboard-cursor-color | `@text-color` | - |
|
||||
| @number-keyboard-cursor-width | `1px` | - |
|
||||
| @number-keyboard-cursor-height | `40%` | - |
|
||||
| @number-keyboard-cursor-animation-duration | `1s` | - |
|
||||
| @number-keyboard-z-index | `100` | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 在桌面端无法操作组件？
|
||||
|
||||
@ -78,3 +78,12 @@ export default {
|
||||
| Name | Description |
|
||||
| ------- | ------------ |
|
||||
| default | Default slot |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| ------------------------- | -------------------- | ----------- |
|
||||
| @overlay-z-index | `1` | - |
|
||||
| @overlay-background-color | `rgba(0, 0, 0, 0.7)` | - |
|
||||
|
||||
@ -84,3 +84,12 @@ export default {
|
||||
| 名称 | 说明 |
|
||||
| ------- | ---------------------------------- |
|
||||
| default | 默认插槽，用于在遮罩层上方嵌入内容 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ------------------------- | -------------------- | ---- |
|
||||
| @overlay-z-index | `1` | - |
|
||||
| @overlay-background-color | `rgba(0, 0, 0, 0.7)` | - |
|
||||
|
||||
@ -88,3 +88,19 @@ export default {
|
||||
| page `v2.10.9` | Custom pagination item | _{ number: number, text: string, active: boolean }_ |
|
||||
| prev-text `v2.10.9` | Custom prev text | `-` |
|
||||
| next-text `v2.10.9` | Custom next text | `-` |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| --- | --- | --- |
|
||||
| @pagination-height | `40px` | - |
|
||||
| @pagination-font-size | `@font-size-md` | - |
|
||||
| @pagination-item-width | `36px` | - |
|
||||
| @pagination-item-default-color | `@blue` | - |
|
||||
| @pagination-item-disabled-color | `@gray-7` | - |
|
||||
| @pagination-item-disabled-background-color | `@background-color` | - |
|
||||
| @pagination-background-color | `@white` | - |
|
||||
| @pagination-desc-color | `@gray-7` | - |
|
||||
| @pagination-disabled-opacity | `@disabled-opacity` | - |
|
||||
|
||||
@ -96,3 +96,19 @@ export default {
|
||||
| page `v2.10.9` | 自定义页码 | _{ number: number, text: string, active: boolean }_ |
|
||||
| prev-text `v2.10.9` | 自定义上一页按钮文字 | `-` |
|
||||
| next-text `v2.10.9` | 自定义下一页按钮文字 | `-` |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ------------------------------------------ | ------------------- | ---- |
|
||||
| @pagination-height | `40px` | - |
|
||||
| @pagination-font-size | `@font-size-md` | - |
|
||||
| @pagination-item-width | `36px` | - |
|
||||
| @pagination-item-default-color | `@blue` | - |
|
||||
| @pagination-item-disabled-color | `@gray-7` | - |
|
||||
| @pagination-item-disabled-background-color | `@background-color` | - |
|
||||
| @pagination-background-color | `@white` | - |
|
||||
| @pagination-desc-color | `@gray-7` | - |
|
||||
| @pagination-disabled-opacity | `@disabled-opacity` | - |
|
||||
|
||||
@ -135,3 +135,20 @@ export default {
|
||||
| Event | Description | Arguments |
|
||||
| ----- | ----------------------------- | --------- |
|
||||
| focus | Emitted when input is focused | - |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| -------------------------------- | --------------- | ----------- |
|
||||
| @password-input-height | `50px` | - |
|
||||
| @password-input-margin | `0 @padding-md` | - |
|
||||
| @password-input-font-size | `20px` | - |
|
||||
| @password-input-border-radius | `6px` | - |
|
||||
| @password-input-background-color | `@white` | - |
|
||||
| @password-input-info-color | `@gray-6` | - |
|
||||
| @password-input-info-font-size | `@font-size-md` | - |
|
||||
| @password-input-error-info-color | `@red` | - |
|
||||
| @password-input-dot-size | `10px` | - |
|
||||
| @password-input-dot-color | `@black` | - |
|
||||
|
||||
@ -145,3 +145,20 @@ export default {
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------ | ---------------- | -------- |
|
||||
| focus | 输入框聚焦时触发 | - |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| -------------------------------- | --------------- | ---- |
|
||||
| @password-input-height | `50px` | - |
|
||||
| @password-input-margin | `0 @padding-md` | - |
|
||||
| @password-input-font-size | `20px` | - |
|
||||
| @password-input-border-radius | `6px` | - |
|
||||
| @password-input-background-color | `@white` | - |
|
||||
| @password-input-info-color | `@gray-6` | - |
|
||||
| @password-input-info-font-size | `@font-size-md` | - |
|
||||
| @password-input-error-info-color | `@red` | - |
|
||||
| @password-input-dot-size | `10px` | - |
|
||||
| @password-input-dot-color | `@black` | - |
|
||||
|
||||
@ -303,3 +303,23 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Picker
|
||||
| getColumnValues | Get columns data of the column | columnIndex | values |
|
||||
| setColumnValues | Set columns data of the column | columnIndex, values | - |
|
||||
| confirm `v2.4.0` | Stop scrolling and emit confirm event | - | - |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| ------------------------------- | -------------------------- | ----------- |
|
||||
| @picker-background-color | `@white` | - |
|
||||
| @picker-toolbar-height | `44px` | - |
|
||||
| @picker-title-font-size | `@font-size-lg` | - |
|
||||
| @picker-title-line-height | `@line-height-md` | - |
|
||||
| @picker-action-padding | `0 @padding-md` | - |
|
||||
| @picker-action-font-size | `@font-size-md` | - |
|
||||
| @picker-confirm-action-color | `@text-link-color` | - |
|
||||
| @picker-cancel-action-color | `@gray-6` | - |
|
||||
| @picker-option-font-size | `@font-size-lg` | - |
|
||||
| @picker-option-text-color | `@black` | - |
|
||||
| @picker-option-disabled-opacity | `0.3` | - |
|
||||
| @picker-loading-icon-color | `@blue` | - |
|
||||
| @picker-loading-mask-color | `rgba(255, 255, 255, 0.9)` | - |
|
||||
|
||||
@ -329,6 +329,26 @@ export default {
|
||||
| setColumnValues | 设置对应列中所有选项 | columnIndex, values | - |
|
||||
| confirm `v2.4.0` | 停止惯性滚动并触发 confirm 事件 | - | - |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ------------------------------- | -------------------------- | ---- |
|
||||
| @picker-background-color | `@white` | - |
|
||||
| @picker-toolbar-height | `44px` | - |
|
||||
| @picker-title-font-size | `@font-size-lg` | - |
|
||||
| @picker-title-line-height | `@line-height-md` | - |
|
||||
| @picker-action-padding | `0 @padding-md` | - |
|
||||
| @picker-action-font-size | `@font-size-md` | - |
|
||||
| @picker-confirm-action-color | `@text-link-color` | - |
|
||||
| @picker-cancel-action-color | `@gray-6` | - |
|
||||
| @picker-option-font-size | `@font-size-lg` | - |
|
||||
| @picker-option-text-color | `@black` | - |
|
||||
| @picker-option-disabled-opacity | `0.3` | - |
|
||||
| @picker-loading-icon-color | `@blue` | - |
|
||||
| @picker-loading-mask-color | `rgba(255, 255, 255, 0.9)` | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 在桌面端无法操作组件？
|
||||
|
||||
@ -195,3 +195,23 @@ export default {
|
||||
| --------- | ----------------- |
|
||||
| default | Custom content |
|
||||
| reference | Reference Element |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| --- | --- | --- |
|
||||
| @popover-arrow-size | `6px` | - |
|
||||
| @popover-border-radius | `@border-radius-lg` | - |
|
||||
| @popover-action-width | `128px` | - |
|
||||
| @popover-action-height | `44px` | - |
|
||||
| @popover-action-font-size | `@font-size-md` | - |
|
||||
| @popover-action-line-height | `@line-height-md` | - |
|
||||
| @popover-action-icon-size | `20px` | - |
|
||||
| @popover-light-text-color | `@text-color` | - |
|
||||
| @popover-light-background-color | `@white` | - |
|
||||
| @popover-light-action-disabled-text-color | `@gray-5` | - |
|
||||
| @popover-dark-text-color | `@white` | - |
|
||||
| @popover-dark-background-color | `#4a4a4a` | - |
|
||||
| @popover-dark-action-disabled-text-color | `@gray-6` | - |
|
||||
|
||||
@ -239,3 +239,23 @@ export default {
|
||||
| --------- | --------------------------- |
|
||||
| default | 自定义菜单内容 |
|
||||
| reference | 触发 Popover 显示的元素内容 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ----------------------------------------- | ------------------- | ---- |
|
||||
| @popover-arrow-size | `6px` | - |
|
||||
| @popover-border-radius | `@border-radius-lg` | - |
|
||||
| @popover-action-width | `128px` | - |
|
||||
| @popover-action-height | `44px` | - |
|
||||
| @popover-action-font-size | `@font-size-md` | - |
|
||||
| @popover-action-line-height | `@line-height-md` | - |
|
||||
| @popover-action-icon-size | `20px` | - |
|
||||
| @popover-light-text-color | `@text-color` | - |
|
||||
| @popover-light-background-color | `@white` | - |
|
||||
| @popover-light-action-disabled-text-color | `@gray-5` | - |
|
||||
| @popover-dark-text-color | `@white` | - |
|
||||
| @popover-dark-background-color | `#4a4a4a` | - |
|
||||
| @popover-dark-action-disabled-text-color | `@gray-6` | - |
|
||||
|
||||
@ -142,3 +142,18 @@ export default {
|
||||
| close | Emitted when closing Popup | - |
|
||||
| opened | Emitted when Popup is opened | - |
|
||||
| closed | Emitted when Popup is closed | - |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| --- | --- | --- |
|
||||
| @popup-background-color | `@white` | - |
|
||||
| @popup-transition | `transform @animation-duration-base` | - |
|
||||
| @popup-round-border-radius | `16px` | - |
|
||||
| @popup-close-icon-size | `22px` | - |
|
||||
| @popup-close-icon-color | `@gray-5` | - |
|
||||
| @popup-close-icon-active-color | `@gray-6` | - |
|
||||
| @popup-close-icon-margin | `16px` | - |
|
||||
| @popup-close-icon-z-index | `1` | - |
|
||||
|
||||
@ -152,3 +152,18 @@ export default {
|
||||
| close | 关闭弹出层时触发 | - |
|
||||
| opened | 打开弹出层且动画结束后触发 | - |
|
||||
| closed | 关闭弹出层且动画结束后触发 | - |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ------------------------------ | ------------------------------------ | ---- |
|
||||
| @popup-background-color | `@white` | - |
|
||||
| @popup-transition | `transform @animation-duration-base` | - |
|
||||
| @popup-round-border-radius | `16px` | - |
|
||||
| @popup-close-icon-size | `22px` | - |
|
||||
| @popup-close-icon-color | `@gray-5` | - |
|
||||
| @popup-close-icon-active-color | `@gray-6` | - |
|
||||
| @popup-close-icon-margin | `16px` | - |
|
||||
| @popup-close-icon-z-index | `1` | - |
|
||||
|
||||
@ -70,3 +70,18 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Progress instance and call insta
|
||||
| Name | Description | Attribute | Return value |
|
||||
| --- | --- | --- | --- |
|
||||
| resize | Resize Progress when container element resized or visibility changed | - | - |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| -------------------------------- | --------------- | ----------- |
|
||||
| @progress-height | `4px` | - |
|
||||
| @progress-color | `@blue` | - |
|
||||
| @progress-background-color | `@gray-3` | - |
|
||||
| @progress-pivot-padding | `0 5px` | - |
|
||||
| @progress-pivot-text-color | `@white` | - |
|
||||
| @progress-pivot-font-size | `@font-size-xs` | - |
|
||||
| @progress-pivot-line-height | `1.6` | - |
|
||||
| @progress-pivot-background-color | `@blue` | - |
|
||||
|
||||
@ -79,6 +79,21 @@ app.use(Progress);
|
||||
| ------ | -------------------------------------------- | ---- | ------ |
|
||||
| resize | 外层元素大小变化后，可以调用此方法来触发重绘 | - | - |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| -------------------------------- | --------------- | ---- |
|
||||
| @progress-height | `4px` | - |
|
||||
| @progress-color | `@blue` | - |
|
||||
| @progress-background-color | `@gray-3` | - |
|
||||
| @progress-pivot-padding | `0 5px` | - |
|
||||
| @progress-pivot-text-color | `@white` | - |
|
||||
| @progress-pivot-font-size | `@font-size-xs` | - |
|
||||
| @progress-pivot-line-height | `1.6` | - |
|
||||
| @progress-pivot-background-color | `@blue` | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 组件从隐藏状态切换到显示状态时，渲染不正确？
|
||||
|
||||
@ -124,3 +124,13 @@ Use slots to custom tips.
|
||||
| loosing | Content of head when at loosing | { distance } |
|
||||
| loading | Content of head when at loading | { distance } |
|
||||
| success | Content of head when succeed | - |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| ----------------------------- | --------------- | ----------- |
|
||||
| @pull-refresh-head-height | `50px` | - |
|
||||
| @pull-refresh-head-font-size | `@font-size-md` | - |
|
||||
| @pull-refresh-head-text-color | `@gray-6` | - |
|
||||
|
||||
@ -132,6 +132,16 @@ export default {
|
||||
| loading | 加载过程中顶部内容 | { distance: 当前下拉距离 } |
|
||||
| success | 刷新成功提示内容 | - |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ----------------------------- | --------------- | ---- |
|
||||
| @pull-refresh-head-height | `50px` | - |
|
||||
| @pull-refresh-head-font-size | `@font-size-md` | - |
|
||||
| @pull-refresh-head-text-color | `@gray-6` | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### PullReresh 的内容未填满屏幕时，只有一部分区域可以下拉？
|
||||
|
||||
@ -151,7 +151,7 @@ export default {
|
||||
### Radio Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| name | Radio name | _any_ | - |
|
||||
| shape | Can be set to `square` | _string_ | `round` |
|
||||
| disabled | Whether to disable radio | _boolean_ | `false` |
|
||||
@ -163,7 +163,7 @@ export default {
|
||||
### RadioGroup Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| v-model (v-model) | Name of checked radio | _any_ | - |
|
||||
| disabled | Disable all radios | _boolean_ | `false` |
|
||||
| direction `v2.5.0` | Direction, can be set to `horizontal` | _string_ | `vertical` |
|
||||
@ -188,3 +188,19 @@ export default {
|
||||
| ------- | ------------ | ------------------ |
|
||||
| default | Custom label | - |
|
||||
| icon | Custom icon | _checked: boolean_ |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| -------------------------------- | -------------------------- | ----------- |
|
||||
| @radio-size | `20px` | - |
|
||||
| @radio-border-color | `@gray-5` | - |
|
||||
| @radio-transition-duration | `@animation-duration-fast` | - |
|
||||
| @radio-label-margin | `@padding-xs` | - |
|
||||
| @radio-label-color | `@text-color` | - |
|
||||
| @radio-checked-icon-color | `@blue` | - |
|
||||
| @radio-disabled-icon-color | `@gray-5` | - |
|
||||
| @radio-disabled-label-color | `@gray-5` | - |
|
||||
| @radio-disabled-background-color | `@border-color` | - |
|
||||
|
||||
@ -206,3 +206,19 @@ export default {
|
||||
| ------- | ---------- | ------------------ |
|
||||
| default | 自定义文本 | - |
|
||||
| icon | 自定义图标 | _checked: boolean_ |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| -------------------------------- | -------------------------- | ---- |
|
||||
| @radio-size | `20px` | - |
|
||||
| @radio-border-color | `@gray-5` | - |
|
||||
| @radio-transition-duration | `@animation-duration-fast` | - |
|
||||
| @radio-label-margin | `@padding-xs` | - |
|
||||
| @radio-label-color | `@text-color` | - |
|
||||
| @radio-checked-icon-color | `@blue` | - |
|
||||
| @radio-disabled-icon-color | `@gray-5` | - |
|
||||
| @radio-disabled-label-color | `@gray-5` | - |
|
||||
| @radio-disabled-background-color | `@border-color` | - |
|
||||
|
||||
@ -122,3 +122,15 @@ export default {
|
||||
| Event | Description | Parameters |
|
||||
| ------ | ------------------------- | ------------ |
|
||||
| change | Emitted when rate changed | current rate |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| ------------------------- | --------------- | ----------- |
|
||||
| @rate-icon-size | `20px` | - |
|
||||
| @rate-icon-gutter | `@padding-base` | - |
|
||||
| @rate-icon-void-color | `@gray-5` | - |
|
||||
| @rate-icon-full-color | `@red` | - |
|
||||
| @rate-icon-disabled-color | `@gray-5` | - |
|
||||
|
||||
@ -126,3 +126,15 @@ export default {
|
||||
| 事件名 | 说明 | 回调参数 |
|
||||
| ------ | ------------------------ | -------- |
|
||||
| change | 当前分值变化时触发的事件 | 当前分值 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ------------------------- | --------------- | ---- |
|
||||
| @rate-icon-size | `20px` | - |
|
||||
| @rate-icon-gutter | `@padding-base` | - |
|
||||
| @rate-icon-void-color | `@gray-5` | - |
|
||||
| @rate-icon-full-color | `@red` | - |
|
||||
| @rate-icon-disabled-color | `@gray-5` | - |
|
||||
|
||||
@ -159,3 +159,21 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Search
|
||||
| label | Custom Search label |
|
||||
| left-icon | Custom left icon |
|
||||
| right-icon | Custom right icon |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| -------------------------------- | ------------------ | ----------- |
|
||||
| @search-padding | `10px @padding-sm` | - |
|
||||
| @search-background-color | `@white` | - |
|
||||
| @search-content-background-color | `@gray-1` | - |
|
||||
| @search-input-height | `34px` | - |
|
||||
| @search-label-padding | `0 5px` | - |
|
||||
| @search-label-color | `@text-color` | - |
|
||||
| @search-label-font-size | `@font-size-md` | - |
|
||||
| @search-left-icon-color | `@gray-6` | - |
|
||||
| @search-action-padding | `0 @padding-xs` | - |
|
||||
| @search-action-text-color | `@text-color` | - |
|
||||
| @search-action-font-size | `@font-size-md` | - |
|
||||
|
||||
@ -176,6 +176,24 @@ export default {
|
||||
| left-icon | 自定义左侧图标（搜索框内） |
|
||||
| right-icon | 自定义右侧图标（搜索框内） |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| -------------------------------- | ------------------ | ---- |
|
||||
| @search-padding | `10px @padding-sm` | - |
|
||||
| @search-background-color | `@white` | - |
|
||||
| @search-content-background-color | `@gray-1` | - |
|
||||
| @search-input-height | `34px` | - |
|
||||
| @search-label-padding | `0 5px` | - |
|
||||
| @search-label-color | `@text-color` | - |
|
||||
| @search-label-font-size | `@font-size-md` | - |
|
||||
| @search-left-icon-color | `@gray-6` | - |
|
||||
| @search-action-padding | `0 @padding-xs` | - |
|
||||
| @search-action-text-color | `@text-color` | - |
|
||||
| @search-action-font-size | `@font-size-md` | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 在桌面端点击清除按钮无效？
|
||||
|
||||
@ -148,3 +148,25 @@ export default {
|
||||
| ----------- | ------------------ |
|
||||
| title | Custom title |
|
||||
| description | Custom description |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| --- | --- | --- |
|
||||
| @share-sheet-header-padding | `@padding-sm @padding-md @padding-base` | - |
|
||||
| @share-sheet-title-color | `@text-color` | - |
|
||||
| @share-sheet-title-font-size | `@font-size-md` | - |
|
||||
| @share-sheet-title-line-height | `@line-height-md` | - |
|
||||
| @share-sheet-description-color | `@gray-6` | - |
|
||||
| @share-sheet-description-font-size | `@font-size-sm` | - |
|
||||
| @share-sheet-description-line-height | `16px` | - |
|
||||
| @share-sheet-icon-size | `48px` | - |
|
||||
| @share-sheet-option-name-color | `@gray-7` | - |
|
||||
| @share-sheet-option-name-font-size | `@font-size-sm` | - |
|
||||
| @share-sheet-option-description-color | `@gray-5` | - |
|
||||
| @share-sheet-option-description-font-size | `@font-size-sm` | - |
|
||||
| @share-sheet-cancel-button-font-size | `@font-size-lg` | - |
|
||||
| @share-sheet-cancel-button-height | `48px` | - |
|
||||
| @share-sheet-cancel-button-background | `@white` | - |
|
||||
|
||||
@ -197,6 +197,28 @@ export default {
|
||||
| title | 自定义顶部标题 |
|
||||
| description | 自定义描述文字 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| --- | --- | --- |
|
||||
| @share-sheet-header-padding | `@padding-sm @padding-md @padding-base` | - |
|
||||
| @share-sheet-title-color | `@text-color` | - |
|
||||
| @share-sheet-title-font-size | `@font-size-md` | - |
|
||||
| @share-sheet-title-line-height | `@line-height-md` | - |
|
||||
| @share-sheet-description-color | `@gray-6` | - |
|
||||
| @share-sheet-description-font-size | `@font-size-sm` | - |
|
||||
| @share-sheet-description-line-height | `16px` | - |
|
||||
| @share-sheet-icon-size | `48px` | - |
|
||||
| @share-sheet-option-name-color | `@gray-7` | - |
|
||||
| @share-sheet-option-name-font-size | `@font-size-sm` | - |
|
||||
| @share-sheet-option-description-color | `@gray-5` | - |
|
||||
| @share-sheet-option-description-font-size | `@font-size-sm` | - |
|
||||
| @share-sheet-cancel-button-font-size | `@font-size-lg` | - |
|
||||
| @share-sheet-cancel-button-height | `48px` | - |
|
||||
| @share-sheet-cancel-button-background | `@white` | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 如何实现分享逻辑？
|
||||
|
||||
@ -117,3 +117,24 @@ export default {
|
||||
| Name | Description |
|
||||
| --------------- | ----------------- |
|
||||
| title `v2.10.8` | Custom item title |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| ---------------------------------- | ------------------- | ----------- |
|
||||
| @sidebar-width | `80px` | - |
|
||||
| @sidebar-font-size | `@font-size-md` | - |
|
||||
| @sidebar-line-height | `@line-height-md` | - |
|
||||
| @sidebar-text-color | `@text-color` | - |
|
||||
| @sidebar-disabled-text-color | `@gray-5` | - |
|
||||
| @sidebar-padding | `20px @padding-sm` | - |
|
||||
| @sidebar-active-color | `@active-color` | - |
|
||||
| @sidebar-background-color | `@background-color` | - |
|
||||
| @sidebar-selected-font-weight | `@font-weight-bold` | - |
|
||||
| @sidebar-selected-text-color | `@text-color` | - |
|
||||
| @sidebar-selected-border-width | `4px` | - |
|
||||
| @sidebar-selected-border-height | `16px` | - |
|
||||
| @sidebar-selected-border-color | `@red` | - |
|
||||
| @sidebar-selected-background-color | `@white` | - |
|
||||
|
||||
@ -125,3 +125,24 @@ export default {
|
||||
| Name | Description |
|
||||
| --------------- | ----------- |
|
||||
| title `v2.10.8` | 自定义标题 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ---------------------------------- | ------------------- | ---- |
|
||||
| @sidebar-width | `80px` | - |
|
||||
| @sidebar-font-size | `@font-size-md` | - |
|
||||
| @sidebar-line-height | `@line-height-md` | - |
|
||||
| @sidebar-text-color | `@text-color` | - |
|
||||
| @sidebar-disabled-text-color | `@gray-5` | - |
|
||||
| @sidebar-padding | `20px @padding-sm` | - |
|
||||
| @sidebar-active-color | `@active-color` | - |
|
||||
| @sidebar-background-color | `@background-color` | - |
|
||||
| @sidebar-selected-font-weight | `@font-weight-bold` | - |
|
||||
| @sidebar-selected-text-color | `@text-color` | - |
|
||||
| @sidebar-selected-border-width | `4px` | - |
|
||||
| @sidebar-selected-border-height | `16px` | - |
|
||||
| @sidebar-selected-border-color | `@red` | - |
|
||||
| @sidebar-selected-background-color | `@white` | - |
|
||||
|
||||
@ -61,3 +61,17 @@ export default {
|
||||
| title-width | Title width | _number \| string_ | `40%` |
|
||||
| avatar-size | Size of avatar placeholder | _number \| string_ | `32px` |
|
||||
| avatar-shape | Shape of avatar placeholder，can be set to `square` | _string_ | `round` |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| --------------------------------- | --------------- | ----------- |
|
||||
| @skeleton-row-height | `16px` | - |
|
||||
| @skeleton-row-background-color | `@active-color` | - |
|
||||
| @skeleton-row-margin-top | `@padding-sm` | - |
|
||||
| @skeleton-title-width | `40%` | - |
|
||||
| @skeleton-avatar-size | `32px` | - |
|
||||
| @skeleton-avatar-background-color | `@active-color` | - |
|
||||
| @skeleton-animation-duration | `1.2s` | - |
|
||||
|
||||
@ -71,3 +71,17 @@ export default {
|
||||
| title-width | 标题占位图宽度 | _number \| string_ | `40%` |
|
||||
| avatar-size | 头像占位图大小 | _number \| string_ | `32px` |
|
||||
| avatar-shape | 头像占位图形状，可选值为 `square` | _string_ | `round` |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| --------------------------------- | --------------- | ---- |
|
||||
| @skeleton-row-height | `16px` | - |
|
||||
| @skeleton-row-background-color | `@active-color` | - |
|
||||
| @skeleton-row-margin-top | `@padding-sm` | - |
|
||||
| @skeleton-title-width | `40%` | - |
|
||||
| @skeleton-avatar-size | `32px` | - |
|
||||
| @skeleton-avatar-background-color | `@active-color` | - |
|
||||
| @skeleton-animation-duration | `1.2s` | - |
|
||||
|
||||
@ -172,3 +172,19 @@ export default {
|
||||
| Name | Description |
|
||||
| ------ | ------------- |
|
||||
| button | Custom button |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| --- | --- | --- |
|
||||
| @slider-active-background-color | `@blue` | - |
|
||||
| @slider-inactive-background-color | `@gray-3` | - |
|
||||
| @slider-disabled-opacity | `@disabled-opacity` | - |
|
||||
| @slider-bar-height | `2px` | - |
|
||||
| @slider-button-width | `24px` | - |
|
||||
| @slider-button-height | `24px` | - |
|
||||
| @slider-button-border-radius | `50%` | - |
|
||||
| @slider-button-background-color | `@white` | - |
|
||||
| @slider-button-box-shadow | `0 1px 2px rgba(0, 0, 0, 0.5)` | - |
|
||||
|
||||
@ -178,3 +178,19 @@ export default {
|
||||
| 名称 | 说明 |
|
||||
| ------ | -------------- |
|
||||
| button | 自定义滑动按钮 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| --------------------------------- | ------------------------------ | ---- |
|
||||
| @slider-active-background-color | `@blue` | - |
|
||||
| @slider-inactive-background-color | `@gray-3` | - |
|
||||
| @slider-disabled-opacity | `@disabled-opacity` | - |
|
||||
| @slider-bar-height | `2px` | - |
|
||||
| @slider-button-width | `24px` | - |
|
||||
| @slider-button-height | `24px` | - |
|
||||
| @slider-button-border-radius | `50%` | - |
|
||||
| @slider-button-background-color | `@white` | - |
|
||||
| @slider-button-box-shadow | `0 1px 2px rgba(0, 0, 0, 0.5)` | - |
|
||||
|
||||
@ -109,7 +109,7 @@ export default {
|
||||
### Props
|
||||
|
||||
| Attribute | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| v-model | Current value | _number \| string_ | - |
|
||||
| min | Min value | _number \| string_ | `1` |
|
||||
| max | Max value | _number \| string_ | - |
|
||||
@ -142,3 +142,24 @@ export default {
|
||||
| minus | Emitted when the minus button is clicked | - |
|
||||
| focus | Emitted when the input is focused | _event: Event_ |
|
||||
| blur | Emitted when the input is blured | _event: Event_ |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| ---------------------------------------- | ------------------- | ----------- |
|
||||
| @stepper-active-color | `#e8e8e8` | - |
|
||||
| @stepper-background-color | `@active-color` | - |
|
||||
| @stepper-button-icon-color | `@text-color` | - |
|
||||
| @stepper-button-disabled-color | `@background-color` | - |
|
||||
| @stepper-button-disabled-icon-color | `@gray-5` | - |
|
||||
| @stepper-button-round-theme-color | `@red` | - |
|
||||
| @stepper-input-width | `32px` | - |
|
||||
| @stepper-input-height | `28px` | - |
|
||||
| @stepper-input-font-size | `@font-size-md` | - |
|
||||
| @stepper-input-line-height | `normal` | - |
|
||||
| @stepper-input-text-color | `@text-color` | - |
|
||||
| @stepper-input-disabled-text-color | `@gray-5` | - |
|
||||
| @stepper-input-disabled-background-color | `@active-color` | - |
|
||||
| @stepper-border-radius | `@border-radius-md` | - |
|
||||
|
||||
@ -169,6 +169,27 @@ export default {
|
||||
| focus | 输入框聚焦时触发 | _event: Event_ |
|
||||
| blur | 输入框失焦时触发 | _event: Event_ |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ---------------------------------------- | ------------------- | ---- |
|
||||
| @stepper-active-color | `#e8e8e8` | - |
|
||||
| @stepper-background-color | `@active-color` | - |
|
||||
| @stepper-button-icon-color | `@text-color` | - |
|
||||
| @stepper-button-disabled-color | `@background-color` | - |
|
||||
| @stepper-button-disabled-icon-color | `@gray-5` | - |
|
||||
| @stepper-button-round-theme-color | `@red` | - |
|
||||
| @stepper-input-width | `32px` | - |
|
||||
| @stepper-input-height | `28px` | - |
|
||||
| @stepper-input-font-size | `@font-size-md` | - |
|
||||
| @stepper-input-line-height | `normal` | - |
|
||||
| @stepper-input-text-color | `@text-color` | - |
|
||||
| @stepper-input-disabled-text-color | `@gray-5` | - |
|
||||
| @stepper-input-disabled-background-color | `@active-color` | - |
|
||||
| @stepper-border-radius | `@border-radius-md` | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 为什么 value 有时候会变成 string 类型？
|
||||
|
||||
@ -89,3 +89,22 @@ export default {
|
||||
| Event | Description | Arguments |
|
||||
| --- | --- | --- |
|
||||
| click-step `v2.5.9` | Emitted when a step's title or icon is clicked | _index: number_ |
|
||||
|
||||
### Less Variables
|
||||
|
||||
How to use: [Custom Theme](#/en-US/theme).
|
||||
|
||||
| Name | Default Value | Description |
|
||||
| -------------------------------- | --------------- | ----------- |
|
||||
| @step-text-color | `@gray-6` | - |
|
||||
| @step-active-color | `@green` | - |
|
||||
| @step-process-text-color | `@text-color` | - |
|
||||
| @step-font-size | `@font-size-md` | - |
|
||||
| @step-line-color | `@border-color` | - |
|
||||
| @step-finish-line-color | `@green` | - |
|
||||
| @step-finish-text-color | `@text-color` | - |
|
||||
| @step-icon-size | `12px` | - |
|
||||
| @step-circle-size | `5px` | - |
|
||||
| @step-circle-color | `@gray-6` | - |
|
||||
| @step-horizontal-title-font-size | `@font-size-sm` | - |
|
||||
| @steps-background-color | `@white` | - |
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user