@a2simcode/ui 0.0.237 → 0.0.239

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