@a2simcode/ui 0.0.242 → 0.0.244

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