@agentscope-ai/design 1.0.26-beta.1768815624178 → 1.0.26-beta.1768890319874
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/lib/components/commonComponents/Empty/svg/Illustrate.js +39 -117
- package/lib/components/commonComponents/FileIcon/icons/audio.svg +1 -0
- package/lib/components/commonComponents/FileIcon/icons/video.svg +1 -0
- package/lib/components/commonComponents/FileIcon/index.js +5 -1
- package/lib/components/commonComponents/Video/index.style.js +9 -9
- package/llms/all.llms.txt +2192 -1618
- package/llms/components/commonComponents/CodeBlock/index.zh-CN.llms.txt +2 -2
- package/llms/docs/changelog/index.zh-CN.llms.txt +0 -21
- package/llms/docs/guide/tokens&variables.zh-CN.llms.txt +1 -1
- package/llms/docs/guide/vibe-coding.zh-CN.llms.txt +3 -2
- package/llms/index.llms.txt +48 -51
- package/package.json +1 -1
- package/llms/components/commonComponents/FileIcon/index.zh-CN.llms.txt +0 -28
- package/llms/docs/guide/iconLibrary.zh-CN.llms.txt +0 -150
- package/llms/docs/icons/iconLibrary.zh-CN.llms.txt +0 -308
- package/llms/docs/icons/sparkIcons.zh-CN.llms.txt +0 -25
package/llms/all.llms.txt
CHANGED
|
@@ -13,6 +13,166 @@
|
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
|
|
16
|
+
<DemoTitle title="TimePicker" desc="输入或选择时间的控件。">
|
|
17
|
+
#### API
|
|
18
|
+
|
|
19
|
+
<AntdApiRef url="https://ant.design/components/time-picker-cn/#api"></AntdApiRef>
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## antd API
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
```jsx
|
|
30
|
+
import dayjs from 'dayjs';
|
|
31
|
+
import customParseFormat from 'dayjs/plugin/customParseFormat'
|
|
32
|
+
|
|
33
|
+
dayjs.extend(customParseFormat)
|
|
34
|
+
<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
|
|
35
|
+
```
|
|
36
|
+
|
|
37
|
+
|
|
38
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
39
|
+
|--------|--------|--------|--------|--------|
|
|
40
|
+
| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
|
|
41
|
+
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
42
|
+
| cellRender | 自定义单元格的内容 | (current: number, info: { originNode: React.ReactNode, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
|
|
43
|
+
| changeOnScroll | 在滚动时改变选择值 | boolean | false | 5.14.0 |
|
|
44
|
+
| className | 选择器类名 | string | - | |
|
|
45
|
+
| defaultValue | 默认时间 | | - | |
|
|
46
|
+
| disabled | 禁用全部操作 | boolean | false | |
|
|
47
|
+
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
48
|
+
| format | 展示的时间格式 | string | HH:mm:ss | |
|
|
49
|
+
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | |
|
|
50
|
+
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | |
|
|
51
|
+
| hourStep | 小时选项间隔 | number | 1 | |
|
|
52
|
+
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
|
|
53
|
+
| minuteStep | 分钟选项间隔 | number | 1 | |
|
|
54
|
+
| needConfirm | 是否需要确认按钮，为 | boolean | - | 5.14.0 |
|
|
55
|
+
| open | 面板是否打开 | boolean | false | |
|
|
56
|
+
| placeholder | 没有值的时候显示的内容 | string \| [string, string] | 请选择时间 | |
|
|
57
|
+
| placement | 选择框弹出的位置 | bottomLeft | bottomLeft | |
|
|
58
|
+
| popupClassName | 弹出层类名 | string | - | |
|
|
59
|
+
| popupStyle | 弹出层样式对象 | object | - | |
|
|
60
|
+
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
|
|
61
|
+
| renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - | |
|
|
62
|
+
| secondStep | 秒选项间隔 | number | 1 | |
|
|
63
|
+
| showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
|
|
64
|
+
| size | 输入框大小， | large | - | |
|
|
65
|
+
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
66
|
+
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
|
67
|
+
| use12Hours | 使用 12 小时制，为 true 时 | boolean | false | |
|
|
68
|
+
| value | 当前时间 | | - | |
|
|
69
|
+
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
70
|
+
| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - | |
|
|
71
|
+
| onChange | 时间发生变化的回调 | function(time: dayjs, timeString: string): void | - | |
|
|
72
|
+
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - | |
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
#### DisabledTime
|
|
76
|
+
|
|
77
|
+
|
|
78
|
+
```typescript
|
|
79
|
+
type DisabledTime = (now: Dayjs) => {
|
|
80
|
+
disabledHours?: () => number[];
|
|
81
|
+
disabledMinutes?: (selectedHour: number) => number[];
|
|
82
|
+
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
83
|
+
disabledMilliseconds?: (
|
|
84
|
+
selectedHour: number,
|
|
85
|
+
selectedMinute: number,
|
|
86
|
+
selectedSecond: number,
|
|
87
|
+
) => number[];
|
|
88
|
+
};
|
|
89
|
+
```
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
注意：`disabledMilliseconds` 为 `5.14.0` 新增。
|
|
93
|
+
|
|
94
|
+
## 方法
|
|
95
|
+
|
|
96
|
+
| 名称 | 描述 | 版本 |
|
|
97
|
+
|--------|--------|--------|
|
|
98
|
+
| blur() | 移除焦点 | |
|
|
99
|
+
| focus() | 获取焦点 | |
|
|
100
|
+
|
|
101
|
+
|
|
102
|
+
## RangePicker
|
|
103
|
+
|
|
104
|
+
属性与 DatePicker 的 [RangePicker](/components/date-picker-cn#rangepicker) 相同。还包含以下属性：
|
|
105
|
+
|
|
106
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
107
|
+
|--------|--------|--------|--------|--------|
|
|
108
|
+
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
109
|
+
| order | 始末时间是否自动排序 | boolean | true | 4.1.0 |
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
### RangeDisabledTime
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
```typescript
|
|
116
|
+
type RangeDisabledTime = (
|
|
117
|
+
now: Dayjs,
|
|
118
|
+
type = 'start' | 'end',
|
|
119
|
+
) => {
|
|
120
|
+
disabledHours?: () => number[];
|
|
121
|
+
disabledMinutes?: (selectedHour: number) => number[];
|
|
122
|
+
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
123
|
+
};
|
|
124
|
+
```
|
|
125
|
+
|
|
126
|
+
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
<DemoTitle title="Tooltip" desc="简单的文本提示气泡框">
|
|
130
|
+
#### API
|
|
131
|
+
|
|
132
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
133
|
+
|--------|--------|--------|--------|
|
|
134
|
+
| mode | 颜色模式 | 'dark' \| 'light' | 'dark' |
|
|
135
|
+
| maxHeight | 最大高度 | number \| string | '90vh' |
|
|
136
|
+
|
|
137
|
+
|
|
138
|
+
<AntdApiRef url="https://ant.design/components/tooltip-cn/#api"></AntdApiRef>
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
## antd API
|
|
142
|
+
|
|
143
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
144
|
+
|
|
145
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
146
|
+
|--------|--------|--------|--------|
|
|
147
|
+
| title | 提示文字 | ReactNode \| () => ReactNode | - |
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
### 共同的 API
|
|
151
|
+
|
|
152
|
+
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
153
|
+
|
|
154
|
+
<!-- prettier-ignore -->
|
|
155
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
156
|
+
|--------|--------|--------|--------|--------|
|
|
157
|
+
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
158
|
+
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
159
|
+
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
160
|
+
| color | 背景颜色 | string | - | 4.3.0 |
|
|
161
|
+
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
162
|
+
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
163
|
+
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
164
|
+
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
165
|
+
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
166
|
+
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
167
|
+
| placement | 气泡框位置，可选 | string | top | |
|
|
168
|
+
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
169
|
+
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
170
|
+
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
171
|
+
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
16
176
|
<DemoTitle title="Upload" desc="文件选择上传和拖拽上传控件。">
|
|
17
177
|
#### API
|
|
18
178
|
|
|
@@ -109,79 +269,137 @@
|
|
|
109
269
|
|
|
110
270
|
|
|
111
271
|
|
|
112
|
-
<DemoTitle title="
|
|
272
|
+
<DemoTitle title="Tabs" desc="用户可以通过点击不同的标签在同一页面中查看不同的内容区域。">
|
|
113
273
|
#### API
|
|
114
274
|
|
|
115
275
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
116
276
|
|--------|--------|--------|--------|
|
|
117
|
-
|
|
|
118
|
-
| maxHeight | 最大高度 | number \| string | '90vh' |
|
|
277
|
+
| type | 类型 | 'line' \| 'card' \| 'editable-card' \| 'segmented' | true |
|
|
119
278
|
|
|
120
279
|
|
|
121
|
-
<AntdApiRef url="https://ant.design/components/
|
|
280
|
+
<AntdApiRef url="https://ant.design/components/tabs-cn/#api"></AntdApiRef>
|
|
122
281
|
|
|
123
282
|
|
|
124
283
|
## antd API
|
|
125
284
|
|
|
126
285
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
127
286
|
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
|
287
|
+
### Tabs
|
|
288
|
+
|
|
289
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
290
|
+
|--------|--------|--------|--------|--------|
|
|
291
|
+
| activeKey | 当前激活 tab 面板的 key | string | - | |
|
|
292
|
+
| addIcon | 自定义添加按钮，设置 | ReactNode | | 4.4.0 |
|
|
293
|
+
| animated | 是否使用动画切换 Tabs | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | |
|
|
294
|
+
| centered | 标签居中展示 | boolean | false | 4.4.0 |
|
|
295
|
+
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板的 key | |
|
|
296
|
+
| hideAdd | 是否隐藏加号图标，在 | boolean | false | |
|
|
297
|
+
| indicator | 自定义指示条的长度和对齐方式 | { size?: number \| (origin: number) => number; align: | - | 5.13.0 |
|
|
298
|
+
| items | 配置选项卡内容 | | [] | 4.23.0 |
|
|
299
|
+
| more | 自定义折叠菜单属性 | | { icon: | |
|
|
300
|
+
| removeIcon | 自定义删除按钮，设置 | ReactNode | | 5.15.0 |
|
|
301
|
+
| popupClassName | 更多菜单的 | string | - | 4.21.0 |
|
|
302
|
+
| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
|
|
303
|
+
| size | 大小，提供 | string | middle | |
|
|
304
|
+
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
|
|
305
|
+
| tabBarGutter | tabs 之间的间隙 | number | - | |
|
|
306
|
+
| tabBarStyle | tab bar 的样式对象 | CSSProperties | - | |
|
|
307
|
+
| tabPosition | 页签位置，可选值有 | string | top | |
|
|
308
|
+
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
309
|
+
| onChange | 切换面板的回调 | (activeKey: string) => void | - | |
|
|
310
|
+
| onEdit | 新增和删除页签的回调，在 | (action === 'add' ? event : targetKey, action) => void | - | |
|
|
311
|
+
| onTabClick | tab 被点击的回调 | (key: string, event: MouseEvent) => void | - | |
|
|
312
|
+
| onTabScroll | tab 滚动时触发 | ({ direction: | - | 4.3.0 |
|
|
131
313
|
|
|
132
314
|
|
|
133
|
-
|
|
315
|
+
更多属性查看 [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
|
|
134
316
|
|
|
135
|
-
|
|
317
|
+
### TabItemType
|
|
136
318
|
|
|
137
|
-
<!-- prettier-ignore -->
|
|
138
319
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
139
320
|
|--------|--------|--------|--------|--------|
|
|
140
|
-
|
|
|
141
|
-
|
|
|
142
|
-
|
|
|
143
|
-
|
|
|
144
|
-
|
|
|
145
|
-
|
|
|
146
|
-
|
|
|
147
|
-
|
|
|
148
|
-
|
|
|
149
|
-
|
|
150
|
-
| placement | 气泡框位置，可选 | string | top | |
|
|
151
|
-
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
152
|
-
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
153
|
-
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
154
|
-
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
321
|
+
| closeIcon | 自定义关闭图标，在 | ReactNode | - | |
|
|
322
|
+
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
323
|
+
| disabled | 禁用某一项 | boolean | false | |
|
|
324
|
+
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
|
|
325
|
+
| key | 对应 activeKey | string | - | |
|
|
326
|
+
| label | 选项卡头显示文字 | ReactNode | - | |
|
|
327
|
+
| icon | 选项卡头显示图标 | ReactNode | - | 5.12.0 |
|
|
328
|
+
| children | 选项卡头显示内容 | ReactNode | - | |
|
|
329
|
+
| closable | 是否显示选项卡的关闭按钮，在 | boolean | true | |
|
|
330
|
+
|
|
155
331
|
|
|
332
|
+
### MoreProps
|
|
156
333
|
|
|
334
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
335
|
+
|--------|--------|--------|--------|--------|
|
|
336
|
+
| icon | 自定义折叠图标 | ReactNode | - | |
|
|
337
|
+
| | | | | |
|
|
157
338
|
|
|
158
339
|
|
|
159
|
-
|
|
340
|
+
|
|
341
|
+
|
|
342
|
+
<DemoTitle title="Tag" desc="进行标记和分类的小标签">
|
|
160
343
|
#### API
|
|
161
344
|
|
|
162
|
-
|
|
345
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
346
|
+
|--------|--------|--------|--------|
|
|
347
|
+
| size | 尺寸 | 'small' \| 'middle' | 'middle' |
|
|
348
|
+
| color | 标签色 | SparkTagColors \| string | 'purple' |
|
|
349
|
+
|
|
350
|
+
<AntdApiRef url="https://ant.design/components/tag-cn/#api"></AntdApiRef>
|
|
163
351
|
|
|
164
352
|
|
|
165
353
|
## antd API
|
|
166
354
|
|
|
167
355
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
168
356
|
|
|
169
|
-
###
|
|
357
|
+
### Tag
|
|
170
358
|
|
|
171
359
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
172
360
|
|--------|--------|--------|--------|--------|
|
|
173
|
-
|
|
|
174
|
-
|
|
|
175
|
-
|
|
|
176
|
-
|
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
|
-
|
|
|
182
|
-
|
|
183
|
-
|
|
|
184
|
-
|
|
|
361
|
+
| closeIcon | 自定义关闭按钮。5.7.0：设置为 | ReactNode | false | 4.4.0 |
|
|
362
|
+
| icon | 设置图标 | ReactNode | - | |
|
|
363
|
+
| bordered | 是否有边框 | boolean | true | 5.4.0 |
|
|
364
|
+
| onClose | 关闭时的回调（可通过 | (e: React.MouseEvent) => void | - | |
|
|
365
|
+
|
|
366
|
+
|
|
367
|
+
### Tag.CheckableTag
|
|
368
|
+
|
|
369
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
370
|
+
|--------|--------|--------|--------|
|
|
371
|
+
| checked | 设置标签的选中状态 | boolean | false |
|
|
372
|
+
| onChange | 点击标签时触发的回调 | (checked) => void | - |
|
|
373
|
+
|
|
374
|
+
|
|
375
|
+
|
|
376
|
+
|
|
377
|
+
<DemoTitle title="Table" desc="展示行列数据。">
|
|
378
|
+
#### API
|
|
379
|
+
|
|
380
|
+
<AntdApiRef url="https://ant.design/components/table-cn/#api"></AntdApiRef>
|
|
381
|
+
|
|
382
|
+
|
|
383
|
+
## antd API
|
|
384
|
+
|
|
385
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
386
|
+
|
|
387
|
+
### Table
|
|
388
|
+
|
|
389
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
390
|
+
|--------|--------|--------|--------|--------|
|
|
391
|
+
| bordered | 是否展示外边框和列边框 | boolean | false | |
|
|
392
|
+
| columns | 表格列的配置描述，具体项见下表 | | - | |
|
|
393
|
+
| components | 覆盖默认的 table 元素 | | - | |
|
|
394
|
+
| dataSource | 数据数组 | object[] | - | |
|
|
395
|
+
| expandable | 配置展开属性 | | - | |
|
|
396
|
+
| footer | 表格尾部 | function(currentPageData) | - | |
|
|
397
|
+
| getPopupContainer | 设置表格内各类浮层的渲染节点，如筛选菜单 | (triggerNode) => HTMLElement | () => TableHtmlElement | |
|
|
398
|
+
| loading | 页面是否加载中 | boolean \| | false | |
|
|
399
|
+
| locale | 默认文案设置，目前包括排序、过滤、空数据文案 | object | | |
|
|
400
|
+
| pagination | 分页器，参考 | object \| | - | |
|
|
401
|
+
| rowClassName | 表格行的类名 | function(record, index): string | - | |
|
|
402
|
+
| rowKey | 表格行 key 的取值，可以是字符串或一个函数 | string \| function(record): string | key | |
|
|
185
403
|
| rowSelection | 表格行是否可选择， | object | - | |
|
|
186
404
|
| rowHoverable | 表格行是否开启 hover 交互 | boolean | true | 5.16.0 |
|
|
187
405
|
| scroll | 表格是否可滚动，也可以指定滚动区域的宽、高， | object | - | |
|
|
@@ -411,410 +629,192 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
411
629
|
|
|
412
630
|
|
|
413
631
|
|
|
414
|
-
<DemoTitle title="
|
|
632
|
+
<DemoTitle title="Switch" desc="使用开关切换两种状态之间。">
|
|
415
633
|
#### API
|
|
416
634
|
|
|
417
635
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
418
636
|
|--------|--------|--------|--------|
|
|
419
|
-
|
|
|
420
|
-
| color | 标签色 | SparkTagColors \| string | 'purple' |
|
|
637
|
+
| label | Switch后的内容 | ReactNode | |
|
|
421
638
|
|
|
422
|
-
<AntdApiRef url="https://ant.design/components/
|
|
639
|
+
<AntdApiRef url="https://ant.design/components/switch-cn/#api"></AntdApiRef>
|
|
423
640
|
|
|
424
641
|
|
|
425
642
|
## antd API
|
|
426
643
|
|
|
427
644
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
428
645
|
|
|
429
|
-
### Tag
|
|
430
|
-
|
|
431
646
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
432
647
|
|--------|--------|--------|--------|--------|
|
|
433
|
-
|
|
|
434
|
-
|
|
|
435
|
-
|
|
|
436
|
-
|
|
|
648
|
+
| autoFocus | 组件自动获取焦点 | boolean | false | |
|
|
649
|
+
| checked | 指定当前是否选中 | boolean | false | |
|
|
650
|
+
| checkedChildren | 选中时的内容 | ReactNode | - | |
|
|
651
|
+
| className | Switch 器类名 | string | - | |
|
|
652
|
+
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
653
|
+
| defaultValue | defaultChecked | boolean | - | 5.12.0 |
|
|
654
|
+
| disabled | 是否禁用 | boolean | false | |
|
|
655
|
+
| loading | 加载中的开关 | boolean | false | |
|
|
656
|
+
| size | 开关大小，可选值： | string | default | |
|
|
657
|
+
| unCheckedChildren | 非选中时的内容 | ReactNode | - | |
|
|
658
|
+
| value | checked | boolean | - | 5.12.0 |
|
|
659
|
+
| onChange | 变化时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
660
|
+
| onClick | 点击时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
437
661
|
|
|
438
662
|
|
|
439
|
-
|
|
663
|
+
## 方法
|
|
440
664
|
|
|
441
|
-
|
|
|
442
|
-
|
|
443
|
-
|
|
|
444
|
-
|
|
|
665
|
+
| 名称 | 描述 |
|
|
666
|
+
|--------|--------|
|
|
667
|
+
| blur() | 移除焦点 |
|
|
668
|
+
| focus() | 获取焦点 |
|
|
445
669
|
|
|
446
670
|
|
|
447
671
|
|
|
448
672
|
|
|
449
|
-
<DemoTitle title="
|
|
673
|
+
<DemoTitle title="Steps" desc="引导用户按照流程完成任务的导航条。">
|
|
450
674
|
#### API
|
|
451
675
|
|
|
452
|
-
|
|
453
|
-
|--------|--------|--------|--------|
|
|
454
|
-
| type | 类型 | 'line' \| 'card' \| 'editable-card' \| 'segmented' | true |
|
|
455
|
-
|
|
456
|
-
|
|
457
|
-
<AntdApiRef url="https://ant.design/components/tabs-cn/#api"></AntdApiRef>
|
|
676
|
+
<AntdApiRef url="https://ant.design/components/steps-cn/#api"></AntdApiRef>
|
|
458
677
|
|
|
459
678
|
|
|
460
679
|
## antd API
|
|
461
680
|
|
|
462
681
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
463
682
|
|
|
464
|
-
###
|
|
683
|
+
### Steps
|
|
684
|
+
|
|
685
|
+
整体步骤条。
|
|
465
686
|
|
|
466
687
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
467
688
|
|--------|--------|--------|--------|--------|
|
|
468
|
-
|
|
|
469
|
-
|
|
|
470
|
-
|
|
|
471
|
-
|
|
|
472
|
-
|
|
|
473
|
-
|
|
|
474
|
-
|
|
|
475
|
-
|
|
|
476
|
-
|
|
|
477
|
-
|
|
|
478
|
-
|
|
|
479
|
-
|
|
|
480
|
-
|
|
|
481
|
-
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
|
|
482
|
-
| tabBarGutter | tabs 之间的间隙 | number | - | |
|
|
483
|
-
| tabBarStyle | tab bar 的样式对象 | CSSProperties | - | |
|
|
484
|
-
| tabPosition | 页签位置，可选值有 | string | top | |
|
|
485
|
-
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
486
|
-
| onChange | 切换面板的回调 | (activeKey: string) => void | - | |
|
|
487
|
-
| onEdit | 新增和删除页签的回调，在 | (action === 'add' ? event : targetKey, action) => void | - | |
|
|
488
|
-
| onTabClick | tab 被点击的回调 | (key: string, event: MouseEvent) => void | - | |
|
|
489
|
-
| onTabScroll | tab 滚动时触发 | ({ direction: | - | 4.3.0 |
|
|
490
|
-
|
|
689
|
+
| className | 步骤条类名 | string | - | |
|
|
690
|
+
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 | number | 0 | |
|
|
691
|
+
| direction | 指定步骤条方向。目前支持水平（ | string | horizontal | |
|
|
692
|
+
| initial | 起始序号，从 0 开始记数 | number | 0 | |
|
|
693
|
+
| labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选 | string | horizontal | |
|
|
694
|
+
| percent | 当前 | number | - | 4.5.0 |
|
|
695
|
+
| progressDot | 点状步骤条，可以设置为一个 function，labelPlacement 将强制为 | boolean \| (iconDot, {index, status, title, description}) => ReactNode | false | |
|
|
696
|
+
| responsive | 当屏幕宽度小于 | boolean | true | |
|
|
697
|
+
| size | 指定大小，目前支持普通（ | string | default | |
|
|
698
|
+
| status | 指定当前步骤的状态，可选 | string | process | |
|
|
699
|
+
| type | 步骤条类型，可选 | string | default | inline: 5.0 |
|
|
700
|
+
| onChange | 点击切换步骤时触发 | (current) => void | - | |
|
|
701
|
+
| items | 配置选项卡内容 | | [] | 4.24.0 |
|
|
491
702
|
|
|
492
|
-
更多属性查看 [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
|
|
493
703
|
|
|
494
|
-
###
|
|
704
|
+
### `type="inline"`
|
|
495
705
|
|
|
496
706
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
497
707
|
|--------|--------|--------|--------|--------|
|
|
498
|
-
|
|
|
499
|
-
|
|
|
500
|
-
|
|
|
501
|
-
|
|
|
502
|
-
|
|
|
503
|
-
|
|
|
504
|
-
| icon | 选项卡头显示图标 | ReactNode | - | 5.12.0 |
|
|
505
|
-
| children | 选项卡头显示内容 | ReactNode | - | |
|
|
506
|
-
| closable | 是否显示选项卡的关闭按钮，在 | boolean | true | |
|
|
708
|
+
| className | 步骤条类名 | string | - | |
|
|
709
|
+
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 | number | 0 | |
|
|
710
|
+
| initial | 起始序号，从 0 开始记数 | number | 0 | |
|
|
711
|
+
| status | 指定当前步骤的状态，可选 | string | process | |
|
|
712
|
+
| onChange | 点击切换步骤时触发 | (current) => void | - | |
|
|
713
|
+
| items | 配置选项卡内容，不支持 | | [] | 4.24.0 |
|
|
507
714
|
|
|
508
715
|
|
|
509
|
-
###
|
|
716
|
+
### StepItem
|
|
717
|
+
|
|
718
|
+
步骤条内的每一个步骤。
|
|
510
719
|
|
|
511
720
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
512
721
|
|--------|--------|--------|--------|--------|
|
|
513
|
-
|
|
|
514
|
-
|
|
|
722
|
+
| description | 步骤的详情描述，可选 | ReactNode | - | |
|
|
723
|
+
| disabled | 禁用点击 | boolean | false | |
|
|
724
|
+
| icon | 步骤图标的类型，可选 | ReactNode | - | |
|
|
725
|
+
| status | 指定状态。当不配置该属性时，会使用 Steps 的 | string | wait | |
|
|
726
|
+
| subTitle | 子标题 | ReactNode | - | |
|
|
727
|
+
| title | 标题 | ReactNode | - | |
|
|
515
728
|
|
|
516
729
|
|
|
517
730
|
|
|
518
731
|
|
|
519
|
-
<DemoTitle title="
|
|
732
|
+
<DemoTitle title="Spinner" desc="指示页面或区块的加载中状态">
|
|
520
733
|
#### API
|
|
521
734
|
|
|
522
735
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
523
736
|
|--------|--------|--------|--------|
|
|
524
|
-
|
|
|
737
|
+
| tip | indicator下方的tip | React.ReactNode | - |
|
|
738
|
+
| indicator | 自定义indicator，用于展示progress的百分比和加载文案 | React.ReactNode | - |
|
|
739
|
+
| children | 被spinner包裹的子元素 | React.ReactNode | - |
|
|
740
|
+
| style | spinner最外层的样式 | React.CSSProperties | - |
|
|
741
|
+
| className | spinner的类名 | string | - |
|
|
742
|
+
| percent | 进度条的百分比 | number | - |
|
|
743
|
+
| spinning | 是否为加载中状态 | boolean | false |
|
|
744
|
+
| showProgress | 是否显示进度条，如果为true，不需要手动在children中添加Progress组件 | boolean | false |
|
|
525
745
|
|
|
526
|
-
|
|
746
|
+
|
|
747
|
+
|
|
748
|
+
|
|
749
|
+
<DemoTitle title="Statistic" desc="展示统计数值">
|
|
750
|
+
#### API
|
|
751
|
+
|
|
752
|
+
<AntdApiRef url="https://ant.design/components/statistic-cn/#api"></AntdApiRef>
|
|
527
753
|
|
|
528
754
|
|
|
529
755
|
## antd API
|
|
530
756
|
|
|
531
757
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
532
758
|
|
|
759
|
+
#### Statistic
|
|
760
|
+
|
|
533
761
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
534
762
|
|--------|--------|--------|--------|--------|
|
|
535
|
-
|
|
|
536
|
-
|
|
|
537
|
-
|
|
|
538
|
-
|
|
|
539
|
-
|
|
|
540
|
-
|
|
|
541
|
-
|
|
|
542
|
-
|
|
|
543
|
-
|
|
|
544
|
-
|
|
|
545
|
-
| value | checked | boolean | - | 5.12.0 |
|
|
546
|
-
| onChange | 变化时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
547
|
-
| onClick | 点击时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
## 方法
|
|
763
|
+
| decimalSeparator | 设置小数点 | string | . | |
|
|
764
|
+
| formatter | 自定义数值展示 | (value) => ReactNode | - | |
|
|
765
|
+
| groupSeparator | 设置千分位标识符 | string | , | |
|
|
766
|
+
| loading | 数值是否加载中 | boolean | false | 4.8.0 |
|
|
767
|
+
| precision | 数值精度 | number | - | |
|
|
768
|
+
| prefix | 设置数值的前缀 | ReactNode | - | |
|
|
769
|
+
| suffix | 设置数值的后缀 | ReactNode | - | |
|
|
770
|
+
| title | 数值的标题 | ReactNode | - | |
|
|
771
|
+
| value | 数值内容 | string \| number | - | |
|
|
772
|
+
| valueStyle | 设置数值区域的样式 | CSSProperties | - | |
|
|
551
773
|
|
|
552
|
-
| 名称 | 描述 |
|
|
553
|
-
|--------|--------|
|
|
554
|
-
| blur() | 移除焦点 |
|
|
555
|
-
| focus() | 获取焦点 |
|
|
556
774
|
|
|
775
|
+
#### Statistic.Countdown <Badge type="error">Deprecated</Badge>
|
|
557
776
|
|
|
777
|
+
<!-- <Antd component="Alert" message="版本 >= 5.25.0 时请使用 Statistic.Timer 作为替代方案。" type="warning" banner="true"></Antd> -->
|
|
558
778
|
|
|
779
|
+
<!-- prettier-ignore -->
|
|
780
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
781
|
+
|--------|--------|--------|--------|--------|
|
|
782
|
+
| format | 格式化倒计时展示，参考 | string | HH:mm:ss | |
|
|
783
|
+
| prefix | 设置数值的前缀 | ReactNode | - | |
|
|
784
|
+
| suffix | 设置数值的后缀 | ReactNode | - | |
|
|
785
|
+
| title | 数值的标题 | ReactNode | - | |
|
|
786
|
+
| value | 数值内容 | number | - | |
|
|
787
|
+
| valueStyle | 设置数值区域的样式 | CSSProperties | - | |
|
|
788
|
+
| onFinish | 倒计时完成时触发 | () => void | - | |
|
|
789
|
+
| onChange | 倒计时时间变化时触发 | (value: number) => void | - | |
|
|
559
790
|
|
|
560
|
-
<DemoTitle title="TimePicker" desc="输入或选择时间的控件。">
|
|
561
|
-
#### API
|
|
562
791
|
|
|
563
|
-
|
|
792
|
+
#### Statistic.Timer <Badge>5.25.0+</Badge>
|
|
564
793
|
|
|
794
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
795
|
+
|--------|--------|--------|--------|--------|
|
|
796
|
+
| type | 计时类型，正计时或者倒计时 | countdown | - | |
|
|
797
|
+
| format | 格式化倒计时展示，参考 | string | HH:mm:ss | |
|
|
798
|
+
| prefix | 设置数值的前缀 | ReactNode | - | |
|
|
799
|
+
| suffix | 设置数值的后缀 | ReactNode | - | |
|
|
800
|
+
| title | 数值的标题 | ReactNode | - | |
|
|
801
|
+
| value | 数值内容 | number | - | |
|
|
802
|
+
| valueStyle | 设置数值区域的样式 | CSSProperties | - | |
|
|
803
|
+
| onFinish | 倒计时完成时触发, 指定为 | () => void | - | |
|
|
804
|
+
| onChange | 倒计时时间变化时触发 | (value: number) => void | - | |
|
|
565
805
|
|
|
566
|
-
## antd API
|
|
567
806
|
|
|
568
807
|
|
|
569
808
|
|
|
570
|
-
|
|
809
|
+
<DemoTitle title="Slider" desc="滑动型输入器，展示当前值和可选范围。">
|
|
810
|
+
#### API
|
|
571
811
|
|
|
812
|
+
<AntdApiRef url="https://ant.design/components/slider-cn/#api"></AntdApiRef>
|
|
572
813
|
|
|
573
|
-
```jsx
|
|
574
|
-
import dayjs from 'dayjs';
|
|
575
|
-
import customParseFormat from 'dayjs/plugin/customParseFormat'
|
|
576
814
|
|
|
577
|
-
|
|
578
|
-
<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
|
|
579
|
-
```
|
|
815
|
+
## antd API
|
|
580
816
|
|
|
581
|
-
|
|
582
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
583
|
-
|--------|--------|--------|--------|--------|
|
|
584
|
-
| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
|
|
585
|
-
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
586
|
-
| cellRender | 自定义单元格的内容 | (current: number, info: { originNode: React.ReactNode, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
|
|
587
|
-
| changeOnScroll | 在滚动时改变选择值 | boolean | false | 5.14.0 |
|
|
588
|
-
| className | 选择器类名 | string | - | |
|
|
589
|
-
| defaultValue | 默认时间 | | - | |
|
|
590
|
-
| disabled | 禁用全部操作 | boolean | false | |
|
|
591
|
-
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
592
|
-
| format | 展示的时间格式 | string | HH:mm:ss | |
|
|
593
|
-
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | |
|
|
594
|
-
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | |
|
|
595
|
-
| hourStep | 小时选项间隔 | number | 1 | |
|
|
596
|
-
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
|
|
597
|
-
| minuteStep | 分钟选项间隔 | number | 1 | |
|
|
598
|
-
| needConfirm | 是否需要确认按钮，为 | boolean | - | 5.14.0 |
|
|
599
|
-
| open | 面板是否打开 | boolean | false | |
|
|
600
|
-
| placeholder | 没有值的时候显示的内容 | string \| [string, string] | 请选择时间 | |
|
|
601
|
-
| placement | 选择框弹出的位置 | bottomLeft | bottomLeft | |
|
|
602
|
-
| popupClassName | 弹出层类名 | string | - | |
|
|
603
|
-
| popupStyle | 弹出层样式对象 | object | - | |
|
|
604
|
-
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
|
|
605
|
-
| renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - | |
|
|
606
|
-
| secondStep | 秒选项间隔 | number | 1 | |
|
|
607
|
-
| showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
|
|
608
|
-
| size | 输入框大小， | large | - | |
|
|
609
|
-
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
610
|
-
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
|
611
|
-
| use12Hours | 使用 12 小时制，为 true 时 | boolean | false | |
|
|
612
|
-
| value | 当前时间 | | - | |
|
|
613
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
614
|
-
| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - | |
|
|
615
|
-
| onChange | 时间发生变化的回调 | function(time: dayjs, timeString: string): void | - | |
|
|
616
|
-
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - | |
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
#### DisabledTime
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
```typescript
|
|
623
|
-
type DisabledTime = (now: Dayjs) => {
|
|
624
|
-
disabledHours?: () => number[];
|
|
625
|
-
disabledMinutes?: (selectedHour: number) => number[];
|
|
626
|
-
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
627
|
-
disabledMilliseconds?: (
|
|
628
|
-
selectedHour: number,
|
|
629
|
-
selectedMinute: number,
|
|
630
|
-
selectedSecond: number,
|
|
631
|
-
) => number[];
|
|
632
|
-
};
|
|
633
|
-
```
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
注意：`disabledMilliseconds` 为 `5.14.0` 新增。
|
|
637
|
-
|
|
638
|
-
## 方法
|
|
639
|
-
|
|
640
|
-
| 名称 | 描述 | 版本 |
|
|
641
|
-
|--------|--------|--------|
|
|
642
|
-
| blur() | 移除焦点 | |
|
|
643
|
-
| focus() | 获取焦点 | |
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
## RangePicker
|
|
647
|
-
|
|
648
|
-
属性与 DatePicker 的 [RangePicker](/components/date-picker-cn#rangepicker) 相同。还包含以下属性：
|
|
649
|
-
|
|
650
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
651
|
-
|--------|--------|--------|--------|--------|
|
|
652
|
-
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
653
|
-
| order | 始末时间是否自动排序 | boolean | true | 4.1.0 |
|
|
654
|
-
|
|
655
|
-
|
|
656
|
-
### RangeDisabledTime
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
```typescript
|
|
660
|
-
type RangeDisabledTime = (
|
|
661
|
-
now: Dayjs,
|
|
662
|
-
type = 'start' | 'end',
|
|
663
|
-
) => {
|
|
664
|
-
disabledHours?: () => number[];
|
|
665
|
-
disabledMinutes?: (selectedHour: number) => number[];
|
|
666
|
-
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
667
|
-
};
|
|
668
|
-
```
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
|
|
673
|
-
<DemoTitle title="Steps" desc="引导用户按照流程完成任务的导航条。">
|
|
674
|
-
#### API
|
|
675
|
-
|
|
676
|
-
<AntdApiRef url="https://ant.design/components/steps-cn/#api"></AntdApiRef>
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
## antd API
|
|
680
|
-
|
|
681
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
682
|
-
|
|
683
|
-
### Steps
|
|
684
|
-
|
|
685
|
-
整体步骤条。
|
|
686
|
-
|
|
687
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
688
|
-
|--------|--------|--------|--------|--------|
|
|
689
|
-
| className | 步骤条类名 | string | - | |
|
|
690
|
-
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 | number | 0 | |
|
|
691
|
-
| direction | 指定步骤条方向。目前支持水平（ | string | horizontal | |
|
|
692
|
-
| initial | 起始序号，从 0 开始记数 | number | 0 | |
|
|
693
|
-
| labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选 | string | horizontal | |
|
|
694
|
-
| percent | 当前 | number | - | 4.5.0 |
|
|
695
|
-
| progressDot | 点状步骤条，可以设置为一个 function，labelPlacement 将强制为 | boolean \| (iconDot, {index, status, title, description}) => ReactNode | false | |
|
|
696
|
-
| responsive | 当屏幕宽度小于 | boolean | true | |
|
|
697
|
-
| size | 指定大小，目前支持普通（ | string | default | |
|
|
698
|
-
| status | 指定当前步骤的状态，可选 | string | process | |
|
|
699
|
-
| type | 步骤条类型，可选 | string | default | inline: 5.0 |
|
|
700
|
-
| onChange | 点击切换步骤时触发 | (current) => void | - | |
|
|
701
|
-
| items | 配置选项卡内容 | | [] | 4.24.0 |
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
### `type="inline"`
|
|
705
|
-
|
|
706
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
707
|
-
|--------|--------|--------|--------|--------|
|
|
708
|
-
| className | 步骤条类名 | string | - | |
|
|
709
|
-
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 | number | 0 | |
|
|
710
|
-
| initial | 起始序号，从 0 开始记数 | number | 0 | |
|
|
711
|
-
| status | 指定当前步骤的状态，可选 | string | process | |
|
|
712
|
-
| onChange | 点击切换步骤时触发 | (current) => void | - | |
|
|
713
|
-
| items | 配置选项卡内容，不支持 | | [] | 4.24.0 |
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
### StepItem
|
|
717
|
-
|
|
718
|
-
步骤条内的每一个步骤。
|
|
719
|
-
|
|
720
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
721
|
-
|--------|--------|--------|--------|--------|
|
|
722
|
-
| description | 步骤的详情描述，可选 | ReactNode | - | |
|
|
723
|
-
| disabled | 禁用点击 | boolean | false | |
|
|
724
|
-
| icon | 步骤图标的类型，可选 | ReactNode | - | |
|
|
725
|
-
| status | 指定状态。当不配置该属性时，会使用 Steps 的 | string | wait | |
|
|
726
|
-
| subTitle | 子标题 | ReactNode | - | |
|
|
727
|
-
| title | 标题 | ReactNode | - | |
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
<DemoTitle title="Statistic" desc="展示统计数值">
|
|
733
|
-
#### API
|
|
734
|
-
|
|
735
|
-
<AntdApiRef url="https://ant.design/components/statistic-cn/#api"></AntdApiRef>
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
## antd API
|
|
739
|
-
|
|
740
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
741
|
-
|
|
742
|
-
#### Statistic
|
|
743
|
-
|
|
744
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
745
|
-
|--------|--------|--------|--------|--------|
|
|
746
|
-
| decimalSeparator | 设置小数点 | string | . | |
|
|
747
|
-
| formatter | 自定义数值展示 | (value) => ReactNode | - | |
|
|
748
|
-
| groupSeparator | 设置千分位标识符 | string | , | |
|
|
749
|
-
| loading | 数值是否加载中 | boolean | false | 4.8.0 |
|
|
750
|
-
| precision | 数值精度 | number | - | |
|
|
751
|
-
| prefix | 设置数值的前缀 | ReactNode | - | |
|
|
752
|
-
| suffix | 设置数值的后缀 | ReactNode | - | |
|
|
753
|
-
| title | 数值的标题 | ReactNode | - | |
|
|
754
|
-
| value | 数值内容 | string \| number | - | |
|
|
755
|
-
| valueStyle | 设置数值区域的样式 | CSSProperties | - | |
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
#### Statistic.Countdown <Badge type="error">Deprecated</Badge>
|
|
759
|
-
|
|
760
|
-
<!-- <Antd component="Alert" message="版本 >= 5.25.0 时请使用 Statistic.Timer 作为替代方案。" type="warning" banner="true"></Antd> -->
|
|
761
|
-
|
|
762
|
-
<!-- prettier-ignore -->
|
|
763
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
764
|
-
|--------|--------|--------|--------|--------|
|
|
765
|
-
| format | 格式化倒计时展示，参考 | string | HH:mm:ss | |
|
|
766
|
-
| prefix | 设置数值的前缀 | ReactNode | - | |
|
|
767
|
-
| suffix | 设置数值的后缀 | ReactNode | - | |
|
|
768
|
-
| title | 数值的标题 | ReactNode | - | |
|
|
769
|
-
| value | 数值内容 | number | - | |
|
|
770
|
-
| valueStyle | 设置数值区域的样式 | CSSProperties | - | |
|
|
771
|
-
| onFinish | 倒计时完成时触发 | () => void | - | |
|
|
772
|
-
| onChange | 倒计时时间变化时触发 | (value: number) => void | - | |
|
|
773
|
-
|
|
774
|
-
|
|
775
|
-
#### Statistic.Timer <Badge>5.25.0+</Badge>
|
|
776
|
-
|
|
777
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
778
|
-
|--------|--------|--------|--------|--------|
|
|
779
|
-
| type | 计时类型，正计时或者倒计时 | countdown | - | |
|
|
780
|
-
| format | 格式化倒计时展示，参考 | string | HH:mm:ss | |
|
|
781
|
-
| prefix | 设置数值的前缀 | ReactNode | - | |
|
|
782
|
-
| suffix | 设置数值的后缀 | ReactNode | - | |
|
|
783
|
-
| title | 数值的标题 | ReactNode | - | |
|
|
784
|
-
| value | 数值内容 | number | - | |
|
|
785
|
-
| valueStyle | 设置数值区域的样式 | CSSProperties | - | |
|
|
786
|
-
| onFinish | 倒计时完成时触发, 指定为 | () => void | - | |
|
|
787
|
-
| onChange | 倒计时时间变化时触发 | (value: number) => void | - | |
|
|
788
|
-
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
<DemoTitle title="Spinner" desc="指示页面或区块的加载中状态">
|
|
793
|
-
#### API
|
|
794
|
-
|
|
795
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
796
|
-
|--------|--------|--------|--------|
|
|
797
|
-
| tip | indicator下方的tip | React.ReactNode | - |
|
|
798
|
-
| indicator | 自定义indicator，用于展示progress的百分比和加载文案 | React.ReactNode | - |
|
|
799
|
-
| children | 被spinner包裹的子元素 | React.ReactNode | - |
|
|
800
|
-
| style | spinner最外层的样式 | React.CSSProperties | - |
|
|
801
|
-
| className | spinner的类名 | string | - |
|
|
802
|
-
| percent | 进度条的百分比 | number | - |
|
|
803
|
-
| spinning | 是否为加载中状态 | boolean | false |
|
|
804
|
-
| showProgress | 是否显示进度条，如果为true，不需要手动在children中添加Progress组件 | boolean | false |
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
<DemoTitle title="Slider" desc="滑动型输入器，展示当前值和可选范围。">
|
|
810
|
-
#### API
|
|
811
|
-
|
|
812
|
-
<AntdApiRef url="https://ant.design/components/slider-cn/#api"></AntdApiRef>
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
## antd API
|
|
816
|
-
|
|
817
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
817
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
818
818
|
|
|
819
819
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
820
820
|
|--------|--------|--------|--------|--------|
|
|
@@ -870,142 +870,6 @@ type RangeDisabledTime = (
|
|
|
870
870
|
|
|
871
871
|
|
|
872
872
|
|
|
873
|
-
<DemoTitle title="Skeleton" desc="在内容加载时提供占位图形展示。">
|
|
874
|
-
## antd API
|
|
875
|
-
|
|
876
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
877
|
-
|
|
878
|
-
### Skeleton
|
|
879
|
-
|
|
880
|
-
| 属性 | 说明 | 类型 | 默认值 |
|
|
881
|
-
|--------|--------|--------|--------|
|
|
882
|
-
| active | 是否展示动画效果 | boolean | false |
|
|
883
|
-
| avatar | 是否显示头像占位图 | boolean \| | false |
|
|
884
|
-
| loading | 为 true 时，显示占位图。反之则直接展示子组件 | boolean | - |
|
|
885
|
-
| paragraph | 是否显示段落占位图 | boolean \| | true |
|
|
886
|
-
| round | 为 true 时，段落和标题显示圆角 | boolean | false |
|
|
887
|
-
| title | 是否显示标题占位图 | boolean \| | true |
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
### SkeletonAvatarProps
|
|
891
|
-
|
|
892
|
-
| 属性 | 说明 | 类型 | 默认值 |
|
|
893
|
-
|--------|--------|--------|--------|
|
|
894
|
-
| active | 是否展示动画效果，仅在单独使用头像骨架时生效 | boolean | false |
|
|
895
|
-
| shape | 指定头像的形状 | circle | - |
|
|
896
|
-
| size | 设置头像占位图的大小 | number \| | - |
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
### SkeletonTitleProps
|
|
900
|
-
|
|
901
|
-
| 属性 | 说明 | 类型 | 默认值 |
|
|
902
|
-
|--------|--------|--------|--------|
|
|
903
|
-
| width | 设置标题占位图的宽度 | number \| string | - |
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
### SkeletonParagraphProps
|
|
907
|
-
|
|
908
|
-
| 属性 | 说明 | 类型 | 默认值 |
|
|
909
|
-
|--------|--------|--------|--------|
|
|
910
|
-
| rows | 设置段落占位图的行数 | number | - |
|
|
911
|
-
| width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \| string \| Array | - |
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
### SkeletonButtonProps
|
|
915
|
-
|
|
916
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
917
|
-
|--------|--------|--------|--------|--------|
|
|
918
|
-
| active | 是否展示动画效果 | boolean | false | |
|
|
919
|
-
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | 4.17.0 |
|
|
920
|
-
| shape | 指定按钮的形状 | circle | - | |
|
|
921
|
-
| size | 设置按钮的大小 | large | - | |
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
### SkeletonInputProps
|
|
925
|
-
|
|
926
|
-
| 属性 | 说明 | 类型 | 默认值 |
|
|
927
|
-
|--------|--------|--------|--------|
|
|
928
|
-
| active | 是否展示动画效果 | boolean | false |
|
|
929
|
-
| size | 设置输入框的大小 | large | - |
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
<DemoTitle title="RadioButton" desc="用于在多个备选项中选中单个状态。">
|
|
935
|
-
#### API
|
|
936
|
-
|
|
937
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
938
|
-
|--------|--------|--------|--------|
|
|
939
|
-
| bordered | 边框 | boolean | false |
|
|
940
|
-
| ghost | 按钮背景色类型 | boolean | true |
|
|
941
|
-
| gap | 间距 | number | 12 px |
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
<AntdApiRef url="https://ant.design/components/radio-cn/#api"></AntdApiRef>
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
## antd API
|
|
948
|
-
|
|
949
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
950
|
-
|
|
951
|
-
### Radio/Radio.Button
|
|
952
|
-
|
|
953
|
-
<!-- prettier-ignore -->
|
|
954
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
955
|
-
|--------|--------|--------|--------|
|
|
956
|
-
| autoFocus | 自动获取焦点 | boolean | false |
|
|
957
|
-
| checked | 指定当前是否选中 | boolean | false |
|
|
958
|
-
| defaultChecked | 初始是否选中 | boolean | false |
|
|
959
|
-
| disabled | 禁用 Radio | boolean | false |
|
|
960
|
-
| value | 根据 value 进行比较，判断是否选中 | any | - |
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
### Radio.Group
|
|
964
|
-
|
|
965
|
-
单选框组合，用于包裹一组 `Radio`。
|
|
966
|
-
|
|
967
|
-
<!-- prettier-ignore -->
|
|
968
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
969
|
-
|--------|--------|--------|--------|--------|
|
|
970
|
-
| buttonStyle | RadioButton 的风格样式，目前有描边和填色两种风格 | outline | outline | | |
|
|
971
|
-
| defaultValue | 默认选中的值 | any | - | | |
|
|
972
|
-
| disabled | 禁选所有子单选器 | boolean | false | | |
|
|
973
|
-
| name | RadioGroup 下所有 | string | - | | |
|
|
974
|
-
| options | 以配置形式设置子元素 | string[] \| number[] \| Array< | - | | |
|
|
975
|
-
| optionType | 用于设置 Radio | default | default | 4.4.0 | |
|
|
976
|
-
| size | 大小，只对按钮样式生效 | large | - | | |
|
|
977
|
-
| value | 用于设置当前选中的值 | any | - | | |
|
|
978
|
-
| block | 将 RadioGroup 宽度调整为其父宽度的选项 | boolean | false | 5.21.0 | |
|
|
979
|
-
| onChange | 选项变化时的回调函数 | function(e:Event) | - | | |
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
### CheckboxOptionType
|
|
983
|
-
|
|
984
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
985
|
-
|--------|--------|--------|--------|--------|
|
|
986
|
-
| label | 用于作为 Radio 选项展示的文本 | string | - | 4.4.0 |
|
|
987
|
-
| value | 关联 Radio 选项的值 | string | - | 4.4.0 |
|
|
988
|
-
| style | 应用到 Radio 选项的 style | React.CSSProperties | - | 4.4.0 |
|
|
989
|
-
| className | Radio 选项的类名 | string | - | 5.25.0 |
|
|
990
|
-
| disabled | 指定 Radio 选项是否要禁用 | boolean | false | 4.4.0 |
|
|
991
|
-
| title | 添加 Title 属性值 | string | - | 4.4.0 |
|
|
992
|
-
| id | 添加 Radio Id 属性值 | string | - | 4.4.0 |
|
|
993
|
-
| onChange | 当 Radio Group 的值发送改变时触发 | (e: CheckboxChangeEvent) => void; | - | 4.4.0 |
|
|
994
|
-
| required | 指定 Radio 选项是否必填 | boolean | false | 4.4.0 |
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
## 方法
|
|
998
|
-
|
|
999
|
-
### Radio
|
|
1000
|
-
|
|
1001
|
-
| 名称 | 描述 |
|
|
1002
|
-
|--------|--------|
|
|
1003
|
-
| blur() | 移除焦点 |
|
|
1004
|
-
| focus() | 获取焦点 |
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
873
|
<DemoTitle title="Select" desc="下拉选择器">
|
|
1010
874
|
## antd API
|
|
1011
875
|
|
|
@@ -1104,6 +968,67 @@ type RangeDisabledTime = (
|
|
|
1104
968
|
|
|
1105
969
|
|
|
1106
970
|
|
|
971
|
+
<DemoTitle title="Skeleton" desc="在内容加载时提供占位图形展示。">
|
|
972
|
+
## antd API
|
|
973
|
+
|
|
974
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
975
|
+
|
|
976
|
+
### Skeleton
|
|
977
|
+
|
|
978
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
979
|
+
|--------|--------|--------|--------|
|
|
980
|
+
| active | 是否展示动画效果 | boolean | false |
|
|
981
|
+
| avatar | 是否显示头像占位图 | boolean \| | false |
|
|
982
|
+
| loading | 为 true 时，显示占位图。反之则直接展示子组件 | boolean | - |
|
|
983
|
+
| paragraph | 是否显示段落占位图 | boolean \| | true |
|
|
984
|
+
| round | 为 true 时，段落和标题显示圆角 | boolean | false |
|
|
985
|
+
| title | 是否显示标题占位图 | boolean \| | true |
|
|
986
|
+
|
|
987
|
+
|
|
988
|
+
### SkeletonAvatarProps
|
|
989
|
+
|
|
990
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
991
|
+
|--------|--------|--------|--------|
|
|
992
|
+
| active | 是否展示动画效果，仅在单独使用头像骨架时生效 | boolean | false |
|
|
993
|
+
| shape | 指定头像的形状 | circle | - |
|
|
994
|
+
| size | 设置头像占位图的大小 | number \| | - |
|
|
995
|
+
|
|
996
|
+
|
|
997
|
+
### SkeletonTitleProps
|
|
998
|
+
|
|
999
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
1000
|
+
|--------|--------|--------|--------|
|
|
1001
|
+
| width | 设置标题占位图的宽度 | number \| string | - |
|
|
1002
|
+
|
|
1003
|
+
|
|
1004
|
+
### SkeletonParagraphProps
|
|
1005
|
+
|
|
1006
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
1007
|
+
|--------|--------|--------|--------|
|
|
1008
|
+
| rows | 设置段落占位图的行数 | number | - |
|
|
1009
|
+
| width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \| string \| Array | - |
|
|
1010
|
+
|
|
1011
|
+
|
|
1012
|
+
### SkeletonButtonProps
|
|
1013
|
+
|
|
1014
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1015
|
+
|--------|--------|--------|--------|--------|
|
|
1016
|
+
| active | 是否展示动画效果 | boolean | false | |
|
|
1017
|
+
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | 4.17.0 |
|
|
1018
|
+
| shape | 指定按钮的形状 | circle | - | |
|
|
1019
|
+
| size | 设置按钮的大小 | large | - | |
|
|
1020
|
+
|
|
1021
|
+
|
|
1022
|
+
### SkeletonInputProps
|
|
1023
|
+
|
|
1024
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
1025
|
+
|--------|--------|--------|--------|
|
|
1026
|
+
| active | 是否展示动画效果 | boolean | false |
|
|
1027
|
+
| size | 设置输入框的大小 | large | - |
|
|
1028
|
+
|
|
1029
|
+
|
|
1030
|
+
|
|
1031
|
+
|
|
1107
1032
|
<DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。">
|
|
1108
1033
|
## API
|
|
1109
1034
|
|
|
@@ -1116,61 +1041,84 @@ type RangeDisabledTime = (
|
|
|
1116
1041
|
|
|
1117
1042
|
|
|
1118
1043
|
|
|
1119
|
-
<DemoTitle title="
|
|
1044
|
+
<DemoTitle title="Radio" desc="用于在多个备选项中选中单个状态。">
|
|
1045
|
+
#### API
|
|
1046
|
+
|
|
1047
|
+
<AntdApiRef url="https://ant.design/components/radio-cn/#api"></AntdApiRef>
|
|
1048
|
+
|
|
1049
|
+
|
|
1120
1050
|
## antd API
|
|
1121
1051
|
|
|
1122
1052
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1123
1053
|
|
|
1124
|
-
|
|
1054
|
+
### Radio/Radio.Button
|
|
1125
1055
|
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
|
1130
|
-
|
|
|
1131
|
-
|
|
|
1132
|
-
|
|
|
1133
|
-
|
|
|
1134
|
-
| success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - | - |
|
|
1135
|
-
| trailColor | 未完成的分段的颜色 | string | - | - |
|
|
1136
|
-
| type | 类型，可选 | string | line | - |
|
|
1137
|
-
| size | 进度条的尺寸 | number \| [number \| string, number] \| { width: number, height: number } \| "small" \| "default" | "default" | 5.3.0, Object: 5.18.0 |
|
|
1056
|
+
<!-- prettier-ignore -->
|
|
1057
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
1058
|
+
|--------|--------|--------|--------|
|
|
1059
|
+
| autoFocus | 自动获取焦点 | boolean | false |
|
|
1060
|
+
| checked | 指定当前是否选中 | boolean | false |
|
|
1061
|
+
| defaultChecked | 初始是否选中 | boolean | false |
|
|
1062
|
+
| disabled | 禁用 Radio | boolean | false |
|
|
1063
|
+
| value | 根据 value 进行比较，判断是否选中 | any | - |
|
|
1138
1064
|
|
|
1139
1065
|
|
|
1140
|
-
###
|
|
1066
|
+
### Radio.Group
|
|
1141
1067
|
|
|
1142
|
-
|
|
1068
|
+
单选框组合，用于包裹一组 `Radio`。
|
|
1069
|
+
|
|
1070
|
+
<!-- prettier-ignore -->
|
|
1071
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1143
1072
|
|--------|--------|--------|--------|--------|
|
|
1144
|
-
|
|
|
1145
|
-
|
|
|
1146
|
-
|
|
|
1147
|
-
|
|
|
1073
|
+
| buttonStyle | RadioButton 的风格样式，目前有描边和填色两种风格 | outline | outline | | |
|
|
1074
|
+
| defaultValue | 默认选中的值 | any | - | | |
|
|
1075
|
+
| disabled | 禁选所有子单选器 | boolean | false | | |
|
|
1076
|
+
| name | RadioGroup 下所有 | string | - | | |
|
|
1077
|
+
| options | 以配置形式设置子元素 | string[] \| number[] \| Array< | - | | |
|
|
1078
|
+
| optionType | 用于设置 Radio | default | default | 4.4.0 | |
|
|
1079
|
+
| size | 大小，只对按钮样式生效 | large | - | | |
|
|
1080
|
+
| value | 用于设置当前选中的值 | any | - | | |
|
|
1081
|
+
| block | 将 RadioGroup 宽度调整为其父宽度的选项 | boolean | false | 5.21.0 | |
|
|
1082
|
+
| onChange | 选项变化时的回调函数 | function(e:Event) | - | | |
|
|
1148
1083
|
|
|
1149
1084
|
|
|
1150
|
-
###
|
|
1085
|
+
### CheckboxOptionType
|
|
1151
1086
|
|
|
1152
1087
|
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1153
1088
|
|--------|--------|--------|--------|--------|
|
|
1154
|
-
|
|
|
1155
|
-
|
|
|
1156
|
-
|
|
|
1089
|
+
| label | 用于作为 Radio 选项展示的文本 | string | - | 4.4.0 |
|
|
1090
|
+
| value | 关联 Radio 选项的值 | string | - | 4.4.0 |
|
|
1091
|
+
| style | 应用到 Radio 选项的 style | React.CSSProperties | - | 4.4.0 |
|
|
1092
|
+
| className | Radio 选项的类名 | string | - | 5.25.0 |
|
|
1093
|
+
| disabled | 指定 Radio 选项是否要禁用 | boolean | false | 4.4.0 |
|
|
1094
|
+
| title | 添加 Title 属性值 | string | - | 4.4.0 |
|
|
1095
|
+
| id | 添加 Radio Id 属性值 | string | - | 4.4.0 |
|
|
1096
|
+
| onChange | 当 Radio Group 的值发送改变时触发 | (e: CheckboxChangeEvent) => void; | - | 4.4.0 |
|
|
1097
|
+
| required | 指定 Radio 选项是否必填 | boolean | false | 4.4.0 |
|
|
1157
1098
|
|
|
1158
1099
|
|
|
1159
|
-
|
|
1100
|
+
## 方法
|
|
1160
1101
|
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
|
1164
|
-
|
|
1165
|
-
|
|
|
1166
|
-
|
|
|
1102
|
+
### Radio
|
|
1103
|
+
|
|
1104
|
+
| 名称 | 描述 |
|
|
1105
|
+
|--------|--------|
|
|
1106
|
+
| blur() | 移除焦点 |
|
|
1107
|
+
| focus() | 获取焦点 |
|
|
1167
1108
|
|
|
1168
1109
|
|
|
1169
1110
|
|
|
1170
1111
|
|
|
1171
|
-
<DemoTitle title="
|
|
1112
|
+
<DemoTitle title="RadioButton" desc="用于在多个备选项中选中单个状态。">
|
|
1172
1113
|
#### API
|
|
1173
1114
|
|
|
1115
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1116
|
+
|--------|--------|--------|--------|
|
|
1117
|
+
| bordered | 边框 | boolean | false |
|
|
1118
|
+
| ghost | 按钮背景色类型 | boolean | true |
|
|
1119
|
+
| gap | 间距 | number | 12 px |
|
|
1120
|
+
|
|
1121
|
+
|
|
1174
1122
|
<AntdApiRef url="https://ant.design/components/radio-cn/#api"></AntdApiRef>
|
|
1175
1123
|
|
|
1176
1124
|
|
|
@@ -1236,6 +1184,58 @@ type RangeDisabledTime = (
|
|
|
1236
1184
|
|
|
1237
1185
|
|
|
1238
1186
|
|
|
1187
|
+
<DemoTitle title="Progress" desc="用于指示任务的完成进度">
|
|
1188
|
+
## antd API
|
|
1189
|
+
|
|
1190
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1191
|
+
|
|
1192
|
+
各类型共用的属性。
|
|
1193
|
+
|
|
1194
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1195
|
+
|--------|--------|--------|--------|--------|
|
|
1196
|
+
| format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent + | - |
|
|
1197
|
+
| percent | 百分比 | number | 0 | - |
|
|
1198
|
+
| showInfo | 是否显示进度数值或状态图标 | boolean | true | - |
|
|
1199
|
+
| status | 状态，可选： | string | - | - |
|
|
1200
|
+
| strokeColor | 进度条的色彩 | string | - | - |
|
|
1201
|
+
| strokeLinecap | 进度条的样式 | round | round | - |
|
|
1202
|
+
| success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - | - |
|
|
1203
|
+
| trailColor | 未完成的分段的颜色 | string | - | - |
|
|
1204
|
+
| type | 类型，可选 | string | line | - |
|
|
1205
|
+
| size | 进度条的尺寸 | number \| [number \| string, number] \| { width: number, height: number } \| "small" \| "default" | "default" | 5.3.0, Object: 5.18.0 |
|
|
1206
|
+
|
|
1207
|
+
|
|
1208
|
+
### `type="line"`
|
|
1209
|
+
|
|
1210
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1211
|
+
|--------|--------|--------|--------|--------|
|
|
1212
|
+
| steps | 进度条总共步数 | number | - | - |
|
|
1213
|
+
| rounding | 用于四舍五入数值的函数 | (step: number) => number | Math.round | 5.24.0 |
|
|
1214
|
+
| strokeColor | 进度条的色彩，传入 object 时为渐变。当有 | string \| string[] \| { from: string; to: string; direction: string } | - | 4.21.0: |
|
|
1215
|
+
| percentPosition | 进度数值位置，传入对象， | { align: string; type: string } | { align: "end", type: "outer" } | 5.18.0 |
|
|
1216
|
+
|
|
1217
|
+
|
|
1218
|
+
### `type="circle"`
|
|
1219
|
+
|
|
1220
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1221
|
+
|--------|--------|--------|--------|--------|
|
|
1222
|
+
| steps | 进度条总共步数，传入 object 时，count 指步数，gap 指间隔大小。传 number 类型时，gap 默认为 2。 | number \| { count: number, gap: number } | - | 5.16.0 |
|
|
1223
|
+
| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| { number%: string } | - | - |
|
|
1224
|
+
| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |
|
|
1225
|
+
|
|
1226
|
+
|
|
1227
|
+
### `type="dashboard"`
|
|
1228
|
+
|
|
1229
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1230
|
+
|--------|--------|--------|--------|--------|
|
|
1231
|
+
| steps | 进度条总共步数，传入 object 时，count 指步数，gap 指间隔大小。传 number 类型时，gap 默认为 2。 | number \| { count: number, gap: number } | - | 5.16.0 |
|
|
1232
|
+
| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 295 | number | 75 | - |
|
|
1233
|
+
| gapPosition | 仪表盘进度条缺口位置 | top | bottom | - |
|
|
1234
|
+
| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |
|
|
1235
|
+
|
|
1236
|
+
|
|
1237
|
+
|
|
1238
|
+
|
|
1239
1239
|
<DemoTitle title="MdEditor" desc="提示词编辑器，可以高亮 Markdown 的语法，支持自定义槽位变量的插入">
|
|
1240
1240
|
#### API
|
|
1241
1241
|
|
|
@@ -1253,10 +1253,15 @@ type RangeDisabledTime = (
|
|
|
1253
1253
|
|
|
1254
1254
|
|
|
1255
1255
|
|
|
1256
|
-
<DemoTitle title="
|
|
1256
|
+
<DemoTitle title="Popconfirm" desc="点击元素，弹出气泡式的确认框。">
|
|
1257
1257
|
#### API
|
|
1258
1258
|
|
|
1259
|
-
|
|
1259
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1260
|
+
|--------|--------|--------|--------|
|
|
1261
|
+
| type | 类型 | 'info' \| 'warning' \| 'error' \| 'success' \| 'confirm' | 'confirm' |
|
|
1262
|
+
|
|
1263
|
+
|
|
1264
|
+
<AntdApiRef url="https://ant.design/components/popconfirm-cn/#api"></AntdApiRef>
|
|
1260
1265
|
|
|
1261
1266
|
|
|
1262
1267
|
## antd API
|
|
@@ -1265,8 +1270,19 @@ type RangeDisabledTime = (
|
|
|
1265
1270
|
|
|
1266
1271
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1267
1272
|
|--------|--------|--------|--------|--------|
|
|
1268
|
-
|
|
|
1269
|
-
|
|
|
1273
|
+
| cancelButtonProps | cancel 按钮 props | | - | |
|
|
1274
|
+
| cancelText | 取消按钮文字 | string | 取消 | |
|
|
1275
|
+
| disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false | |
|
|
1276
|
+
| icon | 自定义弹出气泡 Icon 图标 | ReactNode | | |
|
|
1277
|
+
| okButtonProps | ok 按钮 props | | - | |
|
|
1278
|
+
| okText | 确认按钮文字 | string | 确定 | |
|
|
1279
|
+
| okType | 确认按钮类型 | string | primary | |
|
|
1280
|
+
| showCancel | 是否显示取消按钮 | boolean | true | 4.18.0 |
|
|
1281
|
+
| title | 确认框标题 | ReactNode \| () => ReactNode | - | |
|
|
1282
|
+
| description | 确认内容的详细描述 | ReactNode \| () => ReactNode | - | 5.1.0 |
|
|
1283
|
+
| onCancel | 点击取消的回调 | function(e) | - | |
|
|
1284
|
+
| onConfirm | 点击确认的回调 | function(e) | - | |
|
|
1285
|
+
| onPopupClick | 弹出气泡点击事件 | function(e) | - | 5.5.0 |
|
|
1270
1286
|
|
|
1271
1287
|
|
|
1272
1288
|
<!-- 共同的 API -->
|
|
@@ -1291,21 +1307,13 @@ type RangeDisabledTime = (
|
|
|
1291
1307
|
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
1292
1308
|
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
1293
1309
|
|
|
1294
|
-
## 注意
|
|
1295
|
-
|
|
1296
|
-
请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
|
|
1297
1310
|
|
|
1298
1311
|
|
|
1299
1312
|
|
|
1300
|
-
<DemoTitle title="
|
|
1313
|
+
<DemoTitle title="Popover" desc="点击/鼠标移入元素，弹出气泡式的卡片浮层">
|
|
1301
1314
|
#### API
|
|
1302
1315
|
|
|
1303
|
-
|
|
1304
|
-
|--------|--------|--------|--------|
|
|
1305
|
-
| type | 类型 | 'info' \| 'warning' \| 'error' \| 'success' \| 'confirm' | 'confirm' |
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
<AntdApiRef url="https://ant.design/components/popconfirm-cn/#api"></AntdApiRef>
|
|
1316
|
+
<AntdApiRef url="https://ant.design/components/popover-cn/#api"></AntdApiRef>
|
|
1309
1317
|
|
|
1310
1318
|
|
|
1311
1319
|
## antd API
|
|
@@ -1314,19 +1322,8 @@ type RangeDisabledTime = (
|
|
|
1314
1322
|
|
|
1315
1323
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1316
1324
|
|--------|--------|--------|--------|--------|
|
|
1317
|
-
|
|
|
1318
|
-
|
|
|
1319
|
-
| disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false | |
|
|
1320
|
-
| icon | 自定义弹出气泡 Icon 图标 | ReactNode | | |
|
|
1321
|
-
| okButtonProps | ok 按钮 props | | - | |
|
|
1322
|
-
| okText | 确认按钮文字 | string | 确定 | |
|
|
1323
|
-
| okType | 确认按钮类型 | string | primary | |
|
|
1324
|
-
| showCancel | 是否显示取消按钮 | boolean | true | 4.18.0 |
|
|
1325
|
-
| title | 确认框标题 | ReactNode \| () => ReactNode | - | |
|
|
1326
|
-
| description | 确认内容的详细描述 | ReactNode \| () => ReactNode | - | 5.1.0 |
|
|
1327
|
-
| onCancel | 点击取消的回调 | function(e) | - | |
|
|
1328
|
-
| onConfirm | 点击确认的回调 | function(e) | - | |
|
|
1329
|
-
| onPopupClick | 弹出气泡点击事件 | function(e) | - | 5.5.0 |
|
|
1325
|
+
| content | 卡片内容 | ReactNode \| () => ReactNode | - | |
|
|
1326
|
+
| title | 卡片标题 | ReactNode \| () => ReactNode | - | |
|
|
1330
1327
|
|
|
1331
1328
|
|
|
1332
1329
|
<!-- 共同的 API -->
|
|
@@ -1351,6 +1348,9 @@ type RangeDisabledTime = (
|
|
|
1351
1348
|
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
1352
1349
|
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
1353
1350
|
|
|
1351
|
+
## 注意
|
|
1352
|
+
|
|
1353
|
+
请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
|
|
1354
1354
|
|
|
1355
1355
|
|
|
1356
1356
|
|
|
@@ -1809,13 +1809,148 @@ message.config({
|
|
|
1809
1809
|
| onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 |
|
|
1810
1810
|
|
|
1811
1811
|
|
|
1812
|
-
## Ref
|
|
1812
|
+
## Ref
|
|
1813
|
+
|
|
1814
|
+
| 名称 | 说明 | 参数 | 版本 |
|
|
1815
|
+
|--------|--------|--------|--------|
|
|
1816
|
+
| blur() | 移除焦点 | - | |
|
|
1817
|
+
| focus() | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | cursor - 5.22.0 |
|
|
1818
|
+
| nativeElement | 获取原生 DOM 元素 | - | 5.17.3 |
|
|
1819
|
+
|
|
1820
|
+
|
|
1821
|
+
|
|
1822
|
+
|
|
1823
|
+
<DemoTitle title="Input" desc="通过鼠标或键盘输入内容，为表单提供输入字段的基础容器。。">
|
|
1824
|
+
#### API
|
|
1825
|
+
|
|
1826
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1827
|
+
|--------|--------|--------|--------|
|
|
1828
|
+
| shape | 形态 | 'default' \| 'round' | default 默认 |
|
|
1829
|
+
|
|
1830
|
+
|
|
1831
|
+
<AntdApiRef url="https://ant.design/components/input-cn/#api"></AntdApiRef>
|
|
1832
|
+
|
|
1833
|
+
|
|
1834
|
+
## antd API
|
|
1835
|
+
|
|
1836
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1837
|
+
|
|
1838
|
+
### Input
|
|
1839
|
+
|
|
1840
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1841
|
+
|--------|--------|--------|--------|--------|
|
|
1842
|
+
| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | |
|
|
1843
|
+
| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | |
|
|
1844
|
+
| allowClear | 可以点击清除图标删除内容 | boolean \| { clearIcon: ReactNode } | - | |
|
|
1845
|
+
| classNames | 语义化结构 class | Record< | - | 5.4.0 |
|
|
1846
|
+
| count | 字符计数配置 | | - | 5.10.0 |
|
|
1847
|
+
| defaultValue | 输入框默认内容 | string | - | |
|
|
1848
|
+
| disabled | 是否禁用状态，默认为 false | boolean | false | |
|
|
1849
|
+
| id | 输入框的 id | string | - | |
|
|
1850
|
+
| maxLength | 最大长度 | number | - | |
|
|
1851
|
+
| prefix | 带有前缀图标的 input | ReactNode | - | |
|
|
1852
|
+
| showCount | 是否展示字数 | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 info.value: 4.23.0 |
|
|
1853
|
+
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
1854
|
+
| styles | 语义化结构 style | Record< | - | 5.4.0 |
|
|
1855
|
+
| size | 控件大小。注：标准表单内的输入框大小限制为 | large | - | |
|
|
1856
|
+
| suffix | 带有后缀图标的 input | ReactNode | - | |
|
|
1857
|
+
| type | 声明 input 类型，同原生 input 标签的 type 属性，见： | string | text | |
|
|
1858
|
+
| value | 输入框内容 | string | - | |
|
|
1859
|
+
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
1860
|
+
| onChange | 输入框内容变化时的回调 | function(e) | - | |
|
|
1861
|
+
| onPressEnter | 按下回车的回调 | function(e) | - | |
|
|
1862
|
+
| onClear | 按下清除按钮的回调 | () => void | - | 5.20.0 |
|
|
1863
|
+
|
|
1864
|
+
|
|
1865
|
+
如果 `Input` 在 `Form.Item` 内，并且 `Form.Item` 设置了 `id` 属性，则 `value` `defaultValue` 和 `id` 属性会被自动设置。
|
|
1866
|
+
|
|
1867
|
+
Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes) 一致。
|
|
1868
|
+
|
|
1869
|
+
#### CountConfig
|
|
1870
|
+
|
|
1871
|
+
|
|
1872
|
+
```tsx
|
|
1873
|
+
interface CountConfig {
|
|
1874
|
+
// 最大字符数，不同于原生 `maxLength`，超出后标红但不会截断
|
|
1875
|
+
max?: number;
|
|
1876
|
+
// 自定义字符计数，例如标准 emoji 长度大于 1，可以自定义计数策略将其改为 1
|
|
1877
|
+
strategy?: (value: string) => number;
|
|
1878
|
+
// 同 `showCount`
|
|
1879
|
+
show?: boolean | ((args: { value: string; count: number; maxLength?: number }) => ReactNode);
|
|
1880
|
+
// 当字符数超出 `count.max` 时的自定义裁剪逻辑，不配置时不进行裁剪
|
|
1881
|
+
exceedFormatter?: (value: string, config: { max: number }) => string;
|
|
1882
|
+
}
|
|
1883
|
+
```
|
|
1884
|
+
|
|
1885
|
+
|
|
1886
|
+
### Input.TextArea
|
|
1887
|
+
|
|
1888
|
+
同 Input 属性，外加：
|
|
1889
|
+
|
|
1890
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1891
|
+
|--------|--------|--------|--------|--------|
|
|
1892
|
+
| autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false | |
|
|
1893
|
+
| classNames | 语义化结构 class | Record< | - | 5.4.0 |
|
|
1894
|
+
| styles | 语义化结构 style | Record< | - | 5.4.0 |
|
|
1895
|
+
|
|
1896
|
+
|
|
1897
|
+
`Input.TextArea` 的其他属性和浏览器自带的 [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) 一致。
|
|
1898
|
+
|
|
1899
|
+
### Input.Search
|
|
1900
|
+
|
|
1901
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
1902
|
+
|--------|--------|--------|--------|
|
|
1903
|
+
| enterButton | 是否有确认按钮，可设为按钮文字。该属性会与 | ReactNode | false |
|
|
1904
|
+
| loading | 搜索 loading | boolean | false |
|
|
1905
|
+
| onSearch | 点击搜索图标、清除图标，或按下回车键时的回调 | function(value, event, { source: "input" \| "clear" }) | - |
|
|
1906
|
+
|
|
1907
|
+
|
|
1908
|
+
其余属性和 Input 一致。
|
|
1909
|
+
|
|
1910
|
+
### Input.Password
|
|
1911
|
+
|
|
1912
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1913
|
+
|--------|--------|--------|--------|--------|
|
|
1914
|
+
| iconRender | 自定义切换按钮 | (visible) => ReactNode | (visible) => (visible ? : ) | 4.3.0 |
|
|
1915
|
+
| visibilityToggle | 是否显示切换按钮或者控制密码显隐 | boolean \| | true | |
|
|
1916
|
+
|
|
1917
|
+
|
|
1918
|
+
### Input.OTP
|
|
1919
|
+
|
|
1920
|
+
`5.16.0` 新增。
|
|
1921
|
+
|
|
1922
|
+
开发者注意事项：当 `mask` 属性的类型为 string 时，我们强烈推荐接收单个字符或单个 emoji，如果传入多个字符或多个 emoji，则会在控制台抛出警告。
|
|
1923
|
+
|
|
1924
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1925
|
+
|--------|--------|--------|--------|--------|
|
|
1926
|
+
| defaultValue | 默认值 | string | - | |
|
|
1927
|
+
| disabled | 是否禁用 | boolean | false | |
|
|
1928
|
+
| formatter | 格式化展示，留空字段会被 | (value: string) => string | - | |
|
|
1929
|
+
| separator | 分隔符，在指定索引的输入框后渲染分隔符 | ReactNode \|((i: number) => ReactNode) | - | 5.24.0 |
|
|
1930
|
+
| mask | 自定义展示，和 | boolean \| string | false | 5.17.0 |
|
|
1931
|
+
| length | 输入元素数量 | number | 6 | |
|
|
1932
|
+
| status | 设置校验状态 | 'error' \| 'warning' | - | |
|
|
1933
|
+
| size | 输入框大小 | small | middle | |
|
|
1934
|
+
| variant | 形态变体 | outlined | outlined | underlined |
|
|
1935
|
+
| value | 输入框内容 | string | - | |
|
|
1936
|
+
| onChange | 当输入框内容全部填充时触发回调 | (value: string) => void | - | |
|
|
1937
|
+
| onInput | 输入值变化时触发的回调 | (value: string[]) => void | - | 5.22.0 |
|
|
1938
|
+
|
|
1939
|
+
|
|
1940
|
+
#### VisibilityToggle
|
|
1941
|
+
|
|
1942
|
+
| Property | Description | Type | Default | Version |
|
|
1943
|
+
|--------|--------|--------|--------|--------|
|
|
1944
|
+
| visible | 用于手动控制密码显隐 | boolean | false | 4.24 |
|
|
1945
|
+
| onVisibleChange | 显隐密码的回调 | (visible) => void | - | 4.24 |
|
|
1946
|
+
|
|
1947
|
+
|
|
1948
|
+
#### Input Methods
|
|
1813
1949
|
|
|
1814
1950
|
| 名称 | 说明 | 参数 | 版本 |
|
|
1815
1951
|
|--------|--------|--------|--------|
|
|
1816
|
-
| blur
|
|
1817
|
-
| focus
|
|
1818
|
-
| nativeElement | 获取原生 DOM 元素 | - | 5.17.3 |
|
|
1952
|
+
| blur | 取消焦点 | - | |
|
|
1953
|
+
| focus | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | option - 4.10.0 |
|
|
1819
1954
|
|
|
1820
1955
|
|
|
1821
1956
|
|
|
@@ -1987,184 +2122,253 @@ type TransformAction =
|
|
|
1987
2122
|
|
|
1988
2123
|
|
|
1989
2124
|
|
|
1990
|
-
<DemoTitle title="
|
|
2125
|
+
<DemoTitle title="IconButton" desc="以图标为核心的轻量按钮组件，用于触发操作。">
|
|
1991
2126
|
#### API
|
|
1992
2127
|
|
|
1993
2128
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1994
2129
|
|--------|--------|--------|--------|
|
|
1995
|
-
|
|
|
2130
|
+
| icon | icon | ReactNode \| string | |
|
|
2131
|
+
| iconType | 百炼图标iconfont的key，依赖百炼的iconFont，例如bl-icon-add | string | |
|
|
2132
|
+
| bordered | 边框 | boolean | true |
|
|
2133
|
+
| shape | 形状 | 'default' \| 'circle' | 'default' |
|
|
1996
2134
|
|
|
1997
2135
|
|
|
1998
|
-
|
|
2136
|
+
## antd API
|
|
2137
|
+
|
|
2138
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2139
|
+
|
|
2140
|
+
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
2141
|
+
|
|
2142
|
+
按钮的属性说明如下：
|
|
2143
|
+
|
|
2144
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
2145
|
+
|--------|--------|--------|--------|--------|
|
|
2146
|
+
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
2147
|
+
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
2148
|
+
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
2149
|
+
| color | 设置按钮的颜色 | default | - | default |
|
|
2150
|
+
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
2151
|
+
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
2152
|
+
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
2153
|
+
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2154
|
+
| htmlType | 设置 | submit | button | |
|
|
2155
|
+
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
2156
|
+
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
2157
|
+
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
2158
|
+
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
2159
|
+
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
2160
|
+
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
2161
|
+
|
|
2162
|
+
|
|
2163
|
+
支持原生 button 的其他所有属性。
|
|
2164
|
+
|
|
2165
|
+
### PresetColors
|
|
2166
|
+
|
|
2167
|
+
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
2168
|
+
|
|
2169
|
+
|
|
2170
|
+
|
|
2171
|
+
<DemoTitle title="FloatButton" desc="用于网站上的全局功能；无论浏览到何处都可以看见的按钮。">
|
|
2172
|
+
#### API
|
|
2173
|
+
|
|
2174
|
+
<AntdApiRef url="https://ant.design/components/float-button-cn/#api"></AntdApiRef>
|
|
1999
2175
|
|
|
2000
2176
|
|
|
2001
2177
|
## antd API
|
|
2002
2178
|
|
|
2003
2179
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2004
2180
|
|
|
2005
|
-
|
|
2181
|
+
自 `antd@5.0.0` 版本开始提供该组件。
|
|
2182
|
+
|
|
2183
|
+
### 共同的 API
|
|
2006
2184
|
|
|
2007
2185
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2008
2186
|
|--------|--------|--------|--------|--------|
|
|
2009
|
-
|
|
|
2010
|
-
|
|
|
2011
|
-
|
|
|
2012
|
-
|
|
|
2013
|
-
|
|
|
2014
|
-
|
|
|
2015
|
-
|
|
|
2016
|
-
|
|
|
2017
|
-
|
|
|
2018
|
-
|
|
|
2019
|
-
| showCount | 是否展示字数 | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 info.value: 4.23.0 |
|
|
2020
|
-
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
2021
|
-
| styles | 语义化结构 style | Record< | - | 5.4.0 |
|
|
2022
|
-
| size | 控件大小。注：标准表单内的输入框大小限制为 | large | - | |
|
|
2023
|
-
| suffix | 带有后缀图标的 input | ReactNode | - | |
|
|
2024
|
-
| type | 声明 input 类型，同原生 input 标签的 type 属性，见： | string | text | |
|
|
2025
|
-
| value | 输入框内容 | string | - | |
|
|
2026
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
2027
|
-
| onChange | 输入框内容变化时的回调 | function(e) | - | |
|
|
2028
|
-
| onPressEnter | 按下回车的回调 | function(e) | - | |
|
|
2029
|
-
| onClear | 按下清除按钮的回调 | () => void | - | 5.20.0 |
|
|
2187
|
+
| icon | 自定义图标 | ReactNode | - | |
|
|
2188
|
+
| description | 文字及其它内容 | ReactNode | - | |
|
|
2189
|
+
| tooltip | 气泡卡片的内容 | ReactNode \| | - | TooltipProps: 5.25.0 |
|
|
2190
|
+
| type | 设置按钮类型 | default | default | |
|
|
2191
|
+
| shape | 设置按钮形状 | circle | circle | |
|
|
2192
|
+
| onClick | 点击按钮时的回调 | (event) => void | - | |
|
|
2193
|
+
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2194
|
+
| target | 相当于 a 标签的 target 属性，href 存在时生效 | string | - | |
|
|
2195
|
+
| htmlType | 设置 | submit | button | 5.21.0 |
|
|
2196
|
+
| badge | 带徽标数字的悬浮按钮（不支持 | | - | 5.4.0 |
|
|
2030
2197
|
|
|
2031
2198
|
|
|
2032
|
-
|
|
2199
|
+
### FloatButton.Group
|
|
2033
2200
|
|
|
2034
|
-
|
|
2201
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2202
|
+
|--------|--------|--------|--------|--------|
|
|
2203
|
+
| shape | 设置包含的 FloatButton 按钮形状 | circle | circle | |
|
|
2204
|
+
| trigger | 触发方式（有触发方式为菜单模式） | click | - | |
|
|
2205
|
+
| open | 受控展开，需配合 trigger 一起使用 | boolean | - | |
|
|
2206
|
+
| closeIcon | 自定义关闭按钮 | React.ReactNode | | |
|
|
2207
|
+
| placement | 自定义菜单弹出位置 | top | top | 5.21.0 |
|
|
2208
|
+
| onOpenChange | 展开收起时的回调，需配合 trigger 一起使用 | (open: boolean) => void | - | |
|
|
2209
|
+
| onClick | 点击按钮时的回调（仅在菜单模式中有效） | (event) => void | - | 5.3.0 |
|
|
2035
2210
|
|
|
2036
|
-
#### CountConfig
|
|
2037
2211
|
|
|
2212
|
+
### FloatButton.BackTop
|
|
2038
2213
|
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
// 同 `showCount`
|
|
2046
|
-
show?: boolean | ((args: { value: string; count: number; maxLength?: number }) => ReactNode);
|
|
2047
|
-
// 当字符数超出 `count.max` 时的自定义裁剪逻辑，不配置时不进行裁剪
|
|
2048
|
-
exceedFormatter?: (value: string, config: { max: number }) => string;
|
|
2049
|
-
}
|
|
2050
|
-
```
|
|
2214
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2215
|
+
|--------|--------|--------|--------|--------|
|
|
2216
|
+
| duration | 回到顶部所需时间（ms） | number | 450 | |
|
|
2217
|
+
| target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window | |
|
|
2218
|
+
| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |
|
|
2219
|
+
| onClick | 点击按钮的回调函数 | () => void | - | |
|
|
2051
2220
|
|
|
2052
2221
|
|
|
2053
|
-
### Input.TextArea
|
|
2054
2222
|
|
|
2055
|
-
同 Input 属性，外加：
|
|
2056
2223
|
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
| autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false | |
|
|
2060
|
-
| classNames | 语义化结构 class | Record< | - | 5.4.0 |
|
|
2061
|
-
| styles | 语义化结构 style | Record< | - | 5.4.0 |
|
|
2224
|
+
<DemoTitle title="Dropdown" desc="向下弹出的列表。">
|
|
2225
|
+
#### API
|
|
2062
2226
|
|
|
2227
|
+
<AntdApiRef url="https://ant.design/components/dropdown-cn/#api"></AntdApiRef>
|
|
2063
2228
|
|
|
2064
|
-
`Input.TextArea` 的其他属性和浏览器自带的 [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) 一致。
|
|
2065
2229
|
|
|
2066
|
-
|
|
2230
|
+
## antd API
|
|
2067
2231
|
|
|
2068
|
-
|
|
2069
|
-
|--------|--------|--------|--------|
|
|
2070
|
-
| enterButton | 是否有确认按钮，可设为按钮文字。该属性会与 | ReactNode | false |
|
|
2071
|
-
| loading | 搜索 loading | boolean | false |
|
|
2072
|
-
| onSearch | 点击搜索图标、清除图标，或按下回车键时的回调 | function(value, event, { source: "input" \| "clear" }) | - |
|
|
2232
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2073
2233
|
|
|
2234
|
+
### Dropdown
|
|
2074
2235
|
|
|
2075
|
-
|
|
2236
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2237
|
+
|--------|--------|--------|--------|--------|
|
|
2238
|
+
| arrow | 下拉框箭头是否显示 | boolean \| { pointAtCenter: boolean } | false | |
|
|
2239
|
+
| autoAdjustOverflow | 下拉框被遮挡时自动调整位置 | boolean | true | 5.2.0 |
|
|
2240
|
+
| autoFocus | 打开后自动聚焦下拉框 | boolean | false | 4.21.0 |
|
|
2241
|
+
| disabled | 菜单是否禁用 | boolean | - | |
|
|
2242
|
+
| destroyOnHidden | 关闭后是否销毁 Dropdown | boolean | false | 5.25.0 |
|
|
2243
|
+
| popupRender | 自定义弹出框内容 | (menus: ReactNode) => ReactNode | - | 5.25.0 |
|
|
2244
|
+
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
2245
|
+
| menu | 菜单配置项 | | - | 4.24.0 |
|
|
2246
|
+
| overlayClassName | 下拉根元素的类名称 | string | - | |
|
|
2247
|
+
| overlayStyle | 下拉根元素的样式 | CSSProperties | - | |
|
|
2248
|
+
| placement | 菜单弹出位置： | string | bottomLeft | |
|
|
2249
|
+
| trigger | 触发下拉的行为，移动端不支持 hover | Array< | [ | |
|
|
2250
|
+
| open | 菜单是否显示，小于 4.23.0 使用 | boolean | - | 4.23.0 |
|
|
2251
|
+
| onOpenChange | 菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 | (open: boolean, info: { source: 'trigger' \| 'menu' }) => void | - | info.source |
|
|
2076
2252
|
|
|
2077
|
-
|
|
2253
|
+
|
|
2254
|
+
### Dropdown.Button
|
|
2255
|
+
|
|
2256
|
+
属性与 Dropdown 的相同。还包含以下属性：
|
|
2078
2257
|
|
|
2079
2258
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2080
2259
|
|--------|--------|--------|--------|--------|
|
|
2081
|
-
|
|
|
2082
|
-
|
|
|
2260
|
+
| buttonsRender | 自定义左右两个按钮 | (buttons: ReactNode[]) => ReactNode[] | - | |
|
|
2261
|
+
| loading | 设置按钮载入状态，和 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
2262
|
+
| danger | 设置危险按钮 | boolean | - | 4.23.0 |
|
|
2263
|
+
| icon | 右侧的 icon | ReactNode | - | |
|
|
2264
|
+
| size | 按钮大小，和 | large | middle | |
|
|
2265
|
+
| type | 按钮类型，和 | primary | default | |
|
|
2266
|
+
| onClick | 点击左侧按钮的回调，和 | (event: React.MouseEvent) => void | - | |
|
|
2083
2267
|
|
|
2084
2268
|
|
|
2085
|
-
|
|
2269
|
+
## 注意
|
|
2086
2270
|
|
|
2087
|
-
`
|
|
2271
|
+
请确保 `Dropdown` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
|
|
2272
|
+
## antd API
|
|
2088
2273
|
|
|
2089
|
-
|
|
2274
|
+
### Menu
|
|
2090
2275
|
|
|
2091
2276
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2092
2277
|
|--------|--------|--------|--------|--------|
|
|
2093
|
-
|
|
|
2094
|
-
|
|
|
2095
|
-
|
|
|
2096
|
-
|
|
|
2097
|
-
|
|
|
2098
|
-
|
|
|
2099
|
-
|
|
|
2100
|
-
|
|
|
2101
|
-
|
|
|
2102
|
-
|
|
|
2103
|
-
|
|
|
2104
|
-
|
|
|
2278
|
+
| defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | string[] | - | |
|
|
2279
|
+
| defaultSelectedKeys | 初始选中的菜单项 key 数组 | string[] | - | |
|
|
2280
|
+
| expandIcon | 自定义展开图标 | ReactNode \| | - | 4.9.0 |
|
|
2281
|
+
| forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false | |
|
|
2282
|
+
| inlineCollapsed | inline 时菜单是否收起状态 | boolean | - | |
|
|
2283
|
+
| inlineIndent | inline 模式的菜单缩进宽度 | number | 24 | |
|
|
2284
|
+
| items | 菜单内容 | | - | 4.20.0 |
|
|
2285
|
+
| mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | vertical | vertical | |
|
|
2286
|
+
| multiple | 是否允许多选 | boolean | false | |
|
|
2287
|
+
| openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string[] | - | |
|
|
2288
|
+
| overflowedIndicator | 用于自定义 Menu 水平空间不足时的省略收缩的图标 | ReactNode | | |
|
|
2289
|
+
| selectable | 是否允许选中 | boolean | true | |
|
|
2290
|
+
| selectedKeys | 当前选中的菜单项 key 数组 | string[] | - | |
|
|
2291
|
+
| style | 根节点样式 | CSSProperties | - | |
|
|
2292
|
+
| subMenuCloseDelay | 用户鼠标离开子菜单后关闭延时，单位：秒 | number | 0.1 | |
|
|
2293
|
+
| subMenuOpenDelay | 用户鼠标进入子菜单后开启延时，单位：秒 | number | 0 | |
|
|
2294
|
+
| theme | 主题颜色 | light | light | |
|
|
2295
|
+
| triggerSubMenuAction | SubMenu 展开/关闭的触发行为 | hover | hover | |
|
|
2296
|
+
| onClick | 点击 MenuItem 调用此函数 | function({ item, key, keyPath, domEvent }) | - | |
|
|
2297
|
+
| onDeselect | 取消选中时调用，仅在 multiple 生效 | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |
|
|
2298
|
+
| onOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string[]) | - | |
|
|
2299
|
+
| onSelect | 被选中时调用 | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |
|
|
2105
2300
|
|
|
2106
2301
|
|
|
2107
|
-
|
|
2302
|
+
更多属性查看 [rc-menu](https://github.com/react-component/menu#api)
|
|
2108
2303
|
|
|
2109
|
-
|
|
2304
|
+
### ItemType
|
|
2305
|
+
|
|
2306
|
+
type ItemType = [MenuItemType](#menuitemtype) | [SubMenuType](#submenutype) | [MenuItemGroupType](#menuitemgrouptype) | [MenuDividerType](#menudividertype);
|
|
2307
|
+
|
|
2308
|
+
#### MenuItemType
|
|
2309
|
+
|
|
2310
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2110
2311
|
|--------|--------|--------|--------|--------|
|
|
2111
|
-
|
|
|
2112
|
-
|
|
|
2312
|
+
| danger | 展示错误状态样式 | boolean | false | |
|
|
2313
|
+
| disabled | 是否禁用 | boolean | false | |
|
|
2314
|
+
| extra | 额外节点 | ReactNode | - | 5.21.0 |
|
|
2315
|
+
| icon | 菜单图标 | ReactNode | - | |
|
|
2316
|
+
| key | item 的唯一标志 | string | - | |
|
|
2317
|
+
| label | 菜单项标题 | ReactNode | - | |
|
|
2318
|
+
| title | 设置收缩时展示的悬浮标题 | string | - | |
|
|
2113
2319
|
|
|
2114
2320
|
|
|
2115
|
-
####
|
|
2321
|
+
#### SubMenuType
|
|
2116
2322
|
|
|
2117
|
-
|
|
|
2118
|
-
|
|
2119
|
-
|
|
|
2120
|
-
|
|
|
2323
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2324
|
+
|--------|--------|--------|--------|--------|
|
|
2325
|
+
| children | 子菜单的菜单项 | | - | |
|
|
2326
|
+
| disabled | 是否禁用 | boolean | false | |
|
|
2327
|
+
| icon | 菜单图标 | ReactNode | - | |
|
|
2328
|
+
| key | 唯一标志 | string | - | |
|
|
2329
|
+
| label | 菜单项标题 | ReactNode | - | |
|
|
2330
|
+
| popupClassName | 子菜单样式， | string | - | |
|
|
2331
|
+
| popupOffset | 子菜单偏移量， | [number, number] | - | |
|
|
2332
|
+
| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | - | |
|
|
2333
|
+
| theme | 设置子菜单的主题，默认从 Menu 上继承 | light | - | |
|
|
2121
2334
|
|
|
2122
2335
|
|
|
2336
|
+
#### MenuItemGroupType
|
|
2123
2337
|
|
|
2338
|
+
定义类型为 `group` 时，会作为分组处理:
|
|
2124
2339
|
|
|
2125
|
-
<DemoTitle title="IconButton" desc="以图标为核心的轻量按钮组件，用于触发操作。">
|
|
2126
|
-
#### API
|
|
2127
2340
|
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
|
|
2131
|
-
|
|
2132
|
-
|
|
2133
|
-
|
|
2341
|
+
```ts
|
|
2342
|
+
const groupItem = {
|
|
2343
|
+
type: 'group', // Must have
|
|
2344
|
+
label: 'My Group',
|
|
2345
|
+
children: [],
|
|
2346
|
+
};
|
|
2347
|
+
```
|
|
2134
2348
|
|
|
2135
2349
|
|
|
2136
|
-
|
|
2350
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2351
|
+
|--------|--------|--------|--------|--------|
|
|
2352
|
+
| children | 分组的菜单项 | | - | |
|
|
2353
|
+
| label | 分组标题 | ReactNode | - | |
|
|
2137
2354
|
|
|
2138
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2139
2355
|
|
|
2140
|
-
|
|
2356
|
+
#### MenuDividerType
|
|
2141
2357
|
|
|
2142
|
-
|
|
2358
|
+
菜单项分割线，只用在弹出菜单内，需要定义类型为 `divider`：
|
|
2143
2359
|
|
|
2144
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
2145
|
-
|--------|--------|--------|--------|--------|
|
|
2146
|
-
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
2147
|
-
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
2148
|
-
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
2149
|
-
| color | 设置按钮的颜色 | default | - | default |
|
|
2150
|
-
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
2151
|
-
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
2152
|
-
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
2153
|
-
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2154
|
-
| htmlType | 设置 | submit | button | |
|
|
2155
|
-
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
2156
|
-
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
2157
|
-
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
2158
|
-
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
2159
|
-
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
2160
|
-
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
2161
2360
|
|
|
2361
|
+
```ts
|
|
2362
|
+
const dividerItem = {
|
|
2363
|
+
type: 'divider', // Must have
|
|
2364
|
+
};
|
|
2365
|
+
```
|
|
2162
2366
|
|
|
2163
|
-
支持原生 button 的其他所有属性。
|
|
2164
2367
|
|
|
2165
|
-
|
|
2368
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2369
|
+
|--------|--------|--------|--------|--------|
|
|
2370
|
+
| dashed | 是否虚线 | boolean | false | |
|
|
2166
2371
|
|
|
2167
|
-
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
2168
2372
|
|
|
2169
2373
|
|
|
2170
2374
|
|
|
@@ -2613,321 +2817,117 @@ const CustomInput = ({ value, onChange }) => {
|
|
|
2613
2817
|
value={value}
|
|
2614
2818
|
onChange={onChange}
|
|
2615
2819
|
className={`custom-input-${status}`}
|
|
2616
|
-
placeholder={(errors.length && errors[0]) || ''}
|
|
2617
|
-
/>
|
|
2618
|
-
);
|
|
2619
|
-
};
|
|
2620
|
-
|
|
2621
|
-
export default () => (
|
|
2622
|
-
<Form>
|
|
2623
|
-
<Form.Item name="username">
|
|
2624
|
-
<CustomInput />
|
|
2625
|
-
</Form.Item>
|
|
2626
|
-
</Form>
|
|
2627
|
-
);
|
|
2628
|
-
```
|
|
2629
|
-
|
|
2630
|
-
|
|
2631
|
-
#### 与其他获取数据的方式的区别
|
|
2632
|
-
|
|
2633
|
-
Form 仅会对变更的 Field 进行刷新，从而避免完整的组件刷新可能引发的性能问题。因而你无法在 render 阶段通过 `form.getFieldsValue` 来实时获取字段值，而 `useWatch` 提供了一种特定字段访问的方式，从而使得在当前组件中可以直接消费字段的值。同时，如果为了更好的渲染性能，你可以通过 Field 的 renderProps 仅更新需要更新的部分。而当当前组件更新或者 effect 都不需要消费字段值时，则可以通过 `onValuesChange` 将数据抛出，从而避免组件更新。
|
|
2634
|
-
|
|
2635
|
-
## Interface
|
|
2636
|
-
|
|
2637
|
-
### NamePath
|
|
2638
|
-
|
|
2639
|
-
`string | number | (string | number)[]`
|
|
2640
|
-
|
|
2641
|
-
### GetFieldsValue
|
|
2642
|
-
|
|
2643
|
-
`getFieldsValue` 提供了多种重载方法：
|
|
2644
|
-
|
|
2645
|
-
#### getFieldsValue(nameList?: true | [NamePath](#namepath)[], filterFunc?: FilterFunc)
|
|
2646
|
-
|
|
2647
|
-
当不提供 `nameList` 时，返回所有注册字段，这也包含 List 下所有的值（即便 List 下没有绑定 Item）。
|
|
2648
|
-
|
|
2649
|
-
当 `nameList` 为 `true` 时，返回 store 中所有的值，包含未注册字段。例如通过 `setFieldsValue` 设置了不存在的 Item 的值，也可以通过 `true` 全部获取。
|
|
2650
|
-
|
|
2651
|
-
当 `nameList` 为数组时，返回规定路径的值。需要注意的是，`nameList` 为嵌套数组。例如你需要某路径值应该如下：
|
|
2652
|
-
|
|
2653
|
-
|
|
2654
|
-
```tsx
|
|
2655
|
-
// 单个路径
|
|
2656
|
-
form.getFieldsValue([['user', 'age']]);
|
|
2657
|
-
|
|
2658
|
-
// 多个路径
|
|
2659
|
-
form.getFieldsValue([
|
|
2660
|
-
['user', 'age'],
|
|
2661
|
-
['preset', 'account'],
|
|
2662
|
-
]);
|
|
2663
|
-
```
|
|
2664
|
-
|
|
2665
|
-
|
|
2666
|
-
#### getFieldsValue({ strict?: boolean, filter?: FilterFunc })
|
|
2667
|
-
|
|
2668
|
-
`5.8.0` 新增接受配置参数。当 `strict` 为 `true` 时会仅匹配 Item 的值。例如 `{ list: [{ bamboo: 1, little: 2 }] }` 中，如果 List 仅绑定了 `bamboo` 字段，那么 `getFieldsValue({ strict: true })` 会只获得 `{ list: [{ bamboo: 1 }] }`。
|
|
2669
|
-
|
|
2670
|
-
### FilterFunc
|
|
2671
|
-
|
|
2672
|
-
用于过滤一些字段值，`meta` 会返回字段相关信息。例如可以用来获取仅被用户修改过的值等等。
|
|
2673
|
-
|
|
2674
|
-
|
|
2675
|
-
```tsx
|
|
2676
|
-
type FilterFunc = (meta: { touched: boolean; validating: boolean }) => boolean;
|
|
2677
|
-
```
|
|
2678
|
-
|
|
2679
|
-
|
|
2680
|
-
### FieldData
|
|
2681
|
-
|
|
2682
|
-
| 名称 | 说明 | 类型 |
|
|
2683
|
-
|--------|--------|--------|
|
|
2684
|
-
| errors | 错误信息 | string[] |
|
|
2685
|
-
| warnings | 警告信息 | string[] |
|
|
2686
|
-
| name | 字段名称 | |
|
|
2687
|
-
| touched | 是否被用户操作过 | boolean |
|
|
2688
|
-
| validating | 是否正在校验 | boolean |
|
|
2689
|
-
| value | 字段对应值 | any |
|
|
2690
|
-
|
|
2691
|
-
|
|
2692
|
-
### Rule
|
|
2693
|
-
|
|
2694
|
-
Rule 支持接收 object 进行配置，也支持 function 来动态获取 form 的数据：
|
|
2695
|
-
|
|
2696
|
-
|
|
2697
|
-
```tsx
|
|
2698
|
-
type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
|
|
2699
|
-
```
|
|
2700
|
-
|
|
2701
|
-
|
|
2702
|
-
| 名称 | 说明 | 类型 | 版本 |
|
|
2703
|
-
|--------|--------|--------|--------|
|
|
2704
|
-
| defaultField | 仅在 | | |
|
|
2705
|
-
| enum | 是否匹配枚举中的值（需要将 | any[] | |
|
|
2706
|
-
| fields | 仅在 | Record<string, | |
|
|
2707
|
-
| len | string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度 | number | |
|
|
2708
|
-
| max | 必须设置 | number | |
|
|
2709
|
-
| message | 错误信息，不设置时会通过 | string \| ReactElement | |
|
|
2710
|
-
| min | 必须设置 | number | |
|
|
2711
|
-
| pattern | 正则表达式匹配 | RegExp | |
|
|
2712
|
-
| required | 是否为必选字段 | boolean | |
|
|
2713
|
-
| transform | 将字段值转换成目标值后进行校验 | (value) => any | |
|
|
2714
|
-
| type | 类型，常见有 | string | |
|
|
2715
|
-
| validateTrigger | 设置触发验证时机，必须是 Form.Item 的 | string \| string[] | |
|
|
2716
|
-
| validator | 自定义校验，接收 Promise 作为返回值。 | ( | |
|
|
2717
|
-
| warningOnly | 仅警告，不阻塞表单提交 | boolean | 4.17.0 |
|
|
2718
|
-
| whitespace | 如果字段仅包含空格则校验不通过，只在 | boolean | |
|
|
2719
|
-
|
|
2720
|
-
|
|
2721
|
-
### WatchOptions
|
|
2722
|
-
|
|
2723
|
-
| 名称 | 说明 | 类型 | 默认值 | 版本 |
|
|
2724
|
-
|--------|--------|--------|--------|--------|
|
|
2725
|
-
| form | 指定 Form 实例 | FormInstance | 当前 context 中的 Form | 5.4.0 |
|
|
2726
|
-
| preserve | 是否监视没有对应的 | boolean | false | 5.4.0 |
|
|
2727
|
-
|
|
2728
|
-
|
|
2729
|
-
|
|
2730
|
-
|
|
2731
|
-
<DemoTitle title="FloatButton" desc="用于网站上的全局功能；无论浏览到何处都可以看见的按钮。">
|
|
2732
|
-
#### API
|
|
2733
|
-
|
|
2734
|
-
<AntdApiRef url="https://ant.design/components/float-button-cn/#api"></AntdApiRef>
|
|
2735
|
-
|
|
2736
|
-
|
|
2737
|
-
## antd API
|
|
2738
|
-
|
|
2739
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2740
|
-
|
|
2741
|
-
自 `antd@5.0.0` 版本开始提供该组件。
|
|
2742
|
-
|
|
2743
|
-
### 共同的 API
|
|
2744
|
-
|
|
2745
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2746
|
-
|--------|--------|--------|--------|--------|
|
|
2747
|
-
| icon | 自定义图标 | ReactNode | - | |
|
|
2748
|
-
| description | 文字及其它内容 | ReactNode | - | |
|
|
2749
|
-
| tooltip | 气泡卡片的内容 | ReactNode \| | - | TooltipProps: 5.25.0 |
|
|
2750
|
-
| type | 设置按钮类型 | default | default | |
|
|
2751
|
-
| shape | 设置按钮形状 | circle | circle | |
|
|
2752
|
-
| onClick | 点击按钮时的回调 | (event) => void | - | |
|
|
2753
|
-
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2754
|
-
| target | 相当于 a 标签的 target 属性，href 存在时生效 | string | - | |
|
|
2755
|
-
| htmlType | 设置 | submit | button | 5.21.0 |
|
|
2756
|
-
| badge | 带徽标数字的悬浮按钮（不支持 | | - | 5.4.0 |
|
|
2757
|
-
|
|
2758
|
-
|
|
2759
|
-
### FloatButton.Group
|
|
2760
|
-
|
|
2761
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2762
|
-
|--------|--------|--------|--------|--------|
|
|
2763
|
-
| shape | 设置包含的 FloatButton 按钮形状 | circle | circle | |
|
|
2764
|
-
| trigger | 触发方式（有触发方式为菜单模式） | click | - | |
|
|
2765
|
-
| open | 受控展开，需配合 trigger 一起使用 | boolean | - | |
|
|
2766
|
-
| closeIcon | 自定义关闭按钮 | React.ReactNode | | |
|
|
2767
|
-
| placement | 自定义菜单弹出位置 | top | top | 5.21.0 |
|
|
2768
|
-
| onOpenChange | 展开收起时的回调，需配合 trigger 一起使用 | (open: boolean) => void | - | |
|
|
2769
|
-
| onClick | 点击按钮时的回调（仅在菜单模式中有效） | (event) => void | - | 5.3.0 |
|
|
2770
|
-
|
|
2771
|
-
|
|
2772
|
-
### FloatButton.BackTop
|
|
2773
|
-
|
|
2774
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2775
|
-
|--------|--------|--------|--------|--------|
|
|
2776
|
-
| duration | 回到顶部所需时间（ms） | number | 450 | |
|
|
2777
|
-
| target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window | |
|
|
2778
|
-
| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |
|
|
2779
|
-
| onClick | 点击按钮的回调函数 | () => void | - | |
|
|
2780
|
-
|
|
2781
|
-
|
|
2782
|
-
|
|
2783
|
-
|
|
2784
|
-
<DemoTitle title="Dropdown" desc="向下弹出的列表。">
|
|
2785
|
-
#### API
|
|
2786
|
-
|
|
2787
|
-
<AntdApiRef url="https://ant.design/components/dropdown-cn/#api"></AntdApiRef>
|
|
2788
|
-
|
|
2789
|
-
|
|
2790
|
-
## antd API
|
|
2791
|
-
|
|
2792
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2793
|
-
|
|
2794
|
-
### Dropdown
|
|
2795
|
-
|
|
2796
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2797
|
-
|--------|--------|--------|--------|--------|
|
|
2798
|
-
| arrow | 下拉框箭头是否显示 | boolean \| { pointAtCenter: boolean } | false | |
|
|
2799
|
-
| autoAdjustOverflow | 下拉框被遮挡时自动调整位置 | boolean | true | 5.2.0 |
|
|
2800
|
-
| autoFocus | 打开后自动聚焦下拉框 | boolean | false | 4.21.0 |
|
|
2801
|
-
| disabled | 菜单是否禁用 | boolean | - | |
|
|
2802
|
-
| destroyOnHidden | 关闭后是否销毁 Dropdown | boolean | false | 5.25.0 |
|
|
2803
|
-
| popupRender | 自定义弹出框内容 | (menus: ReactNode) => ReactNode | - | 5.25.0 |
|
|
2804
|
-
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
2805
|
-
| menu | 菜单配置项 | | - | 4.24.0 |
|
|
2806
|
-
| overlayClassName | 下拉根元素的类名称 | string | - | |
|
|
2807
|
-
| overlayStyle | 下拉根元素的样式 | CSSProperties | - | |
|
|
2808
|
-
| placement | 菜单弹出位置： | string | bottomLeft | |
|
|
2809
|
-
| trigger | 触发下拉的行为，移动端不支持 hover | Array< | [ | |
|
|
2810
|
-
| open | 菜单是否显示，小于 4.23.0 使用 | boolean | - | 4.23.0 |
|
|
2811
|
-
| onOpenChange | 菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 | (open: boolean, info: { source: 'trigger' \| 'menu' }) => void | - | info.source |
|
|
2820
|
+
placeholder={(errors.length && errors[0]) || ''}
|
|
2821
|
+
/>
|
|
2822
|
+
);
|
|
2823
|
+
};
|
|
2812
2824
|
|
|
2825
|
+
export default () => (
|
|
2826
|
+
<Form>
|
|
2827
|
+
<Form.Item name="username">
|
|
2828
|
+
<CustomInput />
|
|
2829
|
+
</Form.Item>
|
|
2830
|
+
</Form>
|
|
2831
|
+
);
|
|
2832
|
+
```
|
|
2813
2833
|
|
|
2814
|
-
### Dropdown.Button
|
|
2815
2834
|
|
|
2816
|
-
|
|
2835
|
+
#### 与其他获取数据的方式的区别
|
|
2817
2836
|
|
|
2818
|
-
|
|
2819
|
-
|--------|--------|--------|--------|--------|
|
|
2820
|
-
| buttonsRender | 自定义左右两个按钮 | (buttons: ReactNode[]) => ReactNode[] | - | |
|
|
2821
|
-
| loading | 设置按钮载入状态，和 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
2822
|
-
| danger | 设置危险按钮 | boolean | - | 4.23.0 |
|
|
2823
|
-
| icon | 右侧的 icon | ReactNode | - | |
|
|
2824
|
-
| size | 按钮大小，和 | large | middle | |
|
|
2825
|
-
| type | 按钮类型，和 | primary | default | |
|
|
2826
|
-
| onClick | 点击左侧按钮的回调，和 | (event: React.MouseEvent) => void | - | |
|
|
2837
|
+
Form 仅会对变更的 Field 进行刷新，从而避免完整的组件刷新可能引发的性能问题。因而你无法在 render 阶段通过 `form.getFieldsValue` 来实时获取字段值，而 `useWatch` 提供了一种特定字段访问的方式，从而使得在当前组件中可以直接消费字段的值。同时，如果为了更好的渲染性能，你可以通过 Field 的 renderProps 仅更新需要更新的部分。而当当前组件更新或者 effect 都不需要消费字段值时，则可以通过 `onValuesChange` 将数据抛出，从而避免组件更新。
|
|
2827
2838
|
|
|
2839
|
+
## Interface
|
|
2828
2840
|
|
|
2829
|
-
|
|
2841
|
+
### NamePath
|
|
2830
2842
|
|
|
2831
|
-
|
|
2832
|
-
## antd API
|
|
2843
|
+
`string | number | (string | number)[]`
|
|
2833
2844
|
|
|
2834
|
-
###
|
|
2845
|
+
### GetFieldsValue
|
|
2835
2846
|
|
|
2836
|
-
|
|
2837
|
-
|--------|--------|--------|--------|--------|
|
|
2838
|
-
| defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | string[] | - | |
|
|
2839
|
-
| defaultSelectedKeys | 初始选中的菜单项 key 数组 | string[] | - | |
|
|
2840
|
-
| expandIcon | 自定义展开图标 | ReactNode \| | - | 4.9.0 |
|
|
2841
|
-
| forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false | |
|
|
2842
|
-
| inlineCollapsed | inline 时菜单是否收起状态 | boolean | - | |
|
|
2843
|
-
| inlineIndent | inline 模式的菜单缩进宽度 | number | 24 | |
|
|
2844
|
-
| items | 菜单内容 | | - | 4.20.0 |
|
|
2845
|
-
| mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | vertical | vertical | |
|
|
2846
|
-
| multiple | 是否允许多选 | boolean | false | |
|
|
2847
|
-
| openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string[] | - | |
|
|
2848
|
-
| overflowedIndicator | 用于自定义 Menu 水平空间不足时的省略收缩的图标 | ReactNode | | |
|
|
2849
|
-
| selectable | 是否允许选中 | boolean | true | |
|
|
2850
|
-
| selectedKeys | 当前选中的菜单项 key 数组 | string[] | - | |
|
|
2851
|
-
| style | 根节点样式 | CSSProperties | - | |
|
|
2852
|
-
| subMenuCloseDelay | 用户鼠标离开子菜单后关闭延时，单位：秒 | number | 0.1 | |
|
|
2853
|
-
| subMenuOpenDelay | 用户鼠标进入子菜单后开启延时，单位：秒 | number | 0 | |
|
|
2854
|
-
| theme | 主题颜色 | light | light | |
|
|
2855
|
-
| triggerSubMenuAction | SubMenu 展开/关闭的触发行为 | hover | hover | |
|
|
2856
|
-
| onClick | 点击 MenuItem 调用此函数 | function({ item, key, keyPath, domEvent }) | - | |
|
|
2857
|
-
| onDeselect | 取消选中时调用，仅在 multiple 生效 | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |
|
|
2858
|
-
| onOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string[]) | - | |
|
|
2859
|
-
| onSelect | 被选中时调用 | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |
|
|
2847
|
+
`getFieldsValue` 提供了多种重载方法：
|
|
2860
2848
|
|
|
2849
|
+
#### getFieldsValue(nameList?: true | [NamePath](#namepath)[], filterFunc?: FilterFunc)
|
|
2861
2850
|
|
|
2862
|
-
|
|
2851
|
+
当不提供 `nameList` 时，返回所有注册字段，这也包含 List 下所有的值（即便 List 下没有绑定 Item）。
|
|
2863
2852
|
|
|
2864
|
-
|
|
2853
|
+
当 `nameList` 为 `true` 时，返回 store 中所有的值，包含未注册字段。例如通过 `setFieldsValue` 设置了不存在的 Item 的值，也可以通过 `true` 全部获取。
|
|
2865
2854
|
|
|
2866
|
-
|
|
2855
|
+
当 `nameList` 为数组时，返回规定路径的值。需要注意的是，`nameList` 为嵌套数组。例如你需要某路径值应该如下：
|
|
2867
2856
|
|
|
2868
|
-
#### MenuItemType
|
|
2869
2857
|
|
|
2870
|
-
|
|
2871
|
-
|
|
2872
|
-
|
|
2873
|
-
| disabled | 是否禁用 | boolean | false | |
|
|
2874
|
-
| extra | 额外节点 | ReactNode | - | 5.21.0 |
|
|
2875
|
-
| icon | 菜单图标 | ReactNode | - | |
|
|
2876
|
-
| key | item 的唯一标志 | string | - | |
|
|
2877
|
-
| label | 菜单项标题 | ReactNode | - | |
|
|
2878
|
-
| title | 设置收缩时展示的悬浮标题 | string | - | |
|
|
2858
|
+
```tsx
|
|
2859
|
+
// 单个路径
|
|
2860
|
+
form.getFieldsValue([['user', 'age']]);
|
|
2879
2861
|
|
|
2862
|
+
// 多个路径
|
|
2863
|
+
form.getFieldsValue([
|
|
2864
|
+
['user', 'age'],
|
|
2865
|
+
['preset', 'account'],
|
|
2866
|
+
]);
|
|
2867
|
+
```
|
|
2880
2868
|
|
|
2881
|
-
#### SubMenuType
|
|
2882
2869
|
|
|
2883
|
-
|
|
2884
|
-
|--------|--------|--------|--------|--------|
|
|
2885
|
-
| children | 子菜单的菜单项 | | - | |
|
|
2886
|
-
| disabled | 是否禁用 | boolean | false | |
|
|
2887
|
-
| icon | 菜单图标 | ReactNode | - | |
|
|
2888
|
-
| key | 唯一标志 | string | - | |
|
|
2889
|
-
| label | 菜单项标题 | ReactNode | - | |
|
|
2890
|
-
| popupClassName | 子菜单样式， | string | - | |
|
|
2891
|
-
| popupOffset | 子菜单偏移量， | [number, number] | - | |
|
|
2892
|
-
| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | - | |
|
|
2893
|
-
| theme | 设置子菜单的主题，默认从 Menu 上继承 | light | - | |
|
|
2870
|
+
#### getFieldsValue({ strict?: boolean, filter?: FilterFunc })
|
|
2894
2871
|
|
|
2872
|
+
`5.8.0` 新增接受配置参数。当 `strict` 为 `true` 时会仅匹配 Item 的值。例如 `{ list: [{ bamboo: 1, little: 2 }] }` 中，如果 List 仅绑定了 `bamboo` 字段，那么 `getFieldsValue({ strict: true })` 会只获得 `{ list: [{ bamboo: 1 }] }`。
|
|
2895
2873
|
|
|
2896
|
-
|
|
2874
|
+
### FilterFunc
|
|
2897
2875
|
|
|
2898
|
-
|
|
2876
|
+
用于过滤一些字段值，`meta` 会返回字段相关信息。例如可以用来获取仅被用户修改过的值等等。
|
|
2899
2877
|
|
|
2900
2878
|
|
|
2901
|
-
```
|
|
2902
|
-
|
|
2903
|
-
type: 'group', // Must have
|
|
2904
|
-
label: 'My Group',
|
|
2905
|
-
children: [],
|
|
2906
|
-
};
|
|
2879
|
+
```tsx
|
|
2880
|
+
type FilterFunc = (meta: { touched: boolean; validating: boolean }) => boolean;
|
|
2907
2881
|
```
|
|
2908
2882
|
|
|
2909
2883
|
|
|
2910
|
-
|
|
2911
|
-
|--------|--------|--------|--------|--------|
|
|
2912
|
-
| children | 分组的菜单项 | | - | |
|
|
2913
|
-
| label | 分组标题 | ReactNode | - | |
|
|
2884
|
+
### FieldData
|
|
2914
2885
|
|
|
2886
|
+
| 名称 | 说明 | 类型 |
|
|
2887
|
+
|--------|--------|--------|
|
|
2888
|
+
| errors | 错误信息 | string[] |
|
|
2889
|
+
| warnings | 警告信息 | string[] |
|
|
2890
|
+
| name | 字段名称 | |
|
|
2891
|
+
| touched | 是否被用户操作过 | boolean |
|
|
2892
|
+
| validating | 是否正在校验 | boolean |
|
|
2893
|
+
| value | 字段对应值 | any |
|
|
2915
2894
|
|
|
2916
|
-
#### MenuDividerType
|
|
2917
2895
|
|
|
2918
|
-
|
|
2896
|
+
### Rule
|
|
2919
2897
|
|
|
2898
|
+
Rule 支持接收 object 进行配置，也支持 function 来动态获取 form 的数据：
|
|
2920
2899
|
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
};
|
|
2900
|
+
|
|
2901
|
+
```tsx
|
|
2902
|
+
type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
|
|
2925
2903
|
```
|
|
2926
2904
|
|
|
2927
2905
|
|
|
2928
|
-
|
|
|
2906
|
+
| 名称 | 说明 | 类型 | 版本 |
|
|
2907
|
+
|--------|--------|--------|--------|
|
|
2908
|
+
| defaultField | 仅在 | | |
|
|
2909
|
+
| enum | 是否匹配枚举中的值（需要将 | any[] | |
|
|
2910
|
+
| fields | 仅在 | Record<string, | |
|
|
2911
|
+
| len | string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度 | number | |
|
|
2912
|
+
| max | 必须设置 | number | |
|
|
2913
|
+
| message | 错误信息，不设置时会通过 | string \| ReactElement | |
|
|
2914
|
+
| min | 必须设置 | number | |
|
|
2915
|
+
| pattern | 正则表达式匹配 | RegExp | |
|
|
2916
|
+
| required | 是否为必选字段 | boolean | |
|
|
2917
|
+
| transform | 将字段值转换成目标值后进行校验 | (value) => any | |
|
|
2918
|
+
| type | 类型，常见有 | string | |
|
|
2919
|
+
| validateTrigger | 设置触发验证时机，必须是 Form.Item 的 | string \| string[] | |
|
|
2920
|
+
| validator | 自定义校验，接收 Promise 作为返回值。 | ( | |
|
|
2921
|
+
| warningOnly | 仅警告，不阻塞表单提交 | boolean | 4.17.0 |
|
|
2922
|
+
| whitespace | 如果字段仅包含空格则校验不通过，只在 | boolean | |
|
|
2923
|
+
|
|
2924
|
+
|
|
2925
|
+
### WatchOptions
|
|
2926
|
+
|
|
2927
|
+
| 名称 | 说明 | 类型 | 默认值 | 版本 |
|
|
2929
2928
|
|--------|--------|--------|--------|--------|
|
|
2930
|
-
|
|
|
2929
|
+
| form | 指定 Form 实例 | FormInstance | 当前 context 中的 Form | 5.4.0 |
|
|
2930
|
+
| preserve | 是否监视没有对应的 | boolean | false | 5.4.0 |
|
|
2931
2931
|
|
|
2932
2932
|
|
|
2933
2933
|
|
|
@@ -2976,6 +2976,70 @@ const dividerItem = {
|
|
|
2976
2976
|
|
|
2977
2977
|
|
|
2978
2978
|
|
|
2979
|
+
<DemoTitle title="Drawer" desc="从页面一侧滑入的操作面板，用于承载临时界面内容。">
|
|
2980
|
+
#### API
|
|
2981
|
+
|
|
2982
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2983
|
+
|--------|--------|--------|--------|
|
|
2984
|
+
| showDivider | 是否显示分割线 | boolean | true |
|
|
2985
|
+
|
|
2986
|
+
##### Drawer.Confirm - 带按钮的抽屉
|
|
2987
|
+
|
|
2988
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2989
|
+
|--------|--------|--------|--------|
|
|
2990
|
+
| footer | 自定义底部内容 | React.ReactNode | |
|
|
2991
|
+
| onOk | 点击确定回调 | () => void | |
|
|
2992
|
+
| okText | 确认按钮文字 | string | |
|
|
2993
|
+
| okButtonProps | 确认按钮属性 | ButtonProps | |
|
|
2994
|
+
| onCancel | 点击取消回调 | () => void | |
|
|
2995
|
+
| cancelText | 取消按钮文字 | string | |
|
|
2996
|
+
| cancelButtonProps | 取消按钮属性 | ButtonProps | |
|
|
2997
|
+
| info | 底部额外内容 | React.ReactNode | |
|
|
2998
|
+
|
|
2999
|
+
<AntdApiRef url="https://ant.design/components/drawer-cn/#api"></AntdApiRef>
|
|
3000
|
+
|
|
3001
|
+
|
|
3002
|
+
## antd API
|
|
3003
|
+
|
|
3004
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3005
|
+
|
|
3006
|
+
<!-- prettier-ignore -->
|
|
3007
|
+
<Container type="warning" title="注意">
|
|
3008
|
+
v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v4 `className` 与 `style` 改至配置 Drawer 窗体样式以和 Modal 对齐。
|
|
3009
|
+
</Container>
|
|
3010
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3011
|
+
|--------|--------|--------|--------|--------|
|
|
3012
|
+
| autoFocus | 抽屉展开后是否将焦点切换至其 DOM 节点 | boolean | true | 4.17.0 |
|
|
3013
|
+
| afterOpenChange | 切换抽屉时动画结束后的回调 | function(open) | - | |
|
|
3014
|
+
| className | Drawer 容器外层 className 设置，如果需要设置最外层，请使用 rootClassName | string | - | |
|
|
3015
|
+
| classNames | 语义化结构 className | | - | 5.10.0 |
|
|
3016
|
+
| closeIcon | 自定义关闭图标。5.7.0：设置为 | ReactNode | | |
|
|
3017
|
+
| destroyOnHidden | 关闭时销毁 Drawer 里的子元素 | boolean | false | 5.25.0 |
|
|
3018
|
+
| extra | 抽屉右上角的操作区域 | ReactNode | - | 4.17.0 |
|
|
3019
|
+
| footer | 抽屉的页脚 | ReactNode | - | |
|
|
3020
|
+
| forceRender | 预渲染 Drawer 内元素 | boolean | false | |
|
|
3021
|
+
| getContainer | 指定 Drawer 挂载的节点， | HTMLElement \| () => HTMLElement \| Selectors \| false | body | |
|
|
3022
|
+
| height | 高度，在 | string \| number | 378 | |
|
|
3023
|
+
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
|
|
3024
|
+
| mask | 是否展示遮罩 | boolean | true | |
|
|
3025
|
+
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
|
|
3026
|
+
| placement | 抽屉的方向 | top | right | |
|
|
3027
|
+
| push | 用于设置多层 Drawer 的推动行为 | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
|
|
3028
|
+
| rootStyle | 可用于设置 Drawer 最外层容器的样式，和 | CSSProperties | - | |
|
|
3029
|
+
| size | 预设抽屉宽度（或高度），default | 'default' \| 'large' | 'default' | 4.17.0 |
|
|
3030
|
+
| style | 设计 Drawer 容器样式，如果你只需要设置内容部分请使用 | CSSProperties | - | |
|
|
3031
|
+
| styles | 语义化结构 style | | - | 5.10.0 |
|
|
3032
|
+
| title | 标题 | ReactNode | - | |
|
|
3033
|
+
| loading | 显示骨架屏 | boolean | false | 5.17.0 |
|
|
3034
|
+
| open | Drawer 是否可见 | boolean | - |
|
|
3035
|
+
| width | 宽度 | string \| number | 378 | |
|
|
3036
|
+
| zIndex | 设置 Drawer 的 | number | 1000 | |
|
|
3037
|
+
| onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - | |
|
|
3038
|
+
| drawerRender | 自定义渲染抽屉 | (node: ReactNode) => ReactNode | - | 5.18.0 |
|
|
3039
|
+
|
|
3040
|
+
|
|
3041
|
+
|
|
3042
|
+
|
|
2979
3043
|
<DemoTitle title="Descriptions" desc="展示多个只读字段的组合">
|
|
2980
3044
|
#### API
|
|
2981
3045
|
|
|
@@ -3014,32 +3078,73 @@ span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem
|
|
|
3014
3078
|
|
|
3015
3079
|
|
|
3016
3080
|
|
|
3017
|
-
<DemoTitle title="
|
|
3018
|
-
#### API
|
|
3081
|
+
<DemoTitle title="CollapsePanel" desc="折叠面板">
|
|
3082
|
+
#### API
|
|
3083
|
+
|
|
3084
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3085
|
+
|--------|--------|--------|--------|
|
|
3086
|
+
| collapsedHeight | 收起状态下显示的内容高度 | number | 0 |
|
|
3087
|
+
| expandedHeight | 展开状态下的内容高度，设置后内容超出时可滚动，不设置则自适应内容高度 | number | 300 |
|
|
3088
|
+
| title | 面板标题 | string \| React.ReactNode | "" |
|
|
3089
|
+
| expandOnPanelClick | 是否允许点击整个面板进行展开 | boolean | false |
|
|
3090
|
+
| extra | 面板右侧内容 | React.ReactNode | |
|
|
3091
|
+
| children | 面板内容 | React.ReactNode | |
|
|
3092
|
+
| defaultExpanded | 是否默认展开 | boolean | false |
|
|
3093
|
+
| classNames | 语义化的classNames | Partial> | |
|
|
3094
|
+
| styles | 语义化的styles | Partial<
|
|
3095
|
+
Record
|
|
3096
|
+
> | |
|
|
3097
|
+
|
|
3098
|
+
|
|
3099
|
+
|
|
3100
|
+
## antd API
|
|
3101
|
+
|
|
3102
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3103
|
+
|
|
3104
|
+
### Collapse
|
|
3105
|
+
|
|
3106
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3107
|
+
|--------|--------|--------|--------|--------|
|
|
3108
|
+
| accordion | 手风琴模式 | boolean | false | |
|
|
3109
|
+
| activeKey | 当前激活 tab 面板的 key | string[] \| string | | |
|
|
3110
|
+
| bordered | 带边框风格的折叠面板 | boolean | true | |
|
|
3111
|
+
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 |
|
|
3112
|
+
| defaultActiveKey | 初始化选中面板的 key | string[] \| string | - | |
|
|
3113
|
+
| destroyOnHidden | 销毁折叠隐藏的面板 | boolean | false | 5.25.0 |
|
|
3114
|
+
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
|
|
3115
|
+
| expandIconPosition | 设置图标位置 | start | - | 4.21.0 |
|
|
3116
|
+
| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
|
|
3117
|
+
| size | 设置折叠面板大小 | large | middle | 5.2.0 |
|
|
3118
|
+
| onChange | 切换面板的回调 | function | - | |
|
|
3119
|
+
| items | 折叠项目内容 | | - | 5.6.0 |
|
|
3120
|
+
|
|
3019
3121
|
|
|
3020
|
-
|
|
3122
|
+
### ItemType
|
|
3021
3123
|
|
|
3022
|
-
|
|
|
3023
|
-
|
|
3024
|
-
|
|
|
3025
|
-
|
|
|
3026
|
-
|
|
|
3027
|
-
|
|
|
3028
|
-
|
|
|
3124
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3125
|
+
|--------|--------|--------|--------|--------|
|
|
3126
|
+
| classNames | 语义化结构 className | | - | 5.21.0 |
|
|
3127
|
+
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | |
|
|
3128
|
+
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3129
|
+
| key | 对应 activeKey | string \| number | - | |
|
|
3130
|
+
| label | 面板标题 | ReactNode | - | - |
|
|
3131
|
+
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3132
|
+
| styles | 语义化结构 style | | - | 5.21.0 |
|
|
3029
3133
|
|
|
3030
3134
|
|
|
3031
|
-
|
|
3135
|
+
### Collapse.Panel
|
|
3032
3136
|
|
|
3033
|
-
|
|
3034
|
-
|
|
3035
|
-
|
|
3036
|
-
|
|
3037
|
-
|
|
|
3038
|
-
|
|
3039
|
-
|
|
|
3040
|
-
|
|
|
3041
|
-
|
|
|
3042
|
-
|
|
|
3137
|
+
<!-- prettier-ignore -->
|
|
3138
|
+
<Container type="warning" title="已废弃">
|
|
3139
|
+
版本 >= 5.6.0 时请使用 items 方式配置面板。
|
|
3140
|
+
</Container>
|
|
3141
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3142
|
+
|--------|--------|--------|--------|--------|
|
|
3143
|
+
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 (icon: 4.24.0) |
|
|
3144
|
+
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3145
|
+
| header | 面板标题 | ReactNode | - | |
|
|
3146
|
+
| key | 对应 activeKey | string \| number | - | |
|
|
3147
|
+
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3043
3148
|
|
|
3044
3149
|
|
|
3045
3150
|
|
|
@@ -3266,87 +3371,10 @@ export type FormatType =
|
|
|
3266
3371
|
|
|
3267
3372
|
|
|
3268
3373
|
|
|
3269
|
-
<DemoTitle title="
|
|
3270
|
-
#### API
|
|
3271
|
-
|
|
3272
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3273
|
-
|--------|--------|--------|--------|
|
|
3274
|
-
| showDivider | 是否显示分割线 | boolean | true |
|
|
3275
|
-
|
|
3276
|
-
##### Drawer.Confirm - 带按钮的抽屉
|
|
3277
|
-
|
|
3278
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3279
|
-
|--------|--------|--------|--------|
|
|
3280
|
-
| footer | 自定义底部内容 | React.ReactNode | |
|
|
3281
|
-
| onOk | 点击确定回调 | () => void | |
|
|
3282
|
-
| okText | 确认按钮文字 | string | |
|
|
3283
|
-
| okButtonProps | 确认按钮属性 | ButtonProps | |
|
|
3284
|
-
| onCancel | 点击取消回调 | () => void | |
|
|
3285
|
-
| cancelText | 取消按钮文字 | string | |
|
|
3286
|
-
| cancelButtonProps | 取消按钮属性 | ButtonProps | |
|
|
3287
|
-
| info | 底部额外内容 | React.ReactNode | |
|
|
3288
|
-
|
|
3289
|
-
<AntdApiRef url="https://ant.design/components/drawer-cn/#api"></AntdApiRef>
|
|
3290
|
-
|
|
3291
|
-
|
|
3292
|
-
## antd API
|
|
3293
|
-
|
|
3294
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3295
|
-
|
|
3296
|
-
<!-- prettier-ignore -->
|
|
3297
|
-
<Container type="warning" title="注意">
|
|
3298
|
-
v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v4 `className` 与 `style` 改至配置 Drawer 窗体样式以和 Modal 对齐。
|
|
3299
|
-
</Container>
|
|
3300
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3301
|
-
|--------|--------|--------|--------|--------|
|
|
3302
|
-
| autoFocus | 抽屉展开后是否将焦点切换至其 DOM 节点 | boolean | true | 4.17.0 |
|
|
3303
|
-
| afterOpenChange | 切换抽屉时动画结束后的回调 | function(open) | - | |
|
|
3304
|
-
| className | Drawer 容器外层 className 设置，如果需要设置最外层，请使用 rootClassName | string | - | |
|
|
3305
|
-
| classNames | 语义化结构 className | | - | 5.10.0 |
|
|
3306
|
-
| closeIcon | 自定义关闭图标。5.7.0：设置为 | ReactNode | | |
|
|
3307
|
-
| destroyOnHidden | 关闭时销毁 Drawer 里的子元素 | boolean | false | 5.25.0 |
|
|
3308
|
-
| extra | 抽屉右上角的操作区域 | ReactNode | - | 4.17.0 |
|
|
3309
|
-
| footer | 抽屉的页脚 | ReactNode | - | |
|
|
3310
|
-
| forceRender | 预渲染 Drawer 内元素 | boolean | false | |
|
|
3311
|
-
| getContainer | 指定 Drawer 挂载的节点， | HTMLElement \| () => HTMLElement \| Selectors \| false | body | |
|
|
3312
|
-
| height | 高度，在 | string \| number | 378 | |
|
|
3313
|
-
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
|
|
3314
|
-
| mask | 是否展示遮罩 | boolean | true | |
|
|
3315
|
-
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
|
|
3316
|
-
| placement | 抽屉的方向 | top | right | |
|
|
3317
|
-
| push | 用于设置多层 Drawer 的推动行为 | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
|
|
3318
|
-
| rootStyle | 可用于设置 Drawer 最外层容器的样式，和 | CSSProperties | - | |
|
|
3319
|
-
| size | 预设抽屉宽度（或高度），default | 'default' \| 'large' | 'default' | 4.17.0 |
|
|
3320
|
-
| style | 设计 Drawer 容器样式，如果你只需要设置内容部分请使用 | CSSProperties | - | |
|
|
3321
|
-
| styles | 语义化结构 style | | - | 5.10.0 |
|
|
3322
|
-
| title | 标题 | ReactNode | - | |
|
|
3323
|
-
| loading | 显示骨架屏 | boolean | false | 5.17.0 |
|
|
3324
|
-
| open | Drawer 是否可见 | boolean | - |
|
|
3325
|
-
| width | 宽度 | string \| number | 378 | |
|
|
3326
|
-
| zIndex | 设置 Drawer 的 | number | 1000 | |
|
|
3327
|
-
| onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - | |
|
|
3328
|
-
| drawerRender | 自定义渲染抽屉 | (node: ReactNode) => ReactNode | - | 5.18.0 |
|
|
3329
|
-
|
|
3330
|
-
|
|
3331
|
-
|
|
3332
|
-
|
|
3333
|
-
<DemoTitle title="CollapsePanel" desc="折叠面板">
|
|
3374
|
+
<DemoTitle title="Collapse" desc="可以折叠/展开的内容区域">
|
|
3334
3375
|
#### API
|
|
3335
3376
|
|
|
3336
|
-
|
|
3337
|
-
|--------|--------|--------|--------|
|
|
3338
|
-
| collapsedHeight | 收起状态下显示的内容高度 | number | 0 |
|
|
3339
|
-
| expandedHeight | 展开状态下的内容高度，设置后内容超出时可滚动，不设置则自适应内容高度 | number | 300 |
|
|
3340
|
-
| title | 面板标题 | string \| React.ReactNode | "" |
|
|
3341
|
-
| expandOnPanelClick | 是否允许点击整个面板进行展开 | boolean | false |
|
|
3342
|
-
| extra | 面板右侧内容 | React.ReactNode | |
|
|
3343
|
-
| children | 面板内容 | React.ReactNode | |
|
|
3344
|
-
| defaultExpanded | 是否默认展开 | boolean | false |
|
|
3345
|
-
| classNames | 语义化的classNames | Partial> | |
|
|
3346
|
-
| styles | 语义化的styles | Partial<
|
|
3347
|
-
Record
|
|
3348
|
-
> | |
|
|
3349
|
-
|
|
3377
|
+
<AntdApiRef url="https://ant.design/components/collapse-cn/#api"></AntdApiRef>
|
|
3350
3378
|
|
|
3351
3379
|
|
|
3352
3380
|
## antd API
|
|
@@ -3401,146 +3429,151 @@ v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v
|
|
|
3401
3429
|
|
|
3402
3430
|
|
|
3403
3431
|
|
|
3404
|
-
<DemoTitle title="
|
|
3432
|
+
<DemoTitle title="CodeBlock" desc="代码块">
|
|
3405
3433
|
#### API
|
|
3406
3434
|
|
|
3407
3435
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3408
3436
|
|--------|--------|--------|--------|
|
|
3409
|
-
|
|
|
3410
|
-
|
|
|
3411
|
-
|
|
|
3437
|
+
| language | 语言 | string \| string[] | (必填) |
|
|
3438
|
+
| value | 值 | string | (必填) |
|
|
3439
|
+
| className | 类名 | string | |
|
|
3440
|
+
| theme | 主题 | 'dark' \| 'light' | |
|
|
3441
|
+
| readOnly | 只读 | boolean | |
|
|
3442
|
+
| onChange | | (value: string) => void | |
|
|
3412
3443
|
|
|
3413
3444
|
|
|
3414
|
-
|
|
3445
|
+
|
|
3446
|
+
|
|
3447
|
+
<DemoTitle title="Card" desc="通用卡片容器">
|
|
3448
|
+
#### API
|
|
3449
|
+
|
|
3450
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3451
|
+
|--------|--------|--------|--------|
|
|
3452
|
+
| info | 副标题 | ReactNode | |
|
|
3453
|
+
|
|
3454
|
+
<AntdApiRef url="https://ant.design/components/card-cn/#api"></AntdApiRef>
|
|
3415
3455
|
|
|
3416
3456
|
|
|
3417
3457
|
## antd API
|
|
3418
3458
|
|
|
3419
3459
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3420
3460
|
|
|
3421
|
-
#### Checkbox
|
|
3422
|
-
|
|
3423
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3424
|
-
|--------|--------|--------|--------|--------|
|
|
3425
|
-
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
3426
|
-
| checked | 指定当前是否选中 | boolean | false | |
|
|
3427
|
-
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
3428
|
-
| disabled | 失效状态 | boolean | false | |
|
|
3429
|
-
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false | |
|
|
3430
|
-
| onChange | 变化时的回调函数 | (e: CheckboxChangeEvent) => void | - | |
|
|
3431
|
-
| onBlur | 失去焦点时的回调 | function() | - | |
|
|
3432
|
-
| onFocus | 获得焦点时的回调 | function() | - | |
|
|
3433
3461
|
|
|
3462
|
+
```jsx
|
|
3463
|
+
<Card title="卡片标题">卡片内容</Card>
|
|
3464
|
+
```
|
|
3434
3465
|
|
|
3435
|
-
#### Checkbox.Group
|
|
3436
3466
|
|
|
3437
3467
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3438
3468
|
|--------|--------|--------|--------|--------|
|
|
3439
|
-
|
|
|
3440
|
-
|
|
|
3441
|
-
|
|
|
3442
|
-
|
|
|
3443
|
-
|
|
|
3444
|
-
|
|
|
3445
|
-
|
|
|
3446
|
-
|
|
|
3447
|
-
|
|
|
3448
|
-
|
|
3449
|
-
|
|
3450
|
-
|
|
3469
|
+
| actions | 卡片操作组，位置在卡片底部 | Array | - | |
|
|
3470
|
+
| activeTabKey | 当前激活页签的 key | string | - | |
|
|
3471
|
+
| variant | 形态变体 | outlined | outlined | 5.24.0 |
|
|
3472
|
+
| cover | 卡片封面 | ReactNode | - | |
|
|
3473
|
+
| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | 第一个页签的 key | |
|
|
3474
|
+
| extra | 卡片右上角的操作区域 | ReactNode | - | |
|
|
3475
|
+
| hoverable | 鼠标移过时可浮起 | boolean | false | |
|
|
3476
|
+
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false | |
|
|
3477
|
+
| size | card 的尺寸 | default | default | |
|
|
3478
|
+
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | |
|
|
3479
|
+
| tabList | 页签标题列表 | | - | |
|
|
3480
|
+
| tabProps | | - | - | |
|
|
3481
|
+
| title | 卡片标题 | ReactNode | - | |
|
|
3482
|
+
| type | 卡片类型，可设置为 | string | - | |
|
|
3483
|
+
| classNames | 配置卡片内置模块的 className | | - | 5.14.0 |
|
|
3484
|
+
| styles | 配置卡片内置模块的 style | | - | 5.14.0 |
|
|
3485
|
+
| onTabChange | 页签切换的回调 | (key) => void | - | |
|
|
3451
3486
|
|
|
3452
3487
|
|
|
3453
|
-
|
|
3454
|
-
interface Option {
|
|
3455
|
-
label: string;
|
|
3456
|
-
value: string;
|
|
3457
|
-
disabled?: boolean;
|
|
3458
|
-
}
|
|
3459
|
-
```
|
|
3488
|
+
### Card.Grid
|
|
3460
3489
|
|
|
3490
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3491
|
+
|--------|--------|--------|--------|--------|
|
|
3492
|
+
| className | 网格容器类名 | string | - | |
|
|
3493
|
+
| hoverable | 鼠标移过时可浮起 | boolean | true | |
|
|
3494
|
+
| style | 定义网格容器类名的样式 | CSSProperties | - | |
|
|
3461
3495
|
|
|
3462
|
-
### 方法
|
|
3463
3496
|
|
|
3464
|
-
|
|
3497
|
+
### Card.Meta
|
|
3465
3498
|
|
|
3466
|
-
|
|
|
3467
|
-
|
|
3468
|
-
|
|
|
3469
|
-
|
|
|
3470
|
-
|
|
|
3499
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3500
|
+
|--------|--------|--------|--------|--------|
|
|
3501
|
+
| avatar | 头像/图标 | ReactNode | - | |
|
|
3502
|
+
| className | 容器类名 | string | - | |
|
|
3503
|
+
| description | 描述内容 | ReactNode | - | |
|
|
3504
|
+
| style | 定义容器类名的样式 | CSSProperties | - | |
|
|
3505
|
+
| title | 标题内容 | ReactNode | - | |
|
|
3471
3506
|
|
|
3472
3507
|
|
|
3473
3508
|
|
|
3474
3509
|
|
|
3475
|
-
<DemoTitle title="
|
|
3510
|
+
<DemoTitle title="Checkbox" desc="收集用户的多项选择。">
|
|
3476
3511
|
#### API
|
|
3477
3512
|
|
|
3478
3513
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3479
3514
|
|--------|--------|--------|--------|
|
|
3480
|
-
|
|
|
3481
|
-
|
|
|
3482
|
-
|
|
|
3483
|
-
| theme | 主题 | 'dark' \| 'light' | |
|
|
3484
|
-
| readOnly | 只读 | boolean | |
|
|
3485
|
-
| onChange | | (value?: string) => void | |
|
|
3515
|
+
| description | 描述文本 | string | |
|
|
3516
|
+
| descriptionClassName | 描述文本的样式类名 | string | |
|
|
3517
|
+
| descriptionStyle | 描述文本的内联样式 | React.CSSProperties | |
|
|
3486
3518
|
|
|
3487
3519
|
|
|
3520
|
+
<AntdApiRef url="https://ant.design/components/checkbox-cn/#api"></AntdApiRef>
|
|
3488
3521
|
|
|
3489
3522
|
|
|
3490
|
-
|
|
3491
|
-
#### API
|
|
3523
|
+
## antd API
|
|
3492
3524
|
|
|
3493
|
-
|
|
3525
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3494
3526
|
|
|
3527
|
+
#### Checkbox
|
|
3495
3528
|
|
|
3496
|
-
|
|
3529
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3530
|
+
|--------|--------|--------|--------|--------|
|
|
3531
|
+
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
3532
|
+
| checked | 指定当前是否选中 | boolean | false | |
|
|
3533
|
+
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
3534
|
+
| disabled | 失效状态 | boolean | false | |
|
|
3535
|
+
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false | |
|
|
3536
|
+
| onChange | 变化时的回调函数 | (e: CheckboxChangeEvent) => void | - | |
|
|
3537
|
+
| onBlur | 失去焦点时的回调 | function() | - | |
|
|
3538
|
+
| onFocus | 获得焦点时的回调 | function() | - | |
|
|
3497
3539
|
|
|
3498
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3499
3540
|
|
|
3500
|
-
|
|
3541
|
+
#### Checkbox.Group
|
|
3501
3542
|
|
|
3502
3543
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3503
3544
|
|--------|--------|--------|--------|--------|
|
|
3504
|
-
|
|
|
3505
|
-
|
|
|
3506
|
-
|
|
|
3507
|
-
|
|
|
3508
|
-
|
|
|
3509
|
-
|
|
|
3510
|
-
|
|
|
3511
|
-
|
|
|
3512
|
-
|
|
|
3513
|
-
| size | 设置折叠面板大小 | large | middle | 5.2.0 |
|
|
3514
|
-
| onChange | 切换面板的回调 | function | - | |
|
|
3515
|
-
| items | 折叠项目内容 | | - | 5.6.0 |
|
|
3545
|
+
| defaultValue | 默认选中的选项 | (string \| number)[] | [] | |
|
|
3546
|
+
| disabled | 整组失效 | boolean | false | |
|
|
3547
|
+
| name | CheckboxGroup 下所有 | string | - | |
|
|
3548
|
+
| options | 指定可选项 | string[] \| number[] \| Option[] | [] | |
|
|
3549
|
+
| value | 指定选中的选项 | (string \| number \| boolean)[] | [] | |
|
|
3550
|
+
| title | 选项的 title | string | - | |
|
|
3551
|
+
| className | 选项的类名 | string | - | 5.25.0 |
|
|
3552
|
+
| style | 选项的样式 | React.CSSProperties | - | |
|
|
3553
|
+
| onChange | 变化时的回调函数 | (checkedValue: T[]) => void | - | |
|
|
3516
3554
|
|
|
3517
3555
|
|
|
3518
|
-
|
|
3556
|
+
##### Option
|
|
3519
3557
|
|
|
3520
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3521
|
-
|--------|--------|--------|--------|--------|
|
|
3522
|
-
| classNames | 语义化结构 className | | - | 5.21.0 |
|
|
3523
|
-
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | |
|
|
3524
|
-
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3525
|
-
| key | 对应 activeKey | string \| number | - | |
|
|
3526
|
-
| label | 面板标题 | ReactNode | - | - |
|
|
3527
|
-
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3528
|
-
| styles | 语义化结构 style | | - | 5.21.0 |
|
|
3529
3558
|
|
|
3559
|
+
```typescript
|
|
3560
|
+
interface Option {
|
|
3561
|
+
label: string;
|
|
3562
|
+
value: string;
|
|
3563
|
+
disabled?: boolean;
|
|
3564
|
+
}
|
|
3565
|
+
```
|
|
3530
3566
|
|
|
3531
|
-
### Collapse.Panel
|
|
3532
3567
|
|
|
3533
|
-
|
|
3534
|
-
|
|
3535
|
-
|
|
3536
|
-
|
|
3537
|
-
|
|
|
3538
|
-
|
|
3539
|
-
|
|
|
3540
|
-
|
|
|
3541
|
-
|
|
|
3542
|
-
| key | 对应 activeKey | string \| number | - | |
|
|
3543
|
-
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3568
|
+
### 方法
|
|
3569
|
+
|
|
3570
|
+
#### Checkbox
|
|
3571
|
+
|
|
3572
|
+
| 名称 | 描述 | 版本 |
|
|
3573
|
+
|--------|--------|--------|
|
|
3574
|
+
| blur() | 移除焦点 | |
|
|
3575
|
+
| focus() | 获取焦点 | |
|
|
3576
|
+
| nativeElement | 返回 Checkbox 的 DOM 节点 | 5.17.3 |
|
|
3544
3577
|
|
|
3545
3578
|
|
|
3546
3579
|
|
|
@@ -3600,6 +3633,54 @@ type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' |
|
|
|
3600
3633
|
|
|
3601
3634
|
|
|
3602
3635
|
|
|
3636
|
+
<DemoTitle title="Audio" desc="音频展示">
|
|
3637
|
+
#### API
|
|
3638
|
+
|
|
3639
|
+
ApiParser解析结果为空
|
|
3640
|
+
|
|
3641
|
+
|
|
3642
|
+
|
|
3643
|
+
|
|
3644
|
+
|
|
3645
|
+
<DemoTitle title="Avatar" desc="用来代表用户或事物，支持图片、图标或字符展示。">
|
|
3646
|
+
#### API
|
|
3647
|
+
|
|
3648
|
+
<AntdApiRef url="https://ant.design/components/avatar-cn/#api"></AntdApiRef>
|
|
3649
|
+
|
|
3650
|
+
|
|
3651
|
+
## antd API
|
|
3652
|
+
|
|
3653
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3654
|
+
|
|
3655
|
+
### Avatar
|
|
3656
|
+
|
|
3657
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3658
|
+
|--------|--------|--------|--------|--------|
|
|
3659
|
+
| alt | 图像无法显示时的替代文本 | string | - | |
|
|
3660
|
+
| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 |
|
|
3661
|
+
| icon | 设置头像的自定义图标 | ReactNode | - | |
|
|
3662
|
+
| shape | 指定头像的形状 | circle | circle | |
|
|
3663
|
+
| size | 设置头像的大小 | number \| | default | 4.7.0 |
|
|
3664
|
+
| src | 图片类头像的资源地址或者图片元素 | string \| ReactNode | - | ReactNode: 4.8.0 |
|
|
3665
|
+
| srcSet | 设置图片类头像响应式资源地址 | string | - | |
|
|
3666
|
+
| draggable | 图片是否允许拖动 | boolean \| | true | |
|
|
3667
|
+
| crossOrigin | CORS 属性设置 | 'anonymous' | - | 4.17.0 |
|
|
3668
|
+
| onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - | |
|
|
3669
|
+
|
|
3670
|
+
|
|
3671
|
+
Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fallback 行为，优先级为 `icon` > `children`
|
|
3672
|
+
|
|
3673
|
+
### Avatar.Group <Badge>4.5.0+</Badge>
|
|
3674
|
+
|
|
3675
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3676
|
+
|--------|--------|--------|--------|--------|
|
|
3677
|
+
| max | 设置最多显示相关配置， | { count?: number; style?: CSSProperties; popover?: PopoverProps } | - | 5.18.0 |
|
|
3678
|
+
| size | 设置头像的大小 | number \| | default | 4.8.0 |
|
|
3679
|
+
| shape | 设置头像的形状 | circle | circle | 5.8.0 |
|
|
3680
|
+
|
|
3681
|
+
|
|
3682
|
+
|
|
3683
|
+
|
|
3603
3684
|
<DemoTitle title="Breadcrumb" desc="显示当前页面在系统层级结构中的位置，并能向上返回。">
|
|
3604
3685
|
#### API
|
|
3605
3686
|
|
|
@@ -3714,171 +3795,7 @@ function itemRender(currentRoute, params, items, paths) {
|
|
|
3714
3795
|
}
|
|
3715
3796
|
|
|
3716
3797
|
return <Breadcrumb itemRender={itemRender} items={items} />;
|
|
3717
|
-
```
|
|
3718
|
-
|
|
3719
|
-
|
|
3720
|
-
|
|
3721
|
-
|
|
3722
|
-
<DemoTitle title="Card" desc="通用卡片容器">
|
|
3723
|
-
#### API
|
|
3724
|
-
|
|
3725
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3726
|
-
|--------|--------|--------|--------|
|
|
3727
|
-
| info | 副标题 | ReactNode | |
|
|
3728
|
-
|
|
3729
|
-
<AntdApiRef url="https://ant.design/components/card-cn/#api"></AntdApiRef>
|
|
3730
|
-
|
|
3731
|
-
|
|
3732
|
-
## antd API
|
|
3733
|
-
|
|
3734
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3735
|
-
|
|
3736
|
-
|
|
3737
|
-
```jsx
|
|
3738
|
-
<Card title="卡片标题">卡片内容</Card>
|
|
3739
|
-
```
|
|
3740
|
-
|
|
3741
|
-
|
|
3742
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3743
|
-
|--------|--------|--------|--------|--------|
|
|
3744
|
-
| actions | 卡片操作组，位置在卡片底部 | Array | - | |
|
|
3745
|
-
| activeTabKey | 当前激活页签的 key | string | - | |
|
|
3746
|
-
| variant | 形态变体 | outlined | outlined | 5.24.0 |
|
|
3747
|
-
| cover | 卡片封面 | ReactNode | - | |
|
|
3748
|
-
| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | 第一个页签的 key | |
|
|
3749
|
-
| extra | 卡片右上角的操作区域 | ReactNode | - | |
|
|
3750
|
-
| hoverable | 鼠标移过时可浮起 | boolean | false | |
|
|
3751
|
-
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false | |
|
|
3752
|
-
| size | card 的尺寸 | default | default | |
|
|
3753
|
-
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | |
|
|
3754
|
-
| tabList | 页签标题列表 | | - | |
|
|
3755
|
-
| tabProps | | - | - | |
|
|
3756
|
-
| title | 卡片标题 | ReactNode | - | |
|
|
3757
|
-
| type | 卡片类型，可设置为 | string | - | |
|
|
3758
|
-
| classNames | 配置卡片内置模块的 className | | - | 5.14.0 |
|
|
3759
|
-
| styles | 配置卡片内置模块的 style | | - | 5.14.0 |
|
|
3760
|
-
| onTabChange | 页签切换的回调 | (key) => void | - | |
|
|
3761
|
-
|
|
3762
|
-
|
|
3763
|
-
### Card.Grid
|
|
3764
|
-
|
|
3765
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3766
|
-
|--------|--------|--------|--------|--------|
|
|
3767
|
-
| className | 网格容器类名 | string | - | |
|
|
3768
|
-
| hoverable | 鼠标移过时可浮起 | boolean | true | |
|
|
3769
|
-
| style | 定义网格容器类名的样式 | CSSProperties | - | |
|
|
3770
|
-
|
|
3771
|
-
|
|
3772
|
-
### Card.Meta
|
|
3773
|
-
|
|
3774
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3775
|
-
|--------|--------|--------|--------|--------|
|
|
3776
|
-
| avatar | 头像/图标 | ReactNode | - | |
|
|
3777
|
-
| className | 容器类名 | string | - | |
|
|
3778
|
-
| description | 描述内容 | ReactNode | - | |
|
|
3779
|
-
| style | 定义容器类名的样式 | CSSProperties | - | |
|
|
3780
|
-
| title | 标题内容 | ReactNode | - | |
|
|
3781
|
-
|
|
3782
|
-
|
|
3783
|
-
|
|
3784
|
-
|
|
3785
|
-
<DemoTitle title="Avatar" desc="用来代表用户或事物，支持图片、图标或字符展示。">
|
|
3786
|
-
#### API
|
|
3787
|
-
|
|
3788
|
-
<AntdApiRef url="https://ant.design/components/avatar-cn/#api"></AntdApiRef>
|
|
3789
|
-
|
|
3790
|
-
|
|
3791
|
-
## antd API
|
|
3792
|
-
|
|
3793
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3794
|
-
|
|
3795
|
-
### Avatar
|
|
3796
|
-
|
|
3797
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3798
|
-
|--------|--------|--------|--------|--------|
|
|
3799
|
-
| alt | 图像无法显示时的替代文本 | string | - | |
|
|
3800
|
-
| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 |
|
|
3801
|
-
| icon | 设置头像的自定义图标 | ReactNode | - | |
|
|
3802
|
-
| shape | 指定头像的形状 | circle | circle | |
|
|
3803
|
-
| size | 设置头像的大小 | number \| | default | 4.7.0 |
|
|
3804
|
-
| src | 图片类头像的资源地址或者图片元素 | string \| ReactNode | - | ReactNode: 4.8.0 |
|
|
3805
|
-
| srcSet | 设置图片类头像响应式资源地址 | string | - | |
|
|
3806
|
-
| draggable | 图片是否允许拖动 | boolean \| | true | |
|
|
3807
|
-
| crossOrigin | CORS 属性设置 | 'anonymous' | - | 4.17.0 |
|
|
3808
|
-
| onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - | |
|
|
3809
|
-
|
|
3810
|
-
|
|
3811
|
-
Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fallback 行为，优先级为 `icon` > `children`
|
|
3812
|
-
|
|
3813
|
-
### Avatar.Group <Badge>4.5.0+</Badge>
|
|
3814
|
-
|
|
3815
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3816
|
-
|--------|--------|--------|--------|--------|
|
|
3817
|
-
| max | 设置最多显示相关配置， | { count?: number; style?: CSSProperties; popover?: PopoverProps } | - | 5.18.0 |
|
|
3818
|
-
| size | 设置头像的大小 | number \| | default | 4.8.0 |
|
|
3819
|
-
| shape | 设置头像的形状 | circle | circle | 5.8.0 |
|
|
3820
|
-
|
|
3821
|
-
|
|
3822
|
-
|
|
3823
|
-
|
|
3824
|
-
<DemoTitle title="Audio" desc="音频展示">
|
|
3825
|
-
#### API
|
|
3826
|
-
|
|
3827
|
-
ApiParser解析结果为空
|
|
3828
|
-
|
|
3829
|
-
|
|
3830
|
-
|
|
3831
|
-
|
|
3832
|
-
|
|
3833
|
-
<DemoTitle title="Anchor" desc="用于跳转到页面指定位置。">
|
|
3834
|
-
#### API
|
|
3835
|
-
|
|
3836
|
-
<AntdApiRef url="https://ant.design/components/anchor-cn/#api"></AntdApiRef>
|
|
3837
|
-
|
|
3838
|
-
|
|
3839
|
-
## antd API
|
|
3840
|
-
|
|
3841
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3842
|
-
|
|
3843
|
-
### Anchor Props
|
|
3844
|
-
|
|
3845
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3846
|
-
|--------|--------|--------|--------|--------|
|
|
3847
|
-
| affix | 固定模式 | boolean \| Omit | true | object: 5.19.0 |
|
|
3848
|
-
| bounds | 锚点区域边界 | number | 5 | |
|
|
3849
|
-
| getContainer | 指定滚动的容器 | () => HTMLElement | () => window | |
|
|
3850
|
-
| getCurrentAnchor | 自定义高亮的锚点 | (activeLink: string) => string | - | |
|
|
3851
|
-
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
|
|
3852
|
-
| showInkInFixed | affix={false} | boolean | false | |
|
|
3853
|
-
| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同， | number | - | |
|
|
3854
|
-
| onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - | |
|
|
3855
|
-
| onClick | click | (e: MouseEvent, link: object) => void | - | |
|
|
3856
|
-
| items | 数据化配置选项内容，支持通过 children 嵌套 | { key, href, title, target, children }[] | - | 5.1.0 |
|
|
3857
|
-
| direction | 设置导航方向 | vertical | vertical | 5.2.0 |
|
|
3858
|
-
| replace | 替换浏览器历史记录中项目的 href 而不是推送它 | boolean | false | 5.7.0 |
|
|
3859
|
-
|
|
3860
|
-
|
|
3861
|
-
### AnchorItem
|
|
3862
|
-
|
|
3863
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3864
|
-
|--------|--------|--------|--------|--------|
|
|
3865
|
-
| key | 唯一标志 | string \| number | - | |
|
|
3866
|
-
| href | 锚点链接 | string | - | |
|
|
3867
|
-
| target | 该属性指定在何处显示链接的资源 | string | - | |
|
|
3868
|
-
| title | 文字内容 | ReactNode | - | |
|
|
3869
|
-
| children | 嵌套的 Anchor Link， | | - | |
|
|
3870
|
-
| replace | 替换浏览器历史记录中的项目 href 而不是推送它 | boolean | false | 5.7.0 |
|
|
3871
|
-
|
|
3872
|
-
|
|
3873
|
-
### Link Props
|
|
3874
|
-
|
|
3875
|
-
建议使用 items 形式。
|
|
3876
|
-
|
|
3877
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3878
|
-
|--------|--------|--------|--------|--------|
|
|
3879
|
-
| href | 锚点链接 | string | - | |
|
|
3880
|
-
| target | 该属性指定在何处显示链接的资源 | string | - | |
|
|
3881
|
-
| title | 文字内容 | ReactNode | - | |
|
|
3798
|
+
```
|
|
3882
3799
|
|
|
3883
3800
|
|
|
3884
3801
|
|
|
@@ -4056,6 +3973,270 @@ const confirmed = await modal.confirm({ ... });
|
|
|
4056
3973
|
|
|
4057
3974
|
|
|
4058
3975
|
|
|
3976
|
+
<DemoTitle title="Anchor" desc="用于跳转到页面指定位置。">
|
|
3977
|
+
#### API
|
|
3978
|
+
|
|
3979
|
+
<AntdApiRef url="https://ant.design/components/anchor-cn/#api"></AntdApiRef>
|
|
3980
|
+
|
|
3981
|
+
|
|
3982
|
+
## antd API
|
|
3983
|
+
|
|
3984
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3985
|
+
|
|
3986
|
+
### Anchor Props
|
|
3987
|
+
|
|
3988
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3989
|
+
|--------|--------|--------|--------|--------|
|
|
3990
|
+
| affix | 固定模式 | boolean \| Omit | true | object: 5.19.0 |
|
|
3991
|
+
| bounds | 锚点区域边界 | number | 5 | |
|
|
3992
|
+
| getContainer | 指定滚动的容器 | () => HTMLElement | () => window | |
|
|
3993
|
+
| getCurrentAnchor | 自定义高亮的锚点 | (activeLink: string) => string | - | |
|
|
3994
|
+
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
|
|
3995
|
+
| showInkInFixed | affix={false} | boolean | false | |
|
|
3996
|
+
| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同， | number | - | |
|
|
3997
|
+
| onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - | |
|
|
3998
|
+
| onClick | click | (e: MouseEvent, link: object) => void | - | |
|
|
3999
|
+
| items | 数据化配置选项内容，支持通过 children 嵌套 | { key, href, title, target, children }[] | - | 5.1.0 |
|
|
4000
|
+
| direction | 设置导航方向 | vertical | vertical | 5.2.0 |
|
|
4001
|
+
| replace | 替换浏览器历史记录中项目的 href 而不是推送它 | boolean | false | 5.7.0 |
|
|
4002
|
+
|
|
4003
|
+
|
|
4004
|
+
### AnchorItem
|
|
4005
|
+
|
|
4006
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
4007
|
+
|--------|--------|--------|--------|--------|
|
|
4008
|
+
| key | 唯一标志 | string \| number | - | |
|
|
4009
|
+
| href | 锚点链接 | string | - | |
|
|
4010
|
+
| target | 该属性指定在何处显示链接的资源 | string | - | |
|
|
4011
|
+
| title | 文字内容 | ReactNode | - | |
|
|
4012
|
+
| children | 嵌套的 Anchor Link， | | - | |
|
|
4013
|
+
| replace | 替换浏览器历史记录中的项目 href 而不是推送它 | boolean | false | 5.7.0 |
|
|
4014
|
+
|
|
4015
|
+
|
|
4016
|
+
### Link Props
|
|
4017
|
+
|
|
4018
|
+
建议使用 items 形式。
|
|
4019
|
+
|
|
4020
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
4021
|
+
|--------|--------|--------|--------|--------|
|
|
4022
|
+
| href | 锚点链接 | string | - | |
|
|
4023
|
+
| target | 该属性指定在何处显示链接的资源 | string | - | |
|
|
4024
|
+
| title | 文字内容 | ReactNode | - | |
|
|
4025
|
+
|
|
4026
|
+
|
|
4027
|
+
|
|
4028
|
+
|
|
4029
|
+
## 内置主题
|
|
4030
|
+
|
|
4031
|
+
Alibaba Cloud Spark Design 提供四种内置主题：
|
|
4032
|
+
|
|
4033
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
|
|
4034
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
|
|
4035
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
|
|
4036
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #676767;"></span> carbonDarkTheme（暗色模式）</div>
|
|
4037
|
+
|
|
4038
|
+
### 示例用法
|
|
4039
|
+
|
|
4040
|
+
|
|
4041
|
+
```tsx
|
|
4042
|
+
import { ConfigProvider, purpleTheme } from '@agentscope-ai/design';
|
|
4043
|
+
|
|
4044
|
+
const App = () => {
|
|
4045
|
+
return <ConfigProvider {...purpleTheme}>Hello Spark Design!</ConfigProvider>;
|
|
4046
|
+
};
|
|
4047
|
+
|
|
4048
|
+
export default App;
|
|
4049
|
+
```
|
|
4050
|
+
|
|
4051
|
+
|
|
4052
|
+
## 从 Antd token 生成您自己的主题
|
|
4053
|
+
|
|
4054
|
+
如果您已经有了 Antd 主题，仍然可以使用 generateThemeByToken 生成 spark 风格的主题
|
|
4055
|
+
|
|
4056
|
+
|
|
4057
|
+
```tsx
|
|
4058
|
+
import { ConfigProvider, generateThemeByToken } from '@agentscope-ai/design';
|
|
4059
|
+
const yourToken = {
|
|
4060
|
+
borderRadiusXS: 2,
|
|
4061
|
+
borderRadiusSM: 4,
|
|
4062
|
+
borderRadius: 6,
|
|
4063
|
+
borderRadiusLG: 8,
|
|
4064
|
+
borderRadiusXL: 12,
|
|
4065
|
+
borderRadiusFull: 999,
|
|
4066
|
+
wireframe: false,
|
|
4067
|
+
colorPrimaryBg: '#F2F0FF',
|
|
4068
|
+
colorPrimaryBgHover: '#F2F0FF',
|
|
4069
|
+
colorPrimaryBorder: '#E2DEFF',
|
|
4070
|
+
colorPrimaryBorderHover: '#BCB5FF',
|
|
4071
|
+
// ... 您可以在下一个文档中找到完整版本的 tokens：Tokens 和 CSS 变量
|
|
4072
|
+
};
|
|
4073
|
+
const darkMode = false;
|
|
4074
|
+
const yourThemeWithSparkStyle = generateThemeByToken(yourToken, darkMode);
|
|
4075
|
+
const App = () => {
|
|
4076
|
+
return (
|
|
4077
|
+
<ConfigProvider {...yourThemeWithSparkStyle}>
|
|
4078
|
+
Hello Spark Design!
|
|
4079
|
+
</ConfigProvider>
|
|
4080
|
+
);
|
|
4081
|
+
};
|
|
4082
|
+
|
|
4083
|
+
export default App;
|
|
4084
|
+
```
|
|
4085
|
+
|
|
4086
|
+
|
|
4087
|
+
您仍然可以修改生成的主题：`yourThemeWithSparkStyle`，但不建议这样做。我们建议您保持原始主题以获得 Spark Design 的最佳体验。
|
|
4088
|
+
|
|
4089
|
+
|
|
4090
|
+
|
|
4091
|
+
<div align="center"><a name="readme-top"></a>
|
|
4092
|
+
<img height="120" src="https://img.alicdn.com/imgextra/i1/O1CN01ipemFb1EzmZI9LiTe_!!6000000000423-55-tps-28-28.svg" style="border: none">
|
|
4093
|
+
<h1>Alibaba Cloud Spark Design</h1>
|
|
4094
|
+
</div>
|
|
4095
|
+
|
|
4096
|
+
# 概述
|
|
4097
|
+
|
|
4098
|
+
Alibaba Cloud Spark Design 是一个基于 Ant Design 的 React UI 组件库，包含丰富的基础组件和场景组件，专为构建优秀的 LLM 产品而设计。
|
|
4099
|
+
<br />
|
|
4100
|
+
<br />
|
|
4101
|
+
|
|
4102
|
+
## ✨ 特性
|
|
4103
|
+
|
|
4104
|
+
|
|
4105
|
+
- <img height="15" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"> 基于 Ant Design，兼容 Ant Design 生态系统。您可以无需修改代码即可切换到 Spark Design。
|
|
4106
|
+
- 🛡 使用 TypeScript 编写，具有可预测的静态类型。
|
|
4107
|
+
- 🧠 为 LLM 产品设计的各种场景组件。
|
|
4108
|
+
- 💡 与@agentscope-ai/chat 和 @agentscope-ai/flow 配合使用，构建企业级 LLM 应用。
|
|
4109
|
+
- 🎨 多种预设主题。
|
|
4110
|
+
- ☀️ 轻松切换明暗模式。
|
|
4111
|
+
|
|
4112
|
+
## 📦 安装
|
|
4113
|
+
|
|
4114
|
+
|
|
4115
|
+
```bash
|
|
4116
|
+
npm install antd @agentscope-ai/icons @agentscope-ai/design --save
|
|
4117
|
+
```
|
|
4118
|
+
|
|
4119
|
+
|
|
4120
|
+
## Tree Shaking 支持
|
|
4121
|
+
|
|
4122
|
+
@agentscope-ai/design 默认基于 ES 模块支持 tree shaking
|
|
4123
|
+
|
|
4124
|
+
## TypeScript
|
|
4125
|
+
|
|
4126
|
+
@agentscope-ai/chat 使用 TypeScript 编写并提供完整的定义文件。
|
|
4127
|
+
|
|
4128
|
+
## 内置主题
|
|
4129
|
+
|
|
4130
|
+
我们提供四种内置主题：
|
|
4131
|
+
|
|
4132
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
|
|
4133
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
|
|
4134
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
|
|
4135
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #676767;"></span> carbonDarkTheme（暗色模式）</div>
|
|
4136
|
+
|
|
4137
|
+
## 🏗️ 开源
|
|
4138
|
+
|
|
4139
|
+
[@agentscope-ai/design](https://www.npmjs.com/package/@agentscope-ai/design) 和 [@agentscope-ai/chat](https://www.npmjs.com/package/@agentscope-ai/chat) 正在积极推进开源，预计将在 2025 年底完成。目前，您可以通过 npm 访问我们的项目。
|
|
4140
|
+
|
|
4141
|
+
|
|
4142
|
+
|
|
4143
|
+
# 使用
|
|
4144
|
+
|
|
4145
|
+
如果您有自己的 iconfont 项目，可以将您的图标集成到 Spark Design 中，并通过简单的符号名称访问您的图标。
|
|
4146
|
+
|
|
4147
|
+
|
|
4148
|
+
```tsx
|
|
4149
|
+
import {
|
|
4150
|
+
ConfigProvider,
|
|
4151
|
+
purpleTheme,
|
|
4152
|
+
Button,
|
|
4153
|
+
IconFont,
|
|
4154
|
+
IconButton,
|
|
4155
|
+
} from '@agentscope-ai/design';
|
|
4156
|
+
import { Flex } from 'antd';
|
|
4157
|
+
import zhCN from 'antd/locale/zh_CN';
|
|
4158
|
+
import { useState } from 'react';
|
|
4159
|
+
|
|
4160
|
+
const App = () => {
|
|
4161
|
+
const prefix = 'sps';
|
|
4162
|
+
const iconSymbol = 'spark-effciency-line';
|
|
4163
|
+
const iconfont = '//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js'; // 您可以从 https://www.iconfont.cn/ 获取
|
|
4164
|
+
return (
|
|
4165
|
+
<ConfigProvider
|
|
4166
|
+
{...purpleTheme}
|
|
4167
|
+
prefix={prefix}
|
|
4168
|
+
prefixCls={prefix}
|
|
4169
|
+
iconfont={iconfont}
|
|
4170
|
+
locale={zhCN}
|
|
4171
|
+
style={{
|
|
4172
|
+
width: '100%',
|
|
4173
|
+
height: '100%',
|
|
4174
|
+
}}
|
|
4175
|
+
>
|
|
4176
|
+
<Flex
|
|
4177
|
+
style={{
|
|
4178
|
+
width: '100%',
|
|
4179
|
+
height: '100%',
|
|
4180
|
+
backgroundColor: `var(--${prefix}-color-bg-base)`,
|
|
4181
|
+
}}
|
|
4182
|
+
justify="center"
|
|
4183
|
+
align="center"
|
|
4184
|
+
>
|
|
4185
|
+
<Flex vertical gap={16} style={{ width: '300px', padding: '12px 0' }}>
|
|
4186
|
+
<Flex gap={8}>
|
|
4187
|
+
<div style={{ width: '100px', lineHeight: '32px' }}>IconFont:</div>
|
|
4188
|
+
<IconFont type={iconSymbol} />
|
|
4189
|
+
</Flex>
|
|
4190
|
+
<Flex gap={8}>
|
|
4191
|
+
<div style={{ width: '100px', lineHeight: '32px' }}>Button:</div>
|
|
4192
|
+
<Button type="primary" iconType={iconSymbol}>
|
|
4193
|
+
添加用户
|
|
4194
|
+
</Button>
|
|
4195
|
+
</Flex>
|
|
4196
|
+
<Flex gap={8}>
|
|
4197
|
+
<div style={{ width: '100px', lineHeight: '32px' }}>
|
|
4198
|
+
IconButton:
|
|
4199
|
+
</div>
|
|
4200
|
+
<IconButton iconType={iconSymbol}></IconButton>
|
|
4201
|
+
</Flex>
|
|
4202
|
+
</Flex>
|
|
4203
|
+
</Flex>
|
|
4204
|
+
</ConfigProvider>
|
|
4205
|
+
);
|
|
4206
|
+
};
|
|
4207
|
+
|
|
4208
|
+
export default App;
|
|
4209
|
+
```
|
|
4210
|
+
|
|
4211
|
+
|
|
4212
|
+
|
|
4213
|
+
|
|
4214
|
+
# 使用
|
|
4215
|
+
|
|
4216
|
+
|
|
4217
|
+
|
|
4218
|
+
```tsx
|
|
4219
|
+
import { SparkLoadingLine } from '@agentscope-ai/icons';
|
|
4220
|
+
|
|
4221
|
+
export default () => {
|
|
4222
|
+
return (
|
|
4223
|
+
<SparkLoadingLine
|
|
4224
|
+
className="your-class-name"
|
|
4225
|
+
style={{ color: 'var(--sps-color-primary)' }}
|
|
4226
|
+
spin
|
|
4227
|
+
size={48}
|
|
4228
|
+
/>
|
|
4229
|
+
);
|
|
4230
|
+
};
|
|
4231
|
+
|
|
4232
|
+
```
|
|
4233
|
+
|
|
4234
|
+
基本用法
|
|
4235
|
+
|
|
4236
|
+
访问 [Icon Library](https://sparkdesign.agentscope.io/#/resources/icons) 查看全部 Icon
|
|
4237
|
+
|
|
4238
|
+
|
|
4239
|
+
|
|
4059
4240
|
<DemoTitle title="Alert" desc="向用户突出显示的重要提示信息。">
|
|
4060
4241
|
#### API
|
|
4061
4242
|
|
|
@@ -4090,335 +4271,728 @@ const confirmed = await modal.confirm({ ... });
|
|
|
4090
4271
|
|
|
4091
4272
|
|
|
4092
4273
|
|
|
4093
|
-
#
|
|
4274
|
+
# 从零开始使用
|
|
4094
4275
|
|
|
4276
|
+
## 📦 安装
|
|
4095
4277
|
|
|
4096
4278
|
|
|
4097
|
-
```
|
|
4098
|
-
|
|
4279
|
+
```bash
|
|
4280
|
+
$ npm install antd @agentscope-ai/icons @agentscope-ai/design --save
|
|
4281
|
+
```
|
|
4099
4282
|
|
|
4100
|
-
|
|
4283
|
+
|
|
4284
|
+
## 🔨 使用
|
|
4285
|
+
|
|
4286
|
+
|
|
4287
|
+
```tsx
|
|
4288
|
+
import {
|
|
4289
|
+
Button,
|
|
4290
|
+
Image,
|
|
4291
|
+
ConfigProvider,
|
|
4292
|
+
purpleDarkTheme,
|
|
4293
|
+
purpleTheme,
|
|
4294
|
+
} from '@agentscope-ai/design';
|
|
4295
|
+
import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
|
|
4296
|
+
import { Flex } from 'antd';
|
|
4297
|
+
import zhCN from 'antd/locale/zh_CN';
|
|
4298
|
+
import { useState } from 'react';
|
|
4299
|
+
|
|
4300
|
+
const App = () => {
|
|
4301
|
+
const [colorMode, setColorMode] = useState('light');
|
|
4302
|
+
const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
|
|
4303
|
+
|
|
4304
|
+
const prefix = 'sps';
|
|
4101
4305
|
return (
|
|
4102
|
-
<
|
|
4103
|
-
|
|
4104
|
-
|
|
4105
|
-
|
|
4106
|
-
|
|
4107
|
-
|
|
4306
|
+
<ConfigProvider
|
|
4307
|
+
{...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
|
|
4308
|
+
prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
|
|
4309
|
+
prefixCls={prefix}
|
|
4310
|
+
iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
|
|
4311
|
+
locale={zhCN} // 来自 Ant Design 的语言包
|
|
4312
|
+
style={{
|
|
4313
|
+
width: '100%',
|
|
4314
|
+
height: '100%',
|
|
4315
|
+
}}
|
|
4316
|
+
>
|
|
4317
|
+
<div
|
|
4318
|
+
style={{
|
|
4319
|
+
width: '100%',
|
|
4320
|
+
height: '100%',
|
|
4321
|
+
backgroundColor: `var(--${prefix}-color-bg-base)`,
|
|
4322
|
+
}}
|
|
4323
|
+
>
|
|
4324
|
+
<Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
|
|
4325
|
+
<Image
|
|
4326
|
+
width={120}
|
|
4327
|
+
src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
|
|
4328
|
+
/>
|
|
4329
|
+
<div
|
|
4330
|
+
style={{
|
|
4331
|
+
color: `var(--${prefix}-ant-color-text-base)`,
|
|
4332
|
+
fontSize: '24px',
|
|
4333
|
+
textAlign: 'center',
|
|
4334
|
+
}}
|
|
4335
|
+
>
|
|
4336
|
+
Hello Spark Design!
|
|
4337
|
+
</div>
|
|
4338
|
+
<Button
|
|
4339
|
+
type="primary"
|
|
4340
|
+
onClick={() => {
|
|
4341
|
+
setColorMode(colorMode === 'light' ? 'dark' : 'light');
|
|
4342
|
+
}}
|
|
4343
|
+
icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
|
|
4344
|
+
>
|
|
4345
|
+
{colorMode === 'light' ? '暗色' : '亮色'} 模式
|
|
4346
|
+
</Button>
|
|
4347
|
+
</Flex>
|
|
4348
|
+
</div>
|
|
4349
|
+
</ConfigProvider>
|
|
4108
4350
|
);
|
|
4109
4351
|
};
|
|
4110
4352
|
|
|
4353
|
+
export default App;
|
|
4111
4354
|
```
|
|
4112
4355
|
|
|
4113
|
-
基本用法
|
|
4114
4356
|
|
|
4115
|
-
访问 [Icon Library](https://sparkdesign.agentscope.io/#/resources/icons) 查看全部 Icon
|
|
4116
4357
|
|
|
4117
4358
|
|
|
4359
|
+
# 从 Antd 迁移
|
|
4118
4360
|
|
|
4119
|
-
|
|
4361
|
+
## 📦 安装
|
|
4120
4362
|
|
|
4121
4363
|
|
|
4364
|
+
```bash
|
|
4365
|
+
$ npm install @agentscope-ai/icons @agentscope-ai/design --save
|
|
4366
|
+
```
|
|
4122
4367
|
|
|
4123
|
-
```tsx
|
|
4124
|
-
import React, { useEffect, useMemo, useState } from 'react';
|
|
4125
|
-
import * as SparkIcons from '@agentscope-ai/icons';
|
|
4126
|
-
import { Input, Radio, message, copy } from '@agentscope-ai/design';
|
|
4127
|
-
import { createStyles } from 'antd-style';
|
|
4128
|
-
import { useLocale } from 'dumi';
|
|
4129
|
-
import { SparkSearchLine } from '@agentscope-ai/icons';
|
|
4130
|
-
import { categorizeIcon, ICON_CATEGORIES } from './iconCategories';
|
|
4131
|
-
import $i18n from '@/i18n';
|
|
4132
|
-
|
|
4133
|
-
/**
|
|
4134
|
-
* Icons Library
|
|
4135
|
-
* - 自动枚举并展示 @agentscope-ai/icons 的全部导出图标
|
|
4136
|
-
* - 支持搜索、点击复制
|
|
4137
|
-
*/
|
|
4138
|
-
|
|
4139
|
-
interface IconItem {
|
|
4140
|
-
/** 图标导出名称 */
|
|
4141
|
-
name: string;
|
|
4142
|
-
/** 图标 React 组件 */
|
|
4143
|
-
Icon: React.ComponentType<any>;
|
|
4144
|
-
/** 图标分类 */
|
|
4145
|
-
category: string;
|
|
4146
|
-
}
|
|
4147
4368
|
|
|
4148
|
-
|
|
4369
|
+
## 🔨 使用
|
|
4149
4370
|
|
|
4150
|
-
|
|
4151
|
-
container: {
|
|
4152
|
-
position: 'relative',
|
|
4153
|
-
padding: 16,
|
|
4154
|
-
paddingTop: 72,
|
|
4155
|
-
},
|
|
4156
|
-
toolbar: {
|
|
4157
|
-
position: 'fixed',
|
|
4158
|
-
width: '100%',
|
|
4159
|
-
padding: '16px',
|
|
4160
|
-
top: 0,
|
|
4161
|
-
left: 0,
|
|
4162
|
-
display: 'flex',
|
|
4163
|
-
gap: 12,
|
|
4164
|
-
alignItems: 'center',
|
|
4165
|
-
justifyContent: 'space-between',
|
|
4166
|
-
flexWrap: 'wrap',
|
|
4167
|
-
background: 'var(--sps-color-bg-base)',
|
|
4168
|
-
borderBottom: '1px solid var(--sps-color-border-secondary)',
|
|
4169
|
-
marginBottom: '16px',
|
|
4170
|
-
},
|
|
4171
|
-
toolbarLeft: {
|
|
4172
|
-
display: 'flex',
|
|
4173
|
-
gap: 12,
|
|
4174
|
-
alignItems: 'center',
|
|
4175
|
-
},
|
|
4176
|
-
toolbarRight: {
|
|
4177
|
-
display: 'flex',
|
|
4178
|
-
gap: 12,
|
|
4179
|
-
alignItems: 'center',
|
|
4180
|
-
justifyContent: 'flex-end',
|
|
4181
|
-
flexWrap: 'wrap',
|
|
4182
|
-
},
|
|
4183
|
-
search: {
|
|
4184
|
-
maxWidth: 300,
|
|
4185
|
-
},
|
|
4186
|
-
count: {
|
|
4187
|
-
color: 'var(--sps-color-text-tertiary)',
|
|
4188
|
-
fontSize: 12,
|
|
4189
|
-
},
|
|
4190
|
-
groups: {
|
|
4191
|
-
marginTop: 16,
|
|
4192
|
-
display: 'flex',
|
|
4193
|
-
flexDirection: 'column',
|
|
4194
|
-
gap: 24,
|
|
4195
|
-
},
|
|
4196
|
-
groupTitle: {
|
|
4197
|
-
fontSize: 14,
|
|
4198
|
-
fontWeight: 600,
|
|
4199
|
-
color: 'var(--sps-color-text-base)',
|
|
4200
|
-
marginBottom: 12,
|
|
4201
|
-
},
|
|
4202
|
-
groupCount: {
|
|
4203
|
-
marginLeft: 8,
|
|
4204
|
-
fontSize: 12,
|
|
4205
|
-
fontWeight: 400,
|
|
4206
|
-
color: 'var(--sps-color-text-tertiary)',
|
|
4207
|
-
},
|
|
4208
|
-
grid: {
|
|
4209
|
-
display: 'grid',
|
|
4210
|
-
gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
|
|
4211
|
-
gap: 12,
|
|
4212
|
-
},
|
|
4213
|
-
card: {
|
|
4214
|
-
padding: 12,
|
|
4215
|
-
borderRadius: 8,
|
|
4216
|
-
cursor: 'pointer',
|
|
4217
|
-
border: '1px solid var(--sps-color-border-secondary)',
|
|
4218
|
-
background: 'var(--sps-color-bg-base)',
|
|
4219
|
-
},
|
|
4220
|
-
iconWrap: {
|
|
4221
|
-
width: 48,
|
|
4222
|
-
height: 48,
|
|
4223
|
-
display: 'flex',
|
|
4224
|
-
alignItems: 'center',
|
|
4225
|
-
justifyContent: 'center',
|
|
4226
|
-
},
|
|
4227
|
-
name: {
|
|
4228
|
-
marginTop: 8,
|
|
4229
|
-
fontSize: 12,
|
|
4230
|
-
lineHeight: '16px',
|
|
4231
|
-
color: 'var(--sps-color-text-tertiary)',
|
|
4232
|
-
overflow: 'hidden',
|
|
4233
|
-
textOverflow: 'ellipsis',
|
|
4234
|
-
whiteSpace: 'nowrap',
|
|
4235
|
-
width: '100%',
|
|
4236
|
-
fontFamily:
|
|
4237
|
-
'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
|
4238
|
-
},
|
|
4239
|
-
}));
|
|
4371
|
+
从 @agentscope-ai/design 导出的所有同名组件在 API 方面都与 antd 的对应组件兼容，这意味着您无需学习如何使用它们。如果您想充分利用 Alibaba Cloud Spark Design 的新功能，可以尝试使用这些组件而不是 antd 的组件。
|
|
4240
4372
|
|
|
4241
|
-
|
|
4242
|
-
|
|
4243
|
-
|
|
4244
|
-
|
|
4245
|
-
|
|
4246
|
-
|
|
4247
|
-
|
|
4248
|
-
|
|
4249
|
-
|
|
4250
|
-
|
|
4251
|
-
|
|
4252
|
-
|
|
4253
|
-
|
|
4254
|
-
|
|
4255
|
-
|
|
4256
|
-
|
|
4257
|
-
|
|
4258
|
-
|
|
4259
|
-
|
|
4260
|
-
|
|
4261
|
-
|
|
4262
|
-
|
|
4263
|
-
|
|
4264
|
-
|
|
4373
|
+
|
|
4374
|
+
```tsx
|
|
4375
|
+
import {
|
|
4376
|
+
Button,
|
|
4377
|
+
Image,
|
|
4378
|
+
ConfigProvider,
|
|
4379
|
+
purpleDarkTheme,
|
|
4380
|
+
purpleTheme,
|
|
4381
|
+
} from '@agentscope-ai/design';
|
|
4382
|
+
import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
|
|
4383
|
+
import { Flex } from 'antd';
|
|
4384
|
+
import zhCN from 'antd/locale/zh_CN';
|
|
4385
|
+
import { useState } from 'react';
|
|
4386
|
+
|
|
4387
|
+
const App = () => {
|
|
4388
|
+
const [colorMode, setColorMode] = useState('light');
|
|
4389
|
+
const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
|
|
4390
|
+
|
|
4391
|
+
const prefix = 'sps';
|
|
4392
|
+
return (
|
|
4393
|
+
<ConfigProvider
|
|
4394
|
+
{...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
|
|
4395
|
+
prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
|
|
4396
|
+
prefixCls={prefix}
|
|
4397
|
+
iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
|
|
4398
|
+
locale={zhCN} // 来自 Ant Design 的语言包
|
|
4399
|
+
style={{
|
|
4400
|
+
width: '100%',
|
|
4401
|
+
height: '100%',
|
|
4402
|
+
}}
|
|
4403
|
+
>
|
|
4404
|
+
<div
|
|
4405
|
+
style={{
|
|
4406
|
+
width: '100%',
|
|
4407
|
+
height: '100%',
|
|
4408
|
+
backgroundColor: `var(--${prefix}-color-bg-base)`,
|
|
4409
|
+
}}
|
|
4410
|
+
>
|
|
4411
|
+
<Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
|
|
4412
|
+
<Image
|
|
4413
|
+
width={120}
|
|
4414
|
+
src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
|
|
4415
|
+
/>
|
|
4416
|
+
<div
|
|
4417
|
+
style={{
|
|
4418
|
+
color: `var(--${prefix}-ant-color-text-base)`,
|
|
4419
|
+
fontSize: '24px',
|
|
4420
|
+
textAlign: 'center',
|
|
4421
|
+
}}
|
|
4422
|
+
>
|
|
4423
|
+
Hello Spark Design!
|
|
4424
|
+
</div>
|
|
4425
|
+
<Button
|
|
4426
|
+
type="primary"
|
|
4427
|
+
onClick={() => {
|
|
4428
|
+
setColorMode(colorMode === 'light' ? 'dark' : 'light');
|
|
4429
|
+
}}
|
|
4430
|
+
icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
|
|
4431
|
+
>
|
|
4432
|
+
{colorMode === 'light' ? '暗色' : '亮色'} 模式
|
|
4433
|
+
</Button>
|
|
4434
|
+
</Flex>
|
|
4435
|
+
</div>
|
|
4436
|
+
</ConfigProvider>
|
|
4265
4437
|
);
|
|
4438
|
+
};
|
|
4266
4439
|
|
|
4267
|
-
|
|
4268
|
-
|
|
4269
|
-
|
|
4270
|
-
|
|
4271
|
-
|
|
4272
|
-
return typeof Icon === 'function';
|
|
4273
|
-
})
|
|
4274
|
-
.map(([name, Icon]) => ({
|
|
4275
|
-
name,
|
|
4276
|
-
Icon: Icon as React.ComponentType<any>,
|
|
4277
|
-
category: categorizeIcon(name),
|
|
4278
|
-
}))
|
|
4279
|
-
.sort((a, b) => a.name.localeCompare(b.name));
|
|
4280
|
-
}, [excludedIcons]);
|
|
4281
|
-
|
|
4282
|
-
const filteredIcons = useMemo<IconItem[]>(() => {
|
|
4283
|
-
const q = keyword.trim().toLowerCase();
|
|
4284
|
-
if (!q) return allIcons;
|
|
4285
|
-
return allIcons.filter((item) => item.name.toLowerCase().includes(q));
|
|
4286
|
-
}, [allIcons, keyword]);
|
|
4287
|
-
|
|
4288
|
-
const groupedIcons = useMemo<Record<string, IconItem[]>>(() => {
|
|
4289
|
-
return filteredIcons.reduce<Record<string, IconItem[]>>((acc, icon) => {
|
|
4290
|
-
const key = icon.category;
|
|
4291
|
-
if (!acc[key]) acc[key] = [];
|
|
4292
|
-
acc[key].push(icon);
|
|
4293
|
-
return acc;
|
|
4294
|
-
}, {});
|
|
4295
|
-
}, [filteredIcons]);
|
|
4296
|
-
|
|
4297
|
-
const orderedCategories = useMemo<string[]>(() => {
|
|
4298
|
-
const configOrder = Object.keys(ICON_CATEGORIES);
|
|
4299
|
-
const existing = new Set(Object.keys(groupedIcons));
|
|
4300
|
-
const ordered = configOrder.filter((k) => existing.has(k));
|
|
4301
|
-
const rest = Object.keys(groupedIcons)
|
|
4302
|
-
.filter((k) => !configOrder.includes(k))
|
|
4303
|
-
.sort((a, b) => a.localeCompare(b));
|
|
4304
|
-
return [...ordered, ...rest];
|
|
4305
|
-
}, [groupedIcons]);
|
|
4306
|
-
|
|
4307
|
-
const handleCopy = (item: IconItem) => {
|
|
4308
|
-
let text = item.name;
|
|
4309
|
-
if (copyMode === 'import') {
|
|
4310
|
-
text = `import { ${item.name} } from '@agentscope-ai/icons';`;
|
|
4311
|
-
}
|
|
4312
|
-
if (copyMode === 'jsx') {
|
|
4313
|
-
text = `<${item.name} style={{ fontSize: 24 }} />`;
|
|
4314
|
-
}
|
|
4440
|
+
export default App;
|
|
4441
|
+
```
|
|
4442
|
+
|
|
4443
|
+
|
|
4444
|
+
如果您想继续使用 antd 的组件，那也没问题。您只需要将 antd 的 ConfigProvider 替换为 @agentscope-ai/design 的即可。
|
|
4315
4445
|
|
|
4316
|
-
copy(text);
|
|
4317
|
-
message.success(
|
|
4318
|
-
$i18n.get({
|
|
4319
|
-
id: 'docs.icons.IconLibrary.CopySuccess',
|
|
4320
|
-
dm: '已复制',
|
|
4321
|
-
}),
|
|
4322
|
-
);
|
|
4323
|
-
};
|
|
4324
4446
|
|
|
4447
|
+
```tsx
|
|
4448
|
+
import {
|
|
4449
|
+
ConfigProvider,
|
|
4450
|
+
purpleDarkTheme,
|
|
4451
|
+
purpleTheme,
|
|
4452
|
+
} from '@agentscope-ai/design';
|
|
4453
|
+
import { Button, Image, Flex } from 'antd';
|
|
4454
|
+
import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
|
|
4455
|
+
import zhCN from 'antd/locale/zh_CN';
|
|
4456
|
+
import { useState } from 'react';
|
|
4457
|
+
|
|
4458
|
+
const App = () => {
|
|
4459
|
+
const [colorMode, setColorMode] = useState('light');
|
|
4460
|
+
const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
|
|
4461
|
+
|
|
4462
|
+
const prefix = 'sps';
|
|
4325
4463
|
return (
|
|
4326
|
-
<
|
|
4327
|
-
|
|
4328
|
-
|
|
4329
|
-
|
|
4330
|
-
|
|
4331
|
-
|
|
4332
|
-
|
|
4333
|
-
|
|
4334
|
-
|
|
4335
|
-
|
|
4336
|
-
|
|
4337
|
-
|
|
4338
|
-
|
|
4464
|
+
<ConfigProvider
|
|
4465
|
+
{...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
|
|
4466
|
+
prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
|
|
4467
|
+
prefixCls={prefix}
|
|
4468
|
+
iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
|
|
4469
|
+
locale={zhCN} // 来自 Ant Design 的语言包
|
|
4470
|
+
style={{
|
|
4471
|
+
width: '100%',
|
|
4472
|
+
height: '100%',
|
|
4473
|
+
}}
|
|
4474
|
+
>
|
|
4475
|
+
<div
|
|
4476
|
+
style={{
|
|
4477
|
+
width: '100%',
|
|
4478
|
+
height: '100%',
|
|
4479
|
+
backgroundColor: `var(--${prefix}-color-bg-base)`,
|
|
4480
|
+
}}
|
|
4481
|
+
>
|
|
4482
|
+
<Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
|
|
4483
|
+
<Image
|
|
4484
|
+
width={120}
|
|
4485
|
+
src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
|
|
4339
4486
|
/>
|
|
4340
|
-
|
|
4341
|
-
|
|
4342
|
-
|
|
4343
|
-
|
|
4344
|
-
|
|
4345
|
-
|
|
4346
|
-
|
|
4347
|
-
|
|
4348
|
-
},
|
|
4349
|
-
{ count: String(filteredIcons.length) },
|
|
4350
|
-
)}
|
|
4487
|
+
<div
|
|
4488
|
+
style={{
|
|
4489
|
+
color: `var(--${prefix}-ant-color-text-base)`,
|
|
4490
|
+
fontSize: '24px',
|
|
4491
|
+
textAlign: 'center',
|
|
4492
|
+
}}
|
|
4493
|
+
>
|
|
4494
|
+
Hello Spark Design!
|
|
4351
4495
|
</div>
|
|
4352
|
-
<
|
|
4353
|
-
|
|
4354
|
-
|
|
4355
|
-
|
|
4356
|
-
|
|
4357
|
-
|
|
4358
|
-
|
|
4359
|
-
|
|
4360
|
-
|
|
4361
|
-
|
|
4362
|
-
}),
|
|
4363
|
-
value: 'name',
|
|
4364
|
-
},
|
|
4365
|
-
{
|
|
4366
|
-
label: $i18n.get({
|
|
4367
|
-
id: 'docs.icons.IconLibrary.CopyImport',
|
|
4368
|
-
dm: '复制 import',
|
|
4369
|
-
}),
|
|
4370
|
-
value: 'import',
|
|
4371
|
-
},
|
|
4372
|
-
{
|
|
4373
|
-
label: $i18n.get({
|
|
4374
|
-
id: 'docs.icons.IconLibrary.CopyJSX',
|
|
4375
|
-
dm: '复制 JSX',
|
|
4376
|
-
}),
|
|
4377
|
-
value: 'jsx',
|
|
4378
|
-
},
|
|
4379
|
-
]}
|
|
4380
|
-
/>
|
|
4381
|
-
</div>
|
|
4382
|
-
</div>
|
|
4383
|
-
|
|
4384
|
-
<div className={styles.groups}>
|
|
4385
|
-
{orderedCategories.map((category) => {
|
|
4386
|
-
const list = groupedIcons[category] || [];
|
|
4387
|
-
return (
|
|
4388
|
-
<div key={category}>
|
|
4389
|
-
<div className={styles.groupTitle}>
|
|
4390
|
-
{category}
|
|
4391
|
-
<span className={styles.groupCount}>({list.length})</span>
|
|
4392
|
-
</div>
|
|
4393
|
-
|
|
4394
|
-
<div className={styles.grid}>
|
|
4395
|
-
{list.map((item) => {
|
|
4396
|
-
const Icon = item.Icon;
|
|
4397
|
-
return (
|
|
4398
|
-
<div
|
|
4399
|
-
key={item.name}
|
|
4400
|
-
className={styles.card}
|
|
4401
|
-
onClick={() => handleCopy(item)}
|
|
4402
|
-
>
|
|
4403
|
-
<div className={styles.iconWrap}>
|
|
4404
|
-
<Icon style={{ fontSize: 24 }} />
|
|
4405
|
-
</div>
|
|
4406
|
-
<div className={styles.name} title={item.name}>
|
|
4407
|
-
{item.name}
|
|
4408
|
-
</div>
|
|
4409
|
-
</div>
|
|
4410
|
-
);
|
|
4411
|
-
})}
|
|
4412
|
-
</div>
|
|
4413
|
-
</div>
|
|
4414
|
-
);
|
|
4415
|
-
})}
|
|
4496
|
+
<Button
|
|
4497
|
+
type="primary"
|
|
4498
|
+
onClick={() => {
|
|
4499
|
+
setColorMode(colorMode === 'light' ? 'dark' : 'light');
|
|
4500
|
+
}}
|
|
4501
|
+
icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
|
|
4502
|
+
>
|
|
4503
|
+
{colorMode === 'light' ? '暗色' : '亮色'} 模式
|
|
4504
|
+
</Button>
|
|
4505
|
+
</Flex>
|
|
4416
4506
|
</div>
|
|
4417
|
-
</
|
|
4507
|
+
</ConfigProvider>
|
|
4418
4508
|
);
|
|
4509
|
+
};
|
|
4510
|
+
|
|
4511
|
+
export default App;
|
|
4512
|
+
```
|
|
4513
|
+
|
|
4514
|
+
|
|
4515
|
+
|
|
4516
|
+
|
|
4517
|
+
# Tokens
|
|
4518
|
+
|
|
4519
|
+
除了来自 [antd](https://ant.design/theme-editor) 的固有 tokens 之外，Spark Design 在原有基础上扩展了更多变量。完整的 token 示例如下所示：
|
|
4520
|
+
|
|
4521
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
|
|
4522
|
+
|
|
4523
|
+
```json
|
|
4524
|
+
{
|
|
4525
|
+
"borderRadiusXS": 2,
|
|
4526
|
+
"borderRadiusSM": 4,
|
|
4527
|
+
"borderRadius": 6,
|
|
4528
|
+
"borderRadiusLG": 8,
|
|
4529
|
+
"borderRadiusXL": 12,
|
|
4530
|
+
"borderRadiusFull": 999,
|
|
4531
|
+
"wireframe": false,
|
|
4532
|
+
"colorPrimaryBg": "rgba(97, 92, 237, 0.08)",
|
|
4533
|
+
"colorPrimaryBgHover": "#F2F0FF",
|
|
4534
|
+
"colorPrimaryBorder": "#E2DEFF",
|
|
4535
|
+
"colorPrimaryBorderHover": "#BCB5FF",
|
|
4536
|
+
"colorPrimaryHover": "#9189FA",
|
|
4537
|
+
"colorPrimary": "#615CED",
|
|
4538
|
+
"colorPrimaryActive": "#4444C7",
|
|
4539
|
+
"colorPrimaryTextHover": "#9189FA",
|
|
4540
|
+
"colorPrimaryText": "#615CED",
|
|
4541
|
+
"colorPrimaryTextActive": "#4444C7",
|
|
4542
|
+
"colorTextBase": "#26244c",
|
|
4543
|
+
"colorBgBase": "#FFFFFF",
|
|
4544
|
+
"colorText": "rgba(38, 36, 76, 0.88)",
|
|
4545
|
+
"colorTextSecondary": "rgba(38, 36, 76, 0.65)",
|
|
4546
|
+
"colorTextTertiary": "rgba(38, 36, 76, 0.45)",
|
|
4547
|
+
"colorTextQuaternary": "rgba(38, 36, 76, 0.25)",
|
|
4548
|
+
"colorBorder": "#cdd0dc",
|
|
4549
|
+
"colorBorderSecondary": "#e6e8ee",
|
|
4550
|
+
"colorFill": "#cdd0dc5c",
|
|
4551
|
+
"colorFillSecondary": "#cdd0dc33",
|
|
4552
|
+
"colorFillTertiary": "#cdd0dc26",
|
|
4553
|
+
"colorFillQuaternary": "#cdd0dc1a",
|
|
4554
|
+
"colorBgContainer": "#FFFFFF",
|
|
4555
|
+
"colorBgElevated": "#FFFFFF",
|
|
4556
|
+
"colorBgLayout": "#f9fafd",
|
|
4557
|
+
"colorBgSpotlight": "rgba(38, 36, 76, 0.85)",
|
|
4558
|
+
"colorBgMask": "rgba(20, 19, 39, 0.45)",
|
|
4559
|
+
"colorInfo": "#0B83F1",
|
|
4560
|
+
"colorInfoHover": "#5EBCFF",
|
|
4561
|
+
"colorInfoBorder": "#87D1FF",
|
|
4562
|
+
"colorInfoText": "#0B83F1",
|
|
4563
|
+
"colorInfoBg": "#E6F7FF",
|
|
4564
|
+
"colorInfoBgHover": "#B0E3FF",
|
|
4565
|
+
"colorInfoBorderHover": "#5EBCFF",
|
|
4566
|
+
"colorSuccess": "#5BB98B",
|
|
4567
|
+
"colorSuccessHover": "#ABD4BE",
|
|
4568
|
+
"colorSuccessBg": "#EBFAF0",
|
|
4569
|
+
"colorSuccessBgHover": "#DFEDE4",
|
|
4570
|
+
"colorSuccessBorder": "#D3E0D9",
|
|
4571
|
+
"colorSuccessBorderHover": "#ABD4BE",
|
|
4572
|
+
"colorWarning": "#FAAD14",
|
|
4573
|
+
"colorWarningHover": "#FFD666",
|
|
4574
|
+
"colorWarningBg": "#FFFBE6",
|
|
4575
|
+
"colorWarningBgHover": "#FFF1B8",
|
|
4576
|
+
"colorWarningBorder": "#FFE58F",
|
|
4577
|
+
"colorWarningBorderHover": "#FFD666",
|
|
4578
|
+
"colorError": "#FF4D4F",
|
|
4579
|
+
"colorErrorHover": "#FF7875",
|
|
4580
|
+
"colorErrorBg": "#FFF2F0",
|
|
4581
|
+
"colorErrorBgHover": "#FFF1F0",
|
|
4582
|
+
"colorErrorBorder": "#FFCCC7",
|
|
4583
|
+
"colorErrorBorderHover": "#FFA39E",
|
|
4584
|
+
"colorLink": "#615CED",
|
|
4585
|
+
"boxShadow": "0px 4px 6px 0px rgba(0, 0, 0, 0.08)",
|
|
4586
|
+
"boxShadowSecondary": "0px 12px 24px -16px rgba(0, 0, 0, 0.06),0px 8px 40px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
|
|
4587
|
+
|
|
4588
|
+
"colorTextWhite": "#ffffff",
|
|
4589
|
+
"colorTextOnPrimary": "#ffffff",
|
|
4590
|
+
"colorFillDisable": "#DBDAE7",
|
|
4591
|
+
"colorPurple": "#615CED",
|
|
4592
|
+
"colorPurpleHover": "#8080FF",
|
|
4593
|
+
"colorPurpleBg": "rgba(226, 222, 255, 0.8)",
|
|
4594
|
+
"colorPink": "#EC4899",
|
|
4595
|
+
"colorPinkHover": "#E593BC",
|
|
4596
|
+
"colorPinkBg": "rgba(251, 220, 239, 0.8)",
|
|
4597
|
+
"colorYellow": "#EAB308",
|
|
4598
|
+
"colorYellowHover": "#F1D372",
|
|
4599
|
+
"colorYellowBg": "rgba(255, 250, 184, 0.8)",
|
|
4600
|
+
"colorOrange": "#FA8125",
|
|
4601
|
+
"colorOrangeHover": "#E88C45",
|
|
4602
|
+
"colorOrangeBg": "rgba(255, 232, 201, 0.8)",
|
|
4603
|
+
"colorTeal": "#14B8A6",
|
|
4604
|
+
"colorTealHover": "#5FB3A9",
|
|
4605
|
+
"colorTealBg": "rgba(200, 244, 233, 0.8)",
|
|
4606
|
+
"colorBlue": "#0090FF",
|
|
4607
|
+
"colorBlueHover": "#72BCF5",
|
|
4608
|
+
"colorBlueBg": "rgba(194, 229, 255, 0.8)",
|
|
4609
|
+
"colorMauve": "#8E8C99",
|
|
4610
|
+
"colorMauveHover": "#C0BFC8",
|
|
4611
|
+
"colorMauveBg": "rgba(239, 240, 243, 0.8)",
|
|
4612
|
+
"colorSlate": "#1E293B",
|
|
4613
|
+
"colorSlateHover": "#475569",
|
|
4614
|
+
"colorSlateBg": "#E2E8F0",
|
|
4615
|
+
"colorLavender": "#A77BFF",
|
|
4616
|
+
"colorLavenderHover": "#BB99FF",
|
|
4617
|
+
"colorLavenderBg": "rgba(226, 212, 255, 0.8)",
|
|
4618
|
+
|
|
4619
|
+
"boxShadowTertiary": "0px 12px 32px -16px rgba(0, 0, 0, 0.24),0px 12px 60px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
|
|
4620
|
+
"boxShadowTertiaryLeft": "-12px 0px 32px -16px rgba(0, 0, 0, 0.24),-12px 0px 60px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
|
|
4621
|
+
"boxShadowInput": "0px 12px 24px -16px rgba(54, 54, 73, 0.04),0px 12px 40px 0px rgba(51, 51, 71, 0.08),0px 0px 1px 0px rgba(44, 44, 54, 0.02)"
|
|
4622
|
+
}
|
|
4623
|
+
```
|
|
4624
|
+
|
|
4625
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
|
|
4626
|
+
|
|
4627
|
+
```json
|
|
4628
|
+
{
|
|
4629
|
+
"borderRadiusXS": 2,
|
|
4630
|
+
"borderRadiusSM": 4,
|
|
4631
|
+
"borderRadius": 6,
|
|
4632
|
+
"borderRadiusLG": 8,
|
|
4633
|
+
"borderRadiusXL": 12,
|
|
4634
|
+
"borderRadiusFull": 999,
|
|
4635
|
+
"wireframe": false,
|
|
4636
|
+
"colorPrimaryBg": "#202041",
|
|
4637
|
+
"colorPrimaryBgHover": "#202041",
|
|
4638
|
+
"colorPrimaryBorder": "#2B2A55",
|
|
4639
|
+
"colorPrimaryBorderHover": "#373476",
|
|
4640
|
+
"colorPrimaryHover": "#857DE3",
|
|
4641
|
+
"colorPrimary": "#5551CC",
|
|
4642
|
+
"colorPrimaryActive": "#4643A1",
|
|
4643
|
+
"colorPrimaryTextHover": "#857DE3",
|
|
4644
|
+
"colorPrimaryText": "#5551CC",
|
|
4645
|
+
"colorPrimaryTextActive": "#4643A1",
|
|
4646
|
+
"colorTextBase": "#E7E7ED",
|
|
4647
|
+
"colorBgBase": "#000000",
|
|
4648
|
+
"colorText": "rgba(231, 231, 237, 0.88)",
|
|
4649
|
+
"colorTextSecondary": "rgba(231, 231, 237, 0.65)",
|
|
4650
|
+
"colorTextTertiary": "rgba(231, 231, 237, 0.45)",
|
|
4651
|
+
"colorTextQuaternary": "rgba(231, 231, 237, 0.25)",
|
|
4652
|
+
"colorBorder": "rgba(71, 71, 97, 0.8)",
|
|
4653
|
+
"colorBorderSecondary": "rgba(56, 56, 76, 0.8)",
|
|
4654
|
+
"colorFill": "rgba(231, 231, 237, 0.18)",
|
|
4655
|
+
"colorFillSecondary": "rgba(231, 231, 237, 0.12)",
|
|
4656
|
+
"colorFillTertiary": "rgba(231, 231, 237, 0.08)",
|
|
4657
|
+
"colorFillQuaternary": "rgba(231, 231, 237, 0.04)",
|
|
4658
|
+
"colorBgContainer": "#0F0F14",
|
|
4659
|
+
"colorBgElevated": "#0F0F14",
|
|
4660
|
+
"colorBgLayout": "#0F0F14",
|
|
4661
|
+
"colorBgSpotlight": "rgba(71, 71, 97, 0.85)",
|
|
4662
|
+
"colorBgMask": "rgba(5, 5, 8, 0.8)",
|
|
4663
|
+
"colorInfo": "#0B83F1",
|
|
4664
|
+
"colorInfoHover": "rgba(42, 114, 165, 1)",
|
|
4665
|
+
"colorInfoBorder": "rgba(135, 209, 255, 0.2)",
|
|
4666
|
+
"colorInfoText": "#0B83F1",
|
|
4667
|
+
"colorInfoBg": "rgba(27, 73, 115, 0.25)",
|
|
4668
|
+
"colorInfoBgHover": "rgba(27, 73, 115, 0.32)",
|
|
4669
|
+
"colorInfoBorderHover": "rgba(94, 188, 255, 0.2)",
|
|
4670
|
+
"colorSuccess": "#5BB98B",
|
|
4671
|
+
"colorSuccessHover": "rgba(87, 141, 112, 1)",
|
|
4672
|
+
"colorSuccessBg": "rgba(0, 50, 26, 0.25)",
|
|
4673
|
+
"colorSuccessBgHover": "rgba(0, 50, 26, 0.32)",
|
|
4674
|
+
"colorSuccessBorder": "rgba(211, 224, 217, 0.2)",
|
|
4675
|
+
"colorSuccessBorderHover": "rgba(171, 212, 190, 0.2)",
|
|
4676
|
+
"colorWarning": "#FAAD14",
|
|
4677
|
+
"colorWarningHover": "rgba(170, 136, 43, 1)",
|
|
4678
|
+
"colorWarningBg": "rgba(129, 116, 49, 0.25)",
|
|
4679
|
+
"colorWarningBgHover": "rgba(129, 116, 49, 0.32)",
|
|
4680
|
+
"colorWarningBorder": "rgba(255, 229, 143, 0.2)",
|
|
4681
|
+
"colorWarningBorderHover": "rgba(255, 214, 102, 0.2)",
|
|
4682
|
+
"colorError": "#FF4D4F",
|
|
4683
|
+
"colorErrorHover": "rgba(165, 50, 48, 1)",
|
|
4684
|
+
"colorErrorBg": "rgba(129, 46, 46, 0.25)",
|
|
4685
|
+
"colorErrorBgHover": "rgba(129, 46, 46, 0.32)",
|
|
4686
|
+
"colorErrorBorder": "rgba(255, 204, 199, 0.2)",
|
|
4687
|
+
"colorErrorBorderHover": "rgba(255, 163, 158, 0.2)",
|
|
4688
|
+
"colorLink": "#5551CC",
|
|
4689
|
+
"boxShadow": "0px 4px 6px 0px rgba(255, 255, 255, 0.08)",
|
|
4690
|
+
"boxShadowSecondary": "0px 12px 24px -16px rgba(255, 255, 255, 0.04),0px 8px 40px 0px rgba(255, 255, 255, 0.06),0px 0px 1px 0px rgba(255, 255, 255, 0.02)",
|
|
4691
|
+
|
|
4692
|
+
"colorTextWhite": "#fff",
|
|
4693
|
+
"colorTextOnPrimary": "#fff",
|
|
4694
|
+
"colorFillDisable": "#8D8C98",
|
|
4695
|
+
"colorPurple": "#5551CC",
|
|
4696
|
+
"colorPurpleHover": "#8383F0",
|
|
4697
|
+
"colorPurpleBg": "rgba(226, 222, 255, 0.2)",
|
|
4698
|
+
"colorPink": "#EC4899",
|
|
4699
|
+
"colorPinkHover": "#E494BC",
|
|
4700
|
+
"colorPinkBg": "rgba(251, 220, 239, 0.2)",
|
|
4701
|
+
"colorYellow": "#EAB308",
|
|
4702
|
+
"colorYellowHover": "#DBBE62",
|
|
4703
|
+
"colorYellowBg": "rgba(255, 250, 184, 0.2)",
|
|
4704
|
+
"colorOrange": "#FA8125",
|
|
4705
|
+
"colorOrangeHover": "#F7A25F",
|
|
4706
|
+
"colorOrangeBg": "rgba(255, 232, 201, 0.2)",
|
|
4707
|
+
"colorTeal": "#14B8A6",
|
|
4708
|
+
"colorTealHover": "#7BC7BE",
|
|
4709
|
+
"colorTealBg": "rgba(200, 244, 233, 0.2)",
|
|
4710
|
+
"colorBlue": "#0090FF",
|
|
4711
|
+
"colorBlueHover": "#83BFED",
|
|
4712
|
+
"colorBlueBg": "rgba(194, 229, 255, 0.2)",
|
|
4713
|
+
"colorMauve": "#8E8C99",
|
|
4714
|
+
"colorMauveHover": "#BBB8CA",
|
|
4715
|
+
"colorMauveBg": "rgba(239, 240, 243, 0.2)",
|
|
4716
|
+
"colorSlate": "#2C3A50",
|
|
4717
|
+
"colorSlateHover": "#354252",
|
|
4718
|
+
"colorSlateBg": "#232B36",
|
|
4719
|
+
"colorLavender": "#A77BFF",
|
|
4720
|
+
"colorLavenderHover": "#BFA5F3",
|
|
4721
|
+
"colorLavenderBg": "rgba(150, 143, 167, 0.48)",
|
|
4722
|
+
|
|
4723
|
+
"boxShadowTertiary": "0px 12px 32px -16px rgba(255, 255, 255, 0.16),0px 12px 60px 0px rgba(255, 255, 255, 0.08),0px 0px 1px 0px rgba(255, 255, 255, 0.02)",
|
|
4724
|
+
"boxShadowTertiaryLeft": "-12px 0px 32px -16px rgba(255, 255, 255, 0.16),-12px 0px 60px 0px rgba(255, 255, 255, 0.08),0px 0px 1px 0px rgba(255, 255, 255, 0.02);",
|
|
4725
|
+
"boxShadowInput": "0px 12px 24px -16px rgba(255, 255, 255, 0.08),0px 12px 40px 0px rgba(255, 255, 255, 0.16),0px 0px 1px 0px rgba(255, 255, 255, 0.04)"
|
|
4726
|
+
}
|
|
4727
|
+
|
|
4728
|
+
```
|
|
4729
|
+
|
|
4730
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
|
|
4731
|
+
|
|
4732
|
+
```json
|
|
4733
|
+
{
|
|
4734
|
+
"borderRadiusXS": 2,
|
|
4735
|
+
"borderRadiusSM": 4,
|
|
4736
|
+
"borderRadius": 6,
|
|
4737
|
+
"borderRadiusLG": 8,
|
|
4738
|
+
"borderRadiusXL": 12,
|
|
4739
|
+
"borderRadiusFull": 999,
|
|
4740
|
+
"wireframe": false,
|
|
4741
|
+
"colorPrimaryBg": "rgba(244, 244, 247, 1)",
|
|
4742
|
+
"colorPrimaryBgHover": "rgba(239, 239, 244, 1)",
|
|
4743
|
+
"colorPrimaryBorder": "rgba(62, 63, 66, 1)",
|
|
4744
|
+
"colorPrimaryBorderHover": "rgba(130, 132, 137, 1)",
|
|
4745
|
+
"colorPrimaryHover": "rgba(38, 38, 41, 1)",
|
|
4746
|
+
"colorPrimary": "rgba(26, 26, 29, 1)",
|
|
4747
|
+
"colorPrimaryActive": "rgba(0, 0, 0, 1)",
|
|
4748
|
+
"colorPrimaryTextHover": "rgba(38, 38, 41, 1)",
|
|
4749
|
+
"colorPrimaryText": "rgba(26, 26, 29, 1)",
|
|
4750
|
+
"colorPrimaryTextActive": "rgba(0, 0, 0, 1)",
|
|
4751
|
+
"colorTextBase": "rgba(26, 26, 29, 1)",
|
|
4752
|
+
"colorBgBase": "rgba(255, 255, 255, 1)",
|
|
4753
|
+
"colorText": "rgba(26, 26, 29, 0.88)",
|
|
4754
|
+
"colorTextSecondary": "rgba(26, 26, 29, 0.65)",
|
|
4755
|
+
"colorTextTertiary": "rgba(26, 26, 29, 0.45)",
|
|
4756
|
+
"colorTextQuaternary": "rgba(26, 26, 29, 0.25)",
|
|
4757
|
+
"colorBorder": "rgba(187, 187, 193, 1)",
|
|
4758
|
+
"colorBorderSecondary": "rgba(234, 234, 234, 1)",
|
|
4759
|
+
"colorFill": "rgba(0, 0, 43, 0.06)",
|
|
4760
|
+
"colorFillSecondary": "rgba(0, 0, 85, 0.03)",
|
|
4761
|
+
"colorFillTertiary": "rgba(205, 208, 220, 0.15)",
|
|
4762
|
+
"colorFillQuaternary": "rgba(205, 208, 220, 0.1)",
|
|
4763
|
+
"colorBgContainer": "rgba(255, 255, 255, 1)",
|
|
4764
|
+
"colorBgElevated": "rgba(255, 255, 255, 1)",
|
|
4765
|
+
"colorBgLayout": "rgba(250, 250, 251, 1)",
|
|
4766
|
+
"colorBgSpotlight": "rgba(26, 26, 29, 0.85)",
|
|
4767
|
+
"colorBgMask": "rgba(0, 0, 0, 0.45)",
|
|
4768
|
+
"colorInfo": "rgba(11, 131, 241, 1)",
|
|
4769
|
+
"colorInfoHover": "rgba(94, 188, 255, 1)",
|
|
4770
|
+
"colorInfoBorder": "rgba(135, 209, 255, 1)",
|
|
4771
|
+
"colorInfoText": "rgba(11, 131, 241, 1)",
|
|
4772
|
+
"colorInfoBg": "rgba(230, 247, 255, 1)",
|
|
4773
|
+
"colorInfoBgHover": "rgba(176, 227, 255, 1)",
|
|
4774
|
+
"colorInfoBorderHover": "rgba(94, 188, 255, 1)",
|
|
4775
|
+
"colorSuccess": "rgba(91, 185, 139, 1)",
|
|
4776
|
+
"colorSuccessHover": "rgba(171, 212, 190, 1)",
|
|
4777
|
+
"colorSuccessBg": "rgba(235, 250, 240, 1)",
|
|
4778
|
+
"colorSuccessBgHover": "rgba(223, 237, 228, 1)",
|
|
4779
|
+
"colorSuccessBorder": "rgba(211, 224, 217, 1)",
|
|
4780
|
+
"colorSuccessBorderHover": "rgba(171, 212, 190, 1)",
|
|
4781
|
+
"colorWarning": "rgba(250, 173, 20, 1)",
|
|
4782
|
+
"colorWarningHover": "rgba(255, 214, 102, 1)",
|
|
4783
|
+
"colorWarningBg": "rgba(255, 251, 230, 1)",
|
|
4784
|
+
"colorWarningBgHover": "rgba(255, 241, 184, 1)",
|
|
4785
|
+
"colorWarningBorder": "rgba(255, 229, 143, 1)",
|
|
4786
|
+
"colorWarningBorderHover": "rgba(255, 214, 102, 1)",
|
|
4787
|
+
"colorError": "rgba(255, 77, 79, 1)",
|
|
4788
|
+
"colorErrorHover": "rgba(255, 120, 117, 1)",
|
|
4789
|
+
"colorErrorBg": "rgba(255, 242, 240, 1)",
|
|
4790
|
+
"colorErrorBgHover": "rgba(255, 241, 240, 1)",
|
|
4791
|
+
"colorErrorBorder": "rgba(255, 204, 199, 1)",
|
|
4792
|
+
"colorErrorBorderHover": "rgba(255, 163, 158, 1)",
|
|
4793
|
+
"colorLink": "rgba(0, 77, 255, 1)",
|
|
4794
|
+
"boxShadow": "0px 4px 6px 0px rgba(0, 0, 0, 0.08)",
|
|
4795
|
+
"boxShadowSecondary": "0px 12px 24px -16px rgba(0, 0, 0, 0.06),0px 8px 40px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
|
|
4796
|
+
|
|
4797
|
+
"colorTextWhite": "#ffffff",
|
|
4798
|
+
"colorTextOnPrimary": "#ffffff",
|
|
4799
|
+
"colorFillDisable": "rgba(232, 232, 235, 1)",
|
|
4800
|
+
"colorPurple": "rgba(97, 92, 237, 1)",
|
|
4801
|
+
"colorPurpleHover": "#8080FF",
|
|
4802
|
+
"colorPurpleBg": "rgba(226, 222, 255, 0.8)",
|
|
4803
|
+
"colorPink": "rgba(236, 72, 153, 1)",
|
|
4804
|
+
"colorPinkHover": "#E593BC",
|
|
4805
|
+
"colorPinkBg": "rgba(251, 220, 239, 0.8)",
|
|
4806
|
+
"colorYellow": "rgba(234, 179, 8, 1)",
|
|
4807
|
+
"colorYellowHover": "#F1D372",
|
|
4808
|
+
"colorYellowBg": "rgba(255, 250, 184, 0.8)",
|
|
4809
|
+
"colorOrange": "rgba(250, 129, 37, 1)",
|
|
4810
|
+
"colorOrangeHover": "#E88C45",
|
|
4811
|
+
"colorOrangeBg": "rgba(255, 232, 201, 0.8)",
|
|
4812
|
+
"colorTeal": "rgba(20, 184, 166, 1)",
|
|
4813
|
+
"colorTealHover": "#5FB3A9",
|
|
4814
|
+
"colorTealBg": "rgba(200, 244, 233, 0.8)",
|
|
4815
|
+
"colorBlue": "rgba(0, 144, 255, 1)",
|
|
4816
|
+
"colorBlueHover": "#72BCF5",
|
|
4817
|
+
"colorBlueBg": "rgba(194, 229, 255, 0.8)",
|
|
4818
|
+
"colorMauve": "rgba(142, 140, 153, 1)",
|
|
4819
|
+
"colorMauveHover": "#C0BFC8",
|
|
4820
|
+
"colorMauveBg": "rgba(239, 240, 243, 0.8)",
|
|
4821
|
+
"colorSlate": "#2C3A50",
|
|
4822
|
+
"colorSlateHover": "#354252",
|
|
4823
|
+
"colorSlateBg": "#232B36",
|
|
4824
|
+
"boxShadowTertiary": "0px 12px 32px -16px rgba(0, 0, 0, 0.24),0px 12px 60px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
|
|
4825
|
+
"boxShadowTertiaryLeft": "-12px 0px 32px -16px rgba(0, 0, 0, 0.24),-12px 0px 60px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
|
|
4826
|
+
"boxShadowInput": "0px 12px 24px -16px rgba(54, 54, 73, 0.04),0px 12px 40px 0px rgba(51, 51, 71, 0.08),0px 0px 1px 0px rgba(44, 44, 54, 0.02)"
|
|
4419
4827
|
}
|
|
4420
4828
|
|
|
4829
|
+
```
|
|
4830
|
+
|
|
4831
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonDarkTheme</div>
|
|
4832
|
+
|
|
4833
|
+
```json
|
|
4834
|
+
{
|
|
4835
|
+
"borderRadiusXS": 2,
|
|
4836
|
+
"borderRadiusSM": 4,
|
|
4837
|
+
"borderRadius": 6,
|
|
4838
|
+
"borderRadiusLG": 8,
|
|
4839
|
+
"borderRadiusXL": 12,
|
|
4840
|
+
"borderRadiusFull": 999,
|
|
4841
|
+
"wireframe": false,
|
|
4842
|
+
"colorPrimaryBg": "#181818",
|
|
4843
|
+
"colorPrimaryBgHover": "#2E2E2E",
|
|
4844
|
+
"colorPrimaryBorder": "#323232",
|
|
4845
|
+
"colorPrimaryBorderHover": "#2C2C2C",
|
|
4846
|
+
"colorPrimaryHover": "#DFDFDF",
|
|
4847
|
+
"colorPrimary": "#E4E4E4",
|
|
4848
|
+
"colorPrimaryActive": "#7E7E7E",
|
|
4849
|
+
"colorPrimaryTextHover": "#909090",
|
|
4850
|
+
"colorPrimaryText": "#676767",
|
|
4851
|
+
"colorPrimaryTextActive": "#959595",
|
|
4852
|
+
"colorTextBase": "#E7E7ED",
|
|
4853
|
+
"colorBgBase": "#0A0A0B",
|
|
4854
|
+
"colorText": "#E7E7EDC7",
|
|
4855
|
+
"colorTextSecondary": "#E7E7EDA6",
|
|
4856
|
+
"colorTextTertiary": "#E7E7ED73",
|
|
4857
|
+
"colorTextQuaternary": "#E7E7ED40",
|
|
4858
|
+
"colorBorder": "#5B5B5BCC",
|
|
4859
|
+
"colorBorderSecondary": "#323232CC",
|
|
4860
|
+
"colorFill": "#E7E7ED2E",
|
|
4861
|
+
"colorFillSecondary": "#E7E7ED1F",
|
|
4862
|
+
"colorFillTertiary": "#E7E7ED14",
|
|
4863
|
+
"colorFillQuaternary": "#E7E7ED0A",
|
|
4864
|
+
"colorBgContainer": "#121212",
|
|
4865
|
+
"colorBgElevated": "#212121",
|
|
4866
|
+
"colorBgLayout": "#141414",
|
|
4867
|
+
"colorBgSpotlight": "#525252D9",
|
|
4868
|
+
"colorBgMask": "#050508CC",
|
|
4869
|
+
"colorInfo": "#0B83F1",
|
|
4870
|
+
"colorInfoHover": "#5EBCFF",
|
|
4871
|
+
"colorInfoBorder": "#3990C9",
|
|
4872
|
+
"colorInfoText": "#0B83F1",
|
|
4873
|
+
"colorInfoBg": "#112233",
|
|
4874
|
+
"colorInfoBgHover": "#264866",
|
|
4875
|
+
"colorInfoBorderHover": "#5EBCFF",
|
|
4876
|
+
"colorSuccess": "#5BB98B",
|
|
4877
|
+
"colorSuccessHover": "#74A47C",
|
|
4878
|
+
"colorSuccessBg": "#293631",
|
|
4879
|
+
"colorSuccessBgHover": "#3F5147",
|
|
4880
|
+
"colorSuccessBorder": "#73A377",
|
|
4881
|
+
"colorSuccessBorderHover": "#ABD4BE",
|
|
4882
|
+
"colorWarning": "#FAAD14",
|
|
4883
|
+
"colorWarningHover": "#FF8C28",
|
|
4884
|
+
"colorWarningBg": "#2D231A",
|
|
4885
|
+
"colorWarningBgHover": "#4D3B23",
|
|
4886
|
+
"colorWarningBorder": "#FFA628",
|
|
4887
|
+
"colorWarningBorderHover": "#FFD666",
|
|
4888
|
+
"colorError": "#FF4D4F",
|
|
4889
|
+
"colorErrorHover": "#EE654E",
|
|
4890
|
+
"colorErrorBg": "#2B0B08",
|
|
4891
|
+
"colorErrorBgHover": "#4A2A28",
|
|
4892
|
+
"colorErrorBorder": "#EE5B4E",
|
|
4893
|
+
"colorErrorBorderHover": "#FFA39E",
|
|
4894
|
+
"colorLink": "#4D7DFF",
|
|
4895
|
+
"boxShadow": "0px 4px 6px 0px rgba(255, 255, 255, 0.08)",
|
|
4896
|
+
"boxShadowSecondary": "0px 12px 24px -16px rgba(255, 255, 255, 0.06),0px 8px 40px 0px rgba(255, 255, 255, 0.12),0px 0px 1px 0px rgba(255, 255, 255, 0.04)",
|
|
4897
|
+
|
|
4898
|
+
"colorTextWhite": "#ffffff",
|
|
4899
|
+
"colorTextBlack": "#000000",
|
|
4900
|
+
"colorTextOnPrimary": "#000000",
|
|
4901
|
+
"colorFillDisable": "#898989",
|
|
4902
|
+
"colorPurple": "#615CED",
|
|
4903
|
+
"colorPurpleHover": "#8383F0",
|
|
4904
|
+
"colorPurpleBg": "#6964877A",
|
|
4905
|
+
"colorPink": "#EC4899",
|
|
4906
|
+
"colorPinkHover": "#E494BC",
|
|
4907
|
+
"colorPinkBg": "#53424D7A",
|
|
4908
|
+
"colorYellow": "#EAB308",
|
|
4909
|
+
"colorYellowHover": "#DBBE62",
|
|
4910
|
+
"colorYellowBg": "#9585527A",
|
|
4911
|
+
"colorOrange": "#FA8125",
|
|
4912
|
+
"colorOrangeHover": "#F7A25F",
|
|
4913
|
+
"colorOrangeBg": "#6F58417A",
|
|
4914
|
+
"colorTeal": "#14B8A6",
|
|
4915
|
+
"colorTealHover": "#7BC7BE",
|
|
4916
|
+
"colorTealBg": "#4658547A",
|
|
4917
|
+
"colorBlue": "#0090FF",
|
|
4918
|
+
"colorBlueHover": "#83BFED",
|
|
4919
|
+
"colorBlueBg": "#5E76897A",
|
|
4920
|
+
"colorMauve": "#8E8C99",
|
|
4921
|
+
"colorMauveHover": "#BBB8CA",
|
|
4922
|
+
"colorMauveBg": "#5859647A",
|
|
4923
|
+
"colorSlate": "#2C3A50",
|
|
4924
|
+
"colorSlateHover": "#354252",
|
|
4925
|
+
"colorSlateBg": "#232B36",
|
|
4926
|
+
"colorLavender": "#A77BFF",
|
|
4927
|
+
"colorLavenderHover": "#BFA5F3",
|
|
4928
|
+
"colorLavenderBg": "rgba(150, 143, 167, 0.48)",
|
|
4929
|
+
|
|
4930
|
+
"boxShadowTertiary": "0px 12px 32px -16px rgba(255, 255, 255, 0.24),0px 12px 60px 0px rgba(255, 255, 255, 0.12),0px 0px 1px 0px rgba(255, 255, 255, 0.04)",
|
|
4931
|
+
"boxShadowTertiaryLeft": "-12px 0px 32px -16px rgba(255, 255, 255, 0.24),-12px 0px 60px 0px rgba(255, 255, 255, 0.12),0px 0px 1px 0px rgba(255, 255, 255, 0.04)",
|
|
4932
|
+
"boxShadowInput": "0px 12px 24px -16px rgba(255, 255, 255, 0.08),0px 12px 40px 0px rgba(255, 255, 255, 0.16),0px 0px 1px 0px rgba(255, 255, 255, 0.04)"
|
|
4933
|
+
|
|
4934
|
+
}
|
|
4935
|
+
```
|
|
4936
|
+
|
|
4937
|
+
# CSS 变量
|
|
4421
4938
|
|
|
4939
|
+
Spark Design 默认启用 cssVar 模式，因此您可以利用 从 token 派生出的 CSS 变量来构建自己的样式。
|
|
4940
|
+
|
|
4941
|
+
|
|
4942
|
+
```less
|
|
4943
|
+
.example {
|
|
4944
|
+
background: var(--sps-color-bg-base);
|
|
4945
|
+
color: var(--sps-color-pink);
|
|
4946
|
+
}
|
|
4947
|
+
// 提示：您可以将 'sps' 替换为您自己的前缀
|
|
4422
4948
|
```
|
|
4423
4949
|
|
|
4424
|
-
|
|
4950
|
+
|
|
4951
|
+
|
|
4952
|
+
|
|
4953
|
+
### 1.0.21
|
|
4954
|
+
`2025-12-25`
|
|
4955
|
+
|
|
4956
|
+
##### Changed
|
|
4957
|
+
|
|
4958
|
+
- AlertDialog 组件：定位距离顶部的默认高度调整为当前窗口高度的 36%
|
|
4959
|
+
- Table 组件：表格行 hover 背景色修改为 `color-bg-layout` 颜色变量；表格行选中背景色修改为 `color-primary-bg-hover` 颜色变量
|
|
4960
|
+
- Select 组件：多选模式的选中项背景色调整
|
|
4961
|
+
- 主题色变量更新：,
|
|
4962
|
+
- bailianDarkTheme：添加 `"colorLinkHover": "#857DE3"`
|
|
4963
|
+
- bailianTheme：添加 `"colorLinkHover": "#8080FF"`
|
|
4964
|
+
- carbonDarkTheme：修改 `"colorTextOnPrimary": "#ffffff"`
|
|
4965
|
+
|
|
4966
|
+
##### Fixed
|
|
4967
|
+
|
|
4968
|
+
- Slider 组件：水平滑动条组件取消默认左右两边的外边距 margin，操作按钮 handle 在最左侧与最右侧不超出滑动轨道宽度
|
|
4969
|
+
|
|
4970
|
+
|
|
4971
|
+
|
|
4972
|
+
# Vibe 编程
|
|
4973
|
+
|
|
4974
|
+
## LLMs.txt
|
|
4975
|
+
|
|
4976
|
+
为了让 Cursor 和 Claude Code 等工具理解 Spark Design，我们支持 LLMs.txt 文件，使 Spark Design 的文档可供大型语言模型使用。
|
|
4977
|
+
|
|
4978
|
+
|
|
4979
|
+
- [index.llms.txt](https://g.alicdn.com/code/npm/@ali/agentscope-ai-design/4.7.2/docs-dist/llms/index.llms.txt)：主要的 LLMs.txt 索引文件
|
|
4980
|
+
- [all.llms.txt](https://g.alicdn.com/code/npm/@ali/agentscope-ai-design/4.7.2/docs-dist/llms/all.llms.txt)：Spark Design 的完整文档
|
|
4981
|
+
|
|
4982
|
+
在 Cursor 中使用 @Docs 功能将 LLMs.txt 文件包含在您的项目中。[了解更多](https://docs.cursor.com/en/context/@-symbols/@-docs)
|
|
4983
|
+
|
|
4984
|
+
## D2C
|
|
4985
|
+
|
|
4986
|
+
在前端使用 Alibaba Cloud Spark Design、设计稿使用 Spark Design 套件的前提下，通过 masterGo 视觉稿生成代码可以做到以下几点：
|
|
4987
|
+
|
|
4988
|
+
|
|
4989
|
+
- 准确识别 icon
|
|
4990
|
+
- 使用标准 css token
|
|
4991
|
+
- 无需测量间距、圆角等数据，AI 直接还原布局（90%以上概率准确生成）
|
|
4992
|
+
- 使用标准组件还原页面，大部分标准组件可一次性正确生成，无需二次调整
|
|
4993
|
+
|
|
4994
|
+
<div>
|
|
4995
|
+
<video style="width: 100%" controls src="https://cloud.video.taobao.com/vod/PrrYzvYJkoDlbJwoL8Ei1Bo_60LrKAROCojWxB_EAYs.mp4" />
|
|
4996
|
+
</div>
|
|
4997
|
+
|
|
4998
|
+
我们会在不久的将来开放 masterGo 的设计套件和 rules，帮助您高效率还原视觉稿
|