@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.
Files changed (125) hide show
  1. package/README.md +21 -0
  2. package/dist/index.js +98 -12
  3. package/metaData/components/action-sheet/css-variables.md +16 -0
  4. package/metaData/components/action-sheet/doc.md +7 -7
  5. package/metaData/components/avatar/css-variables.md +53 -0
  6. package/metaData/components/avatar/doc.md +46 -24
  7. package/metaData/components/back-top/css-variables.md +18 -0
  8. package/metaData/components/back-top/doc.md +9 -9
  9. package/metaData/components/backdrop/css-variables.md +13 -0
  10. package/metaData/components/backdrop/doc.md +4 -4
  11. package/metaData/components/badge/css-variables.md +23 -0
  12. package/metaData/components/badge/doc.md +14 -14
  13. package/metaData/components/button/css-variables.md +97 -0
  14. package/metaData/components/button/doc.md +90 -38
  15. package/metaData/components/calendar/css-variables.md +75 -0
  16. package/metaData/components/calendar/doc.md +68 -30
  17. package/metaData/components/cascader/css-variables.md +45 -0
  18. package/metaData/components/cascader/doc.md +38 -21
  19. package/metaData/components/cell/css-variables.md +50 -0
  20. package/metaData/components/cell/doc.md +44 -32
  21. package/metaData/components/checkbox/css-variables.md +27 -0
  22. package/metaData/components/checkbox/doc.md +18 -18
  23. package/metaData/components/circle/css-variables.md +22 -0
  24. package/metaData/components/circle/doc.md +13 -13
  25. package/metaData/components/collapse/css-variables.md +18 -0
  26. package/metaData/components/collapse/doc.md +9 -9
  27. package/metaData/components/countdown/css-variables.md +14 -0
  28. package/metaData/components/countdown/doc.md +5 -5
  29. package/metaData/components/dialog/css-variables.md +58 -0
  30. package/metaData/components/dialog/doc.md +51 -29
  31. package/metaData/components/divider/css-variables.md +21 -0
  32. package/metaData/components/divider/doc.md +12 -12
  33. package/metaData/components/dropdown-menu/css-variables.md +31 -0
  34. package/metaData/components/dropdown-menu/doc.md +24 -17
  35. package/metaData/components/empty/css-variables.md +19 -0
  36. package/metaData/components/empty/doc.md +11 -11
  37. package/metaData/components/fixed-nav/css-variables.md +17 -0
  38. package/metaData/components/fixed-nav/doc.md +9 -8
  39. package/metaData/components/fixed-view/css-variables.md +12 -0
  40. package/metaData/components/fixed-view/doc.md +11 -0
  41. package/metaData/components/floating-bubble/css-variables.md +18 -0
  42. package/metaData/components/floating-bubble/doc.md +10 -10
  43. package/metaData/components/floating-panel/css-variables.md +18 -0
  44. package/metaData/components/floating-panel/doc.md +9 -9
  45. package/metaData/components/form/css-variables.md +25 -0
  46. package/metaData/components/form/doc.md +17 -17
  47. package/metaData/components/grid/css-variables.md +17 -0
  48. package/metaData/components/grid/doc.md +8 -8
  49. package/metaData/components/image/css-variables.md +16 -0
  50. package/metaData/components/image/doc.md +7 -7
  51. package/metaData/components/index-list/css-variables.md +25 -0
  52. package/metaData/components/index-list/doc.md +17 -17
  53. package/metaData/components/list/css-variables.md +17 -0
  54. package/metaData/components/list/doc.md +8 -9
  55. package/metaData/components/loading/css-variables.md +18 -0
  56. package/metaData/components/loading/doc.md +9 -9
  57. package/metaData/components/navbar/css-variables.md +21 -0
  58. package/metaData/components/navbar/doc.md +12 -13
  59. package/metaData/components/notice-bar/css-variables.md +20 -0
  60. package/metaData/components/notice-bar/doc.md +11 -11
  61. package/metaData/components/notify/css-variables.md +19 -0
  62. package/metaData/components/notify/doc.md +10 -10
  63. package/metaData/components/number-keyboard/css-variables.md +41 -0
  64. package/metaData/components/number-keyboard/doc.md +34 -24
  65. package/metaData/components/pagination/css-variables.md +23 -0
  66. package/metaData/components/pagination/doc.md +14 -14
  67. package/metaData/components/password-input/css-variables.md +47 -0
  68. package/metaData/components/password-input/doc.md +40 -23
  69. package/metaData/components/picker/css-variables.md +12 -0
  70. package/metaData/components/picker/doc.md +12 -20
  71. package/metaData/components/popup/css-variables.md +20 -0
  72. package/metaData/components/popup/doc.md +11 -11
  73. package/metaData/components/progress/css-variables.md +21 -0
  74. package/metaData/components/progress/doc.md +13 -13
  75. package/metaData/components/pull-refresh/css-variables.md +18 -0
  76. package/metaData/components/pull-refresh/doc.md +9 -9
  77. package/metaData/components/radio/css-variables.md +27 -0
  78. package/metaData/components/radio/doc.md +18 -18
  79. package/metaData/components/rate/css-variables.md +16 -0
  80. package/metaData/components/rate/doc.md +7 -7
  81. package/metaData/components/rolling-text/css-variables.md +20 -0
  82. package/metaData/components/rolling-text/doc.md +11 -8
  83. package/metaData/components/search/css-variables.md +30 -0
  84. package/metaData/components/search/doc.md +21 -21
  85. package/metaData/components/share-sheet/css-variables.md +26 -0
  86. package/metaData/components/share-sheet/doc.md +17 -19
  87. package/metaData/components/sidebar/css-variables.md +11 -0
  88. package/metaData/components/sidebar/doc.md +18 -18
  89. package/metaData/components/signature/css-variables.md +11 -0
  90. package/metaData/components/signature/doc.md +7 -7
  91. package/metaData/components/skeleton/css-variables.md +11 -0
  92. package/metaData/components/skeleton/doc.md +11 -11
  93. package/metaData/components/slider/css-variables.md +11 -0
  94. package/metaData/components/slider/doc.md +13 -13
  95. package/metaData/components/space/css-variables.md +11 -0
  96. package/metaData/components/space/doc.md +14 -14
  97. package/metaData/components/stepper/css-variables.md +30 -0
  98. package/metaData/components/stepper/doc.md +24 -24
  99. package/metaData/components/steps/css-variables.md +32 -0
  100. package/metaData/components/steps/doc.md +23 -23
  101. package/metaData/components/sticky/css-variables.md +12 -0
  102. package/metaData/components/sticky/doc.md +3 -3
  103. package/metaData/components/swiper/css-variables.md +20 -0
  104. package/metaData/components/swiper/doc.md +11 -11
  105. package/metaData/components/switch/css-variables.md +11 -0
  106. package/metaData/components/switch/doc.md +18 -19
  107. package/metaData/components/tabbar/css-variables.md +21 -0
  108. package/metaData/components/tabbar/doc.md +12 -12
  109. package/metaData/components/tabs/css-variables.md +35 -0
  110. package/metaData/components/tabs/doc.md +28 -21
  111. package/metaData/components/tag/css-variables.md +81 -0
  112. package/metaData/components/tag/doc.md +74 -32
  113. package/metaData/components/text-ellipsis/css-variables.md +13 -0
  114. package/metaData/components/text-ellipsis/doc.md +6 -6
  115. package/metaData/components/timeline/css-variables.md +32 -0
  116. package/metaData/components/timeline/doc.md +29 -29
  117. package/metaData/components/toast/css-variables.md +30 -0
  118. package/metaData/components/toast/doc.md +21 -22
  119. package/metaData/components/tree-select/css-variables.md +23 -0
  120. package/metaData/components/tree-select/doc.md +14 -14
  121. package/metaData/components/uploader/css-variables.md +86 -0
  122. package/metaData/components/uploader/doc.md +79 -47
  123. package/metaData/components/watermark/css-variables.md +12 -0
  124. package/metaData/components/watermark/doc.md +4 -4
  125. 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
