diff --git a/src/action-bar/README.md b/src/action-bar/README.md index 341abf9b3..9c3bfae0a 100644 --- a/src/action-bar/README.md +++ b/src/action-bar/README.md @@ -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` | - | diff --git a/src/action-bar/README.zh-CN.md b/src/action-bar/README.zh-CN.md index ceeb9e60f..f20ac34ff 100644 --- a/src/action-bar/README.zh-CN.md +++ b/src/action-bar/README.zh-CN.md @@ -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` | - | diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md index a88b64f46..cbf69327f 100644 --- a/src/action-sheet/README.md +++ b/src/action-sheet/README.md @@ -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` | - | diff --git a/src/action-sheet/README.zh-CN.md b/src/action-sheet/README.zh-CN.md index 266e27ee1..2f0304e94 100644 --- a/src/action-sheet/README.zh-CN.md +++ b/src/action-sheet/README.zh-CN.md @@ -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` | - | diff --git a/src/address-edit/README.md b/src/address-edit/README.md index 5d0c96637..64e8d25af 100644 --- a/src/address-edit/README.md +++ b/src/address-edit/README.md @@ -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` | - | diff --git a/src/address-edit/README.zh-CN.md b/src/address-edit/README.zh-CN.md index 1429d4ae1..e7213234c 100644 --- a/src/address-edit/README.zh-CN.md +++ b/src/address-edit/README.zh-CN.md @@ -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` | - | diff --git a/src/address-list/README.md b/src/address-list/README.md index 2ecae2e2c..f988d1297 100644 --- a/src/address-list/README.md +++ b/src/address-list/README.md @@ -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` | - | diff --git a/src/address-list/README.zh-CN.md b/src/address-list/README.zh-CN.md index 1004b38e7..e2a84476b 100644 --- a/src/address-list/README.zh-CN.md +++ b/src/address-list/README.zh-CN.md @@ -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` | - | diff --git a/src/badge/README.md b/src/badge/README.md index 9b34ece3c..ccc0cc68a 100644 --- a/src/badge/README.md +++ b/src/badge/README.md @@ -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` | - | diff --git a/src/badge/README.zh-CN.md b/src/badge/README.zh-CN.md index a4cc24a18..397453a2b 100644 --- a/src/badge/README.zh-CN.md +++ b/src/badge/README.zh-CN.md @@ -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` | - | diff --git a/src/button/README.md b/src/button/README.md index 124654367..4ff31e7f4 100644 --- a/src/button/README.md +++ b/src/button/README.md @@ -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` | - | diff --git a/src/button/README.zh-CN.md b/src/button/README.zh-CN.md index 3835fa198..32a28f1f5 100644 --- a/src/button/README.zh-CN.md +++ b/src/button/README.zh-CN.md @@ -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` | - | diff --git a/src/calendar/README.md b/src/calendar/README.md index c3419d797..a866f96d7 100644 --- a/src/calendar/README.md +++ b/src/calendar/README.md @@ -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` | - | diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md index 15bc8e163..33ae7ec18 100644 --- a/src/calendar/README.zh-CN.md +++ b/src/calendar/README.zh-CN.md @@ -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` | - | ## 常见问题 diff --git a/src/card/README.md b/src/card/README.md index 1c0ee6e06..c36143ed9 100644 --- a/src/card/README.md +++ b/src/card/README.md @@ -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` | - | diff --git a/src/card/README.zh-CN.md b/src/card/README.zh-CN.md index af7dd96cb..ad5f8e699 100644 --- a/src/card/README.zh-CN.md +++ b/src/card/README.zh-CN.md @@ -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` | - | diff --git a/src/cascader/README.md b/src/cascader/README.md index 4cb6a8baf..e088e3197 100644 --- a/src/cascader/README.md +++ b/src/cascader/README.md @@ -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` | - | diff --git a/src/cascader/README.zh-CN.md b/src/cascader/README.zh-CN.md index 76d0a6a10..d86c72af8 100644 --- a/src/cascader/README.zh-CN.md +++ b/src/cascader/README.zh-CN.md @@ -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` | - | diff --git a/src/cell/README.md b/src/cell/README.md index fb63351fb..3cab1ffc6 100644 --- a/src/cell/README.md +++ b/src/cell/README.md @@ -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` | - | diff --git a/src/cell/README.zh-CN.md b/src/cell/README.zh-CN.md index 364d0ff27..9e5f451a8 100644 --- a/src/cell/README.zh-CN.md +++ b/src/cell/README.zh-CN.md @@ -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` | - | diff --git a/src/checkbox/README.md b/src/checkbox/README.md index 50e418969..b7befc8d4 100644 --- a/src/checkbox/README.md +++ b/src/checkbox/README.md @@ -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` | - | diff --git a/src/checkbox/README.zh-CN.md b/src/checkbox/README.zh-CN.md index 905f92649..6227fbb5d 100644 --- a/src/checkbox/README.zh-CN.md +++ b/src/checkbox/README.zh-CN.md @@ -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` | - | diff --git a/src/circle/README.md b/src/circle/README.md index 43326ec48..7dfe8e0c8 100644 --- a/src/circle/README.md +++ b/src/circle/README.md @@ -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` | - | diff --git a/src/circle/README.zh-CN.md b/src/circle/README.zh-CN.md index 97f3d2350..f76f2f0c3 100644 --- a/src/circle/README.zh-CN.md +++ b/src/circle/README.zh-CN.md @@ -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` | - | diff --git a/src/collapse/README.md b/src/collapse/README.md index 50bc155c2..629048178 100644 --- a/src/collapse/README.md +++ b/src/collapse/README.md @@ -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` | - | diff --git a/src/collapse/README.zh-CN.md b/src/collapse/README.zh-CN.md index 10c1936e0..7cae1c6d1 100644 --- a/src/collapse/README.zh-CN.md +++ b/src/collapse/README.zh-CN.md @@ -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` | - | diff --git a/src/contact-card/README.md b/src/contact-card/README.md index 1432137c6..3a1916482 100644 --- a/src/contact-card/README.md +++ b/src/contact-card/README.md @@ -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` | - | diff --git a/src/contact-card/README.zh-CN.md b/src/contact-card/README.zh-CN.md index 544786aed..308a81798 100644 --- a/src/contact-card/README.zh-CN.md +++ b/src/contact-card/README.zh-CN.md @@ -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` | - | diff --git a/src/contact-edit/README.md b/src/contact-edit/README.md index 66e3b058d..a32fd7e2f 100644 --- a/src/contact-edit/README.md +++ b/src/contact-edit/README.md @@ -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` | - | diff --git a/src/contact-edit/README.zh-CN.md b/src/contact-edit/README.zh-CN.md index 7f4169045..70fbea45f 100644 --- a/src/contact-edit/README.zh-CN.md +++ b/src/contact-edit/README.zh-CN.md @@ -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` | - | diff --git a/src/contact-list/README.md b/src/contact-list/README.md index a7ed5048a..0a23ae87b 100644 --- a/src/contact-list/README.md +++ b/src/contact-list/README.md @@ -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` | - | diff --git a/src/contact-list/README.zh-CN.md b/src/contact-list/README.zh-CN.md index 4b3949875..bcd347928 100644 --- a/src/contact-list/README.zh-CN.md +++ b/src/contact-list/README.zh-CN.md @@ -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` | - | diff --git a/src/count-down/README.md b/src/count-down/README.md index 9dd2000dd..9b599a726 100644 --- a/src/count-down/README.md +++ b/src/count-down/README.md @@ -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` | - | diff --git a/src/count-down/README.zh-CN.md b/src/count-down/README.zh-CN.md index 79879c8b8..9ae9a5ae0 100644 --- a/src/count-down/README.zh-CN.md +++ b/src/count-down/README.zh-CN.md @@ -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` | - | ## 常见问题 diff --git a/src/coupon-list/README.md b/src/coupon-list/README.md index b4fe6abeb..499b8714a 100644 --- a/src/coupon-list/README.md +++ b/src/coupon-list/README.md @@ -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` | - | diff --git a/src/coupon-list/README.zh-CN.md b/src/coupon-list/README.zh-CN.md index b6daf0847..362f5470b 100644 --- a/src/coupon-list/README.zh-CN.md +++ b/src/coupon-list/README.zh-CN.md @@ -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` | - | diff --git a/src/dialog/README.md b/src/dialog/README.md index ce2ebbc16..3112fdcf0 100644 --- a/src/dialog/README.md +++ b/src/dialog/README.md @@ -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` | - | diff --git a/src/dialog/README.zh-CN.md b/src/dialog/README.zh-CN.md index e26fa5835..b977ff06d 100644 --- a/src/dialog/README.zh-CN.md +++ b/src/dialog/README.zh-CN.md @@ -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` | - | ## 常见问题 diff --git a/src/divider/README.md b/src/divider/README.md index c44debeb5..5eeca20ba 100644 --- a/src/divider/README.md +++ b/src/divider/README.md @@ -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%` | - | diff --git a/src/divider/README.zh-CN.md b/src/divider/README.zh-CN.md index 98011878a..e6f0d4023 100644 --- a/src/divider/README.zh-CN.md +++ b/src/divider/README.zh-CN.md @@ -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%` | - | diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md index 8eebceacf..5f89ca331 100644 --- a/src/dropdown-menu/README.md +++ b/src/dropdown-menu/README.md @@ -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` | - | diff --git a/src/dropdown-menu/README.zh-CN.md b/src/dropdown-menu/README.zh-CN.md index a687ef777..8871c8665 100644 --- a/src/dropdown-menu/README.zh-CN.md +++ b/src/dropdown-menu/README.zh-CN.md @@ -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` | - | ## 常见问题 diff --git a/src/empty/README.md b/src/empty/README.md index d673c6734..4649997bb 100644 --- a/src/empty/README.md +++ b/src/empty/README.md @@ -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` | - | diff --git a/src/empty/README.zh-CN.md b/src/empty/README.zh-CN.md index 94ca6319c..2255f2432 100644 --- a/src/empty/README.zh-CN.md +++ b/src/empty/README.zh-CN.md @@ -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` | - | diff --git a/src/field/README.md b/src/field/README.md index f9e28c044..0b432a348 100644 --- a/src/field/README.md +++ b/src/field/README.md @@ -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` | - | diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md index fe29174fd..2668a35bd 100644 --- a/src/field/README.zh-CN.md +++ b/src/field/README.zh-CN.md @@ -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` | - | ## 常见问题 diff --git a/src/grid/README.md b/src/grid/README.md index 5d37a16b5..cda6d33ec 100644 --- a/src/grid/README.md +++ b/src/grid/README.md @@ -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` | - | diff --git a/src/grid/README.zh-CN.md b/src/grid/README.zh-CN.md index aba70bd26..693d4fc31 100644 --- a/src/grid/README.zh-CN.md +++ b/src/grid/README.zh-CN.md @@ -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` | - | diff --git a/src/image-preview/README.md b/src/image-preview/README.md index ebc595fe5..d38d74766 100644 --- a/src/image-preview/README.md +++ b/src/image-preview/README.md @@ -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` | - | diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md index 44ded2a8c..51d340365 100644 --- a/src/image-preview/README.zh-CN.md +++ b/src/image-preview/README.zh-CN.md @@ -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` | - | ## 常见问题 diff --git a/src/image/README.md b/src/image/README.md index 961791c46..e9c0ec288 100644 --- a/src/image/README.md +++ b/src/image/README.md @@ -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` | - | diff --git a/src/image/README.zh-CN.md b/src/image/README.zh-CN.md index bda30a970..2feb11982 100644 --- a/src/image/README.zh-CN.md +++ b/src/image/README.zh-CN.md @@ -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` | - | ## 常见问题 diff --git a/src/index-bar/README.md b/src/index-bar/README.md index aec648acc..167df360a 100644 --- a/src/index-bar/README.md +++ b/src/index-bar/README.md @@ -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` | - | diff --git a/src/index-bar/README.zh-CN.md b/src/index-bar/README.zh-CN.md index 95eb1e3ae..5e359aa46 100644 --- a/src/index-bar/README.zh-CN.md +++ b/src/index-bar/README.zh-CN.md @@ -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` | - | diff --git a/src/list/README.md b/src/list/README.md index f8c9b59c6..d35c13d78 100644 --- a/src/list/README.md +++ b/src/list/README.md @@ -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` | - | diff --git a/src/list/README.zh-CN.md b/src/list/README.zh-CN.md index 3c03de5ce..5972beb22 100644 --- a/src/list/README.zh-CN.md +++ b/src/list/README.zh-CN.md @@ -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` | - | ## 常见问题 diff --git a/src/loading/README.md b/src/loading/README.md index 9f8d1c54a..455e58782 100644 --- a/src/loading/README.md +++ b/src/loading/README.md @@ -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` | - | diff --git a/src/loading/README.zh-CN.md b/src/loading/README.zh-CN.md index ddd2c200e..b5c983a3c 100644 --- a/src/loading/README.zh-CN.md +++ b/src/loading/README.zh-CN.md @@ -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` | - | diff --git a/src/nav-bar/README.md b/src/nav-bar/README.md index 9d2ffba56..a82a632df 100644 --- a/src/nav-bar/README.md +++ b/src/nav-bar/README.md @@ -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` | - | diff --git a/src/nav-bar/README.zh-CN.md b/src/nav-bar/README.zh-CN.md index ff308708b..271d1449e 100644 --- a/src/nav-bar/README.zh-CN.md +++ b/src/nav-bar/README.zh-CN.md @@ -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` | - | diff --git a/src/notice-bar/README.md b/src/notice-bar/README.md index ee3685237..7950f71a2 100644 --- a/src/notice-bar/README.md +++ b/src/notice-bar/README.md @@ -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` | - | diff --git a/src/notice-bar/README.zh-CN.md b/src/notice-bar/README.zh-CN.md index 7b90d0248..b5c1ecdc3 100644 --- a/src/notice-bar/README.zh-CN.md +++ b/src/notice-bar/README.zh-CN.md @@ -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` | - | diff --git a/src/notify/README.md b/src/notify/README.md index db3317e94..404c56470 100644 --- a/src/notify/README.md +++ b/src/notify/README.md @@ -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` | - | diff --git a/src/notify/README.zh-CN.md b/src/notify/README.zh-CN.md index 3d5368537..8efb3a40b 100644 --- a/src/notify/README.zh-CN.md +++ b/src/notify/README.zh-CN.md @@ -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` | - | diff --git a/src/number-keyboard/README.md b/src/number-keyboard/README.md index 93d9afbf5..b1296a98a 100644 --- a/src/number-keyboard/README.md +++ b/src/number-keyboard/README.md @@ -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` | - | diff --git a/src/number-keyboard/README.zh-CN.md b/src/number-keyboard/README.zh-CN.md index acef3c026..7c4e60837 100644 --- a/src/number-keyboard/README.zh-CN.md +++ b/src/number-keyboard/README.zh-CN.md @@ -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` | - | ## 常见问题 diff --git a/src/overlay/README.md b/src/overlay/README.md index 7e076cc41..8d79fd5e6 100644 --- a/src/overlay/README.md +++ b/src/overlay/README.md @@ -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)` | - | diff --git a/src/overlay/README.zh-CN.md b/src/overlay/README.zh-CN.md index 73357d1ba..97b431e1a 100644 --- a/src/overlay/README.zh-CN.md +++ b/src/overlay/README.zh-CN.md @@ -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)` | - | diff --git a/src/pagination/README.md b/src/pagination/README.md index 3d1317fbf..c4c54bcc6 100644 --- a/src/pagination/README.md +++ b/src/pagination/README.md @@ -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` | - | diff --git a/src/pagination/README.zh-CN.md b/src/pagination/README.zh-CN.md index 9c3f570cc..34aa8ab50 100644 --- a/src/pagination/README.zh-CN.md +++ b/src/pagination/README.zh-CN.md @@ -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` | - | diff --git a/src/password-input/README.md b/src/password-input/README.md index a0000dd49..3531e3c45 100644 --- a/src/password-input/README.md +++ b/src/password-input/README.md @@ -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` | - | diff --git a/src/password-input/README.zh-CN.md b/src/password-input/README.zh-CN.md index b4943347b..b7fff020c 100644 --- a/src/password-input/README.zh-CN.md +++ b/src/password-input/README.zh-CN.md @@ -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` | - | diff --git a/src/picker/README.md b/src/picker/README.md index b15c39a5e..48b69b73f 100644 --- a/src/picker/README.md +++ b/src/picker/README.md @@ -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)` | - | diff --git a/src/picker/README.zh-CN.md b/src/picker/README.zh-CN.md index 2ff187a5d..cab7001ab 100644 --- a/src/picker/README.zh-CN.md +++ b/src/picker/README.zh-CN.md @@ -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)` | - | ## 常见问题 diff --git a/src/popover/README.md b/src/popover/README.md index f0fe42c17..4911e281a 100644 --- a/src/popover/README.md +++ b/src/popover/README.md @@ -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` | - | diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md index e266e5fb6..ec3ddf807 100644 --- a/src/popover/README.zh-CN.md +++ b/src/popover/README.zh-CN.md @@ -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` | - | ## 常见问题 diff --git a/src/popup/README.md b/src/popup/README.md index f5715f9ea..dc24ac5c8 100644 --- a/src/popup/README.md +++ b/src/popup/README.md @@ -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` | - | diff --git a/src/popup/README.zh-CN.md b/src/popup/README.zh-CN.md index e5e063ec9..72356a86a 100644 --- a/src/popup/README.zh-CN.md +++ b/src/popup/README.zh-CN.md @@ -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` | - | diff --git a/src/progress/README.md b/src/progress/README.md index cbd1302e7..6a6daa090 100644 --- a/src/progress/README.md +++ b/src/progress/README.md @@ -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` | - | diff --git a/src/progress/README.zh-CN.md b/src/progress/README.zh-CN.md index 0cd02da40..c8f05881d 100644 --- a/src/progress/README.zh-CN.md +++ b/src/progress/README.zh-CN.md @@ -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` | - | ## 常见问题 diff --git a/src/pull-refresh/README.md b/src/pull-refresh/README.md index 00d6270cc..d20d607b9 100644 --- a/src/pull-refresh/README.md +++ b/src/pull-refresh/README.md @@ -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` | - | diff --git a/src/pull-refresh/README.zh-CN.md b/src/pull-refresh/README.zh-CN.md index 4ef35584a..9351f23fb 100644 --- a/src/pull-refresh/README.zh-CN.md +++ b/src/pull-refresh/README.zh-CN.md @@ -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` | - | ## 常见问题 diff --git a/src/radio/README.md b/src/radio/README.md index e9c609aa4..72bbb027a 100644 --- a/src/radio/README.md +++ b/src/radio/README.md @@ -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` | - | diff --git a/src/radio/README.zh-CN.md b/src/radio/README.zh-CN.md index 02b7adc40..1a74beb82 100644 --- a/src/radio/README.zh-CN.md +++ b/src/radio/README.zh-CN.md @@ -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` | - | diff --git a/src/rate/README.md b/src/rate/README.md index 72aab94c2..8d36e2020 100644 --- a/src/rate/README.md +++ b/src/rate/README.md @@ -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` | - | diff --git a/src/rate/README.zh-CN.md b/src/rate/README.zh-CN.md index 2b6d04c5c..f8202acf2 100644 --- a/src/rate/README.zh-CN.md +++ b/src/rate/README.zh-CN.md @@ -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` | - | diff --git a/src/search/README.md b/src/search/README.md index b4e5dc19f..1d99dd227 100644 --- a/src/search/README.md +++ b/src/search/README.md @@ -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` | - | diff --git a/src/search/README.zh-CN.md b/src/search/README.zh-CN.md index 5d228fcf9..ca965f3ff 100644 --- a/src/search/README.zh-CN.md +++ b/src/search/README.zh-CN.md @@ -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` | - | ## 常见问题 diff --git a/src/share-sheet/README.md b/src/share-sheet/README.md index 746dc0b9c..abfed6159 100644 --- a/src/share-sheet/README.md +++ b/src/share-sheet/README.md @@ -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` | - | diff --git a/src/share-sheet/README.zh-CN.md b/src/share-sheet/README.zh-CN.md index c1469b047..3f4eb6114 100644 --- a/src/share-sheet/README.zh-CN.md +++ b/src/share-sheet/README.zh-CN.md @@ -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` | - | ## 常见问题 diff --git a/src/sidebar/README.md b/src/sidebar/README.md index ad6f22611..40d3e6a09 100644 --- a/src/sidebar/README.md +++ b/src/sidebar/README.md @@ -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` | - | diff --git a/src/sidebar/README.zh-CN.md b/src/sidebar/README.zh-CN.md index aa27af07d..7f1470aa0 100644 --- a/src/sidebar/README.zh-CN.md +++ b/src/sidebar/README.zh-CN.md @@ -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` | - | diff --git a/src/skeleton/README.md b/src/skeleton/README.md index 0462b93d2..80618d593 100644 --- a/src/skeleton/README.md +++ b/src/skeleton/README.md @@ -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` | - | diff --git a/src/skeleton/README.zh-CN.md b/src/skeleton/README.zh-CN.md index a61e63460..d27af0ca7 100644 --- a/src/skeleton/README.zh-CN.md +++ b/src/skeleton/README.zh-CN.md @@ -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` | - | diff --git a/src/slider/README.md b/src/slider/README.md index 1ed7ba615..631bf9dc3 100644 --- a/src/slider/README.md +++ b/src/slider/README.md @@ -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)` | - | diff --git a/src/slider/README.zh-CN.md b/src/slider/README.zh-CN.md index fc02aec95..ec427995f 100644 --- a/src/slider/README.zh-CN.md +++ b/src/slider/README.zh-CN.md @@ -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)` | - | diff --git a/src/stepper/README.md b/src/stepper/README.md index 0d45ffcab..6dc6f618b 100644 --- a/src/stepper/README.md +++ b/src/stepper/README.md @@ -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` | - | diff --git a/src/stepper/README.zh-CN.md b/src/stepper/README.zh-CN.md index 98e22565c..53596f1c3 100644 --- a/src/stepper/README.zh-CN.md +++ b/src/stepper/README.zh-CN.md @@ -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` | - | ## 常见问题 diff --git a/src/steps/README.md b/src/steps/README.md index 244d59876..b0feac4df 100644 --- a/src/steps/README.md +++ b/src/steps/README.md @@ -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` | - | diff --git a/src/steps/README.zh-CN.md b/src/steps/README.zh-CN.md index 85cce2ded..0ba4a9869 100644 --- a/src/steps/README.zh-CN.md +++ b/src/steps/README.zh-CN.md @@ -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` | - | diff --git a/src/sticky/README.md b/src/sticky/README.md index 9fd461dde..70525a019 100644 --- a/src/sticky/README.md +++ b/src/sticky/README.md @@ -80,10 +80,10 @@ export default { | change `v3.0.10` | Emitted when sticky status changed | _isFixed: boolean_ | | scroll | Emitted when scrolling | _{ scrollTop: number, isFixed: 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 | -| --------------- | ------------- | ----------- | -| @sticky-z-index | `99` | - | +| Name | Default Value | Description | +| -------------------- | ------------- | ----------- | +| --van-sticky-z-index | `99` | - | diff --git a/src/sticky/README.zh-CN.md b/src/sticky/README.zh-CN.md index 354e146ca..01fb8a828 100644 --- a/src/sticky/README.zh-CN.md +++ b/src/sticky/README.zh-CN.md @@ -90,8 +90,8 @@ export default { ### 样式变量 -组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 +组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| --------------- | ------ | ---- | -| @sticky-z-index | `99` | - | +| 名称 | 默认值 | 描述 | +| -------------------- | ------ | ---- | +| --van-sticky-z-index | `99` | - | diff --git a/src/submit-bar/README.md b/src/submit-bar/README.md index 5dfb55e38..659219cae 100644 --- a/src/submit-bar/README.md +++ b/src/submit-bar/README.md @@ -122,27 +122,27 @@ export default { | top | Custom top content | | tip | Custom 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 | | --- | --- | --- | -| @submit-bar-height | `50px` | - | -| @submit-bar-z-index | `100` | - | -| @submit-bar-background-color | `@white` | - | -| @submit-bar-button-width | `110px` | - | -| @submit-bar-price-color | `@red` | - | -| @submit-bar-text-color | `@text-color` | - | -| @submit-bar-text-font-size | `@font-size-md` | - | -| @submit-bar-tip-padding | `@padding-xs @padding-sm` | - | -| @submit-bar-tip-font-size | `@font-size-sm` | - | -| @submit-bar-tip-line-height | `1.5` | - | -| @submit-bar-tip-color | `#f56723` | - | -| @submit-bar-tip-background-color | `#fff7cc` | - | -| @submit-bar-tip-icon-size | `12px` | - | -| @submit-bar-button-height | `40px` | - | -| @submit-bar-padding | `0 @padding-md` | - | -| @submit-bar-price-font-size | `@font-size-sm` | - | -| @submit-bar-price-integer-font-size | `20px` | - | -| @submit-bar-price-font-family | `@price-integer-font-family` | - | +| --van-submit-bar-height | `50px` | - | +| --van-submit-bar-z-index | `100` | - | +| --van-submit-bar-background-color | `@white` | - | +| --van-submit-bar-button-width | `110px` | - | +| --van-submit-bar-price-color | `@red` | - | +| --van-submit-bar-text-color | `@text-color` | - | +| --van-submit-bar-text-font-size | `@font-size-md` | - | +| --van-submit-bar-tip-padding | `@padding-xs @padding-sm` | - | +| --van-submit-bar-tip-font-size | `@font-size-sm` | - | +| --van-submit-bar-tip-line-height | `1.5` | - | +| --van-submit-bar-tip-color | `#f56723` | - | +| --van-submit-bar-tip-background-color | `#fff7cc` | - | +| --van-submit-bar-tip-icon-size | `12px` | - | +| --van-submit-bar-button-height | `40px` | - | +| --van-submit-bar-padding | `0 @padding-md` | - | +| --van-submit-bar-price-font-size | `@font-size-sm` | - | +| --van-submit-bar-price-integer-font-size | `20px` | - | +| --van-submit-bar-price-font-family | `@price-integer-font-family` | - | diff --git a/src/submit-bar/README.zh-CN.md b/src/submit-bar/README.zh-CN.md index c39d4cee8..939222aa4 100644 --- a/src/submit-bar/README.zh-CN.md +++ b/src/submit-bar/README.zh-CN.md @@ -131,25 +131,25 @@ export default { ### 样式变量 -组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 +组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ----------------------------------- | ---------------------------- | ---- | -| @submit-bar-height | `50px` | - | -| @submit-bar-z-index | `100` | - | -| @submit-bar-background-color | `@white` | - | -| @submit-bar-button-width | `110px` | - | -| @submit-bar-price-color | `@red` | - | -| @submit-bar-text-color | `@text-color` | - | -| @submit-bar-text-font-size | `@font-size-md` | - | -| @submit-bar-tip-padding | `@padding-xs @padding-sm` | - | -| @submit-bar-tip-font-size | `@font-size-sm` | - | -| @submit-bar-tip-line-height | `1.5` | - | -| @submit-bar-tip-color | `#f56723` | - | -| @submit-bar-tip-background-color | `#fff7cc` | - | -| @submit-bar-tip-icon-size | `12px` | - | -| @submit-bar-button-height | `40px` | - | -| @submit-bar-padding | `0 @padding-md` | - | -| @submit-bar-price-font-size | `@font-size-sm` | - | -| @submit-bar-price-integer-font-size | `20px` | - | -| @submit-bar-price-font-family | `@price-integer-font-family` | - | +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| --van-submit-bar-height | `50px` | - | +| --van-submit-bar-z-index | `100` | - | +| --van-submit-bar-background-color | `@white` | - | +| --van-submit-bar-button-width | `110px` | - | +| --van-submit-bar-price-color | `@red` | - | +| --van-submit-bar-text-color | `@text-color` | - | +| --van-submit-bar-text-font-size | `@font-size-md` | - | +| --van-submit-bar-tip-padding | `@padding-xs @padding-sm` | - | +| --van-submit-bar-tip-font-size | `@font-size-sm` | - | +| --van-submit-bar-tip-line-height | `1.5` | - | +| --van-submit-bar-tip-color | `#f56723` | - | +| --van-submit-bar-tip-background-color | `#fff7cc` | - | +| --van-submit-bar-tip-icon-size | `12px` | - | +| --van-submit-bar-button-height | `40px` | - | +| --van-submit-bar-padding | `0 @padding-md` | - | +| --van-submit-bar-price-font-size | `@font-size-sm` | - | +| --van-submit-bar-price-integer-font-size | `20px` | - | +| --van-submit-bar-price-font-family | `@price-integer-font-family` | - | diff --git a/src/swipe-cell/README.md b/src/swipe-cell/README.md index 86f9d7f98..6a8307343 100644 --- a/src/swipe-cell/README.md +++ b/src/swipe-cell/README.md @@ -146,13 +146,13 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get SwipeC | open | open SwipeCell | position: `left \| right` | - | | close | close SwipeCell | - | - | -### 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 | | --- | --- | --- | -| @switch-cell-padding-top | `@cell-vertical-padding - 1px` | - | -| @switch-cell-padding-bottom | `@cell-vertical-padding - 1px` | - | -| @switch-cell-large-padding-top | `@cell-large-vertical-padding - 1px` | - | -| @switch-cell-large-padding-bottom | `@cell-large-vertical-padding - 1px` | - | +| --van-switch-cell-padding-top | `@cell-vertical-padding - 1px` | - | +| --van-switch-cell-padding-bottom | `@cell-vertical-padding - 1px` | - | +| --van-switch-cell-large-padding-top | `@cell-large-vertical-padding - 1px` | - | +| --van-switch-cell-large-padding-bottom | `@cell-large-vertical-padding - 1px` | - | diff --git a/src/swipe-cell/README.zh-CN.md b/src/swipe-cell/README.zh-CN.md index 7bff36252..c388a452b 100644 --- a/src/swipe-cell/README.zh-CN.md +++ b/src/swipe-cell/README.zh-CN.md @@ -157,14 +157,14 @@ beforeClose 的第一个参数为对象，对象中包含以下属性： ### 样式变量 -组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 +组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 | 名称 | 默认值 | 描述 | | --- | --- | --- | -| @switch-cell-padding-top | `@cell-vertical-padding - 1px` | - | -| @switch-cell-padding-bottom | `@cell-vertical-padding - 1px` | - | -| @switch-cell-large-padding-top | `@cell-large-vertical-padding - 1px` | - | -| @switch-cell-large-padding-bottom | `@cell-large-vertical-padding - 1px` | - | +| --van-switch-cell-padding-top | `@cell-vertical-padding - 1px` | - | +| --van-switch-cell-padding-bottom | `@cell-vertical-padding - 1px` | - | +| --van-switch-cell-large-padding-top | `@cell-large-vertical-padding - 1px` | - | +| --van-switch-cell-large-padding-bottom | `@cell-large-vertical-padding - 1px` | - | ## 常见问题 diff --git a/src/swipe/README.md b/src/swipe/README.md index 33a61d46b..76b362fbb 100644 --- a/src/swipe/README.md +++ b/src/swipe/README.md @@ -192,15 +192,15 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Swipe | default | Content | - | | indicator `v3.0.16` | Custom indicator | _{ active: 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 | -| ------------------------------------------ | --------------- | ----------- | -| @swipe-indicator-size | `6px` | - | -| @swipe-indicator-margin | `@padding-sm` | - | -| @swipe-indicator-active-opacity | `1` | - | -| @swipe-indicator-inactive-opacity | `0.3` | - | -| @swipe-indicator-active-background-color | `@blue` | - | -| @swipe-indicator-inactive-background-color | `@border-color` | - | +| Name | Default Value | Description | +| --- | --- | --- | +| --van-swipe-indicator-size | `6px` | - | +| --van-swipe-indicator-margin | `@padding-sm` | - | +| --van-swipe-indicator-active-opacity | `1` | - | +| --van-swipe-indicator-inactive-opacity | `0.3` | - | +| --van-swipe-indicator-active-background-color | `@blue` | - | +| --van-swipe-indicator-inactive-background-color | `@border-color` | - | diff --git a/src/swipe/README.zh-CN.md b/src/swipe/README.zh-CN.md index d5eefa161..81a1f72c7 100644 --- a/src/swipe/README.zh-CN.md +++ b/src/swipe/README.zh-CN.md @@ -202,16 +202,16 @@ export default { ### 样式变量 -组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 +组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ------------------------------------------ | --------------- | ---- | -| @swipe-indicator-size | `6px` | - | -| @swipe-indicator-margin | `@padding-sm` | - | -| @swipe-indicator-active-opacity | `1` | - | -| @swipe-indicator-inactive-opacity | `0.3` | - | -| @swipe-indicator-active-background-color | `@blue` | - | -| @swipe-indicator-inactive-background-color | `@border-color` | - | +| 名称 | 默认值 | 描述 | +| ----------------------------------------------- | --------------- | ---- | +| --van-swipe-indicator-size | `6px` | - | +| --van-swipe-indicator-margin | `@padding-sm` | - | +| --van-swipe-indicator-active-opacity | `1` | - | +| --van-swipe-indicator-inactive-opacity | `0.3` | - | +| --van-swipe-indicator-active-background-color | `@blue` | - | +| --van-swipe-indicator-inactive-background-color | `@border-color` | - | ## 常见问题 diff --git a/src/switch/README.md b/src/switch/README.md index f85d2a118..e793f9047 100644 --- a/src/switch/README.md +++ b/src/switch/README.md @@ -121,20 +121,20 @@ export default { | change | Emitted when check status changed | _value: any_ | | 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 | | --- | --- | --- | -| @switch-size | `30px` | - | -| @switch-width | `2em` | - | -| @switch-height | `1em` | - | -| @switch-node-size | `1em` | - | -| @switch-node-background-color | `@white` | - | -| @switch-node-box-shadow | `0 3px 1px 0 rgba(0, 0, 0, 0.05)` | - | -| @switch-background-color | `@white` | - | -| @switch-on-background-color | `@blue` | - | -| @switch-transition-duration | `@animation-duration-base` | - | -| @switch-disabled-opacity | `@disabled-opacity` | - | -| @switch-border | `@border-width-base solid rgba(0, 0, 0, 0.1)` | - | +| --van-switch-size | `30px` | - | +| --van-switch-width | `2em` | - | +| --van-switch-height | `1em` | - | +| --van-switch-node-size | `1em` | - | +| --van-switch-node-background-color | `@white` | - | +| --van-switch-node-box-shadow | `0 3px 1px 0 rgba(0, 0, 0, 0.05)` | - | +| --van-switch-background-color | `@white` | - | +| --van-switch-on-background-color | `@blue` | - | +| --van-switch-transition-duration | `@animation-duration-base` | - | +| --van-switch-disabled-opacity | `@disabled-opacity` | - | +| --van-switch-border | `@border-width-base solid rgba(0, 0, 0, 0.1)` | - | diff --git a/src/switch/README.zh-CN.md b/src/switch/README.zh-CN.md index b682a4b4f..bd50c0616 100644 --- a/src/switch/README.zh-CN.md +++ b/src/switch/README.zh-CN.md @@ -135,18 +135,18 @@ export default { ### 样式变量 -组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 +组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 | 名称 | 默认值 | 描述 | | --- | --- | --- | -| @switch-size | `30px` | - | -| @switch-width | `2em` | - | -| @switch-height | `1em` | - | -| @switch-node-size | `1em` | - | -| @switch-node-background-color | `@white` | - | -| @switch-node-box-shadow | `0 3px 1px 0 rgba(0, 0, 0, 0.05)` | - | -| @switch-background-color | `@white` | - | -| @switch-on-background-color | `@blue` | - | -| @switch-transition-duration | `@animation-duration-base` | - | -| @switch-disabled-opacity | `@disabled-opacity` | - | -| @switch-border | `@border-width-base solid rgba(0, 0, 0, 0.1)` | - | +| --van-switch-size | `30px` | - | +| --van-switch-width | `2em` | - | +| --van-switch-height | `1em` | - | +| --van-switch-node-size | `1em` | - | +| --van-switch-node-background-color | `@white` | - | +| --van-switch-node-box-shadow | `0 3px 1px 0 rgba(0, 0, 0, 0.05)` | - | +| --van-switch-background-color | `@white` | - | +| --van-switch-on-background-color | `@blue` | - | +| --van-switch-transition-duration | `@animation-duration-base` | - | +| --van-switch-disabled-opacity | `@disabled-opacity` | - | +| --van-switch-border | `@border-width-base solid rgba(0, 0, 0, 0.1)` | - | diff --git a/src/tab/README.md b/src/tab/README.md index 95a2df7c7..053ee1a99 100644 --- a/src/tab/README.md +++ b/src/tab/README.md @@ -233,7 +233,7 @@ export default { ### Tabs Props | Attribute | Description | Type | Default | -| --- | --- | --- | --- | +| --- | --- | --- | --- | --- | | v-model:active | Index of active tab | _number \| string_ | `0` | | type | Can be set to `line` `card` | _string_ | `line` | | color | Tab color | _string_ | `#ee0a24` | @@ -302,21 +302,21 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Tabs i | default | Content of tab | | title | Custom tab 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 | -| -------------------------- | --------------------- | ----------- | -| @tab-text-color | `@gray-7` | - | -| @tab-active-text-color | `@text-color` | - | -| @tab-disabled-text-color | `@gray-5` | - | -| @tab-font-size | `@font-size-md` | - | -| @tab-line-height | `@line-height-md` | - | -| @tabs-default-color | `@red` | - | -| @tabs-line-height | `44px` | - | -| @tabs-card-height | `30px` | - | -| @tabs-nav-background-color | `@white` | - | -| @tabs-bottom-bar-width | `40px` | - | -| @tabs-bottom-bar-height | `3px` | - | -| @tabs-bottom-bar-color | `@tabs-default-color` | - | +| Name | Default Value | Description | +| ------------------------------- | --------------------- | ----------- | +| --van-tab-text-color | `@gray-7` | - | +| --van-tab-active-text-color | `@text-color` | - | +| --van-tab-disabled-text-color | `@gray-5` | - | +| --van-tab-font-size | `@font-size-md` | - | +| --van-tab-line-height | `@line-height-md` | - | +| --van-tabs-default-color | `@red` | - | +| --van-tabs-line-height | `44px` | - | +| --van-tabs-card-height | `30px` | - | +| --van-tabs-nav-background-color | `@white` | - | +| --van-tabs-bottom-bar-width | `40px` | - | +| --van-tabs-bottom-bar-height | `3px` | - | +| --van-tabs-bottom-bar-color | `@tabs-default-color` | - | diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md index 347bfdefc..4a9274c44 100644 --- a/src/tab/README.zh-CN.md +++ b/src/tab/README.zh-CN.md @@ -311,22 +311,22 @@ export default { ### 样式变量 -组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 +组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| -------------------------- | --------------------- | ---- | -| @tab-text-color | `@gray-7` | - | -| @tab-active-text-color | `@text-color` | - | -| @tab-disabled-text-color | `@gray-5` | - | -| @tab-font-size | `@font-size-md` | - | -| @tab-line-height | `@line-height-md` | - | -| @tabs-default-color | `@red` | - | -| @tabs-line-height | `44px` | - | -| @tabs-card-height | `30px` | - | -| @tabs-nav-background-color | `@white` | - | -| @tabs-bottom-bar-width | `40px` | - | -| @tabs-bottom-bar-height | `3px` | - | -| @tabs-bottom-bar-color | `@tabs-default-color` | - | +| 名称 | 默认值 | 描述 | +| ------------------------------- | --------------------- | ---- | +| --van-tab-text-color | `@gray-7` | - | +| --van-tab-active-text-color | `@text-color` | - | +| --van-tab-disabled-text-color | `@gray-5` | - | +| --van-tab-font-size | `@font-size-md` | - | +| --van-tab-line-height | `@line-height-md` | - | +| --van-tabs-default-color | `@red` | - | +| --van-tabs-line-height | `44px` | - | +| --van-tabs-card-height | `30px` | - | +| --van-tabs-nav-background-color | `@white` | - | +| --van-tabs-bottom-bar-width | `40px` | - | +| --van-tabs-bottom-bar-height | `3px` | - | +| --van-tabs-bottom-bar-color | `@tabs-default-color` | - | ## 常见问题 diff --git a/src/tabbar/README.md b/src/tabbar/README.md index dd9567d46..366173394 100644 --- a/src/tabbar/README.md +++ b/src/tabbar/README.md @@ -200,19 +200,19 @@ export default { | ---- | ----------- | ----------------- | | icon | Custom icon | _active: 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 | -| ------------------------------------ | --------------- | ----------- | -| @tabbar-height | `50px` | - | -| @tabbar-z-index | `1` | - | -| @tabbar-background-color | `@white` | - | -| @tabbar-item-font-size | `@font-size-sm` | - | -| @tabbar-item-text-color | `@gray-7` | - | -| @tabbar-item-active-color | `@blue` | - | -| @tabbar-item-active-background-color | `@white` | - | -| @tabbar-item-line-height | `1` | - | -| @tabbar-item-icon-size | `22px` | - | -| @tabbar-item-margin-bottom | `4px` | - | +| Name | Default Value | Description | +| ----------------------------------------- | --------------- | ----------- | +| --van-tabbar-height | `50px` | - | +| --van-tabbar-z-index | `1` | - | +| --van-tabbar-background-color | `@white` | - | +| --van-tabbar-item-font-size | `@font-size-sm` | - | +| --van-tabbar-item-text-color | `@gray-7` | - | +| --van-tabbar-item-active-color | `@blue` | - | +| --van-tabbar-item-active-background-color | `@white` | - | +| --van-tabbar-item-line-height | `1` | - | +| --van-tabbar-item-icon-size | `22px` | - | +| --van-tabbar-item-margin-bottom | `4px` | - | diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md index 68b890af8..7eff9eabe 100644 --- a/src/tabbar/README.zh-CN.md +++ b/src/tabbar/README.zh-CN.md @@ -214,17 +214,17 @@ export default { ### 样式变量 -组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 +组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ------------------------------------ | --------------- | ---- | -| @tabbar-height | `50px` | - | -| @tabbar-z-index | `1` | - | -| @tabbar-background-color | `@white` | - | -| @tabbar-item-font-size | `@font-size-sm` | - | -| @tabbar-item-text-color | `@gray-7` | - | -| @tabbar-item-active-color | `@blue` | - | -| @tabbar-item-active-background-color | `@white` | - | -| @tabbar-item-line-height | `1` | - | -| @tabbar-item-icon-size | `22px` | - | -| @tabbar-item-margin-bottom | `4px` | - | +| 名称 | 默认值 | 描述 | +| ----------------------------------------- | --------------- | ---- | +| --van-tabbar-height | `50px` | - | +| --van-tabbar-z-index | `1` | - | +| --van-tabbar-background-color | `@white` | - | +| --van-tabbar-item-font-size | `@font-size-sm` | - | +| --van-tabbar-item-text-color | `@gray-7` | - | +| --van-tabbar-item-active-color | `@blue` | - | +| --van-tabbar-item-active-background-color | `@white` | - | +| --van-tabbar-item-line-height | `1` | - | +| --van-tabbar-item-icon-size | `22px` | - | +| --van-tabbar-item-margin-bottom | `4px` | - | diff --git a/src/tag/README.md b/src/tag/README.md index 99ac70f78..458aac377 100644 --- a/src/tag/README.md +++ b/src/tag/README.md @@ -116,25 +116,25 @@ export default { | click | Emitted when component is clicked | _event: MouseEvent_ | | close | Emitted when close icon 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 | -| --------------------------- | --------------------------- | ----------- | -| @tag-padding | `0 @padding-base` | - | -| @tag-text-color | `@white` | - | -| @tag-font-size | `@font-size-sm` | - | -| @tag-border-radius | `2px` | - | -| @tag-line-height | `16px` | - | -| @tag-medium-padding | `2px 6px` | - | -| @tag-large-padding | `@padding-base @padding-xs` | - | -| @tag-large-border-radius | `@border-radius-md` | - | -| @tag-large-font-size | `@font-size-md` | - | -| @tag-round-border-radius | `@border-radius-max` | - | -| @tag-danger-color | `@red` | - | -| @tag-primary-color | `@blue` | - | -| @tag-success-color | `@green` | - | -| @tag-warning-color | `@orange` | - | -| @tag-default-color | `@gray-6` | - | -| @tag-plain-background-color | `@white` | - | +| Name | Default Value | Description | +| -------------------------------- | --------------------------- | ----------- | +| --van-tag-padding | `0 @padding-base` | - | +| --van-tag-text-color | `@white` | - | +| --van-tag-font-size | `@font-size-sm` | - | +| --van-tag-border-radius | `2px` | - | +| --van-tag-line-height | `16px` | - | +| --van-tag-medium-padding | `2px 6px` | - | +| --van-tag-large-padding | `@padding-base @padding-xs` | - | +| --van-tag-large-border-radius | `@border-radius-md` | - | +| --van-tag-large-font-size | `@font-size-md` | - | +| --van-tag-round-border-radius | `@border-radius-max` | - | +| --van-tag-danger-color | `@red` | - | +| --van-tag-primary-color | `@blue` | - | +| --van-tag-success-color | `@green` | - | +| --van-tag-warning-color | `@orange` | - | +| --van-tag-default-color | `@gray-6` | - | +| --van-tag-plain-background-color | `@white` | - | diff --git a/src/tag/README.zh-CN.md b/src/tag/README.zh-CN.md index 5d135fda6..9cefbbc35 100644 --- a/src/tag/README.zh-CN.md +++ b/src/tag/README.zh-CN.md @@ -132,23 +132,23 @@ export default { ### 样式变量 -组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 +组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| --------------------------- | --------------------------- | ---- | -| @tag-padding | `0 @padding-base` | - | -| @tag-text-color | `@white` | - | -| @tag-font-size | `@font-size-sm` | - | -| @tag-border-radius | `2px` | - | -| @tag-line-height | `16px` | - | -| @tag-medium-padding | `2px 6px` | - | -| @tag-large-padding | `@padding-base @padding-xs` | - | -| @tag-large-border-radius | `@border-radius-md` | - | -| @tag-large-font-size | `@font-size-md` | - | -| @tag-round-border-radius | `@border-radius-max` | - | -| @tag-danger-color | `@red` | - | -| @tag-primary-color | `@blue` | - | -| @tag-success-color | `@green` | - | -| @tag-warning-color | `@orange` | - | -| @tag-default-color | `@gray-6` | - | -| @tag-plain-background-color | `@white` | - | +| 名称 | 默认值 | 描述 | +| -------------------------------- | --------------------------- | ---- | +| --van-tag-padding | `0 @padding-base` | - | +| --van-tag-text-color | `@white` | - | +| --van-tag-font-size | `@font-size-sm` | - | +| --van-tag-border-radius | `2px` | - | +| --van-tag-line-height | `16px` | - | +| --van-tag-medium-padding | `2px 6px` | - | +| --van-tag-large-padding | `@padding-base @padding-xs` | - | +| --van-tag-large-border-radius | `@border-radius-md` | - | +| --van-tag-large-font-size | `@font-size-md` | - | +| --van-tag-round-border-radius | `@border-radius-max` | - | +| --van-tag-danger-color | `@red` | - | +| --van-tag-primary-color | `@blue` | - | +| --van-tag-success-color | `@green` | - | +| --van-tag-warning-color | `@orange` | - | +| --van-tag-default-color | `@gray-6` | - | +| --van-tag-plain-background-color | `@white` | - | diff --git a/src/toast/README.md b/src/toast/README.md index 8df90bbdc..db85fc8c6 100644 --- a/src/toast/README.md +++ b/src/toast/README.md @@ -175,24 +175,24 @@ Toast.resetDefaultOptions('loading'); | transition | Transition, equivalent to `name` prop of [transition](https://v3.vuejs.org/api/built-in-components.html#transition) | _string_ | `van-fade` | | teleport | Specifies a target element where Toast will be mounted | _string \| Element_ | `body` | -### 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 | -| ------------------------------- | ------------------------- | ----------- | -| @toast-max-width | `70%` | - | -| @toast-font-size | `@font-size-md` | - | -| @toast-text-color | `@white` | - | -| @toast-loading-icon-color | `@white` | - | -| @toast-line-height | `@line-height-md` | - | -| @toast-border-radius | `@border-radius-lg` | - | -| @toast-background-color | `fade(@black, 70%)` | - | -| @toast-icon-size | `36px` | - | -| @toast-text-min-width | `96px` | - | -| @toast-text-padding | `@padding-xs @padding-sm` | - | -| @toast-default-padding | `@padding-md` | - | -| @toast-default-width | `88px` | - | -| @toast-default-min-height | `88px` | - | -| @toast-position-top-distance | `20%` | - | -| @toast-position-bottom-distance | `20%` | - | +| Name | Default Value | Description | +| --- | --- | --- | +| --van-toast-max-width | `70%` | - | +| --van-toast-font-size | `@font-size-md` | - | +| --van-toast-text-color | `@white` | - | +| --van-toast-loading-icon-color | `@white` | - | +| --van-toast-line-height | `@line-height-md` | - | +| --van-toast-border-radius | `@border-radius-lg` | - | +| --van-toast-background-color | `fade(@black, 70%)` | - | +| --van-toast-icon-size | `36px` | - | +| --van-toast-text-min-width | `96px` | - | +| --van-toast-text-padding | `@padding-xs @padding-sm` | - | +| --van-toast-default-padding | `@padding-md` | - | +| --van-toast-default-width | `88px` | - | +| --van-toast-default-min-height | `88px` | - | +| --van-toast-position-top-distance | `20%` | - | +| --van-toast-position-bottom-distance | `20%` | - | diff --git a/src/toast/README.zh-CN.md b/src/toast/README.zh-CN.md index 72e1cefc5..08cea802b 100644 --- a/src/toast/README.zh-CN.md +++ b/src/toast/README.zh-CN.md @@ -165,7 +165,7 @@ Toast.resetDefaultOptions('loading'); ### Options | 参数 | 说明 | 类型 | 默认值 | -| --- | --- | --- | --- | +| --- | --- | --- | --- | --- | | type | 提示类型，可选值为 `loading` `success`
`fail` `html` | _string_ | `text` | | position | 位置，可选值为 `top` `bottom` | _string_ | `middle` | | message | 文本内容，支持通过`\n`换行 | _string_ | `''` | - | @@ -188,22 +188,22 @@ Toast.resetDefaultOptions('loading'); ### 样式变量 -组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 +组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ------------------------------- | ------------------------- | ---- | -| @toast-max-width | `70%` | - | -| @toast-font-size | `@font-size-md` | - | -| @toast-text-color | `@white` | - | -| @toast-loading-icon-color | `@white` | - | -| @toast-line-height | `@line-height-md` | - | -| @toast-border-radius | `@border-radius-lg` | - | -| @toast-background-color | `fade(@black, 70%)` | - | -| @toast-icon-size | `36px` | - | -| @toast-text-min-width | `96px` | - | -| @toast-text-padding | `@padding-xs @padding-sm` | - | -| @toast-default-padding | `@padding-md` | - | -| @toast-default-width | `88px` | - | -| @toast-default-min-height | `88px` | - | -| @toast-position-top-distance | `20%` | - | -| @toast-position-bottom-distance | `20%` | - | +| 名称 | 默认值 | 描述 | +| ------------------------------------ | ------------------------- | ---- | +| --van-toast-max-width | `70%` | - | +| --van-toast-font-size | `@font-size-md` | - | +| --van-toast-text-color | `@white` | - | +| --van-toast-loading-icon-color | `@white` | - | +| --van-toast-line-height | `@line-height-md` | - | +| --van-toast-border-radius | `@border-radius-lg` | - | +| --van-toast-background-color | `fade(@black, 70%)` | - | +| --van-toast-icon-size | `36px` | - | +| --van-toast-text-min-width | `96px` | - | +| --van-toast-text-padding | `@padding-xs @padding-sm` | - | +| --van-toast-default-padding | `@padding-md` | - | +| --van-toast-default-width | `88px` | - | +| --van-toast-default-min-height | `88px` | - | +| --van-toast-position-top-distance | `20%` | - | +| --van-toast-position-bottom-distance | `20%` | - | diff --git a/src/tree-select/README.md b/src/tree-select/README.md index 2dedcb9ed..7a46d0b3f 100644 --- a/src/tree-select/README.md +++ b/src/tree-select/README.md @@ -230,17 +230,17 @@ In every tree object, `text` property defines `id` stands for the unique key whi ]; ``` -### 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 | -| ------------------------------------- | ------------------- | ----------- | -| @tree-select-font-size | `@font-size-md` | - | -| @tree-select-nav-background-color | `@background-color` | - | -| @tree-select-content-background-color | `@white` | - | -| @tree-select-nav-item-padding | `14px @padding-sm` | - | -| @tree-select-item-height | `48px` | - | -| @tree-select-item-active-color | `@red` | - | -| @tree-select-item-disabled-color | `@gray-5` | - | -| @tree-select-item-selected-size | `16px` | - | +| Name | Default Value | Description | +| --- | --- | --- | +| --van-tree-select-font-size | `@font-size-md` | - | +| --van-tree-select-nav-background-color | `@background-color` | - | +| --van-tree-select-content-background-color | `@white` | - | +| --van-tree-select-nav-item-padding | `14px @padding-sm` | - | +| --van-tree-select-item-height | `48px` | - | +| --van-tree-select-item-active-color | `@red` | - | +| --van-tree-select-item-disabled-color | `@gray-5` | - | +| --van-tree-select-item-selected-size | `16px` | - | diff --git a/src/tree-select/README.zh-CN.md b/src/tree-select/README.zh-CN.md index 226683cee..deb9181a5 100644 --- a/src/tree-select/README.zh-CN.md +++ b/src/tree-select/README.zh-CN.md @@ -238,15 +238,15 @@ export default { ### 样式变量 -组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 +组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ------------------------------------- | ------------------- | ---- | -| @tree-select-font-size | `@font-size-md` | - | -| @tree-select-nav-background-color | `@background-color` | - | -| @tree-select-content-background-color | `@white` | - | -| @tree-select-nav-item-padding | `14px @padding-sm` | - | -| @tree-select-item-height | `48px` | - | -| @tree-select-item-active-color | `@red` | - | -| @tree-select-item-disabled-color | `@gray-5` | - | -| @tree-select-item-selected-size | `16px` | - | +| 名称 | 默认值 | 描述 | +| ------------------------------------------ | ------------------- | ---- | +| --van-tree-select-font-size | `@font-size-md` | - | +| --van-tree-select-nav-background-color | `@background-color` | - | +| --van-tree-select-content-background-color | `@white` | - | +| --van-tree-select-nav-item-padding | `14px @padding-sm` | - | +| --van-tree-select-item-height | `48px` | - | +| --van-tree-select-item-active-color | `@red` | - | +| --van-tree-select-item-disabled-color | `@gray-5` | - | +| --van-tree-select-item-selected-size | `16px` | - | diff --git a/src/uploader/README.md b/src/uploader/README.md index 5db4aa31a..2af794d8c 100644 --- a/src/uploader/README.md +++ b/src/uploader/README.md @@ -356,34 +356,34 @@ Use [ref](https://v3.vuejs.org/guide/component-template-refs.html) to get Upload | closeImagePreview | Close full screen image preview | - | - | | chooseFile | Trigger choosing files, works with the user action context only because of browser security | - | - | -### 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 | -| ---------------------------------- | -------------------- | ----------- | -| @uploader-size | `80px` | - | -| @uploader-icon-size | `24px` | - | -| @uploader-icon-color | `@gray-4` | - | -| @uploader-text-color | `@gray-6` | - | -| @uploader-text-font-size | `@font-size-sm` | - | -| @uploader-upload-background-color | `@gray-1` | - | -| @uploader-upload-active-color | `@active-color` | - | -| @uploader-delete-color | `@white` | - | -| @uploader-delete-icon-size | `14px` | - | -| @uploader-delete-background-color | `rgba(0, 0, 0, 0.7)` | - | -| @uploader-file-background-color | `@background-color` | - | -| @uploader-file-icon-size | `20px` | - | -| @uploader-file-icon-color | `@gray-7` | - | -| @uploader-file-name-padding | `0 @padding-base` | - | -| @uploader-file-name-margin-top | `@padding-xs` | - | -| @uploader-file-name-font-size | `@font-size-sm` | - | -| @uploader-file-name-text-color | `@gray-7` | - | -| @uploader-mask-text-color | `@white` | - | -| @uploader-mask-background-color | `fade(@gray-8, 88%)` | - | -| @uploader-mask-icon-size | `22px` | - | -| @uploader-mask-message-font-size | `@font-size-sm` | - | -| @uploader-mask-message-line-height | `@line-height-xs` | - | -| @uploader-loading-icon-size | `22px` | - | -| @uploader-loading-icon-color | `@white` | - | -| @uploader-disabled-opacity | `@disabled-opacity` | - | +| Name | Default Value | Description | +| --------------------------------------- | -------------------- | ----------- | +| --van-uploader-size | `80px` | - | +| --van-uploader-icon-size | `24px` | - | +| --van-uploader-icon-color | `@gray-4` | - | +| --van-uploader-text-color | `@gray-6` | - | +| --van-uploader-text-font-size | `@font-size-sm` | - | +| --van-uploader-upload-background-color | `@gray-1` | - | +| --van-uploader-upload-active-color | `@active-color` | - | +| --van-uploader-delete-color | `@white` | - | +| --van-uploader-delete-icon-size | `14px` | - | +| --van-uploader-delete-background-color | `rgba(0, 0, 0, 0.7)` | - | +| --van-uploader-file-background-color | `@background-color` | - | +| --van-uploader-file-icon-size | `20px` | - | +| --van-uploader-file-icon-color | `@gray-7` | - | +| --van-uploader-file-name-padding | `0 @padding-base` | - | +| --van-uploader-file-name-margin-top | `@padding-xs` | - | +| --van-uploader-file-name-font-size | `@font-size-sm` | - | +| --van-uploader-file-name-text-color | `@gray-7` | - | +| --van-uploader-mask-text-color | `@white` | - | +| --van-uploader-mask-background-color | `fade(@gray-8, 88%)` | - | +| --van-uploader-mask-icon-size | `22px` | - | +| --van-uploader-mask-message-font-size | `@font-size-sm` | - | +| --van-uploader-mask-message-line-height | `@line-height-xs` | - | +| --van-uploader-loading-icon-size | `22px` | - | +| --van-uploader-loading-icon-color | `@white` | - | +| --van-uploader-disabled-opacity | `@disabled-opacity` | - | diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md index b0b3991c6..5a2d6db7b 100644 --- a/src/uploader/README.zh-CN.md +++ b/src/uploader/README.zh-CN.md @@ -383,35 +383,35 @@ before-read、after-read、before-delete 执行时会传递以下回调参数： ### 样式变量 -组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 +组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/config-provider)。 -| 名称 | 默认值 | 描述 | -| ---------------------------------- | -------------------- | ---- | -| @uploader-size | `80px` | - | -| @uploader-icon-size | `24px` | - | -| @uploader-icon-color | `@gray-4` | - | -| @uploader-text-color | `@gray-6` | - | -| @uploader-text-font-size | `@font-size-sm` | - | -| @uploader-upload-background-color | `@gray-1` | - | -| @uploader-upload-active-color | `@active-color` | - | -| @uploader-delete-color | `@white` | - | -| @uploader-delete-icon-size | `14px` | - | -| @uploader-delete-background-color | `rgba(0, 0, 0, 0.7)` | - | -| @uploader-file-background-color | `@background-color` | - | -| @uploader-file-icon-size | `20px` | - | -| @uploader-file-icon-color | `@gray-7` | - | -| @uploader-file-name-padding | `0 @padding-base` | - | -| @uploader-file-name-margin-top | `@padding-xs` | - | -| @uploader-file-name-font-size | `@font-size-sm` | - | -| @uploader-file-name-text-color | `@gray-7` | - | -| @uploader-mask-text-color | `@white` | - | -| @uploader-mask-background-color | `fade(@gray-8, 88%)` | - | -| @uploader-mask-icon-size | `22px` | - | -| @uploader-mask-message-font-size | `@font-size-sm` | - | -| @uploader-mask-message-line-height | `@line-height-xs` | - | -| @uploader-loading-icon-size | `22px` | - | -| @uploader-loading-icon-color | `@white` | - | -| @uploader-disabled-opacity | `@disabled-opacity` | - | +| 名称 | 默认值 | 描述 | +| --------------------------------------- | -------------------- | ---- | +| --van-uploader-size | `80px` | - | +| --van-uploader-icon-size | `24px` | - | +| --van-uploader-icon-color | `@gray-4` | - | +| --van-uploader-text-color | `@gray-6` | - | +| --van-uploader-text-font-size | `@font-size-sm` | - | +| --van-uploader-upload-background-color | `@gray-1` | - | +| --van-uploader-upload-active-color | `@active-color` | - | +| --van-uploader-delete-color | `@white` | - | +| --van-uploader-delete-icon-size | `14px` | - | +| --van-uploader-delete-background-color | `rgba(0, 0, 0, 0.7)` | - | +| --van-uploader-file-background-color | `@background-color` | - | +| --van-uploader-file-icon-size | `20px` | - | +| --van-uploader-file-icon-color | `@gray-7` | - | +| --van-uploader-file-name-padding | `0 @padding-base` | - | +| --van-uploader-file-name-margin-top | `@padding-xs` | - | +| --van-uploader-file-name-font-size | `@font-size-sm` | - | +| --van-uploader-file-name-text-color | `@gray-7` | - | +| --van-uploader-mask-text-color | `@white` | - | +| --van-uploader-mask-background-color | `fade(@gray-8, 88%)` | - | +| --van-uploader-mask-icon-size | `22px` | - | +| --van-uploader-mask-message-font-size | `@font-size-sm` | - | +| --van-uploader-mask-message-line-height | `@line-height-xs` | - | +| --van-uploader-loading-icon-size | `22px` | - | +| --van-uploader-loading-icon-color | `@white` | - | +| --van-uploader-disabled-opacity | `@disabled-opacity` | - | ## 常见问题