@fjyueke/bify-mcp 1.0.8 → 1.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +21 -0
- package/dist/index.js +98 -12
- package/metaData/components/action-sheet/css-variables.md +16 -0
- package/metaData/components/action-sheet/doc.md +7 -7
- package/metaData/components/avatar/css-variables.md +53 -0
- package/metaData/components/avatar/doc.md +46 -24
- package/metaData/components/back-top/css-variables.md +18 -0
- package/metaData/components/back-top/doc.md +9 -9
- package/metaData/components/backdrop/css-variables.md +13 -0
- package/metaData/components/backdrop/doc.md +4 -4
- package/metaData/components/badge/css-variables.md +23 -0
- package/metaData/components/badge/doc.md +14 -14
- package/metaData/components/button/css-variables.md +97 -0
- package/metaData/components/button/doc.md +90 -38
- package/metaData/components/calendar/css-variables.md +75 -0
- package/metaData/components/calendar/doc.md +68 -30
- package/metaData/components/cascader/css-variables.md +45 -0
- package/metaData/components/cascader/doc.md +38 -21
- package/metaData/components/cell/css-variables.md +50 -0
- package/metaData/components/cell/doc.md +44 -32
- package/metaData/components/checkbox/css-variables.md +27 -0
- package/metaData/components/checkbox/doc.md +18 -18
- package/metaData/components/circle/css-variables.md +22 -0
- package/metaData/components/circle/doc.md +13 -13
- package/metaData/components/collapse/css-variables.md +18 -0
- package/metaData/components/collapse/doc.md +9 -9
- package/metaData/components/countdown/css-variables.md +14 -0
- package/metaData/components/countdown/doc.md +5 -5
- package/metaData/components/dialog/css-variables.md +58 -0
- package/metaData/components/dialog/doc.md +51 -29
- package/metaData/components/divider/css-variables.md +21 -0
- package/metaData/components/divider/doc.md +12 -12
- package/metaData/components/dropdown-menu/css-variables.md +31 -0
- package/metaData/components/dropdown-menu/doc.md +24 -17
- package/metaData/components/empty/css-variables.md +19 -0
- package/metaData/components/empty/doc.md +11 -11
- package/metaData/components/fixed-nav/css-variables.md +17 -0
- package/metaData/components/fixed-nav/doc.md +9 -8
- package/metaData/components/fixed-view/css-variables.md +12 -0
- package/metaData/components/fixed-view/doc.md +11 -0
- package/metaData/components/floating-bubble/css-variables.md +18 -0
- package/metaData/components/floating-bubble/doc.md +10 -10
- package/metaData/components/floating-panel/css-variables.md +18 -0
- package/metaData/components/floating-panel/doc.md +9 -9
- package/metaData/components/form/css-variables.md +25 -0
- package/metaData/components/form/doc.md +17 -17
- package/metaData/components/grid/css-variables.md +17 -0
- package/metaData/components/grid/doc.md +8 -8
- package/metaData/components/image/css-variables.md +16 -0
- package/metaData/components/image/doc.md +7 -7
- package/metaData/components/index-list/css-variables.md +25 -0
- package/metaData/components/index-list/doc.md +17 -17
- package/metaData/components/list/css-variables.md +17 -0
- package/metaData/components/list/doc.md +8 -9
- package/metaData/components/loading/css-variables.md +18 -0
- package/metaData/components/loading/doc.md +9 -9
- package/metaData/components/navbar/css-variables.md +21 -0
- package/metaData/components/navbar/doc.md +12 -13
- package/metaData/components/notice-bar/css-variables.md +20 -0
- package/metaData/components/notice-bar/doc.md +11 -11
- package/metaData/components/notify/css-variables.md +19 -0
- package/metaData/components/notify/doc.md +10 -10
- package/metaData/components/number-keyboard/css-variables.md +41 -0
- package/metaData/components/number-keyboard/doc.md +34 -24
- package/metaData/components/pagination/css-variables.md +23 -0
- package/metaData/components/pagination/doc.md +14 -14
- package/metaData/components/password-input/css-variables.md +47 -0
- package/metaData/components/password-input/doc.md +40 -23
- package/metaData/components/picker/css-variables.md +12 -0
- package/metaData/components/picker/doc.md +12 -20
- package/metaData/components/popup/css-variables.md +20 -0
- package/metaData/components/popup/doc.md +11 -11
- package/metaData/components/progress/css-variables.md +21 -0
- package/metaData/components/progress/doc.md +13 -13
- package/metaData/components/pull-refresh/css-variables.md +18 -0
- package/metaData/components/pull-refresh/doc.md +9 -9
- package/metaData/components/radio/css-variables.md +27 -0
- package/metaData/components/radio/doc.md +18 -18
- package/metaData/components/rate/css-variables.md +16 -0
- package/metaData/components/rate/doc.md +7 -7
- package/metaData/components/rolling-text/css-variables.md +20 -0
- package/metaData/components/rolling-text/doc.md +11 -8
- package/metaData/components/search/css-variables.md +30 -0
- package/metaData/components/search/doc.md +21 -21
- package/metaData/components/share-sheet/css-variables.md +26 -0
- package/metaData/components/share-sheet/doc.md +17 -19
- package/metaData/components/sidebar/css-variables.md +11 -0
- package/metaData/components/sidebar/doc.md +18 -18
- package/metaData/components/signature/css-variables.md +11 -0
- package/metaData/components/signature/doc.md +7 -7
- package/metaData/components/skeleton/css-variables.md +11 -0
- package/metaData/components/skeleton/doc.md +11 -11
- package/metaData/components/slider/css-variables.md +11 -0
- package/metaData/components/slider/doc.md +13 -13
- package/metaData/components/space/css-variables.md +11 -0
- package/metaData/components/space/doc.md +14 -14
- package/metaData/components/stepper/css-variables.md +30 -0
- package/metaData/components/stepper/doc.md +24 -24
- package/metaData/components/steps/css-variables.md +32 -0
- package/metaData/components/steps/doc.md +23 -23
- package/metaData/components/sticky/css-variables.md +12 -0
- package/metaData/components/sticky/doc.md +3 -3
- package/metaData/components/swiper/css-variables.md +20 -0
- package/metaData/components/swiper/doc.md +11 -11
- package/metaData/components/switch/css-variables.md +11 -0
- package/metaData/components/switch/doc.md +18 -19
- package/metaData/components/tabbar/css-variables.md +21 -0
- package/metaData/components/tabbar/doc.md +12 -12
- package/metaData/components/tabs/css-variables.md +35 -0
- package/metaData/components/tabs/doc.md +28 -21
- package/metaData/components/tag/css-variables.md +81 -0
- package/metaData/components/tag/doc.md +74 -32
- package/metaData/components/text-ellipsis/css-variables.md +13 -0
- package/metaData/components/text-ellipsis/doc.md +6 -6
- package/metaData/components/timeline/css-variables.md +32 -0
- package/metaData/components/timeline/doc.md +29 -29
- package/metaData/components/toast/css-variables.md +30 -0
- package/metaData/components/toast/doc.md +21 -22
- package/metaData/components/tree-select/css-variables.md +23 -0
- package/metaData/components/tree-select/doc.md +14 -14
- package/metaData/components/uploader/css-variables.md +86 -0
- package/metaData/components/uploader/doc.md +79 -47
- package/metaData/components/watermark/css-variables.md +12 -0
- package/metaData/components/watermark/doc.md +4 -4
- package/package.json +3 -3
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
## 主题定制
|
|
2
|
+
|
|
3
|
+
### 样式变量
|
|
4
|
+
|
|
5
|
+
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
|
|
6
|
+
|
|
7
|
+
#### 基础样式
|
|
8
|
+
|
|
9
|
+
| 描述 | 名称 | 默认值 | 备注 |
|
|
10
|
+
| --- | --- | --- | --- |
|
|
11
|
+
| 搜索框内边距 | --search-padding | var(--padding-sm) | --padding-sm → 24px(小号内边距) |
|
|
12
|
+
| 搜索框背景色 | --search-background-color | var(--white) | --white → #FFFFFF(白色) |
|
|
13
|
+
| 搜索框内容左侧内边距 | --search-content-padding-left | var(--padding-sm) | --padding-sm → 24px(小号内边距) |
|
|
14
|
+
| 搜索框内容背景色 | --search-content-background-color | var(--gray-1) | --gray-1 → #F7F8FA(灰1) |
|
|
15
|
+
| 搜索框内容圆角 | --search-content-border-radius | var(--border-radius-sm) | --border-radius-sm → 4px(小号圆角) |
|
|
16
|
+
| 搜索框内容方形圆角 | --search-content-square-border-radius | 0 | |
|
|
17
|
+
| 搜索框内容圆形圆角 | --search-content-rounded-border-radius | var(--border-radius-max) | --border-radius-max → 999px(最大圆角) |
|
|
18
|
+
| 搜索框输入高度 | --search-input-height | 34px | 34px |
|
|
19
|
+
| 搜索框标签内边距 | --search-label-padding | 0 5px | 0 5px |
|
|
20
|
+
| 搜索框标签颜色 | --search-label-color | var(--text-color) | --text-color → #4E5969(主文字色) |
|
|
21
|
+
| 搜索框标签字体大小 | --search-label-font-size | var(--font-size-md) | --font-size-md → 28px(中号字号) |
|
|
22
|
+
| 搜索框标签行高 | --search-label-line-height | $search-input-height | |
|
|
23
|
+
| 搜索框字段内边距 | --search-field-padding | var(--padding-xs) | --padding-xs → 16px(最小内边距) |
|
|
24
|
+
| 搜索框左侧图标颜色 | --search-left-icon-color | var(--gray-6) | --gray-6 → #86909C(灰6) |
|
|
25
|
+
| 搜索框操作按钮内边距 | --search-action-padding | var(--padding-xs) | --padding-xs → 16px(最小内边距) |
|
|
26
|
+
| 搜索框操作按钮颜色 | --search-action-color | var(--text-color) | --text-color → #4E5969(主文字色) |
|
|
27
|
+
| 搜索框操作按钮行高 | --search-action-line-height | $search-input-height | |
|
|
28
|
+
| 搜索框操作按钮字体大小 | --search-action-font-size | var(--font-size-md) | --font-size-md → 28px(中号字号) |
|
|
29
|
+
| 搜索框操作按钮激活背景色 | --search-action-active-background-color | var(--active-color) | --active-color → #F2F3F5(激活色) |
|
|
30
|
+
|
|
@@ -162,24 +162,24 @@ function CustomSearch() {
|
|
|
162
162
|
|
|
163
163
|
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
|
|
164
164
|
|
|
165
|
-
| 名称
|
|
166
|
-
|
|
|
167
|
-
|
|
|
168
|
-
|
|
|
169
|
-
|
|
|
170
|
-
|
|
|
171
|
-
|
|
|
172
|
-
|
|
|
173
|
-
|
|
|
174
|
-
|
|
|
175
|
-
|
|
|
176
|
-
|
|
|
177
|
-
|
|
|
178
|
-
|
|
|
179
|
-
|
|
|
180
|
-
|
|
|
181
|
-
|
|
|
182
|
-
|
|
|
183
|
-
|
|
|
184
|
-
|
|
|
185
|
-
|
|
|
165
|
+
| 描述 | 名称 | 默认值 | 备注 |
|
|
166
|
+
| --- | --- | --- | --- |
|
|
167
|
+
| 搜索框内边距 | `--search-padding` | `10px * $hd var(--padding-sm, $padding-sm)` | --padding-sm → 24px(小号内边距) |
|
|
168
|
+
| 搜索框背景色 | `--search-background-color` | `var(--white, $white)` | --white → #FFFFFF(白色) |
|
|
169
|
+
| 搜索框内容左侧内边距 | `--search-content-padding-left` | `var(--padding-sm, $padding-sm)` | --padding-sm → 24px(小号内边距) |
|
|
170
|
+
| 搜索框内容背景色 | `--search-content-background-color` | `var(--gray-1, $gray-1)` | --gray-1 → #F7F8FA(灰1) |
|
|
171
|
+
| 搜索框内容圆角 | `--search-content-border-radius` | `var(--border-radius-sm, $border-radius-sm)` | --border-radius-sm → 4px(小号圆角) |
|
|
172
|
+
| 搜索框内容方形圆角 | `--search-content-square-border-radius` | `0` | |
|
|
173
|
+
| 搜索框内容圆形圆角 | `--search-content-rounded-border-radius` | `var(--border-radius-max, $border-radius-max)` | --border-radius-max → 999px(最大圆角) |
|
|
174
|
+
| 搜索框输入高度 | `--search-input-height` | `34px * $hd` | |
|
|
175
|
+
| 搜索框标签内边距 | `--search-label-padding` | `0 5px * $hd` | |
|
|
176
|
+
| 搜索框标签颜色 | `--search-label-color` | `var(--text-color, $text-color)` | --text-color → #4E5969(主文字色) |
|
|
177
|
+
| 搜索框标签字体大小 | `--search-label-font-size` | `var(--font-size-md, $font-size-md)` | --font-size-md → 28px(中号字号) |
|
|
178
|
+
| 搜索框标签行高 | `--search-label-line-height` | `$search-input-height` | |
|
|
179
|
+
| 搜索框字段内边距 | `--search-field-padding` | `5px * $hd var(--padding-xs, $padding-xs) 5px * $hd 0` | --padding-xs → 16px(最小内边距) |
|
|
180
|
+
| 搜索框左侧图标颜色 | `--search-left-icon-color` | `var(--gray-6, $gray-6)` | --gray-6 → #86909C(灰6) |
|
|
181
|
+
| 搜索框操作按钮内边距 | `--search-action-padding` | `0 var(--padding-xs, $padding-xs)` | --padding-xs → 16px(最小内边距) |
|
|
182
|
+
| 搜索框操作按钮颜色 | `--search-action-color` | `var(--text-color, $text-color)` | --text-color → #4E5969(主文字色) |
|
|
183
|
+
| 搜索框操作按钮行高 | `--search-action-line-height` | `$search-input-height` | |
|
|
184
|
+
| 搜索框操作按钮字体大小 | `--search-action-font-size` | `var(--font-size-md, $font-size-md)` | --font-size-md → 28px(中号字号) |
|
|
185
|
+
| 搜索框操作按钮激活背景色 | `--search-action-active-background-color` | `var(--active-color, $active-color)` | --active-color → #F2F3F5(激活色) |
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
## 主题定制
|
|
2
|
+
|
|
3
|
+
### 样式变量
|
|
4
|
+
|
|
5
|
+
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
|
|
6
|
+
|
|
7
|
+
#### 基础样式
|
|
8
|
+
|
|
9
|
+
| 描述 | 名称 | 默认值 | 备注 |
|
|
10
|
+
| --- | --- | --- | --- |
|
|
11
|
+
| 分享面板描述字体大小 | --share-sheet-description-font-size | var(--font-size-sm) | --font-size-sm → 24px(小号字号) |
|
|
12
|
+
| 分享面板选项内边距 | --share-sheet-options-padding | var(--padding-md) | --padding-xs → 16px(最小内边距) --padding-md → 32px(中号内边距) |
|
|
13
|
+
| 分享面板选项图标外边距 | --share-sheet-option-icon-margin | var(--padding-md) | --padding-md → 32px(中号内边距) |
|
|
14
|
+
| 分享面板选项图标尺寸 | --share-sheet-option-icon-size | 48px | 48px |
|
|
15
|
+
| 分享面板选项图标宽度 | --share-sheet-option-icon-width | $share-sheet-option-icon-size | |
|
|
16
|
+
| 分享面板选项图标高度 | --share-sheet-option-icon-height | $share-sheet-option-icon-size | |
|
|
17
|
+
| 分享面板选项图标字体大小 | --share-sheet-option-icon-font-size | $share-sheet-option-icon-size | |
|
|
18
|
+
| 分享面板选项名称内边距 | --share-sheet-option-name-padding | var(--padding-base) | --padding-base → 8px(基础内边距) |
|
|
19
|
+
| 分享面板选项名称顶部外边距 | --share-sheet-option-name-margin-top | var(--padding-xs) | --padding-xs → 16px(最小内边距) |
|
|
20
|
+
| 分享面板选项名称颜色 | --share-sheet-option-name-color | var(--gray-7) | --gray-7 → #6B7785(灰7) |
|
|
21
|
+
| 分享面板选项名称字体大小 | --share-sheet-option-name-font-size | var(--font-size-sm) | --font-size-sm → 24px(小号字号) |
|
|
22
|
+
| 分享面板选项名称行高 | --share-sheet-option-name-line-height | 1.4 | |
|
|
23
|
+
| 分享面板选项描述内边距 | --share-sheet-option-description-padding | var(--padding-base) | --padding-base → 8px(基础内边距) |
|
|
24
|
+
| 分享面板选项描述颜色 | --share-sheet-option-description-color | var(--gray-5) | --gray-5 → #A9AEB8(灰5) |
|
|
25
|
+
| 分享面板选项描述字体大小 | --share-sheet-option-description-font-size | var(--font-size-sm) | --font-size-sm → 24px(小号字号) |
|
|
26
|
+
|
|
@@ -177,25 +177,23 @@ function ShareSheetWithDescription() {
|
|
|
177
177
|
|
|
178
178
|
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
|
|
179
179
|
|
|
180
|
-
| 名称
|
|
181
|
-
|
|
182
|
-
|
|
|
183
|
-
|
|
|
184
|
-
|
|
|
185
|
-
|
|
|
186
|
-
|
|
|
187
|
-
|
|
|
188
|
-
|
|
|
189
|
-
|
|
|
190
|
-
|
|
|
191
|
-
|
|
|
192
|
-
|
|
|
193
|
-
|
|
|
194
|
-
|
|
|
195
|
-
|
|
|
196
|
-
|
|
|
197
|
-
|
|
198
|
-
|
|
180
|
+
| 描述 | 名称 | 默认值 | 备注 |
|
|
181
|
+
| --- | --- | --- | --- |
|
|
182
|
+
| 分享面板描述字体大小 | `--share-sheet-description-font-size` | `var(--font-size-sm, $font-size-sm)` | --font-size-sm → 24px(小号字号) |
|
|
183
|
+
| 分享面板选项内边距 | `--share-sheet-options-padding` | `var(--padding-md, $padding-md) 0 var(--padding-md, $padding-md) var(--padding-xs, $padding-xs)` | --padding-xs → 16px(最小内边距) --padding-md → 32px(中号内边距) |
|
|
184
|
+
| 分享面板选项图标外边距 | `--share-sheet-option-icon-margin` | `0 var(--padding-md, $padding-md)` | --padding-md → 32px(中号内边距) |
|
|
185
|
+
| 分享面板选项图标尺寸 | `--share-sheet-option-icon-size` | `48px * $hd` | |
|
|
186
|
+
| 分享面板选项图标宽度 | `--share-sheet-option-icon-width` | `$share-sheet-option-icon-size` | |
|
|
187
|
+
| 分享面板选项图标高度 | `--share-sheet-option-icon-height` | `$share-sheet-option-icon-size` | |
|
|
188
|
+
| 分享面板选项图标字体大小 | `--share-sheet-option-icon-font-size` | `$share-sheet-option-icon-size` | |
|
|
189
|
+
| 分享面板选项名称内边距 | `--share-sheet-option-name-padding` | `0 var(--padding-base, $padding-base)` | --padding-base → 8px(基础内边距) |
|
|
190
|
+
| 分享面板选项名称顶部外边距 | `--share-sheet-option-name-margin-top` | `var(--padding-xs, $padding-xs)` | --padding-xs → 16px(最小内边距) |
|
|
191
|
+
| 分享面板选项名称颜色 | `--share-sheet-option-name-color` | `var(--gray-7, $gray-7)` | --gray-7 → #6B7785(灰7) |
|
|
192
|
+
| 分享面板选项名称字体大小 | `--share-sheet-option-name-font-size` | `var(--font-size-sm, $font-size-sm)` | --font-size-sm → 24px(小号字号) |
|
|
193
|
+
| 分享面板选项名称行高 | `--share-sheet-option-name-line-height` | `1.4` | |
|
|
194
|
+
| 分享面板选项描述内边距 | `--share-sheet-option-description-padding` | `0 var(--padding-base, $padding-base)` | --padding-base → 8px(基础内边距) |
|
|
195
|
+
| 分享面板选项描述颜色 | `--share-sheet-option-description-color` | `var(--gray-5, $gray-5)` | --gray-5 → #A9AEB8(灰5) |
|
|
196
|
+
| 分享面板选项描述字体大小 | `--share-sheet-option-description-font-size` | `var(--font-size-sm, $font-size-sm)` | --font-size-sm → 24px(小号字号) |
|
|
199
197
|
## 常见问题
|
|
200
198
|
|
|
201
199
|
### 如何实现分享逻辑?
|
|
@@ -102,21 +102,21 @@ function EventSidebar() {
|
|
|
102
102
|
|
|
103
103
|
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
|
|
104
104
|
|
|
105
|
-
| 名称
|
|
106
|
-
|
|
107
|
-
|
|
|
108
|
-
|
|
|
109
|
-
|
|
|
110
|
-
|
|
|
111
|
-
|
|
|
112
|
-
|
|
|
113
|
-
|
|
|
114
|
-
|
|
|
115
|
-
|
|
|
116
|
-
|
|
|
117
|
-
|
|
|
118
|
-
|
|
|
119
|
-
|
|
|
120
|
-
|
|
|
121
|
-
|
|
|
122
|
-
|
|
|
105
|
+
| 描述 | 名称 | 默认值 | 备注 |
|
|
106
|
+
| --- | --- | --- | --- |
|
|
107
|
+
| | `--sidebar-width` | `80px * $hd` | |
|
|
108
|
+
| | `--sidebar-disabled-color` | `var(--gray-5, $gray-5)` | --gray-5 → #A9AEB8(灰5) |
|
|
109
|
+
| | `--sidebar-tab-font-size` | `var(--font-size-md, $font-size-md)` | --font-size-md → 28px(中号字号) |
|
|
110
|
+
| | `--sidebar-tab-line-height` | `var(--line-height-md, $line-height-md)` | --line-height-md → 40px(中号行高) |
|
|
111
|
+
| | `--sidebar-tab-color` | `var(--text-color, $text-color)` | --text-color → #4E5969(主文字色) |
|
|
112
|
+
| | `--sidebar-tab-padding` | `20px * $hd var(--padding-sm, $padding-sm)` | --padding-sm → 24px(小号内边距) |
|
|
113
|
+
| | `--sidebar-tab-background-color` | `var(--background-color, $background-color)` | --background-color → #F7F8FA(背景色) |
|
|
114
|
+
| | `--sidebar-tab-active-background-color` | `var(--active-color, $active-color)` | --active-color → #F2F3F5(激活色) |
|
|
115
|
+
| | `--sidebar-tab-active-font-weight` | `var(--font-weight-bold, $font-weight-bold)` | --font-weight-bold → 500(加粗字体) |
|
|
116
|
+
| | `--sidebar-active-color` | `var(--text-color, $text-color)` | --text-color → #4E5969(主文字色) |
|
|
117
|
+
| | `--sidebar-active-border-width` | `4px * $hd` | |
|
|
118
|
+
| | `--sidebar-active-border-height` | `16px * $hd` | |
|
|
119
|
+
| | `--sidebar-active-border-color` | `$primary-color` | |
|
|
120
|
+
| | `--sidebar-active-active-background-color` | `var(--white, $white)` | --white → #FFFFFF(白色) |
|
|
121
|
+
| | `--sidebar-tab-disabled-color` | `$sidebar-disabled-color` | |
|
|
122
|
+
| | `--sidebar-tab-disabled-background-color` | `$sidebar-tab-background-color` | |
|
|
@@ -106,10 +106,10 @@ function BasicSignature() {
|
|
|
106
106
|
|
|
107
107
|
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
|
|
108
108
|
|
|
109
|
-
| 名称
|
|
110
|
-
|
|
|
111
|
-
|
|
|
112
|
-
|
|
|
113
|
-
|
|
|
114
|
-
|
|
|
115
|
-
|
|
|
109
|
+
| 描述 | 名称 | 默认值 | 备注 |
|
|
110
|
+
| --- | --- | --- | --- |
|
|
111
|
+
| | `--signature-padding` | `$padding-xs` | |
|
|
112
|
+
| | `--signature-content-height` | `200px * $hd` | |
|
|
113
|
+
| | `--signature-content-background` | `$background-color-2` | |
|
|
114
|
+
| | `--signature-content-border` | `1px dotted #dadada` | |
|
|
115
|
+
| | `--signature-border-radius` | `$border-radius-lg` | |
|
|
@@ -118,14 +118,14 @@ const template = () => {
|
|
|
118
118
|
|
|
119
119
|
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
|
|
120
120
|
|
|
121
|
-
| 名称
|
|
122
|
-
|
|
123
|
-
|
|
|
124
|
-
|
|
|
125
|
-
|
|
|
126
|
-
|
|
|
127
|
-
|
|
|
128
|
-
|
|
|
129
|
-
|
|
|
130
|
-
|
|
|
131
|
-
|
|
|
121
|
+
| 描述 | 名称 | 默认值 | 备注 |
|
|
122
|
+
| --- | --- | --- | --- |
|
|
123
|
+
| | `--skeleton-avatar-size` | `32px * $hd` | |
|
|
124
|
+
| | `--skeleton-avatar-background` | `var(--active-color, $active-color)` | --active-color → #F2F3F5(激活色) |
|
|
125
|
+
| | `--skeleton-duration` | `1.2s` | |
|
|
126
|
+
| | `--skeleton-paragraph-height` | `16px * $hd` | |
|
|
127
|
+
| | `--skeleton-paragraph-background` | `var(--active-color, $active-color)` | --active-color → #F2F3F5(激活色) |
|
|
128
|
+
| | `--skeleton-title-width` | `40%` | |
|
|
129
|
+
| | `--skeleton-paragraph-margin-top` | `var(--padding-xs, $padding-xs)` | --padding-xs → 16px(最小内边距) |
|
|
130
|
+
| | `--skeleton-image-size` | `96px * $hd` | |
|
|
131
|
+
| | `--skeleton-image-radius` | `24px * $hd` | |
|
|
@@ -136,16 +136,16 @@ function StyledThumbSlider() {
|
|
|
136
136
|
|
|
137
137
|
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
|
|
138
138
|
|
|
139
|
-
| 名称
|
|
140
|
-
|
|
141
|
-
|
|
|
142
|
-
|
|
|
143
|
-
|
|
|
144
|
-
|
|
|
145
|
-
|
|
|
146
|
-
|
|
|
147
|
-
|
|
|
148
|
-
|
|
|
149
|
-
|
|
|
150
|
-
|
|
|
151
|
-
|
|
|
139
|
+
| 描述 | 名称 | 默认值 | 备注 |
|
|
140
|
+
| --- | --- | --- | --- |
|
|
141
|
+
| | `--slider-border-radius` | `var(--border-radius-max, $border-radius-max)` | --border-radius-max → 999px(最大圆角) |
|
|
142
|
+
| | `--slider-active-background-color` | `$primary-color` | |
|
|
143
|
+
| | `--slider-inactive-background-color` | `var(--gray-3, $gray-3)` | --gray-3 → #E5E6EB(灰3) |
|
|
144
|
+
| | `--slider-disabled-opacity` | `var(--disabled-opacity, $disabled-opacity)` | --disabled-opacity → 0.5(禁用透明度) |
|
|
145
|
+
| | `--slider-track-height` | `2px * $hd` | |
|
|
146
|
+
| | `--slider-track-transition-duration` | `var(--animation-duration-fast, $animation-duration-fast)` | --animation-duration-fast → 0.2s(快速动画时长) |
|
|
147
|
+
| | `--slider-thumb-width` | `24px * $hd` | |
|
|
148
|
+
| | `--slider-thumb-height` | `24px * $hd` | |
|
|
149
|
+
| | `--slider-thumb-border-radius` | `50%` | |
|
|
150
|
+
| | `--slider-thumb-background-color` | `var(--white, $white)` | --white → #FFFFFF(白色) |
|
|
151
|
+
| | `--slider-thumb-box-shadow` | `0 1px * $hd 2px * $hd rgba(0, 0, 0, 0.5` | |
|
|
@@ -109,17 +109,17 @@ import { Button, Space } from "@fjyueke/bify-core"
|
|
|
109
109
|
|
|
110
110
|
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
|
|
111
111
|
|
|
112
|
-
| 名称
|
|
113
|
-
|
|
|
114
|
-
|
|
|
115
|
-
|
|
|
116
|
-
|
|
|
117
|
-
|
|
|
118
|
-
|
|
|
119
|
-
|
|
|
120
|
-
|
|
|
121
|
-
|
|
|
122
|
-
|
|
|
123
|
-
|
|
|
124
|
-
|
|
|
125
|
-
|
|
|
112
|
+
| 描述 | 名称 | 默认值 | 备注 |
|
|
113
|
+
| --- | --- | --- | --- |
|
|
114
|
+
| | `--space-item-gap-mini` | `var(--padding-xs, $padding-xs)` | --padding-xs → 16px(最小内边距) |
|
|
115
|
+
| | `--space-item-gap-small` | `var(--padding-sm, $padding-sm)` | --padding-sm → 24px(小号内边距) |
|
|
116
|
+
| | `--space-item-gap-medium` | `var(--padding-md, $padding-md)` | --padding-md → 32px(中号内边距) |
|
|
117
|
+
| | `--space-item-gap-large` | `var(--padding-lg, $padding-lg)` | --padding-lg → 48px(大号内边距) |
|
|
118
|
+
| | `--space-item-vertical-gap-mini` | `$space-item-gap-mini` | |
|
|
119
|
+
| | `--space-item-vertical-gap-small` | `$space-item-gap-small` | |
|
|
120
|
+
| | `--space-item-vertical-gap-medium` | `$space-item-gap-medium` | |
|
|
121
|
+
| | `--space-item-vertical-gap-large` | `$space-item-gap-large` | |
|
|
122
|
+
| | `--space-item-horizontal-gap-mini` | `$space-item-gap-mini` | |
|
|
123
|
+
| | `--space-item-horizontal-gap-small` | `$space-item-gap-small` | |
|
|
124
|
+
| | `--space-item-horizontal-gap-medium` | `$space-item-gap-medium` | |
|
|
125
|
+
| | `--space-item-horizontal-gap-large` | `$space-item-gap-large` | |
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
## 主题定制
|
|
2
|
+
|
|
3
|
+
### 样式变量
|
|
4
|
+
|
|
5
|
+
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
|
|
6
|
+
|
|
7
|
+
#### 基础样式
|
|
8
|
+
|
|
9
|
+
| 描述 | 名称 | 默认值 | 备注 |
|
|
10
|
+
| --- | --- | --- | --- |
|
|
11
|
+
| 步进器激活背景色 | --stepper-active-background-color | $gray-3 | |
|
|
12
|
+
| 步进器背景色 | --stepper-background-color | var(--active-color) | --active-color → #F2F3F5(激活色) |
|
|
13
|
+
| 步进器输入框宽度 | --stepper-input-width | 32px | 32px |
|
|
14
|
+
| 步进器输入框高度 | --stepper-input-height | 28px | 28px |
|
|
15
|
+
| 步进器输入框外边距 | --stepper-input-margin | 0 2px | 0 2px |
|
|
16
|
+
| 步进器输入框字体大小 | --stepper-input-font-size | var(--font-size-md) | --font-size-md → 28px(中号字号) |
|
|
17
|
+
| 步进器输入框行高 | --stepper-input-line-height | normal | |
|
|
18
|
+
| 步进器输入框颜色 | --stepper-input-color | var(--text-color) | --text-color → #4E5969(主文字色) |
|
|
19
|
+
| 步进器输入框背景色 | --stepper-input-background-color | $stepper-background-color | |
|
|
20
|
+
| 步进器输入框禁用颜色 | --stepper-input-disabled-color | var(--gray-5) | --gray-5 → #A9AEB8(灰5) |
|
|
21
|
+
| 步进器输入框禁用背景色 | --stepper-input-disabled-background-color | var(--active-color) | --active-color → #F2F3F5(激活色) |
|
|
22
|
+
| 步进器按钮图标颜色 | --stepper-button-icon-color | var(--text-color) | --text-color → #4E5969(主文字色) |
|
|
23
|
+
| 步进器按钮禁用颜色 | --stepper-button-disabled-color | var(--gray-5) | --gray-5 → #A9AEB8(灰5) |
|
|
24
|
+
| 步进器按钮禁用背景色 | --stepper-button-disabled-background-color | var(--background-color) | --background-color → #F7F8FA(背景色) |
|
|
25
|
+
| 步进器圆角按钮圆角 | --stepper-rounded-button-border-radius | var(--border-radius-md) | --border-radius-md → 8px(中号圆角) |
|
|
26
|
+
| 步进器圆角减少按钮圆角 | --stepper-rounded-decrease-button-border-radius | $stepper-rounded-button-border-radius | |
|
|
27
|
+
| 步进器圆角增加按钮圆角 | --stepper-rounded-increase-button-border-radius | $stepper-rounded-button-border-radius | |
|
|
28
|
+
| 步进器圆形增加按钮颜色 | --stepper-circular-increase-button-color | var(--white) | --white → #FFFFFF(白色) |
|
|
29
|
+
| 步进器圆形增加按钮背景色 | --stepper-circular-increase-button-background-color | $primary-color | |
|
|
30
|
+
|
|
@@ -126,27 +126,27 @@ import { Stepper } from "@fjyueke/bify-core"
|
|
|
126
126
|
|
|
127
127
|
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
|
|
128
128
|
|
|
129
|
-
| 名称
|
|
130
|
-
|
|
|
131
|
-
|
|
|
132
|
-
|
|
|
133
|
-
|
|
|
134
|
-
|
|
|
135
|
-
|
|
|
136
|
-
|
|
|
137
|
-
|
|
|
138
|
-
|
|
|
139
|
-
|
|
|
140
|
-
|
|
|
141
|
-
|
|
|
142
|
-
|
|
|
143
|
-
|
|
|
144
|
-
|
|
|
145
|
-
|
|
|
146
|
-
|
|
|
147
|
-
|
|
|
148
|
-
|
|
|
149
|
-
|
|
|
150
|
-
|
|
|
151
|
-
|
|
|
152
|
-
|
|
|
129
|
+
| 描述 | 名称 | 默认值 | 备注 |
|
|
130
|
+
| --- | --- | --- | --- |
|
|
131
|
+
| 步进器激活背景色 | `--stepper-active-background-color` | `$gray-3` | |
|
|
132
|
+
| 步进器背景色 | `--stepper-background-color` | `var(--active-color, $active-color)` | --active-color → #F2F3F5(激活色) |
|
|
133
|
+
| 步进器输入框宽度 | `--stepper-input-width` | `32px * $hd` | |
|
|
134
|
+
| 步进器输入框高度 | `--stepper-input-height` | `28px * $hd` | |
|
|
135
|
+
| 步进器输入框外边距 | `--stepper-input-margin` | `0 2px * $hd` | |
|
|
136
|
+
| 步进器输入框字体大小 | `--stepper-input-font-size` | `var(--font-size-md, $font-size-md)` | --font-size-md → 28px(中号字号) |
|
|
137
|
+
| 步进器输入框行高 | `--stepper-input-line-height` | `normal` | |
|
|
138
|
+
| 步进器输入框颜色 | `--stepper-input-color` | `var(--text-color, $text-color)` | --text-color → #4E5969(主文字色) |
|
|
139
|
+
| 步进器输入框背景色 | `--stepper-input-background-color` | `$stepper-background-color` | |
|
|
140
|
+
| 步进器输入框禁用颜色 | `--stepper-input-disabled-color` | `var(--gray-5, $gray-5)` | --gray-5 → #A9AEB8(灰5) |
|
|
141
|
+
| 步进器输入框禁用背景色 | `--stepper-input-disabled-background-color` | `var(--active-color, $active-color)` | --active-color → #F2F3F5(激活色) |
|
|
142
|
+
| 步进器按钮图标颜色 | `--stepper-button-icon-color` | `var(--text-color, $text-color)` | --text-color → #4E5969(主文字色) |
|
|
143
|
+
| 步进器按钮禁用颜色 | `--stepper-button-disabled-color` | `var(--gray-5, $gray-5)` | --gray-5 → #A9AEB8(灰5) |
|
|
144
|
+
| 步进器按钮禁用背景色 | `--stepper-button-disabled-background-color` | `var(--background-color, $background-color)` | --background-color → #F7F8FA(背景色) |
|
|
145
|
+
| 步进器圆角按钮圆角 | `--stepper-rounded-button-border-radius` | `var(--border-radius-md, $border-radius-md)` | --border-radius-md → 8px(中号圆角) |
|
|
146
|
+
| 步进器圆角减少按钮圆角 | `--stepper-rounded-decrease-button-border-radius` | `$stepper-rounded-button-border-radius` | |
|
|
147
|
+
| 步进器圆角增加按钮圆角 | `--stepper-rounded-increase-button-border-radius` | `$stepper-rounded-button-border-radius` | |
|
|
148
|
+
| 步进器圆形增加按钮颜色 | `--stepper-circular-increase-button-color` | `$primary-color` | |
|
|
149
|
+
| 步进器圆形增加按钮背景色 | `--stepper-circular-increase-button-background-color` | `var(--white, $white)` | --white → #FFFFFF(白色) |
|
|
150
|
+
| | `--stepper-circular-increase-button-border-color` | `$primary-color` | |
|
|
151
|
+
| 步进器圆形增加按钮颜色 | `--stepper-circular-increase-button-color` | `var(--white, $white)` | --white → #FFFFFF(白色) |
|
|
152
|
+
| 步进器圆形增加按钮背景色 | `--stepper-circular-increase-button-background-color` | `$primary-color` | |
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
## 主题定制
|
|
2
|
+
|
|
3
|
+
### 样式变量
|
|
4
|
+
|
|
5
|
+
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
|
|
6
|
+
|
|
7
|
+
#### 基础样式
|
|
8
|
+
|
|
9
|
+
| 描述 | 名称 | 默认值 | 备注 |
|
|
10
|
+
| --- | --- | --- | --- |
|
|
11
|
+
| 步骤条背景色 | --steps-background-color | var(--white) | --white → #FFFFFF(白色) |
|
|
12
|
+
| 步骤条水平内边距 | --steps-horizontal-padding | 10px 0 | 10px 0 |
|
|
13
|
+
| 步骤条垂直内边距 | --steps-vertical-padding | var(--padding-xl) | --padding-xl → 64px(超大内边距) |
|
|
14
|
+
| 步骤颜色 | --step-color | var(--gray-6) | --gray-6 → #86909C(灰6) |
|
|
15
|
+
| 步骤激活颜色 | --step-active-color | $primary-color | |
|
|
16
|
+
| 步骤进行中颜色 | --step-process-color | var(--text-color) | --text-color → #4E5969(主文字色) |
|
|
17
|
+
| 步骤字体大小 | --step-font-size | var(--font-size-md) | --font-size-md → 28px(中号字号) |
|
|
18
|
+
| 步骤图标字体大小 | --step-icon-font-size | 12px | 12px |
|
|
19
|
+
| 步骤线背景色 | --step-line-background-color | var(--border-color) | --border-color → #E5E6EB(边框色) |
|
|
20
|
+
| 步骤线过渡时长 | --step-line-transition-duration | var(--animation-duration-base) | --animation-duration-base → 0.3s(基础动画时长) |
|
|
21
|
+
| 步骤完成颜色 | --step-completed-color | var(--text-color) | --text-color → #4E5969(主文字色) |
|
|
22
|
+
| 步骤完成线背景色 | --step-completed-line-background-color | $primary-color | |
|
|
23
|
+
| 步骤圆点尺寸 | --step-circle-size | 5PX | |
|
|
24
|
+
| 步骤圆点宽度 | --step-circle-width | $step-circle-size | |
|
|
25
|
+
| 步骤圆点高度 | --step-circle-height | $step-circle-size | |
|
|
26
|
+
| 步骤圆点外边距 | --step-circle-margin | 3px | 3px |
|
|
27
|
+
| 步骤圆点背景色 | --step-circle-background-color | var(--gray-6) | --gray-6 → #86909C(灰6) |
|
|
28
|
+
| 步骤圆点圆角 | --step-circle-border-radius | 50% | |
|
|
29
|
+
| 步骤水平标题字体大小 | --step-horizontal-title-font-size | var(--font-size-sm) | --font-size-sm → 24px(小号字号) |
|
|
30
|
+
| 步骤垂直行高 | --step-vertical-line-height | var(--line-height-sm) | --line-height-sm → 36px(小号行高) |
|
|
31
|
+
| 步骤垂直内边距 | --step-vertical-padding | 10px 10px 10px 0 | 10px 10px 10px 0 |
|
|
32
|
+
|
|
@@ -118,26 +118,26 @@ import { Steps } from "@fjyueke/bify-core"
|
|
|
118
118
|
|
|
119
119
|
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
|
|
120
120
|
|
|
121
|
-
| 名称
|
|
122
|
-
|
|
123
|
-
|
|
|
124
|
-
|
|
|
125
|
-
|
|
|
126
|
-
|
|
|
127
|
-
|
|
|
128
|
-
|
|
|
129
|
-
|
|
|
130
|
-
|
|
|
131
|
-
|
|
|
132
|
-
|
|
|
133
|
-
|
|
|
134
|
-
|
|
|
135
|
-
|
|
|
136
|
-
|
|
|
137
|
-
|
|
|
138
|
-
|
|
|
139
|
-
|
|
|
140
|
-
|
|
|
141
|
-
|
|
|
142
|
-
|
|
|
143
|
-
|
|
|
121
|
+
| 描述 | 名称 | 默认值 | 备注 |
|
|
122
|
+
| --- | --- | --- | --- |
|
|
123
|
+
| 步骤条背景色 | `--steps-background-color` | `var(--white, $white)` | --white → #FFFFFF(白色) |
|
|
124
|
+
| 步骤条水平内边距 | `--steps-horizontal-padding` | `10px * $hd 0` | |
|
|
125
|
+
| 步骤条垂直内边距 | `--steps-vertical-padding` | `0 0 0 var(--padding-xl, $padding-xl)` | --padding-xl → 64px(超大内边距) |
|
|
126
|
+
| 步骤颜色 | `--step-color` | `var(--gray-6, $gray-6)` | --gray-6 → #86909C(灰6) |
|
|
127
|
+
| 步骤激活颜色 | `--step-active-color` | `$primary-color` | |
|
|
128
|
+
| 步骤进行中颜色 | `--step-process-color` | `var(--text-color, $text-color)` | --text-color → #4E5969(主文字色) |
|
|
129
|
+
| 步骤字体大小 | `--step-font-size` | `var(--font-size-md, $font-size-md)` | --font-size-md → 28px(中号字号) |
|
|
130
|
+
| 步骤图标字体大小 | `--step-icon-font-size` | `12px * $hd` | |
|
|
131
|
+
| 步骤线背景色 | `--step-line-background-color` | `var(--border-color, $border-color)` | --border-color → #E5E6EB(边框色) |
|
|
132
|
+
| 步骤线过渡时长 | `--step-line-transition-duration` | `var(--animation-duration-base, $animation-duration-base)` | --animation-duration-base → 0.3s(基础动画时长) |
|
|
133
|
+
| 步骤完成颜色 | `--step-completed-color` | `var(--text-color, $text-color)` | --text-color → #4E5969(主文字色) |
|
|
134
|
+
| 步骤完成线背景色 | `--step-completed-line-background-color` | `$primary-color` | |
|
|
135
|
+
| 步骤圆点尺寸 | `--step-circle-size` | `5PX` | |
|
|
136
|
+
| 步骤圆点宽度 | `--step-circle-width` | `$step-circle-size` | |
|
|
137
|
+
| 步骤圆点高度 | `--step-circle-height` | `$step-circle-size` | |
|
|
138
|
+
| 步骤圆点外边距 | `--step-circle-margin` | `3px * $hd` | |
|
|
139
|
+
| 步骤圆点背景色 | `--step-circle-background-color` | `var(--gray-6, $gray-6)` | --gray-6 → #86909C(灰6) |
|
|
140
|
+
| 步骤圆点圆角 | `--step-circle-border-radius` | `50%` | |
|
|
141
|
+
| 步骤水平标题字体大小 | `--step-horizontal-title-font-size` | `var(--font-size-sm, $font-size-sm)` | --font-size-sm → 24px(小号字号) |
|
|
142
|
+
| 步骤垂直行高 | `--step-vertical-line-height` | `var(--line-height-sm, $line-height-sm)` | --line-height-sm → 36px(小号行高) |
|
|
143
|
+
| 步骤垂直内边距 | `--step-vertical-padding` | `10px * $hd 10px * $hd 10px * $hd 0` | |
|
|
@@ -82,6 +82,6 @@ function StickyWithContainer() {
|
|
|
82
82
|
|
|
83
83
|
组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
|
|
84
84
|
|
|
85
|
-
| 名称
|
|
86
|
-
|
|
87
|
-
|
|
|
85
|
+
| 描述 | 名称 | 默认值 | 备注 |
|
|
86
|
+
| --- | --- | --- | --- |
|
|
87
|
+
| 粘性定位层级 | `--sticky-z-index` | `99` | |
|