- | --search-padding | _10px \* $hd var(--padding-sm)_ | - |
168
- | --search-background-color | _var(--white)_ | - |
169
- | --search-content-padding-left | _var(--padding-sm)_ | - |
170
- | --search-content-background-color | _var(--gray-1)_ | - |
171
- | --search-content-border-radius | _var(--border-radius-sm)_ | - |
172
- | --search-content-square-border-radius | _0_ | - |
173
- | --search-content-rounded-border-radius | _var(--border-radius-max)_ | - |
174
- | --search-input-height | _34px \* $hd_ | - |
175
- | --search-label-padding | _0 5px \* $hd_ | - |
176
- | --search-label-color | _var(--text-color)_ | - |
177
- | --search-label-font-size | _var(--font-size-md)_ | - |
178
- | --search-label-line-height | _var(--search-input-height)_ | - |
179
- | --search-field-padding | _5px * $hd var(--padding-xs) 5px * $hd 0_ | - |
180
- | --search-left-icon-color | _var(--gray-6)_ | - |
181
- | --search-action-padding | _0 var(--padding-xs)_ | - |
182
- | --search-action-color | _var(--text-color)_ | - |
183
- | --search-action-line-height | _var(--search-input-height)_ | - |
184
- | --search-action-font-size | _var(--font-size-md)_ | - |
185
- | --search-action-active-background-color | _var(--active-color)_ | - |
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
- | --share-sheet-description-font-size | _var(--font-size-sm)_ | - |
183
- | --share-sheet-options-padding | _var(--padding-md) 0 var(--padding-md) var(--padding-xs)_ | - |
184
- | --share-sheet-option-icon-margin | _0 var(--padding-md)_ | - |
185
- | --share-sheet-option-icon-size | _48px * $hd_ | - |
186
- | --share-sheet-option-icon-width | _var(--share-sheet-option-icon-size)_ | - |
187
- | --share-sheet-option-icon-height | _var(--share-sheet-option-icon-size)_ | - |
188
- | --share-sheet-option-icon-font-size | _var(--share-sheet-option-icon-size)_ | - |
189
- | --share-sheet-option-name-padding | _0 var(--padding-base)_ | - |
190
- | --share-sheet-option-name-margin-top | _var(--padding-xs)_ | - |
191
- | --share-sheet-option-name-color | _var(--gray-7)_ | - |
192
- | --share-sheet-option-name-font-size | _var(--font-size-sm)_ | - |
193
- | --share-sheet-option-name-line-height | _1.4_ | - |
194
- | --share-sheet-option-description-padding | _0 var(--padding-base)_ | - |
195
- | --share-sheet-option-description-color | _var(--gray-5)_ | - |
196
- | --share-sheet-option-description-font-size | _var(--font-size-sm)_ | - |
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
  ### 如何实现分享逻辑?
