@a2simcode/ui 0.0.248 → 0.0.250

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