@fangxinyan/lumina 0.6.1 → 0.6.2
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.
- package/dist/Alert.cjs +3 -3
- package/dist/Alert.js +2 -2
- package/dist/AutoComplete.cjs +5 -4
- package/dist/AutoComplete.d.cts +1 -1
- package/dist/AutoComplete.d.ts +1 -1
- package/dist/AutoComplete.js +4 -3
- package/dist/Badge-DPGLV3D3.css +22 -0
- package/dist/Badge.cjs +10 -0
- package/dist/Badge.d.cts +18 -0
- package/dist/Badge.d.ts +18 -0
- package/dist/Badge.js +1 -0
- package/dist/Button.cjs +3 -7
- package/dist/Button.d.cts +5 -10
- package/dist/Button.d.ts +5 -10
- package/dist/Button.js +2 -2
- package/dist/Calendar.cjs +3 -3
- package/dist/Calendar.js +2 -2
- package/dist/{Card-RG7ECXL2.css → Card-6RMVIHWX.css} +7 -13
- package/dist/Card.cjs +2 -6
- package/dist/Card.d.cts +7 -11
- package/dist/Card.d.ts +7 -11
- package/dist/Card.js +1 -1
- package/dist/{Cascader-VSYEKQCG.css → Cascader-C2DFSMKJ.css} +64 -0
- package/dist/Cascader.cjs +5 -3
- package/dist/Cascader.d.cts +18 -2
- package/dist/Cascader.d.ts +18 -2
- package/dist/Cascader.js +4 -2
- package/dist/{Checkbox-SKJATVSN.css → Checkbox-U5EUDSYS.css} +5 -35
- package/dist/Checkbox.cjs +3 -7
- package/dist/Checkbox.d.cts +1 -18
- package/dist/Checkbox.d.ts +1 -18
- package/dist/Checkbox.js +2 -2
- package/dist/Collapse-66U5YJFY.css +53 -0
- package/dist/Collapse.cjs +11 -0
- package/dist/Collapse.d.cts +32 -0
- package/dist/Collapse.d.ts +32 -0
- package/dist/Collapse.js +2 -0
- package/dist/CommandPalette.cjs +5 -4
- package/dist/CommandPalette.js +4 -3
- package/dist/Drawer.cjs +3 -3
- package/dist/Drawer.js +2 -2
- package/dist/Empty-DC2LPORC.css +28 -0
- package/dist/Empty.cjs +2 -10
- package/dist/Empty.d.cts +1 -62
- package/dist/Empty.d.ts +1 -62
- package/dist/Empty.js +1 -1
- package/dist/Form.d.cts +1 -1
- package/dist/Form.d.ts +1 -1
- package/dist/Icon.cjs +179 -3
- package/dist/Icon.d.cts +96 -3
- package/dist/Icon.d.ts +96 -3
- package/dist/Icon.js +1 -1
- package/dist/Image.cjs +4 -4
- package/dist/Image.js +2 -2
- package/dist/{Input-33CAH4O6.css → Input-3G4ONWNU.css} +15 -42
- package/dist/Input.cjs +6 -5
- package/dist/Input.d.cts +19 -23
- package/dist/Input.d.ts +19 -23
- package/dist/Input.js +3 -2
- package/dist/InputNumber.cjs +5 -4
- package/dist/InputNumber.d.cts +1 -1
- package/dist/InputNumber.d.ts +1 -1
- package/dist/InputNumber.js +4 -3
- package/dist/Message-2MZ3LFPU.css +45 -0
- package/dist/Message.cjs +23 -0
- package/dist/Message.d.cts +54 -0
- package/dist/Message.d.ts +54 -0
- package/dist/Message.js +2 -0
- package/dist/{Modal-XSDMU4XJ.css → Modal-2QNDW4SO.css} +27 -0
- package/dist/Modal.cjs +4 -4
- package/dist/Modal.d.cts +28 -4
- package/dist/Modal.d.ts +28 -4
- package/dist/Modal.js +3 -3
- package/dist/Pagination.cjs +7 -5
- package/dist/Pagination.js +6 -4
- package/dist/Popover.cjs +2 -2
- package/dist/Popover.d.cts +11 -3
- package/dist/Popover.d.ts +11 -3
- package/dist/Popover.js +1 -1
- package/dist/Radio-GVFDPAZM.css +97 -0
- package/dist/Radio.cjs +14 -0
- package/dist/Radio.d.cts +36 -0
- package/dist/Radio.d.ts +36 -0
- package/dist/Radio.js +1 -0
- package/dist/{Select-J3CCVFJ7.css → Select-JVBQAZBG.css} +7 -23
- package/dist/Select.cjs +6 -4
- package/dist/Select.d.cts +25 -4
- package/dist/Select.d.ts +25 -4
- package/dist/Select.js +5 -3
- package/dist/Skeleton-CVWH2VWN.css +40 -0
- package/dist/Skeleton.cjs +10 -0
- package/dist/Skeleton.d.cts +30 -0
- package/dist/Skeleton.d.ts +30 -0
- package/dist/Skeleton.js +1 -0
- package/dist/Spin-3GJNMSIH.css +94 -0
- package/dist/Spin.cjs +10 -0
- package/dist/Spin.d.cts +20 -0
- package/dist/Spin.d.ts +20 -0
- package/dist/Spin.js +1 -0
- package/dist/{Table-2LPTOUIR.css → Table-ATJJQLKU.css} +0 -53
- package/dist/Table.cjs +9 -11
- package/dist/Table.d.cts +2 -21
- package/dist/Table.d.ts +2 -21
- package/dist/Table.js +8 -6
- package/dist/TablePro-3XVHYLSL.css +45 -0
- package/dist/TablePro.cjs +19 -0
- package/dist/TablePro.d.cts +21 -0
- package/dist/TablePro.d.ts +21 -0
- package/dist/TablePro.js +10 -0
- package/dist/{Tabs-RHK6XAFF.css → Tabs-BLSNI2T5.css} +0 -34
- package/dist/Tabs.cjs +2 -6
- package/dist/Tabs.d.cts +1 -16
- package/dist/Tabs.d.ts +1 -16
- package/dist/Tabs.js +1 -1
- package/dist/Tag-LB3OOJAO.css +29 -0
- package/dist/Tag.cjs +3 -7
- package/dist/Tag.d.cts +1 -11
- package/dist/Tag.d.ts +1 -11
- package/dist/Tag.js +2 -2
- package/dist/Textarea-YNET7IBH.css +54 -0
- package/dist/Textarea.cjs +15 -0
- package/dist/Textarea.d.cts +25 -0
- package/dist/Textarea.d.ts +25 -0
- package/dist/Textarea.js +2 -0
- package/dist/{Timeline-RHZAZKZ7.css → Timeline-3ZHOHPXT.css} +2 -2
- package/dist/Timeline.cjs +3 -3
- package/dist/Timeline.d.cts +1 -1
- package/dist/Timeline.d.ts +1 -1
- package/dist/Timeline.js +2 -2
- package/dist/Tooltip.cjs +2 -2
- package/dist/Tooltip.d.cts +17 -4
- package/dist/Tooltip.d.ts +17 -4
- package/dist/Tooltip.js +1 -1
- package/dist/Typography.cjs +7 -7
- package/dist/Typography.js +2 -2
- package/dist/{chunk-6Y5WRCPW.js → chunk-33NCTOEB.js} +1 -1
- package/dist/{chunk-Q2KG6SQK.cjs → chunk-35ZGBAA3.cjs} +3 -3
- package/dist/{chunk-Y3ZSG3SJ.cjs → chunk-3AS5B7MQ.cjs} +11 -30
- package/dist/{chunk-X2U7EKCS.cjs → chunk-3YJU3D5S.cjs} +28 -5
- package/dist/chunk-45VJGBGN.js +25 -0
- package/dist/{chunk-3D77MQHO.js → chunk-46VXFTEC.js} +3 -3
- package/dist/{chunk-OFGDUCT7.cjs → chunk-4WTU5P3O.cjs} +3 -3
- package/dist/{chunk-5A3RT4KD.js → chunk-5TKC6IEN.js} +4 -55
- package/dist/{chunk-62GU4OHH.cjs → chunk-5WAXZJG5.cjs} +12 -19
- package/dist/chunk-6ACKL3WH.cjs +138 -0
- package/dist/{chunk-32HBMXXV.cjs → chunk-6LZ54NPO.cjs} +70 -74
- package/dist/{chunk-UXH5PH3S.js → chunk-7NGMQIST.js} +2 -2
- package/dist/{chunk-R6BIF3FF.js → chunk-AWXCSX6J.js} +5 -23
- package/dist/chunk-AXZ7ELMA.js +41 -0
- package/dist/{chunk-G2XK57I7.cjs → chunk-B2KEZQ6S.cjs} +5 -5
- package/dist/chunk-CEJ7VBR6.js +283 -0
- package/dist/{chunk-WRDKOSSM.js → chunk-CHMCL7AV.js} +1 -1
- package/dist/{chunk-EBNRZRWY.cjs → chunk-CUXV6QNN.cjs} +5 -5
- package/dist/{chunk-ULOJ5UEY.js → chunk-CXWEOAVU.js} +1 -1
- package/dist/{chunk-TWGQZX2R.js → chunk-DQTSTJ6O.js} +3 -18
- package/dist/chunk-EIY7KEJ3.cjs +132 -0
- package/dist/{chunk-OI3CWXT3.js → chunk-EJBHR2P5.js} +3 -3
- package/dist/chunk-ELNT3CFO.js +64 -0
- package/dist/{chunk-TGHBKKSS.js → chunk-EQEJTN3V.js} +3 -43
- package/dist/chunk-F6RYCBQG.js +25 -0
- package/dist/{chunk-N57NXCNC.cjs → chunk-FBVVRTX2.cjs} +3 -44
- package/dist/chunk-FFZ6OMZI.js +110 -0
- package/dist/{chunk-73RQBWWW.js → chunk-FJNWUELL.js} +2 -2
- package/dist/chunk-GENABQYA.cjs +47 -0
- package/dist/chunk-GMN74OEY.cjs +63 -0
- package/dist/chunk-GNEZQMKH.js +218 -0
- package/dist/{chunk-Y47YTYQ3.cjs → chunk-HPFQXYKG.cjs} +159 -8
- package/dist/{chunk-4WRE4HQP.js → chunk-HWFM4MAT.js} +18 -6
- package/dist/{chunk-GY3BSHHS.cjs → chunk-HZSIUOCN.cjs} +2 -55
- package/dist/{chunk-YRZGXXWA.js → chunk-JD7A6VM3.js} +11 -17
- package/dist/chunk-K2KYM7LW.cjs +28 -0
- package/dist/{chunk-PWW64ZWO.cjs → chunk-KD4YYIIO.cjs} +1 -32
- package/dist/chunk-KGSADAOD.cjs +170 -0
- package/dist/{chunk-6ODY6MGL.cjs → chunk-MQV2XN4B.cjs} +5 -5
- package/dist/{chunk-OVZTG5CP.cjs → chunk-MT7UWY6T.cjs} +2 -2
- package/dist/chunk-MUXP7ASL.js +26 -0
- package/dist/{chunk-EEMWQX3C.cjs → chunk-NTS5L4NQ.cjs} +3 -3
- package/dist/{chunk-WBK6XIDJ.js → chunk-OBEKX4VR.js} +2 -32
- package/dist/chunk-OF3SGLZY.js +385 -0
- package/dist/chunk-ON4DEDMI.js +113 -0
- package/dist/chunk-OQBDU5I2.cjs +104 -0
- package/dist/{chunk-FIO65XYG.cjs → chunk-OYMJVU66.cjs} +48 -37
- package/dist/{chunk-5M26OVVY.js → chunk-PH3YECMF.js} +1 -1
- package/dist/chunk-Q5SZIU7Z.cjs +47 -0
- package/dist/chunk-QGHYQCF3.cjs +240 -0
- package/dist/chunk-QKQHZIF3.cjs +86 -0
- package/dist/{chunk-KYEY2LIB.cjs → chunk-SKMP2A5O.cjs} +3 -3
- package/dist/{chunk-IW5LW6XS.js → chunk-TEEFR2FD.js} +28 -5
- package/dist/{chunk-GOBWKQCX.cjs → chunk-TEG7NJHS.cjs} +3 -3
- package/dist/{chunk-2MNAZRWE.cjs → chunk-TJII7BQ2.cjs} +261 -2
- package/dist/{chunk-3TWNBJFI.cjs → chunk-TZJH5HBT.cjs} +6 -6
- package/dist/{chunk-D46EM4EN.js → chunk-UMDGS4BP.js} +1 -1
- package/dist/chunk-USQ43DJ5.js +147 -0
- package/dist/{chunk-G2K6ETP4.cjs → chunk-UUHFKIWP.cjs} +18 -6
- package/dist/chunk-WGZ2KJTZ.js +81 -0
- package/dist/{chunk-RPFMQZA5.js → chunk-WKKSAGYH.js} +39 -28
- package/dist/{chunk-54YLXXS2.js → chunk-XD3JGL5O.js} +2 -2
- package/dist/{chunk-DPNDHNKK.js → chunk-XTIN5545.js} +68 -72
- package/dist/{chunk-LZU33BX6.cjs → chunk-ZIP7F4UF.cjs} +4 -20
- package/dist/index.cjs +312 -122
- package/dist/index.d.cts +23 -17
- package/dist/index.d.ts +23 -17
- package/dist/index.js +34 -28
- package/dist/styles.css +313 -192
- package/docs/llms/badge.md +3 -3
- package/docs/llms/button.md +7 -38
- package/docs/llms/card.md +6 -12
- package/docs/llms/cascader.md +19 -0
- package/docs/llms/{accordion.md → collapse.md} +13 -11
- package/docs/llms/drawer.md +1 -1
- package/docs/llms/form.md +1 -1
- package/docs/llms/input.md +25 -16
- package/docs/llms/message.md +63 -0
- package/docs/llms/modal.md +30 -0
- package/docs/llms/popover.md +18 -1
- package/docs/llms/radio.md +37 -1
- package/docs/llms/select.md +20 -0
- package/docs/llms/spin.md +59 -0
- package/docs/llms/table.md +3 -3
- package/docs/llms/tooltip.md +16 -3
- package/docs/llms.md +5 -5
- package/package.json +17 -52
- package/dist/Accordion-REMDCQUD.css +0 -44
- package/dist/Accordion.cjs +0 -11
- package/dist/Accordion.d.cts +0 -33
- package/dist/Accordion.d.ts +0 -33
- package/dist/Accordion.js +0 -2
- package/dist/Empty-NQ72W3D7.css +0 -160
- package/dist/Tag-FGDY3W7E.css +0 -51
- package/dist/Toast-YSACW3EM.css +0 -45
- package/dist/Toast.cjs +0 -15
- package/dist/Toast.d.cts +0 -26
- package/dist/Toast.d.ts +0 -26
- package/dist/Toast.js +0 -2
- package/dist/chunk-3XTHKAEY.js +0 -39
- package/dist/chunk-DOMYUGJY.js +0 -132
- package/dist/chunk-HBWO3QKW.js +0 -74
- package/dist/chunk-JVS5ZALZ.js +0 -123
- package/dist/chunk-LIGHV4RC.cjs +0 -121
- package/dist/chunk-MCTIA6RZ.js +0 -99
- package/dist/chunk-NC4YUEXM.cjs +0 -145
- package/dist/chunk-NJ6B22YJ.js +0 -170
- package/dist/chunk-W64ARHLJ.cjs +0 -62
- package/dist/chunk-ZFW6OYAO.cjs +0 -100
- package/docs/llms/spinner.md +0 -58
- package/docs/llms/toast.md +0 -51
package/docs/llms/badge.md
CHANGED
|
@@ -13,8 +13,8 @@ import { Badge } from "@fangxinyan/lumina";
|
|
|
13
13
|
### 数字徽标
|
|
14
14
|
|
|
15
15
|
```tsx
|
|
16
|
-
<Badge count={3}><
|
|
17
|
-
<Badge count={128} max={99}><
|
|
16
|
+
<Badge count={3}><Button icon="bell" /></Badge>
|
|
17
|
+
<Badge count={128} max={99}><Button icon="mail" /></Badge>
|
|
18
18
|
```
|
|
19
19
|
|
|
20
20
|
### 圆点
|
|
@@ -22,7 +22,7 @@ import { Badge } from "@fangxinyan/lumina";
|
|
|
22
22
|
dot 模式不显示数字,只是状态指示。
|
|
23
23
|
|
|
24
24
|
```tsx
|
|
25
|
-
<Badge dot><
|
|
25
|
+
<Badge dot><Button icon="user" /></Badge>
|
|
26
26
|
```
|
|
27
27
|
|
|
28
28
|
## API
|
package/docs/llms/button.md
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
## 导入
|
|
6
6
|
|
|
7
7
|
```tsx
|
|
8
|
-
import { Button
|
|
8
|
+
import { Button } from "@fangxinyan/lumina";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
## 示例
|
|
@@ -61,27 +61,12 @@ block 让按钮撑满容器宽度,常用于底部主操作或表单提交。
|
|
|
61
61
|
|
|
62
62
|
### 纯图标按钮
|
|
63
63
|
|
|
64
|
-
|
|
64
|
+
Button 在只有 icon 时自动呈现为方形按钮,常配合 tip 使用。
|
|
65
65
|
|
|
66
66
|
```tsx
|
|
67
|
-
<
|
|
68
|
-
<
|
|
69
|
-
<
|
|
70
|
-
```
|
|
71
|
-
|
|
72
|
-
### 分段控制器
|
|
73
|
-
|
|
74
|
-
互斥多选项切换。
|
|
75
|
-
|
|
76
|
-
```tsx
|
|
77
|
-
<Segmented
|
|
78
|
-
options={[
|
|
79
|
-
{ value: "grid", label: "网格" },
|
|
80
|
-
{ value: "list", label: "列表" },
|
|
81
|
-
{ value: "card", label: "卡片" },
|
|
82
|
-
]}
|
|
83
|
-
defaultValue="grid"
|
|
84
|
-
/>
|
|
67
|
+
<Button icon="heart" tip="收藏" />
|
|
68
|
+
<Button icon="bell" tip="通知" />
|
|
69
|
+
<Button icon="settings" tip="设置" />
|
|
85
70
|
```
|
|
86
71
|
|
|
87
72
|
## API
|
|
@@ -94,29 +79,13 @@ IconButton 是只含图标的方形按钮,常配合 tip 使用。
|
|
|
94
79
|
| size | `"sm" | "md" | "lg"` | `"md"` | 按钮尺寸 |
|
|
95
80
|
| icon | `IconName` | — | 前置图标 |
|
|
96
81
|
| trailingIcon | `IconName` | — | 后置图标 |
|
|
82
|
+
| iconOnly | `boolean` | `自动` | 渲染为纯图标方形按钮 |
|
|
83
|
+
| tip | `string` | — | 原生悬浮提示,常用于纯图标按钮 |
|
|
97
84
|
| loading | `boolean` | `false` | 加载态 |
|
|
98
85
|
| block | `boolean` | `false` | 撑满父容器宽度 |
|
|
99
86
|
| disabled | `boolean` | `false` | 禁用 |
|
|
100
87
|
| onClick | `(e: MouseEvent) => void` | — | 点击回调 |
|
|
101
88
|
|
|
102
89
|
|
|
103
|
-
**IconButton**
|
|
104
|
-
|
|
105
|
-
| Prop | 类型 | 默认 | 说明 |
|
|
106
|
-
| --- | --- | --- | --- |
|
|
107
|
-
| icon \* | `IconName` | — | 图标名 |
|
|
108
|
-
| tip | `string` | — | 悬浮提示 |
|
|
109
|
-
| size / variant | `—` | — | 继承自 Button |
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
**Segmented**
|
|
113
|
-
|
|
114
|
-
| Prop | 类型 | 默认 | 说明 |
|
|
115
|
-
| --- | --- | --- | --- |
|
|
116
|
-
| options \* | `{ value, label, disabled? }[]` | — | 选项数组 |
|
|
117
|
-
| value / defaultValue | `T` | — | 受控/初始选中值 |
|
|
118
|
-
| onChange | `(value: T) => void` | — | 切换回调 |
|
|
119
|
-
|
|
120
|
-
|
|
121
90
|
---
|
|
122
91
|
[← 回到索引](../llms.md)
|
package/docs/llms/card.md
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
## 导入
|
|
6
6
|
|
|
7
7
|
```tsx
|
|
8
|
-
import { Card
|
|
8
|
+
import { Card } from "@fangxinyan/lumina";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
## 示例
|
|
@@ -28,20 +28,20 @@ hoverable 在鼠标悬浮时轻微上移并加强阴影,适合可点击的卡片
|
|
|
28
28
|
<Card hoverable>可点击卡片</Card>
|
|
29
29
|
```
|
|
30
30
|
|
|
31
|
-
###
|
|
31
|
+
### 带标题
|
|
32
32
|
|
|
33
33
|
带标题、描述、操作区。
|
|
34
34
|
|
|
35
35
|
```tsx
|
|
36
|
-
<
|
|
36
|
+
<Card title="月度营收" description="2026 年 4 月" actions={...}>
|
|
37
37
|
¥ 12,480
|
|
38
|
-
</
|
|
38
|
+
</Card>
|
|
39
39
|
```
|
|
40
40
|
|
|
41
|
-
###
|
|
41
|
+
### 标题区操作
|
|
42
42
|
|
|
43
43
|
```tsx
|
|
44
|
-
<
|
|
44
|
+
<Card title="..." actions={<Button size="sm" icon="plus">邀请</Button>}>...</Card>
|
|
45
45
|
```
|
|
46
46
|
|
|
47
47
|
## API
|
|
@@ -53,12 +53,6 @@ hoverable 在鼠标悬浮时轻微上移并加强阴影,适合可点击的卡片
|
|
|
53
53
|
| variant | `"raised" | "flat" | "sunken"` | `"raised"` | 视觉变体 |
|
|
54
54
|
| padding | `"none" | "sm" | "md" | "lg"` | `"md"` | 内边距 |
|
|
55
55
|
| hoverable | `boolean` | `false` | 悬浮时抬起 |
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
**Panel**
|
|
59
|
-
|
|
60
|
-
| Prop | 类型 | 默认 | 说明 |
|
|
61
|
-
| --- | --- | --- | --- |
|
|
62
56
|
| title | `ReactNode` | — | 标题 |
|
|
63
57
|
| description | `ReactNode` | — | 副标题 |
|
|
64
58
|
| actions | `ReactNode` | — | 右上操作区 |
|
package/docs/llms/cascader.md
CHANGED
|
@@ -16,6 +16,21 @@ import { Cascader } from "@fangxinyan/lumina";
|
|
|
16
16
|
<Cascader options={regions} value={addr} onChange={setAddr} />
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
+
### 搜索与清除
|
|
20
|
+
|
|
21
|
+
showSearch 开启路径搜索,allowClear 提供一键清空,popupClassName 可标记浮层。
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
<Cascader
|
|
25
|
+
showSearch={{ limit: 8 }}
|
|
26
|
+
allowClear
|
|
27
|
+
popupClassName="my-cascader-popup"
|
|
28
|
+
options={regions}
|
|
29
|
+
value={addr}
|
|
30
|
+
onChange={setAddr}
|
|
31
|
+
/>
|
|
32
|
+
```
|
|
33
|
+
|
|
19
34
|
## API
|
|
20
35
|
|
|
21
36
|
**Cascader**
|
|
@@ -27,6 +42,10 @@ import { Cascader } from "@fangxinyan/lumina";
|
|
|
27
42
|
| onChange | `(path: string[]) => void` | — | 选择叶子时触发 |
|
|
28
43
|
| placeholder | `string` | — | 占位文案 |
|
|
29
44
|
| disabled | `boolean` | `false` | 禁用 |
|
|
45
|
+
| allowClear | `boolean` | `false` | 显示清除按钮 |
|
|
46
|
+
| showSearch | `boolean | { filter?, render?, limit? }` | — | 搜索路径,支持 boolean / 对象配置 |
|
|
47
|
+
| popupClassName / dropdownClassName | `string` | — | 浮层面板 className |
|
|
48
|
+
| changeOnSelect | `boolean` | `false` | 允许选中非叶子节点 |
|
|
30
49
|
|
|
31
50
|
|
|
32
51
|
---
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
#
|
|
1
|
+
# Collapse 折叠面板
|
|
2
2
|
|
|
3
3
|
> 纵向折叠面板。
|
|
4
4
|
|
|
5
5
|
## 导入
|
|
6
6
|
|
|
7
7
|
```tsx
|
|
8
|
-
import {
|
|
8
|
+
import { Collapse } from "@fangxinyan/lumina";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
## 示例
|
|
@@ -13,7 +13,7 @@ import { Accordion } from "@fangxinyan/lumina";
|
|
|
13
13
|
### 基础
|
|
14
14
|
|
|
15
15
|
```tsx
|
|
16
|
-
<
|
|
16
|
+
<Collapse items={[{ key, label, children }]} />
|
|
17
17
|
```
|
|
18
18
|
|
|
19
19
|
### 多项展开
|
|
@@ -21,7 +21,7 @@ import { Accordion } from "@fangxinyan/lumina";
|
|
|
21
21
|
multiple 允许同时展开多个面板。
|
|
22
22
|
|
|
23
23
|
```tsx
|
|
24
|
-
<
|
|
24
|
+
<Collapse defaultActiveKey={["1", "2"]} ... />
|
|
25
25
|
```
|
|
26
26
|
|
|
27
27
|
### 手风琴模式
|
|
@@ -29,7 +29,7 @@ multiple 允许同时展开多个面板。
|
|
|
29
29
|
accordion={true} 同一时刻最多只展开一项;与 multiple 同时传入时 accordion 优先。
|
|
30
30
|
|
|
31
31
|
```tsx
|
|
32
|
-
<
|
|
32
|
+
<Collapse accordion defaultActiveKey="1" ... />
|
|
33
33
|
```
|
|
34
34
|
|
|
35
35
|
### 仅图标可点
|
|
@@ -37,7 +37,7 @@ accordion={true} 同一时刻最多只展开一项;与 multiple 同时传入时
|
|
|
37
37
|
collapsible="icon" 将展开触发限制在右侧箭头图标上,标题区域不再响应。
|
|
38
38
|
|
|
39
39
|
```tsx
|
|
40
|
-
<
|
|
40
|
+
<Collapse collapsible="icon" ... />
|
|
41
41
|
```
|
|
42
42
|
|
|
43
43
|
### 禁用展开
|
|
@@ -45,20 +45,22 @@ collapsible="icon" 将展开触发限制在右侧箭头图标上,标题区域不
|
|
|
45
45
|
collapsible="disabled" 会禁用所有项的展开交互。
|
|
46
46
|
|
|
47
47
|
```tsx
|
|
48
|
-
<
|
|
48
|
+
<Collapse collapsible="disabled" defaultActiveKey="1" ... />
|
|
49
49
|
```
|
|
50
50
|
|
|
51
51
|
## API
|
|
52
52
|
|
|
53
|
-
**
|
|
53
|
+
**Collapse**
|
|
54
54
|
|
|
55
55
|
| Prop | 类型 | 默认 | 说明 |
|
|
56
56
|
| --- | --- | --- | --- |
|
|
57
|
-
| items \* | `
|
|
58
|
-
| multiple | `boolean` | `false` | 可同时展开多个 |
|
|
57
|
+
| items \* | `CollapseItem[]` | — | 面板数据 |
|
|
59
58
|
| accordion | `boolean` | `false` | 手风琴模式(同一时刻最多一项) |
|
|
59
|
+
| multiple | `boolean` | `true` | 可同时展开多个 |
|
|
60
60
|
| collapsible | `"header" | "icon" | "disabled"` | `"header"` | 展开触发区域 |
|
|
61
|
-
|
|
|
61
|
+
| activeKey / defaultActiveKey | `string | string[]` | — | 受控/初始展开 |
|
|
62
|
+
| ghost | `boolean` | `false` | 无外框/阴影的轻量样式 |
|
|
63
|
+
| size | `"small" | "middle" | "large"` | `"middle"` | 尺寸 |
|
|
62
64
|
| onChange | `(keys: string[]) => void` | — | 展开变更 |
|
|
63
65
|
|
|
64
66
|
|
package/docs/llms/drawer.md
CHANGED
|
@@ -23,7 +23,7 @@ extra 渲染到标题右边,常用来放刷新 / 更多 / 保存按钮。
|
|
|
23
23
|
```tsx
|
|
24
24
|
<Drawer
|
|
25
25
|
title="订单详情"
|
|
26
|
-
extra={<><
|
|
26
|
+
extra={<><Button icon="edit" tip="编辑" /><Button variant="primary">保存</Button></>}
|
|
27
27
|
/>
|
|
28
28
|
```
|
|
29
29
|
|
package/docs/llms/form.md
CHANGED
package/docs/llms/input.md
CHANGED
|
@@ -14,7 +14,12 @@ import { Input, Textarea } from "@fangxinyan/lumina";
|
|
|
14
14
|
|
|
15
15
|
```tsx
|
|
16
16
|
const [v, setV] = useState("");
|
|
17
|
-
<Input
|
|
17
|
+
<Input
|
|
18
|
+
placeholder="输入用户名"
|
|
19
|
+
value={v}
|
|
20
|
+
onChange={(e) => setV(e.target.value)}
|
|
21
|
+
leadingIcon="user"
|
|
22
|
+
/>
|
|
18
23
|
```
|
|
19
24
|
|
|
20
25
|
### 前后置图标
|
|
@@ -25,15 +30,15 @@ leadingIcon / trailingIcon。
|
|
|
25
30
|
<Input placeholder="搜索..." leadingIcon="search" />
|
|
26
31
|
```
|
|
27
32
|
|
|
28
|
-
###
|
|
33
|
+
### Input.Password
|
|
29
34
|
|
|
30
|
-
|
|
35
|
+
密码输入框,内置显隐切换。
|
|
31
36
|
|
|
32
37
|
```tsx
|
|
33
|
-
<Input
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
38
|
+
<Input.Password
|
|
39
|
+
value={pw}
|
|
40
|
+
onChange={(e) => setPw(e.target.value)}
|
|
41
|
+
allowClear
|
|
37
42
|
/>
|
|
38
43
|
```
|
|
39
44
|
|
|
@@ -50,7 +55,7 @@ invalid 触发红色凹槽。
|
|
|
50
55
|
allowClear 在值非空时显示 × 按钮,点击即清空。
|
|
51
56
|
|
|
52
57
|
```tsx
|
|
53
|
-
<Input value={v}
|
|
58
|
+
<Input value={v} onValueChange={setV} allowClear placeholder="输入后右侧会出现 ×" />
|
|
54
59
|
```
|
|
55
60
|
|
|
56
61
|
### 前缀 / 后缀
|
|
@@ -69,22 +74,22 @@ showCount 显示当前字数,配合 maxLength 显示 N / max。
|
|
|
69
74
|
```tsx
|
|
70
75
|
<Input
|
|
71
76
|
value={v}
|
|
72
|
-
|
|
77
|
+
onValueChange={setV}
|
|
73
78
|
maxLength={20}
|
|
74
79
|
showCount
|
|
75
80
|
placeholder="最多输入 20 个字"
|
|
76
81
|
/>
|
|
77
82
|
```
|
|
78
83
|
|
|
79
|
-
### 多行文本
|
|
84
|
+
### Input.TextArea 多行文本
|
|
80
85
|
|
|
81
|
-
|
|
86
|
+
Input.TextArea 与 Textarea 使用同一套多行输入能力,也支持 allowClear / maxLength / showCount。
|
|
82
87
|
|
|
83
88
|
```tsx
|
|
84
|
-
<
|
|
89
|
+
<Input.TextArea
|
|
85
90
|
placeholder="..."
|
|
86
91
|
value={msg}
|
|
87
|
-
onChange={setMsg}
|
|
92
|
+
onChange={(e) => setMsg(e.target.value)}
|
|
88
93
|
allowClear
|
|
89
94
|
maxLength={300}
|
|
90
95
|
showCount
|
|
@@ -98,7 +103,8 @@ Textarea 与 Input 共享同款凹槽,也支持 allowClear / maxLength / showCou
|
|
|
98
103
|
| Prop | 类型 | 默认 | 说明 |
|
|
99
104
|
| --- | --- | --- | --- |
|
|
100
105
|
| value / defaultValue | `string` | — | 受控值 / 初值 |
|
|
101
|
-
| onChange | `(
|
|
106
|
+
| onChange | `(event) => void` | — | 变更回调,传入 React 原生事件 |
|
|
107
|
+
| onValueChange | `(value: string, event) => void` | — | 值回调便捷写法 |
|
|
102
108
|
| placeholder | `string` | — | 占位文案 |
|
|
103
109
|
| leadingIcon / trailingIcon | `IconName` | — | 前/后置图标 |
|
|
104
110
|
| prefix | `ReactNode` | — | 左侧内嵌内容(在 leadingIcon 之后) |
|
|
@@ -106,17 +112,20 @@ Textarea 与 Input 共享同款凹槽,也支持 allowClear / maxLength / showCou
|
|
|
106
112
|
| allowClear | `boolean` | `false` | 显示内置的清除按钮 |
|
|
107
113
|
| maxLength | `number` | — | 最大字符数,透传至原生 input |
|
|
108
114
|
| showCount | `boolean` | `false` | 在输入框下方显示字数统计 |
|
|
115
|
+
| Input.Password | `Component` | — | 密码输入框,内置显隐切换 |
|
|
116
|
+
| Input.TextArea | `typeof Textarea` | — | 多行文本别名 |
|
|
109
117
|
| size | `"sm" | "md" | "lg"` | `"md"` | 尺寸 |
|
|
110
118
|
| invalid | `boolean` | `false` | 错误态 |
|
|
111
119
|
| disabled | `boolean` | `false` | 禁用 |
|
|
112
120
|
|
|
113
121
|
|
|
114
|
-
**Textarea**
|
|
122
|
+
**Input.TextArea / Textarea**
|
|
115
123
|
|
|
116
124
|
| Prop | 类型 | 默认 | 说明 |
|
|
117
125
|
| --- | --- | --- | --- |
|
|
118
126
|
| value / defaultValue | `string` | — | 受控值 / 初值 |
|
|
119
|
-
| onChange | `(
|
|
127
|
+
| onChange | `(event) => void` | — | 变更回调,传入 React 原生事件 |
|
|
128
|
+
| onValueChange | `(value: string, event) => void` | — | 值回调便捷写法 |
|
|
120
129
|
| allowClear | `boolean` | `false` | 右上角显示清除按钮 |
|
|
121
130
|
| maxLength | `number` | — | 最大字符数 |
|
|
122
131
|
| showCount | `boolean` | `false` | 显示字数统计 |
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# Message 全局消息
|
|
2
|
+
|
|
3
|
+
> 全局轻量提示,支持函数调用与对象配置。
|
|
4
|
+
|
|
5
|
+
## 导入
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import { message, MessageContainer } from "@fangxinyan/lumina";
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 示例
|
|
12
|
+
|
|
13
|
+
### 四种语义
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
message.info("已保存到草稿");
|
|
17
|
+
message.success("操作完成");
|
|
18
|
+
message.warning("请注意");
|
|
19
|
+
message.error("发生错误");
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
### 带标题
|
|
23
|
+
|
|
24
|
+
```tsx
|
|
25
|
+
message.success("已上传 5 个文件", "上传完成");
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### 对象调用
|
|
29
|
+
|
|
30
|
+
支持 content / duration / key / destroy,适合需要更新或手动关闭的提示。
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
message.open({ key: "sync", type: "info", content: "同步中...", duration: 0 });
|
|
34
|
+
setTimeout(() => {
|
|
35
|
+
message.success({ key: "sync", content: "同步完成", duration: 1800 });
|
|
36
|
+
}, 900);
|
|
37
|
+
message.destroy("sync");
|
|
38
|
+
```
|
|
39
|
+
|
|
40
|
+
## API
|
|
41
|
+
|
|
42
|
+
**message.***
|
|
43
|
+
|
|
44
|
+
| Prop | 类型 | 默认 | 说明 |
|
|
45
|
+
| --- | --- | --- | --- |
|
|
46
|
+
| info(message, title?) | `(msg, title?) => id` | — | 信息提示 |
|
|
47
|
+
| success(message, title?) | `(msg, title?) => id` | — | 成功 |
|
|
48
|
+
| warning(message, title?) / warn(message, title?) | `(msg, title?) => id` | — | 警告 |
|
|
49
|
+
| error(message, title?) | `(msg, title?) => id` | — | 错误 |
|
|
50
|
+
| open({ type, content, title?, duration?, key? }) | `(config) => id` | — | 对象配置 API |
|
|
51
|
+
| dismiss(id) | `(id: number) => void` | — | 关闭一条 |
|
|
52
|
+
| destroy(key?) / clear() | `(key?) => void` | — | 关闭指定 key 或清空全部 |
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
**MessageContainer**
|
|
56
|
+
|
|
57
|
+
| Prop | 类型 | 默认 | 说明 |
|
|
58
|
+
| --- | --- | --- | --- |
|
|
59
|
+
| placement | `"top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center"` | `"top-right"` | 位置 |
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
---
|
|
63
|
+
[← 回到索引](../llms.md)
|
package/docs/llms/modal.md
CHANGED
|
@@ -16,6 +16,24 @@ import { Modal } from "@fangxinyan/lumina";
|
|
|
16
16
|
<Modal open={m} onClose={...} title="标题">...</Modal>
|
|
17
17
|
```
|
|
18
18
|
|
|
19
|
+
### 静态确认框
|
|
20
|
+
|
|
21
|
+
通过 Modal.confirm / warning / error / success / info 直接创建一次性对话框。
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
Modal.confirm({
|
|
25
|
+
title: "覆盖当前配置?",
|
|
26
|
+
content: "保存后会立即生效。",
|
|
27
|
+
okText: "覆盖",
|
|
28
|
+
onOk: async () => {
|
|
29
|
+
await save();
|
|
30
|
+
message.success("已覆盖");
|
|
31
|
+
},
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
Modal.warning({ title: "容量不足", content: "请先清理缓存。" });
|
|
35
|
+
```
|
|
36
|
+
|
|
19
37
|
### 确认操作 (footer 自定义)
|
|
20
38
|
|
|
21
39
|
用 footer 自定义底部按钮。传 null 可以去掉 footer。
|
|
@@ -85,5 +103,17 @@ closable={false} 隐藏右上角 ×,closeIcon 可自定义。
|
|
|
85
103
|
| zIndex | `number` | — | 覆盖遮罩 z-index |
|
|
86
104
|
|
|
87
105
|
|
|
106
|
+
**Modal 静态 API**
|
|
107
|
+
|
|
108
|
+
| Prop | 类型 | 默认 | 说明 |
|
|
109
|
+
| --- | --- | --- | --- |
|
|
110
|
+
| Modal.confirm(config) | `(config) => { destroy, update }` | — | 确认框,默认显示取消/确定 |
|
|
111
|
+
| Modal.info / success / warning / error(config) | `(config) => { destroy, update }` | — | 单按钮提示框 |
|
|
112
|
+
| Modal.destroyAll() | `() => void` | — | 关闭全部静态弹窗 |
|
|
113
|
+
| config.content | `ReactNode` | — | 正文内容 |
|
|
114
|
+
| config.okCancel | `boolean` | — | 是否显示取消按钮 |
|
|
115
|
+
| config.onOk | `() => void | Promise<void>` | — | 确定回调,返回 Promise 时自动显示 loading |
|
|
116
|
+
|
|
117
|
+
|
|
88
118
|
---
|
|
89
119
|
[← 回到索引](../llms.md)
|
package/docs/llms/popover.md
CHANGED
|
@@ -71,6 +71,21 @@ import { Popover } from "@fangxinyan/lumina";
|
|
|
71
71
|
</div>
|
|
72
72
|
```
|
|
73
73
|
|
|
74
|
+
### 细分位置与浮层 class
|
|
75
|
+
|
|
76
|
+
placement 支持 bottomLeft 等细分方向,overlayClassName 可标记浮层节点。
|
|
77
|
+
|
|
78
|
+
```tsx
|
|
79
|
+
<Popover
|
|
80
|
+
placement="bottomLeft"
|
|
81
|
+
overlayClassName="settings-popover"
|
|
82
|
+
title="快捷设置"
|
|
83
|
+
content={<div>显示在触发器左下方。</div>}
|
|
84
|
+
>
|
|
85
|
+
<Button icon="settings">设置</Button>
|
|
86
|
+
</Popover>
|
|
87
|
+
```
|
|
88
|
+
|
|
74
89
|
### 箭头
|
|
75
90
|
|
|
76
91
|
arrow 属性添加指向触发元素的小箭头
|
|
@@ -152,7 +167,7 @@ trigger="hover" 鼠标悬停触发
|
|
|
152
167
|
| --- | --- | --- | --- |
|
|
153
168
|
| content \* | `ReactNode` | — | 浮层内容 |
|
|
154
169
|
| title | `ReactNode` | — | 标题 |
|
|
155
|
-
| placement | `"top" | "bottom" | "left" | "right"
|
|
170
|
+
| placement | `"top" | "bottom" | "left" | "right" | ...` | `"bottom"` | 弹出位置,支持 bottomLeft 等细分方向 |
|
|
156
171
|
| trigger | `"click" | "hover"` | `"click"` | 触发方式 |
|
|
157
172
|
| arrow | `boolean` | `false` | 显示箭头 |
|
|
158
173
|
| closable | `boolean` | `false` | 显示关闭按钮 |
|
|
@@ -160,6 +175,8 @@ trigger="hover" 鼠标悬停触发
|
|
|
160
175
|
| open | `boolean` | — | 受控显示状态 |
|
|
161
176
|
| defaultOpen | `boolean` | `false` | 非受控初始状态 |
|
|
162
177
|
| onOpenChange | `(open: boolean) => void` | — | 显示状态变化回调 |
|
|
178
|
+
| visible / onVisibleChange | `boolean / (visible) => void` | — | 受控显示状态别名 |
|
|
179
|
+
| overlayClassName / popupClassName | `string` | — | 浮层 className |
|
|
163
180
|
|
|
164
181
|
|
|
165
182
|
---
|
package/docs/llms/radio.md
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
## 导入
|
|
6
6
|
|
|
7
7
|
```tsx
|
|
8
|
-
import { RadioGroup } from "@fangxinyan/lumina";
|
|
8
|
+
import { Radio, RadioGroup } from "@fangxinyan/lumina";
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
## 示例
|
|
@@ -19,6 +19,14 @@ import { RadioGroup } from "@fangxinyan/lumina";
|
|
|
19
19
|
]} />
|
|
20
20
|
```
|
|
21
21
|
|
|
22
|
+
### 单个 Radio
|
|
23
|
+
|
|
24
|
+
单项控件可用于自定义组合场景;表单里通常优先使用 RadioGroup。
|
|
25
|
+
|
|
26
|
+
```tsx
|
|
27
|
+
<Radio label="接收更新" defaultChecked />
|
|
28
|
+
```
|
|
29
|
+
|
|
22
30
|
### 水平排列
|
|
23
31
|
|
|
24
32
|
direction='horizontal'。
|
|
@@ -27,8 +35,34 @@ direction='horizontal'。
|
|
|
27
35
|
<RadioGroup direction="horizontal" ... />
|
|
28
36
|
```
|
|
29
37
|
|
|
38
|
+
### 分段外观
|
|
39
|
+
|
|
40
|
+
variant="segmented" 用同一组选项表达更紧凑的互斥切换。
|
|
41
|
+
|
|
42
|
+
```tsx
|
|
43
|
+
<RadioGroup
|
|
44
|
+
variant="segmented"
|
|
45
|
+
defaultValue="grid"
|
|
46
|
+
options={[
|
|
47
|
+
{ value: "grid", label: "网格" },
|
|
48
|
+
{ value: "list", label: "列表" },
|
|
49
|
+
{ value: "card", label: "卡片" },
|
|
50
|
+
]}
|
|
51
|
+
/>
|
|
52
|
+
```
|
|
53
|
+
|
|
30
54
|
## API
|
|
31
55
|
|
|
56
|
+
**Radio**
|
|
57
|
+
|
|
58
|
+
| Prop | 类型 | 默认 | 说明 |
|
|
59
|
+
| --- | --- | --- | --- |
|
|
60
|
+
| checked / defaultChecked | `boolean` | — | 受控/初始选中 |
|
|
61
|
+
| onChange | `(checked: boolean) => void` | — | 变更 |
|
|
62
|
+
| label | `ReactNode` | — | 标签 |
|
|
63
|
+
| disabled | `boolean` | — | 禁用 |
|
|
64
|
+
|
|
65
|
+
|
|
32
66
|
**RadioGroup**
|
|
33
67
|
|
|
34
68
|
| Prop | 类型 | 默认 | 说明 |
|
|
@@ -37,6 +71,8 @@ direction='horizontal'。
|
|
|
37
71
|
| value / defaultValue | `T` | — | 受控/初始 |
|
|
38
72
|
| onChange | `(value: T) => void` | — | 变更 |
|
|
39
73
|
| direction | `"vertical" | "horizontal"` | `"vertical"` | 方向 |
|
|
74
|
+
| variant | `"default" | "segmented"` | `"default"` | 外观 |
|
|
75
|
+
| size | `"sm" | "md" | "lg"` | `"md"` | 分段外观尺寸 |
|
|
40
76
|
|
|
41
77
|
|
|
42
78
|
---
|
package/docs/llms/select.md
CHANGED
|
@@ -37,6 +37,22 @@ searchable + clearable + 选项 icon/description。
|
|
|
37
37
|
/>
|
|
38
38
|
```
|
|
39
39
|
|
|
40
|
+
### 常用 prop 别名
|
|
41
|
+
|
|
42
|
+
allowClear / showSearch / popupClassName / optionFilterProp 可直接使用。
|
|
43
|
+
|
|
44
|
+
```tsx
|
|
45
|
+
<Select
|
|
46
|
+
allowClear
|
|
47
|
+
showSearch
|
|
48
|
+
popupClassName="my-select-popup"
|
|
49
|
+
optionFilterProp="label"
|
|
50
|
+
value={value}
|
|
51
|
+
onChange={setValue}
|
|
52
|
+
options={options}
|
|
53
|
+
/>
|
|
54
|
+
```
|
|
55
|
+
|
|
40
56
|
### 分组
|
|
41
57
|
|
|
42
58
|
options 接受 { label, options } 表示分组。
|
|
@@ -75,8 +91,12 @@ loading 时显示 spinner,emptyContent 自定义空态。
|
|
|
75
91
|
| multiple | `boolean` | `false` | 多选 |
|
|
76
92
|
| maxTagCount | `number` | — | 多选时显示的标签数(超出折叠 +N) |
|
|
77
93
|
| searchable | `boolean` | `false` | 可搜索 |
|
|
94
|
+
| showSearch | `boolean` | `false` | searchable 的等价别名 |
|
|
78
95
|
| filterOption | `(input, option) => boolean` | — | 自定义过滤 |
|
|
96
|
+
| optionFilterProp | `"label" | "value" | "text" | string` | — | 默认过滤使用的 option 字段 |
|
|
79
97
|
| clearable | `boolean` | `false` | 可清除 |
|
|
98
|
+
| allowClear | `boolean | { clearIcon? }` | `false` | clearable 的等价别名 |
|
|
99
|
+
| menuClassName / popupClassName | `string` | — | 浮层菜单 className |
|
|
80
100
|
| loading | `boolean` | `false` | 加载态 |
|
|
81
101
|
| emptyContent | `ReactNode` | — | 空态文案 |
|
|
82
102
|
| size | `"sm" | "md" | "lg"` | `"md"` | 尺寸 |
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
# Spin 加载
|
|
2
|
+
|
|
3
|
+
> 表示任务正在进行,提示用户等待。
|
|
4
|
+
|
|
5
|
+
## 导入
|
|
6
|
+
|
|
7
|
+
```tsx
|
|
8
|
+
import { Spin } from "@fangxinyan/lumina";
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
## 示例
|
|
12
|
+
|
|
13
|
+
### 基础
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
<Spin />
|
|
17
|
+
<Spin size="large" />
|
|
18
|
+
<Spin size={40} />
|
|
19
|
+
```
|
|
20
|
+
|
|
21
|
+
### 色调
|
|
22
|
+
|
|
23
|
+
```tsx
|
|
24
|
+
<Spin tone="accent" />
|
|
25
|
+
<Spin tone="success" />
|
|
26
|
+
<Spin tone="warning" />
|
|
27
|
+
<Spin tone="danger" />
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### Dots 变体
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
<Spin variant="dots" />
|
|
34
|
+
<Spin variant="dots" size={24} />
|
|
35
|
+
<Spin variant="dots" size={32} />
|
|
36
|
+
```
|
|
37
|
+
|
|
38
|
+
### 带文案
|
|
39
|
+
|
|
40
|
+
```tsx
|
|
41
|
+
<Spin tip="加载中…" />
|
|
42
|
+
<Spin variant="dots" tone="accent" tip="正在同步" />
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## API
|
|
46
|
+
|
|
47
|
+
**Spin**
|
|
48
|
+
|
|
49
|
+
| Prop | 类型 | 默认 | 说明 |
|
|
50
|
+
| --- | --- | --- | --- |
|
|
51
|
+
| size | `"small" | "default" | "large" | number` | `"default"` | 尺寸 |
|
|
52
|
+
| tone | `"accent" | "success" | "warning" | "danger" | "current"` | `"accent"` | 色调 |
|
|
53
|
+
| variant | `"ring" | "dots"` | `"ring"` | 样式 |
|
|
54
|
+
| tip / label | `ReactNode` | — | 文案 |
|
|
55
|
+
| spinning | `boolean` | `true` | 是否显示加载指示器 |
|
|
56
|
+
|
|
57
|
+
|
|
58
|
+
---
|
|
59
|
+
[← 回到索引](../llms.md)
|