@a2simcode/ui 0.0.153 → 0.0.155

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 (343) hide show
  1. package/.cursor/skills/ui-component-helper/README.md +86 -86
  2. package/.cursor/skills/ui-component-helper/SKILL.md +115 -115
  3. package/LICENSE +53 -53
  4. package/README.md +156 -156
  5. package/dist/components/comp/src/interface.d.ts +6 -1
  6. package/dist/components/input-layer/index.d.ts +2 -2
  7. package/dist/components/input-layer/src/input-layer.vue.d.ts +2 -2
  8. package/dist/simcode-ui.es.js +4361 -4349
  9. package/dist/simcode-ui.umd.js +2 -2
  10. package/dist/stats.html +1 -1
  11. package/dist/ui.css +1 -1
  12. package/docs/components/autocomplete.md +89 -89
  13. package/docs/components/barcode.md +101 -101
  14. package/docs/components/button-select.md +24 -24
  15. package/docs/components/button.md +117 -117
  16. package/docs/components/buttons.md +119 -119
  17. package/docs/components/cascader-select.md +114 -114
  18. package/docs/components/checkbox.md +114 -114
  19. package/docs/components/code-mirror.md +85 -85
  20. package/docs/components/collapse.md +26 -26
  21. package/docs/components/comp.md +71 -71
  22. package/docs/components/count-up.md +24 -24
  23. package/docs/components/count.md +24 -24
  24. package/docs/components/data-panel.md +24 -24
  25. package/docs/components/date.md +76 -76
  26. package/docs/components/dialog-full.md +112 -112
  27. package/docs/components/dialog.md +127 -127
  28. package/docs/components/divider.md +24 -24
  29. package/docs/components/drawer.md +127 -127
  30. package/docs/components/dynamic-layer.md +118 -118
  31. package/docs/components/echarts.md +72 -72
  32. package/docs/components/editor.md +24 -24
  33. package/docs/components/form.md +72 -57
  34. package/docs/components/guid.md +39 -39
  35. package/docs/components/hpanel.md +24 -24
  36. package/docs/components/icon.md +56 -56
  37. package/docs/components/input-button.md +24 -24
  38. package/docs/components/input-code.md +24 -24
  39. package/docs/components/input-color.md +114 -114
  40. package/docs/components/input-layer.md +26 -26
  41. package/docs/components/input-rows.md +370 -370
  42. package/docs/components/input-tag.md +50 -50
  43. package/docs/components/input.md +129 -129
  44. package/docs/components/layer-form.md +61 -61
  45. package/docs/components/layer.md +127 -127
  46. package/docs/components/layout.md +132 -132
  47. package/docs/components/map.md +24 -24
  48. package/docs/components/menu.md +121 -121
  49. package/docs/components/meta/buttons.ts +76 -76
  50. package/docs/components/meta/code-mirror.ts +108 -108
  51. package/docs/components/meta/comp.ts +236 -236
  52. package/docs/components/meta/date.ts +267 -267
  53. package/docs/components/meta/echarts.ts +64 -64
  54. package/docs/components/meta/form-item.ts +50 -50
  55. package/docs/components/meta/form.ts +181 -181
  56. package/docs/components/meta/input-cards.ts +112 -112
  57. package/docs/components/meta/input-color.ts +243 -243
  58. package/docs/components/meta/input-layer.ts +366 -366
  59. package/docs/components/meta/input-rows.ts +113 -113
  60. package/docs/components/meta/layer-form.ts +56 -56
  61. package/docs/components/meta/map.ts +68 -68
  62. package/docs/components/meta/panel.ts +152 -152
  63. package/docs/components/meta/slider.ts +270 -270
  64. package/docs/components/meta/table-panel.ts +232 -232
  65. package/docs/components/meta/table.ts +391 -391
  66. package/docs/components/meta/tabs.ts +146 -146
  67. package/docs/components/meta/title.ts +91 -91
  68. package/docs/components/meta/tree-select.ts +199 -199
  69. package/docs/components/meta/vpanel.ts +19 -19
  70. package/docs/components/meta/workflow-viewer.ts +55 -55
  71. package/docs/components/number.md +124 -124
  72. package/docs/components/page.md +102 -102
  73. package/docs/components/panel.md +37 -37
  74. package/docs/components/radio.md +87 -87
  75. package/docs/components/rate.md +71 -71
  76. package/docs/components/select.md +133 -133
  77. package/docs/components/slider-captcha.md +41 -41
  78. package/docs/components/slider.md +101 -101
  79. package/docs/components/switch.md +90 -90
  80. package/docs/components/table-panel.md +236 -236
  81. package/docs/components/table.md +391 -391
  82. package/docs/components/tabs.md +26 -26
  83. package/docs/components/title.md +24 -24
  84. package/docs/components/tree.md +207 -207
  85. package/docs/components/upload.md +117 -117
  86. package/docs/components/workflow-viewer.md +21 -21
  87. package/docs/components/workflow.md +21 -21
  88. package/docs/examples/autocomplete/advanced.vue +35 -35
  89. package/docs/examples/autocomplete/basic.vue +32 -32
  90. package/docs/examples/autocomplete/clearable.vue +33 -33
  91. package/docs/examples/autocomplete/custom-template.vue +49 -49
  92. package/docs/examples/autocomplete/disabled.vue +33 -33
  93. package/docs/examples/autocomplete/icon.vue +37 -37
  94. package/docs/examples/barcode/all-types.vue +380 -380
  95. package/docs/examples/barcode/basic.vue +14 -14
  96. package/docs/examples/barcode/props-appearance.vue +243 -243
  97. package/docs/examples/barcode/props-geometry.vue +143 -143
  98. package/docs/examples/barcode/props-logic.vue +216 -216
  99. package/docs/examples/barcode/props-symbology.vue +199 -199
  100. package/docs/examples/barcode/props-text.vue +268 -268
  101. package/docs/examples/button/basic.vue +7 -7
  102. package/docs/examples/button/danger-ghost.vue +17 -17
  103. package/docs/examples/button/disabled.vue +10 -10
  104. package/docs/examples/button/loading.vue +6 -6
  105. package/docs/examples/button/shape.vue +7 -7
  106. package/docs/examples/button/size.vue +14 -14
  107. package/docs/examples/button/type.vue +9 -9
  108. package/docs/examples/button-select/basic.vue +19 -19
  109. package/docs/examples/buttons/basic.vue +45 -45
  110. package/docs/examples/buttons/disabled.vue +36 -36
  111. package/docs/examples/buttons/dropdown.vue +63 -63
  112. package/docs/examples/buttons/group.vue +52 -52
  113. package/docs/examples/buttons/link.vue +47 -47
  114. package/docs/examples/buttons/popup.vue +39 -39
  115. package/docs/examples/buttons/size.vue +45 -45
  116. package/docs/examples/cascader-select/basic.vue +28 -28
  117. package/docs/examples/cascader-select/clearable.vue +34 -34
  118. package/docs/examples/cascader-select/disabled.vue +43 -43
  119. package/docs/examples/cascader-select/filterable.vue +37 -37
  120. package/docs/examples/cascader-select/methods.vue +84 -84
  121. package/docs/examples/cascader-select/multiple.vue +38 -38
  122. package/docs/examples/cascader-select/slot.vue +45 -45
  123. package/docs/examples/checkbox/basic.vue +18 -18
  124. package/docs/examples/checkbox/button.vue +19 -19
  125. package/docs/examples/checkbox/color.vue +25 -25
  126. package/docs/examples/checkbox/disabled.vue +17 -17
  127. package/docs/examples/checkbox/min-max.vue +20 -20
  128. package/docs/examples/checkbox/mixed.vue +56 -56
  129. package/docs/examples/checkbox/size.vue +28 -28
  130. package/docs/examples/code-mirror/basic.vue +11 -11
  131. package/docs/examples/code-mirror/events.vue +42 -42
  132. package/docs/examples/code-mirror/height.vue +25 -25
  133. package/docs/examples/code-mirror/mode.vue +33 -33
  134. package/docs/examples/code-mirror/readonly.vue +14 -14
  135. package/docs/examples/collapse/basic.vue +82 -82
  136. package/docs/examples/comp/basic.vue +7 -7
  137. package/docs/examples/comp/collapse.vue +38 -38
  138. package/docs/examples/comp/tabs.vue +38 -38
  139. package/docs/examples/count/basic.vue +101 -101
  140. package/docs/examples/count-up/basic.vue +89 -89
  141. package/docs/examples/data-panel/basic.vue +110 -110
  142. package/docs/examples/date/basic.vue +73 -73
  143. package/docs/examples/date/default-value.vue +59 -59
  144. package/docs/examples/date/format.vue +75 -75
  145. package/docs/examples/date/range.vue +66 -66
  146. package/docs/examples/date/types.vue +79 -79
  147. package/docs/examples/decorated-title/basic.vue +31 -31
  148. package/docs/examples/dialog/basic.vue +36 -36
  149. package/docs/examples/dialog/custom-buttons.vue +44 -44
  150. package/docs/examples/dialog/fullscreen.vue +23 -23
  151. package/docs/examples/dialog/no-mask.vue +17 -17
  152. package/docs/examples/dialog/size.vue +44 -44
  153. package/docs/examples/dialog/steps.vue +57 -57
  154. package/docs/examples/dialog-full/basic.vue +29 -29
  155. package/docs/examples/dialog-full/custom-buttons.vue +45 -45
  156. package/docs/examples/dialog-full/no-buttons.vue +18 -18
  157. package/docs/examples/dialog-full/no-header.vue +27 -27
  158. package/docs/examples/dialog-full/steps.vue +71 -71
  159. package/docs/examples/divider/basic.vue +52 -52
  160. package/docs/examples/drawer/basic.vue +35 -35
  161. package/docs/examples/drawer/custom-buttons.vue +34 -34
  162. package/docs/examples/drawer/direction.vue +47 -47
  163. package/docs/examples/drawer/mask.vue +36 -36
  164. package/docs/examples/drawer/no-buttons.vue +20 -20
  165. package/docs/examples/drawer/size.vue +28 -28
  166. package/docs/examples/dynamic-layer/basic.vue +33 -33
  167. package/docs/examples/dynamic-layer/custom-buttons.vue +43 -43
  168. package/docs/examples/dynamic-layer/form.vue +73 -73
  169. package/docs/examples/dynamic-layer/steps.vue +52 -52
  170. package/docs/examples/dynamic-layer/types.vue +40 -40
  171. package/docs/examples/echarts/basic.vue +31 -31
  172. package/docs/examples/echarts/dynamic.vue +43 -43
  173. package/docs/examples/echarts/line.vue +46 -46
  174. package/docs/examples/echarts/pie.vue +44 -44
  175. package/docs/examples/editor/basic.vue +15 -15
  176. package/docs/examples/form/basic.vue +545 -545
  177. package/docs/examples/form/init.vue +76 -76
  178. package/docs/examples/form/master-detail.vue +203 -203
  179. package/docs/examples/form/rule-format.vue +142 -0
  180. package/docs/examples/guid/basic.vue +10 -10
  181. package/docs/examples/guid/size.vue +13 -13
  182. package/docs/examples/hpanel/basic.vue +79 -79
  183. package/docs/examples/icon/basic.vue +9 -9
  184. package/docs/examples/icon/rotate-flip.vue +9 -9
  185. package/docs/examples/icon/size.vue +7 -7
  186. package/docs/examples/input/basic.vue +10 -10
  187. package/docs/examples/input/clearable.vue +12 -12
  188. package/docs/examples/input/disabled.vue +6 -6
  189. package/docs/examples/input/icon.vue +23 -23
  190. package/docs/examples/input/password.vue +18 -18
  191. package/docs/examples/input/size.vue +13 -13
  192. package/docs/examples/input/textarea.vue +25 -25
  193. package/docs/examples/input/word-limit.vue +28 -28
  194. package/docs/examples/input-button/basic.vue +33 -33
  195. package/docs/examples/input-code/basic.vue +29 -29
  196. package/docs/examples/input-color/basic.vue +10 -10
  197. package/docs/examples/input-color/disabled.vue +13 -13
  198. package/docs/examples/input-color/format.vue +17 -17
  199. package/docs/examples/input-color/no-alpha.vue +13 -13
  200. package/docs/examples/input-color/only-button.vue +15 -15
  201. package/docs/examples/input-color/predefine.vue +31 -31
  202. package/docs/examples/input-color/size.vue +15 -15
  203. package/docs/examples/input-layer/basic.vue +86 -86
  204. package/docs/examples/input-rows/basic.vue +73 -73
  205. package/docs/examples/input-rows/drag.vue +48 -48
  206. package/docs/examples/input-rows/layer-form.vue +85 -85
  207. package/docs/examples/input-rows/nested.vue +91 -91
  208. package/docs/examples/input-tag/basic.vue +27 -27
  209. package/docs/examples/input-tag/colors.vue +23 -23
  210. package/docs/examples/input-tag/readonly.vue +17 -17
  211. package/docs/examples/layer/basic.vue +43 -43
  212. package/docs/examples/layer/custom-buttons.vue +61 -61
  213. package/docs/examples/layer/drawer.vue +37 -37
  214. package/docs/examples/layer/full.vue +38 -38
  215. package/docs/examples/layer/modal.vue +34 -34
  216. package/docs/examples/layer/steps.vue +46 -46
  217. package/docs/examples/layer-form/basic.vue +76 -76
  218. package/docs/examples/layer-form/config.vue +82 -82
  219. package/docs/examples/layer-form/size.vue +72 -72
  220. package/docs/examples/layout/basic.vue +36 -36
  221. package/docs/examples/layout/custom-size.vue +50 -50
  222. package/docs/examples/layout/disable-move.vue +37 -37
  223. package/docs/examples/layout/hide-mid-when-narrow.vue +96 -96
  224. package/docs/examples/layout/min-size.vue +73 -73
  225. package/docs/examples/layout/percent-size.vue +80 -80
  226. package/docs/examples/layout/simple.vue +22 -22
  227. package/docs/examples/layout/top-side.vue +34 -34
  228. package/docs/examples/map/basic.vue +22 -22
  229. package/docs/examples/menu/basic.vue +58 -58
  230. package/docs/examples/menu/collapsed.vue +49 -49
  231. package/docs/examples/menu/horizontal.vue +44 -44
  232. package/docs/examples/menu/selection-test.vue +104 -104
  233. package/docs/examples/menu/theme.vue +46 -46
  234. package/docs/examples/menu/vertical.vue +46 -46
  235. package/docs/examples/number/advanced.vue +143 -143
  236. package/docs/examples/number/basic.vue +63 -63
  237. package/docs/examples/number/disabled.vue +49 -49
  238. package/docs/examples/number/size.vue +42 -42
  239. package/docs/examples/number/slots.vue +123 -123
  240. package/docs/examples/number/step-strictly.vue +41 -41
  241. package/docs/examples/number/step.vue +47 -47
  242. package/docs/examples/page/basic.vue +41 -41
  243. package/docs/examples/page/code-table-model.vue +428 -428
  244. package/docs/examples/page/dept-user-management.vue +211 -211
  245. package/docs/examples/page/init.vue +87 -87
  246. package/docs/examples/page/log.vue +453 -453
  247. package/docs/examples/page/user-management.vue +313 -313
  248. package/docs/examples/panel/tool-buttons.vue +18 -18
  249. package/docs/examples/radio/basic.vue +17 -17
  250. package/docs/examples/radio/button.vue +17 -17
  251. package/docs/examples/radio/color.vue +18 -18
  252. package/docs/examples/radio/disabled.vue +17 -17
  253. package/docs/examples/radio/size.vue +29 -29
  254. package/docs/examples/rate/basic.vue +24 -24
  255. package/docs/examples/rate/half.vue +24 -24
  256. package/docs/examples/rate/readonly.vue +11 -11
  257. package/docs/examples/rate/text.vue +37 -37
  258. package/docs/examples/select/basic.vue +16 -16
  259. package/docs/examples/select/clearable.vue +22 -22
  260. package/docs/examples/select/disabled.vue +31 -31
  261. package/docs/examples/select/filterable.vue +24 -24
  262. package/docs/examples/select/group.vue +23 -23
  263. package/docs/examples/select/icon.vue +16 -16
  264. package/docs/examples/select/multiple.vue +18 -18
  265. package/docs/examples/select/size.vue +39 -39
  266. package/docs/examples/slider/basic.vue +42 -42
  267. package/docs/examples/slider/disabled.vue +17 -17
  268. package/docs/examples/slider/marks.vue +30 -30
  269. package/docs/examples/slider/size.vue +37 -37
  270. package/docs/examples/slider/tooltip.vue +36 -36
  271. package/docs/examples/slider/vertical.vue +26 -26
  272. package/docs/examples/slider-captcha/basic.vue +44 -44
  273. package/docs/examples/slider-captcha/custom.vue +48 -48
  274. package/docs/examples/switch/basic.vue +16 -16
  275. package/docs/examples/switch/disabled.vue +13 -13
  276. package/docs/examples/switch/loading.vue +13 -13
  277. package/docs/examples/switch/size.vue +15 -15
  278. package/docs/examples/switch/text.vue +13 -13
  279. package/docs/examples/table/action-filter.vue +126 -126
  280. package/docs/examples/table/actions.vue +116 -116
  281. package/docs/examples/table/add-row.vue +103 -103
  282. package/docs/examples/table/basic.vue +168 -168
  283. package/docs/examples/table/checkbox-layout.vue +68 -68
  284. package/docs/examples/table/custom-layout.vue +115 -115
  285. package/docs/examples/table/dynamic-type.vue +73 -73
  286. package/docs/examples/table/editable.vue +262 -262
  287. package/docs/examples/table/field-selection.vue +87 -87
  288. package/docs/examples/table/frozen-column.vue +140 -140
  289. package/docs/examples/table/height-mode.vue +99 -99
  290. package/docs/examples/table/icon.vue +85 -85
  291. package/docs/examples/table/link.vue +66 -66
  292. package/docs/examples/table/multiple.vue +188 -188
  293. package/docs/examples/table/pagination.vue +151 -151
  294. package/docs/examples/table/single-selection.vue +64 -64
  295. package/docs/examples/table/sub-table-lazy.vue +97 -97
  296. package/docs/examples/table/sub-table.vue +103 -103
  297. package/docs/examples/table/tag.vue +43 -43
  298. package/docs/examples/table/tree-column.vue +119 -119
  299. package/docs/examples/table/tree-data.vue +141 -141
  300. package/docs/examples/table/tree-default-expand-all.vue +60 -60
  301. package/docs/examples/table/tree-lazy.vue +80 -80
  302. package/docs/examples/table/tree-set-selection.vue +75 -75
  303. package/docs/examples/table-panel/basic.vue +229 -229
  304. package/docs/examples/table-panel/batch-operations.vue +285 -285
  305. package/docs/examples/table-panel/button-visibility.vue +88 -88
  306. package/docs/examples/table-panel/filter.vue +219 -219
  307. package/docs/examples/table-panel/get-selection.vue +111 -111
  308. package/docs/examples/table-panel/multiple-selection.vue +243 -243
  309. package/docs/examples/table-panel/pagination.vue +133 -133
  310. package/docs/examples/table-panel/sub-table-lazy.vue +118 -118
  311. package/docs/examples/table-panel/tree-parent-key.vue +67 -67
  312. package/docs/examples/tabs/basic.vue +98 -98
  313. package/docs/examples/time/base.vue +67 -67
  314. package/docs/examples/title/basic.vue +87 -87
  315. package/docs/examples/tree/accordion.vue +46 -46
  316. package/docs/examples/tree/basic.vue +50 -50
  317. package/docs/examples/tree/buttons.vue +53 -53
  318. package/docs/examples/tree/checkable.vue +52 -52
  319. package/docs/examples/tree/custom-keys.vue +39 -39
  320. package/docs/examples/tree/default-expanded.vue +52 -52
  321. package/docs/examples/tree/draggable.vue +29 -29
  322. package/docs/examples/tree/expand-on-click.vue +39 -39
  323. package/docs/examples/tree/flat-data.vue +20 -20
  324. package/docs/examples/tree/icon.vue +40 -40
  325. package/docs/examples/tree/load-data.vue +37 -37
  326. package/docs/examples/tree/methods.vue +74 -74
  327. package/docs/examples/tree/theme.vue +33 -33
  328. package/docs/examples/tree-select/basic.vue +47 -47
  329. package/docs/examples/upload/accept.vue +31 -31
  330. package/docs/examples/upload/basic.vue +12 -12
  331. package/docs/examples/upload/drag.vue +11 -11
  332. package/docs/examples/upload/image.vue +17 -17
  333. package/docs/examples/upload/limit.vue +20 -20
  334. package/docs/examples/upload/multiple.vue +17 -17
  335. package/docs/examples/upload/readonly.vue +17 -17
  336. package/docs/examples/utils/cipher.vue +160 -160
  337. package/docs/examples/utils/common.vue +153 -153
  338. package/docs/examples/utils/date.vue +56 -56
  339. package/docs/examples/utils/dom.vue +52 -52
  340. package/docs/examples/utils/is.vue +70 -70
  341. package/docs/examples/workflow/basic.vue +265 -265
  342. package/docs/examples/workflow-viewer/basic.vue +248 -248
  343. package/package.json +23 -23