@@ -0,0 +1,11 @@
1
+ ## 主题定制
2
+
3
+ ### 样式变量
4
+
5
+ 组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
6
+
7
+ #### 基础样式
8
+
9
+ | 描述 | 名称 | 默认值 | 备注 |
10
+ | --- | --- | --- | --- |
11
+
@@ -102,21 +102,21 @@ function EventSidebar() {
102
102
 
103
103
  组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
104
104
 
105
- | 名称 | 默认值 | 描述 |
106
- |----------------------------------------------|---------------------------------------|-----|
107
- | --sidebar-width | _80px * $hd_ | - |
108
- | --sidebar-disabled-color | _var(--gray-5)_ | - |
109
- | --sidebar-tab-font-size | _var(--font-size-md)_ | - |
110
- | --sidebar-tab-line-height | _var(--line-height-md)_ | - |
111
- | --sidebar-tab-color | _var(--text-color)_ | - |
112
- | --sidebar-tab-padding | _20px * $hd var(--padding-sm)_ | - |
113
- | --sidebar-tab-background-color | _var(--background-color)_ | - |
114
- | --sidebar-tab-active-background-color | _var(--active-color)_ | - |
115
- | --sidebar-tab-active-font-weight | _var(--font-weight-bold)_ | - |
116
- | --sidebar-tab-active-color | _var(--text-color)_ | - |
117
- | --sidebar-tab-active-border-width | _4px * $hd_ | - |
118
- | --sidebar-tab-active-border-height | _16px * $hd_ | - |
119
- | --sidebar-tab-active-border-color | _var(--red)_ | - |
120
- | --sidebar-tab-active-active-background-color | _var(--white)_ | - |
121
- | --sidebar-tab-disabled-color | _var(--sidebar-disabled-color)_ | - |
122
- | --sidebar-tab-disabled-background-color | _var(--sidebar-tab-background-color)_ | - |
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` | |
@@ -0,0 +1,11 @@
1
+ ## 主题定制
2
+
3
+ ### 样式变量
4
+
5
+ 组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
6
+
7
+ #### 基础样式
8
+
9
+ | 描述 | 名称 | 默认值 | 备注 |
10
+ | --- | --- | --- | --- |
11
+
@@ -106,10 +106,10 @@ function BasicSignature() {
106
106
 
107
107
  组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
108
108
 
109
- | 名称 | 默认值 | 描述 |
110
- | ------------------------------ | --------------------------- | ------------ |
111
- | --signature-padding | _var(--van-padding-xs)_ | - |
112
- | --signature-content-height | _200px_ | 画布高度 |
113
- | --signature-content-background | _var(--background-color-2)_ | 画布背景色 |
114
- | --signature-content-border | _1px dotted #dadada_ | 画布边框样式 |
115
- | --signature-border-radius | _8px_ | 画布圆角 |
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` | |
@@ -0,0 +1,11 @@
1
+ ## 主题定制
2
+
3
+ ### 样式变量
4
+
5
+ 组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
6
+
7
+ #### 基础样式
8
+
9
+ | 描述 | 名称 | 默认值 | 备注 |
10
+ | --- | --- | --- | --- |
11
+
@@ -118,14 +118,14 @@ const template = () => {
118
118
 
119
119
  组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
120
120
 
121
- | 名称 | 默认值 | 描述 |
122
- |---------------------------------------------|-------------------------------|-----|
123
- | --skeleton-avatar-size | _32px * $hd_ | - |
124
- | --skeleton-avatar-background | _var(--active-color)_ | - |
125
- | --skeleton-duration | _1.2s_ | - |
126
- | --skeleton-paragraph-height | _16px * $hd_ | - |
127
- | --skeleton-paragraph-background | _var(--active-color)_ | - |
128
- | --skeleton-title-width | _40%_ | - |
129
- | --skeleton-paragraph-margin-top | _var(--padding-xs)_ | - |
130
- | --skeleton-image-size | _96px * $hd_ | - |
131
- | --skeleton-image-radius | _24px * $hd_ | - |
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` | |
@@ -0,0 +1,11 @@
1
+ ## 主题定制
2
+
3
+ ### 样式变量
4
+
5
+ 组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
6
+
7
+ #### 基础样式
8
+
9
+ | 描述 | 名称 | 默认值 | 备注 |
10
+ | --- | --- | --- | --- |
11
+
@@ -136,16 +136,16 @@ function StyledThumbSlider() {
136
136
 
137
137
  组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
138
138
 
139
- | 名称 | 默认值 | 描述 |
140
- |------------------------------------|--------------------------------------------|-----|
141
- | --slider-border-radius | _var(--border-radius-max)_ | - |
142
- | --slider-active-background-color | _var(--blue)_ | - |
143
- | --slider-inactive-background-color | _var(--gray-3)_ | - |
144
- | --slider-disabled-opacity | _var(--disabled-opacity)_ | - |
145
- | --slider-track-height | _2px * $hd_ | - |
146
- | --slider-track-transition-duration | _var(--animation-duration-fast)_ | - |
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)_ | - |
151
- | --slider-thumb-box-shadow | _0 1px * $hd 2px * $hd rgba(0, 0, 0, 0.5)_ | - |
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` | |
@@ -0,0 +1,11 @@
1
+ ## 主题定制
2
+
3
+ ### 样式变量
4
+
5
+ 组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
6
+
7
+ #### 基础样式
8
+
9
+ | 描述 | 名称 | 默认值 | 备注 |
10
+ | --- | --- | --- | --- |
11
+
@@ -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
- | --space-item-gap-mini | _var(--padding-xs)_ | - |
115
- | --space-item-gap-small | _var(--padding-sm)_ | - |
116
- | --space-item-gap-medium | _var(--padding-md)_ | - |
117
- | --space-item-gap-large | _var(--padding-lg)_ | - |
118
- | --space-item-vertical-gap-mini | _var(--space-item-gap-mini)_ | - |
119
- | --space-item-vertical-gap-small | _var(--space-item-gap-small)_ | - |
120
- | --space-item-vertical-gap-medium | _var(--space-item-gap-medium)_ | - |
121
- | --space-item-vertical-gap-large | _var(--space-item-gap-large)_ | - |
122
- | --space-item-horizontal-gap-mini | _var(--space-item-gap-mini)_ | - |
123
- | --space-item-horizontal-gap-small | _var(--space-item-gap-small)_ | - |
124
- | --space-item-horizontal-gap-medium | _var(--space-item-gap-medium)_ | - |
125
- | --space-item-horizontal-gap-large | _var(--space-item-gap-large)_ | - |
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
- | --stepper-active-background-color | _#e8e8e8_ | - |
132
- | --stepper-background-color | _var(--active-color)_ | - |
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)_ | - |
137
- | --stepper-input-line-height | _normal_ | - |
138
- | --stepper-input-color | _var(--text-color)_ | - |
139
- | --stepper-input-background-color | _var(--stepper-background-color)_ | - |
140
- | --stepper-input-disabled-color | _var(--gray-5)_ | - |
141
- | --stepper-input-disabled-background-color | _var(--active-color)_ | - |
142
- | --stepper-button-icon-color | _var(--text-color)_ | - |
143
- | --stepper-button-disabled-color | _var(--gray-5)_ | - |
144
- | --stepper-button-disabled-background-color | _var(--background-color)_ | - |
145
- | --stepper-rounded-button-border-radius | _var(--border-radius-md)_ | - |
146
- | --stepper-rounded-decrease-button-border-radius | _var(--stepper-rounded-button-border-radius)_ | - |
147
- | --stepper-rounded-increase-button-border-radius | _var(--stepper-rounded-button-border-radius)_ | - |
148
- | --stepper-circular-decrease-button-color | _var(--danger-color)_ | - |
149
- | --stepper-circular-decrease-button-background-color | _var(--white)_ | - |
150
- | --stepper-circular-decrease-button-border-color | _var(--danger-color)_ | - |
151
- | --stepper-circular-increase-button-color | _var(--white)_ | - |
152
- | --stepper-circular-increase-button-background-color | _var(--blue, $blue)_ | - |
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
- | --steps-background-color | _var(var(--whit)_ | - |
124
- | --steps-horizontal-padding | _10px * $hd 0_ | - |
125
- | --steps-vertical-padding | _0 0 0 var(--padding-xl)_ | - |
126
- | --step-color | _var(--gray-6)_ | - |
127
- | --step-active-color | _var(--green)_ | - |
128
- | --step-process-color | _var(--text-color)_ | - |
129
- | --step-font-size | _var(--font-size-md)_ | - |
130
- | --step-icon-font-size | _12px * $hd_ | - |
131
- | --step-line-background-color | _var(--border-color)_ | - |
132
- | --step-line-transition-duration | _var(--animation-duration-base)_ | - |
133
- | --step-completed-color | _var(--text-color)_ | - |
134
- | --step-completed-line-background-color | _var(--green)_ | - |
135
- | --step-circle-size | _5PX_ | - |
136
- | --step-circle-width | _var(--step-circle-size)_ | - |
137
- | --step-circle-height | _var(--step-circle-size)_ | - |
138
- | --step-circle-margin | _3px * $hd_ | - |
139
- | --step-circle-background-color | _var(--gray-6)_ | - |
140
- | --step-circle-border-radius | _50%_ | - |
141
- | --step-horizontal-title-font-size | _var(--font-size-sm)_ | - |
142
- | --step-vertical-line-height | _var(--line-height-sm)_ | - |
143
- | --step-vertical-padding | _10px * $hd 10px * $hd 10px * $hd 0_ | - |
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` | |
@@ -0,0 +1,12 @@
1
+ ## 主题定制
2
+
3
+ ### 样式变量
4
+
5
+ 组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。
6
+
7
+ #### 基础样式
8
+
9
+ | 描述 | 名称 | 默认值 | 备注 |
10
+ | --- | --- | --- | --- |
11
+ | 粘性定位层级 | --sticky-z-index | 99 | |
12
+
@@ -82,6 +82,6 @@ function StickyWithContainer() {
82
82
 
83
83
  组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 [ConfigProvider](/components/config-provider/) 组件。
84
84
 
85
- | 名称 | 默认值 | 描述 |
86
- |------------------|------|-----|
87
- | --sticky-z-index | _99_ | - |
85
+ | 描述 | 名称 | 默认值 | 备注 |
86
+ | --- | --- | --- | --- |
87
+ | 粘性定位层级 | `--sticky-z-index` | `99` | |