@a2simcode/ui 0.0.188 → 0.0.189

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