@agentscope-ai/design 1.0.26-beta.1768271896414 → 1.0.26-beta.1768889945788
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/antd/styles/button.style.js +3 -1
- package/lib/antd/themes/carbonDarkTheme.json +1 -1
- package/lib/components/commonComponents/CodeBlock/index.d.ts +2 -2
- package/lib/components/commonComponents/CodeBlock/index.js +1 -1
- package/lib/components/commonComponents/FileIcon/index.js +1 -5
- package/lib/components/commonComponents/Tabs/index.js +46 -27
- package/lib/components/commonComponents/Tooltip/index.style.js +3 -1
- package/lib/components/commonComponents/Video/index.style.js +9 -9
- package/lib/i18n/strings/en-US.json +7 -1
- package/lib/i18n/strings/zh-CN.json +7 -1
- package/llms/all.llms.txt +2081 -1168
- package/llms/index.llms.txt +48 -49
- package/package.json +6 -5
- package/lib/components/commonComponents/FileIcon/icons/audio.svg +0 -1
- package/lib/components/commonComponents/FileIcon/icons/video.svg +0 -1
package/llms/all.llms.txt
CHANGED
|
@@ -13,6 +13,119 @@
|
|
|
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
|
+
|
|
16
129
|
<DemoTitle title="Tooltip" desc="简单的文本提示气泡框">
|
|
17
130
|
#### API
|
|
18
131
|
|
|
@@ -156,6 +269,76 @@
|
|
|
156
269
|
|
|
157
270
|
|
|
158
271
|
|
|
272
|
+
<DemoTitle title="Tabs" desc="用户可以通过点击不同的标签在同一页面中查看不同的内容区域。">
|
|
273
|
+
#### API
|
|
274
|
+
|
|
275
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
276
|
+
|--------|--------|--------|--------|
|
|
277
|
+
| type | 类型 | 'line' \| 'card' \| 'editable-card' \| 'segmented' | true |
|
|
278
|
+
|
|
279
|
+
|
|
280
|
+
<AntdApiRef url="https://ant.design/components/tabs-cn/#api"></AntdApiRef>
|
|
281
|
+
|
|
282
|
+
|
|
283
|
+
## antd API
|
|
284
|
+
|
|
285
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
286
|
+
|
|
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 |
|
|
313
|
+
|
|
314
|
+
|
|
315
|
+
更多属性查看 [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
|
|
316
|
+
|
|
317
|
+
### TabItemType
|
|
318
|
+
|
|
319
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
320
|
+
|--------|--------|--------|--------|--------|
|
|
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
|
+
|
|
331
|
+
|
|
332
|
+
### MoreProps
|
|
333
|
+
|
|
334
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
335
|
+
|--------|--------|--------|--------|--------|
|
|
336
|
+
| icon | 自定义折叠图标 | ReactNode | - | |
|
|
337
|
+
| | | | | |
|
|
338
|
+
|
|
339
|
+
|
|
340
|
+
|
|
341
|
+
|
|
159
342
|
<DemoTitle title="Tag" desc="进行标记和分类的小标签">
|
|
160
343
|
#### API
|
|
161
344
|
|
|
@@ -191,193 +374,80 @@
|
|
|
191
374
|
|
|
192
375
|
|
|
193
376
|
|
|
194
|
-
<DemoTitle title="
|
|
377
|
+
<DemoTitle title="Table" desc="展示行列数据。">
|
|
195
378
|
#### API
|
|
196
379
|
|
|
197
|
-
<AntdApiRef url="https://ant.design/components/
|
|
380
|
+
<AntdApiRef url="https://ant.design/components/table-cn/#api"></AntdApiRef>
|
|
198
381
|
|
|
199
382
|
|
|
200
383
|
## antd API
|
|
201
384
|
|
|
385
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
202
386
|
|
|
387
|
+
### Table
|
|
203
388
|
|
|
204
|
-
|
|
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 | |
|
|
403
|
+
| rowSelection | 表格行是否可选择， | object | - | |
|
|
404
|
+
| rowHoverable | 表格行是否开启 hover 交互 | boolean | true | 5.16.0 |
|
|
405
|
+
| scroll | 表格是否可滚动，也可以指定滚动区域的宽、高， | object | - | |
|
|
406
|
+
| showHeader | 是否显示表头 | boolean | true | |
|
|
407
|
+
| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示。当参数类型为对象时，将被设置为 Tooltip 的属性 | boolean \| | { target: 'full-header' } | 5.16.0 |
|
|
408
|
+
| size | 表格大小 | large | large | |
|
|
409
|
+
| sortDirections | 支持的排序方式，取值为 | Array | [ | |
|
|
410
|
+
| sticky | 设置粘性头部和滚动条 | boolean \| | - | 4.6.0 (getContainer: 4.7.0) |
|
|
411
|
+
| summary | 总结栏 | (currentData) => ReactNode | - | |
|
|
412
|
+
| tableLayout | 表格元素的 | - \| | 无 | |
|
|
413
|
+
| title | 表格标题 | function(currentPageData) | - | |
|
|
414
|
+
| virtual | 支持虚拟列表 | boolean | - | 5.9.0 |
|
|
415
|
+
| onChange | 分页、排序、筛选变化时触发 | function(pagination, filters, sorter, extra: { currentDataSource: [], action: | - | |
|
|
416
|
+
| onHeaderRow | 设置头部行属性 | function(columns, index) | - | |
|
|
417
|
+
| onRow | 设置行属性 | function(record, index) | - | |
|
|
418
|
+
| onScroll | 表单内容滚动时触发（虚拟滚动下只有垂直滚动会触发事件） | function(event) | - | 5.16.0 |
|
|
205
419
|
|
|
206
420
|
|
|
207
|
-
|
|
208
|
-
import dayjs from 'dayjs';
|
|
209
|
-
import customParseFormat from 'dayjs/plugin/customParseFormat'
|
|
421
|
+
### Table ref
|
|
210
422
|
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
| renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - | |
|
|
240
|
-
| secondStep | 秒选项间隔 | number | 1 | |
|
|
241
|
-
| showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
|
|
242
|
-
| size | 输入框大小， | large | - | |
|
|
243
|
-
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
244
|
-
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
|
245
|
-
| use12Hours | 使用 12 小时制，为 true 时 | boolean | false | |
|
|
246
|
-
| value | 当前时间 | | - | |
|
|
247
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
248
|
-
| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - | |
|
|
249
|
-
| onChange | 时间发生变化的回调 | function(time: dayjs, timeString: string): void | - | |
|
|
250
|
-
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - | |
|
|
251
|
-
|
|
252
|
-
|
|
253
|
-
#### DisabledTime
|
|
254
|
-
|
|
255
|
-
|
|
256
|
-
```typescript
|
|
257
|
-
type DisabledTime = (now: Dayjs) => {
|
|
258
|
-
disabledHours?: () => number[];
|
|
259
|
-
disabledMinutes?: (selectedHour: number) => number[];
|
|
260
|
-
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
261
|
-
disabledMilliseconds?: (
|
|
262
|
-
selectedHour: number,
|
|
263
|
-
selectedMinute: number,
|
|
264
|
-
selectedSecond: number,
|
|
265
|
-
) => number[];
|
|
266
|
-
};
|
|
267
|
-
```
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
注意：`disabledMilliseconds` 为 `5.14.0` 新增。
|
|
271
|
-
|
|
272
|
-
## 方法
|
|
273
|
-
|
|
274
|
-
| 名称 | 描述 | 版本 |
|
|
275
|
-
|--------|--------|--------|
|
|
276
|
-
| blur() | 移除焦点 | |
|
|
277
|
-
| focus() | 获取焦点 | |
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
## RangePicker
|
|
281
|
-
|
|
282
|
-
属性与 DatePicker 的 [RangePicker](/components/date-picker-cn#rangepicker) 相同。还包含以下属性：
|
|
283
|
-
|
|
284
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
285
|
-
|--------|--------|--------|--------|--------|
|
|
286
|
-
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
287
|
-
| order | 始末时间是否自动排序 | boolean | true | 4.1.0 |
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
### RangeDisabledTime
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
```typescript
|
|
294
|
-
type RangeDisabledTime = (
|
|
295
|
-
now: Dayjs,
|
|
296
|
-
type = 'start' | 'end',
|
|
297
|
-
) => {
|
|
298
|
-
disabledHours?: () => number[];
|
|
299
|
-
disabledMinutes?: (selectedHour: number) => number[];
|
|
300
|
-
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
301
|
-
};
|
|
302
|
-
```
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
<DemoTitle title="Table" desc="展示行列数据。">
|
|
308
|
-
#### API
|
|
309
|
-
|
|
310
|
-
<AntdApiRef url="https://ant.design/components/table-cn/#api"></AntdApiRef>
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
## antd API
|
|
314
|
-
|
|
315
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
316
|
-
|
|
317
|
-
### Table
|
|
318
|
-
|
|
319
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
320
|
-
|--------|--------|--------|--------|--------|
|
|
321
|
-
| bordered | 是否展示外边框和列边框 | boolean | false | |
|
|
322
|
-
| columns | 表格列的配置描述，具体项见下表 | | - | |
|
|
323
|
-
| components | 覆盖默认的 table 元素 | | - | |
|
|
324
|
-
| dataSource | 数据数组 | object[] | - | |
|
|
325
|
-
| expandable | 配置展开属性 | | - | |
|
|
326
|
-
| footer | 表格尾部 | function(currentPageData) | - | |
|
|
327
|
-
| getPopupContainer | 设置表格内各类浮层的渲染节点，如筛选菜单 | (triggerNode) => HTMLElement | () => TableHtmlElement | |
|
|
328
|
-
| loading | 页面是否加载中 | boolean \| | false | |
|
|
329
|
-
| locale | 默认文案设置，目前包括排序、过滤、空数据文案 | object | | |
|
|
330
|
-
| pagination | 分页器，参考 | object \| | - | |
|
|
331
|
-
| rowClassName | 表格行的类名 | function(record, index): string | - | |
|
|
332
|
-
| rowKey | 表格行 key 的取值，可以是字符串或一个函数 | string \| function(record): string | key | |
|
|
333
|
-
| rowSelection | 表格行是否可选择， | object | - | |
|
|
334
|
-
| rowHoverable | 表格行是否开启 hover 交互 | boolean | true | 5.16.0 |
|
|
335
|
-
| scroll | 表格是否可滚动，也可以指定滚动区域的宽、高， | object | - | |
|
|
336
|
-
| showHeader | 是否显示表头 | boolean | true | |
|
|
337
|
-
| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示。当参数类型为对象时，将被设置为 Tooltip 的属性 | boolean \| | { target: 'full-header' } | 5.16.0 |
|
|
338
|
-
| size | 表格大小 | large | large | |
|
|
339
|
-
| sortDirections | 支持的排序方式，取值为 | Array | [ | |
|
|
340
|
-
| sticky | 设置粘性头部和滚动条 | boolean \| | - | 4.6.0 (getContainer: 4.7.0) |
|
|
341
|
-
| summary | 总结栏 | (currentData) => ReactNode | - | |
|
|
342
|
-
| tableLayout | 表格元素的 | - \| | 无 | |
|
|
343
|
-
| title | 表格标题 | function(currentPageData) | - | |
|
|
344
|
-
| virtual | 支持虚拟列表 | boolean | - | 5.9.0 |
|
|
345
|
-
| onChange | 分页、排序、筛选变化时触发 | function(pagination, filters, sorter, extra: { currentDataSource: [], action: | - | |
|
|
346
|
-
| onHeaderRow | 设置头部行属性 | function(columns, index) | - | |
|
|
347
|
-
| onRow | 设置行属性 | function(record, index) | - | |
|
|
348
|
-
| onScroll | 表单内容滚动时触发（虚拟滚动下只有垂直滚动会触发事件） | function(event) | - | 5.16.0 |
|
|
349
|
-
|
|
350
|
-
|
|
351
|
-
### Table ref
|
|
352
|
-
|
|
353
|
-
| 参数 | 说明 | 类型 | 版本 |
|
|
354
|
-
|--------|--------|--------|--------|
|
|
355
|
-
| nativeElement | 最外层 div 元素 | HTMLDivElement | 5.11.0 |
|
|
356
|
-
| scrollTo | 滚动到目标位置（设置 | (config: { index?: number, key?: React.Key, top?: number }) => void | 5.11.0 |
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
#### onRow 用法
|
|
360
|
-
|
|
361
|
-
适用于 `onRow` `onHeaderRow` `onCell` `onHeaderCell`。
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
```jsx
|
|
365
|
-
<Table
|
|
366
|
-
onRow={(record) => {
|
|
367
|
-
return {
|
|
368
|
-
onClick: (event) => {}, // 点击行
|
|
369
|
-
onDoubleClick: (event) => {},
|
|
370
|
-
onContextMenu: (event) => {},
|
|
371
|
-
onMouseEnter: (event) => {}, // 鼠标移入行
|
|
372
|
-
onMouseLeave: (event) => {},
|
|
373
|
-
};
|
|
374
|
-
}}
|
|
375
|
-
onHeaderRow={(columns, index) => {
|
|
376
|
-
return {
|
|
377
|
-
onClick: () => {}, // 点击表头行
|
|
378
|
-
};
|
|
379
|
-
}}
|
|
380
|
-
/>
|
|
423
|
+
| 参数 | 说明 | 类型 | 版本 |
|
|
424
|
+
|--------|--------|--------|--------|
|
|
425
|
+
| nativeElement | 最外层 div 元素 | HTMLDivElement | 5.11.0 |
|
|
426
|
+
| scrollTo | 滚动到目标位置（设置 | (config: { index?: number, key?: React.Key, top?: number }) => void | 5.11.0 |
|
|
427
|
+
|
|
428
|
+
|
|
429
|
+
#### onRow 用法
|
|
430
|
+
|
|
431
|
+
适用于 `onRow` `onHeaderRow` `onCell` `onHeaderCell`。
|
|
432
|
+
|
|
433
|
+
|
|
434
|
+
```jsx
|
|
435
|
+
<Table
|
|
436
|
+
onRow={(record) => {
|
|
437
|
+
return {
|
|
438
|
+
onClick: (event) => {}, // 点击行
|
|
439
|
+
onDoubleClick: (event) => {},
|
|
440
|
+
onContextMenu: (event) => {},
|
|
441
|
+
onMouseEnter: (event) => {}, // 鼠标移入行
|
|
442
|
+
onMouseLeave: (event) => {},
|
|
443
|
+
};
|
|
444
|
+
}}
|
|
445
|
+
onHeaderRow={(columns, index) => {
|
|
446
|
+
return {
|
|
447
|
+
onClick: () => {}, // 点击表头行
|
|
448
|
+
};
|
|
449
|
+
}}
|
|
450
|
+
/>
|
|
381
451
|
```
|
|
382
452
|
|
|
383
453
|
|
|
@@ -600,88 +670,94 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
600
670
|
|
|
601
671
|
|
|
602
672
|
|
|
603
|
-
<DemoTitle title="
|
|
673
|
+
<DemoTitle title="Steps" desc="引导用户按照流程完成任务的导航条。">
|
|
604
674
|
#### API
|
|
605
675
|
|
|
606
|
-
|
|
607
|
-
|--------|--------|--------|--------|
|
|
608
|
-
| type | 类型 | 'line' \| 'card' \| 'editable-card' \| 'segmented' | true |
|
|
609
|
-
|
|
610
|
-
|
|
611
|
-
<AntdApiRef url="https://ant.design/components/tabs-cn/#api"></AntdApiRef>
|
|
676
|
+
<AntdApiRef url="https://ant.design/components/steps-cn/#api"></AntdApiRef>
|
|
612
677
|
|
|
613
678
|
|
|
614
679
|
## antd API
|
|
615
680
|
|
|
616
681
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
617
682
|
|
|
618
|
-
###
|
|
683
|
+
### Steps
|
|
684
|
+
|
|
685
|
+
整体步骤条。
|
|
619
686
|
|
|
620
687
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
621
688
|
|--------|--------|--------|--------|--------|
|
|
622
|
-
|
|
|
623
|
-
|
|
|
624
|
-
|
|
|
625
|
-
|
|
|
626
|
-
|
|
|
627
|
-
|
|
|
628
|
-
|
|
|
629
|
-
|
|
|
630
|
-
|
|
|
631
|
-
|
|
|
632
|
-
|
|
|
633
|
-
|
|
|
634
|
-
|
|
|
635
|
-
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
|
|
636
|
-
| tabBarGutter | tabs 之间的间隙 | number | - | |
|
|
637
|
-
| tabBarStyle | tab bar 的样式对象 | CSSProperties | - | |
|
|
638
|
-
| tabPosition | 页签位置，可选值有 | string | top | |
|
|
639
|
-
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
640
|
-
| onChange | 切换面板的回调 | (activeKey: string) => void | - | |
|
|
641
|
-
| onEdit | 新增和删除页签的回调，在 | (action === 'add' ? event : targetKey, action) => void | - | |
|
|
642
|
-
| onTabClick | tab 被点击的回调 | (key: string, event: MouseEvent) => void | - | |
|
|
643
|
-
| onTabScroll | tab 滚动时触发 | ({ direction: | - | 4.3.0 |
|
|
644
|
-
|
|
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 |
|
|
645
702
|
|
|
646
|
-
更多属性查看 [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
|
|
647
703
|
|
|
648
|
-
###
|
|
704
|
+
### `type="inline"`
|
|
649
705
|
|
|
650
706
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
651
707
|
|--------|--------|--------|--------|--------|
|
|
652
|
-
|
|
|
653
|
-
|
|
|
654
|
-
|
|
|
655
|
-
|
|
|
656
|
-
|
|
|
657
|
-
|
|
|
658
|
-
| icon | 选项卡头显示图标 | ReactNode | - | 5.12.0 |
|
|
659
|
-
| children | 选项卡头显示内容 | ReactNode | - | |
|
|
660
|
-
| 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 |
|
|
661
714
|
|
|
662
715
|
|
|
663
|
-
###
|
|
716
|
+
### StepItem
|
|
717
|
+
|
|
718
|
+
步骤条内的每一个步骤。
|
|
664
719
|
|
|
665
720
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
666
721
|
|--------|--------|--------|--------|--------|
|
|
667
|
-
|
|
|
668
|
-
|
|
|
722
|
+
| description | 步骤的详情描述，可选 | ReactNode | - | |
|
|
723
|
+
| disabled | 禁用点击 | boolean | false | |
|
|
724
|
+
| icon | 步骤图标的类型，可选 | ReactNode | - | |
|
|
725
|
+
| status | 指定状态。当不配置该属性时，会使用 Steps 的 | string | wait | |
|
|
726
|
+
| subTitle | 子标题 | ReactNode | - | |
|
|
727
|
+
| title | 标题 | ReactNode | - | |
|
|
669
728
|
|
|
670
729
|
|
|
671
730
|
|
|
672
731
|
|
|
673
|
-
<DemoTitle title="
|
|
732
|
+
<DemoTitle title="Spinner" desc="指示页面或区块的加载中状态">
|
|
674
733
|
#### API
|
|
675
734
|
|
|
676
|
-
|
|
677
|
-
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
|
|
684
|
-
|
|
735
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
736
|
+
|--------|--------|--------|--------|
|
|
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 |
|
|
745
|
+
|
|
746
|
+
|
|
747
|
+
|
|
748
|
+
|
|
749
|
+
<DemoTitle title="Statistic" desc="展示统计数值">
|
|
750
|
+
#### API
|
|
751
|
+
|
|
752
|
+
<AntdApiRef url="https://ant.design/components/statistic-cn/#api"></AntdApiRef>
|
|
753
|
+
|
|
754
|
+
|
|
755
|
+
## antd API
|
|
756
|
+
|
|
757
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
758
|
+
|
|
759
|
+
#### Statistic
|
|
760
|
+
|
|
685
761
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
686
762
|
|--------|--------|--------|--------|--------|
|
|
687
763
|
| decimalSeparator | 设置小数点 | string | . | |
|
|
@@ -730,78 +806,66 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
730
806
|
|
|
731
807
|
|
|
732
808
|
|
|
733
|
-
<DemoTitle title="
|
|
809
|
+
<DemoTitle title="Slider" desc="滑动型输入器，展示当前值和可选范围。">
|
|
734
810
|
#### API
|
|
735
811
|
|
|
736
|
-
<AntdApiRef url="https://ant.design/components/
|
|
812
|
+
<AntdApiRef url="https://ant.design/components/slider-cn/#api"></AntdApiRef>
|
|
737
813
|
|
|
738
814
|
|
|
739
815
|
## antd API
|
|
740
816
|
|
|
741
817
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
742
818
|
|
|
743
|
-
### Steps
|
|
744
|
-
|
|
745
|
-
整体步骤条。
|
|
746
|
-
|
|
747
819
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
748
820
|
|--------|--------|--------|--------|--------|
|
|
749
|
-
|
|
|
750
|
-
|
|
|
751
|
-
|
|
|
752
|
-
|
|
|
753
|
-
|
|
|
754
|
-
|
|
|
755
|
-
|
|
|
756
|
-
|
|
|
757
|
-
|
|
|
758
|
-
|
|
|
759
|
-
|
|
|
760
|
-
|
|
|
761
|
-
|
|
|
821
|
+
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
822
|
+
| classNames | 语义化结构 className | | - | 5.10.0 |
|
|
823
|
+
| defaultValue | 设置初始取值。当 | number \| [number, number] | 0 \| [0, 0] | |
|
|
824
|
+
| disabled | 值为 true 时，滑块为禁用状态 | boolean | false | |
|
|
825
|
+
| keyboard | 支持使用键盘操作 handler | boolean | true | 5.2.0+ |
|
|
826
|
+
| dots | 是否只能拖拽到刻度上 | boolean | false | |
|
|
827
|
+
| included | marks | boolean | true | |
|
|
828
|
+
| marks | 刻度标记，key 的类型必须为 | object | { number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } } | |
|
|
829
|
+
| max | 最大值 | number | 100 | |
|
|
830
|
+
| min | 最小值 | number | 0 | |
|
|
831
|
+
| range | 双滑块模式 | boolean \| | false | |
|
|
832
|
+
| reverse | 反向坐标轴 | boolean | false | |
|
|
833
|
+
| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 | number \| null | 1 | |
|
|
834
|
+
| styles | 语义化结构 styles | | - | 5.10.0 |
|
|
835
|
+
| tooltip | 设置 Tooltip 相关属性 | | - | 4.23.0 |
|
|
836
|
+
| value | 设置当前取值。当 | number \| [number, number] | - | |
|
|
837
|
+
| vertical | 值为 true 时，Slider 为垂直方向 | boolean | false | |
|
|
838
|
+
| onChangeComplete | 与 | (value) => void | - | |
|
|
839
|
+
| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | (value) => void | - | |
|
|
762
840
|
|
|
763
841
|
|
|
764
|
-
###
|
|
842
|
+
### range
|
|
765
843
|
|
|
766
844
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
767
845
|
|--------|--------|--------|--------|--------|
|
|
768
|
-
|
|
|
769
|
-
|
|
|
770
|
-
|
|
|
771
|
-
|
|
|
772
|
-
| onChange | 点击切换步骤时触发 | (current) => void | - | |
|
|
773
|
-
| items | 配置选项卡内容，不支持 | | [] | 4.24.0 |
|
|
774
|
-
|
|
846
|
+
| draggableTrack | 范围刻度是否可被拖拽 | boolean | false | |
|
|
847
|
+
| editable | 启动动态增减节点，不能和 | boolean | false | 5.20.0 |
|
|
848
|
+
| minCount | 配置 | number | 0 | 5.20.0 |
|
|
849
|
+
| maxCount | 配置 | number | - | 5.20.0 |
|
|
775
850
|
|
|
776
|
-
### StepItem
|
|
777
851
|
|
|
778
|
-
|
|
852
|
+
### tooltip
|
|
779
853
|
|
|
780
854
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
781
855
|
|--------|--------|--------|--------|--------|
|
|
782
|
-
|
|
|
783
|
-
|
|
|
784
|
-
|
|
|
785
|
-
|
|
|
786
|
-
|
|
|
787
|
-
| title | 标题 | ReactNode | - | |
|
|
788
|
-
|
|
789
|
-
|
|
856
|
+
| autoAdjustOverflow | 是否自动调整弹出位置 | boolean | true | 5.8.0 |
|
|
857
|
+
| open | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时 | boolean | - | 4.23.0 |
|
|
858
|
+
| placement | 设置 Tooltip 展示位置。参考 | string | - | 4.23.0 |
|
|
859
|
+
| getPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
|
|
860
|
+
| formatter | Slider 会把当前值传给 | value => ReactNode \| null | IDENTITY | 4.23.0 |
|
|
790
861
|
|
|
791
862
|
|
|
792
|
-
|
|
793
|
-
#### API
|
|
863
|
+
## 方法
|
|
794
864
|
|
|
795
|
-
|
|
|
796
|
-
|
|
797
|
-
|
|
|
798
|
-
|
|
|
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 |
|
|
865
|
+
| 名称 | 描述 | 版本 |
|
|
866
|
+
|--------|--------|--------|
|
|
867
|
+
| blur() | 移除焦点 | |
|
|
868
|
+
| focus() | 获取焦点 | |
|
|
805
869
|
|
|
806
870
|
|
|
807
871
|
|
|
@@ -904,82 +968,6 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
904
968
|
|
|
905
969
|
|
|
906
970
|
|
|
907
|
-
<DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。">
|
|
908
|
-
## API
|
|
909
|
-
|
|
910
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
911
|
-
|--------|--------|--------|--------|
|
|
912
|
-
| texture | 是否显示纹理 | boolean | false |
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
|
|
919
|
-
<DemoTitle title="Slider" desc="滑动型输入器，展示当前值和可选范围。">
|
|
920
|
-
#### API
|
|
921
|
-
|
|
922
|
-
<AntdApiRef url="https://ant.design/components/slider-cn/#api"></AntdApiRef>
|
|
923
|
-
|
|
924
|
-
|
|
925
|
-
## antd API
|
|
926
|
-
|
|
927
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
928
|
-
|
|
929
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
930
|
-
|--------|--------|--------|--------|--------|
|
|
931
|
-
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
932
|
-
| classNames | 语义化结构 className | | - | 5.10.0 |
|
|
933
|
-
| defaultValue | 设置初始取值。当 | number \| [number, number] | 0 \| [0, 0] | |
|
|
934
|
-
| disabled | 值为 true 时，滑块为禁用状态 | boolean | false | |
|
|
935
|
-
| keyboard | 支持使用键盘操作 handler | boolean | true | 5.2.0+ |
|
|
936
|
-
| dots | 是否只能拖拽到刻度上 | boolean | false | |
|
|
937
|
-
| included | marks | boolean | true | |
|
|
938
|
-
| marks | 刻度标记，key 的类型必须为 | object | { number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } } | |
|
|
939
|
-
| max | 最大值 | number | 100 | |
|
|
940
|
-
| min | 最小值 | number | 0 | |
|
|
941
|
-
| range | 双滑块模式 | boolean \| | false | |
|
|
942
|
-
| reverse | 反向坐标轴 | boolean | false | |
|
|
943
|
-
| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 | number \| null | 1 | |
|
|
944
|
-
| styles | 语义化结构 styles | | - | 5.10.0 |
|
|
945
|
-
| tooltip | 设置 Tooltip 相关属性 | | - | 4.23.0 |
|
|
946
|
-
| value | 设置当前取值。当 | number \| [number, number] | - | |
|
|
947
|
-
| vertical | 值为 true 时，Slider 为垂直方向 | boolean | false | |
|
|
948
|
-
| onChangeComplete | 与 | (value) => void | - | |
|
|
949
|
-
| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | (value) => void | - | |
|
|
950
|
-
|
|
951
|
-
|
|
952
|
-
### range
|
|
953
|
-
|
|
954
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
955
|
-
|--------|--------|--------|--------|--------|
|
|
956
|
-
| draggableTrack | 范围刻度是否可被拖拽 | boolean | false | |
|
|
957
|
-
| editable | 启动动态增减节点，不能和 | boolean | false | 5.20.0 |
|
|
958
|
-
| minCount | 配置 | number | 0 | 5.20.0 |
|
|
959
|
-
| maxCount | 配置 | number | - | 5.20.0 |
|
|
960
|
-
|
|
961
|
-
|
|
962
|
-
### tooltip
|
|
963
|
-
|
|
964
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
965
|
-
|--------|--------|--------|--------|--------|
|
|
966
|
-
| autoAdjustOverflow | 是否自动调整弹出位置 | boolean | true | 5.8.0 |
|
|
967
|
-
| open | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时 | boolean | - | 4.23.0 |
|
|
968
|
-
| placement | 设置 Tooltip 展示位置。参考 | string | - | 4.23.0 |
|
|
969
|
-
| getPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
|
|
970
|
-
| formatter | Slider 会把当前值传给 | value => ReactNode \| null | IDENTITY | 4.23.0 |
|
|
971
|
-
|
|
972
|
-
|
|
973
|
-
## 方法
|
|
974
|
-
|
|
975
|
-
| 名称 | 描述 | 版本 |
|
|
976
|
-
|--------|--------|--------|
|
|
977
|
-
| blur() | 移除焦点 | |
|
|
978
|
-
| focus() | 获取焦点 | |
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
|
|
983
971
|
<DemoTitle title="Skeleton" desc="在内容加载时提供占位图形展示。">
|
|
984
972
|
## antd API
|
|
985
973
|
|
|
@@ -1041,16 +1029,21 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1041
1029
|
|
|
1042
1030
|
|
|
1043
1031
|
|
|
1044
|
-
<DemoTitle title="
|
|
1045
|
-
|
|
1032
|
+
<DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。">
|
|
1033
|
+
## API
|
|
1046
1034
|
|
|
1047
1035
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1048
1036
|
|--------|--------|--------|--------|
|
|
1049
|
-
|
|
|
1050
|
-
|
|
1051
|
-
|
|
1037
|
+
| texture | 是否显示纹理 | boolean | false |
|
|
1038
|
+
|
|
1039
|
+
|
|
1040
|
+
|
|
1041
|
+
|
|
1052
1042
|
|
|
1053
1043
|
|
|
1044
|
+
<DemoTitle title="Radio" desc="用于在多个备选项中选中单个状态。">
|
|
1045
|
+
#### API
|
|
1046
|
+
|
|
1054
1047
|
<AntdApiRef url="https://ant.design/components/radio-cn/#api"></AntdApiRef>
|
|
1055
1048
|
|
|
1056
1049
|
|
|
@@ -1116,9 +1109,16 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1116
1109
|
|
|
1117
1110
|
|
|
1118
1111
|
|
|
1119
|
-
<DemoTitle title="
|
|
1112
|
+
<DemoTitle title="RadioButton" desc="用于在多个备选项中选中单个状态。">
|
|
1120
1113
|
#### API
|
|
1121
1114
|
|
|
1115
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1116
|
+
|--------|--------|--------|--------|
|
|
1117
|
+
| bordered | 边框 | boolean | false |
|
|
1118
|
+
| ghost | 按钮背景色类型 | boolean | true |
|
|
1119
|
+
| gap | 间距 | number | 12 px |
|
|
1120
|
+
|
|
1121
|
+
|
|
1122
1122
|
<AntdApiRef url="https://ant.design/components/radio-cn/#api"></AntdApiRef>
|
|
1123
1123
|
|
|
1124
1124
|
|
|
@@ -1253,50 +1253,6 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1253
1253
|
|
|
1254
1254
|
|
|
1255
1255
|
|
|
1256
|
-
<DemoTitle title="Popover" desc="点击/鼠标移入元素，弹出气泡式的卡片浮层">
|
|
1257
|
-
#### API
|
|
1258
|
-
|
|
1259
|
-
<AntdApiRef url="https://ant.design/components/popover-cn/#api"></AntdApiRef>
|
|
1260
|
-
|
|
1261
|
-
|
|
1262
|
-
## antd API
|
|
1263
|
-
|
|
1264
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1265
|
-
|
|
1266
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1267
|
-
|--------|--------|--------|--------|--------|
|
|
1268
|
-
| content | 卡片内容 | ReactNode \| () => ReactNode | - | |
|
|
1269
|
-
| title | 卡片标题 | ReactNode \| () => ReactNode | - | |
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
<!-- 共同的 API -->
|
|
1273
|
-
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
1274
|
-
|
|
1275
|
-
<!-- prettier-ignore -->
|
|
1276
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1277
|
-
|--------|--------|--------|--------|--------|
|
|
1278
|
-
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
1279
|
-
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
1280
|
-
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
1281
|
-
| color | 背景颜色 | string | - | 4.3.0 |
|
|
1282
|
-
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
1283
|
-
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
1284
|
-
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
1285
|
-
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
1286
|
-
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
1287
|
-
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
1288
|
-
| placement | 气泡框位置，可选 | string | top | |
|
|
1289
|
-
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
1290
|
-
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
1291
|
-
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
1292
|
-
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
1293
|
-
|
|
1294
|
-
## 注意
|
|
1295
|
-
|
|
1296
|
-
请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
|
|
1297
|
-
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
1256
|
<DemoTitle title="Popconfirm" desc="点击元素，弹出气泡式的确认框。">
|
|
1301
1257
|
#### API
|
|
1302
1258
|
|
|
@@ -1354,6 +1310,50 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1354
1310
|
|
|
1355
1311
|
|
|
1356
1312
|
|
|
1313
|
+
<DemoTitle title="Popover" desc="点击/鼠标移入元素，弹出气泡式的卡片浮层">
|
|
1314
|
+
#### API
|
|
1315
|
+
|
|
1316
|
+
<AntdApiRef url="https://ant.design/components/popover-cn/#api"></AntdApiRef>
|
|
1317
|
+
|
|
1318
|
+
|
|
1319
|
+
## antd API
|
|
1320
|
+
|
|
1321
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1322
|
+
|
|
1323
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1324
|
+
|--------|--------|--------|--------|--------|
|
|
1325
|
+
| content | 卡片内容 | ReactNode \| () => ReactNode | - | |
|
|
1326
|
+
| title | 卡片标题 | ReactNode \| () => ReactNode | - | |
|
|
1327
|
+
|
|
1328
|
+
|
|
1329
|
+
<!-- 共同的 API -->
|
|
1330
|
+
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
1331
|
+
|
|
1332
|
+
<!-- prettier-ignore -->
|
|
1333
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1334
|
+
|--------|--------|--------|--------|--------|
|
|
1335
|
+
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
1336
|
+
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
1337
|
+
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
1338
|
+
| color | 背景颜色 | string | - | 4.3.0 |
|
|
1339
|
+
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
1340
|
+
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
1341
|
+
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
1342
|
+
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
1343
|
+
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
1344
|
+
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
1345
|
+
| placement | 气泡框位置，可选 | string | top | |
|
|
1346
|
+
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
1347
|
+
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
1348
|
+
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
1349
|
+
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
1350
|
+
|
|
1351
|
+
## 注意
|
|
1352
|
+
|
|
1353
|
+
请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
|
|
1354
|
+
|
|
1355
|
+
|
|
1356
|
+
|
|
1357
1357
|
<DemoTitle title="Pagination" desc="分页器用于分隔长列表，每次只加载一个页面。">
|
|
1358
1358
|
## API
|
|
1359
1359
|
|
|
@@ -1820,6 +1820,141 @@ message.config({
|
|
|
1820
1820
|
|
|
1821
1821
|
|
|
1822
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
|
|
1949
|
+
|
|
1950
|
+
| 名称 | 说明 | 参数 | 版本 |
|
|
1951
|
+
|--------|--------|--------|--------|
|
|
1952
|
+
| blur | 取消焦点 | - | |
|
|
1953
|
+
| focus | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | option - 4.10.0 |
|
|
1954
|
+
|
|
1955
|
+
|
|
1956
|
+
|
|
1957
|
+
|
|
1823
1958
|
<DemoTitle title="Image" desc="可预览的图片">
|
|
1824
1959
|
#### API
|
|
1825
1960
|
|
|
@@ -1987,235 +2122,56 @@ 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
|
-
|
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
|
|
2130
|
+
| icon | icon | ReactNode \| string | |
|
|
2131
|
+
| iconType | 百炼图标iconfont的key，依赖百炼的iconFont，例如bl-icon-add | string | |
|
|
2132
|
+
| bordered | 边框 | boolean | true |
|
|
2133
|
+
| shape | 形状 | 'default' \| 'circle' | 'default' |
|
|
1999
2134
|
|
|
2000
2135
|
|
|
2001
2136
|
## antd API
|
|
2002
2137
|
|
|
2003
2138
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2004
2139
|
|
|
2005
|
-
|
|
2140
|
+
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
2006
2141
|
|
|
2007
|
-
|
|
2142
|
+
按钮的属性说明如下：
|
|
2143
|
+
|
|
2144
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
2008
2145
|
|--------|--------|--------|--------|--------|
|
|
2009
|
-
|
|
|
2010
|
-
|
|
|
2011
|
-
|
|
|
2012
|
-
|
|
|
2013
|
-
|
|
|
2014
|
-
|
|
|
2015
|
-
|
|
|
2016
|
-
|
|
|
2017
|
-
|
|
|
2018
|
-
|
|
|
2019
|
-
|
|
|
2020
|
-
|
|
|
2021
|
-
|
|
|
2022
|
-
|
|
|
2023
|
-
|
|
|
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 |
|
|
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 |
|
|
2030
2161
|
|
|
2031
2162
|
|
|
2032
|
-
|
|
2163
|
+
支持原生 button 的其他所有属性。
|
|
2033
2164
|
|
|
2034
|
-
|
|
2165
|
+
### PresetColors
|
|
2035
2166
|
|
|
2036
|
-
|
|
2167
|
+
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
2037
2168
|
|
|
2038
2169
|
|
|
2039
|
-
```tsx
|
|
2040
|
-
interface CountConfig {
|
|
2041
|
-
// 最大字符数，不同于原生 `maxLength`，超出后标红但不会截断
|
|
2042
|
-
max?: number;
|
|
2043
|
-
// 自定义字符计数，例如标准 emoji 长度大于 1，可以自定义计数策略将其改为 1
|
|
2044
|
-
strategy?: (value: string) => number;
|
|
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
|
-
```
|
|
2051
2170
|
|
|
2171
|
+
<DemoTitle title="FloatButton" desc="用于网站上的全局功能；无论浏览到何处都可以看见的按钮。">
|
|
2172
|
+
#### API
|
|
2052
2173
|
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
同 Input 属性，外加：
|
|
2056
|
-
|
|
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 |
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
`Input.TextArea` 的其他属性和浏览器自带的 [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) 一致。
|
|
2065
|
-
|
|
2066
|
-
### Input.Search
|
|
2067
|
-
|
|
2068
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
2069
|
-
|--------|--------|--------|--------|
|
|
2070
|
-
| enterButton | 是否有确认按钮，可设为按钮文字。该属性会与 | ReactNode | false |
|
|
2071
|
-
| loading | 搜索 loading | boolean | false |
|
|
2072
|
-
| onSearch | 点击搜索图标、清除图标，或按下回车键时的回调 | function(value, event, { source: "input" \| "clear" }) | - |
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
其余属性和 Input 一致。
|
|
2076
|
-
|
|
2077
|
-
### Input.Password
|
|
2078
|
-
|
|
2079
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2080
|
-
|--------|--------|--------|--------|--------|
|
|
2081
|
-
| iconRender | 自定义切换按钮 | (visible) => ReactNode | (visible) => (visible ? : ) | 4.3.0 |
|
|
2082
|
-
| visibilityToggle | 是否显示切换按钮或者控制密码显隐 | boolean \| | true | |
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
### Input.OTP
|
|
2086
|
-
|
|
2087
|
-
`5.16.0` 新增。
|
|
2088
|
-
|
|
2089
|
-
开发者注意事项：当 `mask` 属性的类型为 string 时，我们强烈推荐接收单个字符或单个 emoji，如果传入多个字符或多个 emoji，则会在控制台抛出警告。
|
|
2090
|
-
|
|
2091
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2092
|
-
|--------|--------|--------|--------|--------|
|
|
2093
|
-
| defaultValue | 默认值 | string | - | |
|
|
2094
|
-
| disabled | 是否禁用 | boolean | false | |
|
|
2095
|
-
| formatter | 格式化展示，留空字段会被 | (value: string) => string | - | |
|
|
2096
|
-
| separator | 分隔符，在指定索引的输入框后渲染分隔符 | ReactNode \|((i: number) => ReactNode) | - | 5.24.0 |
|
|
2097
|
-
| mask | 自定义展示，和 | boolean \| string | false | 5.17.0 |
|
|
2098
|
-
| length | 输入元素数量 | number | 6 | |
|
|
2099
|
-
| status | 设置校验状态 | 'error' \| 'warning' | - | |
|
|
2100
|
-
| size | 输入框大小 | small | middle | |
|
|
2101
|
-
| variant | 形态变体 | outlined | outlined | underlined |
|
|
2102
|
-
| value | 输入框内容 | string | - | |
|
|
2103
|
-
| onChange | 当输入框内容全部填充时触发回调 | (value: string) => void | - | |
|
|
2104
|
-
| onInput | 输入值变化时触发的回调 | (value: string[]) => void | - | 5.22.0 |
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
#### VisibilityToggle
|
|
2108
|
-
|
|
2109
|
-
| Property | Description | Type | Default | Version |
|
|
2110
|
-
|--------|--------|--------|--------|--------|
|
|
2111
|
-
| visible | 用于手动控制密码显隐 | boolean | false | 4.24 |
|
|
2112
|
-
| onVisibleChange | 显隐密码的回调 | (visible) => void | - | 4.24 |
|
|
2113
|
-
|
|
2114
|
-
|
|
2115
|
-
#### Input Methods
|
|
2116
|
-
|
|
2117
|
-
| 名称 | 说明 | 参数 | 版本 |
|
|
2118
|
-
|--------|--------|--------|--------|
|
|
2119
|
-
| blur | 取消焦点 | - | |
|
|
2120
|
-
| focus | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | option - 4.10.0 |
|
|
2121
|
-
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
<DemoTitle title="IconButton" desc="以图标为核心的轻量按钮组件，用于触发操作。">
|
|
2126
|
-
#### API
|
|
2127
|
-
|
|
2128
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2129
|
-
|--------|--------|--------|--------|
|
|
2130
|
-
| icon | icon | ReactNode \| string | |
|
|
2131
|
-
| iconType | 百炼图标iconfont的key，依赖百炼的iconFont，例如bl-icon-add | string | |
|
|
2132
|
-
| bordered | 边框 | boolean | true |
|
|
2133
|
-
| shape | 形状 | 'default' \| 'circle' | 'default' |
|
|
2134
|
-
|
|
2135
|
-
|
|
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="Empty" desc="用于空状态的占位图形展示。">
|
|
2172
|
-
## API
|
|
2173
|
-
|
|
2174
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2175
|
-
|--------|--------|--------|--------|
|
|
2176
|
-
| type | 空状态类型 | \| 'noData'
|
|
2177
|
-
\| 'networkError'
|
|
2178
|
-
\| '404'
|
|
2179
|
-
\| 'arrears'
|
|
2180
|
-
\| 'desktopOnly'
|
|
2181
|
-
\| 'noAudio'
|
|
2182
|
-
\| 'noImage'
|
|
2183
|
-
\| 'noVideo'
|
|
2184
|
-
\| 'noAccess'
|
|
2185
|
-
\| 'error'
|
|
2186
|
-
\| 'noChat'
|
|
2187
|
-
\| 'noModel'
|
|
2188
|
-
\| 'noApp'
|
|
2189
|
-
\| 'success'
|
|
2190
|
-
\| 'failed'
|
|
2191
|
-
\| 'inProgress'
|
|
2192
|
-
\| 'stayTuned' | 'noData' |
|
|
2193
|
-
| texture | 是否显示纹理 | boolean | true |
|
|
2194
|
-
| image | 图片地址 | string | 默认是no data的图片 |
|
|
2195
|
-
| imageStyle | 图片样式 | React.CSSProperties | |
|
|
2196
|
-
| title | 标题内容 | React.ReactNode | |
|
|
2197
|
-
| description | 自定义描述内容 | React.ReactNode | |
|
|
2198
|
-
| onOk | ok按钮的点击事件 | (e: React.MouseEvent) => void | |
|
|
2199
|
-
| okText | ok按钮的文本 | React.ReactNode | |
|
|
2200
|
-
| okType | ok按钮的类型 | SparkButtonProps['type'] | 'primary' |
|
|
2201
|
-
| okButtonProps | ok按钮的props | SparkButtonProps | |
|
|
2202
|
-
| children | 自定义空状态的内容 | React.ReactNode | |
|
|
2203
|
-
| className | 自定义空状态的类名 | string | |
|
|
2204
|
-
| style | 自定义空状态的样式 | React.CSSProperties | |
|
|
2205
|
-
| size | 自定义空状态的大小 | React.CSSProperties['width'] | |
|
|
2206
|
-
| autoFit | 是否自适应容器宽度，当容器宽度小于 size 时自动缩放 | boolean | false |
|
|
2207
|
-
|
|
2208
|
-
|
|
2209
|
-
<AntdApiRef url="https://ant.design/components/empty-cn/#api"></AntdApiRef>
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
<DemoTitle title="FloatButton" desc="用于网站上的全局功能；无论浏览到何处都可以看见的按钮。">
|
|
2216
|
-
#### API
|
|
2217
|
-
|
|
2218
|
-
<AntdApiRef url="https://ant.design/components/float-button-cn/#api"></AntdApiRef>
|
|
2174
|
+
<AntdApiRef url="https://ant.design/components/float-button-cn/#api"></AntdApiRef>
|
|
2219
2175
|
|
|
2220
2176
|
|
|
2221
2177
|
## antd API
|
|
@@ -2416,406 +2372,82 @@ const dividerItem = {
|
|
|
2416
2372
|
|
|
2417
2373
|
|
|
2418
2374
|
|
|
2419
|
-
<DemoTitle title="
|
|
2375
|
+
<DemoTitle title="Form" desc="高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。">
|
|
2420
2376
|
#### API
|
|
2421
2377
|
|
|
2422
|
-
<AntdApiRef url="https://ant.design/components/
|
|
2378
|
+
<AntdApiRef url="https://ant.design/components/form-cn/#api"></AntdApiRef>
|
|
2423
2379
|
|
|
2424
2380
|
|
|
2425
2381
|
## antd API
|
|
2426
2382
|
|
|
2427
2383
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2428
2384
|
|
|
2429
|
-
###
|
|
2385
|
+
### Form
|
|
2430
2386
|
|
|
2431
2387
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2432
2388
|
|--------|--------|--------|--------|--------|
|
|
2433
|
-
|
|
|
2434
|
-
|
|
|
2435
|
-
|
|
|
2436
|
-
|
|
|
2437
|
-
|
|
|
2438
|
-
|
|
|
2439
|
-
|
|
|
2440
|
-
|
|
|
2441
|
-
|
|
|
2442
|
-
|
|
|
2389
|
+
| colon | 配置 Form.Item 的 | boolean | true | |
|
|
2390
|
+
| disabled | 设置表单组件禁用，仅对 antd 组件有效 | boolean | false | 4.21.0 |
|
|
2391
|
+
| component | 设置 Form 渲染元素，为 | ComponentType \| false | form | |
|
|
2392
|
+
| fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。查看 | | - | |
|
|
2393
|
+
| form | 经 | | - | |
|
|
2394
|
+
| feedbackIcons | 当 | | - | 5.9.0 |
|
|
2395
|
+
| initialValues | 表单默认值，只有初始化以及重置时生效 | object | - | |
|
|
2396
|
+
| labelAlign | label 标签的文本对齐方式 | left | right | |
|
|
2397
|
+
| labelWrap | label 标签的文本换行方式 | boolean | false | 4.18.0 |
|
|
2398
|
+
| labelCol | label 标签布局，同 | | - | |
|
|
2399
|
+
| layout | 表单布局 | horizontal | horizontal | |
|
|
2400
|
+
| name | 表单名称，会作为表单字段 | string | - | |
|
|
2401
|
+
| preserve | 当字段被删除时保留字段值。你可以通过 | boolean | true | 4.4.0 |
|
|
2402
|
+
| requiredMark | 必选样式，可以切换为必选或者可选展示样式。此为 Form 配置，Form.Item 无法单独配置 | boolean \| | true | renderProps |
|
|
2403
|
+
| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean \| | false | focus: 5.24.0 |
|
|
2404
|
+
| size | 设置字段组件的尺寸（仅限 antd 组件） | small | - | |
|
|
2405
|
+
| validateMessages | 验证提示模板，说明 | | - | |
|
|
2406
|
+
| validateTrigger | 统一设置字段触发验证的时机 | string \| string[] | onChange | 4.3.0 |
|
|
2407
|
+
| variant | 表单内控件变体 | outlined | outlined | 5.13.0 \| |
|
|
2408
|
+
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | | - | |
|
|
2409
|
+
| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | - | |
|
|
2410
|
+
| onFinish | 提交表单且数据验证成功后回调事件 | function(values) | - | |
|
|
2411
|
+
| onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | - | |
|
|
2412
|
+
| onValuesChange | 字段值更新时触发回调事件 | function(changedValues, allValues) | - | |
|
|
2413
|
+
| clearOnDestroy | 当表单被卸载时清空表单值 | boolean | false | 5.18.0 |
|
|
2443
2414
|
|
|
2444
2415
|
|
|
2445
|
-
|
|
2416
|
+
支持原生 form 除 `onSubmit` 外的所有属性。
|
|
2446
2417
|
|
|
2447
|
-
|
|
2448
|
-
|--------|--------|--------|--------|--------|
|
|
2449
|
-
| label | 内容的描述 | ReactNode | - | |
|
|
2450
|
-
| span | 包含列的数量（ | number\| | 1 | screens: 5.9.0 |
|
|
2418
|
+
### validateMessages
|
|
2451
2419
|
|
|
2420
|
+
Form 为验证提供了[默认的错误提示信息](https://github.com/ant-design/ant-design/blob/6234509d18bac1ac60fbb3f92a5b2c6a6361295a/components/locale/en_US.ts#L88-L134)，你可以通过配置 `validateMessages` 属性，修改对应的提示模板。一种常见的使用方式，是配置国际化提示信息：
|
|
2452
2421
|
|
|
2453
|
-
span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
|
|
2454
2422
|
|
|
2423
|
+
```jsx
|
|
2424
|
+
const validateMessages = {
|
|
2425
|
+
required: "'${name}' 是必选字段",
|
|
2426
|
+
// ...
|
|
2427
|
+
};
|
|
2455
2428
|
|
|
2429
|
+
<Form validateMessages={validateMessages} />;
|
|
2430
|
+
```
|
|
2456
2431
|
|
|
2457
|
-
<DemoTitle title="Drawer" desc="从页面一侧滑入的操作面板，用于承载临时界面内容。">
|
|
2458
|
-
#### API
|
|
2459
2432
|
|
|
2460
|
-
|
|
2461
|
-
|--------|--------|--------|--------|
|
|
2462
|
-
| showDivider | 是否显示分割线 | boolean | true |
|
|
2433
|
+
此外，[ConfigProvider](/components/config-provider-cn) 也提供了全局化配置方案，允许统一配置错误提示模板：
|
|
2463
2434
|
|
|
2464
|
-
##### Drawer.Confirm - 带按钮的抽屉
|
|
2465
2435
|
|
|
2466
|
-
|
|
2467
|
-
|
|
2468
|
-
|
|
2469
|
-
|
|
2470
|
-
|
|
2471
|
-
| okButtonProps | 确认按钮属性 | ButtonProps | |
|
|
2472
|
-
| onCancel | 点击取消回调 | () => void | |
|
|
2473
|
-
| cancelText | 取消按钮文字 | string | |
|
|
2474
|
-
| cancelButtonProps | 取消按钮属性 | ButtonProps | |
|
|
2475
|
-
| info | 底部额外内容 | React.ReactNode | |
|
|
2436
|
+
```jsx
|
|
2437
|
+
const validateMessages = {
|
|
2438
|
+
required: "'${name}' 是必选字段",
|
|
2439
|
+
// ...
|
|
2440
|
+
};
|
|
2476
2441
|
|
|
2477
|
-
<
|
|
2442
|
+
<ConfigProvider form={{ validateMessages }}>
|
|
2443
|
+
<Form />
|
|
2444
|
+
</ConfigProvider>;
|
|
2445
|
+
```
|
|
2478
2446
|
|
|
2479
2447
|
|
|
2480
|
-
##
|
|
2448
|
+
## Form.Item
|
|
2481
2449
|
|
|
2482
|
-
|
|
2483
|
-
|
|
2484
|
-
<!-- prettier-ignore -->
|
|
2485
|
-
<Container type="warning" title="注意">
|
|
2486
|
-
v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v4 `className` 与 `style` 改至配置 Drawer 窗体样式以和 Modal 对齐。
|
|
2487
|
-
</Container>
|
|
2488
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2489
|
-
|--------|--------|--------|--------|--------|
|
|
2490
|
-
| autoFocus | 抽屉展开后是否将焦点切换至其 DOM 节点 | boolean | true | 4.17.0 |
|
|
2491
|
-
| afterOpenChange | 切换抽屉时动画结束后的回调 | function(open) | - | |
|
|
2492
|
-
| className | Drawer 容器外层 className 设置，如果需要设置最外层，请使用 rootClassName | string | - | |
|
|
2493
|
-
| classNames | 语义化结构 className | | - | 5.10.0 |
|
|
2494
|
-
| closeIcon | 自定义关闭图标。5.7.0：设置为 | ReactNode | | |
|
|
2495
|
-
| destroyOnHidden | 关闭时销毁 Drawer 里的子元素 | boolean | false | 5.25.0 |
|
|
2496
|
-
| extra | 抽屉右上角的操作区域 | ReactNode | - | 4.17.0 |
|
|
2497
|
-
| footer | 抽屉的页脚 | ReactNode | - | |
|
|
2498
|
-
| forceRender | 预渲染 Drawer 内元素 | boolean | false | |
|
|
2499
|
-
| getContainer | 指定 Drawer 挂载的节点， | HTMLElement \| () => HTMLElement \| Selectors \| false | body | |
|
|
2500
|
-
| height | 高度，在 | string \| number | 378 | |
|
|
2501
|
-
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
|
|
2502
|
-
| mask | 是否展示遮罩 | boolean | true | |
|
|
2503
|
-
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
|
|
2504
|
-
| placement | 抽屉的方向 | top | right | |
|
|
2505
|
-
| push | 用于设置多层 Drawer 的推动行为 | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
|
|
2506
|
-
| rootStyle | 可用于设置 Drawer 最外层容器的样式，和 | CSSProperties | - | |
|
|
2507
|
-
| size | 预设抽屉宽度（或高度），default | 'default' \| 'large' | 'default' | 4.17.0 |
|
|
2508
|
-
| style | 设计 Drawer 容器样式，如果你只需要设置内容部分请使用 | CSSProperties | - | |
|
|
2509
|
-
| styles | 语义化结构 style | | - | 5.10.0 |
|
|
2510
|
-
| title | 标题 | ReactNode | - | |
|
|
2511
|
-
| loading | 显示骨架屏 | boolean | false | 5.17.0 |
|
|
2512
|
-
| open | Drawer 是否可见 | boolean | - |
|
|
2513
|
-
| width | 宽度 | string \| number | 378 | |
|
|
2514
|
-
| zIndex | 设置 Drawer 的 | number | 1000 | |
|
|
2515
|
-
| onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - | |
|
|
2516
|
-
| drawerRender | 自定义渲染抽屉 | (node: ReactNode) => ReactNode | - | 5.18.0 |
|
|
2517
|
-
|
|
2518
|
-
|
|
2519
|
-
|
|
2520
|
-
|
|
2521
|
-
<DemoTitle title="DatePicker" desc="输入或选择时间的控件。">
|
|
2522
|
-
#### API
|
|
2523
|
-
|
|
2524
|
-
<AntdApiRef url="https://ant.design/components/date-picker-cn/#api"></AntdApiRef>
|
|
2525
|
-
|
|
2526
|
-
|
|
2527
|
-
## antd API
|
|
2528
|
-
|
|
2529
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2530
|
-
|
|
2531
|
-
日期类组件包括以下五种形式。
|
|
2532
|
-
|
|
2533
|
-
|
|
2534
|
-
- DatePicker
|
|
2535
|
-
- DatePicker[picker="month"]
|
|
2536
|
-
- DatePicker[picker="week"]
|
|
2537
|
-
- DatePicker[picker="year"]
|
|
2538
|
-
- DatePicker[picker="quarter"] (4.1.0 新增)
|
|
2539
|
-
- RangePicker
|
|
2540
|
-
|
|
2541
|
-
### 国际化配置
|
|
2542
|
-
|
|
2543
|
-
默认配置为 en-US，如果你需要设置其他语言，推荐在入口处使用我们提供的国际化组件，详见：[ConfigProvider 国际化](https://ant.design/components/config-provider-cn/)。
|
|
2544
|
-
|
|
2545
|
-
如有特殊需求（仅修改单一组件的语言），请使用 locale 参数，参考：[默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)。
|
|
2546
|
-
|
|
2547
|
-
|
|
2548
|
-
```jsx
|
|
2549
|
-
// 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
|
|
2550
|
-
// 确保还导入相关的 dayjs 文件，否则所有文本的区域设置都不会更改（例如范围选择器月份）
|
|
2551
|
-
import locale from 'antd/locale/zh_CN';
|
|
2552
|
-
import dayjs from 'dayjs';
|
|
2553
|
-
|
|
2554
|
-
import 'dayjs/locale/zh-cn';
|
|
2555
|
-
|
|
2556
|
-
dayjs.locale('zh-cn');
|
|
2557
|
-
|
|
2558
|
-
<ConfigProvider locale={locale}>
|
|
2559
|
-
<DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} />
|
|
2560
|
-
</ConfigProvider>;
|
|
2561
|
-
```
|
|
2562
|
-
|
|
2563
|
-
|
|
2564
|
-
<!-- prettier-ignore -->
|
|
2565
|
-
<Container type="warning">
|
|
2566
|
-
在搭配 Next.js 的 App Router 使用时，注意在引入 dayjs 的 locale 文件时加上 `'use client'`。这是由于 Ant Design 的组件都是客户端组件，在 RSC 中引入 dayjs 的 locale 文件将不会在客户端生效。
|
|
2567
|
-
</Container>
|
|
2568
|
-
### 共同的 API
|
|
2569
|
-
|
|
2570
|
-
以下 API 为 DatePicker、 RangePicker 共享的 API。
|
|
2571
|
-
|
|
2572
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2573
|
-
|--------|--------|--------|--------|--------|
|
|
2574
|
-
| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
|
|
2575
|
-
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
2576
|
-
| className | 选择器 className | string | - | |
|
|
2577
|
-
| dateRender | 自定义日期单元格的内容，5.4.0 起用 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 |
|
|
2578
|
-
| cellRender | 自定义单元格的内容 | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
|
|
2579
|
-
| components | 自定义面板 | Record | - | 5.14.0 |
|
|
2580
|
-
| defaultOpen | 是否默认展开控制弹层 | boolean | - | |
|
|
2581
|
-
| disabled | 禁用 | boolean | false | |
|
|
2582
|
-
| disabledDate | 不可选择的日期 | (currentDate: dayjs, info: { from?: dayjs, type: Picker }) => boolean | - | info |
|
|
2583
|
-
| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 | | | |
|
|
2584
|
-
| order | 多选、范围时是否自动排序 | boolean | true | 5.14.0 |
|
|
2585
|
-
| preserveInvalidOnBlur | 失去焦点是否要清空输入框内无效内容 | boolean | false | 5.14.0 |
|
|
2586
|
-
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | |
|
|
2587
|
-
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
|
|
2588
|
-
| locale | 国际化配置 | object | | |
|
|
2589
|
-
| minDate | 最小日期，同样会限制面板的切换范围 | dayjs | - | 5.14.0 |
|
|
2590
|
-
| maxDate | 最大日期，同样会限制面板的切换范围 | dayjs | - | 5.14.0 |
|
|
2591
|
-
| mode | 日期面板的状态（ | time | - | |
|
|
2592
|
-
| needConfirm | 是否需要确认按钮，为 | boolean | - | 5.14.0 |
|
|
2593
|
-
| nextIcon | 自定义下一个图标 | ReactNode | - | 4.17.0 |
|
|
2594
|
-
| open | 控制弹层是否展开 | boolean | - | |
|
|
2595
|
-
| panelRender | 自定义渲染面板 | (panelNode) => ReactNode | - | 4.5.0 |
|
|
2596
|
-
| picker | 设置选择器类型 | date | date | quarter |
|
|
2597
|
-
| placeholder | 输入框提示文字 | string \| [string, string] | - | |
|
|
2598
|
-
| placement | 选择框弹出的位置 | bottomLeft | bottomLeft | |
|
|
2599
|
-
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
|
|
2600
|
-
| prevIcon | 自定义上一个图标 | ReactNode | - | 4.17.0 |
|
|
2601
|
-
| presets | 预设时间范围快捷选择, 自 | { label: React.ReactNode, value: Dayjs \| (() => Dayjs) }[] | - | |
|
|
2602
|
-
| size | 输入框大小， | large | - | |
|
|
2603
|
-
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
2604
|
-
| style | 自定义输入框样式 | CSSProperties | {} | |
|
|
2605
|
-
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
|
2606
|
-
| superNextIcon | 自定义 | ReactNode | - | 4.17.0 |
|
|
2607
|
-
| superPrevIcon | 自定义 | ReactNode | - | 4.17.0 |
|
|
2608
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
2609
|
-
| onOpenChange | 弹出日历和关闭日历的回调 | function(open) | - | |
|
|
2610
|
-
| onPanelChange | 日历面板切换的回调 | function(value, mode) | - | |
|
|
2611
|
-
|
|
2612
|
-
|
|
2613
|
-
### 共同的方法
|
|
2614
|
-
|
|
2615
|
-
| 名称 | 描述 | 版本 |
|
|
2616
|
-
|--------|--------|--------|
|
|
2617
|
-
| blur() | 移除焦点 | |
|
|
2618
|
-
| focus() | 获取焦点 | |
|
|
2619
|
-
|
|
2620
|
-
|
|
2621
|
-
### DatePicker
|
|
2622
|
-
|
|
2623
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2624
|
-
|--------|--------|--------|--------|--------|
|
|
2625
|
-
| defaultPickerValue | 默认面板日期，每次面板打开时会被重置到该日期 | | - | 5.14.0 |
|
|
2626
|
-
| defaultValue | 默认日期，如果开始时间或结束时间为 | | - | |
|
|
2627
|
-
| disabledTime | 不可选择的时间 | function(date) | - | |
|
|
2628
|
-
| format | 展示的日期格式，配置参考 | | YYYY-MM-DD | |
|
|
2629
|
-
| multiple | 是否为多选，不支持 | boolean | false | 5.14.0 |
|
|
2630
|
-
| pickerValue | 面板日期，可以用于受控切换面板所在日期。配合 | | - | 5.14.0 |
|
|
2631
|
-
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
|
|
2632
|
-
| showNow | 显示当前日期时间的快捷选择 | boolean | - | |
|
|
2633
|
-
| showTime | 增加时间选择功能 | Object \| boolean | | |
|
|
2634
|
-
| showTime.defaultValue | 设置用户选择日期时默认的时分秒， | | dayjs() | |
|
|
2635
|
-
| showWeek | DatePicker 下展示当前周 | boolean | false | 5.14.0 |
|
|
2636
|
-
| value | 日期 | | - | |
|
|
2637
|
-
| onChange | 时间发生变化的回调 | function(date: dayjs, dateString: string) | - | |
|
|
2638
|
-
| onOk | 点击确定按钮的回调 | function() | - | |
|
|
2639
|
-
| onPanelChange | 日期面板变化时的回调 | function(value, mode) | - | |
|
|
2640
|
-
|
|
2641
|
-
|
|
2642
|
-
### DatePicker[picker=year]
|
|
2643
|
-
|
|
2644
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2645
|
-
|--------|--------|--------|--------|--------|
|
|
2646
|
-
| defaultValue | 默认日期 | | - | |
|
|
2647
|
-
| format | 展示的日期格式，配置参考 | | YYYY | |
|
|
2648
|
-
| multiple | 是否为多选 | boolean | false | 5.14.0 |
|
|
2649
|
-
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
|
2650
|
-
| value | 日期 | | - | |
|
|
2651
|
-
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | |
|
|
2652
|
-
|
|
2653
|
-
|
|
2654
|
-
### DatePicker[picker=quarter]
|
|
2655
|
-
|
|
2656
|
-
`4.1.0` 新增。
|
|
2657
|
-
|
|
2658
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2659
|
-
|--------|--------|--------|--------|--------|
|
|
2660
|
-
| defaultValue | 默认日期 | | - | |
|
|
2661
|
-
| format | 展示的日期格式，配置参考 | | YYYY-\QQ | |
|
|
2662
|
-
| multiple | 是否为多选 | boolean | false | 5.14.0 |
|
|
2663
|
-
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
|
2664
|
-
| value | 日期 | | - | |
|
|
2665
|
-
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | |
|
|
2666
|
-
|
|
2667
|
-
|
|
2668
|
-
### DatePicker[picker=month]
|
|
2669
|
-
|
|
2670
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2671
|
-
|--------|--------|--------|--------|--------|
|
|
2672
|
-
| defaultValue | 默认日期 | | - | |
|
|
2673
|
-
| format | 展示的日期格式，配置参考 | | YYYY-MM | |
|
|
2674
|
-
| multiple | 是否为多选 | boolean | false | 5.14.0 |
|
|
2675
|
-
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
|
2676
|
-
| value | 日期 | | - | |
|
|
2677
|
-
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | |
|
|
2678
|
-
|
|
2679
|
-
|
|
2680
|
-
### DatePicker[picker=week]
|
|
2681
|
-
|
|
2682
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2683
|
-
|--------|--------|--------|--------|--------|
|
|
2684
|
-
| defaultValue | 默认日期 | | - | |
|
|
2685
|
-
| format | 展示的日期格式，配置参考 | | YYYY-wo | |
|
|
2686
|
-
| multiple | 是否为多选 | boolean | false | 5.14.0 |
|
|
2687
|
-
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
|
|
2688
|
-
| value | 日期 | | - | |
|
|
2689
|
-
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | |
|
|
2690
|
-
| showWeek | DatePicker 下展示当前周 | boolean | true | 5.14.0 |
|
|
2691
|
-
|
|
2692
|
-
|
|
2693
|
-
### RangePicker
|
|
2694
|
-
|
|
2695
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2696
|
-
|--------|--------|--------|--------|--------|
|
|
2697
|
-
| allowEmpty | 允许起始项部分为空 | [boolean, boolean] | [false, false] | |
|
|
2698
|
-
| cellRender | 自定义单元格的内容。 | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
|
|
2699
|
-
| dateRender | 自定义日期单元格的内容，5.4.0 起用 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 |
|
|
2700
|
-
| defaultPickerValue | 默认面板日期，每次面板打开时会被重置到该日期 | | - | 5.14.0 |
|
|
2701
|
-
| defaultValue | 默认日期 | | - | |
|
|
2702
|
-
| disabled | 禁用起始项 | [boolean, boolean] | - | |
|
|
2703
|
-
| disabledTime | 不可选择的时间 | function(date: dayjs, partial: | - | info.from |
|
|
2704
|
-
| format | 展示的日期格式，配置参考 | | YYYY-MM-DD HH:mm:ss | |
|
|
2705
|
-
| id | 设置输入框 | { start?: string, end?: string } | - | 5.14.0 |
|
|
2706
|
-
| pickerValue | 面板日期，可以用于受控切换面板所在日期。配合 | | - | 5.14.0 |
|
|
2707
|
-
| presets | 预设时间范围快捷选择，自 | { label: React.ReactNode, value: (Dayjs \| (() => Dayjs))[] }[] | - | |
|
|
2708
|
-
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
|
2709
|
-
| separator | 设置分隔符 | React.ReactNode | | |
|
|
2710
|
-
| showTime | 增加时间选择功能 | Object\|boolean | | |
|
|
2711
|
-
| showTime.defaultValue | 设置用户选择日期时默认的时分秒， | | [dayjs(), dayjs()] | |
|
|
2712
|
-
| value | 日期 | | - | |
|
|
2713
|
-
| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - | |
|
|
2714
|
-
| onChange | 日期范围发生变化的回调 | function(dates: [dayjs, dayjs], dateStrings: [string, string]) | - | |
|
|
2715
|
-
| onFocus | 聚焦时回调 | function(event, { range: 'start' \| 'end' }) | - | range |
|
|
2716
|
-
| onBlur | 失焦时回调 | function(event, { range: 'start' \| 'end' }) | - | range |
|
|
2717
|
-
|
|
2718
|
-
|
|
2719
|
-
#### formatType
|
|
2720
|
-
|
|
2721
|
-
|
|
2722
|
-
```typescript
|
|
2723
|
-
import type { Dayjs } from 'dayjs';
|
|
2724
|
-
|
|
2725
|
-
type Generic = string;
|
|
2726
|
-
type GenericFn = (value: Dayjs) => string;
|
|
2727
|
-
|
|
2728
|
-
export type FormatType =
|
|
2729
|
-
| Generic
|
|
2730
|
-
| GenericFn
|
|
2731
|
-
| Array
|
|
2732
|
-
| {
|
|
2733
|
-
format: string;
|
|
2734
|
-
type?: 'mask';
|
|
2735
|
-
};
|
|
2736
|
-
```
|
|
2737
|
-
|
|
2738
|
-
|
|
2739
|
-
注意：`type` 定义为 `5.14.0` 新增。
|
|
2740
|
-
|
|
2741
|
-
|
|
2742
|
-
|
|
2743
|
-
<DemoTitle title="Form" desc="高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。">
|
|
2744
|
-
#### API
|
|
2745
|
-
|
|
2746
|
-
<AntdApiRef url="https://ant.design/components/form-cn/#api"></AntdApiRef>
|
|
2747
|
-
|
|
2748
|
-
|
|
2749
|
-
## antd API
|
|
2750
|
-
|
|
2751
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2752
|
-
|
|
2753
|
-
### Form
|
|
2754
|
-
|
|
2755
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2756
|
-
|--------|--------|--------|--------|--------|
|
|
2757
|
-
| colon | 配置 Form.Item 的 | boolean | true | |
|
|
2758
|
-
| disabled | 设置表单组件禁用，仅对 antd 组件有效 | boolean | false | 4.21.0 |
|
|
2759
|
-
| component | 设置 Form 渲染元素，为 | ComponentType \| false | form | |
|
|
2760
|
-
| fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。查看 | | - | |
|
|
2761
|
-
| form | 经 | | - | |
|
|
2762
|
-
| feedbackIcons | 当 | | - | 5.9.0 |
|
|
2763
|
-
| initialValues | 表单默认值，只有初始化以及重置时生效 | object | - | |
|
|
2764
|
-
| labelAlign | label 标签的文本对齐方式 | left | right | |
|
|
2765
|
-
| labelWrap | label 标签的文本换行方式 | boolean | false | 4.18.0 |
|
|
2766
|
-
| labelCol | label 标签布局，同 | | - | |
|
|
2767
|
-
| layout | 表单布局 | horizontal | horizontal | |
|
|
2768
|
-
| name | 表单名称，会作为表单字段 | string | - | |
|
|
2769
|
-
| preserve | 当字段被删除时保留字段值。你可以通过 | boolean | true | 4.4.0 |
|
|
2770
|
-
| requiredMark | 必选样式，可以切换为必选或者可选展示样式。此为 Form 配置，Form.Item 无法单独配置 | boolean \| | true | renderProps |
|
|
2771
|
-
| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean \| | false | focus: 5.24.0 |
|
|
2772
|
-
| size | 设置字段组件的尺寸（仅限 antd 组件） | small | - | |
|
|
2773
|
-
| validateMessages | 验证提示模板，说明 | | - | |
|
|
2774
|
-
| validateTrigger | 统一设置字段触发验证的时机 | string \| string[] | onChange | 4.3.0 |
|
|
2775
|
-
| variant | 表单内控件变体 | outlined | outlined | 5.13.0 \| |
|
|
2776
|
-
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | | - | |
|
|
2777
|
-
| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | - | |
|
|
2778
|
-
| onFinish | 提交表单且数据验证成功后回调事件 | function(values) | - | |
|
|
2779
|
-
| onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | - | |
|
|
2780
|
-
| onValuesChange | 字段值更新时触发回调事件 | function(changedValues, allValues) | - | |
|
|
2781
|
-
| clearOnDestroy | 当表单被卸载时清空表单值 | boolean | false | 5.18.0 |
|
|
2782
|
-
|
|
2783
|
-
|
|
2784
|
-
支持原生 form 除 `onSubmit` 外的所有属性。
|
|
2785
|
-
|
|
2786
|
-
### validateMessages
|
|
2787
|
-
|
|
2788
|
-
Form 为验证提供了[默认的错误提示信息](https://github.com/ant-design/ant-design/blob/6234509d18bac1ac60fbb3f92a5b2c6a6361295a/components/locale/en_US.ts#L88-L134)，你可以通过配置 `validateMessages` 属性，修改对应的提示模板。一种常见的使用方式，是配置国际化提示信息：
|
|
2789
|
-
|
|
2790
|
-
|
|
2791
|
-
```jsx
|
|
2792
|
-
const validateMessages = {
|
|
2793
|
-
required: "'${name}' 是必选字段",
|
|
2794
|
-
// ...
|
|
2795
|
-
};
|
|
2796
|
-
|
|
2797
|
-
<Form validateMessages={validateMessages} />;
|
|
2798
|
-
```
|
|
2799
|
-
|
|
2800
|
-
|
|
2801
|
-
此外，[ConfigProvider](/components/config-provider-cn) 也提供了全局化配置方案，允许统一配置错误提示模板：
|
|
2802
|
-
|
|
2803
|
-
|
|
2804
|
-
```jsx
|
|
2805
|
-
const validateMessages = {
|
|
2806
|
-
required: "'${name}' 是必选字段",
|
|
2807
|
-
// ...
|
|
2808
|
-
};
|
|
2809
|
-
|
|
2810
|
-
<ConfigProvider form={{ validateMessages }}>
|
|
2811
|
-
<Form />
|
|
2812
|
-
</ConfigProvider>;
|
|
2813
|
-
```
|
|
2814
|
-
|
|
2815
|
-
|
|
2816
|
-
## Form.Item
|
|
2817
|
-
|
|
2818
|
-
表单字段组件，用于数据双向绑定、校验、布局等。
|
|
2450
|
+
表单字段组件，用于数据双向绑定、校验、布局等。
|
|
2819
2451
|
|
|
2820
2452
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2821
2453
|
|--------|--------|--------|--------|--------|
|
|
@@ -3290,13 +2922,159 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
|
|
|
3290
2922
|
| whitespace | 如果字段仅包含空格则校验不通过，只在 | boolean | |
|
|
3291
2923
|
|
|
3292
2924
|
|
|
3293
|
-
### WatchOptions
|
|
2925
|
+
### WatchOptions
|
|
2926
|
+
|
|
2927
|
+
| 名称 | 说明 | 类型 | 默认值 | 版本 |
|
|
2928
|
+
|--------|--------|--------|--------|--------|
|
|
2929
|
+
| form | 指定 Form 实例 | FormInstance | 当前 context 中的 Form | 5.4.0 |
|
|
2930
|
+
| preserve | 是否监视没有对应的 | boolean | false | 5.4.0 |
|
|
2931
|
+
|
|
2932
|
+
|
|
2933
|
+
|
|
2934
|
+
|
|
2935
|
+
<DemoTitle title="Empty" desc="用于空状态的占位图形展示。">
|
|
2936
|
+
## API
|
|
2937
|
+
|
|
2938
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2939
|
+
|--------|--------|--------|--------|
|
|
2940
|
+
| type | 空状态类型 | \| 'noData'
|
|
2941
|
+
\| 'networkError'
|
|
2942
|
+
\| '404'
|
|
2943
|
+
\| 'arrears'
|
|
2944
|
+
\| 'desktopOnly'
|
|
2945
|
+
\| 'noAudio'
|
|
2946
|
+
\| 'noImage'
|
|
2947
|
+
\| 'noVideo'
|
|
2948
|
+
\| 'noAccess'
|
|
2949
|
+
\| 'error'
|
|
2950
|
+
\| 'noChat'
|
|
2951
|
+
\| 'noModel'
|
|
2952
|
+
\| 'noApp'
|
|
2953
|
+
\| 'success'
|
|
2954
|
+
\| 'failed'
|
|
2955
|
+
\| 'inProgress'
|
|
2956
|
+
\| 'stayTuned' | 'noData' |
|
|
2957
|
+
| texture | 是否显示纹理 | boolean | true |
|
|
2958
|
+
| image | 图片地址 | string | 默认是no data的图片 |
|
|
2959
|
+
| imageStyle | 图片样式 | React.CSSProperties | |
|
|
2960
|
+
| title | 标题内容 | React.ReactNode | |
|
|
2961
|
+
| description | 自定义描述内容 | React.ReactNode | |
|
|
2962
|
+
| onOk | ok按钮的点击事件 | (e: React.MouseEvent) => void | |
|
|
2963
|
+
| okText | ok按钮的文本 | React.ReactNode | |
|
|
2964
|
+
| okType | ok按钮的类型 | SparkButtonProps['type'] | 'primary' |
|
|
2965
|
+
| okButtonProps | ok按钮的props | SparkButtonProps | |
|
|
2966
|
+
| children | 自定义空状态的内容 | React.ReactNode | |
|
|
2967
|
+
| className | 自定义空状态的类名 | string | |
|
|
2968
|
+
| style | 自定义空状态的样式 | React.CSSProperties | |
|
|
2969
|
+
| size | 自定义空状态的大小 | React.CSSProperties['width'] | |
|
|
2970
|
+
| autoFit | 是否自适应容器宽度，当容器宽度小于 size 时自动缩放 | boolean | false |
|
|
2971
|
+
|
|
2972
|
+
|
|
2973
|
+
<AntdApiRef url="https://ant.design/components/empty-cn/#api"></AntdApiRef>
|
|
2974
|
+
|
|
2975
|
+
|
|
2976
|
+
|
|
2977
|
+
|
|
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
|
+
|
|
3043
|
+
<DemoTitle title="Descriptions" desc="展示多个只读字段的组合">
|
|
3044
|
+
#### API
|
|
3045
|
+
|
|
3046
|
+
<AntdApiRef url="https://ant.design/components/descriptions-cn/#api"></AntdApiRef>
|
|
3047
|
+
|
|
3294
3048
|
|
|
3295
|
-
|
|
3049
|
+
## antd API
|
|
3050
|
+
|
|
3051
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3052
|
+
|
|
3053
|
+
### Descriptions
|
|
3054
|
+
|
|
3055
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3296
3056
|
|--------|--------|--------|--------|--------|
|
|
3297
|
-
|
|
|
3298
|
-
|
|
|
3057
|
+
| bordered | 是否展示边框 | boolean | false | |
|
|
3058
|
+
| colon | 配置 | boolean | true | |
|
|
3059
|
+
| column | 一行的 | number \| | 3 | |
|
|
3060
|
+
| extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 |
|
|
3061
|
+
| items | 描述列表项内容 | | - | 5.8.0 |
|
|
3062
|
+
| layout | 描述布局 | horizontal | horizontal | |
|
|
3063
|
+
| size | 设置列表的大小。可以设置为 | default | - | |
|
|
3064
|
+
| title | 描述列表的标题，显示在最顶部 | ReactNode | - | |
|
|
3065
|
+
| classNames | 语义化结构 class | | - | 5.23.0 |
|
|
3066
|
+
| styles | 语义化结构 style | | - | 5.23.0 |
|
|
3067
|
+
|
|
3068
|
+
|
|
3069
|
+
### DescriptionItem
|
|
3070
|
+
|
|
3071
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3072
|
+
|--------|--------|--------|--------|--------|
|
|
3073
|
+
| label | 内容的描述 | ReactNode | - | |
|
|
3074
|
+
| span | 包含列的数量（ | number\| | 1 | screens: 5.9.0 |
|
|
3075
|
+
|
|
3299
3076
|
|
|
3077
|
+
span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
|
|
3300
3078
|
|
|
3301
3079
|
|
|
3302
3080
|
|
|
@@ -3371,89 +3149,225 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
|
|
|
3371
3149
|
|
|
3372
3150
|
|
|
3373
3151
|
|
|
3374
|
-
<DemoTitle title="
|
|
3152
|
+
<DemoTitle title="DatePicker" desc="输入或选择时间的控件。">
|
|
3375
3153
|
#### API
|
|
3376
3154
|
|
|
3377
|
-
|
|
3378
|
-
|--------|--------|--------|--------|
|
|
3379
|
-
| language | 语言 | string \| string[] | (必填) |
|
|
3380
|
-
| value | 值 | string | (必填) |
|
|
3381
|
-
| className | 类名 | string | |
|
|
3382
|
-
| theme | 主题 | 'dark' \| 'light' | |
|
|
3383
|
-
| readOnly | 只读 | boolean | |
|
|
3384
|
-
| onChange | | (value: string) => void | |
|
|
3155
|
+
<AntdApiRef url="https://ant.design/components/date-picker-cn/#api"></AntdApiRef>
|
|
3385
3156
|
|
|
3386
3157
|
|
|
3158
|
+
## antd API
|
|
3387
3159
|
|
|
3160
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3388
3161
|
|
|
3389
|
-
|
|
3390
|
-
#### API
|
|
3162
|
+
日期类组件包括以下五种形式。
|
|
3391
3163
|
|
|
3392
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3393
|
-
|--------|--------|--------|--------|
|
|
3394
|
-
| description | 描述文本 | string | |
|
|
3395
|
-
| descriptionClassName | 描述文本的样式类名 | string | |
|
|
3396
|
-
| descriptionStyle | 描述文本的内联样式 | React.CSSProperties | |
|
|
3397
3164
|
|
|
3165
|
+
- DatePicker
|
|
3166
|
+
- DatePicker[picker="month"]
|
|
3167
|
+
- DatePicker[picker="week"]
|
|
3168
|
+
- DatePicker[picker="year"]
|
|
3169
|
+
- DatePicker[picker="quarter"] (4.1.0 新增)
|
|
3170
|
+
- RangePicker
|
|
3398
3171
|
|
|
3399
|
-
|
|
3172
|
+
### 国际化配置
|
|
3400
3173
|
|
|
3174
|
+
默认配置为 en-US，如果你需要设置其他语言，推荐在入口处使用我们提供的国际化组件，详见：[ConfigProvider 国际化](https://ant.design/components/config-provider-cn/)。
|
|
3401
3175
|
|
|
3402
|
-
|
|
3176
|
+
如有特殊需求（仅修改单一组件的语言），请使用 locale 参数，参考：[默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)。
|
|
3403
3177
|
|
|
3404
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3405
3178
|
|
|
3406
|
-
|
|
3179
|
+
```jsx
|
|
3180
|
+
// 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
|
|
3181
|
+
// 确保还导入相关的 dayjs 文件，否则所有文本的区域设置都不会更改（例如范围选择器月份）
|
|
3182
|
+
import locale from 'antd/locale/zh_CN';
|
|
3183
|
+
import dayjs from 'dayjs';
|
|
3184
|
+
|
|
3185
|
+
import 'dayjs/locale/zh-cn';
|
|
3186
|
+
|
|
3187
|
+
dayjs.locale('zh-cn');
|
|
3188
|
+
|
|
3189
|
+
<ConfigProvider locale={locale}>
|
|
3190
|
+
<DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} />
|
|
3191
|
+
</ConfigProvider>;
|
|
3192
|
+
```
|
|
3193
|
+
|
|
3194
|
+
|
|
3195
|
+
<!-- prettier-ignore -->
|
|
3196
|
+
<Container type="warning">
|
|
3197
|
+
在搭配 Next.js 的 App Router 使用时，注意在引入 dayjs 的 locale 文件时加上 `'use client'`。这是由于 Ant Design 的组件都是客户端组件，在 RSC 中引入 dayjs 的 locale 文件将不会在客户端生效。
|
|
3198
|
+
</Container>
|
|
3199
|
+
### 共同的 API
|
|
3200
|
+
|
|
3201
|
+
以下 API 为 DatePicker、 RangePicker 共享的 API。
|
|
3407
3202
|
|
|
3408
3203
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3409
3204
|
|--------|--------|--------|--------|--------|
|
|
3205
|
+
| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
|
|
3410
3206
|
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
3411
|
-
|
|
|
3412
|
-
|
|
|
3413
|
-
|
|
|
3414
|
-
|
|
|
3415
|
-
|
|
|
3416
|
-
|
|
|
3417
|
-
|
|
|
3207
|
+
| className | 选择器 className | string | - | |
|
|
3208
|
+
| dateRender | 自定义日期单元格的内容，5.4.0 起用 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 |
|
|
3209
|
+
| cellRender | 自定义单元格的内容 | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
|
|
3210
|
+
| components | 自定义面板 | Record | - | 5.14.0 |
|
|
3211
|
+
| defaultOpen | 是否默认展开控制弹层 | boolean | - | |
|
|
3212
|
+
| disabled | 禁用 | boolean | false | |
|
|
3213
|
+
| disabledDate | 不可选择的日期 | (currentDate: dayjs, info: { from?: dayjs, type: Picker }) => boolean | - | info |
|
|
3214
|
+
| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 | | | |
|
|
3215
|
+
| order | 多选、范围时是否自动排序 | boolean | true | 5.14.0 |
|
|
3216
|
+
| preserveInvalidOnBlur | 失去焦点是否要清空输入框内无效内容 | boolean | false | 5.14.0 |
|
|
3217
|
+
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | |
|
|
3218
|
+
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
|
|
3219
|
+
| locale | 国际化配置 | object | | |
|
|
3220
|
+
| minDate | 最小日期，同样会限制面板的切换范围 | dayjs | - | 5.14.0 |
|
|
3221
|
+
| maxDate | 最大日期，同样会限制面板的切换范围 | dayjs | - | 5.14.0 |
|
|
3222
|
+
| mode | 日期面板的状态（ | time | - | |
|
|
3223
|
+
| needConfirm | 是否需要确认按钮，为 | boolean | - | 5.14.0 |
|
|
3224
|
+
| nextIcon | 自定义下一个图标 | ReactNode | - | 4.17.0 |
|
|
3225
|
+
| open | 控制弹层是否展开 | boolean | - | |
|
|
3226
|
+
| panelRender | 自定义渲染面板 | (panelNode) => ReactNode | - | 4.5.0 |
|
|
3227
|
+
| picker | 设置选择器类型 | date | date | quarter |
|
|
3228
|
+
| placeholder | 输入框提示文字 | string \| [string, string] | - | |
|
|
3229
|
+
| placement | 选择框弹出的位置 | bottomLeft | bottomLeft | |
|
|
3230
|
+
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
|
|
3231
|
+
| prevIcon | 自定义上一个图标 | ReactNode | - | 4.17.0 |
|
|
3232
|
+
| presets | 预设时间范围快捷选择, 自 | { label: React.ReactNode, value: Dayjs \| (() => Dayjs) }[] | - | |
|
|
3233
|
+
| size | 输入框大小， | large | - | |
|
|
3234
|
+
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
3235
|
+
| style | 自定义输入框样式 | CSSProperties | {} | |
|
|
3236
|
+
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
|
3237
|
+
| superNextIcon | 自定义 | ReactNode | - | 4.17.0 |
|
|
3238
|
+
| superPrevIcon | 自定义 | ReactNode | - | 4.17.0 |
|
|
3239
|
+
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
3240
|
+
| onOpenChange | 弹出日历和关闭日历的回调 | function(open) | - | |
|
|
3241
|
+
| onPanelChange | 日历面板切换的回调 | function(value, mode) | - | |
|
|
3418
3242
|
|
|
3419
3243
|
|
|
3420
|
-
|
|
3244
|
+
### 共同的方法
|
|
3245
|
+
|
|
3246
|
+
| 名称 | 描述 | 版本 |
|
|
3247
|
+
|--------|--------|--------|
|
|
3248
|
+
| blur() | 移除焦点 | |
|
|
3249
|
+
| focus() | 获取焦点 | |
|
|
3250
|
+
|
|
3251
|
+
|
|
3252
|
+
### DatePicker
|
|
3421
3253
|
|
|
3422
3254
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3423
3255
|
|--------|--------|--------|--------|--------|
|
|
3424
|
-
|
|
|
3425
|
-
|
|
|
3426
|
-
|
|
|
3427
|
-
|
|
|
3428
|
-
|
|
|
3429
|
-
|
|
|
3430
|
-
|
|
|
3431
|
-
|
|
|
3432
|
-
|
|
|
3256
|
+
| defaultPickerValue | 默认面板日期，每次面板打开时会被重置到该日期 | | - | 5.14.0 |
|
|
3257
|
+
| defaultValue | 默认日期，如果开始时间或结束时间为 | | - | |
|
|
3258
|
+
| disabledTime | 不可选择的时间 | function(date) | - | |
|
|
3259
|
+
| format | 展示的日期格式，配置参考 | | YYYY-MM-DD | |
|
|
3260
|
+
| multiple | 是否为多选，不支持 | boolean | false | 5.14.0 |
|
|
3261
|
+
| pickerValue | 面板日期，可以用于受控切换面板所在日期。配合 | | - | 5.14.0 |
|
|
3262
|
+
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
|
|
3263
|
+
| showNow | 显示当前日期时间的快捷选择 | boolean | - | |
|
|
3264
|
+
| showTime | 增加时间选择功能 | Object \| boolean | | |
|
|
3265
|
+
| showTime.defaultValue | 设置用户选择日期时默认的时分秒， | | dayjs() | |
|
|
3266
|
+
| showWeek | DatePicker 下展示当前周 | boolean | false | 5.14.0 |
|
|
3267
|
+
| value | 日期 | | - | |
|
|
3268
|
+
| onChange | 时间发生变化的回调 | function(date: dayjs, dateString: string) | - | |
|
|
3269
|
+
| onOk | 点击确定按钮的回调 | function() | - | |
|
|
3270
|
+
| onPanelChange | 日期面板变化时的回调 | function(value, mode) | - | |
|
|
3433
3271
|
|
|
3434
3272
|
|
|
3435
|
-
|
|
3273
|
+
### DatePicker[picker=year]
|
|
3274
|
+
|
|
3275
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3276
|
+
|--------|--------|--------|--------|--------|
|
|
3277
|
+
| defaultValue | 默认日期 | | - | |
|
|
3278
|
+
| format | 展示的日期格式，配置参考 | | YYYY | |
|
|
3279
|
+
| multiple | 是否为多选 | boolean | false | 5.14.0 |
|
|
3280
|
+
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
|
3281
|
+
| value | 日期 | | - | |
|
|
3282
|
+
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | |
|
|
3436
3283
|
|
|
3437
3284
|
|
|
3438
|
-
|
|
3439
|
-
interface Option {
|
|
3440
|
-
label: string;
|
|
3441
|
-
value: string;
|
|
3442
|
-
disabled?: boolean;
|
|
3443
|
-
}
|
|
3444
|
-
```
|
|
3285
|
+
### DatePicker[picker=quarter]
|
|
3445
3286
|
|
|
3287
|
+
`4.1.0` 新增。
|
|
3446
3288
|
|
|
3447
|
-
|
|
3289
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3290
|
+
|--------|--------|--------|--------|--------|
|
|
3291
|
+
| defaultValue | 默认日期 | | - | |
|
|
3292
|
+
| format | 展示的日期格式，配置参考 | | YYYY-\QQ | |
|
|
3293
|
+
| multiple | 是否为多选 | boolean | false | 5.14.0 |
|
|
3294
|
+
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
|
3295
|
+
| value | 日期 | | - | |
|
|
3296
|
+
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | |
|
|
3297
|
+
|
|
3298
|
+
|
|
3299
|
+
### DatePicker[picker=month]
|
|
3300
|
+
|
|
3301
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3302
|
+
|--------|--------|--------|--------|--------|
|
|
3303
|
+
| defaultValue | 默认日期 | | - | |
|
|
3304
|
+
| format | 展示的日期格式，配置参考 | | YYYY-MM | |
|
|
3305
|
+
| multiple | 是否为多选 | boolean | false | 5.14.0 |
|
|
3306
|
+
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
|
3307
|
+
| value | 日期 | | - | |
|
|
3308
|
+
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | |
|
|
3309
|
+
|
|
3310
|
+
|
|
3311
|
+
### DatePicker[picker=week]
|
|
3312
|
+
|
|
3313
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3314
|
+
|--------|--------|--------|--------|--------|
|
|
3315
|
+
| defaultValue | 默认日期 | | - | |
|
|
3316
|
+
| format | 展示的日期格式，配置参考 | | YYYY-wo | |
|
|
3317
|
+
| multiple | 是否为多选 | boolean | false | 5.14.0 |
|
|
3318
|
+
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
|
|
3319
|
+
| value | 日期 | | - | |
|
|
3320
|
+
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | |
|
|
3321
|
+
| showWeek | DatePicker 下展示当前周 | boolean | true | 5.14.0 |
|
|
3322
|
+
|
|
3323
|
+
|
|
3324
|
+
### RangePicker
|
|
3325
|
+
|
|
3326
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3327
|
+
|--------|--------|--------|--------|--------|
|
|
3328
|
+
| allowEmpty | 允许起始项部分为空 | [boolean, boolean] | [false, false] | |
|
|
3329
|
+
| cellRender | 自定义单元格的内容。 | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
|
|
3330
|
+
| dateRender | 自定义日期单元格的内容，5.4.0 起用 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 |
|
|
3331
|
+
| defaultPickerValue | 默认面板日期，每次面板打开时会被重置到该日期 | | - | 5.14.0 |
|
|
3332
|
+
| defaultValue | 默认日期 | | - | |
|
|
3333
|
+
| disabled | 禁用起始项 | [boolean, boolean] | - | |
|
|
3334
|
+
| disabledTime | 不可选择的时间 | function(date: dayjs, partial: | - | info.from |
|
|
3335
|
+
| format | 展示的日期格式，配置参考 | | YYYY-MM-DD HH:mm:ss | |
|
|
3336
|
+
| id | 设置输入框 | { start?: string, end?: string } | - | 5.14.0 |
|
|
3337
|
+
| pickerValue | 面板日期，可以用于受控切换面板所在日期。配合 | | - | 5.14.0 |
|
|
3338
|
+
| presets | 预设时间范围快捷选择，自 | { label: React.ReactNode, value: (Dayjs \| (() => Dayjs))[] }[] | - | |
|
|
3339
|
+
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
|
3340
|
+
| separator | 设置分隔符 | React.ReactNode | | |
|
|
3341
|
+
| showTime | 增加时间选择功能 | Object\|boolean | | |
|
|
3342
|
+
| showTime.defaultValue | 设置用户选择日期时默认的时分秒， | | [dayjs(), dayjs()] | |
|
|
3343
|
+
| value | 日期 | | - | |
|
|
3344
|
+
| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - | |
|
|
3345
|
+
| onChange | 日期范围发生变化的回调 | function(dates: [dayjs, dayjs], dateStrings: [string, string]) | - | |
|
|
3346
|
+
| onFocus | 聚焦时回调 | function(event, { range: 'start' \| 'end' }) | - | range |
|
|
3347
|
+
| onBlur | 失焦时回调 | function(event, { range: 'start' \| 'end' }) | - | range |
|
|
3348
|
+
|
|
3349
|
+
|
|
3350
|
+
#### formatType
|
|
3351
|
+
|
|
3352
|
+
|
|
3353
|
+
```typescript
|
|
3354
|
+
import type { Dayjs } from 'dayjs';
|
|
3355
|
+
|
|
3356
|
+
type Generic = string;
|
|
3357
|
+
type GenericFn = (value: Dayjs) => string;
|
|
3448
3358
|
|
|
3449
|
-
|
|
3359
|
+
export type FormatType =
|
|
3360
|
+
| Generic
|
|
3361
|
+
| GenericFn
|
|
3362
|
+
| Array
|
|
3363
|
+
| {
|
|
3364
|
+
format: string;
|
|
3365
|
+
type?: 'mask';
|
|
3366
|
+
};
|
|
3367
|
+
```
|
|
3450
3368
|
|
|
3451
|
-
| 名称 | 描述 | 版本 |
|
|
3452
|
-
|--------|--------|--------|
|
|
3453
|
-
| blur() | 移除焦点 | |
|
|
3454
|
-
| focus() | 获取焦点 | |
|
|
3455
|
-
| nativeElement | 返回 Checkbox 的 DOM 节点 | 5.17.3 |
|
|
3456
3369
|
|
|
3370
|
+
注意：`type` 定义为 `5.14.0` 新增。
|
|
3457
3371
|
|
|
3458
3372
|
|
|
3459
3373
|
|
|
@@ -3515,6 +3429,21 @@ interface Option {
|
|
|
3515
3429
|
|
|
3516
3430
|
|
|
3517
3431
|
|
|
3432
|
+
<DemoTitle title="CodeBlock" desc="代码块">
|
|
3433
|
+
#### API
|
|
3434
|
+
|
|
3435
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3436
|
+
|--------|--------|--------|--------|
|
|
3437
|
+
| language | 语言 | string \| string[] | (必填) |
|
|
3438
|
+
| value | 值 | string | (必填) |
|
|
3439
|
+
| className | 类名 | string | |
|
|
3440
|
+
| theme | 主题 | 'dark' \| 'light' | |
|
|
3441
|
+
| readOnly | 只读 | boolean | |
|
|
3442
|
+
| onChange | | (value: string) => void | |
|
|
3443
|
+
|
|
3444
|
+
|
|
3445
|
+
|
|
3446
|
+
|
|
3518
3447
|
<DemoTitle title="Card" desc="通用卡片容器">
|
|
3519
3448
|
#### API
|
|
3520
3449
|
|
|
@@ -3578,6 +3507,77 @@ interface Option {
|
|
|
3578
3507
|
|
|
3579
3508
|
|
|
3580
3509
|
|
|
3510
|
+
<DemoTitle title="Checkbox" desc="收集用户的多项选择。">
|
|
3511
|
+
#### API
|
|
3512
|
+
|
|
3513
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3514
|
+
|--------|--------|--------|--------|
|
|
3515
|
+
| description | 描述文本 | string | |
|
|
3516
|
+
| descriptionClassName | 描述文本的样式类名 | string | |
|
|
3517
|
+
| descriptionStyle | 描述文本的内联样式 | React.CSSProperties | |
|
|
3518
|
+
|
|
3519
|
+
|
|
3520
|
+
<AntdApiRef url="https://ant.design/components/checkbox-cn/#api"></AntdApiRef>
|
|
3521
|
+
|
|
3522
|
+
|
|
3523
|
+
## antd API
|
|
3524
|
+
|
|
3525
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3526
|
+
|
|
3527
|
+
#### Checkbox
|
|
3528
|
+
|
|
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() | - | |
|
|
3539
|
+
|
|
3540
|
+
|
|
3541
|
+
#### Checkbox.Group
|
|
3542
|
+
|
|
3543
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3544
|
+
|--------|--------|--------|--------|--------|
|
|
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 | - | |
|
|
3554
|
+
|
|
3555
|
+
|
|
3556
|
+
##### Option
|
|
3557
|
+
|
|
3558
|
+
|
|
3559
|
+
```typescript
|
|
3560
|
+
interface Option {
|
|
3561
|
+
label: string;
|
|
3562
|
+
value: string;
|
|
3563
|
+
disabled?: boolean;
|
|
3564
|
+
}
|
|
3565
|
+
```
|
|
3566
|
+
|
|
3567
|
+
|
|
3568
|
+
### 方法
|
|
3569
|
+
|
|
3570
|
+
#### Checkbox
|
|
3571
|
+
|
|
3572
|
+
| 名称 | 描述 | 版本 |
|
|
3573
|
+
|--------|--------|--------|
|
|
3574
|
+
| blur() | 移除焦点 | |
|
|
3575
|
+
| focus() | 获取焦点 | |
|
|
3576
|
+
| nativeElement | 返回 Checkbox 的 DOM 节点 | 5.17.3 |
|
|
3577
|
+
|
|
3578
|
+
|
|
3579
|
+
|
|
3580
|
+
|
|
3581
3581
|
<DemoTitle title="Button" desc="按钮用于开始一个即时操作。">
|
|
3582
3582
|
#### API
|
|
3583
3583
|
|
|
@@ -3633,6 +3633,54 @@ type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' |
|
|
|
3633
3633
|
|
|
3634
3634
|
|
|
3635
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
|
+
|
|
3636
3684
|
<DemoTitle title="Breadcrumb" desc="显示当前页面在系统层级结构中的位置，并能向上返回。">
|
|
3637
3685
|
#### API
|
|
3638
3686
|
|
|
@@ -3734,121 +3782,20 @@ const items = [
|
|
|
3734
3782
|
path: '/second',
|
|
3735
3783
|
title: 'second',
|
|
3736
3784
|
},
|
|
3737
|
-
];
|
|
3738
|
-
|
|
3739
|
-
function itemRender(currentRoute, params, items, paths) {
|
|
3740
|
-
const isLast = currentRoute?.path === items[items.length - 1]?.path;
|
|
3741
|
-
|
|
3742
|
-
return isLast ? (
|
|
3743
|
-
<span>{currentRoute.title}</span>
|
|
3744
|
-
) : (
|
|
3745
|
-
<Link to={`/${paths.join('/')}`}>{currentRoute.title}</Link>
|
|
3746
|
-
);
|
|
3747
|
-
}
|
|
3748
|
-
|
|
3749
|
-
return <Breadcrumb itemRender={itemRender} items={items} />;
|
|
3750
|
-
```
|
|
3751
|
-
|
|
3752
|
-
|
|
3753
|
-
|
|
3754
|
-
|
|
3755
|
-
<DemoTitle title="Avatar" desc="用来代表用户或事物，支持图片、图标或字符展示。">
|
|
3756
|
-
#### API
|
|
3757
|
-
|
|
3758
|
-
<AntdApiRef url="https://ant.design/components/avatar-cn/#api"></AntdApiRef>
|
|
3759
|
-
|
|
3760
|
-
|
|
3761
|
-
## antd API
|
|
3762
|
-
|
|
3763
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3764
|
-
|
|
3765
|
-
### Avatar
|
|
3766
|
-
|
|
3767
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3768
|
-
|--------|--------|--------|--------|--------|
|
|
3769
|
-
| alt | 图像无法显示时的替代文本 | string | - | |
|
|
3770
|
-
| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 |
|
|
3771
|
-
| icon | 设置头像的自定义图标 | ReactNode | - | |
|
|
3772
|
-
| shape | 指定头像的形状 | circle | circle | |
|
|
3773
|
-
| size | 设置头像的大小 | number \| | default | 4.7.0 |
|
|
3774
|
-
| src | 图片类头像的资源地址或者图片元素 | string \| ReactNode | - | ReactNode: 4.8.0 |
|
|
3775
|
-
| srcSet | 设置图片类头像响应式资源地址 | string | - | |
|
|
3776
|
-
| draggable | 图片是否允许拖动 | boolean \| | true | |
|
|
3777
|
-
| crossOrigin | CORS 属性设置 | 'anonymous' | - | 4.17.0 |
|
|
3778
|
-
| onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - | |
|
|
3779
|
-
|
|
3780
|
-
|
|
3781
|
-
Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fallback 行为，优先级为 `icon` > `children`
|
|
3782
|
-
|
|
3783
|
-
### Avatar.Group <Badge>4.5.0+</Badge>
|
|
3784
|
-
|
|
3785
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3786
|
-
|--------|--------|--------|--------|--------|
|
|
3787
|
-
| max | 设置最多显示相关配置， | { count?: number; style?: CSSProperties; popover?: PopoverProps } | - | 5.18.0 |
|
|
3788
|
-
| size | 设置头像的大小 | number \| | default | 4.8.0 |
|
|
3789
|
-
| shape | 设置头像的形状 | circle | circle | 5.8.0 |
|
|
3790
|
-
|
|
3791
|
-
|
|
3792
|
-
|
|
3793
|
-
|
|
3794
|
-
<DemoTitle title="Audio" desc="音频展示">
|
|
3795
|
-
#### API
|
|
3796
|
-
|
|
3797
|
-
ApiParser解析结果为空
|
|
3798
|
-
|
|
3799
|
-
|
|
3800
|
-
|
|
3801
|
-
|
|
3802
|
-
|
|
3803
|
-
<DemoTitle title="Anchor" desc="用于跳转到页面指定位置。">
|
|
3804
|
-
#### API
|
|
3805
|
-
|
|
3806
|
-
<AntdApiRef url="https://ant.design/components/anchor-cn/#api"></AntdApiRef>
|
|
3807
|
-
|
|
3808
|
-
|
|
3809
|
-
## antd API
|
|
3810
|
-
|
|
3811
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3812
|
-
|
|
3813
|
-
### Anchor Props
|
|
3814
|
-
|
|
3815
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3816
|
-
|--------|--------|--------|--------|--------|
|
|
3817
|
-
| affix | 固定模式 | boolean \| Omit | true | object: 5.19.0 |
|
|
3818
|
-
| bounds | 锚点区域边界 | number | 5 | |
|
|
3819
|
-
| getContainer | 指定滚动的容器 | () => HTMLElement | () => window | |
|
|
3820
|
-
| getCurrentAnchor | 自定义高亮的锚点 | (activeLink: string) => string | - | |
|
|
3821
|
-
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
|
|
3822
|
-
| showInkInFixed | affix={false} | boolean | false | |
|
|
3823
|
-
| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同， | number | - | |
|
|
3824
|
-
| onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - | |
|
|
3825
|
-
| onClick | click | (e: MouseEvent, link: object) => void | - | |
|
|
3826
|
-
| items | 数据化配置选项内容，支持通过 children 嵌套 | { key, href, title, target, children }[] | - | 5.1.0 |
|
|
3827
|
-
| direction | 设置导航方向 | vertical | vertical | 5.2.0 |
|
|
3828
|
-
| replace | 替换浏览器历史记录中项目的 href 而不是推送它 | boolean | false | 5.7.0 |
|
|
3829
|
-
|
|
3830
|
-
|
|
3831
|
-
### AnchorItem
|
|
3832
|
-
|
|
3833
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3834
|
-
|--------|--------|--------|--------|--------|
|
|
3835
|
-
| key | 唯一标志 | string \| number | - | |
|
|
3836
|
-
| href | 锚点链接 | string | - | |
|
|
3837
|
-
| target | 该属性指定在何处显示链接的资源 | string | - | |
|
|
3838
|
-
| title | 文字内容 | ReactNode | - | |
|
|
3839
|
-
| children | 嵌套的 Anchor Link， | | - | |
|
|
3840
|
-
| replace | 替换浏览器历史记录中的项目 href 而不是推送它 | boolean | false | 5.7.0 |
|
|
3841
|
-
|
|
3785
|
+
];
|
|
3842
3786
|
|
|
3843
|
-
|
|
3787
|
+
function itemRender(currentRoute, params, items, paths) {
|
|
3788
|
+
const isLast = currentRoute?.path === items[items.length - 1]?.path;
|
|
3844
3789
|
|
|
3845
|
-
|
|
3790
|
+
return isLast ? (
|
|
3791
|
+
<span>{currentRoute.title}</span>
|
|
3792
|
+
) : (
|
|
3793
|
+
<Link to={`/${paths.join('/')}`}>{currentRoute.title}</Link>
|
|
3794
|
+
);
|
|
3795
|
+
}
|
|
3846
3796
|
|
|
3847
|
-
|
|
3848
|
-
|
|
3849
|
-
| href | 锚点链接 | string | - | |
|
|
3850
|
-
| target | 该属性指定在何处显示链接的资源 | string | - | |
|
|
3851
|
-
| title | 文字内容 | ReactNode | - | |
|
|
3797
|
+
return <Breadcrumb itemRender={itemRender} items={items} />;
|
|
3798
|
+
```
|
|
3852
3799
|
|
|
3853
3800
|
|
|
3854
3801
|
|
|
@@ -4026,6 +3973,270 @@ const confirmed = await modal.confirm({ ... });
|
|
|
4026
3973
|
|
|
4027
3974
|
|
|
4028
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
|
+
|
|
4029
4240
|
<DemoTitle title="Alert" desc="向用户突出显示的重要提示信息。">
|
|
4030
4241
|
#### API
|
|
4031
4242
|
|
|
@@ -4060,26 +4271,728 @@ const confirmed = await modal.confirm({ ... });
|
|
|
4060
4271
|
|
|
4061
4272
|
|
|
4062
4273
|
|
|
4063
|
-
#
|
|
4274
|
+
# 从零开始使用
|
|
4064
4275
|
|
|
4276
|
+
## 📦 安装
|
|
4277
|
+
|
|
4278
|
+
|
|
4279
|
+
```bash
|
|
4280
|
+
$ npm install antd @agentscope-ai/icons @agentscope-ai/design --save
|
|
4281
|
+
```
|
|
4282
|
+
|
|
4283
|
+
|
|
4284
|
+
## 🔨 使用
|
|
4065
4285
|
|
|
4066
4286
|
|
|
4067
4287
|
```tsx
|
|
4068
|
-
import {
|
|
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';
|
|
4305
|
+
return (
|
|
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>
|
|
4350
|
+
);
|
|
4351
|
+
};
|
|
4069
4352
|
|
|
4070
|
-
export default
|
|
4353
|
+
export default App;
|
|
4354
|
+
```
|
|
4355
|
+
|
|
4356
|
+
|
|
4357
|
+
|
|
4358
|
+
|
|
4359
|
+
# 从 Antd 迁移
|
|
4360
|
+
|
|
4361
|
+
## 📦 安装
|
|
4362
|
+
|
|
4363
|
+
|
|
4364
|
+
```bash
|
|
4365
|
+
$ npm install @agentscope-ai/icons @agentscope-ai/design --save
|
|
4366
|
+
```
|
|
4367
|
+
|
|
4368
|
+
|
|
4369
|
+
## 🔨 使用
|
|
4370
|
+
|
|
4371
|
+
从 @agentscope-ai/design 导出的所有同名组件在 API 方面都与 antd 的对应组件兼容，这意味着您无需学习如何使用它们。如果您想充分利用 Alibaba Cloud Spark Design 的新功能，可以尝试使用这些组件而不是 antd 的组件。
|
|
4372
|
+
|
|
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';
|
|
4071
4392
|
return (
|
|
4072
|
-
<
|
|
4073
|
-
|
|
4074
|
-
|
|
4075
|
-
|
|
4076
|
-
|
|
4077
|
-
|
|
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>
|
|
4078
4437
|
);
|
|
4079
4438
|
};
|
|
4080
4439
|
|
|
4440
|
+
export default App;
|
|
4081
4441
|
```
|
|
4082
4442
|
|
|
4083
|
-
基本用法
|
|
4084
4443
|
|
|
4085
|
-
|
|
4444
|
+
如果您想继续使用 antd 的组件，那也没问题。您只需要将 antd 的 ConfigProvider 替换为 @agentscope-ai/design 的即可。
|
|
4445
|
+
|
|
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';
|
|
4463
|
+
return (
|
|
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"
|
|
4486
|
+
/>
|
|
4487
|
+
<div
|
|
4488
|
+
style={{
|
|
4489
|
+
color: `var(--${prefix}-ant-color-text-base)`,
|
|
4490
|
+
fontSize: '24px',
|
|
4491
|
+
textAlign: 'center',
|
|
4492
|
+
}}
|
|
4493
|
+
>
|
|
4494
|
+
Hello Spark Design!
|
|
4495
|
+
</div>
|
|
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>
|
|
4506
|
+
</div>
|
|
4507
|
+
</ConfigProvider>
|
|
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)"
|
|
4827
|
+
}
|
|
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 变量
|
|
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' 替换为您自己的前缀
|
|
4948
|
+
```
|
|
4949
|
+
|
|
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，帮助您高效率还原视觉稿
|