@a2simcode/ui 0.0.131 → 0.0.133

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 (347) 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/index.d.ts +4 -1
  6. package/dist/components/input-layer/src/input-layer.vue.d.ts +6 -0
  7. package/dist/components/input-map/index.d.ts +101 -0
  8. package/dist/components/input-map/src/input-map.vue.d.ts +86 -0
  9. package/dist/components/vpanel/index.d.ts +22 -0
  10. package/dist/components/vpanel/src/vpanel.vue.d.ts +19 -0
  11. package/dist/simcode-ui.es.js +3434 -3253
  12. package/dist/simcode-ui.umd.js +2 -2
  13. package/dist/stats.html +1 -1
  14. package/dist/ui.css +1 -1
  15. package/docs/components/autocomplete.md +89 -89
  16. package/docs/components/barcode.md +101 -101
  17. package/docs/components/button-select.md +24 -24
  18. package/docs/components/button.md +117 -117
  19. package/docs/components/buttons.md +119 -119
  20. package/docs/components/cascader-select.md +114 -114
  21. package/docs/components/checkbox.md +114 -114
  22. package/docs/components/code-mirror.md +85 -85
  23. package/docs/components/collapse.md +26 -26
  24. package/docs/components/comp.md +71 -71
  25. package/docs/components/count-up.md +24 -24
  26. package/docs/components/count.md +24 -24
  27. package/docs/components/data-panel.md +24 -24
  28. package/docs/components/date.md +76 -76
  29. package/docs/components/dialog-full.md +112 -112
  30. package/docs/components/dialog.md +127 -127
  31. package/docs/components/divider.md +24 -24
  32. package/docs/components/drawer.md +127 -127
  33. package/docs/components/dynamic-layer.md +118 -118
  34. package/docs/components/echarts.md +72 -72
  35. package/docs/components/editor.md +24 -24
  36. package/docs/components/form.md +42 -42
  37. package/docs/components/guid.md +39 -39
  38. package/docs/components/hpanel.md +24 -24
  39. package/docs/components/icon.md +56 -56
  40. package/docs/components/input-button.md +24 -24
  41. package/docs/components/input-code.md +24 -24
  42. package/docs/components/input-color.md +114 -114
  43. package/docs/components/input-layer.md +26 -26
  44. package/docs/components/input-map.md +24 -0
  45. package/docs/components/input-rows.md +370 -370
  46. package/docs/components/input-tag.md +50 -50
  47. package/docs/components/input.md +129 -129
  48. package/docs/components/layer-form.md +61 -61
  49. package/docs/components/layer.md +127 -127
  50. package/docs/components/layout.md +132 -132
  51. package/docs/components/map.md +24 -24
  52. package/docs/components/menu.md +121 -121
  53. package/docs/components/meta/buttons.ts +76 -76
  54. package/docs/components/meta/comp.ts +236 -236
  55. package/docs/components/meta/date.ts +267 -267
  56. package/docs/components/meta/echarts.ts +64 -64
  57. package/docs/components/meta/form-item.ts +50 -50
  58. package/docs/components/meta/form.ts +165 -165
  59. package/docs/components/meta/input-cards.ts +112 -112
  60. package/docs/components/meta/input-color.ts +243 -243
  61. package/docs/components/meta/input-layer.ts +366 -336
  62. package/docs/components/meta/input-map.ts +32 -0
  63. package/docs/components/meta/input-rows.ts +113 -113
  64. package/docs/components/meta/layer-form.ts +56 -56
  65. package/docs/components/meta/map.ts +68 -68
  66. package/docs/components/meta/panel.ts +152 -152
  67. package/docs/components/meta/slider.ts +270 -270
  68. package/docs/components/meta/table-panel.ts +232 -232
  69. package/docs/components/meta/table.ts +391 -391
  70. package/docs/components/meta/tabs.ts +146 -146
  71. package/docs/components/meta/title.ts +91 -80
  72. package/docs/components/meta/tree-select.ts +199 -199
  73. package/docs/components/meta/vpanel.ts +20 -0
  74. package/docs/components/meta/workflow-viewer.ts +55 -55
  75. package/docs/components/number.md +124 -124
  76. package/docs/components/page.md +87 -87
  77. package/docs/components/panel.md +37 -37
  78. package/docs/components/radio.md +87 -87
  79. package/docs/components/rate.md +71 -71
  80. package/docs/components/select.md +133 -133
  81. package/docs/components/slider-captcha.md +41 -41
  82. package/docs/components/slider.md +101 -101
  83. package/docs/components/switch.md +90 -90
  84. package/docs/components/table-panel.md +236 -236
  85. package/docs/components/table.md +391 -391
  86. package/docs/components/tabs.md +26 -26
  87. package/docs/components/title.md +24 -24
  88. package/docs/components/tree.md +207 -207
  89. package/docs/components/upload.md +117 -117
  90. package/docs/components/vpanel.md +25 -0
  91. package/docs/components/workflow-viewer.md +21 -21
  92. package/docs/components/workflow.md +21 -21
  93. package/docs/examples/autocomplete/advanced.vue +35 -35
  94. package/docs/examples/autocomplete/basic.vue +32 -32
  95. package/docs/examples/autocomplete/clearable.vue +33 -33
  96. package/docs/examples/autocomplete/custom-template.vue +49 -49
  97. package/docs/examples/autocomplete/disabled.vue +33 -33
  98. package/docs/examples/autocomplete/icon.vue +37 -37
  99. package/docs/examples/barcode/all-types.vue +380 -380
  100. package/docs/examples/barcode/basic.vue +14 -14
  101. package/docs/examples/barcode/props-appearance.vue +243 -243
  102. package/docs/examples/barcode/props-geometry.vue +143 -143
  103. package/docs/examples/barcode/props-logic.vue +216 -216
  104. package/docs/examples/barcode/props-symbology.vue +199 -199
  105. package/docs/examples/barcode/props-text.vue +268 -268
  106. package/docs/examples/button/basic.vue +7 -7
  107. package/docs/examples/button/danger-ghost.vue +17 -17
  108. package/docs/examples/button/disabled.vue +10 -10
  109. package/docs/examples/button/loading.vue +6 -6
  110. package/docs/examples/button/shape.vue +7 -7
  111. package/docs/examples/button/size.vue +14 -14
  112. package/docs/examples/button/type.vue +9 -9
  113. package/docs/examples/button-select/basic.vue +19 -19
  114. package/docs/examples/buttons/basic.vue +45 -45
  115. package/docs/examples/buttons/disabled.vue +36 -36
  116. package/docs/examples/buttons/dropdown.vue +63 -63
  117. package/docs/examples/buttons/group.vue +52 -52
  118. package/docs/examples/buttons/link.vue +47 -47
  119. package/docs/examples/buttons/popup.vue +39 -39
  120. package/docs/examples/buttons/size.vue +45 -45
  121. package/docs/examples/cascader-select/basic.vue +28 -28
  122. package/docs/examples/cascader-select/clearable.vue +34 -34
  123. package/docs/examples/cascader-select/disabled.vue +43 -43
  124. package/docs/examples/cascader-select/filterable.vue +37 -37
  125. package/docs/examples/cascader-select/methods.vue +84 -84
  126. package/docs/examples/cascader-select/multiple.vue +38 -38
  127. package/docs/examples/cascader-select/slot.vue +45 -45
  128. package/docs/examples/checkbox/basic.vue +18 -18
  129. package/docs/examples/checkbox/button.vue +19 -19
  130. package/docs/examples/checkbox/color.vue +25 -25
  131. package/docs/examples/checkbox/disabled.vue +17 -17
  132. package/docs/examples/checkbox/min-max.vue +20 -20
  133. package/docs/examples/checkbox/mixed.vue +56 -56
  134. package/docs/examples/checkbox/size.vue +28 -28
  135. package/docs/examples/code-mirror/basic.vue +11 -11
  136. package/docs/examples/code-mirror/events.vue +42 -42
  137. package/docs/examples/code-mirror/height.vue +25 -25
  138. package/docs/examples/code-mirror/mode.vue +33 -33
  139. package/docs/examples/code-mirror/readonly.vue +14 -14
  140. package/docs/examples/collapse/basic.vue +82 -82
  141. package/docs/examples/comp/basic.vue +7 -7
  142. package/docs/examples/comp/collapse.vue +38 -38
  143. package/docs/examples/comp/tabs.vue +38 -38
  144. package/docs/examples/count/basic.vue +101 -101
  145. package/docs/examples/count-up/basic.vue +89 -89
  146. package/docs/examples/data-panel/basic.vue +110 -110
  147. package/docs/examples/date/basic.vue +73 -73
  148. package/docs/examples/date/default-value.vue +59 -59
  149. package/docs/examples/date/format.vue +75 -75
  150. package/docs/examples/date/range.vue +66 -66
  151. package/docs/examples/date/types.vue +79 -79
  152. package/docs/examples/decorated-title/basic.vue +31 -31
  153. package/docs/examples/dialog/basic.vue +36 -36
  154. package/docs/examples/dialog/custom-buttons.vue +44 -44
  155. package/docs/examples/dialog/fullscreen.vue +23 -23
  156. package/docs/examples/dialog/no-mask.vue +17 -17
  157. package/docs/examples/dialog/size.vue +44 -44
  158. package/docs/examples/dialog/steps.vue +57 -57
  159. package/docs/examples/dialog-full/basic.vue +29 -29
  160. package/docs/examples/dialog-full/custom-buttons.vue +45 -45
  161. package/docs/examples/dialog-full/no-buttons.vue +18 -18
  162. package/docs/examples/dialog-full/no-header.vue +27 -27
  163. package/docs/examples/dialog-full/steps.vue +71 -71
  164. package/docs/examples/divider/basic.vue +52 -52
  165. package/docs/examples/drawer/basic.vue +35 -35
  166. package/docs/examples/drawer/custom-buttons.vue +34 -34
  167. package/docs/examples/drawer/direction.vue +47 -47
  168. package/docs/examples/drawer/mask.vue +36 -36
  169. package/docs/examples/drawer/no-buttons.vue +20 -20
  170. package/docs/examples/drawer/size.vue +28 -28
  171. package/docs/examples/dynamic-layer/basic.vue +33 -33
  172. package/docs/examples/dynamic-layer/custom-buttons.vue +43 -43
  173. package/docs/examples/dynamic-layer/form.vue +73 -73
  174. package/docs/examples/dynamic-layer/steps.vue +52 -52
  175. package/docs/examples/dynamic-layer/types.vue +40 -40
  176. package/docs/examples/echarts/basic.vue +31 -31
  177. package/docs/examples/echarts/dynamic.vue +43 -43
  178. package/docs/examples/echarts/line.vue +46 -46
  179. package/docs/examples/echarts/pie.vue +44 -44
  180. package/docs/examples/editor/basic.vue +15 -15
  181. package/docs/examples/form/basic.vue +539 -539
  182. package/docs/examples/form/init.vue +76 -76
  183. package/docs/examples/guid/basic.vue +10 -10
  184. package/docs/examples/guid/size.vue +13 -13
  185. package/docs/examples/hpanel/basic.vue +79 -79
  186. package/docs/examples/icon/basic.vue +9 -9
  187. package/docs/examples/icon/rotate-flip.vue +9 -9
  188. package/docs/examples/icon/size.vue +7 -7
  189. package/docs/examples/input/basic.vue +10 -10
  190. package/docs/examples/input/clearable.vue +12 -12
  191. package/docs/examples/input/disabled.vue +6 -6
  192. package/docs/examples/input/icon.vue +23 -23
  193. package/docs/examples/input/password.vue +18 -18
  194. package/docs/examples/input/size.vue +13 -13
  195. package/docs/examples/input/textarea.vue +25 -25
  196. package/docs/examples/input/word-limit.vue +28 -28
  197. package/docs/examples/input-button/basic.vue +33 -33
  198. package/docs/examples/input-code/basic.vue +29 -29
  199. package/docs/examples/input-color/basic.vue +10 -10
  200. package/docs/examples/input-color/disabled.vue +13 -13
  201. package/docs/examples/input-color/format.vue +17 -17
  202. package/docs/examples/input-color/no-alpha.vue +13 -13
  203. package/docs/examples/input-color/only-button.vue +15 -15
  204. package/docs/examples/input-color/predefine.vue +31 -31
  205. package/docs/examples/input-color/size.vue +15 -15
  206. package/docs/examples/input-layer/basic.vue +86 -69
  207. package/docs/examples/input-map/basic.vue +18 -0
  208. package/docs/examples/input-rows/basic.vue +73 -73
  209. package/docs/examples/input-rows/drag.vue +48 -48
  210. package/docs/examples/input-rows/layer-form.vue +85 -85
  211. package/docs/examples/input-rows/nested.vue +91 -91
  212. package/docs/examples/input-tag/basic.vue +27 -27
  213. package/docs/examples/input-tag/colors.vue +23 -23
  214. package/docs/examples/input-tag/readonly.vue +17 -17
  215. package/docs/examples/layer/basic.vue +43 -43
  216. package/docs/examples/layer/custom-buttons.vue +61 -61
  217. package/docs/examples/layer/drawer.vue +37 -37
  218. package/docs/examples/layer/full.vue +38 -38
  219. package/docs/examples/layer/modal.vue +34 -34
  220. package/docs/examples/layer/steps.vue +46 -46
  221. package/docs/examples/layer-form/basic.vue +76 -76
  222. package/docs/examples/layer-form/config.vue +82 -82
  223. package/docs/examples/layer-form/size.vue +72 -72
  224. package/docs/examples/layout/basic.vue +36 -36
  225. package/docs/examples/layout/custom-size.vue +50 -50
  226. package/docs/examples/layout/disable-move.vue +37 -37
  227. package/docs/examples/layout/hide-mid-when-narrow.vue +96 -96
  228. package/docs/examples/layout/min-size.vue +73 -73
  229. package/docs/examples/layout/percent-size.vue +80 -80
  230. package/docs/examples/layout/simple.vue +22 -22
  231. package/docs/examples/layout/top-side.vue +34 -34
  232. package/docs/examples/map/basic.vue +22 -22
  233. package/docs/examples/menu/basic.vue +58 -58
  234. package/docs/examples/menu/collapsed.vue +49 -49
  235. package/docs/examples/menu/horizontal.vue +44 -44
  236. package/docs/examples/menu/selection-test.vue +104 -104
  237. package/docs/examples/menu/theme.vue +46 -46
  238. package/docs/examples/menu/vertical.vue +46 -46
  239. package/docs/examples/number/advanced.vue +143 -143
  240. package/docs/examples/number/basic.vue +63 -63
  241. package/docs/examples/number/disabled.vue +49 -49
  242. package/docs/examples/number/size.vue +42 -42
  243. package/docs/examples/number/slots.vue +123 -123
  244. package/docs/examples/number/step-strictly.vue +41 -41
  245. package/docs/examples/number/step.vue +47 -47
  246. package/docs/examples/page/basic.vue +41 -41
  247. package/docs/examples/page/dept-user-management.vue +211 -211
  248. package/docs/examples/page/init.vue +87 -87
  249. package/docs/examples/page/log.vue +453 -453
  250. package/docs/examples/page/user-management.vue +313 -313
  251. package/docs/examples/panel/tool-buttons.vue +18 -18
  252. package/docs/examples/radio/basic.vue +17 -17
  253. package/docs/examples/radio/button.vue +17 -17
  254. package/docs/examples/radio/color.vue +18 -18
  255. package/docs/examples/radio/disabled.vue +17 -17
  256. package/docs/examples/radio/size.vue +29 -29
  257. package/docs/examples/rate/basic.vue +24 -24
  258. package/docs/examples/rate/half.vue +24 -24
  259. package/docs/examples/rate/readonly.vue +11 -11
  260. package/docs/examples/rate/text.vue +37 -32
  261. package/docs/examples/select/basic.vue +16 -16
  262. package/docs/examples/select/clearable.vue +22 -22
  263. package/docs/examples/select/disabled.vue +31 -31
  264. package/docs/examples/select/filterable.vue +24 -24
  265. package/docs/examples/select/group.vue +23 -23
  266. package/docs/examples/select/icon.vue +16 -16
  267. package/docs/examples/select/multiple.vue +18 -18
  268. package/docs/examples/select/size.vue +39 -39
  269. package/docs/examples/slider/basic.vue +42 -42
  270. package/docs/examples/slider/disabled.vue +17 -17
  271. package/docs/examples/slider/marks.vue +30 -30
  272. package/docs/examples/slider/size.vue +37 -37
  273. package/docs/examples/slider/tooltip.vue +36 -36
  274. package/docs/examples/slider/vertical.vue +26 -26
  275. package/docs/examples/slider-captcha/basic.vue +44 -44
  276. package/docs/examples/slider-captcha/custom.vue +48 -48
  277. package/docs/examples/switch/basic.vue +16 -16
  278. package/docs/examples/switch/disabled.vue +13 -13
  279. package/docs/examples/switch/loading.vue +13 -13
  280. package/docs/examples/switch/size.vue +15 -15
  281. package/docs/examples/switch/text.vue +13 -13
  282. package/docs/examples/table/action-filter.vue +126 -126
  283. package/docs/examples/table/actions.vue +116 -116
  284. package/docs/examples/table/add-row.vue +103 -103
  285. package/docs/examples/table/basic.vue +168 -168
  286. package/docs/examples/table/checkbox-layout.vue +68 -68
  287. package/docs/examples/table/custom-layout.vue +115 -115
  288. package/docs/examples/table/dynamic-type.vue +73 -73
  289. package/docs/examples/table/editable.vue +262 -262
  290. package/docs/examples/table/field-selection.vue +87 -87
  291. package/docs/examples/table/frozen-column.vue +140 -140
  292. package/docs/examples/table/height-mode.vue +99 -99
  293. package/docs/examples/table/icon.vue +85 -85
  294. package/docs/examples/table/link.vue +66 -66
  295. package/docs/examples/table/multiple.vue +188 -188
  296. package/docs/examples/table/pagination.vue +151 -151
  297. package/docs/examples/table/single-selection.vue +64 -64
  298. package/docs/examples/table/sub-table-lazy.vue +97 -97
  299. package/docs/examples/table/sub-table.vue +103 -103
  300. package/docs/examples/table/tag.vue +43 -43
  301. package/docs/examples/table/tree-column.vue +119 -119
  302. package/docs/examples/table/tree-data.vue +141 -141
  303. package/docs/examples/table/tree-default-expand-all.vue +60 -60
  304. package/docs/examples/table/tree-lazy.vue +80 -80
  305. package/docs/examples/table/tree-set-selection.vue +75 -75
  306. package/docs/examples/table-panel/basic.vue +229 -228
  307. package/docs/examples/table-panel/batch-operations.vue +285 -285
  308. package/docs/examples/table-panel/button-visibility.vue +88 -88
  309. package/docs/examples/table-panel/filter.vue +219 -219
  310. package/docs/examples/table-panel/get-selection.vue +111 -111
  311. package/docs/examples/table-panel/multiple-selection.vue +243 -243
  312. package/docs/examples/table-panel/pagination.vue +133 -133
  313. package/docs/examples/table-panel/sub-table-lazy.vue +118 -118
  314. package/docs/examples/table-panel/tree-parent-key.vue +67 -67
  315. package/docs/examples/tabs/basic.vue +98 -98
  316. package/docs/examples/time/base.vue +67 -67
  317. package/docs/examples/title/basic.vue +87 -87
  318. package/docs/examples/tree/accordion.vue +46 -46
  319. package/docs/examples/tree/basic.vue +50 -50
  320. package/docs/examples/tree/buttons.vue +53 -53
  321. package/docs/examples/tree/checkable.vue +52 -52
  322. package/docs/examples/tree/custom-keys.vue +39 -39
  323. package/docs/examples/tree/default-expanded.vue +52 -52
  324. package/docs/examples/tree/draggable.vue +29 -29
  325. package/docs/examples/tree/expand-on-click.vue +39 -39
  326. package/docs/examples/tree/flat-data.vue +20 -20
  327. package/docs/examples/tree/icon.vue +40 -40
  328. package/docs/examples/tree/load-data.vue +37 -37
  329. package/docs/examples/tree/methods.vue +74 -74
  330. package/docs/examples/tree/theme.vue +33 -33
  331. package/docs/examples/tree-select/basic.vue +47 -47
  332. package/docs/examples/upload/accept.vue +31 -31
  333. package/docs/examples/upload/basic.vue +12 -12
  334. package/docs/examples/upload/drag.vue +11 -11
  335. package/docs/examples/upload/image.vue +17 -17
  336. package/docs/examples/upload/limit.vue +20 -20
  337. package/docs/examples/upload/multiple.vue +17 -17
  338. package/docs/examples/upload/readonly.vue +17 -17
  339. package/docs/examples/utils/cipher.vue +160 -160
  340. package/docs/examples/utils/common.vue +153 -153
  341. package/docs/examples/utils/date.vue +56 -56
  342. package/docs/examples/utils/dom.vue +52 -52
  343. package/docs/examples/utils/is.vue +70 -70
  344. package/docs/examples/vpanel/basic.vue +88 -0
  345. package/docs/examples/workflow/basic.vue +265 -265
  346. package/docs/examples/workflow-viewer/basic.vue +248 -248
  347. 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>