@@ -1,101 +1,101 @@
1
- # Slider 滑块
2
-
3
- 通过拖动滑块在一个固定区间内进行选择。
4
-
5
- ## 基础用法
6
-
7
- 在自定义间距内选择一个数值。
8
-
9
- <Demo :source-code="sliderBasicCode">
10
- <template #source>
11
- <slider-basic />
12
- </template>
13
- <template #description>
14
- 展示了基础用法、间断点、带有输入框以及范围选择。
15
- </template>
16
- </Demo>
17
-
18
- ## 禁用状态
19
-
20
- 通过设置 `readonly` 属性禁用滑块。
21
-
22
- <Demo :source-code="sliderDisabledCode">
23
- <template #source>
24
- <slider-disabled />
25
- </template>
26
- <template #description>
27
- 禁用状态下滑块不可拖动。
28
- </template>
29
- </Demo>
30
-
31
- ## 自定义提示
32
-
33
- 可以自定义提示信息的格式或隐藏提示。
34
-
35
- <Demo :source-code="sliderTooltipCode">
36
- <template #source>
37
- <slider-tooltip />
38
- </template>
39
- <template #description>
40
- 使用 `format-tooltip` 自定义提示内容,使用 `show-tooltip` 控制提示的显示。
41
- </template>
42
- </Demo>
43
-
44
- ## 垂直模式
45
-
46
- 设置 `vertical` 属性为 true 可以启用垂直模式。
47
-
48
- <Demo :source-code="sliderVerticalCode">
49
- <template #source>
50
- <slider-vertical />
51
- </template>
52
- <template #description>
53
- 垂直模式下必须设置高度 `height` 属性。
54
- </template>
55
- </Demo>
56
-
57
- ## 显示标记
58
-
59
- 使用 `marks` 属性标注关键节点。
60
-
61
- <Demo :source-code="sliderMarksCode">
62
- <template #source>
63
- <slider-marks />
64
- </template>
65
- <template #description>
66
- 通过 `marks` 对象可以在滑块上显示标记,key 为位置,value 为标记内容。
67
- </template>
68
- </Demo>
69
-
70
- ## 不同尺寸
71
-
72
- Slider 组件提供三种尺寸。
73
-
74
- <Demo :source-code="sliderSizeCode">
75
- <template #source>
76
- <slider-size />
77
- </template>
78
- <template #description>
79
- 通过 `size` 属性设置不同的尺寸:large、default、small。
80
- </template>
81
- </Demo>
82
-
83
- ## API
84
-
85
- <ApiTable :data="sliderApi" componentName="slider" />
86
-
87
- <script setup>
88
- import SliderBasic from '../examples/slider/basic.vue'
89
- import SliderDisabled from '../examples/slider/disabled.vue'
90
- import SliderTooltip from '../examples/slider/tooltip.vue'
91
- import SliderVertical from '../examples/slider/vertical.vue'
92
- import SliderMarks from '../examples/slider/marks.vue'
93
- import SliderSize from '../examples/slider/size.vue'
94
- import sliderApi from './meta/slider'
95
- import sliderBasicCode from '../examples/slider/basic.vue?raw'
96
- import sliderDisabledCode from '../examples/slider/disabled.vue?raw'
97
- import sliderTooltipCode from '../examples/slider/tooltip.vue?raw'
98
- import sliderVerticalCode from '../examples/slider/vertical.vue?raw'
99
- import sliderMarksCode from '../examples/slider/marks.vue?raw'
100
- import sliderSizeCode from '../examples/slider/size.vue?raw'
101
- </script>
1
+ # Slider 滑块
2
+
3
+ 通过拖动滑块在一个固定区间内进行选择。
4
+
5
+ ## 基础用法
6
+
7
+ 在自定义间距内选择一个数值。
8
+
9
+ <Demo :source-code="sliderBasicCode">
10
+ <template #source>
11
+ <slider-basic />
12
+ </template>
13
+ <template #description>
14
+ 展示了基础用法、间断点、带有输入框以及范围选择。
15
+ </template>
16
+ </Demo>
17
+
18
+ ## 禁用状态
19
+
20
+ 通过设置 `readonly` 属性禁用滑块。
21
+
22
+ <Demo :source-code="sliderDisabledCode">
23
+ <template #source>
24
+ <slider-disabled />
25
+ </template>
26
+ <template #description>
27
+ 禁用状态下滑块不可拖动。
28
+ </template>
29
+ </Demo>
30
+
31
+ ## 自定义提示
32
+
33
+ 可以自定义提示信息的格式或隐藏提示。
34
+
35
+ <Demo :source-code="sliderTooltipCode">
36
+ <template #source>
37
+ <slider-tooltip />
38
+ </template>
39
+ <template #description>
40
+ 使用 `format-tooltip` 自定义提示内容,使用 `show-tooltip` 控制提示的显示。
41
+ </template>
42
+ </Demo>
43
+
44
+ ## 垂直模式
45
+
46
+ 设置 `vertical` 属性为 true 可以启用垂直模式。
47
+
48
+ <Demo :source-code="sliderVerticalCode">
49
+ <template #source>
50
+ <slider-vertical />
51
+ </template>
52
+ <template #description>
53
+ 垂直模式下必须设置高度 `height` 属性。
54
+ </template>
55
+ </Demo>
56
+
57
+ ## 显示标记
58
+
59
+ 使用 `marks` 属性标注关键节点。
60
+
61
+ <Demo :source-code="sliderMarksCode">
62
+ <template #source>
63
+ <slider-marks />
64
+ </template>
65
+ <template #description>
66
+ 通过 `marks` 对象可以在滑块上显示标记,key 为位置,value 为标记内容。
67
+ </template>
68
+ </Demo>
69
+
70
+ ## 不同尺寸
71
+
72
+ Slider 组件提供三种尺寸。
73
+
74
+ <Demo :source-code="sliderSizeCode">
75
+ <template #source>
76
+ <slider-size />
77
+ </template>
78
+ <template #description>
79
+ 通过 `size` 属性设置不同的尺寸:large、default、small。
80
+ </template>
81
+ </Demo>
82
+
83
+ ## API
84
+
85
+ <ApiTable :data="sliderApi" componentName="slider" />
86
+
87
+ <script setup>
88
+ import SliderBasic from '../examples/slider/basic.vue'
89
+ import SliderDisabled from '../examples/slider/disabled.vue'
90
+ import SliderTooltip from '../examples/slider/tooltip.vue'
91
+ import SliderVertical from '../examples/slider/vertical.vue'
92
+ import SliderMarks from '../examples/slider/marks.vue'
93
+ import SliderSize from '../examples/slider/size.vue'
94
+ import sliderApi from './meta/slider'
95
+ import sliderBasicCode from '../examples/slider/basic.vue?raw'
96
+ import sliderDisabledCode from '../examples/slider/disabled.vue?raw'
97
+ import sliderTooltipCode from '../examples/slider/tooltip.vue?raw'
98
+ import sliderVerticalCode from '../examples/slider/vertical.vue?raw'
99
+ import sliderMarksCode from '../examples/slider/marks.vue?raw'
100
+ import sliderSizeCode from '../examples/slider/size.vue?raw'
101
+ </script>
@@ -1,90 +1,90 @@
1
- # Switch 开关
2
-
3
- 在两种状态之间切换。
4
-
5
- ## 基础用法
6
-
7
- 绑定 v-model 到一个 Boolean 类型的变量。
8
-
9
- <Demo :source-code="basicCode">
10
- <template #source>
11
- <basic />
12
- </template>
13
- <template #description>
14
- 最基本的用法。
15
- </template>
16
- </Demo>
17
-
18
- ## 尺寸
19
-
20
- 提供三种不同尺寸。
21
-
22
- <Demo :source-code="sizeCode">
23
- <template #source>
24
- <size />
25
- </template>
26
- <template #description>
27
- 通过 `size` 属性设置尺寸,可选值为 `large`、`default`、`small`。
28
- </template>
29
- </Demo>
30
-
31
- ## 文字描述
32
-
33
- 你可以添加 `active-text` 和 `inactive-text` 属性来显示文字描述。
34
-
35
- <Demo :source-code="textCode">
36
- <template #source>
37
- <text />
38
- </template>
39
- <template #description>
40
- 使用 `active-text` 和 `inactive-text` 属性来显示开关状态的文字描述。
41
- </template>
42
- </Demo>
43
-
44
- ## 禁用状态
45
-
46
- 设置 `disabled` 属性来禁用开关。
47
-
48
- <Demo :source-code="disabledCode">
49
- <template #source>
50
- <disabled />
51
- </template>
52
- <template #description>
53
- 使用 `disabled` 属性来设置开关为禁用状态。
54
- </template>
55
- </Demo>
56
-
57
- ## 加载状态
58
-
59
- 设置 `loading` 属性来显示加载状态。
60
-
61
- <Demo :source-code="loadingCode">
62
- <template #source>
63
- <loading />
64
- </template>
65
- <template #description>
66
- 使用 `loading` 属性来显示开关的加载状态。
67
- </template>
68
- </Demo>
69
-
70
- ## API
71
-
72
- ### 属性
73
-
74
- <ApiTable :data="switchApi" componentName="switch" />
75
-
76
- <script setup>
77
- import basicCode from '../examples/switch/basic.vue?raw'
78
- import sizeCode from '../examples/switch/size.vue?raw'
79
- import textCode from '../examples/switch/text.vue?raw'
80
- import disabledCode from '../examples/switch/disabled.vue?raw'
81
- import loadingCode from '../examples/switch/loading.vue?raw'
82
-
83
- import Basic from '../examples/switch/basic.vue'
84
- import Size from '../examples/switch/size.vue'
85
- import Text from '../examples/switch/text.vue'
86
- import Disabled from '../examples/switch/disabled.vue'
87
- import Loading from '../examples/switch/loading.vue'
88
-
89
- import switchApi from '../components/meta/switch'
90
- </script>
1
+ # Switch 开关
2
+
3
+ 在两种状态之间切换。
4
+
5
+ ## 基础用法
6
+
7
+ 绑定 v-model 到一个 Boolean 类型的变量。
8
+
9
+ <Demo :source-code="basicCode">
10
+ <template #source>
11
+ <basic />
12
+ </template>
13
+ <template #description>
14
+ 最基本的用法。
15
+ </template>
16
+ </Demo>
17
+
18
+ ## 尺寸
19
+
20
+ 提供三种不同尺寸。
21
+
22
+ <Demo :source-code="sizeCode">
23
+ <template #source>
24
+ <size />
25
+ </template>
26
+ <template #description>
27
+ 通过 `size` 属性设置尺寸,可选值为 `large`、`default`、`small`。
28
+ </template>
29
+ </Demo>
30
+
31
+ ## 文字描述
32
+
33
+ 你可以添加 `active-text` 和 `inactive-text` 属性来显示文字描述。
34
+
35
+ <Demo :source-code="textCode">
36
+ <template #source>
37
+ <text />
38
+ </template>
39
+ <template #description>
40
+ 使用 `active-text` 和 `inactive-text` 属性来显示开关状态的文字描述。
41
+ </template>
42
+ </Demo>
43
+
44
+ ## 禁用状态
45
+
46
+ 设置 `disabled` 属性来禁用开关。
47
+
48
+ <Demo :source-code="disabledCode">
49
+ <template #source>
50
+ <disabled />
51
+ </template>
52
+ <template #description>
53
+ 使用 `disabled` 属性来设置开关为禁用状态。
54
+ </template>
55
+ </Demo>
56
+
57
+ ## 加载状态
58
+
59
+ 设置 `loading` 属性来显示加载状态。
60
+
61
+ <Demo :source-code="loadingCode">
62
+ <template #source>
63
+ <loading />
64
+ </template>
65
+ <template #description>
66
+ 使用 `loading` 属性来显示开关的加载状态。
67
+ </template>
68
+ </Demo>
69
+
70
+ ## API
71
+
72
+ ### 属性
73
+
74
+ <ApiTable :data="switchApi" componentName="switch" />
75
+
76
+ <script setup>
77
+ import basicCode from '../examples/switch/basic.vue?raw'
78
+ import sizeCode from '../examples/switch/size.vue?raw'
79
+ import textCode from '../examples/switch/text.vue?raw'
80
+ import disabledCode from '../examples/switch/disabled.vue?raw'
81
+ import loadingCode from '../examples/switch/loading.vue?raw'
82
+
83
+ import Basic from '../examples/switch/basic.vue'
84
+ import Size from '../examples/switch/size.vue'
85
+ import Text from '../examples/switch/text.vue'
86
+ import Disabled from '../examples/switch/disabled.vue'
87
+ import Loading from '../examples/switch/loading.vue'
88
+
89
+ import switchApi from '../components/meta/switch'
90
+ </script>