mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-05 19:41:42 +08:00
docs: display all less variables (#7604)
This commit is contained in:
neverland
GitHub
parent
0b2b3a91b5
commit
862adcd8eb
@ -2,21 +2,81 @@
|
||||
|
||||
### Intro
|
||||
|
||||
Vant provides a set of default themes, if you want to custom the theme color or other styles, you can use the following methods:
|
||||
Vant use [Less](http://lesscss.org/) as css preprocessor，you can override the default less variables to custom theme.
|
||||
|
||||
### Less variables
|
||||
|
||||
Vant use [Less](http://lesscss.org/) as css preprocessor，you can modify less variables to custom theme.
|
||||
|
||||
There are some basic variables below, all available variables could be found in [var.less](https://github.com/youzan/vant/blob/dev/src/style/var.less)。
|
||||
|
||||
```less
|
||||
// Color Palette
|
||||
@black: #000;
|
||||
@white: #fff;
|
||||
@gray-1: #f7f8fa;
|
||||
@gray-2: #f2f3f5;
|
||||
@gray-3: #ebedf0;
|
||||
@gray-4: #dcdee0;
|
||||
@gray-5: #c8c9cc;
|
||||
@gray-6: #969799;
|
||||
@gray-7: #646566;
|
||||
@gray-8: #323233;
|
||||
@red: #ee0a24;
|
||||
@blue: #1989fa;
|
||||
@orange: #ff976a;
|
||||
@orange-dark: #ed6a0c;
|
||||
@orange-light: #fffbe8;
|
||||
@green: #07c160;
|
||||
|
||||
// Gradient Colors
|
||||
@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
|
||||
@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
|
||||
|
||||
// Component Colors
|
||||
@text-color: #323233;
|
||||
@border-color: #ebedf0;
|
||||
@active-color: #f2f3f5;
|
||||
@background-color: #f7f8fa;
|
||||
@text-color: @gray-8;
|
||||
@active-color: @gray-2;
|
||||
@active-opacity: 0.7;
|
||||
@disabled-opacity: 0.5;
|
||||
@background-color: @gray-1;
|
||||
@background-color-light: #fafafa;
|
||||
@text-link-color: #576b95;
|
||||
|
||||
// Padding
|
||||
@padding-base: 4px;
|
||||
@padding-xs: @padding-base * 2;
|
||||
@padding-sm: @padding-base * 3;
|
||||
@padding-md: @padding-base * 4;
|
||||
@padding-lg: @padding-base * 6;
|
||||
@padding-xl: @padding-base * 8;
|
||||
|
||||
// Font
|
||||
@font-size-xs: 10px;
|
||||
@font-size-sm: 12px;
|
||||
@font-size-md: 14px;
|
||||
@font-size-lg: 16px;
|
||||
@font-weight-bold: 500;
|
||||
@line-height-xs: 14px;
|
||||
@line-height-sm: 18px;
|
||||
@line-height-md: 20px;
|
||||
@line-height-lg: 22px;
|
||||
@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
|
||||
Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
|
||||
'Microsoft Yahei', sans-serif;
|
||||
@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
|
||||
sans-serif;
|
||||
|
||||
// Animation
|
||||
@animation-duration-base: 0.3s;
|
||||
@animation-duration-fast: 0.2s;
|
||||
@animation-timing-function-enter: ease-out;
|
||||
@animation-timing-function-leave: ease-in;
|
||||
|
||||
// Border
|
||||
@border-color: @gray-3;
|
||||
@border-width-base: 1px;
|
||||
@border-radius-sm: 2px;
|
||||
@border-radius-md: 4px;
|
||||
@border-radius-lg: 8px;
|
||||
@border-radius-max: 999px;
|
||||
```
|
||||
|
||||
## How to custom theme
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
### 介绍
|
||||
|
||||
Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以使用下面提供的方法。
|
||||
Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用者覆盖样式。如果你想完全替换主题色或者其他样式，可以按照本文档进行主题定制。
|
||||
|
||||
### 示例工程
|
||||
|
||||
@ -12,15 +12,77 @@ Vant 提供了一套默认主题，CSS 命名采用 BEM 的风格，方便使用
|
||||
|
||||
Vant 使用了 [Less](http://lesscss.org/) 对样式进行预处理，并内置了一些样式变量，通过替换样式变量即可定制你自己需要的主题。
|
||||
|
||||
下面是一些基本的样式变量，所有可用的颜色变量请参考 [配置文件](https://github.com/youzan/vant/blob/dev/src/style/var.less)。
|
||||
下面是所有的基础样式变量，组件的颜色变量请参考各个组件的文档或[配置文件](https://github.com/youzan/vant/blob/dev/src/style/var.less)。
|
||||
|
||||
```less
|
||||
// Color Palette
|
||||
@black: #000;
|
||||
@white: #fff;
|
||||
@gray-1: #f7f8fa;
|
||||
@gray-2: #f2f3f5;
|
||||
@gray-3: #ebedf0;
|
||||
@gray-4: #dcdee0;
|
||||
@gray-5: #c8c9cc;
|
||||
@gray-6: #969799;
|
||||
@gray-7: #646566;
|
||||
@gray-8: #323233;
|
||||
@red: #ee0a24;
|
||||
@blue: #1989fa;
|
||||
@orange: #ff976a;
|
||||
@orange-dark: #ed6a0c;
|
||||
@orange-light: #fffbe8;
|
||||
@green: #07c160;
|
||||
|
||||
// Gradient Colors
|
||||
@gradient-red: linear-gradient(to right, #ff6034, #ee0a24);
|
||||
@gradient-orange: linear-gradient(to right, #ffd01e, #ff8917);
|
||||
|
||||
// Component Colors
|
||||
@text-color: #323233;
|
||||
@border-color: #ebedf0;
|
||||
@active-color: #f2f3f5;
|
||||
@background-color: #f7f8fa;
|
||||
@text-color: @gray-8;
|
||||
@active-color: @gray-2;
|
||||
@active-opacity: 0.7;
|
||||
@disabled-opacity: 0.5;
|
||||
@background-color: @gray-1;
|
||||
@background-color-light: #fafafa;
|
||||
@text-link-color: #576b95;
|
||||
|
||||
// Padding
|
||||
@padding-base: 4px;
|
||||
@padding-xs: @padding-base * 2;
|
||||
@padding-sm: @padding-base * 3;
|
||||
@padding-md: @padding-base * 4;
|
||||
@padding-lg: @padding-base * 6;
|
||||
@padding-xl: @padding-base * 8;
|
||||
|
||||
// Font
|
||||
@font-size-xs: 10px;
|
||||
@font-size-sm: 12px;
|
||||
@font-size-md: 14px;
|
||||
@font-size-lg: 16px;
|
||||
@font-weight-bold: 500;
|
||||
@line-height-xs: 14px;
|
||||
@line-height-sm: 18px;
|
||||
@line-height-md: 20px;
|
||||
@line-height-lg: 22px;
|
||||
@base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue',
|
||||
Helvetica, Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB',
|
||||
'Microsoft Yahei', sans-serif;
|
||||
@price-integer-font-family: Avenir-Heavy, PingFang SC, Helvetica Neue, Arial,
|
||||
sans-serif;
|
||||
|
||||
// Animation
|
||||
@animation-duration-base: 0.3s;
|
||||
@animation-duration-fast: 0.2s;
|
||||
@animation-timing-function-enter: ease-out;
|
||||
@animation-timing-function-leave: ease-in;
|
||||
|
||||
// Border
|
||||
@border-color: @gray-3;
|
||||
@border-width-base: 1px;
|
||||
@border-radius-sm: 2px;
|
||||
@border-radius-md: 4px;
|
||||
@border-radius-lg: 8px;
|
||||
@border-radius-max: 999px;
|
||||
```
|
||||
|
||||
## 定制方法
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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？
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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 系统上初始化组件失败？
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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%` | - |
|
||||
|
||||
@ -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%` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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?
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 在桌面端无法操作组件？
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 如何引用本地图片？
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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 的运行机制是什么？
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 在桌面端无法操作组件？
|
||||
|
||||
@ -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)` | - |
|
||||
|
||||
@ -83,3 +83,12 @@ export default {
|
||||
| 名称 | 说明 |
|
||||
| ------- | ---------------------------------- |
|
||||
| default | 默认插槽，用于在遮罩层上方嵌入内容 |
|
||||
|
||||
### 样式变量
|
||||
|
||||
组件提供了下列 Less 变量，可用于自定义样式，使用方法请参考[主题定制](#/zh-CN/theme)。
|
||||
|
||||
| 名称 | 默认值 | 描述 |
|
||||
| ------------------------- | -------------------- | ---- |
|
||||
| @overlay-z-index | `1` | - |
|
||||
| @overlay-background-color | `rgba(0, 0, 0, 0.7)` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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)` | - |
|
||||
|
||||
@ -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)` | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 在桌面端无法操作组件？
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 组件从隐藏状态切换到显示状态时，渲染不正确？
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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 的内容未填满屏幕时，只有一部分区域可以下拉？
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 在桌面端点击清除按钮无效？
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
## 常见问题
|
||||
|
||||
### 如何实现分享逻辑？
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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` | - |
|
||||
|
||||
@ -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)` | - |
|
||||
|
||||
@ -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)` | - |
|
||||
|
||||
@ -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)` | - |
|
||||
|
||||
@ -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)` | - |
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user