blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

docs: update component CSS variable names (#8857)

Browse Source
This commit is contained in:
neverland 2021-06-14 10:23:47 +08:00 committed by GitHub
parent 34a3fe8787
commit 8e3833acc8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
122 changed files with 1755 additions and 1755 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
src/action-bar/README.md
View File

@ -133,22 +133,22 @@ Use `badge` prop to show badge in icon.
| ------- | -------------- |
| default | Button content |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| Name | Default Value | Description |
| --------------------------------- | ------------------ | ----------- |
| @action-bar-background-color | `@white` | - |
| @action-bar-height | `50px` | - |
| @action-bar-icon-width | `48px` | - |
| @action-bar-icon-height | `100%` | - |
| @action-bar-icon-color | `@text-color` | - |
| @action-bar-icon-size | `18px` | - |
| @action-bar-icon-font-size | `@font-size-xs` | - |
| @action-bar-icon-active-color | `@active-color` | - |
| @action-bar-icon-text-color | `@gray-7` | - |
| @action-bar-icon-background-color | `@white` | - |
| @action-bar-button-height | `40px` | - |
| @action-bar-button-warning-color | `@gradient-orange` | - |
| @action-bar-button-danger-color | `@gradient-red` | - |
| Name | Default Value | Description |
| -------------------------------------- | ------------------ | ----------- |
| --van-action-bar-background-color | `@white` | - |
| --van-action-bar-height | `50px` | - |
| --van-action-bar-icon-width | `48px` | - |
| --van-action-bar-icon-height | `100%` | - |
| --van-action-bar-icon-color | `@text-color` | - |
| --van-action-bar-icon-size | `18px` | - |
| --van-action-bar-icon-font-size | `@font-size-xs` | - |
| --van-action-bar-icon-active-color | `@active-color` | - |
| --van-action-bar-icon-text-color | `@gray-7` | - |
| --van-action-bar-icon-background-color | `@white` | - |
| --van-action-bar-button-height | `40px` | - |
| --van-action-bar-button-warning-color | `@gradient-orange` | - |
| --van-action-bar-button-danger-color | `@gradient-red` | - |

34
src/action-bar/README.zh-CN.md
View File

@ -113,7 +113,7 @@ export default {
### ActionBarButton Props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| --- | --- | --- | --- | --- |
| text | 按钮文字 | _string_ | - |
| type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | _string_ | `default` |
| color | 按钮颜色，支持传入 `linear-gradient` 渐变色 | _string_ | - |
@ -139,20 +139,20 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| --------------------------------- | ------------------ | ---- |
| @action-bar-background-color | `@white` | - |
| @action-bar-height | `50px` | - |
| @action-bar-icon-width | `48px` | - |
| @action-bar-icon-height | `100%` | - |
| @action-bar-icon-color | `@text-color` | - |
| @action-bar-icon-size | `18px` | - |
| @action-bar-icon-font-size | `@font-size-xs` | - |
| @action-bar-icon-active-color | `@active-color` | - |
| @action-bar-icon-text-color | `@gray-7` | - |
| @action-bar-icon-background-color | `@white` | - |
| @action-bar-button-height | `40px` | - |
| @action-bar-button-warning-color | `@gradient-orange` | - |
| @action-bar-button-danger-color | `@gradient-red` | - |
| 名称 | 默认值 | 描述 |
| -------------------------------------- | ------------------ | ---- |
| --van-action-bar-background-color | `@white` | - |
| --van-action-bar-height | `50px` | - |
| --van-action-bar-icon-width | `48px` | - |
| --van-action-bar-icon-height | `100%` | - |
| --van-action-bar-icon-color | `@text-color` | - |
| --van-action-bar-icon-size | `18px` | - |
| --van-action-bar-icon-font-size | `@font-size-xs` | - |
| --van-action-bar-icon-active-color | `@active-color` | - |
| --van-action-bar-icon-text-color | `@gray-7` | - |
| --van-action-bar-icon-background-color | `@white` | - |
| --van-action-bar-button-height | `40px` | - |
| --van-action-bar-button-warning-color | `@gradient-orange` | - |
| --van-action-bar-button-danger-color | `@gradient-red` | - |

52
src/action-sheet/README.md
View File

@ -223,31 +223,31 @@ export default {
| description | Custom description above the options |
| cancel `v3.0.10` | Custom the content of cancel button |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| Name | Default Value | Description |
| --- | --- | --- |
| --van-action-sheet-max-height | `80%` | - |
| --van-action-sheet-header-height | `48px` | - |
| --van-action-sheet-header-font-size | `@font-size-lg` | - |
| --van-action-sheet-description-color | `@gray-6` | - |
| --van-action-sheet-description-font-size | `@font-size-md` | - |
| --van-action-sheet-description-line-height | `@line-height-md` | - |
| --van-action-sheet-item-background | `@white` | - |
| --van-action-sheet-item-font-size | `@font-size-lg` | - |
| --van-action-sheet-item-line-height | `@line-height-lg` | - |
| --van-action-sheet-item-text-color | `@text-color` | - |
| --van-action-sheet-item-disabled-text-color | `@gray-5` | - |
| --van-action-sheet-subname-color | `@gray-6` | - |
| --van-action-sheet-subname-font-size | `@font-size-sm` | - |
| --van-action-sheet-subname-line-height | `@line-height-sm` | - |
| --van-action-sheet-close-icon-size | `22px` | - |
| --van-action-sheet-close-icon-color | `@gray-5` | - |
| --van-action-sheet-close-icon-active-color | `@gray-6` | - |
| --van-action-sheet-close-icon-padding | `0 @padding-md` | - |
| --van-action-sheet-cancel-text-color | `@gray-7` | - |
| --van-action-sheet-cancel-padding-top | `@padding-xs` | - |
| --van-action-sheet-cancel-padding-color | `@background-color` | - |
| --van-action-sheet-loading-icon-size | `22px` | - |

50
src/action-sheet/README.zh-CN.md
View File

@ -237,29 +237,29 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| -------------------------------------- | ------------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| ------------------------------------------- | ------------------- | ---- |
| --van-action-sheet-max-height | `80%` | - |
| --van-action-sheet-header-height | `48px` | - |
| --van-action-sheet-header-font-size | `@font-size-lg` | - |
| --van-action-sheet-description-color | `@gray-6` | - |
| --van-action-sheet-description-font-size | `@font-size-md` | - |
| --van-action-sheet-description-line-height | `@line-height-md` | - |
| --van-action-sheet-item-background | `@white` | - |
| --van-action-sheet-item-font-size | `@font-size-lg` | - |
| --van-action-sheet-item-line-height | `@line-height-lg` | - |
| --van-action-sheet-item-text-color | `@text-color` | - |
| --van-action-sheet-item-disabled-text-color | `@gray-5` | - |
| --van-action-sheet-subname-color | `@gray-6` | - |
| --van-action-sheet-subname-font-size | `@font-size-sm` | - |
| --van-action-sheet-subname-line-height | `@line-height-sm` | - |
| --van-action-sheet-close-icon-size | `22px` | - |
| --van-action-sheet-close-icon-color | `@gray-5` | - |
| --van-action-sheet-close-icon-active-color | `@gray-6` | - |
| --van-action-sheet-close-icon-padding | `0 @padding-md` | - |
| --van-action-sheet-cancel-text-color | `@gray-7` | - |
| --van-action-sheet-cancel-padding-top | `@padding-xs` | - |
| --van-action-sheet-cancel-padding-color | `@background-color` | - |
| --van-action-sheet-loading-icon-size | `22px` | - |

14
src/address-edit/README.md
View File

@ -151,14 +151,14 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Addres
Please refer to [Area](#/en-US/area) component.
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| --van-address-edit-padding | `@padding-sm` | - |
| --van-address-edit-buttons-padding | `@padding-xl @padding-base` | - |
| --van-address-edit-button-margin-bottom | `@padding-sm` | - |
| --van-address-edit-detail-finish-color | `@blue` | - |
| --van-address-edit-detail-finish-font-size | `@font-size-sm` | - |

16
src/address-edit/README.zh-CN.md
View File

@ -155,12 +155,12 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------------------- | --------------------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-address-edit-padding | `@padding-sm` | - |
| --van-address-edit-buttons-padding | `@padding-xl @padding-base` | - |
| --van-address-edit-button-margin-bottom | `@padding-sm` | - |
| --van-address-edit-detail-finish-color | `@blue` | - |
| --van-address-edit-detail-finish-font-size | `@font-size-sm` | - |

30
src/address-list/README.md
View File

@ -121,22 +121,22 @@ export default {
| item-bottom | Custom content after list item | _item: Address_ |
| tag `v3.0.9` | Custom tag of list item | _item: Address_ |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| --van-address-list-padding | `@padding-sm @padding-sm 80px` | - |
| --van-address-list-disabled-text-color | `@gray-6` | - |
| --van-address-list-disabled-text-padding | `@padding-base * 5 0 @padding-md` | - |
| --van-address-list-disabled-text-font-size | `@font-size-md` | - |
| --van-address-list-disabled-text-line-height | `@line-height-md` | - |
| --van-address-list-add-button-z-index | `999` | - |
| --van-address-list-item-padding | `@padding-sm` | - |
| --van-address-list-item-text-color | `@text-color` | - |
| --van-address-list-item-disabled-text-color | `@gray-5` | - |
| --van-address-list-item-font-size | `13px` | - |
| --van-address-list-item-line-height | `@line-height-sm` | - |
| --van-address-list-item-radio-icon-color | `@red` | - |
| --van-address-list-edit-icon-size | `20px` | - |

28
src/address-list/README.zh-CN.md
View File

@ -123,20 +123,20 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| @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` | - |
| --van-address-list-padding | `@padding-sm @padding-sm 80px` | - |
| --van-address-list-disabled-text-color | `@gray-6` | - |
| --van-address-list-disabled-text-padding | `@padding-base * 5 0 @padding-md` | - |
| --van-address-list-disabled-text-font-size | `@font-size-md` | - |
| --van-address-list-disabled-text-line-height | `@line-height-md` | - |
| --van-address-list-add-button-z-index | `999` | - |
| --van-address-list-item-padding | `@padding-sm` | - |
| --van-address-list-item-text-color | `@text-color` | - |
| --van-address-list-item-disabled-text-color | `@gray-5` | - |
| --van-address-list-item-font-size | `13px` | - |
| --van-address-list-item-line-height | `@line-height-sm` | - |
| --van-address-list-item-radio-icon-color | `@red` | - |
| --van-address-list-edit-icon-size | `20px` | - |

24
src/badge/README.md
View File

@ -133,19 +133,19 @@ Use `content` slot to custom :content of badge.
| default | Default slot |
| content | Custom badge content |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| --van-badge-size | `16px` | - |
| --van-badge-color | `@white` | - |
| --van-badge-padding | `0 3px` | - |
| --van-badge-font-size | `@font-size-sm` | - |
| --van-badge-font-weight | `@font-weight-bold` | - |
| --van-badge-border-width | `@border-width-base` | - |
| --van-badge-background-color | `@red` | - |
| --van-badge-dot-color | `@red` | - |
| --van-badge-dot-size | `8px` | - |
| --van-badge-font-family | `-apple-system-font, Helvetica Neue, Arial, sans-serif` | - |

22
src/badge/README.zh-CN.md
View File

@ -143,17 +143,17 @@ app.use(Badge);
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| @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` | - |
| --van-badge-size | `16px` | - |
| --van-badge-color | `@white` | - |
| --van-badge-padding | `0 3px` | - |
| --van-badge-font-size | `@font-size-sm` | - |
| --van-badge-font-weight | `@font-weight-bold` | - |
| --van-badge-border-width | `@border-width-base` | - |
| --van-badge-background-color | `@red` | - |
| --van-badge-dot-color | `@red` | - |
| --van-badge-dot-size | `8px` | - |
| --van-badge-font-family | `-apple-system-font, Helvetica Neue, Arial, sans-serif` | - |

76
src/button/README.md
View File

@ -149,43 +149,43 @@ app.use(Button);
| icon `v3.0.18` | Custom icon |
| loading | Custom loading icon |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| Name | Default Value | Description |
| -------------------------------- | -------------------- | ----------- |
| @button-mini-height | `24px` | - |
| @button-mini-padding | `0 @padding-base` | - |
| @button-mini-font-size | `@font-size-xs` | - |
| @button-small-height | `32px` | - |
| @button-small-padding | `0 @padding-xs` | - |
| @button-small-font-size | `@font-size-sm` | - |
| @button-normal-font-size | `@font-size-md` | - |
| @button-normal-padding | `0 15px` | - |
| @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 | `@blue` | - |
| @button-primary-border-color | `@blue` | - |
| @button-success-color | `@white` | - |
| @button-success-background-color | `@green` | - |
| @button-success-border-color | `@green` | - |
| @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` | - |
| @button-icon-size | `1.2em` | - |
| @button-loading-icon-size | `20px` | - |
| Name | Default Value | Description |
| ------------------------------------- | -------------------- | ----------- |
| --van-button-mini-height | `24px` | - |
| --van-button-mini-padding | `0 @padding-base` | - |
| --van-button-mini-font-size | `@font-size-xs` | - |
| --van-button-small-height | `32px` | - |
| --van-button-small-padding | `0 @padding-xs` | - |
| --van-button-small-font-size | `@font-size-sm` | - |
| --van-button-normal-font-size | `@font-size-md` | - |
| --van-button-normal-padding | `0 15px` | - |
| --van-button-large-height | `50px` | - |
| --van-button-default-height | `44px` | - |
| --van-button-default-line-height | `1.2` | - |
| --van-button-default-font-size | `@font-size-lg` | - |
| --van-button-default-color | `@text-color` | - |
| --van-button-default-background-color | `@white` | - |
| --van-button-default-border-color | `@border-color` | - |
| --van-button-primary-color | `@white` | - |
| --van-button-primary-background-color | `@blue` | - |
| --van-button-primary-border-color | `@blue` | - |
| --van-button-success-color | `@white` | - |
| --van-button-success-background-color | `@green` | - |
| --van-button-success-border-color | `@green` | - |
| --van-button-danger-color | `@white` | - |
| --van-button-danger-background-color | `@red` | - |
| --van-button-danger-border-color | `@red` | - |
| --van-button-warning-color | `@white` | - |
| --van-button-warning-background-color | `@orange` | - |
| --van-button-warning-border-color | `@orange` | - |
| --van-button-border-width | `@border-width-base` | - |
| --van-button-border-radius | `@border-radius-sm` | - |
| --van-button-round-border-radius | `@border-radius-max` | - |
| --van-button-plain-background-color | `@white` | - |
| --van-button-disabled-opacity | `@disabled-opacity` | - |
| --van-button-icon-size | `1.2em` | - |
| --van-button-loading-icon-size | `20px` | - |

74
src/button/README.zh-CN.md
View File

@ -174,41 +174,41 @@ app.use(Button);
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| -------------------------------- | -------------------- | ---- |
| @button-mini-height | `24px` | - |
| @button-mini-padding | `0 @padding-base` | - |
| @button-mini-font-size | `@font-size-xs` | - |
| @button-small-height | `32px` | - |
| @button-small-padding | `0 @padding-xs` | - |
| @button-small-font-size | `@font-size-sm` | - |
| @button-normal-font-size | `@font-size-md` | - |
| @button-normal-padding | `0 15px` | - |
| @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 | `@blue` | - |
| @button-primary-border-color | `@blue` | - |
| @button-success-color | `@white` | - |
| @button-success-background-color | `@green` | - |
| @button-success-border-color | `@green` | - |
| @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` | - |
| @button-icon-size | `1.2em` | - |
| @button-loading-icon-size | `20px` | - |
| 名称 | 默认值 | 描述 |
| ------------------------------------- | -------------------- | ---- |
| --van-button-mini-height | `24px` | - |
| --van-button-mini-padding | `0 @padding-base` | - |
| --van-button-mini-font-size | `@font-size-xs` | - |
| --van-button-small-height | `32px` | - |
| --van-button-small-padding | `0 @padding-xs` | - |
| --van-button-small-font-size | `@font-size-sm` | - |
| --van-button-normal-font-size | `@font-size-md` | - |
| --van-button-normal-padding | `0 15px` | - |
| --van-button-large-height | `50px` | - |
| --van-button-default-height | `44px` | - |
| --van-button-default-line-height | `1.2` | - |
| --van-button-default-font-size | `@font-size-lg` | - |
| --van-button-default-color | `@text-color` | - |
| --van-button-default-background-color | `@white` | - |
| --van-button-default-border-color | `@border-color` | - |
| --van-button-primary-color | `@white` | - |
| --van-button-primary-background-color | `@blue` | - |
| --van-button-primary-border-color | `@blue` | - |
| --van-button-success-color | `@white` | - |
| --van-button-success-background-color | `@green` | - |
| --van-button-success-border-color | `@green` | - |
| --van-button-danger-color | `@white` | - |
| --van-button-danger-background-color | `@red` | - |
| --van-button-danger-border-color | `@red` | - |
| --van-button-warning-color | `@white` | - |
| --van-button-warning-background-color | `@orange` | - |
| --van-button-warning-border-color | `@orange` | - |
| --van-button-border-width | `@border-width-base` | - |
| --van-button-border-radius | `@border-radius-sm` | - |
| --van-button-round-border-radius | `@border-radius-max` | - |
| --van-button-plain-background-color | `@white` | - |
| --van-button-disabled-opacity | `@disabled-opacity` | - |
| --van-button-icon-size | `1.2em` | - |
| --van-button-loading-icon-size | `20px` | - |

54
src/calendar/README.md
View File

@ -345,34 +345,34 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Calend
| reset | Reset selected date, will reset to default date when no params passed | _date?: Date \| Date[]_ | - |
| scrollToDate | Scroll to date | _date: Date_ | - |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| --van-calendar-background-color | `@white` | - |
| --van-calendar-popup-height | `80%` | - |
| --van-calendar-header-box-shadow | `0 2px 10px rgba(125, 126, 128, 0.16)` | - |
| --van-calendar-header-title-height | `44px` | - |
| --van-calendar-header-title-font-size | `@font-size-lg` | - |
| --van-calendar-header-subtitle-font-size | `@font-size-md` | - |
| --van-calendar-weekdays-height | `30px` | - |
| --van-calendar-weekdays-font-size | `@font-size-sm` | - |
| --van-calendar-month-title-font-size | `@font-size-md` | - |
| --van-calendar-month-mark-color | `fade(@gray-2, 80%)` | - |
| --van-calendar-month-mark-font-size | `160px` | - |
| --van-calendar-day-height | `64px` | - |
| --van-calendar-day-font-size | `@font-size-lg` | - |
| --van-calendar-range-edge-color | `@white` | - |
| --van-calendar-range-edge-background-color | `@red` | - |
| --van-calendar-range-middle-color | `@red` | - |
| --van-calendar-range-middle-background-opacity | `0.1` | - |
| --van-calendar-selected-day-size | `54px` | - |
| --van-calendar-selected-day-color | `@white` | - |
| --van-calendar-info-font-size | `@font-size-xs` | - |
| --van-calendar-info-line-height | `@line-height-xs` | - |
| --van-calendar-selected-day-background-color | `@red` | - |
| --van-calendar-day-disabled-color | `@gray-5` | - |
| --van-calendar-confirm-button-height | `36px` | - |
| --van-calendar-confirm-button-margin | `7px 0` | - |

52
src/calendar/README.zh-CN.md
View File

@ -353,35 +353,35 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| @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` | - |
| --van-calendar-background-color | `@white` | - |
| --van-calendar-popup-height | `80%` | - |
| --van-calendar-header-box-shadow | `0 2px 10px rgba(125, 126, 128, 0.16)` | - |
| --van-calendar-header-title-height | `44px` | - |
| --van-calendar-header-title-font-size | `@font-size-lg` | - |
| --van-calendar-header-subtitle-font-size | `@font-size-md` | - |
| --van-calendar-weekdays-height | `30px` | - |
| --van-calendar-weekdays-font-size | `@font-size-sm` | - |
| --van-calendar-month-title-font-size | `@font-size-md` | - |
| --van-calendar-month-mark-color | `fade(@gray-2, 80%)` | - |
| --van-calendar-month-mark-font-size | `160px` | - |
| --van-calendar-day-height | `64px` | - |
| --van-calendar-day-font-size | `@font-size-lg` | - |
| --van-calendar-range-edge-color | `@white` | - |
| --van-calendar-range-edge-background-color | `@red` | - |
| --van-calendar-range-middle-color | `@red` | - |
| --van-calendar-range-middle-background-opacity | `0.1` | - |
| --van-calendar-selected-day-size | `54px` | - |
| --van-calendar-selected-day-color | `@white` | - |
| --van-calendar-info-font-size | `@font-size-xs` | - |
| --van-calendar-info-line-height | `@line-height-xs` | - |
| --van-calendar-selected-day-background-color | `@red` | - |
| --van-calendar-day-disabled-color | `@gray-5` | - |
| --van-calendar-confirm-button-height | `36px` | - |
| --van-calendar-confirm-button-margin | `7px 0` | - |
## 常见问题

40
src/card/README.md
View File

@ -108,25 +108,25 @@ Use slot to custom content.
| tags | Custom tags |
| footer | Custom footer |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| Name | Default Value | Description |
| --- | --- | --- |
| --van-card-padding | `@padding-xs @padding-md` | - |
| --van-card-font-size | `@font-size-sm` | - |
| --van-card-text-color | `@text-color` | - |
| --van-card-background-color | `@background-color-light` | - |
| --van-card-thumb-size | `88px` | - |
| --van-card-thumb-border-radius | `@border-radius-lg` | - |
| --van-card-title-line-height | `16px` | - |
| --van-card-desc-color | `@gray-7` | - |
| --van-card-desc-line-height | `@line-height-md` | - |
| --van-card-price-color | `@gray-8` | - |
| --van-card-origin-price-color | `@gray-6` | - |
| --van-card-num-color | `@gray-6` | - |
| --van-card-origin-price-font-size | `@font-size-xs` | - |
| --van-card-price-font-size | `@font-size-sm` | - |
| --van-card-price-integer-font-size | `@font-size-lg` | - |
| --van-card-price-font-family | `@price-integer-font-family` | - |

38
src/card/README.zh-CN.md
View File

@ -112,23 +112,23 @@ app.use(Card);
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ----------------------------- | ---------------------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| ---------------------------------- | ---------------------------- | ---- |
| --van-card-padding | `@padding-xs @padding-md` | - |
| --van-card-font-size | `@font-size-sm` | - |
| --van-card-text-color | `@text-color` | - |
| --van-card-background-color | `@background-color-light` | - |
| --van-card-thumb-size | `88px` | - |
| --van-card-thumb-border-radius | `@border-radius-lg` | - |
| --van-card-title-line-height | `16px` | - |
| --van-card-desc-color | `@gray-7` | - |
| --van-card-desc-line-height | `@line-height-md` | - |
| --van-card-price-color | `@gray-8` | - |
| --van-card-origin-price-color | `@gray-6` | - |
| --van-card-num-color | `@gray-6` | - |
| --van-card-origin-price-font-size | `@font-size-xs` | - |
| --van-card-price-font-size | `@font-size-sm` | - |
| --van-card-price-integer-font-size | `@font-size-lg` | - |
| --van-card-price-font-family | `@price-integer-font-family` | - |

34
src/cascader/README.md
View File

@ -228,22 +228,22 @@ export default {
| ----- | ------------ |
| title | Custom title |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| Name | Default Value | Description |
| --------------------------------- | --------------- | ----------- |
| @cascader-header-height | `48px` | - |
| @cascader-header-padding | `0 @padding-md` | - |
| @cascader-title-font-size | `@font-size-lg` | - |
| @cascader-title-line-height | `20px` | - |
| @cascader-close-icon-size | `22px` | - |
| @cascader-close-icon-color | `@gray-5` | - |
| @cascader-close-icon-active-color | `@gray-6` | - |
| @cascader-selected-icon-size | `18px` | - |
| @cascader-tabs-height | `48px` | - |
| @cascader-active-color | `@red` | - |
| @cascader-options-height | `384px` | - |
| @cascader-tab-color | `@text-color` | - |
| @cascader-unselected-tab-color | `@gray-6` | - |
| Name | Default Value | Description |
| -------------------------------------- | --------------- | ----------- |
| --van-cascader-header-height | `48px` | - |
| --van-cascader-header-padding | `0 @padding-md` | - |
| --van-cascader-title-font-size | `@font-size-lg` | - |
| --van-cascader-title-line-height | `20px` | - |
| --van-cascader-close-icon-size | `22px` | - |
| --van-cascader-close-icon-color | `@gray-5` | - |
| --van-cascader-close-icon-active-color | `@gray-6` | - |
| --van-cascader-selected-icon-size | `18px` | - |
| --van-cascader-tabs-height | `48px` | - |
| --van-cascader-active-color | `@red` | - |
| --van-cascader-options-height | `384px` | - |
| --van-cascader-tab-color | `@text-color` | - |
| --van-cascader-unselected-tab-color | `@gray-6` | - |

32
src/cascader/README.zh-CN.md
View File

@ -240,20 +240,20 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| --------------------------------- | --------------- | ---- |
| @cascader-header-height | `48px` | - |
| @cascader-header-padding | `0 @padding-md` | - |
| @cascader-title-font-size | `@font-size-lg` | - |
| @cascader-title-line-height | `20px` | - |
| @cascader-close-icon-size | `22px` | - |
| @cascader-close-icon-color | `@gray-5` | - |
| @cascader-close-icon-active-color | `@gray-6` | - |
| @cascader-selected-icon-size | `18px` | - |
| @cascader-tabs-height | `48px` | - |
| @cascader-active-color | `@red` | - |
| @cascader-options-height | `384px` | - |
| @cascader-tab-color | `@text-color` | - |
| @cascader-unselected-tab-color | `@gray-6` | - |
| 名称 | 默认值 | 描述 |
| -------------------------------------- | --------------- | ---- |
| --van-cascader-header-height | `48px` | - |
| --van-cascader-header-padding | `0 @padding-md` | - |
| --van-cascader-title-font-size | `@font-size-lg` | - |
| --van-cascader-title-line-height | `20px` | - |
| --van-cascader-close-icon-size | `22px` | - |
| --van-cascader-close-icon-color | `@gray-5` | - |
| --van-cascader-close-icon-active-color | `@gray-6` | - |
| --van-cascader-selected-icon-size | `18px` | - |
| --van-cascader-tabs-height | `48px` | - |
| --van-cascader-active-color | `@red` | - |
| --van-cascader-options-height | `384px` | - |
| --van-cascader-tab-color | `@text-color` | - |
| --van-cascader-unselected-tab-color | `@gray-6` | - |

52
src/cell/README.md
View File

@ -182,33 +182,33 @@ app.use(CellGroup);
| right-icon | Custom right icon |
| extra | Custom extra content on the right |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| --van-cell-font-size | `@font-size-md` | - |
| --van-cell-line-height | `24px` | - |
| --van-cell-vertical-padding | `10px` | - |
| --van-cell-horizontal-padding | `@padding-md` | - |
| --van-cell-text-color | `@text-color` | - |
| --van-cell-background-color | `@white` | - |
| --van-cell-border-color | `@border-color` | - |
| --van-cell-active-color | `@active-color` | - |
| --van-cell-required-color | `@red` | - |
| --van-cell-label-color | `@gray-6` | - |
| --van-cell-label-font-size | `@font-size-sm` | - |
| --van-cell-label-line-height | `@line-height-sm` | - |
| --van-cell-label-margin-top | `@padding-base` | - |
| --van-cell-value-color | `@gray-6` | - |
| --van-cell-icon-size | `16px` | - |
| --van-cell-right-icon-color | `@gray-6` | - |
| --van-cell-large-vertical-padding | `@padding-sm` | - |
| --van-cell-large-title-font-size | `@font-size-lg` | - |
| --van-cell-large-label-font-size | `@font-size-md` | - |
| --van-cell-group-background-color | `@white` | - |
| --van-cell-group-title-color | `@gray-6` | - |
| --van-cell-group-title-padding | `@padding-md @padding-md @padding-xs` | - |
| --van-cell-group-title-font-size | `@font-size-md` | - |
| --van-cell-group-title-line-height | `16px` | - |

54
src/cell/README.zh-CN.md
View File

@ -187,31 +187,31 @@ app.use(CellGroup);
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ----------------------------- | ------------------------------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-cell-font-size | `@font-size-md` | - |
| --van-cell-line-height | `24px` | - |
| --van-cell-vertical-padding | `10px` | - |
| --van-cell-horizontal-padding | `@padding-md` | - |
| --van-cell-text-color | `@text-color` | - |
| --van-cell-background-color | `@white` | - |
| --van-cell-border-color | `@border-color` | - |
| --van-cell-active-color | `@active-color` | - |
| --van-cell-required-color | `@red` | - |
| --van-cell-label-color | `@gray-6` | - |
| --van-cell-label-font-size | `@font-size-sm` | - |
| --van-cell-label-line-height | `@line-height-sm` | - |
| --van-cell-label-margin-top | `@padding-base` | - |
| --van-cell-value-color | `@gray-6` | - |
| --van-cell-icon-size | `16px` | - |
| --van-cell-right-icon-color | `@gray-6` | - |
| --van-cell-large-vertical-padding | `@padding-sm` | - |
| --van-cell-large-title-font-size | `@font-size-lg` | - |
| --van-cell-large-label-font-size | `@font-size-md` | - |
| --van-cell-group-background-color | `@white` | - |
| --van-cell-group-title-color | `@gray-6` | - |
| --van-cell-group-title-padding | `@padding-md @padding-md @padding-xs` | - |
| --van-cell-group-title-font-size | `@font-size-md` | - |
| --van-cell-group-title-line-height | `16px` | - |

26
src/checkbox/README.md
View File

@ -246,7 +246,7 @@ export default {
### Checkbox Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| --- | --- | --- | --- | --- |
| v-model | Check status | _boolean_ | `false` |
| name | Checkbox name | _any_ | - |
| shape | Can be set to `square` | _string_ | `round` |
@ -260,7 +260,7 @@ export default {
### CheckboxGroup Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| --- | --- | --- | --- | --- |
| v-model | Names of all checked checkboxes | _any[]_ | - |
| disabled | Whether to disable all checkboxes | _boolean_ | `false` |
| max | Maximum amount of checked options | _number \| string_ | `0`(Unlimited) |
@ -327,18 +327,18 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Checkb
| ------ | ------------------- | ------------------- | ------------ |
| toggle | Toggle check status | _checked?: boolean_ | - |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| --van-checkbox-size | `20px` | - |
| --van-checkbox-border-color | `@gray-5` | - |
| --van-checkbox-transition-duration | `@animation-duration-fast` | - |
| --van-checkbox-label-margin | `@padding-xs` | - |
| --van-checkbox-label-color | `@text-color` | - |
| --van-checkbox-checked-icon-color | `@blue` | - |
| --van-checkbox-disabled-icon-color | `@gray-5` | - |
| --van-checkbox-disabled-label-color | `@gray-5` | - |
| --van-checkbox-disabled-background-color | `@border-color` | - |

24
src/checkbox/README.zh-CN.md
View File

@ -347,16 +347,16 @@ checkboxGroup.toggleAll({
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ----------------------------------- | -------------------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| ---------------------------------------- | -------------------------- | ---- |
| --van-checkbox-size | `20px` | - |
| --van-checkbox-border-color | `@gray-5` | - |
| --van-checkbox-transition-duration | `@animation-duration-fast` | - |
| --van-checkbox-label-margin | `@padding-xs` | - |
| --van-checkbox-label-color | `@text-color` | - |
| --van-checkbox-checked-icon-color | `@blue` | - |
| --van-checkbox-disabled-icon-color | `@gray-5` | - |
| --van-checkbox-disabled-label-color | `@gray-5` | - |
| --van-checkbox-disabled-background-color | `@border-color` | - |

22
src/circle/README.md
View File

@ -143,16 +143,16 @@ export default {
| ------- | ------------------- |
| default | custom text content |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| Name | Default Value | Description |
| ------------------------ | ------------------- | ----------- |
| @circle-size | `100px` | - |
| @circle-color | `@blue` | - |
| @circle-layer-color | `@white` | - |
| @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` | - |
| Name | Default Value | Description |
| ----------------------------- | ------------------- | ----------- |
| --van-circle-size | `100px` | - |
| --van-circle-color | `@blue` | - |
| --van-circle-layer-color | `@white` | - |
| --van-circle-text-color | `@text-color` | - |
| --van-circle-text-font-weight | `@font-weight-bold` | - |
| --van-circle-text-font-size | `@font-size-md` | - |
| --van-circle-text-line-height | `@line-height-md` | - |

20
src/circle/README.zh-CN.md
View File

@ -157,14 +157,14 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------ | ------------------- | ---- |
| @circle-size | `100px` | - |
| @circle-color | `@blue` | - |
| @circle-layer-color | `@white` | - |
| @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` | - |
| 名称 | 默认值 | 描述 |
| ----------------------------- | ------------------- | ---- |
| --van-circle-size | `100px` | - |
| --van-circle-color | `@blue` | - |
| --van-circle-layer-color | `@white` | - |
| --van-circle-text-color | `@text-color` | - |
| --van-circle-text-font-weight | `@font-weight-bold` | - |
| --van-circle-text-font-size | `@font-size-md` | - |
| --van-circle-text-line-height | `@line-height-md` | - |

18
src/collapse/README.md
View File

@ -160,16 +160,16 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Collap
| ------ | ---------------------- | ------------------- | ------------ |
| toggle | Toggle expanded status | _expanded: boolean_ | - |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| --van-collapse-item-transition-duration | `@animation-duration-base` | - |
| --van-collapse-item-content-padding | `@padding-sm @padding-md` | - |
| --van-collapse-item-content-font-size | `@font-size-md` | - |
| --van-collapse-item-content-line-height | `1.5` | - |
| --van-collapse-item-content-text-color | `@gray-6` | - |
| --van-collapse-item-content-background-color | `@white` | - |
| --van-collapse-item-title-disabled-color | `@gray-5` | - |

20
src/collapse/README.zh-CN.md
View File

@ -160,14 +160,14 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| --------------------------------------- | -------------------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-collapse-item-transition-duration | `@animation-duration-base` | - |
| --van-collapse-item-content-padding | `@padding-sm @padding-md` | - |
| --van-collapse-item-content-font-size | `@font-size-md` | - |
| --van-collapse-item-content-line-height | `1.5` | - |
| --van-collapse-item-content-text-color | `@gray-6` | - |
| --van-collapse-item-content-background-color | `@white` | - |
| --van-collapse-item-title-disabled-color | `@gray-5` | - |

16
src/contact-card/README.md
View File

@ -96,13 +96,13 @@ export default {
| ----- | --------------------------------- | ------------------- |
| click | Emitted when component is clicked | _event: MouseEvent_ |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| Name | Default Value | Description |
| ------------------------------------ | ----------------- | ----------- |
| --van-contact-card-padding | `@padding-md` | - |
| --van-contact-card-add-icon-size | `40px` | - |
| --van-contact-card-add-icon-color | `@blue` | - |
| --van-contact-card-value-line-height | `@line-height-md` | - |

14
src/contact-card/README.zh-CN.md
View File

@ -93,11 +93,11 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------------- | ----------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| ------------------------------------ | ----------------- | ---- |
| --van-contact-card-padding | `@padding-md` | - |
| --van-contact-card-add-icon-size | `40px` | - |
| --van-contact-card-add-icon-color | `@blue` | - |
| --van-contact-card-value-line-height | `@line-height-md` | - |

20
src/contact-edit/README.md
View File

@ -77,15 +77,15 @@ export default {
| name | Name | _string_ |
| tel | Phone | _string_ |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| Name | Default Value | Description |
| --------------------------------------- | ------------------- | ----------- |
| --van-contact-edit-padding | `@padding-md` | - |
| --van-contact-edit-fields-radius | `@border-radius-md` | - |
| --van-contact-edit-buttons-padding | `@padding-xl 0` | - |
| --van-contact-edit-button-margin-bottom | `@padding-sm` | - |
| --van-contact-edit-button-font-size | `16px` | - |
| --van-contact-edit-field-label-width | `4.1em` | - |

18
src/contact-edit/README.zh-CN.md
View File

@ -79,13 +79,13 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ---------------------------------- | ------------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| --------------------------------------- | ------------------- | ---- |
| --van-contact-edit-padding | `@padding-md` | - |
| --van-contact-edit-fields-radius | `@border-radius-md` | - |
| --van-contact-edit-buttons-padding | `@padding-xl 0` | - |
| --van-contact-edit-button-margin-bottom | `@padding-sm` | - |
| --van-contact-edit-button-font-size | `16px` | - |
| --van-contact-edit-field-label-width | `4.1em` | - |

16
src/contact-list/README.md
View File

@ -96,13 +96,13 @@ export default {
| tel | Phone | _string_ |
| isDefault | Is default contact | _boolean_ |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| Name | Default Value | Description |
| ----------------------------------- | ------------- | ----------- |
| @contact-list-edit-icon-size | `16px` | - |
| @contact-list-add-button-z-index | `999` | - |
| @contact-list-item-padding | `@padding-md` | - |
| @contact-list-item-radio-icon-color | `@red` | - |
| Name | Default Value | Description |
| ---------------------------------------- | ------------- | ----------- |
| --van-contact-list-edit-icon-size | `16px` | - |
| --van-contact-list-add-button-z-index | `999` | - |
| --van-contact-list-item-padding | `@padding-md` | - |
| --van-contact-list-item-radio-icon-color | `@red` | - |

14
src/contact-list/README.zh-CN.md
View File

@ -98,11 +98,11 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ----------------------------------- | ------------- | ---- |
| @contact-list-edit-icon-size | `16px` | - |
| @contact-list-add-button-z-index | `999` | - |
| @contact-list-item-padding | `@padding-md` | - |
| @contact-list-item-radio-icon-color | `@red` | - |
| 名称 | 默认值 | 描述 |
| ---------------------------------------- | ------------- | ---- |
| --van-contact-list-edit-icon-size | `16px` | - |
| --van-contact-list-add-button-z-index | `999` | - |
| --van-contact-list-item-padding | `@padding-md` | - |
| --van-contact-list-item-radio-icon-color | `@red` | - |

14
src/count-down/README.md
View File

@ -181,12 +181,12 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get CountD
| pause | Pause count down | - | - |
| reset | Reset count down | - | - |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| Name | Default Value | Description |
| ----------------------- | ----------------- | ----------- |
| @count-down-text-color | `@text-color` | - |
| @count-down-font-size | `@font-size-md` | - |
| @count-down-line-height | `@line-height-md` | - |
| Name | Default Value | Description |
| ---------------------------- | ----------------- | ----------- |
| --van-count-down-text-color | `@text-color` | - |
| --van-count-down-font-size | `@font-size-md` | - |
| --van-count-down-line-height | `@line-height-md` | - |

12
src/count-down/README.zh-CN.md
View File

@ -193,13 +193,13 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ----------------------- | ----------------- | ---- |
| @count-down-text-color | `@text-color` | - |
| @count-down-font-size | `@font-size-md` | - |
| @count-down-line-height | `@line-height-md` | - |
| 名称 | 默认值 | 描述 |
| ---------------------------- | ----------------- | ---- |
| --van-count-down-text-color | `@text-color` | - |
| --van-count-down-font-size | `@font-size-md` | - |
| --van-count-down-line-height | `@line-height-md` | - |
## 常见问题

56
src/coupon-list/README.md
View File

@ -102,7 +102,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[]_ | `[]` |
@ -149,34 +149,34 @@ export default {
| valueDesc | Value Text | _string_ |
| unitDesc | Unit Text | _string_ |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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-corner-checkbox-icon-color | `@red` | - |
| @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` | - |
| --van-coupon-margin | `0 @padding-sm @padding-sm` | - |
| --van-coupon-content-height | `84px` | - |
| --van-coupon-content-padding | `14px 0` | - |
| --van-coupon-background-color | `@white` | - |
| --van-coupon-active-background-color | `@active-color` | - |
| --van-coupon-border-radius | `@border-radius-lg` | - |
| --van-coupon-box-shadow | `0 0 4px rgba(0, 0, 0, 0.1)` | - |
| --van-coupon-head-width | `96px` | - |
| --van-coupon-amount-color | `@red` | - |
| --van-coupon-amount-font-size | `30px` | - |
| --van-coupon-currency-font-size | `40%` | - |
| --van-coupon-name-font-size | `@font-size-md` | - |
| --van-coupon-disabled-text-color | `@gray-6` | - |
| --van-coupon-description-padding | `@padding-xs @padding-md` | - |
| --van-coupon-description-border-color | `@border-color` | - |
| --van-coupon-corner-checkbox-icon-color | `@red` | - |
| --van-coupon-list-background-color | `@background-color` | - |
| --van-coupon-list-field-padding | `5px 0 5px @padding-md` | - |
| --van-coupon-list-exchange-button-height | `32px` | - |
| --van-coupon-list-close-button-height | `40px` | - |
| --van-coupon-list-empty-image-size | `200px` | - |
| --van-coupon-list-empty-tip-color | `@gray-6` | - |
| --van-coupon-list-empty-tip-font-size | `@font-size-md` | - |
| --van-coupon-list-empty-tip-line-height | `@line-height-md` | - |
| --van-coupon-cell-selected-text-color | `@text-color` | - |

56
src/coupon-list/README.zh-CN.md
View File

@ -153,32 +153,32 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ----------------------------------- | ---------------------------- | ---- |
| @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-corner-checkbox-icon-color | `@red` | - |
| @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` | - |
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-coupon-margin | `0 @padding-sm @padding-sm` | - |
| --van-coupon-content-height | `84px` | - |
| --van-coupon-content-padding | `14px 0` | - |
| --van-coupon-background-color | `@white` | - |
| --van-coupon-active-background-color | `@active-color` | - |
| --van-coupon-border-radius | `@border-radius-lg` | - |
| --van-coupon-box-shadow | `0 0 4px rgba(0, 0, 0, 0.1)` | - |
| --van-coupon-head-width | `96px` | - |
| --van-coupon-amount-color | `@red` | - |
| --van-coupon-amount-font-size | `30px` | - |
| --van-coupon-currency-font-size | `40%` | - |
| --van-coupon-name-font-size | `@font-size-md` | - |
| --van-coupon-disabled-text-color | `@gray-6` | - |
| --van-coupon-description-padding | `@padding-xs @padding-md` | - |
| --van-coupon-description-border-color | `@border-color` | - |
| --van-coupon-corner-checkbox-icon-color | `@red` | - |
| --van-coupon-list-background-color | `@background-color` | - |
| --van-coupon-list-field-padding | `5px 0 5px @padding-md` | - |
| --van-coupon-list-exchange-button-height | `32px` | - |
| --van-coupon-list-close-button-height | `40px` | - |
| --van-coupon-list-empty-image-size | `200px` | - |
| --van-coupon-list-empty-tip-color | `@gray-6` | - |
| --van-coupon-list-empty-tip-font-size | `@font-size-md` | - |
| --van-coupon-list-empty-tip-line-height | `@line-height-md` | - |
| --van-coupon-cell-selected-text-color | `@text-color` | - |

42
src/dialog/README.md
View File

@ -214,28 +214,28 @@ export default {
| title | Custom title |
| footer `v3.0.10` | Custom footer |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| --van-dialog-width | `320px` | - |
| --van-dialog-small-screen-width | `90%` | - |
| --van-dialog-font-size | `@font-size-lg` | - |
| --van-dialog-transition | `@animation-duration-base` | - |
| --van-dialog-border-radius | `16px` | - |
| --van-dialog-background-color | `@white` | - |
| --van-dialog-header-font-weight | `@font-weight-bold` | - |
| --van-dialog-header-line-height | `24px` | - |
| --van-dialog-header-padding-top | `26px` | - |
| --van-dialog-header-isolated-padding | `@padding-lg 0` | - |
| --van-dialog-message-padding | `@padding-lg` | - |
| --van-dialog-message-font-size | `@font-size-md` | - |
| --van-dialog-message-line-height | `@line-height-md` | - |
| --van-dialog-message-max-height | `60vh` | - |
| --van-dialog-has-title-message-text-color | `@gray-7` | - |
| --van-dialog-has-title-message-padding-top | `@padding-xs` | - |
| --van-dialog-button-height | `48px` | - |
| --van-dialog-round-button-height | `36px` | - |
| --van-dialog-confirm-button-text-color | `@red` | - |

44
src/dialog/README.zh-CN.md
View File

@ -251,29 +251,29 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------------------- | -------------------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-dialog-width | `320px` | - |
| --van-dialog-small-screen-width | `90%` | - |
| --van-dialog-font-size | `@font-size-lg` | - |
| --van-dialog-transition | `@animation-duration-base` | - |
| --van-dialog-border-radius | `16px` | - |
| --van-dialog-background-color | `@white` | - |
| --van-dialog-header-font-weight | `@font-weight-bold` | - |
| --van-dialog-header-line-height | `24px` | - |
| --van-dialog-header-padding-top | `26px` | - |
| --van-dialog-header-isolated-padding | `@padding-lg 0` | - |
| --van-dialog-message-padding | `@padding-lg` | - |
| --van-dialog-message-font-size | `@font-size-md` | - |
| --van-dialog-message-line-height | `@line-height-md` | - |
| --van-dialog-message-max-height | `60vh` | - |
| --van-dialog-has-title-message-text-color | `@gray-7` | - |
| --van-dialog-has-title-message-padding-top | `@padding-xs` | - |
| --van-dialog-button-height | `48px` | - |
| --van-dialog-round-button-height | `36px` | - |
| --van-dialog-confirm-button-text-color | `@red` | - |
## 常见问题

24
src/divider/README.md
View File

@ -69,17 +69,17 @@ app.use(Divider);
| ------- | ----------- |
| default | content |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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%` | - |
| Name | Default Value | Description |
| --------------------------------- | --------------- | ----------- |
| --van-divider-margin | `@padding-md 0` | - |
| --van-divider-text-color | `@gray-6` | - |
| --van-divider-font-size | `@font-size-md` | - |
| --van-divider-line-height | `24px` | - |
| --van-divider-border-color | `@border-color` | - |
| --van-divider-content-padding | `@padding-md` | - |
| --van-divider-content-left-width | `10%` | - |
| --van-divider-content-right-width | `10%` | - |

22
src/divider/README.zh-CN.md
View File

@ -81,15 +81,15 @@ app.use(Divider);
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ---------------------------- | --------------- | ---- |
| @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%` | - |
| 名称 | 默认值 | 描述 |
| --------------------------------- | --------------- | ---- |
| --van-divider-margin | `@padding-md 0` | - |
| --van-divider-text-color | `@gray-6` | - |
| --van-divider-font-size | `@font-size-md` | - |
| --van-divider-line-height | `24px` | - |
| --van-divider-border-color | `@border-color` | - |
| --van-divider-content-padding | `@padding-md` | - |
| --van-divider-content-left-width | `10%` | - |
| --van-divider-content-right-width | `10%` | - |

28
src/dropdown-menu/README.md
View File

@ -200,21 +200,21 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Dropdo
| value | Value | _number \| string_ |
| icon | Left icon | _string_ |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| --van-dropdown-menu-height | `48px` | - |
| --van-dropdown-menu-background-color | `@white` | - |
| --van-dropdown-menu-box-shadow | `0 2px 12px fade(@gray-7, 12)` | - |
| --van-dropdown-menu-title-font-size | `15px` | - |
| --van-dropdown-menu-title-text-color | `@text-color` | - |
| --van-dropdown-menu-title-active-text-color | `@red` | - |
| --van-dropdown-menu-title-disabled-text-color | `@gray-6` | - |
| --van-dropdown-menu-title-padding | `0 @padding-xs` | - |
| --van-dropdown-menu-title-line-height | `@line-height-lg` | - |
| --van-dropdown-menu-option-active-color | `@red` | - |
| --van-dropdown-menu-content-max-height | `80%` | - |
| --van-dropdown-item-z-index | `10` | - |

26
src/dropdown-menu/README.zh-CN.md
View File

@ -206,22 +206,22 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| @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` | - |
| --van-dropdown-menu-height | `48px` | - |
| --van-dropdown-menu-background-color | `@white` | - |
| --van-dropdown-menu-box-shadow | `0 2px 12px fade(@gray-7, 12)` | - |
| --van-dropdown-menu-title-font-size | `15px` | - |
| --van-dropdown-menu-title-text-color | `@text-color` | - |
| --van-dropdown-menu-title-active-text-color | `@red` | - |
| --van-dropdown-menu-title-disabled-text-color | `@gray-6` | - |
| --van-dropdown-menu-title-padding | `0 @padding-xs` | - |
| --van-dropdown-menu-title-line-height | `@line-height-lg` | - |
| --van-dropdown-menu-option-active-color | `@red` | - |
| --van-dropdown-menu-content-max-height | `80%` | - |
| --van-dropdown-item-z-index | `10` | - |
## 常见问题

24
src/empty/README.md
View File

@ -86,17 +86,17 @@ Use the image prop to display different placeholder images.
| image | Custom image |
| description | Custom description |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| Name | Default Value | Description |
| ----------------------------------- | ----------------- | ----------- |
| --van-empty-padding | `@padding-xl 0` | - |
| --van-empty-image-size | `160px` | - |
| --van-empty-description-margin-top | `@padding-md` | - |
| --van-empty-description-padding | `0 60px` | - |
| --van-empty-description-color | `@gray-6` | - |
| --van-empty-description-font-size | `@font-size-md` | - |
| --van-empty-description-line-height | `@line-height-md` | - |
| --van-empty-bottom-margin-top | `24px` | - |

22
src/empty/README.zh-CN.md
View File

@ -93,15 +93,15 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------------ | ----------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| ----------------------------------- | ----------------- | ---- |
| --van-empty-padding | `@padding-xl 0` | - |
| --van-empty-image-size | `160px` | - |
| --van-empty-description-margin-top | `@padding-md` | - |
| --van-empty-description-padding | `0 60px` | - |
| --van-empty-description-color | `@gray-6` | - |
| --van-empty-description-font-size | `@font-size-md` | - |
| --van-empty-description-line-height | `@line-height-md` | - |
| --van-empty-bottom-margin-top | `24px` | - |

44
src/field/README.md
View File

@ -309,27 +309,27 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Field
| button | Insert button |
| extra | Custom content on the right |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| Name | Default Value | Description |
| ------------------------------------- | --------------- | ----------- |
| --van-field-label-width | `6.2em` | - |
| --van-field-label-color | `@gray-7` | - |
| --van-field-label-margin-right | `@padding-sm` | - |
| --van-field-input-text-color | `@text-color` | - |
| --van-field-input-error-text-color | `@red` | - |
| --van-field-input-disabled-text-color | `@gray-5` | - |
| --van-field-placeholder-text-color | `@gray-5` | - |
| --van-field-icon-size | `16px` | - |
| --van-field-clear-icon-size | `16px` | - |
| --van-field-clear-icon-color | `@gray-5` | - |
| --van-field-right-icon-color | `@gray-6` | - |
| --van-field-error-message-color | `@red` | - |
| --van-field-error-message-text-color | `12px` | - |
| --van-field-text-area-min-height | `60px` | - |
| --van-field-word-limit-color | `@gray-7` | - |
| --van-field-word-limit-font-size | `@font-size-sm` | - |
| --van-field-word-limit-line-height | `16px` | - |
| --van-field-disabled-text-color | `@gray-5` | - |

42
src/field/README.zh-CN.md
View File

@ -328,28 +328,28 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| -------------------------------- | --------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| ------------------------------------- | --------------- | ---- |
| --van-field-label-width | `6.2em` | - |
| --van-field-label-color | `@gray-7` | - |
| --van-field-label-margin-right | `@padding-sm` | - |
| --van-field-input-text-color | `@text-color` | - |
| --van-field-input-error-text-color | `@red` | - |
| --van-field-input-disabled-text-color | `@gray-5` | - |
| --van-field-placeholder-text-color | `@gray-5` | - |
| --van-field-icon-size | `16px` | - |
| --van-field-clear-icon-size | `16px` | - |
| --van-field-clear-icon-color | `@gray-5` | - |
| --van-field-right-icon-color | `@gray-6` | - |
| --van-field-error-message-color | `@red` | - |
| --van-field-error-message-text-color | `12px` | - |
| --van-field-text-area-min-height | `60px` | - |
| --van-field-word-limit-color | `@gray-7` | - |
| --van-field-word-limit-font-size | `@font-size-sm` | - |
| --van-field-word-limit-line-height | `16px` | - |
| --van-field-disabled-text-color | `@gray-5` | - |
## 常见问题

16
src/grid/README.md
View File

@ -141,15 +141,15 @@ app.use(GridItem);
| icon | Custom icon |
| text | Custom text |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| --van-grid-item-content-padding | `@padding-md @padding-xs` | - |
| --van-grid-item-content-background-color | `@white` | - |
| --van-grid-item-content-active-color | `@active-color` | - |
| --van-grid-item-icon-size | `28px` | - |
| --van-grid-item-text-color | `@gray-7` | - |
| --van-grid-item-text-font-size | `@font-size-sm` | - |

18
src/grid/README.zh-CN.md
View File

@ -159,13 +159,13 @@ app.use(GridItem);
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ----------------------------------- | ------------------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| ---------------------------------------- | ------------------------- | ---- |
| --van-grid-item-content-padding | `@padding-md @padding-xs` | - |
| --van-grid-item-content-background-color | `@white` | - |
| --van-grid-item-content-active-color | `@active-color` | - |
| --van-grid-item-icon-size | `28px` | - |
| --van-grid-item-text-color | `@gray-7` | - |
| --van-grid-item-text-font-size | `@font-size-sm` | - |

28
src/image-preview/README.md
View File

@ -209,19 +209,19 @@ 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
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| Name | Default Value | Description |
| --- | --- | --- |
| --van-image-preview-index-text-color | `@white` | - |
| --van-image-preview-index-font-size | `@font-size-md` | - |
| --van-image-preview-index-line-height | `@line-height-md` | - |
| --van-image-preview-index-text-shadow | `0 1px 1px @gray-8` | - |
| --van-image-preview-overlay-background-color | `rgba(0, 0, 0, 0.9)` | - |
| --van-image-preview-close-icon-size | `22px` | - |
| --van-image-preview-close-icon-color | `@gray-5` | - |
| --van-image-preview-close-icon-active-color | `@gray-6` | - |
| --van-image-preview-close-icon-margin | `@padding-md` | - |
| --van-image-preview-close-icon-z-index | `1` | - |

26
src/image-preview/README.zh-CN.md
View File

@ -248,20 +248,20 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| --------------------------------------- | -------------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| -------------------------------------------- | -------------------- | ---- |
| --van-image-preview-index-text-color | `@white` | - |
| --van-image-preview-index-font-size | `@font-size-md` | - |
| --van-image-preview-index-line-height | `@line-height-md` | - |
| --van-image-preview-index-text-shadow | `0 1px 1px @gray-8` | - |
| --van-image-preview-overlay-background-color | `rgba(0, 0, 0, 0.9)` | - |
| --van-image-preview-close-icon-size | `22px` | - |
| --van-image-preview-close-icon-color | `@gray-5` | - |
| --van-image-preview-close-icon-active-color | `@gray-6` | - |
| --van-image-preview-close-icon-margin | `@padding-md` | - |
| --van-image-preview-close-icon-z-index | `1` | - |
## 常见问题

22
src/image/README.md
View File

@ -114,16 +114,16 @@ app.use(Lazyload);
| loading | Custom loading placeholder |
| error | Custom error placeholder |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| Name | Default Value | Description |
| ---------------------------------------- | ------------------- | ----------- |
| --van-image-placeholder-text-color | `@gray-6` | - |
| --van-image-placeholder-font-size | `@font-size-md` | - |
| --van-image-placeholder-background-color | `@background-color` | - |
| --van-image-loading-icon-size | `32px` | - |
| --van-image-loading-icon-color | `@gray-4` | - |
| --van-image-error-icon-size | `32px` | - |
| --van-image-error-icon-color | `@gray-4` | - |

20
src/image/README.zh-CN.md
View File

@ -144,17 +144,17 @@ app.use(Lazyload);
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ----------------------------------- | ------------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| ---------------------------------------- | ------------------- | ---- |
| --van-image-placeholder-text-color | `@gray-6` | - |
| --van-image-placeholder-font-size | `@font-size-md` | - |
| --van-image-placeholder-background-color | `@background-color` | - |
| --van-image-loading-icon-size | `32px` | - |
| --van-image-loading-icon-color | `@gray-4` | - |
| --van-image-error-icon-size | `32px` | - |
| --van-image-error-icon-color | `@gray-4` | - |
## 常见问题

36
src/index-bar/README.md
View File

@ -70,7 +70,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` |
@ -105,22 +105,22 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get IndexB
| --- | --- | --- | --- |
| scrollTo | scroll to target element | _index: number \| string_ | - |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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 | `@red` | - |
| @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 | `@red` | - |
| @index-anchor-sticky-background-color | `@white` | - |
| Name | Default Value | Description |
| --- | --- | --- |
| --van-index-bar-sidebar-z-index | `2` | - |
| --van-index-bar-index-font-size | `@font-size-xs` | - |
| --van-index-bar-index-line-height | `@line-height-xs` | - |
| --van-index-bar-index-active-color | `@red` | - |
| --van-index-anchor-z-index | `1` | - |
| --van-index-anchor-padding | `0 @padding-md` | - |
| --van-index-anchor-text-color | `@text-color` | - |
| --van-index-anchor-font-weight | `@font-weight-bold` | - |
| --van-index-anchor-font-size | `@font-size-md` | - |
| --van-index-anchor-line-height | `32px` | - |
| --van-index-anchor-background-color | `transparent` | - |
| --van-index-anchor-sticky-text-color | `@red` | - |
| --van-index-anchor-sticky-background-color | `@white` | - |

32
src/index-bar/README.zh-CN.md
View File

@ -119,20 +119,20 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------------------- | ------------------- | ---- |
| @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 | `@red` | - |
| @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 | `@red` | - |
| @index-anchor-sticky-background-color | `@white` | - |
| 名称 | 默认值 | 描述 |
| ------------------------------------------ | ------------------- | ---- |
| --van-index-bar-sidebar-z-index | `2` | - |
| --van-index-bar-index-font-size | `@font-size-xs` | - |
| --van-index-bar-index-line-height | `@line-height-xs` | - |
| --van-index-bar-index-active-color | `@red` | - |
| --van-index-anchor-z-index | `1` | - |
| --van-index-anchor-padding | `0 @padding-md` | - |
| --van-index-anchor-text-color | `@text-color` | - |
| --van-index-anchor-font-weight | `@font-weight-bold` | - |
| --van-index-anchor-font-size | `@font-size-md` | - |
| --van-index-anchor-line-height | `32px` | - |
| --van-index-anchor-background-color | `transparent` | - |
| --van-index-anchor-sticky-text-color | `@red` | - |
| --van-index-anchor-sticky-background-color | `@white` | - |

16
src/list/README.md
View File

@ -200,13 +200,13 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get List i
| finished | Custom finished tips |
| error | Custom error tips |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| Name | Default Value | Description |
| ----------------------- | --------------- | ----------- |
| @list-text-color | `@gray-6` | - |
| @list-text-font-size | `@font-size-md` | - |
| @list-text-line-height | `50px` | - |
| @list-loading-icon-size | `16px` | - |
| Name | Default Value | Description |
| ---------------------------- | --------------- | ----------- |
| --van-list-text-color | `@gray-6` | - |
| --van-list-text-font-size | `@font-size-md` | - |
| --van-list-text-line-height | `50px` | - |
| --van-list-loading-icon-size | `16px` | - |

14
src/list/README.zh-CN.md
View File

@ -217,14 +217,14 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ----------------------- | --------------- | ---- |
| @list-text-color | `@gray-6` | - |
| @list-text-font-size | `@font-size-md` | - |
| @list-text-line-height | `50px` | - |
| @list-loading-icon-size | `16px` | - |
| 名称 | 默认值 | 描述 |
| ---------------------------- | --------------- | ---- |
| --van-list-text-color | `@gray-6` | - |
| --van-list-text-font-size | `@font-size-md` | - |
| --van-list-text-line-height | `50px` | - |
| --van-list-loading-icon-size | `16px` | - |
## 常见问题

18
src/loading/README.md
View File

@ -85,14 +85,14 @@ use `color` or `text-color` to change text color.
| ------- | ------------ |
| default | Loading text |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| Name | Default Value | Description |
| ---------------------------------------- | --------------- | ----------- |
| --van-loading-text-color | `@gray-6` | - |
| --van-loading-text-font-size | `@font-size-md` | - |
| --van-loading-spinner-color | `@gray-5` | - |
| --van-loading-spinner-size | `30px` | - |
| --van-loading-spinner-animation-duration | `0.8s` | - |

16
src/loading/README.zh-CN.md
View File

@ -97,12 +97,12 @@ app.use(Loading);
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ----------------------------------- | --------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| ---------------------------------------- | --------------- | ---- |
| --van-loading-text-color | `@gray-6` | - |
| --van-loading-text-font-size | `@font-size-md` | - |
| --van-loading-spinner-color | `@gray-5` | - |
| --van-loading-spinner-size | `30px` | - |
| --van-loading-spinner-animation-duration | `0.8s` | - |

24
src/nav-bar/README.md
View File

@ -87,17 +87,17 @@ export default {
| click-left | Emitted when the left button is clicked | _event: MouseEvent_ |
| click-right | Emitted when the right button is clicked | _event: MouseEvent_ |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| Name | Default Value | Description |
| ------------------------------ | --------------- | ----------- |
| --van-nav-bar-height | `46px` | - |
| --van-nav-bar-background-color | `@white` | - |
| --van-nav-bar-arrow-size | `16px` | - |
| --van-nav-bar-icon-color | `@blue` | - |
| --van-nav-bar-text-color | `@blue` | - |
| --van-nav-bar-title-font-size | `@font-size-lg` | - |
| --van-nav-bar-title-text-color | `@text-color` | - |
| --van-nav-bar-z-index | `1` | - |

22
src/nav-bar/README.zh-CN.md
View File

@ -91,15 +91,15 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------- | --------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| ------------------------------ | --------------- | ---- |
| --van-nav-bar-height | `46px` | - |
| --van-nav-bar-background-color | `@white` | - |
| --van-nav-bar-arrow-size | `16px` | - |
| --van-nav-bar-icon-color | `@blue` | - |
| --van-nav-bar-text-color | `@blue` | - |
| --van-nav-bar-title-font-size | `@font-size-lg` | - |
| --van-nav-bar-title-text-color | `@text-color` | - |
| --van-nav-bar-z-index | `1` | - |

28
src/notice-bar/README.md
View File

@ -88,7 +88,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` |
@ -115,18 +115,18 @@ app.use(NoticeBar);
| left-icon | Custom left icon |
| right-icon | Custom right icon |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| Name | Default Value | Description |
| --------------------------------- | ------------------------- | ----------- |
| --van-notice-bar-height | `40px` | - |
| --van-notice-bar-padding | `0 @padding-md` | - |
| --van-notice-bar-wrapable-padding | `@padding-xs @padding-md` | - |
| --van-notice-bar-text-color | `@orange-dark` | - |
| --van-notice-bar-font-size | `@font-size-md` | - |
| --van-notice-bar-line-height | `24px` | - |
| --van-notice-bar-background-color | `@orange-light` | - |
| --van-notice-bar-icon-size | `16px` | - |
| --van-notice-bar-icon-min-width | `24px` | - |

24
src/notice-bar/README.zh-CN.md
View File

@ -138,16 +138,16 @@ app.use(NoticeBar);
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ---------------------------- | ------------------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| --------------------------------- | ------------------------- | ---- |
| --van-notice-bar-height | `40px` | - |
| --van-notice-bar-padding | `0 @padding-md` | - |
| --van-notice-bar-wrapable-padding | `@padding-xs @padding-md` | - |
| --van-notice-bar-text-color | `@orange-dark` | - |
| --van-notice-bar-font-size | `@font-size-md` | - |
| --van-notice-bar-line-height | `24px` | - |
| --van-notice-bar-background-color | `@orange-light` | - |
| --van-notice-bar-icon-size | `16px` | - |
| --van-notice-bar-icon-min-width | `24px` | - |

28
src/notify/README.md
View File

@ -97,7 +97,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 |
@ -106,7 +106,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` |
@ -118,17 +118,17 @@ export default {
| onOpened | Callback function after opened | _() => void_ | - |
| onClose | Callback function after close | _() => void_ | - |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| Name | Default Value | Description |
| --- | --- | --- |
| --van-notify-text-color | `@white` | - |
| --van-notify-padding | `@padding-xs @padding-md` | - |
| --van-notify-font-size | `@font-size-md` | - |
| --van-notify-line-height | `@line-height-md` | - |
| --van-notify-primary-background-color | `@blue` | - |
| --van-notify-success-background-color | `@green` | - |
| --van-notify-danger-background-color | `@red` | - |
| --van-notify-warning-background-color | `@orange` | - |

24
src/notify/README.zh-CN.md
View File

@ -130,7 +130,7 @@ export default {
### 方法
| 方法名 | 说明 | 参数 | 返回值 |
| --- | --- | --- | --- |
| --- | --- | --- | --- | --- |
| Notify | 展示提示 | `options | message` | notify 实例 |
| Notify.clear | 关闭提示 | - | `void` |
| Notify.setDefaultOptions | 修改默认配置，对所有 Notify 生效 | `options` | `void` |
@ -153,15 +153,15 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| -------------------------------- | ------------------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| ------------------------------------- | ------------------------- | ---- |
| --van-notify-text-color | `@white` | - |
| --van-notify-padding | `@padding-xs @padding-md` | - |
| --van-notify-font-size | `@font-size-md` | - |
| --van-notify-line-height | `@line-height-md` | - |
| --van-notify-primary-background-color | `@blue` | - |
| --van-notify-success-background-color | `@green` | - |
| --van-notify-danger-background-color | `@red` | - |
| --van-notify-warning-background-color | `@orange` | - |

36
src/number-keyboard/README.md
View File

@ -204,23 +204,23 @@ export default {
| extra-key | Custom extra key content |
| title-left | Custom title left content |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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-z-index | `100` | - |
| Name | Default Value | Description |
| --- | --- | --- |
| --van-number-keyboard-background-color | `@gray-2` | - |
| --van-number-keyboard-key-height | `48px` | - |
| --van-number-keyboard-key-font-size | `28px` | - |
| --van-number-keyboard-key-active-color | `@gray-3` | - |
| --van-number-keyboard-delete-font-size | `@font-size-lg` | - |
| --van-number-keyboard-title-color | `@gray-7` | - |
| --van-number-keyboard-title-height | `34px` | - |
| --van-number-keyboard-title-font-size | `@font-size-lg` | - |
| --van-number-keyboard-close-padding | `0 @padding-md` | - |
| --van-number-keyboard-close-color | `@text-link-color` | - |
| --van-number-keyboard-close-font-size | `@font-size-md` | - |
| --van-number-keyboard-button-text-color | `@white` | - |
| --van-number-keyboard-button-background-color | `@blue` | - |
| --van-number-keyboard-z-index | `100` | - |

34
src/number-keyboard/README.zh-CN.md
View File

@ -213,24 +213,24 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ---------------------------------------- | ------------------ | ---- |
| @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-z-index | `100` | - |
| 名称 | 默认值 | 描述 |
| --------------------------------------------- | ------------------ | ---- |
| --van-number-keyboard-background-color | `@gray-2` | - |
| --van-number-keyboard-key-height | `48px` | - |
| --van-number-keyboard-key-font-size | `28px` | - |
| --van-number-keyboard-key-active-color | `@gray-3` | - |
| --van-number-keyboard-delete-font-size | `@font-size-lg` | - |
| --van-number-keyboard-title-color | `@gray-7` | - |
| --van-number-keyboard-title-height | `34px` | - |
| --van-number-keyboard-title-font-size | `@font-size-lg` | - |
| --van-number-keyboard-close-padding | `0 @padding-md` | - |
| --van-number-keyboard-close-color | `@text-link-color` | - |
| --van-number-keyboard-close-font-size | `@font-size-md` | - |
| --van-number-keyboard-button-text-color | `@white` | - |
| --van-number-keyboard-button-background-color | `@blue` | - |
| --van-number-keyboard-z-index | `100` | - |
## 常见问题

12
src/overlay/README.md
View File

@ -86,11 +86,11 @@ export default {
| ------- | ------------ |
| default | Default slot |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| Name | Default Value | Description |
| ------------------------- | -------------------- | ----------- |
| @overlay-z-index | `1` | - |
| @overlay-background-color | `rgba(0, 0, 0, 0.7)` | - |
| Name | Default Value | Description |
| ------------------------------ | -------------------- | ----------- |
| --van-overlay-z-index | `1` | - |
| --van-overlay-background-color | `rgba(0, 0, 0, 0.7)` | - |

10
src/overlay/README.zh-CN.md
View File

@ -90,9 +90,9 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------- | -------------------- | ---- |
| @overlay-z-index | `1` | - |
| @overlay-background-color | `rgba(0, 0, 0, 0.7)` | - |
| 名称 | 默认值 | 描述 |
| ------------------------------ | -------------------- | ---- |
| --van-overlay-z-index | `1` | - |
| --van-overlay-background-color | `rgba(0, 0, 0, 0.7)` | - |

22
src/pagination/README.md
View File

@ -96,18 +96,18 @@ export default {
| prev-text | Custom prev text | `-` |
| next-text | Custom next text | `-` |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| --van-pagination-height | `40px` | - |
| --van-pagination-font-size | `@font-size-md` | - |
| --van-pagination-item-width | `36px` | - |
| --van-pagination-item-default-color | `@blue` | - |
| --van-pagination-item-disabled-color | `@gray-7` | - |
| --van-pagination-item-disabled-background-color | `@background-color` | - |
| --van-pagination-background-color | `@white` | - |
| --van-pagination-desc-color | `@gray-7` | - |
| --van-pagination-disabled-opacity | `@disabled-opacity` | - |

24
src/pagination/README.zh-CN.md
View File

@ -106,16 +106,16 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------------------------ | ------------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| ----------------------------------------------- | ------------------- | ---- |
| --van-pagination-height | `40px` | - |
| --van-pagination-font-size | `@font-size-md` | - |
| --van-pagination-item-width | `36px` | - |
| --van-pagination-item-default-color | `@blue` | - |
| --van-pagination-item-disabled-color | `@gray-7` | - |
| --van-pagination-item-disabled-background-color | `@background-color` | - |
| --van-pagination-background-color | `@white` | - |
| --van-pagination-desc-color | `@gray-7` | - |
| --van-pagination-disabled-opacity | `@disabled-opacity` | - |

36
src/password-input/README.md
View File

@ -148,23 +148,23 @@ export default {
| ----- | ----------------------------- | --------- |
| focus | Emitted when input is focused | - |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| @password-input-cursor-color | `@text-color` | - |
| @password-input-cursor-width | `1px` | - |
| @password-input-cursor-height | `40%` | - |
| @password-input-cursor-animation-duration | `1s` | - |
| Name | Default Value | Description |
| --- | --- | --- |
| --van-password-input-height | `50px` | - |
| --van-password-input-margin | `0 @padding-md` | - |
| --van-password-input-font-size | `20px` | - |
| --van-password-input-border-radius | `6px` | - |
| --van-password-input-background-color | `@white` | - |
| --van-password-input-info-color | `@gray-6` | - |
| --van-password-input-info-font-size | `@font-size-md` | - |
| --van-password-input-error-info-color | `@red` | - |
| --van-password-input-dot-size | `10px` | - |
| --van-password-input-dot-color | `@black` | - |
| --van-password-input-cursor-color | `@text-color` | - |
| --van-password-input-cursor-width | `1px` | - |
| --van-password-input-cursor-height | `40%` | - |
| --van-password-input-cursor-animation-duration | `1s` | - |

34
src/password-input/README.zh-CN.md
View File

@ -160,21 +160,21 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ----------------------------------------- | --------------- | ---- |
| @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` | - |
| @password-input-cursor-color | `@text-color` | - |
| @password-input-cursor-width | `1px` | - |
| @password-input-cursor-height | `40%` | - |
| @password-input-cursor-animation-duration | `1s` | - |
| 名称 | 默认值 | 描述 |
| ---------------------------------------------- | --------------- | ---- |
| --van-password-input-height | `50px` | - |
| --van-password-input-margin | `0 @padding-md` | - |
| --van-password-input-font-size | `20px` | - |
| --van-password-input-border-radius | `6px` | - |
| --van-password-input-background-color | `@white` | - |
| --van-password-input-info-color | `@gray-6` | - |
| --van-password-input-info-font-size | `@font-size-md` | - |
| --van-password-input-error-info-color | `@red` | - |
| --van-password-input-dot-size | `10px` | - |
| --van-password-input-dot-color | `@black` | - |
| --van-password-input-cursor-color | `@text-color` | - |
| --van-password-input-cursor-width | `1px` | - |
| --van-password-input-cursor-height | `40%` | - |
| --van-password-input-cursor-animation-duration | `1s` | - |

34
src/picker/README.md
View File

@ -383,22 +383,22 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Picker
| setColumnValues | Set columns data of the column | columnIndex, values | - |
| confirm | Stop scrolling and emit confirm event | - | - |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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)` | - |
| Name | Default Value | Description |
| --- | --- | --- |
| --van-picker-background-color | `@white` | - |
| --van-picker-toolbar-height | `44px` | - |
| --van-picker-title-font-size | `@font-size-lg` | - |
| --van-picker-title-line-height | `@line-height-md` | - |
| --van-picker-action-padding | `0 @padding-md` | - |
| --van-picker-action-font-size | `@font-size-md` | - |
| --van-picker-confirm-action-color | `@text-link-color` | - |
| --van-picker-cancel-action-color | `@gray-6` | - |
| --van-picker-option-font-size | `@font-size-lg` | - |
| --van-picker-option-text-color | `@black` | - |
| --van-picker-option-disabled-opacity | `0.3` | - |
| --van-picker-loading-icon-color | `@blue` | - |
| --van-picker-loading-mask-color | `rgba(255, 255, 255, 0.9)` | - |

32
src/picker/README.zh-CN.md
View File

@ -410,23 +410,23 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------------- | -------------------------- | ---- |
| @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)` | - |
| 名称 | 默认值 | 描述 |
| ------------------------------------ | -------------------------- | ---- |
| --van-picker-background-color | `@white` | - |
| --van-picker-toolbar-height | `44px` | - |
| --van-picker-title-font-size | `@font-size-lg` | - |
| --van-picker-title-line-height | `@line-height-md` | - |
| --van-picker-action-padding | `0 @padding-md` | - |
| --van-picker-action-font-size | `@font-size-md` | - |
| --van-picker-confirm-action-color | `@text-link-color` | - |
| --van-picker-cancel-action-color | `@gray-6` | - |
| --van-picker-option-font-size | `@font-size-lg` | - |
| --van-picker-option-text-color | `@black` | - |
| --van-picker-option-disabled-opacity | `0.3` | - |
| --van-picker-loading-icon-color | `@blue` | - |
| --van-picker-loading-mask-color | `rgba(255, 255, 255, 0.9)` | - |
## 常见问题

30
src/popover/README.md
View File

@ -254,22 +254,22 @@ export default {
| default | Custom content |
| reference | Reference Element |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| --van-popover-arrow-size | `6px` | - |
| --van-popover-border-radius | `@border-radius-lg` | - |
| --van-popover-action-width | `128px` | - |
| --van-popover-action-height | `44px` | - |
| --van-popover-action-font-size | `@font-size-md` | - |
| --van-popover-action-line-height | `@line-height-md` | - |
| --van-popover-action-icon-size | `20px` | - |
| --van-popover-light-text-color | `@text-color` | - |
| --van-popover-light-background-color | `@white` | - |
| --van-popover-light-action-disabled-text-color | `@gray-5` | - |
| --van-popover-dark-text-color | `@white` | - |
| --van-popover-dark-background-color | `#4a4a4a` | - |
| --van-popover-dark-action-disabled-text-color | `@gray-6` | - |

32
src/popover/README.zh-CN.md
View File

@ -268,23 +268,23 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ----------------------------------------- | ------------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| ---------------------------------------------- | ------------------- | ---- |
| --van-popover-arrow-size | `6px` | - |
| --van-popover-border-radius | `@border-radius-lg` | - |
| --van-popover-action-width | `128px` | - |
| --van-popover-action-height | `44px` | - |
| --van-popover-action-font-size | `@font-size-md` | - |
| --van-popover-action-line-height | `@line-height-md` | - |
| --van-popover-action-icon-size | `20px` | - |
| --van-popover-light-text-color | `@text-color` | - |
| --van-popover-light-background-color | `@white` | - |
| --van-popover-light-action-disabled-text-color | `@gray-5` | - |
| --van-popover-dark-text-color | `@white` | - |
| --van-popover-dark-background-color | `#4a4a4a` | - |
| --van-popover-dark-action-disabled-text-color | `@gray-6` | - |
## 常见问题

20
src/popup/README.md
View File

@ -161,17 +161,17 @@ export default {
| default | Content of Popup |
| overlay-content `v3.0.18` | Content of Popup overlay |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| --van-popup-background-color | `@white` | - |
| --van-popup-transition | `transform @animation-duration-base` | - |
| --van-popup-round-border-radius | `16px` | - |
| --van-popup-close-icon-size | `22px` | - |
| --van-popup-close-icon-color | `@gray-5` | - |
| --van-popup-close-icon-active-color | `@gray-6` | - |
| --van-popup-close-icon-margin | `16px` | - |
| --van-popup-close-icon-z-index | `1` | - |

22
src/popup/README.zh-CN.md
View File

@ -167,15 +167,15 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------------ | ------------------------------------ | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-popup-background-color | `@white` | - |
| --van-popup-transition | `transform @animation-duration-base` | - |
| --van-popup-round-border-radius | `16px` | - |
| --van-popup-close-icon-size | `22px` | - |
| --van-popup-close-icon-color | `@gray-5` | - |
| --van-popup-close-icon-active-color | `@gray-6` | - |
| --van-popup-close-icon-margin | `16px` | - |
| --van-popup-close-icon-z-index | `1` | - |

24
src/progress/README.md
View File

@ -77,17 +77,17 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Progress instance and call insta
| --- | --- | --- | --- |
| resize | Resize Progress when container element resized or visibility changed | - | - |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| Name | Default Value | Description |
| ------------------------------------- | --------------- | ----------- |
| --van-progress-height | `4px` | - |
| --van-progress-color | `@blue` | - |
| --van-progress-background-color | `@gray-3` | - |
| --van-progress-pivot-padding | `0 5px` | - |
| --van-progress-pivot-text-color | `@white` | - |
| --van-progress-pivot-font-size | `@font-size-xs` | - |
| --van-progress-pivot-line-height | `1.6` | - |
| --van-progress-pivot-background-color | `@blue` | - |

22
src/progress/README.zh-CN.md
View File

@ -83,18 +83,18 @@ app.use(Progress);
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| -------------------------------- | --------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| ------------------------------------- | --------------- | ---- |
| --van-progress-height | `4px` | - |
| --van-progress-color | `@blue` | - |
| --van-progress-background-color | `@gray-3` | - |
| --van-progress-pivot-padding | `0 5px` | - |
| --van-progress-pivot-text-color | `@white` | - |
| --van-progress-pivot-font-size | `@font-size-xs` | - |
| --van-progress-pivot-line-height | `1.6` | - |
| --van-progress-pivot-background-color | `@blue` | - |
## 常见问题

16
src/pull-refresh/README.md
View File

@ -136,13 +136,13 @@ Use slots to custom tips.
| loading | Content of head when at loading | { distance } |
| success | Content of head when succeed | - |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| Name | Default Value | Description |
| ------------------------------- | --------------- | ----------- |
| @pull-refresh-head-height | `50px` | - |
| @pull-refresh-head-font-size | `@font-size-md` | - |
| @pull-refresh-head-text-color | `@gray-6` | - |
| @pull-refresh-loading-icon-size | `16px` | - |
| Name | Default Value | Description |
| ------------------------------------ | --------------- | ----------- |
| --van-pull-refresh-head-height | `50px` | - |
| --van-pull-refresh-head-font-size | `@font-size-md` | - |
| --van-pull-refresh-head-text-color | `@gray-6` | - |
| --van-pull-refresh-loading-icon-size | `16px` | - |

14
src/pull-refresh/README.zh-CN.md
View File

@ -141,14 +141,14 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------------- | --------------- | ---- |
| @pull-refresh-head-height | `50px` | - |
| @pull-refresh-head-font-size | `@font-size-md` | - |
| @pull-refresh-head-text-color | `@gray-6` | - |
| @pull-refresh-loading-icon-size | `16px` | - |
| 名称 | 默认值 | 描述 |
| ------------------------------------ | --------------- | ---- |
| --van-pull-refresh-head-height | `50px` | - |
| --van-pull-refresh-head-font-size | `@font-size-md` | - |
| --van-pull-refresh-head-text-color | `@gray-6` | - |
| --van-pull-refresh-loading-icon-size | `16px` | - |
## 常见问题

30
src/radio/README.md
View File

@ -161,7 +161,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` |
@ -173,7 +173,7 @@ export default {
### RadioGroup Props
| Attribute | Description | Type | Default |
| --- | --- | --- | --- |
| --- | --- | --- | --- | --- |
| v-model | Name of checked radio | _any_ | - |
| disabled | Disable all radios | _boolean_ | `false` |
| direction | Direction, can be set to `horizontal` | _string_ | `vertical` |
@ -199,18 +199,18 @@ export default {
| default | Custom label | - |
| icon | Custom icon | _{ checked: boolean, disabled: boolean }_ |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| Name | Default Value | Description |
| --- | --- | --- |
| --van-radio-size | `20px` | - |
| --van-radio-border-color | `@gray-5` | - |
| --van-radio-transition-duration | `@animation-duration-fast` | - |
| --van-radio-label-margin | `@padding-xs` | - |
| --van-radio-label-color | `@text-color` | - |
| --van-radio-checked-icon-color | `@blue` | - |
| --van-radio-disabled-icon-color | `@gray-5` | - |
| --van-radio-disabled-label-color | `@gray-5` | - |
| --van-radio-disabled-background-color | `@border-color` | - |

24
src/radio/README.zh-CN.md
View File

@ -215,16 +215,16 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| -------------------------------- | -------------------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| ------------------------------------- | -------------------------- | ---- |
| --van-radio-size | `20px` | - |
| --van-radio-border-color | `@gray-5` | - |
| --van-radio-transition-duration | `@animation-duration-fast` | - |
| --van-radio-label-margin | `@padding-xs` | - |
| --van-radio-label-color | `@text-color` | - |
| --van-radio-checked-icon-color | `@blue` | - |
| --van-radio-disabled-icon-color | `@gray-5` | - |
| --van-radio-disabled-label-color | `@gray-5` | - |
| --van-radio-disabled-background-color | `@border-color` | - |

18
src/rate/README.md
View File

@ -154,14 +154,14 @@ export default {
| ------ | ------------------------- | ------------ |
| change | Emitted when rate changed | current rate |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| Name | Default Value | Description |
| ------------------------------ | --------------- | ----------- |
| --van-rate-icon-size | `20px` | - |
| --van-rate-icon-gutter | `@padding-base` | - |
| --van-rate-icon-void-color | `@gray-5` | - |
| --van-rate-icon-full-color | `@red` | - |
| --van-rate-icon-disabled-color | `@gray-5` | - |

16
src/rate/README.zh-CN.md
View File

@ -174,12 +174,12 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ------------------------- | --------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| ------------------------------ | --------------- | ---- |
| --van-rate-icon-size | `20px` | - |
| --van-rate-icon-gutter | `@padding-base` | - |
| --van-rate-icon-void-color | `@gray-5` | - |
| --van-rate-icon-full-color | `@red` | - |
| --van-rate-icon-disabled-color | `@gray-5` | - |

30
src/search/README.md
View File

@ -169,20 +169,20 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Search
| left-icon | Custom left icon |
| right-icon | Custom right icon |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| Name | Default Value | Description |
| ------------------------------------- | ------------------ | ----------- |
| --van-search-padding | `10px @padding-sm` | - |
| --van-search-background-color | `@white` | - |
| --van-search-content-background-color | `@gray-1` | - |
| --van-search-input-height | `34px` | - |
| --van-search-label-padding | `0 5px` | - |
| --van-search-label-color | `@text-color` | - |
| --van-search-label-font-size | `@font-size-md` | - |
| --van-search-left-icon-color | `@gray-6` | - |
| --van-search-action-padding | `0 @padding-xs` | - |
| --van-search-action-text-color | `@text-color` | - |
| --van-search-action-font-size | `@font-size-md` | - |

28
src/search/README.zh-CN.md
View File

@ -183,21 +183,21 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| -------------------------------- | ------------------ | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| ------------------------------------- | ------------------ | ---- |
| --van-search-padding | `10px @padding-sm` | - |
| --van-search-background-color | `@white` | - |
| --van-search-content-background-color | `@gray-1` | - |
| --van-search-input-height | `34px` | - |
| --van-search-label-padding | `0 5px` | - |
| --van-search-label-color | `@text-color` | - |
| --van-search-label-font-size | `@font-size-md` | - |
| --van-search-left-icon-color | `@gray-6` | - |
| --van-search-action-padding | `0 @padding-xs` | - |
| --van-search-action-text-color | `@text-color` | - |
| --van-search-action-font-size | `@font-size-md` | - |
## 常见问题

34
src/share-sheet/README.md
View File

@ -213,24 +213,24 @@ export default {
| description | Custom description |
| cancel `v3.0.10` | Custom the content of cancel button |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| --van-share-sheet-header-padding | `@padding-sm @padding-md @padding-base` | - |
| --van-share-sheet-title-color | `@text-color` | - |
| --van-share-sheet-title-font-size | `@font-size-md` | - |
| --van-share-sheet-title-line-height | `@line-height-md` | - |
| --van-share-sheet-description-color | `@gray-6` | - |
| --van-share-sheet-description-font-size | `@font-size-sm` | - |
| --van-share-sheet-description-line-height | `16px` | - |
| --van-share-sheet-icon-size | `48px` | - |
| --van-share-sheet-option-name-color | `@gray-7` | - |
| --van-share-sheet-option-name-font-size | `@font-size-sm` | - |
| --van-share-sheet-option-description-color | `@gray-5` | - |
| --van-share-sheet-option-description-font-size | `@font-size-sm` | - |
| --van-share-sheet-cancel-button-font-size | `@font-size-lg` | - |
| --van-share-sheet-cancel-button-height | `48px` | - |
| --van-share-sheet-cancel-button-background | `@white` | - |

32
src/share-sheet/README.zh-CN.md
View File

@ -229,25 +229,25 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| @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` | - |
| --van-share-sheet-header-padding | `@padding-sm @padding-md @padding-base` | - |
| --van-share-sheet-title-color | `@text-color` | - |
| --van-share-sheet-title-font-size | `@font-size-md` | - |
| --van-share-sheet-title-line-height | `@line-height-md` | - |
| --van-share-sheet-description-color | `@gray-6` | - |
| --van-share-sheet-description-font-size | `@font-size-sm` | - |
| --van-share-sheet-description-line-height | `16px` | - |
| --van-share-sheet-icon-size | `48px` | - |
| --van-share-sheet-option-name-color | `@gray-7` | - |
| --van-share-sheet-option-name-font-size | `@font-size-sm` | - |
| --van-share-sheet-option-description-color | `@gray-5` | - |
| --van-share-sheet-option-description-font-size | `@font-size-sm` | - |
| --van-share-sheet-cancel-button-font-size | `@font-size-lg` | - |
| --van-share-sheet-cancel-button-height | `48px` | - |
| --van-share-sheet-cancel-button-background | `@white` | - |
## 常见问题

36
src/sidebar/README.md
View File

@ -124,23 +124,23 @@ export default {
| ----- | ----------------- |
| title | Custom item title |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| Name | Default Value | Description |
| --------------------------------------- | ------------------- | ----------- |
| --van-sidebar-width | `80px` | - |
| --van-sidebar-font-size | `@font-size-md` | - |
| --van-sidebar-line-height | `@line-height-md` | - |
| --van-sidebar-text-color | `@text-color` | - |
| --van-sidebar-disabled-text-color | `@gray-5` | - |
| --van-sidebar-padding | `20px @padding-sm` | - |
| --van-sidebar-active-color | `@active-color` | - |
| --van-sidebar-background-color | `@background-color` | - |
| --van-sidebar-selected-font-weight | `@font-weight-bold` | - |
| --van-sidebar-selected-text-color | `@text-color` | - |
| --van-sidebar-selected-border-width | `4px` | - |
| --van-sidebar-selected-border-height | `16px` | - |
| --van-sidebar-selected-border-color | `@red` | - |
| --van-sidebar-selected-background-color | `@white` | - |

34
src/sidebar/README.zh-CN.md
View File

@ -134,21 +134,21 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ---------------------------------- | ------------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| --------------------------------------- | ------------------- | ---- |
| --van-sidebar-width | `80px` | - |
| --van-sidebar-font-size | `@font-size-md` | - |
| --van-sidebar-line-height | `@line-height-md` | - |
| --van-sidebar-text-color | `@text-color` | - |
| --van-sidebar-disabled-text-color | `@gray-5` | - |
| --van-sidebar-padding | `20px @padding-sm` | - |
| --van-sidebar-active-color | `@active-color` | - |
| --van-sidebar-background-color | `@background-color` | - |
| --van-sidebar-selected-font-weight | `@font-weight-bold` | - |
| --van-sidebar-selected-text-color | `@text-color` | - |
| --van-sidebar-selected-border-width | `4px` | - |
| --van-sidebar-selected-border-height | `16px` | - |
| --van-sidebar-selected-border-color | `@red` | - |
| --van-sidebar-selected-background-color | `@white` | - |

22
src/skeleton/README.md
View File

@ -73,16 +73,16 @@ export default {
| avatar-size | Size of avatar placeholder | _number \| string_ | `32px` |
| avatar-shape | Shape of avatar placeholder，can be set to `square` | _string_ | `round` |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| Name | Default Value | Description |
| -------------------------------------- | --------------- | ----------- |
| --van-skeleton-row-height | `16px` | - |
| --van-skeleton-row-background-color | `@active-color` | - |
| --van-skeleton-row-margin-top | `@padding-sm` | - |
| --van-skeleton-title-width | `40%` | - |
| --van-skeleton-avatar-size | `32px` | - |
| --van-skeleton-avatar-background-color | `@active-color` | - |
| --van-skeleton-animation-duration | `1.2s` | - |

20
src/skeleton/README.zh-CN.md
View File

@ -81,14 +81,14 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| --------------------------------- | --------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| -------------------------------------- | --------------- | ---- |
| --van-skeleton-row-height | `16px` | - |
| --van-skeleton-row-background-color | `@active-color` | - |
| --van-skeleton-row-margin-top | `@padding-sm` | - |
| --van-skeleton-title-width | `40%` | - |
| --van-skeleton-avatar-size | `32px` | - |
| --van-skeleton-avatar-background-color | `@active-color` | - |
| --van-skeleton-animation-duration | `1.2s` | - |

22
src/slider/README.md
View File

@ -178,18 +178,18 @@ export default {
| ------ | ------------- |
| button | Custom button |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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)` | - |
| --van-slider-active-background-color | `@blue` | - |
| --van-slider-inactive-background-color | `@gray-3` | - |
| --van-slider-disabled-opacity | `@disabled-opacity` | - |
| --van-slider-bar-height | `2px` | - |
| --van-slider-button-width | `24px` | - |
| --van-slider-button-height | `24px` | - |
| --van-slider-button-border-radius | `50%` | - |
| --van-slider-button-background-color | `@white` | - |
| --van-slider-button-box-shadow | `0 1px 2px rgba(0, 0, 0, 0.5)` | - |

24
src/slider/README.zh-CN.md
View File

@ -182,16 +182,16 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| --------------------------------- | ------------------------------ | ---- |
| @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)` | - |
| 名称 | 默认值 | 描述 |
| --- | --- | --- |
| --van-slider-active-background-color | `@blue` | - |
| --van-slider-inactive-background-color | `@gray-3` | - |
| --van-slider-disabled-opacity | `@disabled-opacity` | - |
| --van-slider-bar-height | `2px` | - |
| --van-slider-button-width | `24px` | - |
| --van-slider-button-height | `24px` | - |
| --van-slider-button-border-radius | `50%` | - |
| --van-slider-button-background-color | `@white` | - |
| --van-slider-button-box-shadow | `0 1px 2px rgba(0, 0, 0, 0.5)` | - |

36
src/stepper/README.md
View File

@ -157,23 +157,23 @@ export default {
| focus | Emitted when the input is focused | _event: Event_ |
| blur | Emitted when the input is blured | _event: Event_ |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| Name | Default Value | Description |
| --- | --- | --- |
| --van-stepper-active-color | `#e8e8e8` | - |
| --van-stepper-background-color | `@active-color` | - |
| --van-stepper-button-icon-color | `@text-color` | - |
| --van-stepper-button-disabled-color | `@background-color` | - |
| --van-stepper-button-disabled-icon-color | `@gray-5` | - |
| --van-stepper-button-round-theme-color | `@red` | - |
| --van-stepper-input-width | `32px` | - |
| --van-stepper-input-height | `28px` | - |
| --van-stepper-input-font-size | `@font-size-md` | - |
| --van-stepper-input-line-height | `normal` | - |
| --van-stepper-input-text-color | `@text-color` | - |
| --van-stepper-input-disabled-text-color | `@gray-5` | - |
| --van-stepper-input-disabled-background-color | `@active-color` | - |
| --van-stepper-border-radius | `@border-radius-md` | - |

34
src/stepper/README.zh-CN.md
View File

@ -179,24 +179,24 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| ---------------------------------------- | ------------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| --------------------------------------------- | ------------------- | ---- |
| --van-stepper-active-color | `#e8e8e8` | - |
| --van-stepper-background-color | `@active-color` | - |
| --van-stepper-button-icon-color | `@text-color` | - |
| --van-stepper-button-disabled-color | `@background-color` | - |
| --van-stepper-button-disabled-icon-color | `@gray-5` | - |
| --van-stepper-button-round-theme-color | `@red` | - |
| --van-stepper-input-width | `32px` | - |
| --van-stepper-input-height | `28px` | - |
| --van-stepper-input-font-size | `@font-size-md` | - |
| --van-stepper-input-line-height | `normal` | - |
| --van-stepper-input-text-color | `@text-color` | - |
| --van-stepper-input-disabled-text-color | `@gray-5` | - |
| --van-stepper-input-disabled-background-color | `@active-color` | - |
| --van-stepper-border-radius | `@border-radius-md` | - |
## 常见问题

36
src/steps/README.md
View File

@ -89,10 +89,10 @@ export default {
### Step Slots
| Name | Description |
| -------------------- | -------------------- |
| -------------------- | -------------------- | -------- | --- |
| active-icon | Custom active icon |
| inactive-icon | Custom inactive icon |
| finish-icon `v3.0.7` | Custom finish icon | _string_ | - |
| finish-icon `v3.0.7` | Custom finish icon | _string_ | - |
### Steps Events
@ -100,21 +100,21 @@ export default {
| --- | --- | --- |
| click-step | Emitted when a step's title or icon is clicked | _index: number_ |
### Less Variables
### CSS Variables
How to use: [Custom Theme](#/en-US/theme).
The component provides the following CSS variables, which can be used to customize styles. Please refer to [ConfigProvider component](#/en-US/config-provider).
| 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` | - |
| Name | Default Value | Description |
| ------------------------------------- | --------------- | ----------- |
| --van-step-text-color | `@gray-6` | - |
| --van-step-active-color | `@green` | - |
| --van-step-process-text-color | `@text-color` | - |
| --van-step-font-size | `@font-size-md` | - |
| --van-step-line-color | `@border-color` | - |
| --van-step-finish-line-color | `@green` | - |
| --van-step-finish-text-color | `@text-color` | - |
| --van-step-icon-size | `12px` | - |
| --van-step-circle-size | `5px` | - |
| --van-step-circle-color | `@gray-6` | - |
| --van-step-horizontal-title-font-size | `@font-size-sm` | - |
| --van-steps-background-color | `@white` | - |

32
src/steps/README.zh-CN.md
View File

@ -95,7 +95,7 @@ export default {
### Step Slots
| 名称 | 说明 |
| --- | --- |
| --- | --- | --- | --- |
| active-icon | 自定义激活状态图标 |
| inactive-icon | 自定义未激活状态图标 |
| finish-icon `v3.0.7` | 自定义已完成步骤对应的底部图标，优先级高于 `inactive-icon` | _string_ | - |
@ -108,19 +108,19 @@ export default {
### 样式变量
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。
| 名称 | 默认值 | 描述 |
| -------------------------------- | --------------- | ---- |
| @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` | - |
| 名称 | 默认值 | 描述 |
| ------------------------------------- | --------------- | ---- |
| --van-step-text-color | `@gray-6` | - |
| --van-step-active-color | `@green` | - |
| --van-step-process-text-color | `@text-color` | - |
| --van-step-font-size | `@font-size-md` | - |
| --van-step-line-color | `@border-color` | - |
| --van-step-finish-line-color | `@green` | - |
| --van-step-finish-text-color | `@text-color` | - |
| --van-step-icon-size | `12px` | - |
| --van-step-circle-size | `5px` | - |
| --van-step-circle-color | `@gray-6` | - |
| --van-step-horizontal-title-font-size | `@font-size-sm` | - |
| --van-steps-background-color | `@white` | - |

Some files were not shown because too many files have changed in this diff Show More