From 862adcd8eb33483196f27732d9f287b535bcf6f3 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 22 Nov 2020 16:02:46 +0800 Subject: [PATCH] docs: display all less variables (#7604) --- docs/markdown/theme.en-US.md | 74 ++++++++++++++++++++++++++--- docs/markdown/theme.zh-CN.md | 74 ++++++++++++++++++++++++++--- src/action-sheet/README.md | 29 +++++++++++ src/action-sheet/README.zh-CN.md | 29 +++++++++++ src/address-edit/README.md | 12 +++++ src/address-edit/README.zh-CN.md | 12 +++++ src/address-list/README.md | 20 ++++++++ src/address-list/README.zh-CN.md | 20 ++++++++ src/badge/README.md | 17 +++++++ src/badge/README.zh-CN.md | 17 +++++++ src/button/README.md | 36 ++++++++++++++ src/button/README.zh-CN.md | 36 ++++++++++++++ src/calendar/README.md | 32 +++++++++++++ src/calendar/README.zh-CN.md | 32 +++++++++++++ src/card/README.md | 23 +++++++++ src/card/README.zh-CN.md | 23 +++++++++ src/cell/README.md | 31 ++++++++++++ src/cell/README.zh-CN.md | 31 ++++++++++++ src/checkbox/README.md | 16 +++++++ src/checkbox/README.zh-CN.md | 16 +++++++ src/circle/README.md | 11 +++++ src/circle/README.zh-CN.md | 11 +++++ src/collapse/README.md | 14 ++++++ src/collapse/README.zh-CN.md | 14 ++++++ src/contact-card/README.md | 11 +++++ src/contact-card/README.zh-CN.md | 11 +++++ src/contact-edit/README.md | 13 +++++ src/contact-edit/README.zh-CN.md | 13 +++++ src/contact-list/README.md | 10 ++++ src/contact-list/README.zh-CN.md | 10 ++++ src/count-down/README.md | 10 ++++ src/count-down/README.zh-CN.md | 12 ++++- src/coupon-list/README.md | 31 ++++++++++++ src/coupon-list/README.zh-CN.md | 31 ++++++++++++ src/dialog/README.md | 26 ++++++++++ src/dialog/README.zh-CN.md | 26 ++++++++++ src/divider/README.md | 15 ++++++ src/divider/README.zh-CN.md | 15 ++++++ src/dropdown-menu/README.md | 19 ++++++++ src/dropdown-menu/README.zh-CN.md | 19 ++++++++ src/empty/README.md | 15 ++++++ src/empty/README.zh-CN.md | 15 ++++++ src/field/README.md | 25 ++++++++++ src/field/README.zh-CN.md | 25 ++++++++++ src/goods-action/README.md | 19 ++++++++ src/goods-action/README.zh-CN.md | 19 ++++++++ src/grid/README.md | 13 +++++ src/grid/README.zh-CN.md | 13 +++++ src/image-preview/README.md | 17 +++++++ src/image-preview/README.zh-CN.md | 17 +++++++ src/image/README.md | 14 ++++++ src/image/README.zh-CN.md | 14 ++++++ src/index-bar/README.md | 20 ++++++++ src/index-bar/README.zh-CN.md | 20 ++++++++ src/list/README.md | 11 +++++ src/list/README.zh-CN.md | 11 +++++ src/loading/README.md | 12 +++++ src/loading/README.zh-CN.md | 12 +++++ src/nav-bar/README.md | 15 ++++++ src/nav-bar/README.zh-CN.md | 15 ++++++ src/notice-bar/README.md | 16 +++++++ src/notice-bar/README.zh-CN.md | 16 +++++++ src/notify/README.md | 15 ++++++ src/notify/README.zh-CN.md | 15 ++++++ src/number-keyboard/README.md | 25 ++++++++++ src/number-keyboard/README.zh-CN.md | 25 ++++++++++ src/overlay/README.md | 9 ++++ src/overlay/README.zh-CN.md | 9 ++++ src/pagination/README.md | 16 +++++++ src/pagination/README.zh-CN.md | 16 +++++++ src/panel/README.md | 10 ++++ src/panel/README.zh-CN.md | 10 ++++ src/password-input/README.md | 17 +++++++ src/password-input/README.zh-CN.md | 17 +++++++ src/picker/README.md | 20 ++++++++ src/picker/README.zh-CN.md | 20 ++++++++ src/popover/README.md | 20 ++++++++ src/popover/README.zh-CN.md | 20 ++++++++ src/popup/README.md | 15 ++++++ src/popup/README.zh-CN.md | 15 ++++++ src/progress/README.md | 15 ++++++ src/progress/README.zh-CN.md | 15 ++++++ src/pull-refresh/README.md | 10 ++++ src/pull-refresh/README.zh-CN.md | 10 ++++ src/radio/README.md | 16 +++++++ src/radio/README.zh-CN.md | 16 +++++++ src/rate/README.md | 12 +++++ src/rate/README.zh-CN.md | 12 +++++ src/search/README.md | 18 +++++++ src/search/README.zh-CN.md | 18 +++++++ src/share-sheet/README.md | 22 +++++++++ src/share-sheet/README.zh-CN.md | 22 +++++++++ src/sidebar/README.md | 21 ++++++++ src/sidebar/README.zh-CN.md | 21 ++++++++ src/skeleton/README.md | 14 ++++++ src/skeleton/README.zh-CN.md | 14 ++++++ src/sku/README.md | 10 ++++ src/sku/README.zh-CN.md | 10 ++++ src/slider/README.md | 16 +++++++ src/slider/README.zh-CN.md | 16 +++++++ src/stepper/README.md | 21 ++++++++ src/stepper/README.zh-CN.md | 21 ++++++++ src/steps/README.md | 19 ++++++++ src/steps/README.zh-CN.md | 19 ++++++++ src/sticky/README.md | 8 ++++ src/sticky/README.zh-CN.md | 8 ++++ src/submit-bar/README.md | 26 ++++++++++ src/submit-bar/README.zh-CN.md | 26 ++++++++++ src/swipe-cell/README.md | 11 +++++ src/swipe-cell/README.zh-CN.md | 11 +++++ src/swipe/README.md | 13 +++++ src/swipe/README.zh-CN.md | 13 +++++ src/switch/README.md | 18 +++++++ src/switch/README.zh-CN.md | 18 +++++++ src/tab/README.md | 19 ++++++++ src/tab/README.zh-CN.md | 19 ++++++++ src/tabbar/README.md | 17 +++++++ src/tabbar/README.zh-CN.md | 17 +++++++ src/tag/README.md | 23 +++++++++ src/tag/README.zh-CN.md | 23 +++++++++ src/toast/README.md | 22 +++++++++ src/toast/README.zh-CN.md | 22 +++++++++ src/tree-select/README.md | 15 ++++++ src/tree-select/README.zh-CN.md | 15 ++++++ src/uploader/README.md | 31 ++++++++++++ src/uploader/README.zh-CN.md | 31 ++++++++++++ 126 files changed, 2330 insertions(+), 14 deletions(-) diff --git a/docs/markdown/theme.en-US.md b/docs/markdown/theme.en-US.md index 1082eb564..59da82e69 100644 --- a/docs/markdown/theme.en-US.md +++ b/docs/markdown/theme.en-US.md @@ -2,21 +2,81 @@ ### Intro -Vant provides a set of default themes, if you want to custom the theme color or other styles, you can use the following methods: +Vant use [Less](http://lesscss.org/) as css preprocessor，you can override the default less variables to custom theme. ### Less variables -Vant use [Less](http://lesscss.org/) as css preprocessor，you can modify less variables to custom theme. - There are some basic variables below, all available variables could be found in [var.less](https://github.com/youzan/vant/blob/dev/src/style/var.less)。 ```less +// Color Palette +@black: #000; +@white: #fff; +@gray-1: #f7f8fa; +@gray-2: #f2f3f5; +@gray-3: #ebedf0; +@gray-4: #dcdee0; +@gray-5: #c8c9cc; +@gray-6: #969799; +@gray-7: #646566; +@gray-8: #323233; +@red: #ee0a24; +@blue: #1989fa; +@orange: #ff976a; +@orange-dark: #ed6a0c; +@orange-light: #fffbe8; +@green: #07c160; + +// Gradient Colors +@gradient-red: linear-gradient(to right, #ff6034, #ee0a24); +@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917); + // Component Colors -@text-color: #323233; -@border-color: #ebedf0; -@active-color: #f2f3f5; -@background-color: #f7f8fa; +@text-color: @gray-8; +@active-color: @gray-2; +@active-opacity: 0.7; +@disabled-opacity: 0.5; +@background-color: @gray-1; @background-color-light: #fafafa; +@text-link-color: #576b95; + +// Padding +@padding-base: 4px; +@padding-xs: @padding-base * 2; +@padding-sm: @padding-base * 3; +@padding-md: @padding-base * 4; +@padding-lg: @padding-base * 6; +@padding-xl: @padding-base * 8; + +// Font +@font-size-xs: 10px; +@font-size-sm: 12px; +@font-size-md: 14px; +@font-size-lg: 16px; +@font-weight-bold: 500; +@line-height-xs: 14px; +@line-height-sm: 18px; +@line-height-md: 20px; +@line-height-lg: 22px; +@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', + Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', + 'Microsoft Yahei', sans-serif; +@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, + sans-serif; + +// Animation +@animation-duration-base: 0.3s; +@animation-duration-fast: 0.2s; +@animation-timing-function-enter: ease-out; +@animation-timing-function-leave: ease-in; + +// Border +@border-color: @gray-3; +@border-width-base: 1px; +@border-radius-sm: 2px; +@border-radius-md: 4px; +@border-radius-lg: 8px; +@border-radius-max: 999px; ``` ## How to custom theme diff --git a/docs/markdown/theme.zh-CN.md b/docs/markdown/theme.zh-CN.md index bc62ba87f..493423fc3 100644 --- a/docs/markdown/theme.zh-CN.md +++ b/docs/markdown/theme.zh-CN.md @@ -2,7 +2,7 @@ ### 介绍 -Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以使用下面提供的方法。 +Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以按照本文档进行主题定制。 ### 示例工程 @@ -12,15 +12,77 @@ Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用 Vant 使用了 [Less](http://lesscss.org/) 对样式进行预处理，并内置了一些样式变量，通过替换样式变量即可定制你自己需要的主题。 -下面是一些基本的样式变量，所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant/blob/dev/src/style/var.less)。 +下面是所有的基础样式变量，组件的颜色变量请参考各个组件的文档或[配置文件](https://github.com/youzan/vant/blob/dev/src/style/var.less)。 ```less +// Color Palette +@black: #000; +@white: #fff; +@gray-1: #f7f8fa; +@gray-2: #f2f3f5; +@gray-3: #ebedf0; +@gray-4: #dcdee0; +@gray-5: #c8c9cc; +@gray-6: #969799; +@gray-7: #646566; +@gray-8: #323233; +@red: #ee0a24; +@blue: #1989fa; +@orange: #ff976a; +@orange-dark: #ed6a0c; +@orange-light: #fffbe8; +@green: #07c160; + +// Gradient Colors +@gradient-red: linear-gradient(to right, #ff6034, #ee0a24); +@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917); + // Component Colors -@text-color: #323233; -@border-color: #ebedf0; -@active-color: #f2f3f5; -@background-color: #f7f8fa; +@text-color: @gray-8; +@active-color: @gray-2; +@active-opacity: 0.7; +@disabled-opacity: 0.5; +@background-color: @gray-1; @background-color-light: #fafafa; +@text-link-color: #576b95; + +// Padding +@padding-base: 4px; +@padding-xs: @padding-base * 2; +@padding-sm: @padding-base * 3; +@padding-md: @padding-base * 4; +@padding-lg: @padding-base * 6; +@padding-xl: @padding-base * 8; + +// Font +@font-size-xs: 10px; +@font-size-sm: 12px; +@font-size-md: 14px; +@font-size-lg: 16px; +@font-weight-bold: 500; +@line-height-xs: 14px; +@line-height-sm: 18px; +@line-height-md: 20px; +@line-height-lg: 22px; +@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', + Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', + 'Microsoft Yahei', sans-serif; +@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial, + sans-serif; + +// Animation +@animation-duration-base: 0.3s; +@animation-duration-fast: 0.2s; +@animation-timing-function-enter: ease-out; +@animation-timing-function-leave: ease-in; + +// Border +@border-color: @gray-3; +@border-width-base: 1px; +@border-radius-sm: 2px; +@border-radius-md: 4px; +@border-radius-lg: 8px; +@border-radius-max: 999px; ``` ## 定制方法 diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md index ec4ea5312..a8b432927 100644 --- a/src/action-sheet/README.md +++ b/src/action-sheet/README.md @@ -197,3 +197,32 @@ export default { | --------------------- | ------------------ | | default | Custom content | | description `v2.10.4` | Custom description | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| -------------------------------------- | ------------------- | ----------- | +| @action-sheet-max-height | `80%` | - | +| @action-sheet-header-height | `48px` | - | +| @action-sheet-header-font-size | `@font-size-lg` | - | +| @action-sheet-description-color | `@gray-6` | - | +| @action-sheet-description-font-size | `@font-size-md` | - | +| @action-sheet-description-line-height | `@line-height-md` | - | +| @action-sheet-item-background | `@white` | - | +| @action-sheet-item-font-size | `@font-size-lg` | - | +| @action-sheet-item-line-height | `@line-height-lg` | - | +| @action-sheet-item-text-color | `@text-color` | - | +| @action-sheet-item-disabled-text-color | `@gray-5` | - | +| @action-sheet-subname-color | `@gray-6` | - | +| @action-sheet-subname-font-size | `@font-size-sm` | - | +| @action-sheet-subname-line-height | `@line-height-sm` | - | +| @action-sheet-close-icon-size | `22px` | - | +| @action-sheet-close-icon-color | `@gray-5` | - | +| @action-sheet-close-icon-active-color | `@gray-6` | - | +| @action-sheet-close-icon-padding | `0 @padding-md` | - | +| @action-sheet-cancel-text-color | `@gray-7` | - | +| @action-sheet-cancel-padding-top | `@padding-xs` | - | +| @action-sheet-cancel-padding-color | `@background-color` | - | +| @action-sheet-loading-icon-size | `22px` | - | diff --git a/src/action-sheet/README.zh-CN.md b/src/action-sheet/README.zh-CN.md index 6b9bfbb60..1d1d0a56b 100644 --- a/src/action-sheet/README.zh-CN.md +++ b/src/action-sheet/README.zh-CN.md @@ -206,6 +206,35 @@ export default { | default | 自定义面板的展示内容 | | description `v2.10.4` | 自定义描述文案 | +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| -------------------------------------- | ------------------- | ---- | +| @action-sheet-max-height | `80%` | - | +| @action-sheet-header-height | `48px` | - | +| @action-sheet-header-font-size | `@font-size-lg` | - | +| @action-sheet-description-color | `@gray-6` | - | +| @action-sheet-description-font-size | `@font-size-md` | - | +| @action-sheet-description-line-height | `@line-height-md` | - | +| @action-sheet-item-background | `@white` | - | +| @action-sheet-item-font-size | `@font-size-lg` | - | +| @action-sheet-item-line-height | `@line-height-lg` | - | +| @action-sheet-item-text-color | `@text-color` | - | +| @action-sheet-item-disabled-text-color | `@gray-5` | - | +| @action-sheet-subname-color | `@gray-6` | - | +| @action-sheet-subname-font-size | `@font-size-sm` | - | +| @action-sheet-subname-line-height | `@line-height-sm` | - | +| @action-sheet-close-icon-size | `22px` | - | +| @action-sheet-close-icon-color | `@gray-5` | - | +| @action-sheet-close-icon-active-color | `@gray-6` | - | +| @action-sheet-close-icon-padding | `0 @padding-md` | - | +| @action-sheet-cancel-text-color | `@gray-7` | - | +| @action-sheet-cancel-padding-top | `@padding-xs` | - | +| @action-sheet-cancel-padding-color | `@background-color` | - | +| @action-sheet-loading-icon-size | `22px` | - | + ## 常见问题 ### 引入时提示 dependencies not found？ diff --git a/src/address-edit/README.md b/src/address-edit/README.md index 525fc65bb..6a561d70d 100644 --- a/src/address-edit/README.md +++ b/src/address-edit/README.md @@ -143,3 +143,15 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get AddressEdit instance and call in ### Area Data Structure Please refer to [Area](#/en-US/area) component。 + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| --- | --- | --- | +| @address-edit-padding | `@padding-sm` | - | +| @address-edit-buttons-padding | `@padding-xl @padding-base` | - | +| @address-edit-button-margin-bottom | `@padding-sm` | - | +| @address-edit-detail-finish-color | `@blue` | - | +| @address-edit-detail-finish-font-size | `@font-size-sm` | - | diff --git a/src/address-edit/README.zh-CN.md b/src/address-edit/README.zh-CN.md index 47e3c6ccd..3d74494b3 100644 --- a/src/address-edit/README.zh-CN.md +++ b/src/address-edit/README.zh-CN.md @@ -149,3 +149,15 @@ export default { ### 省市县列表数据格式 请参考 [Area](#/zh-CN/area) 组件。 + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ------------------------------------- | --------------------------- | ---- | +| @address-edit-padding | `@padding-sm` | - | +| @address-edit-buttons-padding | `@padding-xl @padding-base` | - | +| @address-edit-button-margin-bottom | `@padding-sm` | - | +| @address-edit-detail-finish-color | `@blue` | - | +| @address-edit-detail-finish-font-size | `@font-size-sm` | - | diff --git a/src/address-list/README.md b/src/address-list/README.md index 51a2ac848..f6a7448ae 100644 --- a/src/address-list/README.md +++ b/src/address-list/README.md @@ -110,3 +110,23 @@ export default { | default | Custom content after list | - | | top | Custom content before list | - | | item-bottom `v2.5.0` | Custom content after list item | item | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| --- | --- | --- | +| @address-list-padding | `@padding-sm @padding-sm 80px` | - | +| @address-list-disabled-text-color | `@gray-6` | - | +| @address-list-disabled-text-padding | `@padding-base * 5 0 @padding-md` | - | +| @address-list-disabled-text-font-size | `@font-size-md` | - | +| @address-list-disabled-text-line-height | `@line-height-md` | - | +| @address-list-add-button-z-index | `999` | - | +| @address-list-item-padding | `@padding-sm` | - | +| @address-list-item-text-color | `@text-color` | - | +| @address-list-item-disabled-text-color | `@gray-5` | - | +| @address-list-item-font-size | `13px` | - | +| @address-list-item-line-height | `@line-height-sm` | - | +| @address-list-item-radio-icon-color | `@red` | - | +| @address-list-edit-icon-size | `20px` | - | diff --git a/src/address-list/README.zh-CN.md b/src/address-list/README.zh-CN.md index 69f26d023..9c17aecd3 100644 --- a/src/address-list/README.zh-CN.md +++ b/src/address-list/README.zh-CN.md @@ -114,3 +114,23 @@ export default { | default | 在列表下方插入内容 | - | | top | 在顶部插入内容 | - | | item-bottom `v2.5.0` | 在列表项底部插入内容 | 列表项的值 | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| @address-list-padding | `@padding-sm @padding-sm 80px` | - | +| @address-list-disabled-text-color | `@gray-6` | - | +| @address-list-disabled-text-padding | `@padding-base * 5 0 @padding-md` | - | +| @address-list-disabled-text-font-size | `@font-size-md` | - | +| @address-list-disabled-text-line-height | `@line-height-md` | - | +| @address-list-add-button-z-index | `999` | - | +| @address-list-item-padding | `@padding-sm` | - | +| @address-list-item-text-color | `@text-color` | - | +| @address-list-item-disabled-text-color | `@gray-5` | - | +| @address-list-item-font-size | `13px` | - | +| @address-list-item-line-height | `@line-height-sm` | - | +| @address-list-item-radio-icon-color | `@red` | - | +| @address-list-edit-icon-size | `20px` | - | diff --git a/src/badge/README.md b/src/badge/README.md index 00f8e3952..dc926d836 100644 --- a/src/badge/README.md +++ b/src/badge/README.md @@ -75,3 +75,20 @@ Vue.use(Badge); | Name | Description | | ------- | ------------ | | default | Default slot | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| --- | --- | --- | +| @badge-size | `16px` | - | +| @badge-color | `@white` | - | +| @badge-padding | `0 3px` | - | +| @badge-font-size | `@font-size-sm` | - | +| @badge-font-weight | `@font-weight-bold` | - | +| @badge-border-width | `@border-width-base` | - | +| @badge-background-color | `@red` | - | +| @badge-dot-color | `@red` | - | +| @badge-dot-size | `8px` | - | +| @badge-font-family | `-apple-system-font, Helvetica Neue, Arial, sans-serif` | - | diff --git a/src/badge/README.zh-CN.md b/src/badge/README.zh-CN.md index b6c5d4fe8..67fbac954 100644 --- a/src/badge/README.zh-CN.md +++ b/src/badge/README.zh-CN.md @@ -88,3 +88,20 @@ Vue.use(Badge); | ------- | ---------------- | | default | 徽标包裹的子元素 | | content | 自定义徽标内容 | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| @badge-size | `16px` | - | +| @badge-color | `@white` | - | +| @badge-padding | `0 3px` | - | +| @badge-font-size | `@font-size-sm` | - | +| @badge-font-weight | `@font-weight-bold` | - | +| @badge-border-width | `@border-width-base` | - | +| @badge-background-color | `@red` | - | +| @badge-dot-color | `@red` | - | +| @badge-dot-size | `8px` | - | +| @badge-font-family | `-apple-system-font, Helvetica Neue, Arial, sans-serif` | - | diff --git a/src/button/README.md b/src/button/README.md index 82e5b7ae1..81fd6635a 100644 --- a/src/button/README.md +++ b/src/button/README.md @@ -140,3 +140,39 @@ Vue.use(Button); | ----------------- | ------------------- | | default | Default slot | | loading `v2.10.1` | Custom loading icon | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| -------------------------------- | -------------------- | ----------- | +| @button-mini-height | `24px` | - | +| @button-mini-font-size | `@font-size-xs` | - | +| @button-small-height | `32px` | - | +| @button-small-font-size | `@font-size-sm` | - | +| @button-normal-font-size | `@font-size-md` | - | +| @button-large-height | `50px` | - | +| @button-default-height | `44px` | - | +| @button-default-line-height | `1.2` | - | +| @button-default-font-size | `@font-size-lg` | - | +| @button-default-color | `@text-color` | - | +| @button-default-background-color | `@white` | - | +| @button-default-border-color | `@border-color` | - | +| @button-primary-color | `@white` | - | +| @button-primary-background-color | `@green` | - | +| @button-primary-border-color | `@green` | - | +| @button-info-color | `@white` | - | +| @button-info-background-color | `@blue` | - | +| @button-info-border-color | `@blue` | - | +| @button-danger-color | `@white` | - | +| @button-danger-background-color | `@red` | - | +| @button-danger-border-color | `@red` | - | +| @button-warning-color | `@white` | - | +| @button-warning-background-color | `@orange` | - | +| @button-warning-border-color | `@orange` | - | +| @button-border-width | `@border-width-base` | - | +| @button-border-radius | `@border-radius-sm` | - | +| @button-round-border-radius | `@border-radius-max` | - | +| @button-plain-background-color | `@white` | - | +| @button-disabled-opacity | `@disabled-opacity` | - | diff --git a/src/button/README.zh-CN.md b/src/button/README.zh-CN.md index d37c668ca..4da310cfb 100644 --- a/src/button/README.zh-CN.md +++ b/src/button/README.zh-CN.md @@ -167,3 +167,39 @@ Vue.use(Button); | ----------------- | -------------- | | default | 按钮内容 | | loading `v2.10.1` | 自定义加载图标 | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| -------------------------------- | -------------------- | ---- | +| @button-mini-height | `24px` | - | +| @button-mini-font-size | `@font-size-xs` | - | +| @button-small-height | `32px` | - | +| @button-small-font-size | `@font-size-sm` | - | +| @button-normal-font-size | `@font-size-md` | - | +| @button-large-height | `50px` | - | +| @button-default-height | `44px` | - | +| @button-default-line-height | `1.2` | - | +| @button-default-font-size | `@font-size-lg` | - | +| @button-default-color | `@text-color` | - | +| @button-default-background-color | `@white` | - | +| @button-default-border-color | `@border-color` | - | +| @button-primary-color | `@white` | - | +| @button-primary-background-color | `@green` | - | +| @button-primary-border-color | `@green` | - | +| @button-info-color | `@white` | - | +| @button-info-background-color | `@blue` | - | +| @button-info-border-color | `@blue` | - | +| @button-danger-color | `@white` | - | +| @button-danger-background-color | `@red` | - | +| @button-danger-border-color | `@red` | - | +| @button-warning-color | `@white` | - | +| @button-warning-background-color | `@orange` | - | +| @button-warning-border-color | `@orange` | - | +| @button-border-width | `@border-width-base` | - | +| @button-border-radius | `@border-radius-sm` | - | +| @button-round-border-radius | `@border-radius-max` | - | +| @button-plain-background-color | `@white` | - | +| @button-disabled-opacity | `@disabled-opacity` | - | diff --git a/src/calendar/README.md b/src/calendar/README.md index 9a812052f..c401bd61b 100644 --- a/src/calendar/README.md +++ b/src/calendar/README.md @@ -317,3 +317,35 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Calendar instance and call insta | Name | Description | Attribute | Return value | | ----- | ----------------------------------- | --------- | ------------ | | reset | Reset selected date to default date | - | - | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| --- | --- | --- | +| @calendar-background-color | `@white` | - | +| @calendar-popup-height | `80%` | - | +| @calendar-header-box-shadow | `0 2px 10px rgba(125, 126, 128, 0.16)` | - | +| @calendar-header-title-height | `44px` | - | +| @calendar-header-title-font-size | `@font-size-lg` | - | +| @calendar-header-subtitle-font-size | `@font-size-md` | - | +| @calendar-weekdays-height | `30px` | - | +| @calendar-weekdays-font-size | `@font-size-sm` | - | +| @calendar-month-title-font-size | `@font-size-md` | - | +| @calendar-month-mark-color | `fade(@gray-2, 80%)` | - | +| @calendar-month-mark-font-size | `160px` | - | +| @calendar-day-height | `64px` | - | +| @calendar-day-font-size | `@font-size-lg` | - | +| @calendar-range-edge-color | `@white` | - | +| @calendar-range-edge-background-color | `@red` | - | +| @calendar-range-middle-color | `@red` | - | +| @calendar-range-middle-background-opacity | `0.1` | - | +| @calendar-selected-day-size | `54px` | - | +| @calendar-selected-day-color | `@white` | - | +| @calendar-info-font-size | `@font-size-xs` | - | +| @calendar-info-line-height | `@line-height-xs` | - | +| @calendar-selected-day-background-color | `@red` | - | +| @calendar-day-disabled-color | `@gray-5` | - | +| @calendar-confirm-button-height | `36px` | - | +| @calendar-confirm-button-margin | `7px 0` | - | diff --git a/src/calendar/README.zh-CN.md b/src/calendar/README.zh-CN.md index d8c5d1292..e02e25010 100644 --- a/src/calendar/README.zh-CN.md +++ b/src/calendar/README.zh-CN.md @@ -322,6 +322,38 @@ export default { | ------ | ---------------------- | ---- | ------ | | reset | 重置选中的日期到默认值 | - | - | +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| @calendar-background-color | `@white` | - | +| @calendar-popup-height | `80%` | - | +| @calendar-header-box-shadow | `0 2px 10px rgba(125, 126, 128, 0.16)` | - | +| @calendar-header-title-height | `44px` | - | +| @calendar-header-title-font-size | `@font-size-lg` | - | +| @calendar-header-subtitle-font-size | `@font-size-md` | - | +| @calendar-weekdays-height | `30px` | - | +| @calendar-weekdays-font-size | `@font-size-sm` | - | +| @calendar-month-title-font-size | `@font-size-md` | - | +| @calendar-month-mark-color | `fade(@gray-2, 80%)` | - | +| @calendar-month-mark-font-size | `160px` | - | +| @calendar-day-height | `64px` | - | +| @calendar-day-font-size | `@font-size-lg` | - | +| @calendar-range-edge-color | `@white` | - | +| @calendar-range-edge-background-color | `@red` | - | +| @calendar-range-middle-color | `@red` | - | +| @calendar-range-middle-background-opacity | `0.1` | - | +| @calendar-selected-day-size | `54px` | - | +| @calendar-selected-day-color | `@white` | - | +| @calendar-info-font-size | `@font-size-xs` | - | +| @calendar-info-line-height | `@line-height-xs` | - | +| @calendar-selected-day-background-color | `@red` | - | +| @calendar-day-disabled-color | `@gray-5` | - | +| @calendar-confirm-button-height | `36px` | - | +| @calendar-confirm-button-margin | `7px 0` | - | + ## 常见问题 ### 在 iOS 系统上初始化组件失败？ diff --git a/src/card/README.md b/src/card/README.md index 37efd5129..59f656e2f 100644 --- a/src/card/README.md +++ b/src/card/README.md @@ -100,3 +100,26 @@ Use slot to custom content. | tag | Custom thumb tag | | tags | Custom tags | | footer | Custom footer | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| ----------------------------- | ---------------------------- | ----------- | +| @card-padding | `@padding-xs @padding-md` | - | +| @card-font-size | `@font-size-sm` | - | +| @card-text-color | `@text-color` | - | +| @card-background-color | `@background-color-light` | - | +| @card-thumb-size | `88px` | - | +| @card-thumb-border-radius | `@border-radius-lg` | - | +| @card-title-line-height | `16px` | - | +| @card-desc-color | `@gray-7` | - | +| @card-desc-line-height | `@line-height-md` | - | +| @card-price-color | `@gray-8` | - | +| @card-origin-price-color | `@gray-6` | - | +| @card-num-color | `@gray-6` | - | +| @card-origin-price-font-size | `@font-size-xs` | - | +| @card-price-font-size | `@font-size-sm` | - | +| @card-price-integer-font-size | `@font-size-lg` | - | +| @card-price-font-family | `@price-integer-font-family` | - | diff --git a/src/card/README.zh-CN.md b/src/card/README.zh-CN.md index aa5fdac7f..1a4555c82 100644 --- a/src/card/README.zh-CN.md +++ b/src/card/README.zh-CN.md @@ -106,3 +106,26 @@ Vue.use(Card); | tag | 自定义图片角标 | | tags | 自定义描述下方标签区域 | | footer | 自定义右下角内容 | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ----------------------------- | ---------------------------- | ---- | +| @card-padding | `@padding-xs @padding-md` | - | +| @card-font-size | `@font-size-sm` | - | +| @card-text-color | `@text-color` | - | +| @card-background-color | `@background-color-light` | - | +| @card-thumb-size | `88px` | - | +| @card-thumb-border-radius | `@border-radius-lg` | - | +| @card-title-line-height | `16px` | - | +| @card-desc-color | `@gray-7` | - | +| @card-desc-line-height | `@line-height-md` | - | +| @card-price-color | `@gray-8` | - | +| @card-origin-price-color | `@gray-6` | - | +| @card-num-color | `@gray-6` | - | +| @card-origin-price-font-size | `@font-size-xs` | - | +| @card-price-font-size | `@font-size-sm` | - | +| @card-price-integer-font-size | `@font-size-lg` | - | +| @card-price-font-family | `@price-integer-font-family` | - | diff --git a/src/cell/README.md b/src/cell/README.md index 07f3c7931..b8b8968dd 100644 --- a/src/cell/README.md +++ b/src/cell/README.md @@ -174,3 +174,34 @@ Vue.use(CellGroup); | label | Custom label | | right-icon | Custom right icon | | extra | Custom extra content on the right | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| --- | --- | --- | +| @cell-font-size | `@font-size-md` | - | +| @cell-line-height | `24px` | - | +| @cell-vertical-padding | `10px` | - | +| @cell-horizontal-padding | `@padding-md` | - | +| @cell-text-color | `@text-color` | - | +| @cell-background-color | `@white` | - | +| @cell-border-color | `@border-color` | - | +| @cell-active-color | `@active-color` | - | +| @cell-required-color | `@red` | - | +| @cell-label-color | `@gray-6` | - | +| @cell-label-font-size | `@font-size-sm` | - | +| @cell-label-line-height | `@line-height-sm` | - | +| @cell-label-margin-top | `@padding-base` | - | +| @cell-value-color | `@gray-6` | - | +| @cell-icon-size | `16px` | - | +| @cell-right-icon-color | `@gray-6` | - | +| @cell-large-vertical-padding | `@padding-sm` | - | +| @cell-large-title-font-size | `@font-size-lg` | - | +| @cell-large-label-font-size | `@font-size-md` | - | +| @cell-group-background-color | `@white` | - | +| @cell-group-title-color | `@gray-6` | - | +| @cell-group-title-padding | `@padding-md @padding-md @padding-xs` | - | +| @cell-group-title-font-size | `@font-size-md` | - | +| @cell-group-title-line-height | `16px` | - | diff --git a/src/cell/README.zh-CN.md b/src/cell/README.zh-CN.md index 0d208b202..97963ae09 100644 --- a/src/cell/README.zh-CN.md +++ b/src/cell/README.zh-CN.md @@ -181,3 +181,34 @@ Vue.use(CellGroup); | icon | 自定义左侧图标 | | right-icon | 自定义右侧按钮，默认为`arrow` | | extra | 自定义单元格最右侧的额外内容 | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ----------------------------- | ------------------------------------- | ---- | +| @cell-font-size | `@font-size-md` | - | +| @cell-line-height | `24px` | - | +| @cell-vertical-padding | `10px` | - | +| @cell-horizontal-padding | `@padding-md` | - | +| @cell-text-color | `@text-color` | - | +| @cell-background-color | `@white` | - | +| @cell-border-color | `@border-color` | - | +| @cell-active-color | `@active-color` | - | +| @cell-required-color | `@red` | - | +| @cell-label-color | `@gray-6` | - | +| @cell-label-font-size | `@font-size-sm` | - | +| @cell-label-line-height | `@line-height-sm` | - | +| @cell-label-margin-top | `@padding-base` | - | +| @cell-value-color | `@gray-6` | - | +| @cell-icon-size | `16px` | - | +| @cell-right-icon-color | `@gray-6` | - | +| @cell-large-vertical-padding | `@padding-sm` | - | +| @cell-large-title-font-size | `@font-size-lg` | - | +| @cell-large-label-font-size | `@font-size-md` | - | +| @cell-group-background-color | `@white` | - | +| @cell-group-title-color | `@gray-6` | - | +| @cell-group-title-padding | `@padding-md @padding-md @padding-xs` | - | +| @cell-group-title-font-size | `@font-size-md` | - | +| @cell-group-title-line-height | `16px` | - | diff --git a/src/checkbox/README.md b/src/checkbox/README.md index e32bbbede..493204b62 100644 --- a/src/checkbox/README.md +++ b/src/checkbox/README.md @@ -268,3 +268,19 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Checkbox instance and call insta | Name | Description | Attribute | Return value | | ------ | ------------------- | ------------------- | ------------ | | toggle | Toggle check status | _checked?: boolean_ | - | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| --- | --- | --- | +| @checkbox-size | `20px` | - | +| @checkbox-border-color | `@gray-5` | - | +| @checkbox-transition-duration | `@animation-duration-fast` | - | +| @checkbox-label-margin | `@padding-xs` | - | +| @checkbox-label-color | `@text-color` | - | +| @checkbox-checked-icon-color | `@blue` | - | +| @checkbox-disabled-icon-color | `@gray-5` | - | +| @checkbox-disabled-label-color | `@gray-5` | - | +| @checkbox-disabled-background-color | `@border-color` | - | diff --git a/src/checkbox/README.zh-CN.md b/src/checkbox/README.zh-CN.md index bb0f2d352..4d89936fa 100644 --- a/src/checkbox/README.zh-CN.md +++ b/src/checkbox/README.zh-CN.md @@ -292,3 +292,19 @@ export default { | 方法名 | 说明 | 参数 | 返回值 | | --- | --- | --- | --- | | toggle | 切换选中状态，传`true`为选中，`false`为取消选中，不传参为取反 | _checked?: boolean_ | - | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ----------------------------------- | -------------------------- | ---- | +| @checkbox-size | `20px` | - | +| @checkbox-border-color | `@gray-5` | - | +| @checkbox-transition-duration | `@animation-duration-fast` | - | +| @checkbox-label-margin | `@padding-xs` | - | +| @checkbox-label-color | `@text-color` | - | +| @checkbox-checked-icon-color | `@blue` | - | +| @checkbox-disabled-icon-color | `@gray-5` | - | +| @checkbox-disabled-label-color | `@gray-5` | - | +| @checkbox-disabled-background-color | `@border-color` | - | diff --git a/src/circle/README.md b/src/circle/README.md index aa152c2b7..b18c05021 100644 --- a/src/circle/README.md +++ b/src/circle/README.md @@ -124,3 +124,14 @@ export default { | Name | Description | | ------- | ------------------- | | default | custom text content | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| ------------------------ | ------------------- | ----------- | +| @circle-text-color | `@text-color` | - | +| @circle-text-font-weight | `@font-weight-bold` | - | +| @circle-text-font-size | `@font-size-md` | - | +| @circle-text-line-height | `@line-height-md` | - | diff --git a/src/circle/README.zh-CN.md b/src/circle/README.zh-CN.md index 2b788652d..f6ec957fd 100644 --- a/src/circle/README.zh-CN.md +++ b/src/circle/README.zh-CN.md @@ -135,3 +135,14 @@ export default { | 名称 | 说明 | | ------- | -------------- | | default | 自定义文字内容 | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ------------------------ | ------------------- | ---- | +| @circle-text-color | `@text-color` | - | +| @circle-text-font-weight | `@font-weight-bold` | - | +| @circle-text-font-size | `@font-size-md` | - | +| @circle-text-line-height | `@line-height-md` | - | diff --git a/src/collapse/README.md b/src/collapse/README.md index 20f2cfbbe..715f3f322 100644 --- a/src/collapse/README.md +++ b/src/collapse/README.md @@ -148,3 +148,17 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get CollapseItem instance and call i | Name | Description | Attribute | Return value | | --- | --- | --- | --- | | toggle `v2.10.9` | Toggle expanded status | _expanded: boolean_ | - | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| --- | --- | --- | +| @collapse-item-transition-duration | `@animation-duration-base` | - | +| @collapse-item-content-padding | `@padding-sm @padding-md` | - | +| @collapse-item-content-font-size | `@font-size-md` | - | +| @collapse-item-content-line-height | `1.5` | - | +| @collapse-item-content-text-color | `@gray-6` | - | +| @collapse-item-content-background-color | `@white` | - | +| @collapse-item-title-disabled-color | `@gray-5` | - | diff --git a/src/collapse/README.zh-CN.md b/src/collapse/README.zh-CN.md index e45f0f298..663a7d4ca 100644 --- a/src/collapse/README.zh-CN.md +++ b/src/collapse/README.zh-CN.md @@ -150,3 +150,17 @@ export default { | 方法名 | 说明 | 参数 | 返回值 | | --- | --- | --- | --- | | toggle `v2.10.9` | 切换面试展开状态，传 `true` 为展开，`false` 为收起，不传参为切换 | _expand?: boolean_ | - | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| --------------------------------------- | -------------------------- | ---- | +| @collapse-item-transition-duration | `@animation-duration-base` | - | +| @collapse-item-content-padding | `@padding-sm @padding-md` | - | +| @collapse-item-content-font-size | `@font-size-md` | - | +| @collapse-item-content-line-height | `1.5` | - | +| @collapse-item-content-text-color | `@gray-6` | - | +| @collapse-item-content-background-color | `@white` | - | +| @collapse-item-title-disabled-color | `@gray-5` | - | diff --git a/src/contact-card/README.md b/src/contact-card/README.md index dcf8559f2..12fb8907d 100644 --- a/src/contact-card/README.md +++ b/src/contact-card/README.md @@ -87,3 +87,14 @@ export default { | Event | Description | Arguments | | ----- | --------------------------------- | -------------- | | click | Emitted when component is clicked | _event: Event_ | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| ------------------------------- | ----------------- | ----------- | +| @contact-card-padding | `@padding-md` | - | +| @contact-card-add-icon-size | `40px` | - | +| @contact-card-add-icon-color | `@blue` | - | +| @contact-card-value-line-height | `@line-height-md` | - | diff --git a/src/contact-card/README.zh-CN.md b/src/contact-card/README.zh-CN.md index 6b3f994b9..d085dfaea 100644 --- a/src/contact-card/README.zh-CN.md +++ b/src/contact-card/README.zh-CN.md @@ -86,3 +86,14 @@ export default { | 事件名 | 说明 | 回调参数 | | ------ | ---------- | -------------- | | click | 点击时触发 | _event: Event_ | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ------------------------------- | ----------------- | ---- | +| @contact-card-padding | `@padding-md` | - | +| @contact-card-add-icon-size | `40px` | - | +| @contact-card-add-icon-color | `@blue` | - | +| @contact-card-value-line-height | `@line-height-md` | - | diff --git a/src/contact-edit/README.md b/src/contact-edit/README.md index b569124c2..605ff86bb 100644 --- a/src/contact-edit/README.md +++ b/src/contact-edit/README.md @@ -71,3 +71,16 @@ export default { | ---- | ----------- | -------- | | name | Name | _string_ | | tel | Phone | _string_ | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| ---------------------------------- | ------------------- | ----------- | +| @contact-edit-padding | `@padding-md` | - | +| @contact-edit-fields-radius | `@border-radius-md` | - | +| @contact-edit-buttons-padding | `@padding-xl 0` | - | +| @contact-edit-button-margin-bottom | `@padding-sm` | - | +| @contact-edit-button-font-size | `16px` | - | +| @contact-edit-field-label-width | `4.1em` | - | diff --git a/src/contact-edit/README.zh-CN.md b/src/contact-edit/README.zh-CN.md index 1e24b2fca..89a2eee0c 100644 --- a/src/contact-edit/README.zh-CN.md +++ b/src/contact-edit/README.zh-CN.md @@ -75,3 +75,16 @@ export default { | ---- | ------------ | ------------------ | | name | 联系人姓名 | _string_ | | tel | 联系人手机号 | _number \| string_ | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ---------------------------------- | ------------------- | ---- | +| @contact-edit-padding | `@padding-md` | - | +| @contact-edit-fields-radius | `@border-radius-md` | - | +| @contact-edit-buttons-padding | `@padding-xl 0` | - | +| @contact-edit-button-margin-bottom | `@padding-sm` | - | +| @contact-edit-button-font-size | `16px` | - | +| @contact-edit-field-label-width | `4.1em` | - | diff --git a/src/contact-list/README.md b/src/contact-list/README.md index 369370085..a6bd4db35 100644 --- a/src/contact-list/README.md +++ b/src/contact-list/README.md @@ -87,3 +87,13 @@ export default { | name | Name | _string_ | | tel | Phone | _string_ | | isDefault | Is default contact | _boolean_ | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| -------------------------------- | ------------- | ----------- | +| @contact-list-edit-icon-size | `16px` | - | +| @contact-list-add-button-z-index | `999` | - | +| @contact-list-item-padding | `@padding-md` | - | diff --git a/src/contact-list/README.zh-CN.md b/src/contact-list/README.zh-CN.md index 9be5cf312..b59c6cb97 100644 --- a/src/contact-list/README.zh-CN.md +++ b/src/contact-list/README.zh-CN.md @@ -91,3 +91,13 @@ export default { | name | 联系人姓名 | _string_ | | tel | 联系人手机号 | _number \| string_ | | isDefault | 是否为默认联系人 | _boolean_ | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| -------------------------------- | ------------- | ---- | +| @contact-list-edit-icon-size | `16px` | - | +| @contact-list-add-button-z-index | `999` | - | +| @contact-list-item-padding | `@padding-md` | - | diff --git a/src/count-down/README.md b/src/count-down/README.md index b8402f0de..e33005c92 100644 --- a/src/count-down/README.md +++ b/src/count-down/README.md @@ -163,3 +163,13 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get CountDown instance and call inst | start | Start count down | - | - | | pause | Pause count down | - | - | | reset | Reset count down | - | - | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| ----------------------- | ----------------- | ----------- | +| @count-down-text-color | `@text-color` | - | +| @count-down-font-size | `@font-size-md` | - | +| @count-down-line-height | `@line-height-md` | - | diff --git a/src/count-down/README.zh-CN.md b/src/count-down/README.zh-CN.md index e6bab5337..8fd585a06 100644 --- a/src/count-down/README.zh-CN.md +++ b/src/count-down/README.zh-CN.md @@ -176,7 +176,17 @@ export default { | --- | --- | --- | --- | | start | 开始倒计时 | - | - | | pause | 暂停倒计时 | - | - | -| reset | 重设倒计时，若`auto-start`为`true`，重设后会自动开始倒计时 | - | - | +| reset | 重设倒计时，若 `auto-start` 为 `true`，重设后会自动开始倒计时 | - | - | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ----------------------- | ----------------- | ---- | +| @count-down-text-color | `@text-color` | - | +| @count-down-font-size | `@font-size-md` | - | +| @count-down-line-height | `@line-height-md` | - | ## 常见问题 diff --git a/src/coupon-list/README.md b/src/coupon-list/README.md index 24a706b65..0bcc6039e 100644 --- a/src/coupon-list/README.md +++ b/src/coupon-list/README.md @@ -126,3 +126,34 @@ export default { | value | Value | _number_ | | valueDesc | Value Text | _string_ | | unitDesc | Unit Text | _string_ | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| --- | --- | --- | +| @coupon-margin | `0 @padding-sm @padding-sm` | - | +| @coupon-content-height | `84px` | - | +| @coupon-content-padding | `14px 0` | - | +| @coupon-background-color | `@white` | - | +| @coupon-active-background-color | `@active-color` | - | +| @coupon-border-radius | `@border-radius-lg` | - | +| @coupon-box-shadow | `0 0 4px rgba(0, 0, 0, 0.1)` | - | +| @coupon-head-width | `96px` | - | +| @coupon-amount-color | `@red` | - | +| @coupon-amount-font-size | `30px` | - | +| @coupon-currency-font-size | `40%` | - | +| @coupon-name-font-size | `@font-size-md` | - | +| @coupon-disabled-text-color | `@gray-6` | - | +| @coupon-description-padding | `@padding-xs @padding-md` | - | +| @coupon-description-border-color | `@border-color` | - | +| @coupon-list-background-color | `@background-color` | - | +| @coupon-list-field-padding | `5px 0 5px @padding-md` | - | +| @coupon-list-exchange-button-height | `32px` | - | +| @coupon-list-close-button-height | `40px` | - | +| @coupon-list-empty-image-size | `200px` | - | +| @coupon-list-empty-tip-color | `@gray-6` | - | +| @coupon-list-empty-tip-font-size | `@font-size-md` | - | +| @coupon-list-empty-tip-line-height | `@line-height-md` | - | +| @coupon-cell-selected-text-color | `@text-color` | - | diff --git a/src/coupon-list/README.zh-CN.md b/src/coupon-list/README.zh-CN.md index a5b496288..23e7aba10 100644 --- a/src/coupon-list/README.zh-CN.md +++ b/src/coupon-list/README.zh-CN.md @@ -128,3 +128,34 @@ export default { | value | 折扣券优惠金额，单位分 | _number_ | | valueDesc | 折扣券优惠金额文案 | _string_ | | unitDesc | 单位文案 | _string_ | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ----------------------------------- | ---------------------------- | ---- | +| @coupon-margin | `0 @padding-sm @padding-sm` | - | +| @coupon-content-height | `84px` | - | +| @coupon-content-padding | `14px 0` | - | +| @coupon-background-color | `@white` | - | +| @coupon-active-background-color | `@active-color` | - | +| @coupon-border-radius | `@border-radius-lg` | - | +| @coupon-box-shadow | `0 0 4px rgba(0, 0, 0, 0.1)` | - | +| @coupon-head-width | `96px` | - | +| @coupon-amount-color | `@red` | - | +| @coupon-amount-font-size | `30px` | - | +| @coupon-currency-font-size | `40%` | - | +| @coupon-name-font-size | `@font-size-md` | - | +| @coupon-disabled-text-color | `@gray-6` | - | +| @coupon-description-padding | `@padding-xs @padding-md` | - | +| @coupon-description-border-color | `@border-color` | - | +| @coupon-list-background-color | `@background-color` | - | +| @coupon-list-field-padding | `5px 0 5px @padding-md` | - | +| @coupon-list-exchange-button-height | `32px` | - | +| @coupon-list-close-button-height | `40px` | - | +| @coupon-list-empty-image-size | `200px` | - | +| @coupon-list-empty-tip-color | `@gray-6` | - | +| @coupon-list-empty-tip-font-size | `@font-size-md` | - | +| @coupon-list-empty-tip-line-height | `@line-height-md` | - | +| @coupon-cell-selected-text-color | `@text-color` | - | diff --git a/src/dialog/README.md b/src/dialog/README.md index 3ba44796e..741dd7e6f 100644 --- a/src/dialog/README.md +++ b/src/dialog/README.md @@ -205,3 +205,29 @@ export default { | ------- | -------------- | | default | Custom message | | title | Custom title | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| --- | --- | --- | +| @dialog-width | `320px` | - | +| @dialog-small-screen-width | `90%` | - | +| @dialog-font-size | `@font-size-lg` | - | +| @dialog-transition | `@animation-duration-base` | - | +| @dialog-border-radius | `16px` | - | +| @dialog-background-color | `@white` | - | +| @dialog-header-font-weight | `@font-weight-bold` | - | +| @dialog-header-line-height | `24px` | - | +| @dialog-header-padding-top | `26px` | - | +| @dialog-header-isolated-padding | `@padding-lg 0` | - | +| @dialog-message-padding | `@padding-lg` | - | +| @dialog-message-font-size | `@font-size-md` | - | +| @dialog-message-line-height | `@line-height-md` | - | +| @dialog-message-max-height | `60vh` | - | +| @dialog-has-title-message-text-color | `@gray-7` | - | +| @dialog-has-title-message-padding-top | `@padding-xs` | - | +| @dialog-button-height | `48px` | - | +| @dialog-round-button-height | `36px` | - | +| @dialog-confirm-button-text-color | `@red` | - | diff --git a/src/dialog/README.zh-CN.md b/src/dialog/README.zh-CN.md index 6c9e688df..2aa34554f 100644 --- a/src/dialog/README.zh-CN.md +++ b/src/dialog/README.zh-CN.md @@ -241,3 +241,29 @@ export default { | ------- | ---------- | | default | 自定义内容 | | title | 自定义标题 | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ------------------------------------- | -------------------------- | ---- | +| @dialog-width | `320px` | - | +| @dialog-small-screen-width | `90%` | - | +| @dialog-font-size | `@font-size-lg` | - | +| @dialog-transition | `@animation-duration-base` | - | +| @dialog-border-radius | `16px` | - | +| @dialog-background-color | `@white` | - | +| @dialog-header-font-weight | `@font-weight-bold` | - | +| @dialog-header-line-height | `24px` | - | +| @dialog-header-padding-top | `26px` | - | +| @dialog-header-isolated-padding | `@padding-lg 0` | - | +| @dialog-message-padding | `@padding-lg` | - | +| @dialog-message-font-size | `@font-size-md` | - | +| @dialog-message-line-height | `@line-height-md` | - | +| @dialog-message-max-height | `60vh` | - | +| @dialog-has-title-message-text-color | `@gray-7` | - | +| @dialog-has-title-message-padding-top | `@padding-xs` | - | +| @dialog-button-height | `48px` | - | +| @dialog-round-button-height | `36px` | - | +| @dialog-confirm-button-text-color | `@red` | - | diff --git a/src/divider/README.md b/src/divider/README.md index 78274ffcb..e6d64f2d0 100644 --- a/src/divider/README.md +++ b/src/divider/README.md @@ -61,3 +61,18 @@ Vue.use(Divider); | Name | Description | | ------- | ----------- | | default | content | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| ---------------------------- | --------------- | ----------- | +| @divider-margin | `@padding-md 0` | - | +| @divider-text-color | `@gray-6` | - | +| @divider-font-size | `@font-size-md` | - | +| @divider-line-height | `24px` | - | +| @divider-border-color | `@border-color` | - | +| @divider-content-padding | `@padding-md` | - | +| @divider-content-left-width | `10%` | - | +| @divider-content-right-width | `10%` | - | diff --git a/src/divider/README.zh-CN.md b/src/divider/README.zh-CN.md index ee53b571c..b269fb4d0 100644 --- a/src/divider/README.zh-CN.md +++ b/src/divider/README.zh-CN.md @@ -75,3 +75,18 @@ Vue.use(Divider); | 名称 | 说明 | | ------- | ---- | | default | 内容 | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ---------------------------- | --------------- | ---- | +| @divider-margin | `@padding-md 0` | - | +| @divider-text-color | `@gray-6` | - | +| @divider-font-size | `@font-size-md` | - | +| @divider-line-height | `24px` | - | +| @divider-border-color | `@border-color` | - | +| @divider-content-padding | `@padding-md` | - | +| @divider-content-left-width | `10%` | - | +| @divider-content-right-width | `10%` | - | diff --git a/src/dropdown-menu/README.md b/src/dropdown-menu/README.md index d4fd3607f..3d8bd06c5 100644 --- a/src/dropdown-menu/README.md +++ b/src/dropdown-menu/README.md @@ -176,3 +176,22 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get DropdownItem instance and call i | text | Text | _string_ | | value | Value | _number \| string_ | | icon | Left icon | _string_ | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| --- | --- | --- | +| @dropdown-menu-height | `48px` | - | +| @dropdown-menu-background-color | `@white` | - | +| @dropdown-menu-box-shadow | `0 2px 12px fade(@gray-7, 12)` | - | +| @dropdown-menu-title-font-size | `15px` | - | +| @dropdown-menu-title-text-color | `@text-color` | - | +| @dropdown-menu-title-active-text-color | `@red` | - | +| @dropdown-menu-title-disabled-text-color | `@gray-6` | - | +| @dropdown-menu-title-padding | `0 @padding-xs` | - | +| @dropdown-menu-title-line-height | `@line-height-lg` | - | +| @dropdown-menu-option-active-color | `@red` | - | +| @dropdown-menu-content-max-height | `80%` | - | +| @dropdown-item-z-index | `10` | - | diff --git a/src/dropdown-menu/README.zh-CN.md b/src/dropdown-menu/README.zh-CN.md index 9dbe767b1..f4ae50447 100644 --- a/src/dropdown-menu/README.zh-CN.md +++ b/src/dropdown-menu/README.zh-CN.md @@ -184,3 +184,22 @@ export default { | text | 文字 | _string_ | | value | 标识符 | _number \| string_ | | icon | 左侧[图标名称](#/zh-CN/icon)或图片链接 | _string_ | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| @dropdown-menu-height | `48px` | - | +| @dropdown-menu-background-color | `@white` | - | +| @dropdown-menu-box-shadow | `0 2px 12px fade(@gray-7, 12)` | - | +| @dropdown-menu-title-font-size | `15px` | - | +| @dropdown-menu-title-text-color | `@text-color` | - | +| @dropdown-menu-title-active-text-color | `@red` | - | +| @dropdown-menu-title-disabled-text-color | `@gray-6` | - | +| @dropdown-menu-title-padding | `0 @padding-xs` | - | +| @dropdown-menu-title-line-height | `@line-height-lg` | - | +| @dropdown-menu-option-active-color | `@red` | - | +| @dropdown-menu-content-max-height | `80%` | - | +| @dropdown-item-z-index | `10` | - | diff --git a/src/empty/README.md b/src/empty/README.md index 1da5f5315..ff3bdf7e2 100644 --- a/src/empty/README.md +++ b/src/empty/README.md @@ -80,3 +80,18 @@ Use the image prop to display different placeholder images. | default | Custom bottom content | | image | Custom image | | description | Custom description | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| ------------------------------ | ----------------- | ----------- | +| @empty-padding | `@padding-xl 0` | - | +| @empty-image-size | `160px` | - | +| @empty-description-margin-top | `@padding-md` | - | +| @empty-description-padding | `0 60px` | - | +| @empty-description-color | `@gray-6` | - | +| @empty-description-font-size | `@font-size-md` | - | +| @empty-description-line-height | `@line-height-md` | - | +| @empty-bottom-margin-top | `24px` | - | diff --git a/src/empty/README.zh-CN.md b/src/empty/README.zh-CN.md index 39c70ab88..419b56230 100644 --- a/src/empty/README.zh-CN.md +++ b/src/empty/README.zh-CN.md @@ -89,3 +89,18 @@ Empty 组件内置了多种占位图片类型，可以在不同业务场景下 | default | 自定义底部内容 | | image | 自定义图标 | | description | 自定义描述文字 | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ------------------------------ | ----------------- | ---- | +| @empty-padding | `@padding-xl 0` | - | +| @empty-image-size | `160px` | - | +| @empty-description-margin-top | `@padding-md` | - | +| @empty-description-padding | `0 60px` | - | +| @empty-description-color | `@gray-6` | - | +| @empty-description-font-size | `@font-size-md` | - | +| @empty-description-line-height | `@line-height-md` | - | +| @empty-bottom-margin-top | `24px` | - | diff --git a/src/field/README.md b/src/field/README.md index 29ae9e803..dd9ea7adc 100644 --- a/src/field/README.md +++ b/src/field/README.md @@ -287,3 +287,28 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Field instance and call instance | right-icon | Custom right icon | | button | Insert button | | extra `v2.8.2` | Custom content on the right | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| -------------------------------- | --------------- | ----------- | +| @field-label-width | `6.2em` | - | +| @field-label-color | `@gray-7` | - | +| @field-label-margin-right | `@padding-sm` | - | +| @field-input-text-color | `@text-color` | - | +| @field-input-error-text-color | `@red` | - | +| @field-input-disabled-text-color | `@gray-5` | - | +| @field-placeholder-text-color | `@gray-5` | - | +| @field-icon-size | `16px` | - | +| @field-clear-icon-size | `16px` | - | +| @field-clear-icon-color | `@gray-5` | - | +| @field-right-icon-color | `@gray-6` | - | +| @field-error-message-color | `@red` | - | +| @field-error-message-text-color | `12px` | - | +| @field-text-area-min-height | `60px` | - | +| @field-word-limit-color | `@gray-7` | - | +| @field-word-limit-font-size | `@font-size-sm` | - | +| @field-word-limit-line-height | `16px` | - | +| @field-disabled-text-color | `@gray-5` | - | diff --git a/src/field/README.zh-CN.md b/src/field/README.zh-CN.md index e2ecbae44..cc544694c 100644 --- a/src/field/README.zh-CN.md +++ b/src/field/README.zh-CN.md @@ -313,6 +313,31 @@ export default { | button | 自定义输入框尾部按钮 | | extra `v2.8.2` | 自定义输入框最右侧的额外内容 | +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| -------------------------------- | --------------- | ---- | +| @field-label-width | `6.2em` | - | +| @field-label-color | `@gray-7` | - | +| @field-label-margin-right | `@padding-sm` | - | +| @field-input-text-color | `@text-color` | - | +| @field-input-error-text-color | `@red` | - | +| @field-input-disabled-text-color | `@gray-5` | - | +| @field-placeholder-text-color | `@gray-5` | - | +| @field-icon-size | `16px` | - | +| @field-clear-icon-size | `16px` | - | +| @field-clear-icon-color | `@gray-5` | - | +| @field-right-icon-color | `@gray-6` | - | +| @field-error-message-color | `@red` | - | +| @field-error-message-text-color | `12px` | - | +| @field-text-area-min-height | `60px` | - | +| @field-word-limit-color | `@gray-7` | - | +| @field-word-limit-font-size | `@font-size-sm` | - | +| @field-word-limit-line-height | `16px` | - | +| @field-disabled-text-color | `@gray-5` | - | + ## 常见问题 ### 设置 type 为 number 后，为什么 input 标签的类型仍为 text? diff --git a/src/goods-action/README.md b/src/goods-action/README.md index 4b4803c36..47c986977 100644 --- a/src/goods-action/README.md +++ b/src/goods-action/README.md @@ -125,3 +125,22 @@ Use `badge` prop to show badge in icon. | Name | Description | | ------- | -------------- | | default | Button content | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| ---------------------------------- | ------------------ | ----------- | +| @goods-action-background-color | `@white` | - | +| @goods-action-height | `50px` | - | +| @goods-action-icon-width | `48px` | - | +| @goods-action-icon-height | `100%` | - | +| @goods-action-icon-color | `@text-color` | - | +| @goods-action-icon-size | `18px` | - | +| @goods-action-icon-font-size | `@font-size-xs` | - | +| @goods-action-icon-active-color | `@active-color` | - | +| @goods-action-icon-text-color | `@gray-7` | - | +| @goods-action-button-height | `40px` | - | +| @goods-action-button-warning-color | `@gradient-orange` | - | +| @goods-action-button-danger-color | `@gradient-red` | - | diff --git a/src/goods-action/README.zh-CN.md b/src/goods-action/README.zh-CN.md index 7ce4d8033..fe5833b7f 100644 --- a/src/goods-action/README.zh-CN.md +++ b/src/goods-action/README.zh-CN.md @@ -133,3 +133,22 @@ export default { | 名称 | 说明 | | ------- | ------------ | | default | 按钮显示内容 | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ---------------------------------- | ------------------ | ---- | +| @goods-action-background-color | `@white` | - | +| @goods-action-height | `50px` | - | +| @goods-action-icon-width | `48px` | - | +| @goods-action-icon-height | `100%` | - | +| @goods-action-icon-color | `@text-color` | - | +| @goods-action-icon-size | `18px` | - | +| @goods-action-icon-font-size | `@font-size-xs` | - | +| @goods-action-icon-active-color | `@active-color` | - | +| @goods-action-icon-text-color | `@gray-7` | - | +| @goods-action-button-height | `40px` | - | +| @goods-action-button-warning-color | `@gradient-orange` | - | +| @goods-action-button-danger-color | `@gradient-red` | - | diff --git a/src/grid/README.md b/src/grid/README.md index 1795d5e70..49911c89c 100644 --- a/src/grid/README.md +++ b/src/grid/README.md @@ -132,3 +132,16 @@ Vue.use(GridItem); | default | Custom content | | icon | Custom icon | | text | Custom text | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| --- | --- | --- | +| @grid-item-content-padding | `@padding-md @padding-xs` | - | +| @grid-item-content-background-color | `@white` | - | +| @grid-item-content-active-color | `@active-color` | - | +| @grid-item-icon-size | `28px` | - | +| @grid-item-text-color | `@gray-7` | - | +| @grid-item-text-font-size | `@font-size-sm` | - | diff --git a/src/grid/README.zh-CN.md b/src/grid/README.zh-CN.md index dd342f02d..990a03042 100644 --- a/src/grid/README.zh-CN.md +++ b/src/grid/README.zh-CN.md @@ -153,3 +153,16 @@ Vue.use(GridItem); | default | 自定义宫格的所有内容 | | icon | 自定义图标 | | text | 自定义文字 | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ----------------------------------- | ------------------------- | ---- | +| @grid-item-content-padding | `@padding-md @padding-xs` | - | +| @grid-item-content-background-color | `@white` | - | +| @grid-item-content-active-color | `@active-color` | - | +| @grid-item-icon-size | `28px` | - | +| @grid-item-text-color | `@gray-7` | - | +| @grid-item-text-font-size | `@font-size-sm` | - | diff --git a/src/image-preview/README.md b/src/image-preview/README.md index 8f344c75b..6064d3d75 100644 --- a/src/image-preview/README.md +++ b/src/image-preview/README.md @@ -188,3 +188,20 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get ImagePreview instance and call i | --------- | ---------------------- | -------- | | index | Index of current image | _number_ | | scale | scale of current image | _number_ | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| --------------------------------------- | -------------------- | ----------- | +| @image-preview-index-text-color | `@white` | - | +| @image-preview-index-font-size | `@font-size-md` | - | +| @image-preview-index-line-height | `@line-height-md` | - | +| @image-preview-index-text-shadow | `0 1px 1px @gray-8` | - | +| @image-preview-overlay-background-color | `rgba(0, 0, 0, 0.9)` | - | +| @image-preview-close-icon-size | `22px` | - | +| @image-preview-close-icon-color | `@gray-5` | - | +| @image-preview-close-icon-active-color | `@gray-6` | - | +| @image-preview-close-icon-margin | `@padding-md` | - | +| @image-preview-close-icon-z-index | `1` | - | diff --git a/src/image-preview/README.zh-CN.md b/src/image-preview/README.zh-CN.md index 161fc41a1..e4b427d07 100644 --- a/src/image-preview/README.zh-CN.md +++ b/src/image-preview/README.zh-CN.md @@ -231,6 +231,23 @@ export default { | index | 当前图片的索引值 | _number_ | | scale | 当前图片的缩放值 | _number_ | +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| --------------------------------------- | -------------------- | ---- | +| @image-preview-index-text-color | `@white` | - | +| @image-preview-index-font-size | `@font-size-md` | - | +| @image-preview-index-line-height | `@line-height-md` | - | +| @image-preview-index-text-shadow | `0 1px 1px @gray-8` | - | +| @image-preview-overlay-background-color | `rgba(0, 0, 0, 0.9)` | - | +| @image-preview-close-icon-size | `22px` | - | +| @image-preview-close-icon-color | `@gray-5` | - | +| @image-preview-close-icon-active-color | `@gray-6` | - | +| @image-preview-close-icon-margin | `@padding-md` | - | +| @image-preview-close-icon-z-index | `1` | - | + ## 常见问题 ### 在桌面端无法操作组件？ diff --git a/src/image/README.md b/src/image/README.md index 8350fde92..ee3aeefb7 100644 --- a/src/image/README.md +++ b/src/image/README.md @@ -104,3 +104,17 @@ Vue.use(Lazyload); | default `v2.9.0` | Custom the content below the image | | loading | Custom loading placeholder | | error | Custom error placeholder | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| ----------------------------------- | ------------------- | ----------- | +| @image-placeholder-text-color | `@gray-6` | - | +| @image-placeholder-font-size | `@font-size-md` | - | +| @image-placeholder-background-color | `@background-color` | - | +| @image-loading-icon-size | `32px` | - | +| @image-loading-icon-color | `@gray-4` | - | +| @image-error-icon-size | `32px` | - | +| @image-error-icon-color | `@gray-4` | - | diff --git a/src/image/README.zh-CN.md b/src/image/README.zh-CN.md index a6bec222a..ebad85ac3 100644 --- a/src/image/README.zh-CN.md +++ b/src/image/README.zh-CN.md @@ -137,6 +137,20 @@ Vue.use(Lazyload); | loading | 自定义加载中的提示内容 | | error | 自定义加载失败时的提示内容 | +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ----------------------------------- | ------------------- | ---- | +| @image-placeholder-text-color | `@gray-6` | - | +| @image-placeholder-font-size | `@font-size-md` | - | +| @image-placeholder-background-color | `@background-color` | - | +| @image-loading-icon-size | `32px` | - | +| @image-loading-icon-color | `@gray-4` | - | +| @image-error-icon-size | `32px` | - | +| @image-error-icon-color | `@gray-4` | - | + ## 常见问题 ### 如何引用本地图片？ diff --git a/src/index-bar/README.md b/src/index-bar/README.md index 6c2f05b5c..8fad5d0fd 100644 --- a/src/index-bar/README.md +++ b/src/index-bar/README.md @@ -88,3 +88,23 @@ export default { | Name | Description | | ------- | ------------------------------------- | | default | Anchor content, show index by default | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| ------------------------------------- | ------------------- | ----------- | +| @index-bar-sidebar-z-index | `2` | - | +| @index-bar-index-font-size | `@font-size-xs` | - | +| @index-bar-index-line-height | `@line-height-xs` | - | +| @index-bar-index-active-color | `@green` | - | +| @index-anchor-z-index | `1` | - | +| @index-anchor-padding | `0 @padding-md` | - | +| @index-anchor-text-color | `@text-color` | - | +| @index-anchor-font-weight | `@font-weight-bold` | - | +| @index-anchor-font-size | `@font-size-md` | - | +| @index-anchor-line-height | `32px` | - | +| @index-anchor-background-color | `transparent` | - | +| @index-anchor-sticky-text-color | `@green` | - | +| @index-anchor-sticky-background-color | `@white` | - | diff --git a/src/index-bar/README.zh-CN.md b/src/index-bar/README.zh-CN.md index f0d6027f2..1101d3ff4 100644 --- a/src/index-bar/README.zh-CN.md +++ b/src/index-bar/README.zh-CN.md @@ -92,3 +92,23 @@ export default { | 名称 | 说明 | | ------- | -------------------------------- | | default | 锚点位置显示内容，默认为索引字符 | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ------------------------------------- | ------------------- | ---- | +| @index-bar-sidebar-z-index | `2` | - | +| @index-bar-index-font-size | `@font-size-xs` | - | +| @index-bar-index-line-height | `@line-height-xs` | - | +| @index-bar-index-active-color | `@green` | - | +| @index-anchor-z-index | `1` | - | +| @index-anchor-padding | `0 @padding-md` | - | +| @index-anchor-text-color | `@text-color` | - | +| @index-anchor-font-weight | `@font-weight-bold` | - | +| @index-anchor-font-size | `@font-size-md` | - | +| @index-anchor-line-height | `32px` | - | +| @index-anchor-background-color | `transparent` | - | +| @index-anchor-sticky-text-color | `@green` | - | +| @index-anchor-sticky-background-color | `@white` | - | diff --git a/src/list/README.md b/src/list/README.md index f1b8af9f5..2a5f32e0e 100644 --- a/src/list/README.md +++ b/src/list/README.md @@ -176,3 +176,14 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get List instance and call instance | loading | Custom loading tips | | finished | Custom finished tips | | error | Custom error tips | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| ----------------------- | --------------- | ----------- | +| @list-icon-margin-right | `5px` | - | +| @list-text-color | `@gray-6` | - | +| @list-text-font-size | `@font-size-md` | - | +| @list-text-line-height | `50px` | - | diff --git a/src/list/README.zh-CN.md b/src/list/README.zh-CN.md index a16acc003..3e1c63348 100644 --- a/src/list/README.zh-CN.md +++ b/src/list/README.zh-CN.md @@ -192,6 +192,17 @@ export default { | finished | 自定义加载完成后的提示文案 | | error | 自定义加载失败后的提示文案 | +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ----------------------- | --------------- | ---- | +| @list-icon-margin-right | `5px` | - | +| @list-text-color | `@gray-6` | - | +| @list-text-font-size | `@font-size-md` | - | +| @list-text-line-height | `50px` | - | + ## 常见问题 ### List 的运行机制是什么？ diff --git a/src/loading/README.md b/src/loading/README.md index 51f9ca7e5..ddd5ab7fd 100644 --- a/src/loading/README.md +++ b/src/loading/README.md @@ -64,3 +64,15 @@ Vue.use(Loading); | Name | Description | | ------- | ------------ | | default | Loading text | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| ----------------------------------- | --------------- | ----------- | +| @loading-text-color | `@gray-6` | - | +| @loading-text-font-size | `@font-size-md` | - | +| @loading-spinner-color | `@gray-5` | - | +| @loading-spinner-size | `30px` | - | +| @loading-spinner-animation-duration | `0.8s` | - | diff --git a/src/loading/README.zh-CN.md b/src/loading/README.zh-CN.md index ea6a838d5..91a3d9971 100644 --- a/src/loading/README.zh-CN.md +++ b/src/loading/README.zh-CN.md @@ -78,3 +78,15 @@ Vue.use(Loading); | 名称 | 说明 | | ------- | -------- | | default | 加载文案 | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ----------------------------------- | --------------- | ---- | +| @loading-text-color | `@gray-6` | - | +| @loading-text-font-size | `@font-size-md` | - | +| @loading-spinner-color | `@gray-5` | - | +| @loading-spinner-size | `30px` | - | +| @loading-spinner-animation-duration | `0.8s` | - | diff --git a/src/nav-bar/README.md b/src/nav-bar/README.md index d18bd5204..d5e1c6f09 100644 --- a/src/nav-bar/README.md +++ b/src/nav-bar/README.md @@ -79,3 +79,18 @@ export default { | ----------- | ---------------------------------------- | --------- | | click-left | Emitted when the left button is clicked | - | | click-right | Emitted when the right button is clicked | - | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| ------------------------- | --------------- | ----------- | +| @nav-bar-height | `46px` | - | +| @nav-bar-background-color | `@white` | - | +| @nav-bar-arrow-size | `16px` | - | +| @nav-bar-icon-color | `@blue` | - | +| @nav-bar-text-color | `@blue` | - | +| @nav-bar-title-font-size | `@font-size-lg` | - | +| @nav-bar-title-text-color | `@text-color` | - | +| @nav-bar-z-index | `1` | - | diff --git a/src/nav-bar/README.zh-CN.md b/src/nav-bar/README.zh-CN.md index 6e9c60fb4..54858edaf 100644 --- a/src/nav-bar/README.zh-CN.md +++ b/src/nav-bar/README.zh-CN.md @@ -81,3 +81,18 @@ export default { | ----------- | ------------------ | -------- | | click-left | 点击左侧按钮时触发 | - | | click-right | 点击右侧按钮时触发 | - | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ------------------------- | --------------- | ---- | +| @nav-bar-height | `46px` | - | +| @nav-bar-background-color | `@white` | - | +| @nav-bar-arrow-size | `16px` | - | +| @nav-bar-icon-color | `@blue` | - | +| @nav-bar-text-color | `@blue` | - | +| @nav-bar-title-font-size | `@font-size-lg` | - | +| @nav-bar-title-text-color | `@text-color` | - | +| @nav-bar-z-index | `1` | - | diff --git a/src/notice-bar/README.md b/src/notice-bar/README.md index 8b1ac3ae5..7c34589b2 100644 --- a/src/notice-bar/README.md +++ b/src/notice-bar/README.md @@ -113,3 +113,19 @@ Vue.use(NoticeBar); | default | Notice text content | | left-icon | Custom left icon | | right-icon | Custom right icon | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| ---------------------------- | ------------------------- | ----------- | +| @notice-bar-height | `40px` | - | +| @notice-bar-padding | `0 @padding-md` | - | +| @notice-bar-wrapable-padding | `@padding-xs @padding-md` | - | +| @notice-bar-text-color | `@orange-dark` | - | +| @notice-bar-font-size | `@font-size-md` | - | +| @notice-bar-line-height | `24px` | - | +| @notice-bar-background-color | `@orange-light` | - | +| @notice-bar-icon-size | `16px` | - | +| @notice-bar-icon-min-width | `24px` | - | diff --git a/src/notice-bar/README.zh-CN.md b/src/notice-bar/README.zh-CN.md index 7954c2b8a..2dcb42b9c 100644 --- a/src/notice-bar/README.zh-CN.md +++ b/src/notice-bar/README.zh-CN.md @@ -136,3 +136,19 @@ Vue.use(NoticeBar); | default | 通知文本内容 | | left-icon | 自定义左侧图标 | | right-icon | 自定义右侧图标 | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ---------------------------- | ------------------------- | ---- | +| @notice-bar-height | `40px` | - | +| @notice-bar-padding | `0 @padding-md` | - | +| @notice-bar-wrapable-padding | `@padding-xs @padding-md` | - | +| @notice-bar-text-color | `@orange-dark` | - | +| @notice-bar-font-size | `@font-size-md` | - | +| @notice-bar-line-height | `24px` | - | +| @notice-bar-background-color | `@orange-light` | - | +| @notice-bar-icon-size | `16px` | - | +| @notice-bar-icon-min-width | `24px` | - | diff --git a/src/notify/README.md b/src/notify/README.md index 1e75397b5..ba0087224 100644 --- a/src/notify/README.md +++ b/src/notify/README.md @@ -105,3 +105,18 @@ export default { | onClick | Callback function after click | _Function_ | - | | onOpened | Callback function after opened | _Function_ | - | | onClose | Callback function after close | _Function_ | - | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| -------------------------------- | ------------------------- | ----------- | +| @notify-text-color | `@white` | - | +| @notify-padding | `@padding-xs @padding-md` | - | +| @notify-font-size | `@font-size-md` | - | +| @notify-line-height | `@line-height-md` | - | +| @notify-primary-background-color | `@blue` | - | +| @notify-success-background-color | `@green` | - | +| @notify-danger-background-color | `@red` | - | +| @notify-warning-background-color | `@orange` | - | diff --git a/src/notify/README.zh-CN.md b/src/notify/README.zh-CN.md index ed4782dc6..a9b430c9f 100644 --- a/src/notify/README.zh-CN.md +++ b/src/notify/README.zh-CN.md @@ -142,3 +142,18 @@ export default { | onClick | 点击时的回调函数 | _Function_ | - | | onOpened | 完全展示后的回调函数 | _Function_ | - | | onClose | 关闭时的回调函数 | _Function_ | - | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| -------------------------------- | ------------------------- | ---- | +| @notify-text-color | `@white` | - | +| @notify-padding | `@padding-xs @padding-md` | - | +| @notify-font-size | `@font-size-md` | - | +| @notify-line-height | `@line-height-md` | - | +| @notify-primary-background-color | `@blue` | - | +| @notify-success-background-color | `@green` | - | +| @notify-danger-background-color | `@red` | - | +| @notify-warning-background-color | `@orange` | - | diff --git a/src/number-keyboard/README.md b/src/number-keyboard/README.md index 96e5990b3..5229bf104 100644 --- a/src/number-keyboard/README.md +++ b/src/number-keyboard/README.md @@ -181,3 +181,28 @@ export default { | delete | Custom delete key content | | extra-key | Custom extra key content | | title-left | Custom title left content | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| --- | --- | --- | +| @number-keyboard-background-color | `@gray-2` | - | +| @number-keyboard-key-height | `48px` | - | +| @number-keyboard-key-font-size | `28px` | - | +| @number-keyboard-key-active-color | `@gray-3` | - | +| @number-keyboard-delete-font-size | `@font-size-lg` | - | +| @number-keyboard-title-color | `@gray-7` | - | +| @number-keyboard-title-height | `34px` | - | +| @number-keyboard-title-font-size | `@font-size-lg` | - | +| @number-keyboard-close-padding | `0 @padding-md` | - | +| @number-keyboard-close-color | `@text-link-color` | - | +| @number-keyboard-close-font-size | `@font-size-md` | - | +| @number-keyboard-button-text-color | `@white` | - | +| @number-keyboard-button-background-color | `@blue` | - | +| @number-keyboard-cursor-color | `@text-color` | - | +| @number-keyboard-cursor-width | `1px` | - | +| @number-keyboard-cursor-height | `40%` | - | +| @number-keyboard-cursor-animation-duration | `1s` | - | +| @number-keyboard-z-index | `100` | - | diff --git a/src/number-keyboard/README.zh-CN.md b/src/number-keyboard/README.zh-CN.md index 978cd9d3c..2ea34310e 100644 --- a/src/number-keyboard/README.zh-CN.md +++ b/src/number-keyboard/README.zh-CN.md @@ -195,6 +195,31 @@ export default { | extra-key | 自定义左下角按键内容 | | title-left | 自定义标题栏左侧内容 | +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ------------------------------------------ | ------------------ | ---- | +| @number-keyboard-background-color | `@gray-2` | - | +| @number-keyboard-key-height | `48px` | - | +| @number-keyboard-key-font-size | `28px` | - | +| @number-keyboard-key-active-color | `@gray-3` | - | +| @number-keyboard-delete-font-size | `@font-size-lg` | - | +| @number-keyboard-title-color | `@gray-7` | - | +| @number-keyboard-title-height | `34px` | - | +| @number-keyboard-title-font-size | `@font-size-lg` | - | +| @number-keyboard-close-padding | `0 @padding-md` | - | +| @number-keyboard-close-color | `@text-link-color` | - | +| @number-keyboard-close-font-size | `@font-size-md` | - | +| @number-keyboard-button-text-color | `@white` | - | +| @number-keyboard-button-background-color | `@blue` | - | +| @number-keyboard-cursor-color | `@text-color` | - | +| @number-keyboard-cursor-width | `1px` | - | +| @number-keyboard-cursor-height | `40%` | - | +| @number-keyboard-cursor-animation-duration | `1s` | - | +| @number-keyboard-z-index | `100` | - | + ## 常见问题 ### 在桌面端无法操作组件？ diff --git a/src/overlay/README.md b/src/overlay/README.md index 62dae5185..f74638f94 100644 --- a/src/overlay/README.md +++ b/src/overlay/README.md @@ -77,3 +77,12 @@ export default { | Name | Description | | ------- | ------------ | | default | Default slot | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| ------------------------- | -------------------- | ----------- | +| @overlay-z-index | `1` | - | +| @overlay-background-color | `rgba(0, 0, 0, 0.7)` | - | diff --git a/src/overlay/README.zh-CN.md b/src/overlay/README.zh-CN.md index 31fbd82a4..10ef6bd58 100644 --- a/src/overlay/README.zh-CN.md +++ b/src/overlay/README.zh-CN.md @@ -83,3 +83,12 @@ export default { | 名称 | 说明 | | ------- | ---------------------------------- | | default | 默认插槽，用于在遮罩层上方嵌入内容 | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ------------------------- | -------------------- | ---- | +| @overlay-z-index | `1` | - | +| @overlay-background-color | `rgba(0, 0, 0, 0.7)` | - | diff --git a/src/pagination/README.md b/src/pagination/README.md index c15e2b3d7..5228e26a6 100644 --- a/src/pagination/README.md +++ b/src/pagination/README.md @@ -87,3 +87,19 @@ export default { | page `v2.10.9` | Custom pagination item | _{ number: number, text: string, active: boolean }_ | | prev-text `v2.10.9` | Custom prev text | `-` | | next-text `v2.10.9` | Custom next text | `-` | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| --- | --- | --- | +| @pagination-height | `40px` | - | +| @pagination-font-size | `@font-size-md` | - | +| @pagination-item-width | `36px` | - | +| @pagination-item-default-color | `@blue` | - | +| @pagination-item-disabled-color | `@gray-7` | - | +| @pagination-item-disabled-background-color | `@background-color` | - | +| @pagination-background-color | `@white` | - | +| @pagination-desc-color | `@gray-7` | - | +| @pagination-disabled-opacity | `@disabled-opacity` | - | diff --git a/src/pagination/README.zh-CN.md b/src/pagination/README.zh-CN.md index b6062f073..978f03ae2 100644 --- a/src/pagination/README.zh-CN.md +++ b/src/pagination/README.zh-CN.md @@ -95,3 +95,19 @@ export default { | page `v2.10.9` | 自定义页码 | _{ number: number, text: string, active: boolean }_ | | prev-text `v2.10.9` | 自定义上一页按钮文字 | `-` | | next-text `v2.10.9` | 自定义下一页按钮文字 | `-` | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ------------------------------------------ | ------------------- | ---- | +| @pagination-height | `40px` | - | +| @pagination-font-size | `@font-size-md` | - | +| @pagination-item-width | `36px` | - | +| @pagination-item-default-color | `@blue` | - | +| @pagination-item-disabled-color | `@gray-7` | - | +| @pagination-item-disabled-background-color | `@background-color` | - | +| @pagination-background-color | `@white` | - | +| @pagination-desc-color | `@gray-7` | - | +| @pagination-disabled-opacity | `@disabled-opacity` | - | diff --git a/src/panel/README.md b/src/panel/README.md index 72cf7fad7..ab86d23e2 100644 --- a/src/panel/README.md +++ b/src/panel/README.md @@ -53,3 +53,13 @@ Vue.use(Panel); | default | Default slot | | header | Custom header | | footer | Custom footer | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| ------------------------- | ------------------------- | ----------- | +| @panel-background-color | `@white` | - | +| @panel-header-value-color | `@red` | - | +| @panel-footer-padding | `@padding-xs @padding-md` | - | diff --git a/src/panel/README.zh-CN.md b/src/panel/README.zh-CN.md index f889e01c9..eb4c86b67 100644 --- a/src/panel/README.zh-CN.md +++ b/src/panel/README.zh-CN.md @@ -57,3 +57,13 @@ Vue.use(Panel); | default | 自定义内容 | | header | 自定义 header | | footer | 自定义 footer | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ------------------------- | ------------------------- | ---- | +| @panel-background-color | `@white` | - | +| @panel-header-value-color | `@red` | - | +| @panel-footer-padding | `@padding-xs @padding-md` | - | diff --git a/src/password-input/README.md b/src/password-input/README.md index 1b86e7c50..d7cc2834b 100644 --- a/src/password-input/README.md +++ b/src/password-input/README.md @@ -134,3 +134,20 @@ export default { | Event | Description | Arguments | | ----- | ----------------------------- | --------- | | focus | Emitted when input is focused | - | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| -------------------------------- | --------------- | ----------- | +| @password-input-height | `50px` | - | +| @password-input-margin | `0 @padding-md` | - | +| @password-input-font-size | `20px` | - | +| @password-input-border-radius | `6px` | - | +| @password-input-background-color | `@white` | - | +| @password-input-info-color | `@gray-6` | - | +| @password-input-info-font-size | `@font-size-md` | - | +| @password-input-error-info-color | `@red` | - | +| @password-input-dot-size | `10px` | - | +| @password-input-dot-color | `@black` | - | diff --git a/src/password-input/README.zh-CN.md b/src/password-input/README.zh-CN.md index c892a818f..9072c03d1 100644 --- a/src/password-input/README.zh-CN.md +++ b/src/password-input/README.zh-CN.md @@ -144,3 +144,20 @@ export default { | 事件名 | 说明 | 回调参数 | | ------ | ---------------- | -------- | | focus | 输入框聚焦时触发 | - | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| -------------------------------- | --------------- | ---- | +| @password-input-height | `50px` | - | +| @password-input-margin | `0 @padding-md` | - | +| @password-input-font-size | `20px` | - | +| @password-input-border-radius | `6px` | - | +| @password-input-background-color | `@white` | - | +| @password-input-info-color | `@gray-6` | - | +| @password-input-info-font-size | `@font-size-md` | - | +| @password-input-error-info-color | `@red` | - | +| @password-input-dot-size | `10px` | - | +| @password-input-dot-color | `@black` | - | diff --git a/src/picker/README.md b/src/picker/README.md index b2dea43ad..14aaa0dbc 100644 --- a/src/picker/README.md +++ b/src/picker/README.md @@ -305,3 +305,23 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Picker instance and call instanc | getColumnValues | Get columns data of the column | columnIndex | values | | setColumnValues | Set columns data of the column | columnIndex, values | - | | confirm `v2.4.0` | Stop scrolling and emit confirm event | - | - | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| ------------------------------- | -------------------------- | ----------- | +| @picker-background-color | `@white` | - | +| @picker-toolbar-height | `44px` | - | +| @picker-title-font-size | `@font-size-lg` | - | +| @picker-title-line-height | `@line-height-md` | - | +| @picker-action-padding | `0 @padding-md` | - | +| @picker-action-font-size | `@font-size-md` | - | +| @picker-confirm-action-color | `@text-link-color` | - | +| @picker-cancel-action-color | `@gray-6` | - | +| @picker-option-font-size | `@font-size-lg` | - | +| @picker-option-text-color | `@black` | - | +| @picker-option-disabled-opacity | `0.3` | - | +| @picker-loading-icon-color | `@blue` | - | +| @picker-loading-mask-color | `rgba(255, 255, 255, 0.9)` | - | diff --git a/src/picker/README.zh-CN.md b/src/picker/README.zh-CN.md index d90758c68..e825c95a2 100644 --- a/src/picker/README.zh-CN.md +++ b/src/picker/README.zh-CN.md @@ -331,6 +331,26 @@ export default { | setColumnValues | 设置对应列中所有选项 | columnIndex, values | - | | confirm `v2.4.0` | 停止惯性滚动并触发 confirm 事件 | - | - | +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ------------------------------- | -------------------------- | ---- | +| @picker-background-color | `@white` | - | +| @picker-toolbar-height | `44px` | - | +| @picker-title-font-size | `@font-size-lg` | - | +| @picker-title-line-height | `@line-height-md` | - | +| @picker-action-padding | `0 @padding-md` | - | +| @picker-action-font-size | `@font-size-md` | - | +| @picker-confirm-action-color | `@text-link-color` | - | +| @picker-cancel-action-color | `@gray-6` | - | +| @picker-option-font-size | `@font-size-lg` | - | +| @picker-option-text-color | `@black` | - | +| @picker-option-disabled-opacity | `0.3` | - | +| @picker-loading-icon-color | `@blue` | - | +| @picker-loading-mask-color | `rgba(255, 255, 255, 0.9)` | - | + ## 常见问题 ### 在桌面端无法操作组件？ diff --git a/src/popover/README.md b/src/popover/README.md index 7410727dc..492e8ffa3 100644 --- a/src/popover/README.md +++ b/src/popover/README.md @@ -194,3 +194,23 @@ export default { | --------- | ----------------- | | default | Custom content | | reference | Reference Element | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| --- | --- | --- | +| @popover-arrow-size | `6px` | - | +| @popover-border-radius | `@border-radius-lg` | - | +| @popover-action-width | `128px` | - | +| @popover-action-height | `44px` | - | +| @popover-action-font-size | `@font-size-md` | - | +| @popover-action-line-height | `@line-height-md` | - | +| @popover-action-icon-size | `20px` | - | +| @popover-light-text-color | `@text-color` | - | +| @popover-light-background-color | `@white` | - | +| @popover-light-action-disabled-text-color | `@gray-5` | - | +| @popover-dark-text-color | `@white` | - | +| @popover-dark-background-color | `#4a4a4a` | - | +| @popover-dark-action-disabled-text-color | `@gray-6` | - | diff --git a/src/popover/README.zh-CN.md b/src/popover/README.zh-CN.md index 5910186df..84c901f65 100644 --- a/src/popover/README.zh-CN.md +++ b/src/popover/README.zh-CN.md @@ -238,3 +238,23 @@ export default { | --------- | --------------------------- | | default | 自定义菜单内容 | | reference | 触发 Popover 显示的元素内容 | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ----------------------------------------- | ------------------- | ---- | +| @popover-arrow-size | `6px` | - | +| @popover-border-radius | `@border-radius-lg` | - | +| @popover-action-width | `128px` | - | +| @popover-action-height | `44px` | - | +| @popover-action-font-size | `@font-size-md` | - | +| @popover-action-line-height | `@line-height-md` | - | +| @popover-action-icon-size | `20px` | - | +| @popover-light-text-color | `@text-color` | - | +| @popover-light-background-color | `@white` | - | +| @popover-light-action-disabled-text-color | `@gray-5` | - | +| @popover-dark-text-color | `@white` | - | +| @popover-dark-background-color | `#4a4a4a` | - | +| @popover-dark-action-disabled-text-color | `@gray-6` | - | diff --git a/src/popup/README.md b/src/popup/README.md index 4b4aa8720..f6d5e6080 100644 --- a/src/popup/README.md +++ b/src/popup/README.md @@ -138,3 +138,18 @@ export default { | close | Emitted when closing Popup | - | | opened | Emitted when Popup is opened | - | | closed | Emitted when Popup is closed | - | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| --- | --- | --- | +| @popup-background-color | `@white` | - | +| @popup-transition | `transform @animation-duration-base` | - | +| @popup-round-border-radius | `16px` | - | +| @popup-close-icon-size | `22px` | - | +| @popup-close-icon-color | `@gray-5` | - | +| @popup-close-icon-active-color | `@gray-6` | - | +| @popup-close-icon-margin | `16px` | - | +| @popup-close-icon-z-index | `1` | - | diff --git a/src/popup/README.zh-CN.md b/src/popup/README.zh-CN.md index 67035c47a..8b8510c02 100644 --- a/src/popup/README.zh-CN.md +++ b/src/popup/README.zh-CN.md @@ -149,3 +149,18 @@ export default { | close | 关闭弹出层时触发 | - | | opened | 打开弹出层且动画结束后触发 | - | | closed | 关闭弹出层且动画结束后触发 | - | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ------------------------------ | ------------------------------------ | ---- | +| @popup-background-color | `@white` | - | +| @popup-transition | `transform @animation-duration-base` | - | +| @popup-round-border-radius | `16px` | - | +| @popup-close-icon-size | `22px` | - | +| @popup-close-icon-color | `@gray-5` | - | +| @popup-close-icon-active-color | `@gray-6` | - | +| @popup-close-icon-margin | `16px` | - | +| @popup-close-icon-z-index | `1` | - | diff --git a/src/progress/README.md b/src/progress/README.md index 76e84f983..c044efef8 100644 --- a/src/progress/README.md +++ b/src/progress/README.md @@ -69,3 +69,18 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Progress instance and call insta | Name | Description | Attribute | Return value | | --- | --- | --- | --- | | resize | Resize Progress when container element resized or visibility changed | - | - | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| -------------------------------- | --------------- | ----------- | +| @progress-height | `4px` | - | +| @progress-color | `@blue` | - | +| @progress-background-color | `@gray-3` | - | +| @progress-pivot-padding | `0 5px` | - | +| @progress-pivot-text-color | `@white` | - | +| @progress-pivot-font-size | `@font-size-xs` | - | +| @progress-pivot-line-height | `1.6` | - | +| @progress-pivot-background-color | `@blue` | - | diff --git a/src/progress/README.zh-CN.md b/src/progress/README.zh-CN.md index 3517867ae..3965aaff0 100644 --- a/src/progress/README.zh-CN.md +++ b/src/progress/README.zh-CN.md @@ -78,6 +78,21 @@ Vue.use(Progress); | ------ | -------------------------------------------- | ---- | ------ | | resize | 外层元素大小变化后，可以调用此方法来触发重绘 | - | - | +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| -------------------------------- | --------------- | ---- | +| @progress-height | `4px` | - | +| @progress-color | `@blue` | - | +| @progress-background-color | `@gray-3` | - | +| @progress-pivot-padding | `0 5px` | - | +| @progress-pivot-text-color | `@white` | - | +| @progress-pivot-font-size | `@font-size-xs` | - | +| @progress-pivot-line-height | `1.6` | - | +| @progress-pivot-background-color | `@blue` | - | + ## 常见问题 ### 组件从隐藏状态切换到显示状态时，渲染不正确？ diff --git a/src/pull-refresh/README.md b/src/pull-refresh/README.md index cb9355f5e..c5c05a6b6 100644 --- a/src/pull-refresh/README.md +++ b/src/pull-refresh/README.md @@ -123,3 +123,13 @@ Use slots to custom tips. | loosing | Content of head when at loosing | { distance } | | loading | Content of head when at loading | { distance } | | success | Content of head when succeed | - | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| ----------------------------- | --------------- | ----------- | +| @pull-refresh-head-height | `50px` | - | +| @pull-refresh-head-font-size | `@font-size-md` | - | +| @pull-refresh-head-text-color | `@gray-6` | - | diff --git a/src/pull-refresh/README.zh-CN.md b/src/pull-refresh/README.zh-CN.md index aaffe4a61..e991574eb 100644 --- a/src/pull-refresh/README.zh-CN.md +++ b/src/pull-refresh/README.zh-CN.md @@ -131,6 +131,16 @@ export default { | loading | 加载过程中顶部内容 | { distance: 当前下拉距离 } | | success | 刷新成功提示内容 | - | +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ----------------------------- | --------------- | ---- | +| @pull-refresh-head-height | `50px` | - | +| @pull-refresh-head-font-size | `@font-size-md` | - | +| @pull-refresh-head-text-color | `@gray-6` | - | + ## 常见问题 ### PullReresh 的内容未填满屏幕时，只有一部分区域可以下拉？ diff --git a/src/radio/README.md b/src/radio/README.md index 91e51c7ca..4da798c25 100644 --- a/src/radio/README.md +++ b/src/radio/README.md @@ -187,3 +187,19 @@ export default { | ------- | ------------ | ------------------ | | default | Custom label | - | | icon | Custom icon | _checked: boolean_ | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| -------------------------------- | -------------------------- | ----------- | +| @radio-size | `20px` | - | +| @radio-border-color | `@gray-5` | - | +| @radio-transition-duration | `@animation-duration-fast` | - | +| @radio-label-margin | `@padding-xs` | - | +| @radio-label-color | `@text-color` | - | +| @radio-checked-icon-color | `@blue` | - | +| @radio-disabled-icon-color | `@gray-5` | - | +| @radio-disabled-label-color | `@gray-5` | - | +| @radio-disabled-background-color | `@border-color` | - | diff --git a/src/radio/README.zh-CN.md b/src/radio/README.zh-CN.md index c54caf793..3fce26f41 100644 --- a/src/radio/README.zh-CN.md +++ b/src/radio/README.zh-CN.md @@ -205,3 +205,19 @@ export default { | ------- | ---------- | ------------------ | | default | 自定义文本 | - | | icon | 自定义图标 | _checked: boolean_ | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| -------------------------------- | -------------------------- | ---- | +| @radio-size | `20px` | - | +| @radio-border-color | `@gray-5` | - | +| @radio-transition-duration | `@animation-duration-fast` | - | +| @radio-label-margin | `@padding-xs` | - | +| @radio-label-color | `@text-color` | - | +| @radio-checked-icon-color | `@blue` | - | +| @radio-disabled-icon-color | `@gray-5` | - | +| @radio-disabled-label-color | `@gray-5` | - | +| @radio-disabled-background-color | `@border-color` | - | diff --git a/src/rate/README.md b/src/rate/README.md index 3549658ff..82f0ecf88 100644 --- a/src/rate/README.md +++ b/src/rate/README.md @@ -121,3 +121,15 @@ export default { | Event | Description | Parameters | | ------ | ------------------------- | ------------ | | change | Emitted when rate changed | current rate | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| ------------------------- | --------------- | ----------- | +| @rate-icon-size | `20px` | - | +| @rate-icon-gutter | `@padding-base` | - | +| @rate-icon-void-color | `@gray-5` | - | +| @rate-icon-full-color | `@red` | - | +| @rate-icon-disabled-color | `@gray-5` | - | diff --git a/src/rate/README.zh-CN.md b/src/rate/README.zh-CN.md index 5c7a140c2..183513d55 100644 --- a/src/rate/README.zh-CN.md +++ b/src/rate/README.zh-CN.md @@ -125,3 +125,15 @@ export default { | 事件名 | 说明 | 回调参数 | | ------ | ------------------------ | -------- | | change | 当前分值变化时触发的事件 | 当前分值 | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ------------------------- | --------------- | ---- | +| @rate-icon-size | `20px` | - | +| @rate-icon-gutter | `@padding-base` | - | +| @rate-icon-void-color | `@gray-5` | - | +| @rate-icon-full-color | `@red` | - | +| @rate-icon-disabled-color | `@gray-5` | - | diff --git a/src/search/README.md b/src/search/README.md index 8c92d43e9..09385bdee 100644 --- a/src/search/README.md +++ b/src/search/README.md @@ -149,3 +149,21 @@ Use `action` slot to custom right button, `cancel` event will no longer be Emitt | label | Custom Search label | | left-icon | Custom left icon | | right-icon | Custom right icon | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| -------------------------------- | ------------------ | ----------- | +| @search-padding | `10px @padding-sm` | - | +| @search-background-color | `@white` | - | +| @search-content-background-color | `@gray-1` | - | +| @search-input-height | `34px` | - | +| @search-label-padding | `0 5px` | - | +| @search-label-color | `@text-color` | - | +| @search-label-font-size | `@font-size-md` | - | +| @search-left-icon-color | `@gray-6` | - | +| @search-action-padding | `0 @padding-xs` | - | +| @search-action-text-color | `@text-color` | - | +| @search-action-font-size | `@font-size-md` | - | diff --git a/src/search/README.zh-CN.md b/src/search/README.zh-CN.md index 41506b665..59f7e6376 100644 --- a/src/search/README.zh-CN.md +++ b/src/search/README.zh-CN.md @@ -166,6 +166,24 @@ export default { | left-icon | 自定义左侧图标（搜索框内） | | right-icon | 自定义右侧图标（搜索框内） | +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| -------------------------------- | ------------------ | ---- | +| @search-padding | `10px @padding-sm` | - | +| @search-background-color | `@white` | - | +| @search-content-background-color | `@gray-1` | - | +| @search-input-height | `34px` | - | +| @search-label-padding | `0 5px` | - | +| @search-label-color | `@text-color` | - | +| @search-label-font-size | `@font-size-md` | - | +| @search-left-icon-color | `@gray-6` | - | +| @search-action-padding | `0 @padding-xs` | - | +| @search-action-text-color | `@text-color` | - | +| @search-action-font-size | `@font-size-md` | - | + ## 常见问题 ### 在桌面端点击清除按钮无效？ diff --git a/src/share-sheet/README.md b/src/share-sheet/README.md index d904dd4da..43e72f19a 100644 --- a/src/share-sheet/README.md +++ b/src/share-sheet/README.md @@ -146,3 +146,25 @@ export default { | ----------- | ------------------ | | title | Custom title | | description | Custom description | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| --- | --- | --- | +| @share-sheet-header-padding | `@padding-sm @padding-md @padding-base` | - | +| @share-sheet-title-color | `@text-color` | - | +| @share-sheet-title-font-size | `@font-size-md` | - | +| @share-sheet-title-line-height | `@line-height-md` | - | +| @share-sheet-description-color | `@gray-6` | - | +| @share-sheet-description-font-size | `@font-size-sm` | - | +| @share-sheet-description-line-height | `16px` | - | +| @share-sheet-icon-size | `48px` | - | +| @share-sheet-option-name-color | `@gray-7` | - | +| @share-sheet-option-name-font-size | `@font-size-sm` | - | +| @share-sheet-option-description-color | `@gray-5` | - | +| @share-sheet-option-description-font-size | `@font-size-sm` | - | +| @share-sheet-cancel-button-font-size | `@font-size-lg` | - | +| @share-sheet-cancel-button-height | `48px` | - | +| @share-sheet-cancel-button-background | `@white` | - | diff --git a/src/share-sheet/README.zh-CN.md b/src/share-sheet/README.zh-CN.md index c24d21bc2..aee37131d 100644 --- a/src/share-sheet/README.zh-CN.md +++ b/src/share-sheet/README.zh-CN.md @@ -195,6 +195,28 @@ export default { | title | 自定义顶部标题 | | description | 自定义描述文字 | +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| @share-sheet-header-padding | `@padding-sm @padding-md @padding-base` | - | +| @share-sheet-title-color | `@text-color` | - | +| @share-sheet-title-font-size | `@font-size-md` | - | +| @share-sheet-title-line-height | `@line-height-md` | - | +| @share-sheet-description-color | `@gray-6` | - | +| @share-sheet-description-font-size | `@font-size-sm` | - | +| @share-sheet-description-line-height | `16px` | - | +| @share-sheet-icon-size | `48px` | - | +| @share-sheet-option-name-color | `@gray-7` | - | +| @share-sheet-option-name-font-size | `@font-size-sm` | - | +| @share-sheet-option-description-color | `@gray-5` | - | +| @share-sheet-option-description-font-size | `@font-size-sm` | - | +| @share-sheet-cancel-button-font-size | `@font-size-lg` | - | +| @share-sheet-cancel-button-height | `48px` | - | +| @share-sheet-cancel-button-background | `@white` | - | + ## 常见问题 ### 如何实现分享逻辑？ diff --git a/src/sidebar/README.md b/src/sidebar/README.md index 6b283d080..ba05cfc5f 100644 --- a/src/sidebar/README.md +++ b/src/sidebar/README.md @@ -116,3 +116,24 @@ export default { | Name | Description | | --------------- | ----------------- | | title `v2.10.8` | Custom item title | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| ---------------------------------- | ------------------- | ----------- | +| @sidebar-width | `80px` | - | +| @sidebar-font-size | `@font-size-md` | - | +| @sidebar-line-height | `@line-height-md` | - | +| @sidebar-text-color | `@text-color` | - | +| @sidebar-disabled-text-color | `@gray-5` | - | +| @sidebar-padding | `20px @padding-sm` | - | +| @sidebar-active-color | `@active-color` | - | +| @sidebar-background-color | `@background-color` | - | +| @sidebar-selected-font-weight | `@font-weight-bold` | - | +| @sidebar-selected-text-color | `@text-color` | - | +| @sidebar-selected-border-width | `4px` | - | +| @sidebar-selected-border-height | `16px` | - | +| @sidebar-selected-border-color | `@red` | - | +| @sidebar-selected-background-color | `@white` | - | diff --git a/src/sidebar/README.zh-CN.md b/src/sidebar/README.zh-CN.md index d79e01c25..354ddff11 100644 --- a/src/sidebar/README.zh-CN.md +++ b/src/sidebar/README.zh-CN.md @@ -125,3 +125,24 @@ export default { | Name | Description | | --------------- | ----------- | | title `v2.10.8` | 自定义标题 | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ---------------------------------- | ------------------- | ---- | +| @sidebar-width | `80px` | - | +| @sidebar-font-size | `@font-size-md` | - | +| @sidebar-line-height | `@line-height-md` | - | +| @sidebar-text-color | `@text-color` | - | +| @sidebar-disabled-text-color | `@gray-5` | - | +| @sidebar-padding | `20px @padding-sm` | - | +| @sidebar-active-color | `@active-color` | - | +| @sidebar-background-color | `@background-color` | - | +| @sidebar-selected-font-weight | `@font-weight-bold` | - | +| @sidebar-selected-text-color | `@text-color` | - | +| @sidebar-selected-border-width | `4px` | - | +| @sidebar-selected-border-height | `16px` | - | +| @sidebar-selected-border-color | `@red` | - | +| @sidebar-selected-background-color | `@white` | - | diff --git a/src/skeleton/README.md b/src/skeleton/README.md index 3cf31e308..1b7d67282 100644 --- a/src/skeleton/README.md +++ b/src/skeleton/README.md @@ -60,3 +60,17 @@ export default { | title-width | Title width | _number \| string_ | `40%` | | avatar-size | Size of avatar placeholder | _number \| string_ | `32px` | | avatar-shape | Shape of avatar placeholder，can be set to `square` | _string_ | `round` | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| --------------------------------- | --------------- | ----------- | +| @skeleton-row-height | `16px` | - | +| @skeleton-row-background-color | `@active-color` | - | +| @skeleton-row-margin-top | `@padding-sm` | - | +| @skeleton-title-width | `40%` | - | +| @skeleton-avatar-size | `32px` | - | +| @skeleton-avatar-background-color | `@active-color` | - | +| @skeleton-animation-duration | `1.2s` | - | diff --git a/src/skeleton/README.zh-CN.md b/src/skeleton/README.zh-CN.md index 5695c7359..17797da35 100644 --- a/src/skeleton/README.zh-CN.md +++ b/src/skeleton/README.zh-CN.md @@ -70,3 +70,17 @@ export default { | title-width | 标题占位图宽度 | _number \| string_ | `40%` | | avatar-size | 头像占位图大小 | _number \| string_ | `32px` | | avatar-shape | 头像占位图形状，可选值为`square` | _string_ | `round` | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| --------------------------------- | --------------- | ---- | +| @skeleton-row-height | `16px` | - | +| @skeleton-row-background-color | `@active-color` | - | +| @skeleton-row-margin-top | `@padding-sm` | - | +| @skeleton-title-width | `40%` | - | +| @skeleton-avatar-size | `32px` | - | +| @skeleton-avatar-background-color | `@active-color` | - | +| @skeleton-animation-duration | `1.2s` | - | diff --git a/src/sku/README.md b/src/sku/README.md index f833e65f6..7ea32c296 100644 --- a/src/sku/README.md +++ b/src/sku/README.md @@ -395,3 +395,13 @@ skuData: { } } ``` + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| -------------------------- | ----------------------- | ----------- | +| @sku-item-background-color | `@background-color` | - | +| @sku-icon-gray-color | `@gray-4` | - | +| @sku-upload-mask-color | `rgba(50, 50, 51, 0.8)` | - | diff --git a/src/sku/README.zh-CN.md b/src/sku/README.zh-CN.md index 3248a75df..1a832df1b 100644 --- a/src/sku/README.zh-CN.md +++ b/src/sku/README.zh-CN.md @@ -399,3 +399,13 @@ skuData: { }, } ``` + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| -------------------------- | ----------------------- | ---- | +| @sku-item-background-color | `@background-color` | - | +| @sku-icon-gray-color | `@gray-4` | - | +| @sku-upload-mask-color | `rgba(50, 50, 51, 0.8)` | - | diff --git a/src/slider/README.md b/src/slider/README.md index d88d0cf3a..b4f1d8a58 100644 --- a/src/slider/README.md +++ b/src/slider/README.md @@ -171,3 +171,19 @@ export default { | Name | Description | | ------ | ------------- | | button | Custom button | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| --- | --- | --- | +| @slider-active-background-color | `@blue` | - | +| @slider-inactive-background-color | `@gray-3` | - | +| @slider-disabled-opacity | `@disabled-opacity` | - | +| @slider-bar-height | `2px` | - | +| @slider-button-width | `24px` | - | +| @slider-button-height | `24px` | - | +| @slider-button-border-radius | `50%` | - | +| @slider-button-background-color | `@white` | - | +| @slider-button-box-shadow | `0 1px 2px rgba(0, 0, 0, 0.5)` | - | diff --git a/src/slider/README.zh-CN.md b/src/slider/README.zh-CN.md index b36d9b0d8..ad55e5532 100644 --- a/src/slider/README.zh-CN.md +++ b/src/slider/README.zh-CN.md @@ -177,3 +177,19 @@ export default { | 名称 | 说明 | | ------ | -------------- | | button | 自定义滑动按钮 | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| --------------------------------- | ------------------------------ | ---- | +| @slider-active-background-color | `@blue` | - | +| @slider-inactive-background-color | `@gray-3` | - | +| @slider-disabled-opacity | `@disabled-opacity` | - | +| @slider-bar-height | `2px` | - | +| @slider-button-width | `24px` | - | +| @slider-button-height | `24px` | - | +| @slider-button-border-radius | `50%` | - | +| @slider-button-background-color | `@white` | - | +| @slider-button-box-shadow | `0 1px 2px rgba(0, 0, 0, 0.5)` | - | diff --git a/src/stepper/README.md b/src/stepper/README.md index f806adaad..70310bb2a 100644 --- a/src/stepper/README.md +++ b/src/stepper/README.md @@ -141,3 +141,24 @@ export default { | minus | Emitted when the minus button is clicked | - | | focus | Emitted when the input is focused | _event: Event_ | | blur | Emitted when the input is blured | _event: Event_ | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| ---------------------------------------- | ------------------- | ----------- | +| @stepper-active-color | `#e8e8e8` | - | +| @stepper-background-color | `@active-color` | - | +| @stepper-button-icon-color | `@text-color` | - | +| @stepper-button-disabled-color | `@background-color` | - | +| @stepper-button-disabled-icon-color | `@gray-5` | - | +| @stepper-button-round-theme-color | `@red` | - | +| @stepper-input-width | `32px` | - | +| @stepper-input-height | `28px` | - | +| @stepper-input-font-size | `@font-size-md` | - | +| @stepper-input-line-height | `normal` | - | +| @stepper-input-text-color | `@text-color` | - | +| @stepper-input-disabled-text-color | `@gray-5` | - | +| @stepper-input-disabled-background-color | `@active-color` | - | +| @stepper-border-radius | `@border-radius-md` | - | diff --git a/src/stepper/README.zh-CN.md b/src/stepper/README.zh-CN.md index 4cc6968e1..51759683e 100644 --- a/src/stepper/README.zh-CN.md +++ b/src/stepper/README.zh-CN.md @@ -168,6 +168,27 @@ export default { | focus | 输入框聚焦时触发 | _event: Event_ | | blur | 输入框失焦时触发 | _event: Event_ | +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ---------------------------------------- | ------------------- | ---- | +| @stepper-active-color | `#e8e8e8` | - | +| @stepper-background-color | `@active-color` | - | +| @stepper-button-icon-color | `@text-color` | - | +| @stepper-button-disabled-color | `@background-color` | - | +| @stepper-button-disabled-icon-color | `@gray-5` | - | +| @stepper-button-round-theme-color | `@red` | - | +| @stepper-input-width | `32px` | - | +| @stepper-input-height | `28px` | - | +| @stepper-input-font-size | `@font-size-md` | - | +| @stepper-input-line-height | `normal` | - | +| @stepper-input-text-color | `@text-color` | - | +| @stepper-input-disabled-text-color | `@gray-5` | - | +| @stepper-input-disabled-background-color | `@active-color` | - | +| @stepper-border-radius | `@border-radius-md` | - | + ## 常见问题 ### 为什么 value 有时候会变成 string 类型？ diff --git a/src/steps/README.md b/src/steps/README.md index 7bed96a39..6a2f17a75 100644 --- a/src/steps/README.md +++ b/src/steps/README.md @@ -88,3 +88,22 @@ export default { | Event | Description | Arguments | | --- | --- | --- | | click-step `v2.5.9` | Emitted when a step's title or icon is clicked | _index: number_ | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| -------------------------------- | --------------- | ----------- | +| @step-text-color | `@gray-6` | - | +| @step-active-color | `@green` | - | +| @step-process-text-color | `@text-color` | - | +| @step-font-size | `@font-size-md` | - | +| @step-line-color | `@border-color` | - | +| @step-finish-line-color | `@green` | - | +| @step-finish-text-color | `@text-color` | - | +| @step-icon-size | `12px` | - | +| @step-circle-size | `5px` | - | +| @step-circle-color | `@gray-6` | - | +| @step-horizontal-title-font-size | `@font-size-sm` | - | +| @steps-background-color | `@white` | - | diff --git a/src/steps/README.zh-CN.md b/src/steps/README.zh-CN.md index 73a61e30a..bb93cd1e7 100644 --- a/src/steps/README.zh-CN.md +++ b/src/steps/README.zh-CN.md @@ -98,3 +98,22 @@ export default { | 事件名 | 说明 | 回调参数 | | ------------------- | -------------------------- | --------------- | | click-step `v2.5.9` | 点击步骤的标题或图标时触发 | _index: number_ | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| -------------------------------- | --------------- | ---- | +| @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` | - | diff --git a/src/sticky/README.md b/src/sticky/README.md index 8d73f2d24..509e37a65 100644 --- a/src/sticky/README.md +++ b/src/sticky/README.md @@ -65,3 +65,11 @@ export default { | Event | Description | Arguments | | ------ | ---------------------- | ------------------------------ | | scroll | Emitted when scrolling | object: { scrollTop, isFixed } | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| Name | Default Value | Description | +| --------------- | ------------- | ----------- | +| @sticky-z-index | `99` | - | diff --git a/src/sticky/README.zh-CN.md b/src/sticky/README.zh-CN.md index fe6db1108..58cb0aebe 100644 --- a/src/sticky/README.zh-CN.md +++ b/src/sticky/README.zh-CN.md @@ -75,3 +75,11 @@ export default { | 事件名 | 说明 | 回调参数 | | ------ | ---------- | ---------------------------------------------- | | scroll | 滚动时触发 | { scrollTop: 距离顶部位置, isFixed: 是否吸顶 } | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| --------------- | ------ | ---- | +| @sticky-z-index | `99` | - | diff --git a/src/submit-bar/README.md b/src/submit-bar/README.md index b7176a1cb..0ed6606ea 100644 --- a/src/submit-bar/README.md +++ b/src/submit-bar/README.md @@ -88,3 +88,29 @@ Use slot to add custom contents. | button `v2.10.12` | Custom button | | top | Custom top content | | tip | Custom tips | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| 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-price-font-size | `@font-size-md` | - | +| @submit-bar-currency-font-size | `@font-size-md` | - | +| @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-integer-font-size | `20px` | - | +| @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 6e6862f52..17c3d4fd6 100644 --- a/src/submit-bar/README.zh-CN.md +++ b/src/submit-bar/README.zh-CN.md @@ -93,3 +93,29 @@ Vue.use(SubmitBar); | button `v2.10.12` | 自定义按钮 | | top | 自定义订单栏上方内容 | | tip | 提示文案中的额外内容 | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ----------------------------------- | ---------------------------- | ---- | +| @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-price-font-size | `@font-size-md` | - | +| @submit-bar-currency-font-size | `@font-size-md` | - | +| @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-integer-font-size | `20px` | - | +| @submit-bar-price-font-family | `@price-integer-font-family` | - | diff --git a/src/swipe-cell/README.md b/src/swipe-cell/README.md index 1e14cb08f..bc7fd3c41 100644 --- a/src/swipe-cell/README.md +++ b/src/swipe-cell/README.md @@ -137,3 +137,14 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get SwipeCell instance and call inst | ----- | --------------- | ------------------------ | ------------ | | open | open SwipeCell | position: `left | right` | - | | close | close SwipeCell | - | - | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| 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` | - | diff --git a/src/swipe-cell/README.zh-CN.md b/src/swipe-cell/README.zh-CN.md index ae4fbbc01..dc6327be4 100644 --- a/src/swipe-cell/README.zh-CN.md +++ b/src/swipe-cell/README.zh-CN.md @@ -152,6 +152,17 @@ beforeClose 的第一个参数为对象，对象中包含以下属性： | open | 打开单元格侧边栏 | position: `left | right` | - | | close | 收起单元格侧边栏 | - | - | +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| @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` | - | + ## 常见问题 ### 在桌面端无法操作组件？ diff --git a/src/swipe/README.md b/src/swipe/README.md index fc16bdde7..208395a95 100644 --- a/src/swipe/README.md +++ b/src/swipe/README.md @@ -208,3 +208,16 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Swipe instance and call instance | --------- | ---------------- | | default | Content | | indicator | Custom indicator | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| 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` | - | diff --git a/src/swipe/README.zh-CN.md b/src/swipe/README.zh-CN.md index e0e80ccb0..a52cbe5ca 100644 --- a/src/swipe/README.zh-CN.md +++ b/src/swipe/README.zh-CN.md @@ -219,6 +219,19 @@ export default { | default | 轮播内容 | | indicator | 自定义指示器 | +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ------------------------------------------ | --------------- | ---- | +| @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` | - | + ## 常见问题 ### 滑动轮播时为什么触发了 click 事件？ diff --git a/src/switch/README.md b/src/switch/README.md index 1cd2c14e1..3f3d1a8d1 100644 --- a/src/switch/README.md +++ b/src/switch/README.md @@ -108,3 +108,21 @@ export default { | ------ | --------------------------------- | -------------- | | change | Emitted when check status changed | _value: any_ | | click | Emitted when component is clicked | _event: Event_ | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| 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)` | - | diff --git a/src/switch/README.zh-CN.md b/src/switch/README.zh-CN.md index 0485c573b..c83f06e47 100644 --- a/src/switch/README.zh-CN.md +++ b/src/switch/README.zh-CN.md @@ -124,3 +124,21 @@ export default { | ------ | ------------------ | -------------- | | change | 开关状态切换时触发 | _value: any_ | | click | 点击时触发 | _event: Event_ | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| --- | --- | --- | +| @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)` | - | diff --git a/src/tab/README.md b/src/tab/README.md index 1fb5b7591..4a79c1c93 100644 --- a/src/tab/README.md +++ b/src/tab/README.md @@ -285,3 +285,22 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Tabs instance and call instance | ------- | ---------------- | | default | Content of tab | | title | Custom tab title | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| 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` | - | diff --git a/src/tab/README.zh-CN.md b/src/tab/README.zh-CN.md index b33490f94..815346c0c 100644 --- a/src/tab/README.zh-CN.md +++ b/src/tab/README.zh-CN.md @@ -294,6 +294,25 @@ export default { | default | 标签页内容 | | title | 自定义标题 | +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| -------------------------- | --------------------- | ---- | +| @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` | - | + ## 常见问题 ### 组件从隐藏状态切换到显示状态时，底部条位置错误？ diff --git a/src/tabbar/README.md b/src/tabbar/README.md index 456e2cad0..af4de6846 100644 --- a/src/tabbar/README.md +++ b/src/tabbar/README.md @@ -186,3 +186,20 @@ export default { | Name | Description | SlotProps | | ---- | ----------- | --------- | | icon | Custom icon | active | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| 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 | `@tabbar-background-color` | - | +| @tabbar-item-line-height | `1` | - | +| @tabbar-item-icon-size | `22px` | - | +| @tabbar-item-margin-bottom | `4px` | - | diff --git a/src/tabbar/README.zh-CN.md b/src/tabbar/README.zh-CN.md index 75c2c72d7..6d32d495f 100644 --- a/src/tabbar/README.zh-CN.md +++ b/src/tabbar/README.zh-CN.md @@ -195,3 +195,20 @@ export default { | 名称 | 说明 | 参数 | | ---- | ---------- | ---------------------- | | icon | 自定义图标 | active: 是否为选中标签 | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ------------------------------------ | -------------------------- | ---- | +| @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 | `@tabbar-background-color` | - | +| @tabbar-item-line-height | `1` | - | +| @tabbar-item-icon-size | `22px` | - | +| @tabbar-item-margin-bottom | `4px` | - | diff --git a/src/tag/README.md b/src/tag/README.md index 218414f0e..ad2442e37 100644 --- a/src/tag/README.md +++ b/src/tag/README.md @@ -104,3 +104,26 @@ export default { | ----- | ---------------------------------- | -------------- | | click | Emitted when component is clicked | _event: Event_ | | close | Emitted when close icon is clicked | - | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| 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` | - | diff --git a/src/tag/README.zh-CN.md b/src/tag/README.zh-CN.md index b3ed64347..e813d52df 100644 --- a/src/tag/README.zh-CN.md +++ b/src/tag/README.zh-CN.md @@ -118,3 +118,26 @@ export default { | ------ | -------------- | -------------- | | click | 点击时触发 | _event: Event_ | | close | 关闭标签时触发 | - | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| --------------------------- | --------------------------- | ---- | +| @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` | - | diff --git a/src/toast/README.md b/src/toast/README.md index a3184da13..e8173dd20 100644 --- a/src/toast/README.md +++ b/src/toast/README.md @@ -168,3 +168,25 @@ Toast.resetDefaultOptions('loading'); | onClose | Callback function after close | _Function_ | - | | transition | Transition, equivalent to `name` prop of [transtion](https://vuejs.org/v2/api/#transition) | _string_ | `van-fade` | | getContainer | Return the mount node for Toast | _string \| () => Element_ | `body` | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| 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%` | - | diff --git a/src/toast/README.zh-CN.md b/src/toast/README.zh-CN.md index 310c1a62b..f5c3d6d83 100644 --- a/src/toast/README.zh-CN.md +++ b/src/toast/README.zh-CN.md @@ -183,3 +183,25 @@ Toast.resetDefaultOptions('loading'); | onClose | 关闭时的回调函数 | _Function_ | - | | transition | 动画类名，等价于 [transtion](https://cn.vuejs.org/v2/api/index.html#transition) 的`name`属性 | _string_ | `van-fade` | | getContainer | 指定挂载的节点，[用法示例](#/zh-CN/popup#zhi-ding-gua-zai-wei-zhi) | _string \| () => Element_ | `body` | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ------------------------------- | ------------------------- | ---- | +| @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%` | - | diff --git a/src/tree-select/README.md b/src/tree-select/README.md index 302759846..18172f653 100644 --- a/src/tree-select/README.md +++ b/src/tree-select/README.md @@ -168,3 +168,18 @@ In every tree object, `text` property defines `id` stands for the unique key whi }, ]; ``` + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| 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` | - | diff --git a/src/tree-select/README.zh-CN.md b/src/tree-select/README.zh-CN.md index 6823be6c7..e2d36f34a 100644 --- a/src/tree-select/README.zh-CN.md +++ b/src/tree-select/README.zh-CN.md @@ -174,3 +174,18 @@ export default { }, ]; ``` + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ------------------------------------- | ------------------- | ---- | +| @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` | - | diff --git a/src/uploader/README.md b/src/uploader/README.md index 55baef846..3f356c3b8 100644 --- a/src/uploader/README.md +++ b/src/uploader/README.md @@ -259,3 +259,34 @@ Use [ref](https://vuejs.org/v2/api/#ref) to get Uploader instance and call insta | --- | --- | --- | --- | | closeImagePreview | Close full screen image preview | - | - | | chooseFile `v2.5.6` | Trigger choosing files, works with the user action context only because of browser security | - | - | + +### Less Variables + +How to use: [Custom Theme](#/en-US/theme). + +| 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-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` | - | diff --git a/src/uploader/README.zh-CN.md b/src/uploader/README.zh-CN.md index b81ac479d..85eb82c6e 100644 --- a/src/uploader/README.zh-CN.md +++ b/src/uploader/README.zh-CN.md @@ -291,3 +291,34 @@ before-read、after-read、before-delete 执行时会传递以下回调参数： | --- | --- | --- | --- | | closeImagePreview | 关闭全屏的图片预览 | - | - | | chooseFile `v2.5.6` | 主动调起文件选择，由于浏览器安全限制，只有在用户触发操作的上下文中调用才有效 | - | - | + +### 样式变量 + +组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。 + +| 名称 | 默认值 | 描述 | +| ---------------------------------- | -------------------- | ---- | +| @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-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` | - |