@agentscope-ai/design 1.0.26-beta.1768271896414 → 1.0.26-beta.1768815624178
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/Empty/svg/Illustrate.js +117 -39
- 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/i18n/strings/en-US.json +7 -1
- package/lib/i18n/strings/zh-CN.json +7 -1
- package/llms/all.llms.txt +1660 -1321
- package/llms/components/commonComponents/CodeBlock/index.zh-CN.llms.txt +2 -2
- package/llms/components/commonComponents/FileIcon/index.zh-CN.llms.txt +28 -0
- package/llms/docs/changelog/index.zh-CN.llms.txt +21 -0
- package/llms/docs/guide/iconLibrary.zh-CN.llms.txt +150 -0
- package/llms/docs/guide/tokens&variables.zh-CN.llms.txt +1 -1
- package/llms/docs/guide/vibe-coding.zh-CN.llms.txt +2 -3
- package/llms/docs/icons/iconLibrary.zh-CN.llms.txt +308 -0
- package/llms/docs/icons/sparkIcons.zh-CN.llms.txt +25 -0
- package/llms/index.llms.txt +16 -14
- 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,53 +13,6 @@
|
|
|
13
13
|
|
|
14
14
|
|
|
15
15
|
|
|
16
|
-
<DemoTitle title="Tooltip" desc="简单的文本提示气泡框">
|
|
17
|
-
#### API
|
|
18
|
-
|
|
19
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
20
|
-
|--------|--------|--------|--------|
|
|
21
|
-
| mode | 颜色模式 | 'dark' \| 'light' | 'dark' |
|
|
22
|
-
| maxHeight | 最大高度 | number \| string | '90vh' |
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
<AntdApiRef url="https://ant.design/components/tooltip-cn/#api"></AntdApiRef>
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
## antd API
|
|
29
|
-
|
|
30
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
31
|
-
|
|
32
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
33
|
-
|--------|--------|--------|--------|
|
|
34
|
-
| title | 提示文字 | ReactNode \| () => ReactNode | - |
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
### 共同的 API
|
|
38
|
-
|
|
39
|
-
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
40
|
-
|
|
41
|
-
<!-- prettier-ignore -->
|
|
42
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
43
|
-
|--------|--------|--------|--------|--------|
|
|
44
|
-
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
45
|
-
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
46
|
-
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
47
|
-
| color | 背景颜色 | string | - | 4.3.0 |
|
|
48
|
-
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
49
|
-
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
50
|
-
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
51
|
-
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
52
|
-
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
53
|
-
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
54
|
-
| placement | 气泡框位置，可选 | string | top | |
|
|
55
|
-
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
56
|
-
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
57
|
-
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
58
|
-
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
16
|
<DemoTitle title="Upload" desc="文件选择上传和拖拽上传控件。">
|
|
64
17
|
#### API
|
|
65
18
|
|
|
@@ -156,150 +109,49 @@
|
|
|
156
109
|
|
|
157
110
|
|
|
158
111
|
|
|
159
|
-
<DemoTitle title="
|
|
112
|
+
<DemoTitle title="Tooltip" desc="简单的文本提示气泡框">
|
|
160
113
|
#### API
|
|
161
114
|
|
|
162
115
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
163
116
|
|--------|--------|--------|--------|
|
|
164
|
-
|
|
|
165
|
-
|
|
|
117
|
+
| mode | 颜色模式 | 'dark' \| 'light' | 'dark' |
|
|
118
|
+
| maxHeight | 最大高度 | number \| string | '90vh' |
|
|
166
119
|
|
|
167
|
-
|
|
120
|
+
|
|
121
|
+
<AntdApiRef url="https://ant.design/components/tooltip-cn/#api"></AntdApiRef>
|
|
168
122
|
|
|
169
123
|
|
|
170
124
|
## antd API
|
|
171
125
|
|
|
172
126
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
173
127
|
|
|
174
|
-
### Tag
|
|
175
|
-
|
|
176
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
177
|
-
|--------|--------|--------|--------|--------|
|
|
178
|
-
| closeIcon | 自定义关闭按钮。5.7.0：设置为 | ReactNode | false | 4.4.0 |
|
|
179
|
-
| icon | 设置图标 | ReactNode | - | |
|
|
180
|
-
| bordered | 是否有边框 | boolean | true | 5.4.0 |
|
|
181
|
-
| onClose | 关闭时的回调（可通过 | (e: React.MouseEvent) => void | - | |
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
### Tag.CheckableTag
|
|
185
|
-
|
|
186
128
|
| 参数 | 说明 | 类型 | 默认值 |
|
|
187
129
|
|--------|--------|--------|--------|
|
|
188
|
-
|
|
|
189
|
-
| onChange | 点击标签时触发的回调 | (checked) => void | - |
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
<DemoTitle title="TimePicker" desc="输入或选择时间的控件。">
|
|
195
|
-
#### API
|
|
196
|
-
|
|
197
|
-
<AntdApiRef url="https://ant.design/components/time-picker-cn/#api"></AntdApiRef>
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
## antd API
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
```jsx
|
|
208
|
-
import dayjs from 'dayjs';
|
|
209
|
-
import customParseFormat from 'dayjs/plugin/customParseFormat'
|
|
210
|
-
|
|
211
|
-
dayjs.extend(customParseFormat)
|
|
212
|
-
<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
|
|
213
|
-
```
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
217
|
-
|--------|--------|--------|--------|--------|
|
|
218
|
-
| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
|
|
219
|
-
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
220
|
-
| cellRender | 自定义单元格的内容 | (current: number, info: { originNode: React.ReactNode, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
|
|
221
|
-
| changeOnScroll | 在滚动时改变选择值 | boolean | false | 5.14.0 |
|
|
222
|
-
| className | 选择器类名 | string | - | |
|
|
223
|
-
| defaultValue | 默认时间 | | - | |
|
|
224
|
-
| disabled | 禁用全部操作 | boolean | false | |
|
|
225
|
-
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
226
|
-
| format | 展示的时间格式 | string | HH:mm:ss | |
|
|
227
|
-
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | |
|
|
228
|
-
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | |
|
|
229
|
-
| hourStep | 小时选项间隔 | number | 1 | |
|
|
230
|
-
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
|
|
231
|
-
| minuteStep | 分钟选项间隔 | number | 1 | |
|
|
232
|
-
| needConfirm | 是否需要确认按钮，为 | boolean | - | 5.14.0 |
|
|
233
|
-
| open | 面板是否打开 | boolean | false | |
|
|
234
|
-
| placeholder | 没有值的时候显示的内容 | string \| [string, string] | 请选择时间 | |
|
|
235
|
-
| placement | 选择框弹出的位置 | bottomLeft | bottomLeft | |
|
|
236
|
-
| popupClassName | 弹出层类名 | string | - | |
|
|
237
|
-
| popupStyle | 弹出层样式对象 | object | - | |
|
|
238
|
-
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
|
|
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() | 获取焦点 | |
|
|
130
|
+
| title | 提示文字 | ReactNode \| () => ReactNode | - |
|
|
278
131
|
|
|
279
132
|
|
|
280
|
-
|
|
133
|
+
### 共同的 API
|
|
281
134
|
|
|
282
|
-
|
|
135
|
+
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
283
136
|
|
|
137
|
+
<!-- prettier-ignore -->
|
|
284
138
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
285
139
|
|--------|--------|--------|--------|--------|
|
|
286
|
-
|
|
|
287
|
-
|
|
|
288
|
-
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
};
|
|
302
|
-
```
|
|
140
|
+
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
141
|
+
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
142
|
+
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
143
|
+
| color | 背景颜色 | string | - | 4.3.0 |
|
|
144
|
+
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
145
|
+
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
146
|
+
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
147
|
+
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
148
|
+
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
149
|
+
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
150
|
+
| placement | 气泡框位置，可选 | string | top | |
|
|
151
|
+
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
152
|
+
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
153
|
+
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
154
|
+
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
303
155
|
|
|
304
156
|
|
|
305
157
|
|
|
@@ -559,43 +411,37 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
559
411
|
|
|
560
412
|
|
|
561
413
|
|
|
562
|
-
<DemoTitle title="
|
|
414
|
+
<DemoTitle title="Tag" desc="进行标记和分类的小标签">
|
|
563
415
|
#### API
|
|
564
416
|
|
|
565
417
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
566
418
|
|--------|--------|--------|--------|
|
|
567
|
-
|
|
|
419
|
+
| size | 尺寸 | 'small' \| 'middle' | 'middle' |
|
|
420
|
+
| color | 标签色 | SparkTagColors \| string | 'purple' |
|
|
568
421
|
|
|
569
|
-
<AntdApiRef url="https://ant.design/components/
|
|
422
|
+
<AntdApiRef url="https://ant.design/components/tag-cn/#api"></AntdApiRef>
|
|
570
423
|
|
|
571
424
|
|
|
572
425
|
## antd API
|
|
573
426
|
|
|
574
427
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
575
428
|
|
|
429
|
+
### Tag
|
|
430
|
+
|
|
576
431
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
577
432
|
|--------|--------|--------|--------|--------|
|
|
578
|
-
|
|
|
579
|
-
|
|
|
580
|
-
|
|
|
581
|
-
|
|
|
582
|
-
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
583
|
-
| defaultValue | defaultChecked | boolean | - | 5.12.0 |
|
|
584
|
-
| disabled | 是否禁用 | boolean | false | |
|
|
585
|
-
| loading | 加载中的开关 | boolean | false | |
|
|
586
|
-
| size | 开关大小，可选值： | string | default | |
|
|
587
|
-
| unCheckedChildren | 非选中时的内容 | ReactNode | - | |
|
|
588
|
-
| value | checked | boolean | - | 5.12.0 |
|
|
589
|
-
| onChange | 变化时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
590
|
-
| onClick | 点击时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
433
|
+
| closeIcon | 自定义关闭按钮。5.7.0：设置为 | ReactNode | false | 4.4.0 |
|
|
434
|
+
| icon | 设置图标 | ReactNode | - | |
|
|
435
|
+
| bordered | 是否有边框 | boolean | true | 5.4.0 |
|
|
436
|
+
| onClose | 关闭时的回调（可通过 | (e: React.MouseEvent) => void | - | |
|
|
591
437
|
|
|
592
438
|
|
|
593
|
-
|
|
439
|
+
### Tag.CheckableTag
|
|
594
440
|
|
|
595
|
-
|
|
|
596
|
-
|
|
597
|
-
|
|
|
598
|
-
|
|
|
441
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
442
|
+
|--------|--------|--------|--------|
|
|
443
|
+
| checked | 设置标签的选中状态 | boolean | false |
|
|
444
|
+
| onChange | 点击标签时触发的回调 | (checked) => void | - |
|
|
599
445
|
|
|
600
446
|
|
|
601
447
|
|
|
@@ -670,62 +516,156 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
670
516
|
|
|
671
517
|
|
|
672
518
|
|
|
673
|
-
<DemoTitle title="
|
|
519
|
+
<DemoTitle title="Switch" desc="使用开关切换两种状态之间。">
|
|
674
520
|
#### API
|
|
675
521
|
|
|
676
|
-
|
|
522
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
523
|
+
|--------|--------|--------|--------|
|
|
524
|
+
| label | Switch后的内容 | ReactNode | |
|
|
525
|
+
|
|
526
|
+
<AntdApiRef url="https://ant.design/components/switch-cn/#api"></AntdApiRef>
|
|
677
527
|
|
|
678
528
|
|
|
679
529
|
## antd API
|
|
680
530
|
|
|
681
531
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
682
532
|
|
|
683
|
-
#### Statistic
|
|
684
|
-
|
|
685
533
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
686
534
|
|--------|--------|--------|--------|--------|
|
|
687
|
-
|
|
|
688
|
-
|
|
|
689
|
-
|
|
|
690
|
-
|
|
|
691
|
-
|
|
|
692
|
-
|
|
|
693
|
-
|
|
|
694
|
-
|
|
|
695
|
-
|
|
|
696
|
-
|
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
|
|
701
|
-
|
|
535
|
+
| autoFocus | 组件自动获取焦点 | boolean | false | |
|
|
536
|
+
| checked | 指定当前是否选中 | boolean | false | |
|
|
537
|
+
| checkedChildren | 选中时的内容 | ReactNode | - | |
|
|
538
|
+
| className | Switch 器类名 | string | - | |
|
|
539
|
+
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
540
|
+
| defaultValue | defaultChecked | boolean | - | 5.12.0 |
|
|
541
|
+
| disabled | 是否禁用 | boolean | false | |
|
|
542
|
+
| loading | 加载中的开关 | boolean | false | |
|
|
543
|
+
| size | 开关大小，可选值： | string | default | |
|
|
544
|
+
| unCheckedChildren | 非选中时的内容 | ReactNode | - | |
|
|
545
|
+
| value | checked | boolean | - | 5.12.0 |
|
|
546
|
+
| onChange | 变化时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
547
|
+
| onClick | 点击时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
548
|
+
|
|
549
|
+
|
|
550
|
+
## 方法
|
|
551
|
+
|
|
552
|
+
| 名称 | 描述 |
|
|
553
|
+
|--------|--------|
|
|
554
|
+
| blur() | 移除焦点 |
|
|
555
|
+
| focus() | 获取焦点 |
|
|
556
|
+
|
|
557
|
+
|
|
558
|
+
|
|
559
|
+
|
|
560
|
+
<DemoTitle title="TimePicker" desc="输入或选择时间的控件。">
|
|
561
|
+
#### API
|
|
562
|
+
|
|
563
|
+
<AntdApiRef url="https://ant.design/components/time-picker-cn/#api"></AntdApiRef>
|
|
564
|
+
|
|
565
|
+
|
|
566
|
+
## antd API
|
|
567
|
+
|
|
568
|
+
|
|
569
|
+
|
|
570
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
571
|
+
|
|
572
|
+
|
|
573
|
+
```jsx
|
|
574
|
+
import dayjs from 'dayjs';
|
|
575
|
+
import customParseFormat from 'dayjs/plugin/customParseFormat'
|
|
576
|
+
|
|
577
|
+
dayjs.extend(customParseFormat)
|
|
578
|
+
<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
|
|
579
|
+
```
|
|
580
|
+
|
|
702
581
|
|
|
703
|
-
<!-- prettier-ignore -->
|
|
704
582
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
705
583
|
|--------|--------|--------|--------|--------|
|
|
706
|
-
|
|
|
707
|
-
|
|
|
708
|
-
|
|
|
709
|
-
|
|
|
710
|
-
|
|
|
711
|
-
|
|
|
712
|
-
|
|
|
713
|
-
|
|
|
584
|
+
| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
|
|
585
|
+
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
586
|
+
| cellRender | 自定义单元格的内容 | (current: number, info: { originNode: React.ReactNode, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
|
|
587
|
+
| changeOnScroll | 在滚动时改变选择值 | boolean | false | 5.14.0 |
|
|
588
|
+
| className | 选择器类名 | string | - | |
|
|
589
|
+
| defaultValue | 默认时间 | | - | |
|
|
590
|
+
| disabled | 禁用全部操作 | boolean | false | |
|
|
591
|
+
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
592
|
+
| format | 展示的时间格式 | string | HH:mm:ss | |
|
|
593
|
+
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | |
|
|
594
|
+
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | |
|
|
595
|
+
| hourStep | 小时选项间隔 | number | 1 | |
|
|
596
|
+
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
|
|
597
|
+
| minuteStep | 分钟选项间隔 | number | 1 | |
|
|
598
|
+
| needConfirm | 是否需要确认按钮，为 | boolean | - | 5.14.0 |
|
|
599
|
+
| open | 面板是否打开 | boolean | false | |
|
|
600
|
+
| placeholder | 没有值的时候显示的内容 | string \| [string, string] | 请选择时间 | |
|
|
601
|
+
| placement | 选择框弹出的位置 | bottomLeft | bottomLeft | |
|
|
602
|
+
| popupClassName | 弹出层类名 | string | - | |
|
|
603
|
+
| popupStyle | 弹出层样式对象 | object | - | |
|
|
604
|
+
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
|
|
605
|
+
| renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - | |
|
|
606
|
+
| secondStep | 秒选项间隔 | number | 1 | |
|
|
607
|
+
| showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
|
|
608
|
+
| size | 输入框大小， | large | - | |
|
|
609
|
+
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
610
|
+
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
|
611
|
+
| use12Hours | 使用 12 小时制，为 true 时 | boolean | false | |
|
|
612
|
+
| value | 当前时间 | | - | |
|
|
613
|
+
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
614
|
+
| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - | |
|
|
615
|
+
| onChange | 时间发生变化的回调 | function(time: dayjs, timeString: string): void | - | |
|
|
616
|
+
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - | |
|
|
714
617
|
|
|
715
618
|
|
|
716
|
-
####
|
|
619
|
+
#### DisabledTime
|
|
620
|
+
|
|
621
|
+
|
|
622
|
+
```typescript
|
|
623
|
+
type DisabledTime = (now: Dayjs) => {
|
|
624
|
+
disabledHours?: () => number[];
|
|
625
|
+
disabledMinutes?: (selectedHour: number) => number[];
|
|
626
|
+
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
627
|
+
disabledMilliseconds?: (
|
|
628
|
+
selectedHour: number,
|
|
629
|
+
selectedMinute: number,
|
|
630
|
+
selectedSecond: number,
|
|
631
|
+
) => number[];
|
|
632
|
+
};
|
|
633
|
+
```
|
|
634
|
+
|
|
635
|
+
|
|
636
|
+
注意：`disabledMilliseconds` 为 `5.14.0` 新增。
|
|
637
|
+
|
|
638
|
+
## 方法
|
|
639
|
+
|
|
640
|
+
| 名称 | 描述 | 版本 |
|
|
641
|
+
|--------|--------|--------|
|
|
642
|
+
| blur() | 移除焦点 | |
|
|
643
|
+
| focus() | 获取焦点 | |
|
|
644
|
+
|
|
645
|
+
|
|
646
|
+
## RangePicker
|
|
647
|
+
|
|
648
|
+
属性与 DatePicker 的 [RangePicker](/components/date-picker-cn#rangepicker) 相同。还包含以下属性：
|
|
717
649
|
|
|
718
650
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
719
651
|
|--------|--------|--------|--------|--------|
|
|
720
|
-
|
|
|
721
|
-
|
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
652
|
+
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
653
|
+
| order | 始末时间是否自动排序 | boolean | true | 4.1.0 |
|
|
654
|
+
|
|
655
|
+
|
|
656
|
+
### RangeDisabledTime
|
|
657
|
+
|
|
658
|
+
|
|
659
|
+
```typescript
|
|
660
|
+
type RangeDisabledTime = (
|
|
661
|
+
now: Dayjs,
|
|
662
|
+
type = 'start' | 'end',
|
|
663
|
+
) => {
|
|
664
|
+
disabledHours?: () => number[];
|
|
665
|
+
disabledMinutes?: (selectedHour: number) => number[];
|
|
666
|
+
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
667
|
+
};
|
|
668
|
+
```
|
|
729
669
|
|
|
730
670
|
|
|
731
671
|
|
|
@@ -789,6 +729,66 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
789
729
|
|
|
790
730
|
|
|
791
731
|
|
|
732
|
+
<DemoTitle title="Statistic" desc="展示统计数值">
|
|
733
|
+
#### API
|
|
734
|
+
|
|
735
|
+
<AntdApiRef url="https://ant.design/components/statistic-cn/#api"></AntdApiRef>
|
|
736
|
+
|
|
737
|
+
|
|
738
|
+
## antd API
|
|
739
|
+
|
|
740
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
741
|
+
|
|
742
|
+
#### Statistic
|
|
743
|
+
|
|
744
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
745
|
+
|--------|--------|--------|--------|--------|
|
|
746
|
+
| decimalSeparator | 设置小数点 | string | . | |
|
|
747
|
+
| formatter | 自定义数值展示 | (value) => ReactNode | - | |
|
|
748
|
+
| groupSeparator | 设置千分位标识符 | string | , | |
|
|
749
|
+
| loading | 数值是否加载中 | boolean | false | 4.8.0 |
|
|
750
|
+
| precision | 数值精度 | number | - | |
|
|
751
|
+
| prefix | 设置数值的前缀 | ReactNode | - | |
|
|
752
|
+
| suffix | 设置数值的后缀 | ReactNode | - | |
|
|
753
|
+
| title | 数值的标题 | ReactNode | - | |
|
|
754
|
+
| value | 数值内容 | string \| number | - | |
|
|
755
|
+
| valueStyle | 设置数值区域的样式 | CSSProperties | - | |
|
|
756
|
+
|
|
757
|
+
|
|
758
|
+
#### Statistic.Countdown <Badge type="error">Deprecated</Badge>
|
|
759
|
+
|
|
760
|
+
<!-- <Antd component="Alert" message="版本 >= 5.25.0 时请使用 Statistic.Timer 作为替代方案。" type="warning" banner="true"></Antd> -->
|
|
761
|
+
|
|
762
|
+
<!-- prettier-ignore -->
|
|
763
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
764
|
+
|--------|--------|--------|--------|--------|
|
|
765
|
+
| format | 格式化倒计时展示，参考 | string | HH:mm:ss | |
|
|
766
|
+
| prefix | 设置数值的前缀 | ReactNode | - | |
|
|
767
|
+
| suffix | 设置数值的后缀 | ReactNode | - | |
|
|
768
|
+
| title | 数值的标题 | ReactNode | - | |
|
|
769
|
+
| value | 数值内容 | number | - | |
|
|
770
|
+
| valueStyle | 设置数值区域的样式 | CSSProperties | - | |
|
|
771
|
+
| onFinish | 倒计时完成时触发 | () => void | - | |
|
|
772
|
+
| onChange | 倒计时时间变化时触发 | (value: number) => void | - | |
|
|
773
|
+
|
|
774
|
+
|
|
775
|
+
#### Statistic.Timer <Badge>5.25.0+</Badge>
|
|
776
|
+
|
|
777
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
778
|
+
|--------|--------|--------|--------|--------|
|
|
779
|
+
| type | 计时类型，正计时或者倒计时 | countdown | - | |
|
|
780
|
+
| format | 格式化倒计时展示，参考 | string | HH:mm:ss | |
|
|
781
|
+
| prefix | 设置数值的前缀 | ReactNode | - | |
|
|
782
|
+
| suffix | 设置数值的后缀 | ReactNode | - | |
|
|
783
|
+
| title | 数值的标题 | ReactNode | - | |
|
|
784
|
+
| value | 数值内容 | number | - | |
|
|
785
|
+
| valueStyle | 设置数值区域的样式 | CSSProperties | - | |
|
|
786
|
+
| onFinish | 倒计时完成时触发, 指定为 | () => void | - | |
|
|
787
|
+
| onChange | 倒计时时间变化时触发 | (value: number) => void | - | |
|
|
788
|
+
|
|
789
|
+
|
|
790
|
+
|
|
791
|
+
|
|
792
792
|
<DemoTitle title="Spinner" desc="指示页面或区块的加载中状态">
|
|
793
793
|
#### API
|
|
794
794
|
|
|
@@ -806,150 +806,40 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
806
806
|
|
|
807
807
|
|
|
808
808
|
|
|
809
|
-
<DemoTitle title="
|
|
809
|
+
<DemoTitle title="Slider" desc="滑动型输入器，展示当前值和可选范围。">
|
|
810
|
+
#### API
|
|
811
|
+
|
|
812
|
+
<AntdApiRef url="https://ant.design/components/slider-cn/#api"></AntdApiRef>
|
|
813
|
+
|
|
814
|
+
|
|
810
815
|
## antd API
|
|
811
816
|
|
|
812
817
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
813
818
|
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
|
817
|
-
|
|
818
|
-
|
|
|
819
|
-
|
|
|
820
|
-
|
|
|
821
|
-
|
|
|
822
|
-
|
|
|
823
|
-
|
|
|
824
|
-
|
|
|
825
|
-
|
|
|
826
|
-
|
|
|
827
|
-
|
|
|
828
|
-
|
|
|
829
|
-
|
|
|
830
|
-
|
|
|
831
|
-
|
|
|
832
|
-
|
|
|
833
|
-
|
|
|
834
|
-
|
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
| maxTagTextLength | 最大显示的 tag 文本长度 | number | - | |
|
|
839
|
-
| menuItemSelectedIcon | 自定义多选时当前选中的条目图标 | ReactNode | - | |
|
|
840
|
-
| mode | 设置 Select 的模式为多选或标签 | multiple | - | |
|
|
841
|
-
| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | Not Found | |
|
|
842
|
-
| open | 是否展开下拉菜单 | boolean | - | |
|
|
843
|
-
| optionFilterProp | 搜索时过滤对应的 | string | value | |
|
|
844
|
-
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 | string | children | |
|
|
845
|
-
| options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }[] | - | |
|
|
846
|
-
| optionRender | 自定义渲染下拉选项 | (option: FlattenOptionData , info: { index: number }) => React.ReactNode | - | 5.11.0 |
|
|
847
|
-
| placeholder | 选择框默认文本 | string | - | |
|
|
848
|
-
| placement | 选择框弹出的位置 | bottomLeft | bottomLeft | |
|
|
849
|
-
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
|
|
850
|
-
| removeIcon | 自定义的多选框清除图标 | ReactNode | - | |
|
|
851
|
-
| searchValue | 控制搜索文本 | string | - | |
|
|
852
|
-
| showSearch | 配置是否可搜索 | boolean | 单选为 false，多选为 true | |
|
|
853
|
-
| size | 选择框大小 | large | middle | |
|
|
854
|
-
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
855
|
-
| suffixIcon | 自定义的选择框后缀图标。以防止图标被用于其他交互，替换的图标默认不会响应展开、收缩事件，可以通过添加 | ReactNode | | |
|
|
856
|
-
| styles | 语义化结构 style | | - | 5.25.0 |
|
|
857
|
-
| tagRender | 自定义 tag 内容 render，仅在 | (props) => ReactNode | - | |
|
|
858
|
-
| labelRender | 自定义当前选中的 label 内容 render （LabelInValueType的定义见 | (props: LabelInValueType) => ReactNode | - | 5.15.0 |
|
|
859
|
-
| tokenSeparators | 自动分词的分隔符，仅在 | string[] | - | |
|
|
860
|
-
| value | 指定当前选中的条目，多选时为一个数组。（value 数组引用未变化时，Select 不会更新） | string \| string[] \| | - | |
|
|
861
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
862
|
-
| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 |
|
|
863
|
-
| onBlur | 失去焦点时回调 | function | - | |
|
|
864
|
-
| onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value, option:Option \| Array) | - | |
|
|
865
|
-
| onClear | 清除内容时回调 | function | - | 4.6.0 |
|
|
866
|
-
| onDeselect | 取消选中时调用，参数为选中项的 value (或 key) 值，仅在 | function(value: string \| number \| LabeledValue) | - | |
|
|
867
|
-
| onOpenChange | 展开下拉菜单的回调 | (open: boolean) => void | - | |
|
|
868
|
-
| onFocus | 获得焦点时回调 | (event: FocusEvent) => void | - | |
|
|
869
|
-
| onInputKeyDown | 按键按下时回调 | (event: KeyboardEvent) => void | - | |
|
|
870
|
-
| onPopupScroll | 下拉列表滚动时的回调 | (event: UIEvent) => void | - | |
|
|
871
|
-
| onSearch | 文本框值变化时回调 | function(value: string) | - | |
|
|
872
|
-
| onSelect | 被选中时调用，参数为选中项的 value (或 key) 值 | function(value: string \| number \| LabeledValue, option: Option) | - | |
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentElement}` 将下拉弹层渲染节点固定在触发器的父元素中。
|
|
876
|
-
|
|
877
|
-
### Select Methods
|
|
878
|
-
|
|
879
|
-
| 名称 | 说明 | 版本 |
|
|
880
|
-
|--------|--------|--------|
|
|
881
|
-
| blur() | 取消焦点 | |
|
|
882
|
-
| focus() | 获取焦点 | |
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
### Option props
|
|
886
|
-
|
|
887
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
888
|
-
|--------|--------|--------|--------|--------|
|
|
889
|
-
| className | Option 器类名 | string | - | |
|
|
890
|
-
| disabled | 是否禁用 | boolean | false | |
|
|
891
|
-
| title | 选项上的原生 title 提示 | string | - | |
|
|
892
|
-
| value | 默认根据此属性值进行筛选 | string \| number | - | |
|
|
893
|
-
|
|
894
|
-
|
|
895
|
-
### OptGroup props
|
|
896
|
-
|
|
897
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
898
|
-
|--------|--------|--------|--------|--------|
|
|
899
|
-
| key | Key | string | - | |
|
|
900
|
-
| label | 组名 | React.ReactNode | - | |
|
|
901
|
-
| className | Option 器类名 | string | - | |
|
|
902
|
-
| title | 选项上的原生 title 提示 | string | - | |
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
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
|
|
819
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
820
|
+
|--------|--------|--------|--------|--------|
|
|
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 | - | |
|
|
840
|
+
|
|
841
|
+
|
|
842
|
+
### range
|
|
953
843
|
|
|
954
844
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
955
845
|
|--------|--------|--------|--------|--------|
|
|
@@ -1116,70 +1006,112 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1116
1006
|
|
|
1117
1007
|
|
|
1118
1008
|
|
|
1119
|
-
<DemoTitle title="
|
|
1120
|
-
|
|
1009
|
+
<DemoTitle title="Select" desc="下拉选择器">
|
|
1010
|
+
## antd API
|
|
1121
1011
|
|
|
1122
|
-
|
|
1012
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1123
1013
|
|
|
1014
|
+
### Select props
|
|
1124
1015
|
|
|
1125
|
-
|
|
1016
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1017
|
+
|--------|--------|--------|--------|--------|
|
|
1018
|
+
| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: 支持对象类型 |
|
|
1019
|
+
| autoClearSearchValue | 是否在选中项后清空搜索框，只在 | boolean | true | |
|
|
1020
|
+
| autoFocus | 默认获取焦点 | boolean | false | |
|
|
1021
|
+
| classNames | 语义化结构 class | | - | 5.25.0 |
|
|
1022
|
+
| defaultActiveFirstOption | 是否默认高亮第一个选项 | boolean | true | |
|
|
1023
|
+
| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |
|
|
1024
|
+
| defaultValue | 指定默认选中的条目 | string \| string[] \| | - | |
|
|
1025
|
+
| disabled | 是否禁用 | boolean | false | |
|
|
1026
|
+
| popupMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 | boolean \| number | true | 5.5.0 |
|
|
1027
|
+
| popupRender | 自定义下拉框内容 | (originNode: ReactNode) => ReactNode | - | |
|
|
1028
|
+
| fieldNames | 自定义节点 label、value、options、groupLabel 的字段 | object | { label: | 4.17.0（ |
|
|
1029
|
+
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 | boolean \| function(inputValue, option) | true | |
|
|
1030
|
+
| filterSort | 搜索时对筛选结果项的排序函数, 类似 | (optionA: Option, optionB: Option, info: { searchValue: string }) => number | - | searchValue |
|
|
1031
|
+
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | function(triggerNode) | () => document.body | |
|
|
1032
|
+
| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 | boolean | false | |
|
|
1033
|
+
| listHeight | 设置弹窗滚动高度 | number | 256 | |
|
|
1034
|
+
| loading | 加载中状态 | boolean | false | |
|
|
1035
|
+
| maxCount | 指定可选中的最多 items 数量，仅在 | number | - | 5.13.0 |
|
|
1036
|
+
| maxTagCount | 最多显示多少个 tag，响应式模式会对性能产生损耗 | number \| | - | responsive: 4.10 |
|
|
1037
|
+
| maxTagPlaceholder | 隐藏 tag 时显示的内容 | ReactNode \| function(omittedValues) | - | |
|
|
1038
|
+
| maxTagTextLength | 最大显示的 tag 文本长度 | number | - | |
|
|
1039
|
+
| menuItemSelectedIcon | 自定义多选时当前选中的条目图标 | ReactNode | - | |
|
|
1040
|
+
| mode | 设置 Select 的模式为多选或标签 | multiple | - | |
|
|
1041
|
+
| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | Not Found | |
|
|
1042
|
+
| open | 是否展开下拉菜单 | boolean | - | |
|
|
1043
|
+
| optionFilterProp | 搜索时过滤对应的 | string | value | |
|
|
1044
|
+
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 | string | children | |
|
|
1045
|
+
| options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }[] | - | |
|
|
1046
|
+
| optionRender | 自定义渲染下拉选项 | (option: FlattenOptionData , info: { index: number }) => React.ReactNode | - | 5.11.0 |
|
|
1047
|
+
| placeholder | 选择框默认文本 | string | - | |
|
|
1048
|
+
| placement | 选择框弹出的位置 | bottomLeft | bottomLeft | |
|
|
1049
|
+
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
|
|
1050
|
+
| removeIcon | 自定义的多选框清除图标 | ReactNode | - | |
|
|
1051
|
+
| searchValue | 控制搜索文本 | string | - | |
|
|
1052
|
+
| showSearch | 配置是否可搜索 | boolean | 单选为 false，多选为 true | |
|
|
1053
|
+
| size | 选择框大小 | large | middle | |
|
|
1054
|
+
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
1055
|
+
| suffixIcon | 自定义的选择框后缀图标。以防止图标被用于其他交互，替换的图标默认不会响应展开、收缩事件，可以通过添加 | ReactNode | | |
|
|
1056
|
+
| styles | 语义化结构 style | | - | 5.25.0 |
|
|
1057
|
+
| tagRender | 自定义 tag 内容 render，仅在 | (props) => ReactNode | - | |
|
|
1058
|
+
| labelRender | 自定义当前选中的 label 内容 render （LabelInValueType的定义见 | (props: LabelInValueType) => ReactNode | - | 5.15.0 |
|
|
1059
|
+
| tokenSeparators | 自动分词的分隔符，仅在 | string[] | - | |
|
|
1060
|
+
| value | 指定当前选中的条目，多选时为一个数组。（value 数组引用未变化时，Select 不会更新） | string \| string[] \| | - | |
|
|
1061
|
+
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
1062
|
+
| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 |
|
|
1063
|
+
| onBlur | 失去焦点时回调 | function | - | |
|
|
1064
|
+
| onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value, option:Option \| Array) | - | |
|
|
1065
|
+
| onClear | 清除内容时回调 | function | - | 4.6.0 |
|
|
1066
|
+
| onDeselect | 取消选中时调用，参数为选中项的 value (或 key) 值，仅在 | function(value: string \| number \| LabeledValue) | - | |
|
|
1067
|
+
| onOpenChange | 展开下拉菜单的回调 | (open: boolean) => void | - | |
|
|
1068
|
+
| onFocus | 获得焦点时回调 | (event: FocusEvent) => void | - | |
|
|
1069
|
+
| onInputKeyDown | 按键按下时回调 | (event: KeyboardEvent) => void | - | |
|
|
1070
|
+
| onPopupScroll | 下拉列表滚动时的回调 | (event: UIEvent) => void | - | |
|
|
1071
|
+
| onSearch | 文本框值变化时回调 | function(value: string) | - | |
|
|
1072
|
+
| onSelect | 被选中时调用，参数为选中项的 value (或 key) 值 | function(value: string \| number \| LabeledValue, option: Option) | - | |
|
|
1126
1073
|
|
|
1127
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1128
1074
|
|
|
1129
|
-
|
|
1075
|
+
注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentElement}` 将下拉弹层渲染节点固定在触发器的父元素中。
|
|
1130
1076
|
|
|
1131
|
-
|
|
1132
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
1133
|
-
|--------|--------|--------|--------|
|
|
1134
|
-
| autoFocus | 自动获取焦点 | boolean | false |
|
|
1135
|
-
| checked | 指定当前是否选中 | boolean | false |
|
|
1136
|
-
| defaultChecked | 初始是否选中 | boolean | false |
|
|
1137
|
-
| disabled | 禁用 Radio | boolean | false |
|
|
1138
|
-
| value | 根据 value 进行比较，判断是否选中 | any | - |
|
|
1077
|
+
### Select Methods
|
|
1139
1078
|
|
|
1079
|
+
| 名称 | 说明 | 版本 |
|
|
1080
|
+
|--------|--------|--------|
|
|
1081
|
+
| blur() | 取消焦点 | |
|
|
1082
|
+
| focus() | 获取焦点 | |
|
|
1140
1083
|
|
|
1141
|
-
### Radio.Group
|
|
1142
1084
|
|
|
1143
|
-
|
|
1085
|
+
### Option props
|
|
1144
1086
|
|
|
1145
|
-
<!-- prettier-ignore -->
|
|
1146
1087
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1147
1088
|
|--------|--------|--------|--------|--------|
|
|
1148
|
-
|
|
|
1149
|
-
|
|
|
1150
|
-
|
|
|
1151
|
-
|
|
|
1152
|
-
| options | 以配置形式设置子元素 | string[] \| number[] \| Array< | - | | |
|
|
1153
|
-
| optionType | 用于设置 Radio | default | default | 4.4.0 | |
|
|
1154
|
-
| size | 大小，只对按钮样式生效 | large | - | | |
|
|
1155
|
-
| value | 用于设置当前选中的值 | any | - | | |
|
|
1156
|
-
| block | 将 RadioGroup 宽度调整为其父宽度的选项 | boolean | false | 5.21.0 | |
|
|
1157
|
-
| onChange | 选项变化时的回调函数 | function(e:Event) | - | | |
|
|
1089
|
+
| className | Option 器类名 | string | - | |
|
|
1090
|
+
| disabled | 是否禁用 | boolean | false | |
|
|
1091
|
+
| title | 选项上的原生 title 提示 | string | - | |
|
|
1092
|
+
| value | 默认根据此属性值进行筛选 | string \| number | - | |
|
|
1158
1093
|
|
|
1159
1094
|
|
|
1160
|
-
###
|
|
1095
|
+
### OptGroup props
|
|
1161
1096
|
|
|
1162
|
-
|
|
|
1097
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1163
1098
|
|--------|--------|--------|--------|--------|
|
|
1164
|
-
|
|
|
1165
|
-
|
|
|
1166
|
-
|
|
|
1167
|
-
|
|
|
1168
|
-
| disabled | 指定 Radio 选项是否要禁用 | boolean | false | 4.4.0 |
|
|
1169
|
-
| title | 添加 Title 属性值 | string | - | 4.4.0 |
|
|
1170
|
-
| id | 添加 Radio Id 属性值 | string | - | 4.4.0 |
|
|
1171
|
-
| onChange | 当 Radio Group 的值发送改变时触发 | (e: CheckboxChangeEvent) => void; | - | 4.4.0 |
|
|
1172
|
-
| required | 指定 Radio 选项是否必填 | boolean | false | 4.4.0 |
|
|
1099
|
+
| key | Key | string | - | |
|
|
1100
|
+
| label | 组名 | React.ReactNode | - | |
|
|
1101
|
+
| className | Option 器类名 | string | - | |
|
|
1102
|
+
| title | 选项上的原生 title 提示 | string | - | |
|
|
1173
1103
|
|
|
1174
1104
|
|
|
1175
|
-
## 方法
|
|
1176
1105
|
|
|
1177
|
-
### Radio
|
|
1178
1106
|
|
|
1179
|
-
|
|
1180
|
-
|
|
1181
|
-
|
|
1182
|
-
|
|
|
1107
|
+
<DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。">
|
|
1108
|
+
## API
|
|
1109
|
+
|
|
1110
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1111
|
+
|--------|--------|--------|--------|
|
|
1112
|
+
| texture | 是否显示纹理 | boolean | false |
|
|
1113
|
+
|
|
1114
|
+
|
|
1183
1115
|
|
|
1184
1116
|
|
|
1185
1117
|
|
|
@@ -1236,13 +1168,81 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1236
1168
|
|
|
1237
1169
|
|
|
1238
1170
|
|
|
1239
|
-
<DemoTitle title="
|
|
1171
|
+
<DemoTitle title="Radio" desc="用于在多个备选项中选中单个状态。">
|
|
1240
1172
|
#### API
|
|
1241
1173
|
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
|
|
1174
|
+
<AntdApiRef url="https://ant.design/components/radio-cn/#api"></AntdApiRef>
|
|
1175
|
+
|
|
1176
|
+
|
|
1177
|
+
## antd API
|
|
1178
|
+
|
|
1179
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1180
|
+
|
|
1181
|
+
### Radio/Radio.Button
|
|
1182
|
+
|
|
1183
|
+
<!-- prettier-ignore -->
|
|
1184
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
1185
|
+
|--------|--------|--------|--------|
|
|
1186
|
+
| autoFocus | 自动获取焦点 | boolean | false |
|
|
1187
|
+
| checked | 指定当前是否选中 | boolean | false |
|
|
1188
|
+
| defaultChecked | 初始是否选中 | boolean | false |
|
|
1189
|
+
| disabled | 禁用 Radio | boolean | false |
|
|
1190
|
+
| value | 根据 value 进行比较，判断是否选中 | any | - |
|
|
1191
|
+
|
|
1192
|
+
|
|
1193
|
+
### Radio.Group
|
|
1194
|
+
|
|
1195
|
+
单选框组合，用于包裹一组 `Radio`。
|
|
1196
|
+
|
|
1197
|
+
<!-- prettier-ignore -->
|
|
1198
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1199
|
+
|--------|--------|--------|--------|--------|
|
|
1200
|
+
| buttonStyle | RadioButton 的风格样式，目前有描边和填色两种风格 | outline | outline | | |
|
|
1201
|
+
| defaultValue | 默认选中的值 | any | - | | |
|
|
1202
|
+
| disabled | 禁选所有子单选器 | boolean | false | | |
|
|
1203
|
+
| name | RadioGroup 下所有 | string | - | | |
|
|
1204
|
+
| options | 以配置形式设置子元素 | string[] \| number[] \| Array< | - | | |
|
|
1205
|
+
| optionType | 用于设置 Radio | default | default | 4.4.0 | |
|
|
1206
|
+
| size | 大小，只对按钮样式生效 | large | - | | |
|
|
1207
|
+
| value | 用于设置当前选中的值 | any | - | | |
|
|
1208
|
+
| block | 将 RadioGroup 宽度调整为其父宽度的选项 | boolean | false | 5.21.0 | |
|
|
1209
|
+
| onChange | 选项变化时的回调函数 | function(e:Event) | - | | |
|
|
1210
|
+
|
|
1211
|
+
|
|
1212
|
+
### CheckboxOptionType
|
|
1213
|
+
|
|
1214
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1215
|
+
|--------|--------|--------|--------|--------|
|
|
1216
|
+
| label | 用于作为 Radio 选项展示的文本 | string | - | 4.4.0 |
|
|
1217
|
+
| value | 关联 Radio 选项的值 | string | - | 4.4.0 |
|
|
1218
|
+
| style | 应用到 Radio 选项的 style | React.CSSProperties | - | 4.4.0 |
|
|
1219
|
+
| className | Radio 选项的类名 | string | - | 5.25.0 |
|
|
1220
|
+
| disabled | 指定 Radio 选项是否要禁用 | boolean | false | 4.4.0 |
|
|
1221
|
+
| title | 添加 Title 属性值 | string | - | 4.4.0 |
|
|
1222
|
+
| id | 添加 Radio Id 属性值 | string | - | 4.4.0 |
|
|
1223
|
+
| onChange | 当 Radio Group 的值发送改变时触发 | (e: CheckboxChangeEvent) => void; | - | 4.4.0 |
|
|
1224
|
+
| required | 指定 Radio 选项是否必填 | boolean | false | 4.4.0 |
|
|
1225
|
+
|
|
1226
|
+
|
|
1227
|
+
## 方法
|
|
1228
|
+
|
|
1229
|
+
### Radio
|
|
1230
|
+
|
|
1231
|
+
| 名称 | 描述 |
|
|
1232
|
+
|--------|--------|
|
|
1233
|
+
| blur() | 移除焦点 |
|
|
1234
|
+
| focus() | 获取焦点 |
|
|
1235
|
+
|
|
1236
|
+
|
|
1237
|
+
|
|
1238
|
+
|
|
1239
|
+
<DemoTitle title="MdEditor" desc="提示词编辑器，可以高亮 Markdown 的语法，支持自定义槽位变量的插入">
|
|
1240
|
+
#### API
|
|
1241
|
+
|
|
1242
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1243
|
+
|--------|--------|--------|--------|
|
|
1244
|
+
| maxLength | 可以输入内容的最大长度 | number | |
|
|
1245
|
+
| value | 输入的内容 | string | (必填) |
|
|
1246
1246
|
| className | 输入内容的类名 | string | |
|
|
1247
1247
|
| onChange | 输入内容的回调 | (value: string) => void | |
|
|
1248
1248
|
| variables | 可以插入的变量列表 | Array | |
|
|
@@ -2168,1134 +2168,1164 @@ type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' |
|
|
|
2168
2168
|
|
|
2169
2169
|
|
|
2170
2170
|
|
|
2171
|
-
<DemoTitle title="
|
|
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="用于网站上的全局功能；无论浏览到何处都可以看见的按钮。">
|
|
2171
|
+
<DemoTitle title="Form" desc="高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。">
|
|
2216
2172
|
#### API
|
|
2217
2173
|
|
|
2218
|
-
<AntdApiRef url="https://ant.design/components/
|
|
2174
|
+
<AntdApiRef url="https://ant.design/components/form-cn/#api"></AntdApiRef>
|
|
2219
2175
|
|
|
2220
2176
|
|
|
2221
2177
|
## antd API
|
|
2222
2178
|
|
|
2223
2179
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2224
2180
|
|
|
2225
|
-
|
|
2226
|
-
|
|
2227
|
-
### 共同的 API
|
|
2181
|
+
### Form
|
|
2228
2182
|
|
|
2229
2183
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2230
2184
|
|--------|--------|--------|--------|--------|
|
|
2231
|
-
|
|
|
2232
|
-
|
|
|
2233
|
-
|
|
|
2234
|
-
|
|
|
2235
|
-
|
|
|
2236
|
-
|
|
|
2237
|
-
|
|
|
2238
|
-
|
|
|
2239
|
-
|
|
|
2240
|
-
|
|
|
2185
|
+
| colon | 配置 Form.Item 的 | boolean | true | |
|
|
2186
|
+
| disabled | 设置表单组件禁用，仅对 antd 组件有效 | boolean | false | 4.21.0 |
|
|
2187
|
+
| component | 设置 Form 渲染元素，为 | ComponentType \| false | form | |
|
|
2188
|
+
| fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。查看 | | - | |
|
|
2189
|
+
| form | 经 | | - | |
|
|
2190
|
+
| feedbackIcons | 当 | | - | 5.9.0 |
|
|
2191
|
+
| initialValues | 表单默认值，只有初始化以及重置时生效 | object | - | |
|
|
2192
|
+
| labelAlign | label 标签的文本对齐方式 | left | right | |
|
|
2193
|
+
| labelWrap | label 标签的文本换行方式 | boolean | false | 4.18.0 |
|
|
2194
|
+
| labelCol | label 标签布局，同 | | - | |
|
|
2195
|
+
| layout | 表单布局 | horizontal | horizontal | |
|
|
2196
|
+
| name | 表单名称，会作为表单字段 | string | - | |
|
|
2197
|
+
| preserve | 当字段被删除时保留字段值。你可以通过 | boolean | true | 4.4.0 |
|
|
2198
|
+
| requiredMark | 必选样式，可以切换为必选或者可选展示样式。此为 Form 配置，Form.Item 无法单独配置 | boolean \| | true | renderProps |
|
|
2199
|
+
| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean \| | false | focus: 5.24.0 |
|
|
2200
|
+
| size | 设置字段组件的尺寸（仅限 antd 组件） | small | - | |
|
|
2201
|
+
| validateMessages | 验证提示模板，说明 | | - | |
|
|
2202
|
+
| validateTrigger | 统一设置字段触发验证的时机 | string \| string[] | onChange | 4.3.0 |
|
|
2203
|
+
| variant | 表单内控件变体 | outlined | outlined | 5.13.0 \| |
|
|
2204
|
+
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | | - | |
|
|
2205
|
+
| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | - | |
|
|
2206
|
+
| onFinish | 提交表单且数据验证成功后回调事件 | function(values) | - | |
|
|
2207
|
+
| onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | - | |
|
|
2208
|
+
| onValuesChange | 字段值更新时触发回调事件 | function(changedValues, allValues) | - | |
|
|
2209
|
+
| clearOnDestroy | 当表单被卸载时清空表单值 | boolean | false | 5.18.0 |
|
|
2241
2210
|
|
|
2242
2211
|
|
|
2243
|
-
|
|
2212
|
+
支持原生 form 除 `onSubmit` 外的所有属性。
|
|
2244
2213
|
|
|
2245
|
-
|
|
2246
|
-
|--------|--------|--------|--------|--------|
|
|
2247
|
-
| shape | 设置包含的 FloatButton 按钮形状 | circle | circle | |
|
|
2248
|
-
| trigger | 触发方式（有触发方式为菜单模式） | click | - | |
|
|
2249
|
-
| open | 受控展开，需配合 trigger 一起使用 | boolean | - | |
|
|
2250
|
-
| closeIcon | 自定义关闭按钮 | React.ReactNode | | |
|
|
2251
|
-
| placement | 自定义菜单弹出位置 | top | top | 5.21.0 |
|
|
2252
|
-
| onOpenChange | 展开收起时的回调，需配合 trigger 一起使用 | (open: boolean) => void | - | |
|
|
2253
|
-
| onClick | 点击按钮时的回调（仅在菜单模式中有效） | (event) => void | - | 5.3.0 |
|
|
2214
|
+
### validateMessages
|
|
2254
2215
|
|
|
2216
|
+
Form 为验证提供了[默认的错误提示信息](https://github.com/ant-design/ant-design/blob/6234509d18bac1ac60fbb3f92a5b2c6a6361295a/components/locale/en_US.ts#L88-L134)，你可以通过配置 `validateMessages` 属性，修改对应的提示模板。一种常见的使用方式，是配置国际化提示信息：
|
|
2255
2217
|
|
|
2256
|
-
### FloatButton.BackTop
|
|
2257
2218
|
|
|
2258
|
-
|
|
2259
|
-
|
|
2260
|
-
|
|
2261
|
-
|
|
2262
|
-
|
|
2263
|
-
| onClick | 点击按钮的回调函数 | () => void | - | |
|
|
2219
|
+
```jsx
|
|
2220
|
+
const validateMessages = {
|
|
2221
|
+
required: "'${name}' 是必选字段",
|
|
2222
|
+
// ...
|
|
2223
|
+
};
|
|
2264
2224
|
|
|
2225
|
+
<Form validateMessages={validateMessages} />;
|
|
2226
|
+
```
|
|
2265
2227
|
|
|
2266
2228
|
|
|
2229
|
+
此外，[ConfigProvider](/components/config-provider-cn) 也提供了全局化配置方案，允许统一配置错误提示模板：
|
|
2267
2230
|
|
|
2268
|
-
<DemoTitle title="Dropdown" desc="向下弹出的列表。">
|
|
2269
|
-
#### API
|
|
2270
2231
|
|
|
2271
|
-
|
|
2232
|
+
```jsx
|
|
2233
|
+
const validateMessages = {
|
|
2234
|
+
required: "'${name}' 是必选字段",
|
|
2235
|
+
// ...
|
|
2236
|
+
};
|
|
2272
2237
|
|
|
2238
|
+
<ConfigProvider form={{ validateMessages }}>
|
|
2239
|
+
<Form />
|
|
2240
|
+
</ConfigProvider>;
|
|
2241
|
+
```
|
|
2273
2242
|
|
|
2274
|
-
## antd API
|
|
2275
2243
|
|
|
2276
|
-
|
|
2244
|
+
## Form.Item
|
|
2277
2245
|
|
|
2278
|
-
|
|
2246
|
+
表单字段组件，用于数据双向绑定、校验、布局等。
|
|
2279
2247
|
|
|
2280
2248
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2281
2249
|
|--------|--------|--------|--------|--------|
|
|
2282
|
-
|
|
|
2283
|
-
|
|
|
2284
|
-
|
|
|
2285
|
-
|
|
|
2286
|
-
|
|
|
2287
|
-
|
|
|
2288
|
-
|
|
|
2289
|
-
|
|
|
2290
|
-
|
|
|
2291
|
-
|
|
|
2292
|
-
|
|
|
2293
|
-
|
|
|
2294
|
-
|
|
|
2295
|
-
|
|
|
2250
|
+
| colon | 配合 | boolean | true | |
|
|
2251
|
+
| dependencies | 设置依赖字段，说明 | | - | |
|
|
2252
|
+
| extra | 额外的提示信息，和 | ReactNode | - | |
|
|
2253
|
+
| getValueFromEvent | 设置如何将 event 的值转换成字段值 | (..args: any[]) => any | - | |
|
|
2254
|
+
| getValueProps | 为子元素添加额外的属性 (不建议通过 | (value: any) => Record | - | 4.2.0 |
|
|
2255
|
+
| hasFeedback | 配合 | boolean \| { icons: | false | icons: 5.9.0 |
|
|
2256
|
+
| help | 提示信息，如不设置，则会根据校验规则自动生成 | ReactNode | - | |
|
|
2257
|
+
| hidden | 是否隐藏字段（依然会收集和校验字段） | boolean | false | 4.4.0 |
|
|
2258
|
+
| htmlFor | 设置子元素 label | string | - | |
|
|
2259
|
+
| initialValue | 设置子元素默认值，如果与 Form 的 | string | - | 4.2.0 |
|
|
2260
|
+
| label | label | ReactNode | - | null: 5.22.0 |
|
|
2261
|
+
| labelAlign | 标签文本对齐方式 | left | right | |
|
|
2262
|
+
| labelCol | label | | - | |
|
|
2263
|
+
| messageVariables | 默认验证字段的信息，查看 | Record | - | 4.7.0 |
|
|
2264
|
+
| name | 字段名，支持数组 | | - | |
|
|
2265
|
+
| normalize | 组件获取值后进行转换，再放入 Form 中。不支持异步 | (value, prevValue, prevValues) => any | - | |
|
|
2266
|
+
| noStyle | 为 | boolean | false | |
|
|
2267
|
+
| preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 |
|
|
2268
|
+
| required | 必填样式设置。如不设置，则会根据校验规则自动生成 | boolean | false | |
|
|
2269
|
+
| rules | 校验规则，设置字段的校验逻辑。点击 | | - | |
|
|
2270
|
+
| shouldUpdate | 自定义字段更新逻辑，说明 | boolean \| (prevValue, curValue) => boolean | false | |
|
|
2271
|
+
| tooltip | 配置提示信息 | ReactNode \| | - | 4.7.0 |
|
|
2272
|
+
| trigger | 设置收集字段值变更的时机。点击 | string | onChange | |
|
|
2273
|
+
| validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验。设置 | boolean \| | false | parallel |
|
|
2274
|
+
| validateDebounce | 设置防抖，延迟毫秒数后进行校验 | number | - | 5.9.0 |
|
|
2275
|
+
| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | - | |
|
|
2276
|
+
| validateTrigger | 设置字段校验的时机 | string \| string[] | onChange | |
|
|
2277
|
+
| valuePropName | 子节点的值的属性。注意：Switch、Checkbox 的 valuePropName 应该是 | string | value | |
|
|
2278
|
+
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 | | - | |
|
|
2279
|
+
| layout | 表单项布局 | horizontal | - | 5.18.0 |
|
|
2296
2280
|
|
|
2297
2281
|
|
|
2298
|
-
|
|
2282
|
+
被设置了 `name` 属性的 `Form.Item` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：
|
|
2299
2283
|
|
|
2300
|
-
属性与 Dropdown 的相同。还包含以下属性：
|
|
2301
2284
|
|
|
2302
|
-
|
|
2303
|
-
|
|
2304
|
-
|
|
2305
|
-
| loading | 设置按钮载入状态，和 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
2306
|
-
| danger | 设置危险按钮 | boolean | - | 4.23.0 |
|
|
2307
|
-
| icon | 右侧的 icon | ReactNode | - | |
|
|
2308
|
-
| size | 按钮大小，和 | large | middle | |
|
|
2309
|
-
| type | 按钮类型，和 | primary | default | |
|
|
2310
|
-
| onClick | 点击左侧按钮的回调，和 | (event: React.MouseEvent) => void | - | |
|
|
2285
|
+
1. 你**不再需要也不应该**用 `onChange` 来做数据收集同步（你可以使用 Form 的 `onValuesChange`），但还是可以继续监听 `onChange` 事件。
|
|
2286
|
+
2. 你不能用控件的 `value` 或 `defaultValue` 等属性来设置表单域的值，默认值可以用 Form 里的 `initialValues` 来设置。注意 `initialValues` 不能被 `setState` 动态更新，你需要用 `setFieldsValue` 来更新。
|
|
2287
|
+
3. 你不应该用 `setState`，可以使用 `form.setFieldsValue` 来动态改变表单值。
|
|
2311
2288
|
|
|
2289
|
+
### dependencies
|
|
2312
2290
|
|
|
2313
|
-
|
|
2291
|
+
当字段间存在依赖关系时使用。如果一个字段设置了 `dependencies` 属性。那么它所依赖的字段更新时，该字段将自动触发更新与校验。一种常见的场景，就是注册用户表单的“密码”与“确认密码”字段。“确认密码”校验依赖于“密码”字段，设置 `dependencies` 后，“密码”字段更新会重新触发“校验密码”的校验逻辑。你可以参考[具体例子](#form-demo-dependencies)。
|
|
2314
2292
|
|
|
2315
|
-
|
|
2316
|
-
## antd API
|
|
2293
|
+
`dependencies` 不应和 `shouldUpdate` 一起使用，因为这可能带来更新逻辑的混乱。
|
|
2317
2294
|
|
|
2318
|
-
###
|
|
2295
|
+
### FeedbackIcons
|
|
2319
2296
|
|
|
2320
|
-
|
|
2321
|
-
|--------|--------|--------|--------|--------|
|
|
2322
|
-
| defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | string[] | - | |
|
|
2323
|
-
| defaultSelectedKeys | 初始选中的菜单项 key 数组 | string[] | - | |
|
|
2324
|
-
| expandIcon | 自定义展开图标 | ReactNode \| | - | 4.9.0 |
|
|
2325
|
-
| forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false | |
|
|
2326
|
-
| inlineCollapsed | inline 时菜单是否收起状态 | boolean | - | |
|
|
2327
|
-
| inlineIndent | inline 模式的菜单缩进宽度 | number | 24 | |
|
|
2328
|
-
| items | 菜单内容 | | - | 4.20.0 |
|
|
2329
|
-
| mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | vertical | vertical | |
|
|
2330
|
-
| multiple | 是否允许多选 | boolean | false | |
|
|
2331
|
-
| openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string[] | - | |
|
|
2332
|
-
| overflowedIndicator | 用于自定义 Menu 水平空间不足时的省略收缩的图标 | ReactNode | | |
|
|
2333
|
-
| selectable | 是否允许选中 | boolean | true | |
|
|
2334
|
-
| selectedKeys | 当前选中的菜单项 key 数组 | string[] | - | |
|
|
2335
|
-
| style | 根节点样式 | CSSProperties | - | |
|
|
2336
|
-
| subMenuCloseDelay | 用户鼠标离开子菜单后关闭延时，单位：秒 | number | 0.1 | |
|
|
2337
|
-
| subMenuOpenDelay | 用户鼠标进入子菜单后开启延时，单位：秒 | number | 0 | |
|
|
2338
|
-
| theme | 主题颜色 | light | light | |
|
|
2339
|
-
| triggerSubMenuAction | SubMenu 展开/关闭的触发行为 | hover | hover | |
|
|
2340
|
-
| onClick | 点击 MenuItem 调用此函数 | function({ item, key, keyPath, domEvent }) | - | |
|
|
2341
|
-
| onDeselect | 取消选中时调用，仅在 multiple 生效 | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |
|
|
2342
|
-
| onOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string[]) | - | |
|
|
2343
|
-
| onSelect | 被选中时调用 | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |
|
|
2297
|
+
`({ status: ValidateStatus, errors: ReactNode, warnings: ReactNode }) => Record<ValidateStatus, ReactNode>`
|
|
2344
2298
|
|
|
2299
|
+
### shouldUpdate
|
|
2345
2300
|
|
|
2346
|
-
|
|
2301
|
+
Form 通过增量更新方式，只更新被修改的字段相关组件以达到性能优化目的。大部分场景下，你只需要编写代码或者与 [`dependencies`](#dependencies) 属性配合校验即可。而在某些特定场景，例如修改某个字段值后出现新的字段选项、或者纯粹希望表单任意变化都对某一个区域进行渲染。你可以通过 `shouldUpdate` 修改 Form.Item 的更新逻辑。
|
|
2347
2302
|
|
|
2348
|
-
|
|
2303
|
+
当 `shouldUpdate` 为 `true` 时，Form 的任意变化都会使该 Form.Item 重新渲染。这对于自定义渲染一些区域十分有帮助，要注意 Form.Item 里包裹的子组件必须由函数返回，否则 `shouldUpdate` 不会起作用：
|
|
2349
2304
|
|
|
2350
|
-
|
|
2305
|
+
相关issue：[#34500](https://github.com/ant-design/ant-design/issues/34500)
|
|
2351
2306
|
|
|
2352
|
-
#### MenuItemType
|
|
2353
2307
|
|
|
2354
|
-
|
|
2355
|
-
|
|
2356
|
-
|
|
2357
|
-
|
|
2358
|
-
|
|
2359
|
-
|
|
2360
|
-
|
|
2361
|
-
| label | 菜单项标题 | ReactNode | - | |
|
|
2362
|
-
| title | 设置收缩时展示的悬浮标题 | string | - | |
|
|
2308
|
+
```jsx
|
|
2309
|
+
<Form.Item shouldUpdate>
|
|
2310
|
+
{() => {
|
|
2311
|
+
return <pre>{JSON.stringify(form.getFieldsValue(), null, 2)}</pre>;
|
|
2312
|
+
}}
|
|
2313
|
+
</Form.Item>
|
|
2314
|
+
```
|
|
2363
2315
|
|
|
2364
2316
|
|
|
2365
|
-
|
|
2317
|
+
你可以参考[示例](#form-demo-inline-login)查看具体使用场景。
|
|
2366
2318
|
|
|
2367
|
-
|
|
2368
|
-
|--------|--------|--------|--------|--------|
|
|
2369
|
-
| children | 子菜单的菜单项 | | - | |
|
|
2370
|
-
| disabled | 是否禁用 | boolean | false | |
|
|
2371
|
-
| icon | 菜单图标 | ReactNode | - | |
|
|
2372
|
-
| key | 唯一标志 | string | - | |
|
|
2373
|
-
| label | 菜单项标题 | ReactNode | - | |
|
|
2374
|
-
| popupClassName | 子菜单样式， | string | - | |
|
|
2375
|
-
| popupOffset | 子菜单偏移量， | [number, number] | - | |
|
|
2376
|
-
| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | - | |
|
|
2377
|
-
| theme | 设置子菜单的主题，默认从 Menu 上继承 | light | - | |
|
|
2319
|
+
当 `shouldUpdate` 为方法时，表单的每次数值更新都会调用该方法，提供原先的值与当前的值以供你比较是否需要更新。这对于是否根据值来渲染额外字段十分有帮助：
|
|
2378
2320
|
|
|
2379
2321
|
|
|
2380
|
-
|
|
2322
|
+
```jsx
|
|
2323
|
+
<Form.Item shouldUpdate={(prevValues, curValues) => prevValues.additional !== curValues.additional}>
|
|
2324
|
+
{() => {
|
|
2325
|
+
return (
|
|
2326
|
+
<Form.Item name="other">
|
|
2327
|
+
<Input />
|
|
2328
|
+
</Form.Item>
|
|
2329
|
+
);
|
|
2330
|
+
}}
|
|
2331
|
+
</Form.Item>
|
|
2332
|
+
```
|
|
2381
2333
|
|
|
2382
|
-
定义类型为 `group` 时，会作为分组处理:
|
|
2383
2334
|
|
|
2335
|
+
你可以参考[示例](#form-demo-control-hooks)查看具体使用场景。
|
|
2384
2336
|
|
|
2385
|
-
|
|
2386
|
-
const groupItem = {
|
|
2387
|
-
type: 'group', // Must have
|
|
2388
|
-
label: 'My Group',
|
|
2389
|
-
children: [],
|
|
2390
|
-
};
|
|
2391
|
-
```
|
|
2337
|
+
### messageVariables
|
|
2392
2338
|
|
|
2339
|
+
你可以通过 `messageVariables` 修改 Form.Item 的默认验证信息。
|
|
2393
2340
|
|
|
2394
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2395
|
-
|--------|--------|--------|--------|--------|
|
|
2396
|
-
| children | 分组的菜单项 | | - | |
|
|
2397
|
-
| label | 分组标题 | ReactNode | - | |
|
|
2398
2341
|
|
|
2342
|
+
```jsx
|
|
2343
|
+
<Form>
|
|
2344
|
+
<Form.Item
|
|
2345
|
+
messageVariables={{ another: 'good' }}
|
|
2346
|
+
label="user"
|
|
2347
|
+
rules={[{ required: true, message: '${another} is required' }]}
|
|
2348
|
+
>
|
|
2349
|
+
<Input />
|
|
2350
|
+
</Form.Item>
|
|
2351
|
+
<Form.Item
|
|
2352
|
+
messageVariables={{ label: 'good' }}
|
|
2353
|
+
label={<span>user</span>}
|
|
2354
|
+
rules={[{ required: true, message: '${label} is required' }]}
|
|
2355
|
+
>
|
|
2356
|
+
<Input />
|
|
2357
|
+
</Form.Item>
|
|
2358
|
+
</Form>
|
|
2359
|
+
```
|
|
2399
2360
|
|
|
2400
|
-
#### MenuDividerType
|
|
2401
2361
|
|
|
2402
|
-
|
|
2362
|
+
自 `5.20.2` 起，当你希望不要转译 `${}` 时，你可以通过 `\\${}` 来略过：
|
|
2403
2363
|
|
|
2404
2364
|
|
|
2405
|
-
```
|
|
2406
|
-
|
|
2407
|
-
|
|
2408
|
-
}
|
|
2365
|
+
```jsx
|
|
2366
|
+
{ required: true, message: '${label} is convert, \\${label} is not convert' }
|
|
2367
|
+
|
|
2368
|
+
// good is convert, ${label} is not convert
|
|
2409
2369
|
```
|
|
2410
2370
|
|
|
2411
2371
|
|
|
2412
|
-
|
|
2413
|
-
|--------|--------|--------|--------|--------|
|
|
2414
|
-
| dashed | 是否虚线 | boolean | false | |
|
|
2372
|
+
## Form.List
|
|
2415
2373
|
|
|
2374
|
+
为字段提供数组化管理。
|
|
2416
2375
|
|
|
2376
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2377
|
+
|--------|--------|--------|--------|--------|
|
|
2378
|
+
| children | 渲染函数 | (fields: Field[], operation: { add, remove, move }, meta: { errors }) => React.ReactNode | - | |
|
|
2379
|
+
| initialValue | 设置子元素默认值，如果与 Form 的 | any[] | - | 4.9.0 |
|
|
2380
|
+
| name | 字段名，支持数组。List 本身也是字段，因而 | | - | |
|
|
2381
|
+
| rules | 校验规则，仅支持自定义规则。需要配合 | { validator, message }[] | - | 4.7.0 |
|
|
2417
2382
|
|
|
2418
2383
|
|
|
2419
|
-
<DemoTitle title="Descriptions" desc="展示多个只读字段的组合">
|
|
2420
|
-
#### API
|
|
2421
2384
|
|
|
2422
|
-
|
|
2385
|
+
```tsx
|
|
2386
|
+
<Form.List>
|
|
2387
|
+
{(fields) =>
|
|
2388
|
+
fields.map((field) => (
|
|
2389
|
+
<Form.Item {...field}>
|
|
2390
|
+
<Input />
|
|
2391
|
+
</Form.Item>
|
|
2392
|
+
))
|
|
2393
|
+
}
|
|
2394
|
+
</Form.List>
|
|
2395
|
+
```
|
|
2423
2396
|
|
|
2424
2397
|
|
|
2425
|
-
|
|
2398
|
+
注意：Form.List 下的字段不应该配置 `initialValue`，你始终应该通过 Form.List 的 `initialValue` 或者 Form 的 `initialValues` 来配置。
|
|
2426
2399
|
|
|
2427
|
-
|
|
2400
|
+
## operation
|
|
2428
2401
|
|
|
2429
|
-
|
|
2402
|
+
Form.List 渲染表单相关操作函数。
|
|
2430
2403
|
|
|
2431
2404
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2432
2405
|
|--------|--------|--------|--------|--------|
|
|
2433
|
-
|
|
|
2434
|
-
|
|
|
2435
|
-
|
|
|
2436
|
-
| extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 |
|
|
2437
|
-
| items | 描述列表项内容 | | - | 5.8.0 |
|
|
2438
|
-
| layout | 描述布局 | horizontal | horizontal | |
|
|
2439
|
-
| size | 设置列表的大小。可以设置为 | default | - | |
|
|
2440
|
-
| title | 描述列表的标题，显示在最顶部 | ReactNode | - | |
|
|
2441
|
-
| classNames | 语义化结构 class | | - | 5.23.0 |
|
|
2442
|
-
| styles | 语义化结构 style | | - | 5.23.0 |
|
|
2443
|
-
|
|
2406
|
+
| add | 新增表单项 | (defaultValue?: any, insertIndex?: number) => void | insertIndex | 4.6.0 |
|
|
2407
|
+
| move | 移动表单项 | (from: number, to: number) => void | - | |
|
|
2408
|
+
| remove | 删除表单项 | (index: number \| number[]) => void | number[] | 4.5.0 |
|
|
2444
2409
|
|
|
2445
|
-
### DescriptionItem
|
|
2446
2410
|
|
|
2447
|
-
|
|
2448
|
-
|--------|--------|--------|--------|--------|
|
|
2449
|
-
| label | 内容的描述 | ReactNode | - | |
|
|
2450
|
-
| span | 包含列的数量（ | number\| | 1 | screens: 5.9.0 |
|
|
2411
|
+
## Form.ErrorList
|
|
2451
2412
|
|
|
2413
|
+
4.7.0 新增。错误展示组件，仅限配合 Form.List 的 rules 一同使用。参考[示例](#form-demo-dynamic-form-item)。
|
|
2452
2414
|
|
|
2453
|
-
|
|
2415
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
2416
|
+
|--------|--------|--------|--------|
|
|
2417
|
+
| errors | 错误列表 | ReactNode[] | - |
|
|
2454
2418
|
|
|
2455
2419
|
|
|
2420
|
+
## Form.Provider
|
|
2456
2421
|
|
|
2457
|
-
|
|
2458
|
-
#### API
|
|
2422
|
+
提供表单间联动功能，其下设置 `name` 的 Form 更新时，会自动触发对应事件。查看[示例](#form-demo-form-context)。
|
|
2459
2423
|
|
|
2460
|
-
|
|
|
2424
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
2461
2425
|
|--------|--------|--------|--------|
|
|
2462
|
-
|
|
|
2426
|
+
| onFormChange | 子表单字段更新时触发 | function(formName: string, info: { changedFields, forms }) | - |
|
|
2427
|
+
| onFormFinish | 子表单提交时触发 | function(formName: string, info: { values, forms }) | - |
|
|
2463
2428
|
|
|
2464
|
-
##### Drawer.Confirm - 带按钮的抽屉
|
|
2465
2429
|
|
|
2466
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2467
|
-
|--------|--------|--------|--------|
|
|
2468
|
-
| footer | 自定义底部内容 | React.ReactNode | |
|
|
2469
|
-
| onOk | 点击确定回调 | () => void | |
|
|
2470
|
-
| okText | 确认按钮文字 | string | |
|
|
2471
|
-
| okButtonProps | 确认按钮属性 | ButtonProps | |
|
|
2472
|
-
| onCancel | 点击取消回调 | () => void | |
|
|
2473
|
-
| cancelText | 取消按钮文字 | string | |
|
|
2474
|
-
| cancelButtonProps | 取消按钮属性 | ButtonProps | |
|
|
2475
|
-
| info | 底部额外内容 | React.ReactNode | |
|
|
2476
2430
|
|
|
2477
|
-
|
|
2431
|
+
```jsx
|
|
2432
|
+
<Form.Provider
|
|
2433
|
+
onFormFinish={(name) => {
|
|
2434
|
+
if (name === 'form1') {
|
|
2435
|
+
// Do something...
|
|
2436
|
+
}
|
|
2437
|
+
}}
|
|
2438
|
+
>
|
|
2439
|
+
<Form name="form1">...</Form>
|
|
2440
|
+
<Form name="form2">...</Form>
|
|
2441
|
+
</Form.Provider>
|
|
2442
|
+
```
|
|
2478
2443
|
|
|
2479
2444
|
|
|
2480
|
-
|
|
2445
|
+
### FormInstance
|
|
2481
2446
|
|
|
2482
|
-
|
|
2447
|
+
| 名称 | 说明 | 类型 | 版本 |
|
|
2448
|
+
|--------|--------|--------|--------|
|
|
2449
|
+
| getFieldError | 获取对应字段名的错误信息 | (name: | |
|
|
2450
|
+
| getFieldInstance | 获取对应字段实例 | (name: | 4.4.0 |
|
|
2451
|
+
| getFieldsError | 获取一组字段名对应的错误信息，返回为数组形式 | (nameList?: | |
|
|
2452
|
+
| getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回。默认返回现存字段值，当调用 | | |
|
|
2453
|
+
| getFieldValue | 获取对应字段名的值 | (name: | |
|
|
2454
|
+
| isFieldsTouched | 检查一组字段是否被用户操作过， | (nameList?: | |
|
|
2455
|
+
| isFieldTouched | 检查对应字段是否被用户操作过 | (name: | |
|
|
2456
|
+
| isFieldValidating | 检查对应字段是否正在校验 | (name: | |
|
|
2457
|
+
| resetFields | 重置一组字段到 | (fields?: | |
|
|
2458
|
+
| scrollToField | 滚动到对应字段位置 | (name: | focus: 5.24.0 |
|
|
2459
|
+
| setFields | 设置一组字段状态 | (fields: | |
|
|
2460
|
+
| setFieldValue | 设置表单的值（该值将直接传入 form store 中并且 | (name: | 4.22.0 |
|
|
2461
|
+
| setFieldsValue | 设置表单的值（该值将直接传入 form store 中并且 | (values) => void | |
|
|
2462
|
+
| submit | 提交表单，与点击 | () => void | |
|
|
2463
|
+
| validateFields | 触发表单验证，设置 | (nameList?: | |
|
|
2483
2464
|
|
|
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
2465
|
|
|
2466
|
+
#### validateFields
|
|
2518
2467
|
|
|
2519
2468
|
|
|
2469
|
+
```tsx
|
|
2470
|
+
export interface ValidateConfig {
|
|
2471
|
+
// 5.5.0 新增。仅校验内容而不会将错误信息展示到 UI 上。
|
|
2472
|
+
validateOnly?: boolean;
|
|
2473
|
+
// 5.9.0 新增。对提供的 `nameList` 与其子路径进行递归校验。
|
|
2474
|
+
recursive?: boolean;
|
|
2475
|
+
// 5.11.0 新增。校验 dirty 的字段（touched + validated）。
|
|
2476
|
+
// 使用 `dirty` 可以很方便的仅校验用户操作过和被校验过的字段。
|
|
2477
|
+
dirty?: boolean;
|
|
2478
|
+
}
|
|
2479
|
+
```
|
|
2520
2480
|
|
|
2521
|
-
<DemoTitle title="DatePicker" desc="输入或选择时间的控件。">
|
|
2522
|
-
#### API
|
|
2523
2481
|
|
|
2524
|
-
|
|
2482
|
+
返回示例：
|
|
2525
2483
|
|
|
2526
2484
|
|
|
2527
|
-
|
|
2485
|
+
```jsx
|
|
2486
|
+
validateFields()
|
|
2487
|
+
.then((values) => {
|
|
2488
|
+
/*
|
|
2489
|
+
values:
|
|
2490
|
+
{
|
|
2491
|
+
username: 'username',
|
|
2492
|
+
password: 'password',
|
|
2493
|
+
}
|
|
2494
|
+
*/
|
|
2495
|
+
})
|
|
2496
|
+
.catch((errorInfo) => {
|
|
2497
|
+
/*
|
|
2498
|
+
errorInfo:
|
|
2499
|
+
{
|
|
2500
|
+
values: {
|
|
2501
|
+
username: 'username',
|
|
2502
|
+
password: 'password',
|
|
2503
|
+
},
|
|
2504
|
+
errorFields: [
|
|
2505
|
+
{ name: ['password'], errors: ['Please input your Password!'] },
|
|
2506
|
+
],
|
|
2507
|
+
outOfDate: false,
|
|
2508
|
+
}
|
|
2509
|
+
*/
|
|
2510
|
+
});
|
|
2511
|
+
```
|
|
2528
2512
|
|
|
2529
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2530
2513
|
|
|
2531
|
-
|
|
2514
|
+
## Hooks
|
|
2532
2515
|
|
|
2516
|
+
### Form.useForm
|
|
2533
2517
|
|
|
2534
|
-
|
|
2535
|
-
- DatePicker[picker="month"]
|
|
2536
|
-
- DatePicker[picker="week"]
|
|
2537
|
-
- DatePicker[picker="year"]
|
|
2538
|
-
- DatePicker[picker="quarter"] (4.1.0 新增)
|
|
2539
|
-
- RangePicker
|
|
2518
|
+
`type Form.useForm = (): [FormInstance]`
|
|
2540
2519
|
|
|
2541
|
-
|
|
2520
|
+
创建 Form 实例，用于管理所有数据状态。
|
|
2542
2521
|
|
|
2543
|
-
|
|
2522
|
+
### Form.useFormInstance
|
|
2544
2523
|
|
|
2545
|
-
|
|
2524
|
+
`type Form.useFormInstance = (): FormInstance`
|
|
2546
2525
|
|
|
2526
|
+
`4.20.0` 新增，获取当前上下文正在使用的 Form 实例，常见于封装子组件消费无需透传 Form 实例：
|
|
2547
2527
|
|
|
2548
|
-
```jsx
|
|
2549
|
-
// 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
|
|
2550
|
-
// 确保还导入相关的 dayjs 文件，否则所有文本的区域设置都不会更改（例如范围选择器月份）
|
|
2551
|
-
import locale from 'antd/locale/zh_CN';
|
|
2552
|
-
import dayjs from 'dayjs';
|
|
2553
2528
|
|
|
2554
|
-
|
|
2529
|
+
```tsx
|
|
2530
|
+
const Sub = () => {
|
|
2531
|
+
const form = Form.useFormInstance();
|
|
2555
2532
|
|
|
2556
|
-
|
|
2533
|
+
return <Button onClick={() => form.setFieldsValue({})} />;
|
|
2534
|
+
};
|
|
2557
2535
|
|
|
2558
|
-
|
|
2559
|
-
|
|
2560
|
-
|
|
2536
|
+
export default () => {
|
|
2537
|
+
const [form] = Form.useForm();
|
|
2538
|
+
|
|
2539
|
+
return (
|
|
2540
|
+
<Form form={form}>
|
|
2541
|
+
<Sub />
|
|
2542
|
+
</Form>
|
|
2543
|
+
);
|
|
2544
|
+
};
|
|
2561
2545
|
```
|
|
2562
2546
|
|
|
2563
2547
|
|
|
2564
|
-
|
|
2565
|
-
<Container type="warning">
|
|
2566
|
-
在搭配 Next.js 的 App Router 使用时，注意在引入 dayjs 的 locale 文件时加上 `'use client'`。这是由于 Ant Design 的组件都是客户端组件，在 RSC 中引入 dayjs 的 locale 文件将不会在客户端生效。
|
|
2567
|
-
</Container>
|
|
2568
|
-
### 共同的 API
|
|
2548
|
+
### Form.useWatch
|
|
2569
2549
|
|
|
2570
|
-
|
|
2550
|
+
`type Form.useWatch = (namePath: NamePath | (selector: (values: Store)) => any, formInstance?: FormInstance | WatchOptions): Value`
|
|
2571
2551
|
|
|
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) | - | |
|
|
2552
|
+
`5.12.0` 新增 `selector`
|
|
2611
2553
|
|
|
2554
|
+
用于直接获取 form 中字段对应的值。通过该 Hooks 可以与诸如 `useSWR` 进行联动从而降低维护成本：
|
|
2612
2555
|
|
|
2613
|
-
### 共同的方法
|
|
2614
2556
|
|
|
2615
|
-
|
|
2616
|
-
|
|
2617
|
-
|
|
2618
|
-
|
|
2557
|
+
```tsx
|
|
2558
|
+
const Demo = () => {
|
|
2559
|
+
const [form] = Form.useForm();
|
|
2560
|
+
const userName = Form.useWatch('username', form);
|
|
2619
2561
|
|
|
2562
|
+
const { data: options } = useSWR(`/api/user/${userName}`, fetcher);
|
|
2620
2563
|
|
|
2621
|
-
|
|
2564
|
+
return (
|
|
2565
|
+
<Form form={form}>
|
|
2566
|
+
<Form.Item name="username">
|
|
2567
|
+
<AutoComplete options={options} />
|
|
2568
|
+
</Form.Item>
|
|
2569
|
+
</Form>
|
|
2570
|
+
);
|
|
2571
|
+
};
|
|
2572
|
+
```
|
|
2622
2573
|
|
|
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
2574
|
|
|
2575
|
+
如果你的组件被包裹在 `Form.Item` 内部，你可以省略第二个参数，`Form.useWatch` 会自动找到上层最近的 `FormInstance`。
|
|
2641
2576
|
|
|
2642
|
-
|
|
2577
|
+
`useWatch` 默认只监听在 Form 中注册的字段，如果需要监听非注册字段，可以通过配置 `preserve` 进行监听：
|
|
2643
2578
|
|
|
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
2579
|
|
|
2580
|
+
```tsx
|
|
2581
|
+
const Demo = () => {
|
|
2582
|
+
const [form] = Form.useForm();
|
|
2653
2583
|
|
|
2654
|
-
|
|
2584
|
+
const age = Form.useWatch('age', { form, preserve: true });
|
|
2585
|
+
console.log(age);
|
|
2655
2586
|
|
|
2656
|
-
|
|
2587
|
+
return (
|
|
2588
|
+
<div>
|
|
2589
|
+
<Button onClick={() => form.setFieldValue('age', 2)}>Update</Button>
|
|
2590
|
+
<Form form={form}>
|
|
2591
|
+
<Form.Item name="name">
|
|
2592
|
+
<Input />
|
|
2593
|
+
</Form.Item>
|
|
2594
|
+
</Form>
|
|
2595
|
+
</div>
|
|
2596
|
+
);
|
|
2597
|
+
};
|
|
2598
|
+
```
|
|
2657
2599
|
|
|
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
2600
|
|
|
2601
|
+
### Form.Item.useStatus
|
|
2667
2602
|
|
|
2668
|
-
|
|
2603
|
+
`type Form.Item.useStatus = (): { status: ValidateStatus | undefined, errors: ReactNode[], warnings: ReactNode[] }`
|
|
2669
2604
|
|
|
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) | - | |
|
|
2605
|
+
`4.22.0` 新增，可用于获取当前 Form.Item 的校验状态，如果上层没有 Form.Item，`status` 将会返回 `undefined`。`5.4.0` 新增 `errors` 和 `warnings`，可用于获取当前 Form.Item 的错误信息和警告信息：
|
|
2678
2606
|
|
|
2679
2607
|
|
|
2680
|
-
|
|
2608
|
+
```tsx
|
|
2609
|
+
const CustomInput = ({ value, onChange }) => {
|
|
2610
|
+
const { status, errors } = Form.Item.useStatus();
|
|
2611
|
+
return (
|
|
2612
|
+
<input
|
|
2613
|
+
value={value}
|
|
2614
|
+
onChange={onChange}
|
|
2615
|
+
className={`custom-input-${status}`}
|
|
2616
|
+
placeholder={(errors.length && errors[0]) || ''}
|
|
2617
|
+
/>
|
|
2618
|
+
);
|
|
2619
|
+
};
|
|
2681
2620
|
|
|
2682
|
-
|
|
2683
|
-
|
|
2684
|
-
|
|
2685
|
-
|
|
2686
|
-
|
|
2687
|
-
|
|
2688
|
-
|
|
2689
|
-
|
|
2690
|
-
| showWeek | DatePicker 下展示当前周 | boolean | true | 5.14.0 |
|
|
2621
|
+
export default () => (
|
|
2622
|
+
<Form>
|
|
2623
|
+
<Form.Item name="username">
|
|
2624
|
+
<CustomInput />
|
|
2625
|
+
</Form.Item>
|
|
2626
|
+
</Form>
|
|
2627
|
+
);
|
|
2628
|
+
```
|
|
2691
2629
|
|
|
2692
2630
|
|
|
2693
|
-
|
|
2631
|
+
#### 与其他获取数据的方式的区别
|
|
2694
2632
|
|
|
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 |
|
|
2633
|
+
Form 仅会对变更的 Field 进行刷新，从而避免完整的组件刷新可能引发的性能问题。因而你无法在 render 阶段通过 `form.getFieldsValue` 来实时获取字段值，而 `useWatch` 提供了一种特定字段访问的方式，从而使得在当前组件中可以直接消费字段的值。同时，如果为了更好的渲染性能，你可以通过 Field 的 renderProps 仅更新需要更新的部分。而当当前组件更新或者 effect 都不需要消费字段值时，则可以通过 `onValuesChange` 将数据抛出，从而避免组件更新。
|
|
2717
2634
|
|
|
2635
|
+
## Interface
|
|
2718
2636
|
|
|
2719
|
-
|
|
2637
|
+
### NamePath
|
|
2720
2638
|
|
|
2639
|
+
`string | number | (string | number)[]`
|
|
2721
2640
|
|
|
2722
|
-
|
|
2723
|
-
import type { Dayjs } from 'dayjs';
|
|
2641
|
+
### GetFieldsValue
|
|
2724
2642
|
|
|
2725
|
-
|
|
2726
|
-
type GenericFn = (value: Dayjs) => string;
|
|
2643
|
+
`getFieldsValue` 提供了多种重载方法：
|
|
2727
2644
|
|
|
2728
|
-
|
|
2729
|
-
|
|
2730
|
-
|
|
2731
|
-
|
|
2732
|
-
|
|
2733
|
-
|
|
2734
|
-
|
|
2735
|
-
|
|
2645
|
+
#### getFieldsValue(nameList?: true | [NamePath](#namepath)[], filterFunc?: FilterFunc)
|
|
2646
|
+
|
|
2647
|
+
当不提供 `nameList` 时，返回所有注册字段，这也包含 List 下所有的值（即便 List 下没有绑定 Item）。
|
|
2648
|
+
|
|
2649
|
+
当 `nameList` 为 `true` 时，返回 store 中所有的值，包含未注册字段。例如通过 `setFieldsValue` 设置了不存在的 Item 的值，也可以通过 `true` 全部获取。
|
|
2650
|
+
|
|
2651
|
+
当 `nameList` 为数组时，返回规定路径的值。需要注意的是，`nameList` 为嵌套数组。例如你需要某路径值应该如下：
|
|
2652
|
+
|
|
2653
|
+
|
|
2654
|
+
```tsx
|
|
2655
|
+
// 单个路径
|
|
2656
|
+
form.getFieldsValue([['user', 'age']]);
|
|
2657
|
+
|
|
2658
|
+
// 多个路径
|
|
2659
|
+
form.getFieldsValue([
|
|
2660
|
+
['user', 'age'],
|
|
2661
|
+
['preset', 'account'],
|
|
2662
|
+
]);
|
|
2736
2663
|
```
|
|
2737
2664
|
|
|
2738
2665
|
|
|
2739
|
-
|
|
2666
|
+
#### getFieldsValue({ strict?: boolean, filter?: FilterFunc })
|
|
2667
|
+
|
|
2668
|
+
`5.8.0` 新增接受配置参数。当 `strict` 为 `true` 时会仅匹配 Item 的值。例如 `{ list: [{ bamboo: 1, little: 2 }] }` 中，如果 List 仅绑定了 `bamboo` 字段，那么 `getFieldsValue({ strict: true })` 会只获得 `{ list: [{ bamboo: 1 }] }`。
|
|
2669
|
+
|
|
2670
|
+
### FilterFunc
|
|
2671
|
+
|
|
2672
|
+
用于过滤一些字段值，`meta` 会返回字段相关信息。例如可以用来获取仅被用户修改过的值等等。
|
|
2673
|
+
|
|
2674
|
+
|
|
2675
|
+
```tsx
|
|
2676
|
+
type FilterFunc = (meta: { touched: boolean; validating: boolean }) => boolean;
|
|
2677
|
+
```
|
|
2678
|
+
|
|
2679
|
+
|
|
2680
|
+
### FieldData
|
|
2681
|
+
|
|
2682
|
+
| 名称 | 说明 | 类型 |
|
|
2683
|
+
|--------|--------|--------|
|
|
2684
|
+
| errors | 错误信息 | string[] |
|
|
2685
|
+
| warnings | 警告信息 | string[] |
|
|
2686
|
+
| name | 字段名称 | |
|
|
2687
|
+
| touched | 是否被用户操作过 | boolean |
|
|
2688
|
+
| validating | 是否正在校验 | boolean |
|
|
2689
|
+
| value | 字段对应值 | any |
|
|
2690
|
+
|
|
2691
|
+
|
|
2692
|
+
### Rule
|
|
2693
|
+
|
|
2694
|
+
Rule 支持接收 object 进行配置，也支持 function 来动态获取 form 的数据：
|
|
2695
|
+
|
|
2696
|
+
|
|
2697
|
+
```tsx
|
|
2698
|
+
type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
|
|
2699
|
+
```
|
|
2700
|
+
|
|
2701
|
+
|
|
2702
|
+
| 名称 | 说明 | 类型 | 版本 |
|
|
2703
|
+
|--------|--------|--------|--------|
|
|
2704
|
+
| defaultField | 仅在 | | |
|
|
2705
|
+
| enum | 是否匹配枚举中的值（需要将 | any[] | |
|
|
2706
|
+
| fields | 仅在 | Record<string, | |
|
|
2707
|
+
| len | string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度 | number | |
|
|
2708
|
+
| max | 必须设置 | number | |
|
|
2709
|
+
| message | 错误信息，不设置时会通过 | string \| ReactElement | |
|
|
2710
|
+
| min | 必须设置 | number | |
|
|
2711
|
+
| pattern | 正则表达式匹配 | RegExp | |
|
|
2712
|
+
| required | 是否为必选字段 | boolean | |
|
|
2713
|
+
| transform | 将字段值转换成目标值后进行校验 | (value) => any | |
|
|
2714
|
+
| type | 类型，常见有 | string | |
|
|
2715
|
+
| validateTrigger | 设置触发验证时机，必须是 Form.Item 的 | string \| string[] | |
|
|
2716
|
+
| validator | 自定义校验，接收 Promise 作为返回值。 | ( | |
|
|
2717
|
+
| warningOnly | 仅警告，不阻塞表单提交 | boolean | 4.17.0 |
|
|
2718
|
+
| whitespace | 如果字段仅包含空格则校验不通过，只在 | boolean | |
|
|
2719
|
+
|
|
2720
|
+
|
|
2721
|
+
### WatchOptions
|
|
2722
|
+
|
|
2723
|
+
| 名称 | 说明 | 类型 | 默认值 | 版本 |
|
|
2724
|
+
|--------|--------|--------|--------|--------|
|
|
2725
|
+
| form | 指定 Form 实例 | FormInstance | 当前 context 中的 Form | 5.4.0 |
|
|
2726
|
+
| preserve | 是否监视没有对应的 | boolean | false | 5.4.0 |
|
|
2740
2727
|
|
|
2741
2728
|
|
|
2742
2729
|
|
|
2743
|
-
|
|
2730
|
+
|
|
2731
|
+
<DemoTitle title="FloatButton" desc="用于网站上的全局功能；无论浏览到何处都可以看见的按钮。">
|
|
2744
2732
|
#### API
|
|
2745
2733
|
|
|
2746
|
-
<AntdApiRef url="https://ant.design/components/
|
|
2734
|
+
<AntdApiRef url="https://ant.design/components/float-button-cn/#api"></AntdApiRef>
|
|
2747
2735
|
|
|
2748
2736
|
|
|
2749
2737
|
## antd API
|
|
2750
2738
|
|
|
2751
2739
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2752
2740
|
|
|
2753
|
-
|
|
2741
|
+
自 `antd@5.0.0` 版本开始提供该组件。
|
|
2742
|
+
|
|
2743
|
+
### 共同的 API
|
|
2754
2744
|
|
|
2755
2745
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2756
2746
|
|--------|--------|--------|--------|--------|
|
|
2757
|
-
|
|
|
2758
|
-
|
|
|
2759
|
-
|
|
|
2760
|
-
|
|
|
2761
|
-
|
|
|
2762
|
-
|
|
|
2763
|
-
|
|
|
2764
|
-
|
|
|
2765
|
-
|
|
|
2766
|
-
|
|
|
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
|
-
|
|
2747
|
+
| icon | 自定义图标 | ReactNode | - | |
|
|
2748
|
+
| description | 文字及其它内容 | ReactNode | - | |
|
|
2749
|
+
| tooltip | 气泡卡片的内容 | ReactNode \| | - | TooltipProps: 5.25.0 |
|
|
2750
|
+
| type | 设置按钮类型 | default | default | |
|
|
2751
|
+
| shape | 设置按钮形状 | circle | circle | |
|
|
2752
|
+
| onClick | 点击按钮时的回调 | (event) => void | - | |
|
|
2753
|
+
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2754
|
+
| target | 相当于 a 标签的 target 属性，href 存在时生效 | string | - | |
|
|
2755
|
+
| htmlType | 设置 | submit | button | 5.21.0 |
|
|
2756
|
+
| badge | 带徽标数字的悬浮按钮（不支持 | | - | 5.4.0 |
|
|
2803
2757
|
|
|
2804
|
-
```jsx
|
|
2805
|
-
const validateMessages = {
|
|
2806
|
-
required: "'${name}' 是必选字段",
|
|
2807
|
-
// ...
|
|
2808
|
-
};
|
|
2809
2758
|
|
|
2810
|
-
|
|
2811
|
-
<Form />
|
|
2812
|
-
</ConfigProvider>;
|
|
2813
|
-
```
|
|
2759
|
+
### FloatButton.Group
|
|
2814
2760
|
|
|
2761
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2762
|
+
|--------|--------|--------|--------|--------|
|
|
2763
|
+
| shape | 设置包含的 FloatButton 按钮形状 | circle | circle | |
|
|
2764
|
+
| trigger | 触发方式（有触发方式为菜单模式） | click | - | |
|
|
2765
|
+
| open | 受控展开，需配合 trigger 一起使用 | boolean | - | |
|
|
2766
|
+
| closeIcon | 自定义关闭按钮 | React.ReactNode | | |
|
|
2767
|
+
| placement | 自定义菜单弹出位置 | top | top | 5.21.0 |
|
|
2768
|
+
| onOpenChange | 展开收起时的回调，需配合 trigger 一起使用 | (open: boolean) => void | - | |
|
|
2769
|
+
| onClick | 点击按钮时的回调（仅在菜单模式中有效） | (event) => void | - | 5.3.0 |
|
|
2815
2770
|
|
|
2816
|
-
## Form.Item
|
|
2817
2771
|
|
|
2818
|
-
|
|
2772
|
+
### FloatButton.BackTop
|
|
2819
2773
|
|
|
2820
2774
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2821
2775
|
|--------|--------|--------|--------|--------|
|
|
2822
|
-
|
|
|
2823
|
-
|
|
|
2824
|
-
|
|
|
2825
|
-
|
|
|
2826
|
-
| getValueProps | 为子元素添加额外的属性 (不建议通过 | (value: any) => Record | - | 4.2.0 |
|
|
2827
|
-
| hasFeedback | 配合 | boolean \| { icons: | false | icons: 5.9.0 |
|
|
2828
|
-
| help | 提示信息，如不设置，则会根据校验规则自动生成 | ReactNode | - | |
|
|
2829
|
-
| hidden | 是否隐藏字段（依然会收集和校验字段） | boolean | false | 4.4.0 |
|
|
2830
|
-
| htmlFor | 设置子元素 label | string | - | |
|
|
2831
|
-
| initialValue | 设置子元素默认值，如果与 Form 的 | string | - | 4.2.0 |
|
|
2832
|
-
| label | label | ReactNode | - | null: 5.22.0 |
|
|
2833
|
-
| labelAlign | 标签文本对齐方式 | left | right | |
|
|
2834
|
-
| labelCol | label | | - | |
|
|
2835
|
-
| messageVariables | 默认验证字段的信息，查看 | Record | - | 4.7.0 |
|
|
2836
|
-
| name | 字段名，支持数组 | | - | |
|
|
2837
|
-
| normalize | 组件获取值后进行转换，再放入 Form 中。不支持异步 | (value, prevValue, prevValues) => any | - | |
|
|
2838
|
-
| noStyle | 为 | boolean | false | |
|
|
2839
|
-
| preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 |
|
|
2840
|
-
| required | 必填样式设置。如不设置，则会根据校验规则自动生成 | boolean | false | |
|
|
2841
|
-
| rules | 校验规则，设置字段的校验逻辑。点击 | | - | |
|
|
2842
|
-
| shouldUpdate | 自定义字段更新逻辑，说明 | boolean \| (prevValue, curValue) => boolean | false | |
|
|
2843
|
-
| tooltip | 配置提示信息 | ReactNode \| | - | 4.7.0 |
|
|
2844
|
-
| trigger | 设置收集字段值变更的时机。点击 | string | onChange | |
|
|
2845
|
-
| validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验。设置 | boolean \| | false | parallel |
|
|
2846
|
-
| validateDebounce | 设置防抖，延迟毫秒数后进行校验 | number | - | 5.9.0 |
|
|
2847
|
-
| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | - | |
|
|
2848
|
-
| validateTrigger | 设置字段校验的时机 | string \| string[] | onChange | |
|
|
2849
|
-
| valuePropName | 子节点的值的属性。注意：Switch、Checkbox 的 valuePropName 应该是 | string | value | |
|
|
2850
|
-
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 | | - | |
|
|
2851
|
-
| layout | 表单项布局 | horizontal | - | 5.18.0 |
|
|
2852
|
-
|
|
2776
|
+
| duration | 回到顶部所需时间（ms） | number | 450 | |
|
|
2777
|
+
| target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window | |
|
|
2778
|
+
| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |
|
|
2779
|
+
| onClick | 点击按钮的回调函数 | () => void | - | |
|
|
2853
2780
|
|
|
2854
|
-
被设置了 `name` 属性的 `Form.Item` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：
|
|
2855
2781
|
|
|
2856
2782
|
|
|
2857
|
-
1. 你**不再需要也不应该**用 `onChange` 来做数据收集同步（你可以使用 Form 的 `onValuesChange`），但还是可以继续监听 `onChange` 事件。
|
|
2858
|
-
2. 你不能用控件的 `value` 或 `defaultValue` 等属性来设置表单域的值，默认值可以用 Form 里的 `initialValues` 来设置。注意 `initialValues` 不能被 `setState` 动态更新，你需要用 `setFieldsValue` 来更新。
|
|
2859
|
-
3. 你不应该用 `setState`，可以使用 `form.setFieldsValue` 来动态改变表单值。
|
|
2860
2783
|
|
|
2861
|
-
|
|
2784
|
+
<DemoTitle title="Dropdown" desc="向下弹出的列表。">
|
|
2785
|
+
#### API
|
|
2862
2786
|
|
|
2863
|
-
|
|
2787
|
+
<AntdApiRef url="https://ant.design/components/dropdown-cn/#api"></AntdApiRef>
|
|
2864
2788
|
|
|
2865
|
-
`dependencies` 不应和 `shouldUpdate` 一起使用，因为这可能带来更新逻辑的混乱。
|
|
2866
2789
|
|
|
2867
|
-
|
|
2790
|
+
## antd API
|
|
2868
2791
|
|
|
2869
|
-
|
|
2792
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2870
2793
|
|
|
2871
|
-
###
|
|
2794
|
+
### Dropdown
|
|
2872
2795
|
|
|
2873
|
-
|
|
2796
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2797
|
+
|--------|--------|--------|--------|--------|
|
|
2798
|
+
| arrow | 下拉框箭头是否显示 | boolean \| { pointAtCenter: boolean } | false | |
|
|
2799
|
+
| autoAdjustOverflow | 下拉框被遮挡时自动调整位置 | boolean | true | 5.2.0 |
|
|
2800
|
+
| autoFocus | 打开后自动聚焦下拉框 | boolean | false | 4.21.0 |
|
|
2801
|
+
| disabled | 菜单是否禁用 | boolean | - | |
|
|
2802
|
+
| destroyOnHidden | 关闭后是否销毁 Dropdown | boolean | false | 5.25.0 |
|
|
2803
|
+
| popupRender | 自定义弹出框内容 | (menus: ReactNode) => ReactNode | - | 5.25.0 |
|
|
2804
|
+
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
2805
|
+
| menu | 菜单配置项 | | - | 4.24.0 |
|
|
2806
|
+
| overlayClassName | 下拉根元素的类名称 | string | - | |
|
|
2807
|
+
| overlayStyle | 下拉根元素的样式 | CSSProperties | - | |
|
|
2808
|
+
| placement | 菜单弹出位置： | string | bottomLeft | |
|
|
2809
|
+
| trigger | 触发下拉的行为，移动端不支持 hover | Array< | [ | |
|
|
2810
|
+
| open | 菜单是否显示，小于 4.23.0 使用 | boolean | - | 4.23.0 |
|
|
2811
|
+
| onOpenChange | 菜单显示状态改变时调用，点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 | (open: boolean, info: { source: 'trigger' \| 'menu' }) => void | - | info.source |
|
|
2874
2812
|
|
|
2875
|
-
当 `shouldUpdate` 为 `true` 时，Form 的任意变化都会使该 Form.Item 重新渲染。这对于自定义渲染一些区域十分有帮助，要注意 Form.Item 里包裹的子组件必须由函数返回，否则 `shouldUpdate` 不会起作用：
|
|
2876
2813
|
|
|
2877
|
-
|
|
2814
|
+
### Dropdown.Button
|
|
2878
2815
|
|
|
2816
|
+
属性与 Dropdown 的相同。还包含以下属性：
|
|
2879
2817
|
|
|
2880
|
-
|
|
2881
|
-
|
|
2882
|
-
|
|
2883
|
-
|
|
2884
|
-
|
|
2885
|
-
|
|
2886
|
-
|
|
2818
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2819
|
+
|--------|--------|--------|--------|--------|
|
|
2820
|
+
| buttonsRender | 自定义左右两个按钮 | (buttons: ReactNode[]) => ReactNode[] | - | |
|
|
2821
|
+
| loading | 设置按钮载入状态，和 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
2822
|
+
| danger | 设置危险按钮 | boolean | - | 4.23.0 |
|
|
2823
|
+
| icon | 右侧的 icon | ReactNode | - | |
|
|
2824
|
+
| size | 按钮大小，和 | large | middle | |
|
|
2825
|
+
| type | 按钮类型，和 | primary | default | |
|
|
2826
|
+
| onClick | 点击左侧按钮的回调，和 | (event: React.MouseEvent) => void | - | |
|
|
2887
2827
|
|
|
2888
2828
|
|
|
2889
|
-
|
|
2829
|
+
## 注意
|
|
2890
2830
|
|
|
2891
|
-
|
|
2831
|
+
请确保 `Dropdown` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
|
|
2832
|
+
## antd API
|
|
2892
2833
|
|
|
2834
|
+
### Menu
|
|
2893
2835
|
|
|
2894
|
-
|
|
2895
|
-
|
|
2896
|
-
|
|
2897
|
-
|
|
2898
|
-
|
|
2899
|
-
|
|
2900
|
-
|
|
2901
|
-
|
|
2902
|
-
|
|
2903
|
-
|
|
2904
|
-
|
|
2836
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2837
|
+
|--------|--------|--------|--------|--------|
|
|
2838
|
+
| defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | string[] | - | |
|
|
2839
|
+
| defaultSelectedKeys | 初始选中的菜单项 key 数组 | string[] | - | |
|
|
2840
|
+
| expandIcon | 自定义展开图标 | ReactNode \| | - | 4.9.0 |
|
|
2841
|
+
| forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false | |
|
|
2842
|
+
| inlineCollapsed | inline 时菜单是否收起状态 | boolean | - | |
|
|
2843
|
+
| inlineIndent | inline 模式的菜单缩进宽度 | number | 24 | |
|
|
2844
|
+
| items | 菜单内容 | | - | 4.20.0 |
|
|
2845
|
+
| mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | vertical | vertical | |
|
|
2846
|
+
| multiple | 是否允许多选 | boolean | false | |
|
|
2847
|
+
| openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string[] | - | |
|
|
2848
|
+
| overflowedIndicator | 用于自定义 Menu 水平空间不足时的省略收缩的图标 | ReactNode | | |
|
|
2849
|
+
| selectable | 是否允许选中 | boolean | true | |
|
|
2850
|
+
| selectedKeys | 当前选中的菜单项 key 数组 | string[] | - | |
|
|
2851
|
+
| style | 根节点样式 | CSSProperties | - | |
|
|
2852
|
+
| subMenuCloseDelay | 用户鼠标离开子菜单后关闭延时，单位：秒 | number | 0.1 | |
|
|
2853
|
+
| subMenuOpenDelay | 用户鼠标进入子菜单后开启延时，单位：秒 | number | 0 | |
|
|
2854
|
+
| theme | 主题颜色 | light | light | |
|
|
2855
|
+
| triggerSubMenuAction | SubMenu 展开/关闭的触发行为 | hover | hover | |
|
|
2856
|
+
| onClick | 点击 MenuItem 调用此函数 | function({ item, key, keyPath, domEvent }) | - | |
|
|
2857
|
+
| onDeselect | 取消选中时调用，仅在 multiple 生效 | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |
|
|
2858
|
+
| onOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string[]) | - | |
|
|
2859
|
+
| onSelect | 被选中时调用 | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |
|
|
2905
2860
|
|
|
2906
2861
|
|
|
2907
|
-
|
|
2862
|
+
更多属性查看 [rc-menu](https://github.com/react-component/menu#api)
|
|
2908
2863
|
|
|
2909
|
-
###
|
|
2864
|
+
### ItemType
|
|
2910
2865
|
|
|
2911
|
-
|
|
2866
|
+
type ItemType = [MenuItemType](#menuitemtype) | [SubMenuType](#submenutype) | [MenuItemGroupType](#menuitemgrouptype) | [MenuDividerType](#menudividertype);
|
|
2912
2867
|
|
|
2868
|
+
#### MenuItemType
|
|
2913
2869
|
|
|
2914
|
-
|
|
2915
|
-
|
|
2916
|
-
|
|
2917
|
-
|
|
2918
|
-
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
<Form.Item
|
|
2924
|
-
messageVariables={{ label: 'good' }}
|
|
2925
|
-
label={<span>user</span>}
|
|
2926
|
-
rules={[{ required: true, message: '${label} is required' }]}
|
|
2927
|
-
>
|
|
2928
|
-
<Input />
|
|
2929
|
-
</Form.Item>
|
|
2930
|
-
</Form>
|
|
2931
|
-
```
|
|
2870
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2871
|
+
|--------|--------|--------|--------|--------|
|
|
2872
|
+
| danger | 展示错误状态样式 | boolean | false | |
|
|
2873
|
+
| disabled | 是否禁用 | boolean | false | |
|
|
2874
|
+
| extra | 额外节点 | ReactNode | - | 5.21.0 |
|
|
2875
|
+
| icon | 菜单图标 | ReactNode | - | |
|
|
2876
|
+
| key | item 的唯一标志 | string | - | |
|
|
2877
|
+
| label | 菜单项标题 | ReactNode | - | |
|
|
2878
|
+
| title | 设置收缩时展示的悬浮标题 | string | - | |
|
|
2932
2879
|
|
|
2933
2880
|
|
|
2934
|
-
|
|
2881
|
+
#### SubMenuType
|
|
2935
2882
|
|
|
2883
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2884
|
+
|--------|--------|--------|--------|--------|
|
|
2885
|
+
| children | 子菜单的菜单项 | | - | |
|
|
2886
|
+
| disabled | 是否禁用 | boolean | false | |
|
|
2887
|
+
| icon | 菜单图标 | ReactNode | - | |
|
|
2888
|
+
| key | 唯一标志 | string | - | |
|
|
2889
|
+
| label | 菜单项标题 | ReactNode | - | |
|
|
2890
|
+
| popupClassName | 子菜单样式， | string | - | |
|
|
2891
|
+
| popupOffset | 子菜单偏移量， | [number, number] | - | |
|
|
2892
|
+
| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | - | |
|
|
2893
|
+
| theme | 设置子菜单的主题，默认从 Menu 上继承 | light | - | |
|
|
2936
2894
|
|
|
2937
|
-
```jsx
|
|
2938
|
-
{ required: true, message: '${label} is convert, \\${label} is not convert' }
|
|
2939
2895
|
|
|
2940
|
-
|
|
2941
|
-
```
|
|
2896
|
+
#### MenuItemGroupType
|
|
2942
2897
|
|
|
2898
|
+
定义类型为 `group` 时，会作为分组处理:
|
|
2943
2899
|
|
|
2944
|
-
## Form.List
|
|
2945
2900
|
|
|
2946
|
-
|
|
2901
|
+
```ts
|
|
2902
|
+
const groupItem = {
|
|
2903
|
+
type: 'group', // Must have
|
|
2904
|
+
label: 'My Group',
|
|
2905
|
+
children: [],
|
|
2906
|
+
};
|
|
2907
|
+
```
|
|
2908
|
+
|
|
2947
2909
|
|
|
2948
2910
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2949
2911
|
|--------|--------|--------|--------|--------|
|
|
2950
|
-
| children |
|
|
2951
|
-
|
|
|
2952
|
-
| name | 字段名，支持数组。List 本身也是字段，因而 | | - | |
|
|
2953
|
-
| rules | 校验规则，仅支持自定义规则。需要配合 | { validator, message }[] | - | 4.7.0 |
|
|
2954
|
-
|
|
2912
|
+
| children | 分组的菜单项 | | - | |
|
|
2913
|
+
| label | 分组标题 | ReactNode | - | |
|
|
2955
2914
|
|
|
2956
2915
|
|
|
2957
|
-
|
|
2958
|
-
<Form.List>
|
|
2959
|
-
{(fields) =>
|
|
2960
|
-
fields.map((field) => (
|
|
2961
|
-
<Form.Item {...field}>
|
|
2962
|
-
<Input />
|
|
2963
|
-
</Form.Item>
|
|
2964
|
-
))
|
|
2965
|
-
}
|
|
2966
|
-
</Form.List>
|
|
2967
|
-
```
|
|
2916
|
+
#### MenuDividerType
|
|
2968
2917
|
|
|
2918
|
+
菜单项分割线，只用在弹出菜单内，需要定义类型为 `divider`：
|
|
2969
2919
|
|
|
2970
|
-
注意：Form.List 下的字段不应该配置 `initialValue`，你始终应该通过 Form.List 的 `initialValue` 或者 Form 的 `initialValues` 来配置。
|
|
2971
2920
|
|
|
2972
|
-
|
|
2921
|
+
```ts
|
|
2922
|
+
const dividerItem = {
|
|
2923
|
+
type: 'divider', // Must have
|
|
2924
|
+
};
|
|
2925
|
+
```
|
|
2973
2926
|
|
|
2974
|
-
Form.List 渲染表单相关操作函数。
|
|
2975
2927
|
|
|
2976
2928
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2977
2929
|
|--------|--------|--------|--------|--------|
|
|
2978
|
-
|
|
|
2979
|
-
| move | 移动表单项 | (from: number, to: number) => void | - | |
|
|
2980
|
-
| remove | 删除表单项 | (index: number \| number[]) => void | number[] | 4.5.0 |
|
|
2981
|
-
|
|
2982
|
-
|
|
2983
|
-
## Form.ErrorList
|
|
2984
|
-
|
|
2985
|
-
4.7.0 新增。错误展示组件，仅限配合 Form.List 的 rules 一同使用。参考[示例](#form-demo-dynamic-form-item)。
|
|
2930
|
+
| dashed | 是否虚线 | boolean | false | |
|
|
2986
2931
|
|
|
2987
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
2988
|
-
|--------|--------|--------|--------|
|
|
2989
|
-
| errors | 错误列表 | ReactNode[] | - |
|
|
2990
2932
|
|
|
2991
2933
|
|
|
2992
|
-
## Form.Provider
|
|
2993
2934
|
|
|
2994
|
-
|
|
2935
|
+
<DemoTitle title="Empty" desc="用于空状态的占位图形展示。">
|
|
2936
|
+
## API
|
|
2995
2937
|
|
|
2996
|
-
|
|
|
2938
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2997
2939
|
|--------|--------|--------|--------|
|
|
2998
|
-
|
|
|
2999
|
-
|
|
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 |
|
|
3000
2971
|
|
|
3001
2972
|
|
|
2973
|
+
<AntdApiRef url="https://ant.design/components/empty-cn/#api"></AntdApiRef>
|
|
3002
2974
|
|
|
3003
|
-
```jsx
|
|
3004
|
-
<Form.Provider
|
|
3005
|
-
onFormFinish={(name) => {
|
|
3006
|
-
if (name === 'form1') {
|
|
3007
|
-
// Do something...
|
|
3008
|
-
}
|
|
3009
|
-
}}
|
|
3010
|
-
>
|
|
3011
|
-
<Form name="form1">...</Form>
|
|
3012
|
-
<Form name="form2">...</Form>
|
|
3013
|
-
</Form.Provider>
|
|
3014
|
-
```
|
|
3015
2975
|
|
|
3016
2976
|
|
|
3017
|
-
### FormInstance
|
|
3018
2977
|
|
|
3019
|
-
| 名称 | 说明 | 类型 | 版本 |
|
|
3020
|
-
|--------|--------|--------|--------|
|
|
3021
|
-
| getFieldError | 获取对应字段名的错误信息 | (name: | |
|
|
3022
|
-
| getFieldInstance | 获取对应字段实例 | (name: | 4.4.0 |
|
|
3023
|
-
| getFieldsError | 获取一组字段名对应的错误信息，返回为数组形式 | (nameList?: | |
|
|
3024
|
-
| getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回。默认返回现存字段值，当调用 | | |
|
|
3025
|
-
| getFieldValue | 获取对应字段名的值 | (name: | |
|
|
3026
|
-
| isFieldsTouched | 检查一组字段是否被用户操作过， | (nameList?: | |
|
|
3027
|
-
| isFieldTouched | 检查对应字段是否被用户操作过 | (name: | |
|
|
3028
|
-
| isFieldValidating | 检查对应字段是否正在校验 | (name: | |
|
|
3029
|
-
| resetFields | 重置一组字段到 | (fields?: | |
|
|
3030
|
-
| scrollToField | 滚动到对应字段位置 | (name: | focus: 5.24.0 |
|
|
3031
|
-
| setFields | 设置一组字段状态 | (fields: | |
|
|
3032
|
-
| setFieldValue | 设置表单的值（该值将直接传入 form store 中并且 | (name: | 4.22.0 |
|
|
3033
|
-
| setFieldsValue | 设置表单的值（该值将直接传入 form store 中并且 | (values) => void | |
|
|
3034
|
-
| submit | 提交表单，与点击 | () => void | |
|
|
3035
|
-
| validateFields | 触发表单验证，设置 | (nameList?: | |
|
|
3036
2978
|
|
|
2979
|
+
<DemoTitle title="Descriptions" desc="展示多个只读字段的组合">
|
|
2980
|
+
#### API
|
|
3037
2981
|
|
|
3038
|
-
|
|
2982
|
+
<AntdApiRef url="https://ant.design/components/descriptions-cn/#api"></AntdApiRef>
|
|
3039
2983
|
|
|
3040
2984
|
|
|
3041
|
-
|
|
3042
|
-
export interface ValidateConfig {
|
|
3043
|
-
// 5.5.0 新增。仅校验内容而不会将错误信息展示到 UI 上。
|
|
3044
|
-
validateOnly?: boolean;
|
|
3045
|
-
// 5.9.0 新增。对提供的 `nameList` 与其子路径进行递归校验。
|
|
3046
|
-
recursive?: boolean;
|
|
3047
|
-
// 5.11.0 新增。校验 dirty 的字段（touched + validated）。
|
|
3048
|
-
// 使用 `dirty` 可以很方便的仅校验用户操作过和被校验过的字段。
|
|
3049
|
-
dirty?: boolean;
|
|
3050
|
-
}
|
|
3051
|
-
```
|
|
2985
|
+
## antd API
|
|
3052
2986
|
|
|
2987
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3053
2988
|
|
|
3054
|
-
|
|
2989
|
+
### Descriptions
|
|
3055
2990
|
|
|
2991
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2992
|
+
|--------|--------|--------|--------|--------|
|
|
2993
|
+
| bordered | 是否展示边框 | boolean | false | |
|
|
2994
|
+
| colon | 配置 | boolean | true | |
|
|
2995
|
+
| column | 一行的 | number \| | 3 | |
|
|
2996
|
+
| extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 |
|
|
2997
|
+
| items | 描述列表项内容 | | - | 5.8.0 |
|
|
2998
|
+
| layout | 描述布局 | horizontal | horizontal | |
|
|
2999
|
+
| size | 设置列表的大小。可以设置为 | default | - | |
|
|
3000
|
+
| title | 描述列表的标题，显示在最顶部 | ReactNode | - | |
|
|
3001
|
+
| classNames | 语义化结构 class | | - | 5.23.0 |
|
|
3002
|
+
| styles | 语义化结构 style | | - | 5.23.0 |
|
|
3056
3003
|
|
|
3057
|
-
```jsx
|
|
3058
|
-
validateFields()
|
|
3059
|
-
.then((values) => {
|
|
3060
|
-
/*
|
|
3061
|
-
values:
|
|
3062
|
-
{
|
|
3063
|
-
username: 'username',
|
|
3064
|
-
password: 'password',
|
|
3065
|
-
}
|
|
3066
|
-
*/
|
|
3067
|
-
})
|
|
3068
|
-
.catch((errorInfo) => {
|
|
3069
|
-
/*
|
|
3070
|
-
errorInfo:
|
|
3071
|
-
{
|
|
3072
|
-
values: {
|
|
3073
|
-
username: 'username',
|
|
3074
|
-
password: 'password',
|
|
3075
|
-
},
|
|
3076
|
-
errorFields: [
|
|
3077
|
-
{ name: ['password'], errors: ['Please input your Password!'] },
|
|
3078
|
-
],
|
|
3079
|
-
outOfDate: false,
|
|
3080
|
-
}
|
|
3081
|
-
*/
|
|
3082
|
-
});
|
|
3083
|
-
```
|
|
3084
3004
|
|
|
3005
|
+
### DescriptionItem
|
|
3085
3006
|
|
|
3086
|
-
|
|
3007
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3008
|
+
|--------|--------|--------|--------|--------|
|
|
3009
|
+
| label | 内容的描述 | ReactNode | - | |
|
|
3010
|
+
| span | 包含列的数量（ | number\| | 1 | screens: 5.9.0 |
|
|
3087
3011
|
|
|
3088
|
-
### Form.useForm
|
|
3089
3012
|
|
|
3090
|
-
|
|
3013
|
+
span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
|
|
3091
3014
|
|
|
3092
|
-
创建 Form 实例，用于管理所有数据状态。
|
|
3093
3015
|
|
|
3094
|
-
### Form.useFormInstance
|
|
3095
3016
|
|
|
3096
|
-
|
|
3017
|
+
<DemoTitle title="FileIcon" desc="用于展示不同文件类型的图标，也可通过 FileCard 展示文件信息。">
|
|
3018
|
+
#### API
|
|
3097
3019
|
|
|
3098
|
-
|
|
3020
|
+
##### FileIcon Props
|
|
3099
3021
|
|
|
3022
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3023
|
+
|--------|--------|--------|--------|
|
|
3024
|
+
| src | | string | |
|
|
3025
|
+
| image | | string | |
|
|
3026
|
+
| type | | string | (必填) |
|
|
3027
|
+
| size | | number | |
|
|
3028
|
+
| style | | React.CSSProperties | |
|
|
3100
3029
|
|
|
3101
|
-
```tsx
|
|
3102
|
-
const Sub = () => {
|
|
3103
|
-
const form = Form.useFormInstance();
|
|
3104
3030
|
|
|
3105
|
-
|
|
3106
|
-
};
|
|
3031
|
+
##### FileCard Props
|
|
3107
3032
|
|
|
3108
|
-
|
|
3109
|
-
|
|
3033
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3034
|
+
|--------|--------|--------|--------|
|
|
3035
|
+
| iconSize | | number | |
|
|
3036
|
+
| src | | string | |
|
|
3037
|
+
| type | | string | (必填) |
|
|
3038
|
+
| name | | string | (必填) |
|
|
3039
|
+
| desc | | string | |
|
|
3040
|
+
| size | | number | |
|
|
3041
|
+
| width | | React.CSSProperties['width'] | |
|
|
3042
|
+
| children | | React.ReactNode | |
|
|
3110
3043
|
|
|
3111
|
-
return (
|
|
3112
|
-
<Form form={form}>
|
|
3113
|
-
<Sub />
|
|
3114
|
-
</Form>
|
|
3115
|
-
);
|
|
3116
|
-
};
|
|
3117
|
-
```
|
|
3118
3044
|
|
|
3119
3045
|
|
|
3120
|
-
### Form.useWatch
|
|
3121
3046
|
|
|
3122
|
-
|
|
3047
|
+
<DemoTitle title="DatePicker" desc="输入或选择时间的控件。">
|
|
3048
|
+
#### API
|
|
3123
3049
|
|
|
3124
|
-
|
|
3050
|
+
<AntdApiRef url="https://ant.design/components/date-picker-cn/#api"></AntdApiRef>
|
|
3125
3051
|
|
|
3126
|
-
用于直接获取 form 中字段对应的值。通过该 Hooks 可以与诸如 `useSWR` 进行联动从而降低维护成本：
|
|
3127
3052
|
|
|
3053
|
+
## antd API
|
|
3128
3054
|
|
|
3129
|
-
|
|
3130
|
-
const Demo = () => {
|
|
3131
|
-
const [form] = Form.useForm();
|
|
3132
|
-
const userName = Form.useWatch('username', form);
|
|
3055
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3133
3056
|
|
|
3134
|
-
|
|
3057
|
+
日期类组件包括以下五种形式。
|
|
3135
3058
|
|
|
3136
|
-
return (
|
|
3137
|
-
<Form form={form}>
|
|
3138
|
-
<Form.Item name="username">
|
|
3139
|
-
<AutoComplete options={options} />
|
|
3140
|
-
</Form.Item>
|
|
3141
|
-
</Form>
|
|
3142
|
-
);
|
|
3143
|
-
};
|
|
3144
|
-
```
|
|
3145
3059
|
|
|
3060
|
+
- DatePicker
|
|
3061
|
+
- DatePicker[picker="month"]
|
|
3062
|
+
- DatePicker[picker="week"]
|
|
3063
|
+
- DatePicker[picker="year"]
|
|
3064
|
+
- DatePicker[picker="quarter"] (4.1.0 新增)
|
|
3065
|
+
- RangePicker
|
|
3066
|
+
|
|
3067
|
+
### 国际化配置
|
|
3146
3068
|
|
|
3147
|
-
|
|
3069
|
+
默认配置为 en-US，如果你需要设置其他语言，推荐在入口处使用我们提供的国际化组件，详见：[ConfigProvider 国际化](https://ant.design/components/config-provider-cn/)。
|
|
3148
3070
|
|
|
3149
|
-
|
|
3071
|
+
如有特殊需求（仅修改单一组件的语言），请使用 locale 参数，参考：[默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)。
|
|
3150
3072
|
|
|
3151
3073
|
|
|
3152
|
-
```
|
|
3153
|
-
|
|
3154
|
-
|
|
3074
|
+
```jsx
|
|
3075
|
+
// 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
|
|
3076
|
+
// 确保还导入相关的 dayjs 文件，否则所有文本的区域设置都不会更改（例如范围选择器月份）
|
|
3077
|
+
import locale from 'antd/locale/zh_CN';
|
|
3078
|
+
import dayjs from 'dayjs';
|
|
3155
3079
|
|
|
3156
|
-
|
|
3157
|
-
console.log(age);
|
|
3080
|
+
import 'dayjs/locale/zh-cn';
|
|
3158
3081
|
|
|
3159
|
-
|
|
3160
|
-
|
|
3161
|
-
|
|
3162
|
-
|
|
3163
|
-
|
|
3164
|
-
<Input />
|
|
3165
|
-
</Form.Item>
|
|
3166
|
-
</Form>
|
|
3167
|
-
</div>
|
|
3168
|
-
);
|
|
3169
|
-
};
|
|
3082
|
+
dayjs.locale('zh-cn');
|
|
3083
|
+
|
|
3084
|
+
<ConfigProvider locale={locale}>
|
|
3085
|
+
<DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} />
|
|
3086
|
+
</ConfigProvider>;
|
|
3170
3087
|
```
|
|
3171
3088
|
|
|
3172
3089
|
|
|
3173
|
-
|
|
3090
|
+
<!-- prettier-ignore -->
|
|
3091
|
+
<Container type="warning">
|
|
3092
|
+
在搭配 Next.js 的 App Router 使用时，注意在引入 dayjs 的 locale 文件时加上 `'use client'`。这是由于 Ant Design 的组件都是客户端组件，在 RSC 中引入 dayjs 的 locale 文件将不会在客户端生效。
|
|
3093
|
+
</Container>
|
|
3094
|
+
### 共同的 API
|
|
3174
3095
|
|
|
3175
|
-
|
|
3096
|
+
以下 API 为 DatePicker、 RangePicker 共享的 API。
|
|
3176
3097
|
|
|
3177
|
-
|
|
3098
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3099
|
+
|--------|--------|--------|--------|--------|
|
|
3100
|
+
| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
|
|
3101
|
+
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
3102
|
+
| className | 选择器 className | string | - | |
|
|
3103
|
+
| dateRender | 自定义日期单元格的内容，5.4.0 起用 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 |
|
|
3104
|
+
| 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 |
|
|
3105
|
+
| components | 自定义面板 | Record | - | 5.14.0 |
|
|
3106
|
+
| defaultOpen | 是否默认展开控制弹层 | boolean | - | |
|
|
3107
|
+
| disabled | 禁用 | boolean | false | |
|
|
3108
|
+
| disabledDate | 不可选择的日期 | (currentDate: dayjs, info: { from?: dayjs, type: Picker }) => boolean | - | info |
|
|
3109
|
+
| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 | | | |
|
|
3110
|
+
| order | 多选、范围时是否自动排序 | boolean | true | 5.14.0 |
|
|
3111
|
+
| preserveInvalidOnBlur | 失去焦点是否要清空输入框内无效内容 | boolean | false | 5.14.0 |
|
|
3112
|
+
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | |
|
|
3113
|
+
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
|
|
3114
|
+
| locale | 国际化配置 | object | | |
|
|
3115
|
+
| minDate | 最小日期，同样会限制面板的切换范围 | dayjs | - | 5.14.0 |
|
|
3116
|
+
| maxDate | 最大日期，同样会限制面板的切换范围 | dayjs | - | 5.14.0 |
|
|
3117
|
+
| mode | 日期面板的状态（ | time | - | |
|
|
3118
|
+
| needConfirm | 是否需要确认按钮，为 | boolean | - | 5.14.0 |
|
|
3119
|
+
| nextIcon | 自定义下一个图标 | ReactNode | - | 4.17.0 |
|
|
3120
|
+
| open | 控制弹层是否展开 | boolean | - | |
|
|
3121
|
+
| panelRender | 自定义渲染面板 | (panelNode) => ReactNode | - | 4.5.0 |
|
|
3122
|
+
| picker | 设置选择器类型 | date | date | quarter |
|
|
3123
|
+
| placeholder | 输入框提示文字 | string \| [string, string] | - | |
|
|
3124
|
+
| placement | 选择框弹出的位置 | bottomLeft | bottomLeft | |
|
|
3125
|
+
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
|
|
3126
|
+
| prevIcon | 自定义上一个图标 | ReactNode | - | 4.17.0 |
|
|
3127
|
+
| presets | 预设时间范围快捷选择, 自 | { label: React.ReactNode, value: Dayjs \| (() => Dayjs) }[] | - | |
|
|
3128
|
+
| size | 输入框大小， | large | - | |
|
|
3129
|
+
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
3130
|
+
| style | 自定义输入框样式 | CSSProperties | {} | |
|
|
3131
|
+
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
|
3132
|
+
| superNextIcon | 自定义 | ReactNode | - | 4.17.0 |
|
|
3133
|
+
| superPrevIcon | 自定义 | ReactNode | - | 4.17.0 |
|
|
3134
|
+
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
3135
|
+
| onOpenChange | 弹出日历和关闭日历的回调 | function(open) | - | |
|
|
3136
|
+
| onPanelChange | 日历面板切换的回调 | function(value, mode) | - | |
|
|
3178
3137
|
|
|
3179
3138
|
|
|
3180
|
-
|
|
3181
|
-
const CustomInput = ({ value, onChange }) => {
|
|
3182
|
-
const { status, errors } = Form.Item.useStatus();
|
|
3183
|
-
return (
|
|
3184
|
-
<input
|
|
3185
|
-
value={value}
|
|
3186
|
-
onChange={onChange}
|
|
3187
|
-
className={`custom-input-${status}`}
|
|
3188
|
-
placeholder={(errors.length && errors[0]) || ''}
|
|
3189
|
-
/>
|
|
3190
|
-
);
|
|
3191
|
-
};
|
|
3139
|
+
### 共同的方法
|
|
3192
3140
|
|
|
3193
|
-
|
|
3194
|
-
|
|
3195
|
-
|
|
3196
|
-
|
|
3197
|
-
</Form.Item>
|
|
3198
|
-
</Form>
|
|
3199
|
-
);
|
|
3200
|
-
```
|
|
3141
|
+
| 名称 | 描述 | 版本 |
|
|
3142
|
+
|--------|--------|--------|
|
|
3143
|
+
| blur() | 移除焦点 | |
|
|
3144
|
+
| focus() | 获取焦点 | |
|
|
3201
3145
|
|
|
3202
3146
|
|
|
3203
|
-
|
|
3147
|
+
### DatePicker
|
|
3204
3148
|
|
|
3205
|
-
|
|
3149
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3150
|
+
|--------|--------|--------|--------|--------|
|
|
3151
|
+
| defaultPickerValue | 默认面板日期，每次面板打开时会被重置到该日期 | | - | 5.14.0 |
|
|
3152
|
+
| defaultValue | 默认日期，如果开始时间或结束时间为 | | - | |
|
|
3153
|
+
| disabledTime | 不可选择的时间 | function(date) | - | |
|
|
3154
|
+
| format | 展示的日期格式，配置参考 | | YYYY-MM-DD | |
|
|
3155
|
+
| multiple | 是否为多选，不支持 | boolean | false | 5.14.0 |
|
|
3156
|
+
| pickerValue | 面板日期，可以用于受控切换面板所在日期。配合 | | - | 5.14.0 |
|
|
3157
|
+
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
|
|
3158
|
+
| showNow | 显示当前日期时间的快捷选择 | boolean | - | |
|
|
3159
|
+
| showTime | 增加时间选择功能 | Object \| boolean | | |
|
|
3160
|
+
| showTime.defaultValue | 设置用户选择日期时默认的时分秒， | | dayjs() | |
|
|
3161
|
+
| showWeek | DatePicker 下展示当前周 | boolean | false | 5.14.0 |
|
|
3162
|
+
| value | 日期 | | - | |
|
|
3163
|
+
| onChange | 时间发生变化的回调 | function(date: dayjs, dateString: string) | - | |
|
|
3164
|
+
| onOk | 点击确定按钮的回调 | function() | - | |
|
|
3165
|
+
| onPanelChange | 日期面板变化时的回调 | function(value, mode) | - | |
|
|
3206
3166
|
|
|
3207
|
-
## Interface
|
|
3208
3167
|
|
|
3209
|
-
###
|
|
3168
|
+
### DatePicker[picker=year]
|
|
3210
3169
|
|
|
3211
|
-
|
|
3170
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3171
|
+
|--------|--------|--------|--------|--------|
|
|
3172
|
+
| defaultValue | 默认日期 | | - | |
|
|
3173
|
+
| format | 展示的日期格式，配置参考 | | YYYY | |
|
|
3174
|
+
| multiple | 是否为多选 | boolean | false | 5.14.0 |
|
|
3175
|
+
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
|
3176
|
+
| value | 日期 | | - | |
|
|
3177
|
+
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | |
|
|
3212
3178
|
|
|
3213
|
-
### GetFieldsValue
|
|
3214
3179
|
|
|
3215
|
-
|
|
3180
|
+
### DatePicker[picker=quarter]
|
|
3216
3181
|
|
|
3217
|
-
|
|
3182
|
+
`4.1.0` 新增。
|
|
3218
3183
|
|
|
3219
|
-
|
|
3184
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3185
|
+
|--------|--------|--------|--------|--------|
|
|
3186
|
+
| defaultValue | 默认日期 | | - | |
|
|
3187
|
+
| format | 展示的日期格式，配置参考 | | YYYY-\QQ | |
|
|
3188
|
+
| multiple | 是否为多选 | boolean | false | 5.14.0 |
|
|
3189
|
+
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
|
3190
|
+
| value | 日期 | | - | |
|
|
3191
|
+
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | |
|
|
3220
3192
|
|
|
3221
|
-
当 `nameList` 为 `true` 时，返回 store 中所有的值，包含未注册字段。例如通过 `setFieldsValue` 设置了不存在的 Item 的值，也可以通过 `true` 全部获取。
|
|
3222
3193
|
|
|
3223
|
-
|
|
3194
|
+
### DatePicker[picker=month]
|
|
3224
3195
|
|
|
3196
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3197
|
+
|--------|--------|--------|--------|--------|
|
|
3198
|
+
| defaultValue | 默认日期 | | - | |
|
|
3199
|
+
| format | 展示的日期格式，配置参考 | | YYYY-MM | |
|
|
3200
|
+
| multiple | 是否为多选 | boolean | false | 5.14.0 |
|
|
3201
|
+
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
|
3202
|
+
| value | 日期 | | - | |
|
|
3203
|
+
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | |
|
|
3225
3204
|
|
|
3226
|
-
```tsx
|
|
3227
|
-
// 单个路径
|
|
3228
|
-
form.getFieldsValue([['user', 'age']]);
|
|
3229
3205
|
|
|
3230
|
-
|
|
3231
|
-
form.getFieldsValue([
|
|
3232
|
-
['user', 'age'],
|
|
3233
|
-
['preset', 'account'],
|
|
3234
|
-
]);
|
|
3235
|
-
```
|
|
3206
|
+
### DatePicker[picker=week]
|
|
3236
3207
|
|
|
3208
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3209
|
+
|--------|--------|--------|--------|--------|
|
|
3210
|
+
| defaultValue | 默认日期 | | - | |
|
|
3211
|
+
| format | 展示的日期格式，配置参考 | | YYYY-wo | |
|
|
3212
|
+
| multiple | 是否为多选 | boolean | false | 5.14.0 |
|
|
3213
|
+
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
|
|
3214
|
+
| value | 日期 | | - | |
|
|
3215
|
+
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | |
|
|
3216
|
+
| showWeek | DatePicker 下展示当前周 | boolean | true | 5.14.0 |
|
|
3237
3217
|
|
|
3238
|
-
#### getFieldsValue({ strict?: boolean, filter?: FilterFunc })
|
|
3239
3218
|
|
|
3240
|
-
|
|
3219
|
+
### RangePicker
|
|
3241
3220
|
|
|
3242
|
-
|
|
3221
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3222
|
+
|--------|--------|--------|--------|--------|
|
|
3223
|
+
| allowEmpty | 允许起始项部分为空 | [boolean, boolean] | [false, false] | |
|
|
3224
|
+
| 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 |
|
|
3225
|
+
| dateRender | 自定义日期单元格的内容，5.4.0 起用 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 |
|
|
3226
|
+
| defaultPickerValue | 默认面板日期，每次面板打开时会被重置到该日期 | | - | 5.14.0 |
|
|
3227
|
+
| defaultValue | 默认日期 | | - | |
|
|
3228
|
+
| disabled | 禁用起始项 | [boolean, boolean] | - | |
|
|
3229
|
+
| disabledTime | 不可选择的时间 | function(date: dayjs, partial: | - | info.from |
|
|
3230
|
+
| format | 展示的日期格式，配置参考 | | YYYY-MM-DD HH:mm:ss | |
|
|
3231
|
+
| id | 设置输入框 | { start?: string, end?: string } | - | 5.14.0 |
|
|
3232
|
+
| pickerValue | 面板日期，可以用于受控切换面板所在日期。配合 | | - | 5.14.0 |
|
|
3233
|
+
| presets | 预设时间范围快捷选择，自 | { label: React.ReactNode, value: (Dayjs \| (() => Dayjs))[] }[] | - | |
|
|
3234
|
+
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
|
3235
|
+
| separator | 设置分隔符 | React.ReactNode | | |
|
|
3236
|
+
| showTime | 增加时间选择功能 | Object\|boolean | | |
|
|
3237
|
+
| showTime.defaultValue | 设置用户选择日期时默认的时分秒， | | [dayjs(), dayjs()] | |
|
|
3238
|
+
| value | 日期 | | - | |
|
|
3239
|
+
| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - | |
|
|
3240
|
+
| onChange | 日期范围发生变化的回调 | function(dates: [dayjs, dayjs], dateStrings: [string, string]) | - | |
|
|
3241
|
+
| onFocus | 聚焦时回调 | function(event, { range: 'start' \| 'end' }) | - | range |
|
|
3242
|
+
| onBlur | 失焦时回调 | function(event, { range: 'start' \| 'end' }) | - | range |
|
|
3243
3243
|
|
|
3244
|
-
用于过滤一些字段值，`meta` 会返回字段相关信息。例如可以用来获取仅被用户修改过的值等等。
|
|
3245
3244
|
|
|
3245
|
+
#### formatType
|
|
3246
3246
|
|
|
3247
|
-
|
|
3248
|
-
|
|
3247
|
+
|
|
3248
|
+
```typescript
|
|
3249
|
+
import type { Dayjs } from 'dayjs';
|
|
3250
|
+
|
|
3251
|
+
type Generic = string;
|
|
3252
|
+
type GenericFn = (value: Dayjs) => string;
|
|
3253
|
+
|
|
3254
|
+
export type FormatType =
|
|
3255
|
+
| Generic
|
|
3256
|
+
| GenericFn
|
|
3257
|
+
| Array
|
|
3258
|
+
| {
|
|
3259
|
+
format: string;
|
|
3260
|
+
type?: 'mask';
|
|
3261
|
+
};
|
|
3249
3262
|
```
|
|
3250
3263
|
|
|
3251
3264
|
|
|
3252
|
-
|
|
3265
|
+
注意：`type` 定义为 `5.14.0` 新增。
|
|
3253
3266
|
|
|
3254
|
-
| 名称 | 说明 | 类型 |
|
|
3255
|
-
|--------|--------|--------|
|
|
3256
|
-
| errors | 错误信息 | string[] |
|
|
3257
|
-
| warnings | 警告信息 | string[] |
|
|
3258
|
-
| name | 字段名称 | |
|
|
3259
|
-
| touched | 是否被用户操作过 | boolean |
|
|
3260
|
-
| validating | 是否正在校验 | boolean |
|
|
3261
|
-
| value | 字段对应值 | any |
|
|
3262
3267
|
|
|
3263
3268
|
|
|
3264
|
-
|
|
3269
|
+
<DemoTitle title="Drawer" desc="从页面一侧滑入的操作面板，用于承载临时界面内容。">
|
|
3270
|
+
#### API
|
|
3265
3271
|
|
|
3266
|
-
|
|
3272
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3273
|
+
|--------|--------|--------|--------|
|
|
3274
|
+
| showDivider | 是否显示分割线 | boolean | true |
|
|
3267
3275
|
|
|
3276
|
+
##### Drawer.Confirm - 带按钮的抽屉
|
|
3268
3277
|
|
|
3269
|
-
|
|
3270
|
-
|
|
3271
|
-
|
|
3278
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3279
|
+
|--------|--------|--------|--------|
|
|
3280
|
+
| footer | 自定义底部内容 | React.ReactNode | |
|
|
3281
|
+
| onOk | 点击确定回调 | () => void | |
|
|
3282
|
+
| okText | 确认按钮文字 | string | |
|
|
3283
|
+
| okButtonProps | 确认按钮属性 | ButtonProps | |
|
|
3284
|
+
| onCancel | 点击取消回调 | () => void | |
|
|
3285
|
+
| cancelText | 取消按钮文字 | string | |
|
|
3286
|
+
| cancelButtonProps | 取消按钮属性 | ButtonProps | |
|
|
3287
|
+
| info | 底部额外内容 | React.ReactNode | |
|
|
3272
3288
|
|
|
3289
|
+
<AntdApiRef url="https://ant.design/components/drawer-cn/#api"></AntdApiRef>
|
|
3273
3290
|
|
|
3274
|
-
| 名称 | 说明 | 类型 | 版本 |
|
|
3275
|
-
|--------|--------|--------|--------|
|
|
3276
|
-
| defaultField | 仅在 | | |
|
|
3277
|
-
| enum | 是否匹配枚举中的值（需要将 | any[] | |
|
|
3278
|
-
| fields | 仅在 | Record<string, | |
|
|
3279
|
-
| len | string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度 | number | |
|
|
3280
|
-
| max | 必须设置 | number | |
|
|
3281
|
-
| message | 错误信息，不设置时会通过 | string \| ReactElement | |
|
|
3282
|
-
| min | 必须设置 | number | |
|
|
3283
|
-
| pattern | 正则表达式匹配 | RegExp | |
|
|
3284
|
-
| required | 是否为必选字段 | boolean | |
|
|
3285
|
-
| transform | 将字段值转换成目标值后进行校验 | (value) => any | |
|
|
3286
|
-
| type | 类型，常见有 | string | |
|
|
3287
|
-
| validateTrigger | 设置触发验证时机，必须是 Form.Item 的 | string \| string[] | |
|
|
3288
|
-
| validator | 自定义校验，接收 Promise 作为返回值。 | ( | |
|
|
3289
|
-
| warningOnly | 仅警告，不阻塞表单提交 | boolean | 4.17.0 |
|
|
3290
|
-
| whitespace | 如果字段仅包含空格则校验不通过，只在 | boolean | |
|
|
3291
3291
|
|
|
3292
|
+
## antd API
|
|
3292
3293
|
|
|
3293
|
-
|
|
3294
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3294
3295
|
|
|
3295
|
-
|
|
3296
|
+
<!-- prettier-ignore -->
|
|
3297
|
+
<Container type="warning" title="注意">
|
|
3298
|
+
v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v4 `className` 与 `style` 改至配置 Drawer 窗体样式以和 Modal 对齐。
|
|
3299
|
+
</Container>
|
|
3300
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3296
3301
|
|--------|--------|--------|--------|--------|
|
|
3297
|
-
|
|
|
3298
|
-
|
|
|
3302
|
+
| autoFocus | 抽屉展开后是否将焦点切换至其 DOM 节点 | boolean | true | 4.17.0 |
|
|
3303
|
+
| afterOpenChange | 切换抽屉时动画结束后的回调 | function(open) | - | |
|
|
3304
|
+
| className | Drawer 容器外层 className 设置，如果需要设置最外层，请使用 rootClassName | string | - | |
|
|
3305
|
+
| classNames | 语义化结构 className | | - | 5.10.0 |
|
|
3306
|
+
| closeIcon | 自定义关闭图标。5.7.0：设置为 | ReactNode | | |
|
|
3307
|
+
| destroyOnHidden | 关闭时销毁 Drawer 里的子元素 | boolean | false | 5.25.0 |
|
|
3308
|
+
| extra | 抽屉右上角的操作区域 | ReactNode | - | 4.17.0 |
|
|
3309
|
+
| footer | 抽屉的页脚 | ReactNode | - | |
|
|
3310
|
+
| forceRender | 预渲染 Drawer 内元素 | boolean | false | |
|
|
3311
|
+
| getContainer | 指定 Drawer 挂载的节点， | HTMLElement \| () => HTMLElement \| Selectors \| false | body | |
|
|
3312
|
+
| height | 高度，在 | string \| number | 378 | |
|
|
3313
|
+
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
|
|
3314
|
+
| mask | 是否展示遮罩 | boolean | true | |
|
|
3315
|
+
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
|
|
3316
|
+
| placement | 抽屉的方向 | top | right | |
|
|
3317
|
+
| push | 用于设置多层 Drawer 的推动行为 | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
|
|
3318
|
+
| rootStyle | 可用于设置 Drawer 最外层容器的样式，和 | CSSProperties | - | |
|
|
3319
|
+
| size | 预设抽屉宽度（或高度），default | 'default' \| 'large' | 'default' | 4.17.0 |
|
|
3320
|
+
| style | 设计 Drawer 容器样式，如果你只需要设置内容部分请使用 | CSSProperties | - | |
|
|
3321
|
+
| styles | 语义化结构 style | | - | 5.10.0 |
|
|
3322
|
+
| title | 标题 | ReactNode | - | |
|
|
3323
|
+
| loading | 显示骨架屏 | boolean | false | 5.17.0 |
|
|
3324
|
+
| open | Drawer 是否可见 | boolean | - |
|
|
3325
|
+
| width | 宽度 | string \| number | 378 | |
|
|
3326
|
+
| zIndex | 设置 Drawer 的 | number | 1000 | |
|
|
3327
|
+
| onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - | |
|
|
3328
|
+
| drawerRender | 自定义渲染抽屉 | (node: ReactNode) => ReactNode | - | 5.18.0 |
|
|
3299
3329
|
|
|
3300
3330
|
|
|
3301
3331
|
|
|
@@ -3371,21 +3401,6 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
|
|
|
3371
3401
|
|
|
3372
3402
|
|
|
3373
3403
|
|
|
3374
|
-
<DemoTitle title="CodeBlock" desc="代码块">
|
|
3375
|
-
#### API
|
|
3376
|
-
|
|
3377
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3378
|
-
|--------|--------|--------|--------|
|
|
3379
|
-
| language | 语言 | string \| string[] | (必填) |
|
|
3380
|
-
| value | 值 | string | (必填) |
|
|
3381
|
-
| className | 类名 | string | |
|
|
3382
|
-
| theme | 主题 | 'dark' \| 'light' | |
|
|
3383
|
-
| readOnly | 只读 | boolean | |
|
|
3384
|
-
| onChange | | (value: string) => void | |
|
|
3385
|
-
|
|
3386
|
-
|
|
3387
|
-
|
|
3388
|
-
|
|
3389
3404
|
<DemoTitle title="Checkbox" desc="收集用户的多项选择。">
|
|
3390
3405
|
#### API
|
|
3391
3406
|
|
|
@@ -3457,6 +3472,21 @@ interface Option {
|
|
|
3457
3472
|
|
|
3458
3473
|
|
|
3459
3474
|
|
|
3475
|
+
<DemoTitle title="CodeBlock" desc="代码块">
|
|
3476
|
+
#### API
|
|
3477
|
+
|
|
3478
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3479
|
+
|--------|--------|--------|--------|
|
|
3480
|
+
| language | 语言 | string \| string[] | (必填) |
|
|
3481
|
+
| value | 值 | string | |
|
|
3482
|
+
| className | 类名 | string | |
|
|
3483
|
+
| theme | 主题 | 'dark' \| 'light' | |
|
|
3484
|
+
| readOnly | 只读 | boolean | |
|
|
3485
|
+
| onChange | | (value?: string) => void | |
|
|
3486
|
+
|
|
3487
|
+
|
|
3488
|
+
|
|
3489
|
+
|
|
3460
3490
|
<DemoTitle title="Collapse" desc="可以折叠/展开的内容区域">
|
|
3461
3491
|
#### API
|
|
3462
3492
|
|
|
@@ -3515,69 +3545,6 @@ interface Option {
|
|
|
3515
3545
|
|
|
3516
3546
|
|
|
3517
3547
|
|
|
3518
|
-
<DemoTitle title="Card" desc="通用卡片容器">
|
|
3519
|
-
#### API
|
|
3520
|
-
|
|
3521
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3522
|
-
|--------|--------|--------|--------|
|
|
3523
|
-
| info | 副标题 | ReactNode | |
|
|
3524
|
-
|
|
3525
|
-
<AntdApiRef url="https://ant.design/components/card-cn/#api"></AntdApiRef>
|
|
3526
|
-
|
|
3527
|
-
|
|
3528
|
-
## antd API
|
|
3529
|
-
|
|
3530
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3531
|
-
|
|
3532
|
-
|
|
3533
|
-
```jsx
|
|
3534
|
-
<Card title="卡片标题">卡片内容</Card>
|
|
3535
|
-
```
|
|
3536
|
-
|
|
3537
|
-
|
|
3538
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3539
|
-
|--------|--------|--------|--------|--------|
|
|
3540
|
-
| actions | 卡片操作组，位置在卡片底部 | Array | - | |
|
|
3541
|
-
| activeTabKey | 当前激活页签的 key | string | - | |
|
|
3542
|
-
| variant | 形态变体 | outlined | outlined | 5.24.0 |
|
|
3543
|
-
| cover | 卡片封面 | ReactNode | - | |
|
|
3544
|
-
| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | 第一个页签的 key | |
|
|
3545
|
-
| extra | 卡片右上角的操作区域 | ReactNode | - | |
|
|
3546
|
-
| hoverable | 鼠标移过时可浮起 | boolean | false | |
|
|
3547
|
-
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false | |
|
|
3548
|
-
| size | card 的尺寸 | default | default | |
|
|
3549
|
-
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | |
|
|
3550
|
-
| tabList | 页签标题列表 | | - | |
|
|
3551
|
-
| tabProps | | - | - | |
|
|
3552
|
-
| title | 卡片标题 | ReactNode | - | |
|
|
3553
|
-
| type | 卡片类型，可设置为 | string | - | |
|
|
3554
|
-
| classNames | 配置卡片内置模块的 className | | - | 5.14.0 |
|
|
3555
|
-
| styles | 配置卡片内置模块的 style | | - | 5.14.0 |
|
|
3556
|
-
| onTabChange | 页签切换的回调 | (key) => void | - | |
|
|
3557
|
-
|
|
3558
|
-
|
|
3559
|
-
### Card.Grid
|
|
3560
|
-
|
|
3561
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3562
|
-
|--------|--------|--------|--------|--------|
|
|
3563
|
-
| className | 网格容器类名 | string | - | |
|
|
3564
|
-
| hoverable | 鼠标移过时可浮起 | boolean | true | |
|
|
3565
|
-
| style | 定义网格容器类名的样式 | CSSProperties | - | |
|
|
3566
|
-
|
|
3567
|
-
|
|
3568
|
-
### Card.Meta
|
|
3569
|
-
|
|
3570
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3571
|
-
|--------|--------|--------|--------|--------|
|
|
3572
|
-
| avatar | 头像/图标 | ReactNode | - | |
|
|
3573
|
-
| className | 容器类名 | string | - | |
|
|
3574
|
-
| description | 描述内容 | ReactNode | - | |
|
|
3575
|
-
| style | 定义容器类名的样式 | CSSProperties | - | |
|
|
3576
|
-
| title | 标题内容 | ReactNode | - | |
|
|
3577
|
-
|
|
3578
|
-
|
|
3579
|
-
|
|
3580
|
-
|
|
3581
3548
|
<DemoTitle title="Button" desc="按钮用于开始一个即时操作。">
|
|
3582
3549
|
#### API
|
|
3583
3550
|
|
|
@@ -3752,6 +3719,69 @@ return <Breadcrumb itemRender={itemRender} items={items} />;
|
|
|
3752
3719
|
|
|
3753
3720
|
|
|
3754
3721
|
|
|
3722
|
+
<DemoTitle title="Card" desc="通用卡片容器">
|
|
3723
|
+
#### API
|
|
3724
|
+
|
|
3725
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3726
|
+
|--------|--------|--------|--------|
|
|
3727
|
+
| info | 副标题 | ReactNode | |
|
|
3728
|
+
|
|
3729
|
+
<AntdApiRef url="https://ant.design/components/card-cn/#api"></AntdApiRef>
|
|
3730
|
+
|
|
3731
|
+
|
|
3732
|
+
## antd API
|
|
3733
|
+
|
|
3734
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3735
|
+
|
|
3736
|
+
|
|
3737
|
+
```jsx
|
|
3738
|
+
<Card title="卡片标题">卡片内容</Card>
|
|
3739
|
+
```
|
|
3740
|
+
|
|
3741
|
+
|
|
3742
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3743
|
+
|--------|--------|--------|--------|--------|
|
|
3744
|
+
| actions | 卡片操作组，位置在卡片底部 | Array | - | |
|
|
3745
|
+
| activeTabKey | 当前激活页签的 key | string | - | |
|
|
3746
|
+
| variant | 形态变体 | outlined | outlined | 5.24.0 |
|
|
3747
|
+
| cover | 卡片封面 | ReactNode | - | |
|
|
3748
|
+
| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | 第一个页签的 key | |
|
|
3749
|
+
| extra | 卡片右上角的操作区域 | ReactNode | - | |
|
|
3750
|
+
| hoverable | 鼠标移过时可浮起 | boolean | false | |
|
|
3751
|
+
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false | |
|
|
3752
|
+
| size | card 的尺寸 | default | default | |
|
|
3753
|
+
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | |
|
|
3754
|
+
| tabList | 页签标题列表 | | - | |
|
|
3755
|
+
| tabProps | | - | - | |
|
|
3756
|
+
| title | 卡片标题 | ReactNode | - | |
|
|
3757
|
+
| type | 卡片类型，可设置为 | string | - | |
|
|
3758
|
+
| classNames | 配置卡片内置模块的 className | | - | 5.14.0 |
|
|
3759
|
+
| styles | 配置卡片内置模块的 style | | - | 5.14.0 |
|
|
3760
|
+
| onTabChange | 页签切换的回调 | (key) => void | - | |
|
|
3761
|
+
|
|
3762
|
+
|
|
3763
|
+
### Card.Grid
|
|
3764
|
+
|
|
3765
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3766
|
+
|--------|--------|--------|--------|--------|
|
|
3767
|
+
| className | 网格容器类名 | string | - | |
|
|
3768
|
+
| hoverable | 鼠标移过时可浮起 | boolean | true | |
|
|
3769
|
+
| style | 定义网格容器类名的样式 | CSSProperties | - | |
|
|
3770
|
+
|
|
3771
|
+
|
|
3772
|
+
### Card.Meta
|
|
3773
|
+
|
|
3774
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3775
|
+
|--------|--------|--------|--------|--------|
|
|
3776
|
+
| avatar | 头像/图标 | ReactNode | - | |
|
|
3777
|
+
| className | 容器类名 | string | - | |
|
|
3778
|
+
| description | 描述内容 | ReactNode | - | |
|
|
3779
|
+
| style | 定义容器类名的样式 | CSSProperties | - | |
|
|
3780
|
+
| title | 标题内容 | ReactNode | - | |
|
|
3781
|
+
|
|
3782
|
+
|
|
3783
|
+
|
|
3784
|
+
|
|
3755
3785
|
<DemoTitle title="Avatar" desc="用来代表用户或事物，支持图片、图标或字符展示。">
|
|
3756
3786
|
#### API
|
|
3757
3787
|
|
|
@@ -4082,4 +4112,313 @@ export default () => {
|
|
|
4082
4112
|
|
|
4083
4113
|
基本用法
|
|
4084
4114
|
|
|
4085
|
-
访问 [Icon Library](https://sparkdesign.agentscope.io/#/resources/icons) 查看全部 Icon
|
|
4115
|
+
访问 [Icon Library](https://sparkdesign.agentscope.io/#/resources/icons) 查看全部 Icon
|
|
4116
|
+
|
|
4117
|
+
|
|
4118
|
+
|
|
4119
|
+
# Icon Library
|
|
4120
|
+
|
|
4121
|
+
|
|
4122
|
+
|
|
4123
|
+
```tsx
|
|
4124
|
+
import React, { useEffect, useMemo, useState } from 'react';
|
|
4125
|
+
import * as SparkIcons from '@agentscope-ai/icons';
|
|
4126
|
+
import { Input, Radio, message, copy } from '@agentscope-ai/design';
|
|
4127
|
+
import { createStyles } from 'antd-style';
|
|
4128
|
+
import { useLocale } from 'dumi';
|
|
4129
|
+
import { SparkSearchLine } from '@agentscope-ai/icons';
|
|
4130
|
+
import { categorizeIcon, ICON_CATEGORIES } from './iconCategories';
|
|
4131
|
+
import $i18n from '@/i18n';
|
|
4132
|
+
|
|
4133
|
+
/**
|
|
4134
|
+
* Icons Library
|
|
4135
|
+
* - 自动枚举并展示 @agentscope-ai/icons 的全部导出图标
|
|
4136
|
+
* - 支持搜索、点击复制
|
|
4137
|
+
*/
|
|
4138
|
+
|
|
4139
|
+
interface IconItem {
|
|
4140
|
+
/** 图标导出名称 */
|
|
4141
|
+
name: string;
|
|
4142
|
+
/** 图标 React 组件 */
|
|
4143
|
+
Icon: React.ComponentType<any>;
|
|
4144
|
+
/** 图标分类 */
|
|
4145
|
+
category: string;
|
|
4146
|
+
}
|
|
4147
|
+
|
|
4148
|
+
type CopyMode = 'name' | 'import' | 'jsx';
|
|
4149
|
+
|
|
4150
|
+
const useStyles = createStyles(() => ({
|
|
4151
|
+
container: {
|
|
4152
|
+
position: 'relative',
|
|
4153
|
+
padding: 16,
|
|
4154
|
+
paddingTop: 72,
|
|
4155
|
+
},
|
|
4156
|
+
toolbar: {
|
|
4157
|
+
position: 'fixed',
|
|
4158
|
+
width: '100%',
|
|
4159
|
+
padding: '16px',
|
|
4160
|
+
top: 0,
|
|
4161
|
+
left: 0,
|
|
4162
|
+
display: 'flex',
|
|
4163
|
+
gap: 12,
|
|
4164
|
+
alignItems: 'center',
|
|
4165
|
+
justifyContent: 'space-between',
|
|
4166
|
+
flexWrap: 'wrap',
|
|
4167
|
+
background: 'var(--sps-color-bg-base)',
|
|
4168
|
+
borderBottom: '1px solid var(--sps-color-border-secondary)',
|
|
4169
|
+
marginBottom: '16px',
|
|
4170
|
+
},
|
|
4171
|
+
toolbarLeft: {
|
|
4172
|
+
display: 'flex',
|
|
4173
|
+
gap: 12,
|
|
4174
|
+
alignItems: 'center',
|
|
4175
|
+
},
|
|
4176
|
+
toolbarRight: {
|
|
4177
|
+
display: 'flex',
|
|
4178
|
+
gap: 12,
|
|
4179
|
+
alignItems: 'center',
|
|
4180
|
+
justifyContent: 'flex-end',
|
|
4181
|
+
flexWrap: 'wrap',
|
|
4182
|
+
},
|
|
4183
|
+
search: {
|
|
4184
|
+
maxWidth: 300,
|
|
4185
|
+
},
|
|
4186
|
+
count: {
|
|
4187
|
+
color: 'var(--sps-color-text-tertiary)',
|
|
4188
|
+
fontSize: 12,
|
|
4189
|
+
},
|
|
4190
|
+
groups: {
|
|
4191
|
+
marginTop: 16,
|
|
4192
|
+
display: 'flex',
|
|
4193
|
+
flexDirection: 'column',
|
|
4194
|
+
gap: 24,
|
|
4195
|
+
},
|
|
4196
|
+
groupTitle: {
|
|
4197
|
+
fontSize: 14,
|
|
4198
|
+
fontWeight: 600,
|
|
4199
|
+
color: 'var(--sps-color-text-base)',
|
|
4200
|
+
marginBottom: 12,
|
|
4201
|
+
},
|
|
4202
|
+
groupCount: {
|
|
4203
|
+
marginLeft: 8,
|
|
4204
|
+
fontSize: 12,
|
|
4205
|
+
fontWeight: 400,
|
|
4206
|
+
color: 'var(--sps-color-text-tertiary)',
|
|
4207
|
+
},
|
|
4208
|
+
grid: {
|
|
4209
|
+
display: 'grid',
|
|
4210
|
+
gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
|
|
4211
|
+
gap: 12,
|
|
4212
|
+
},
|
|
4213
|
+
card: {
|
|
4214
|
+
padding: 12,
|
|
4215
|
+
borderRadius: 8,
|
|
4216
|
+
cursor: 'pointer',
|
|
4217
|
+
border: '1px solid var(--sps-color-border-secondary)',
|
|
4218
|
+
background: 'var(--sps-color-bg-base)',
|
|
4219
|
+
},
|
|
4220
|
+
iconWrap: {
|
|
4221
|
+
width: 48,
|
|
4222
|
+
height: 48,
|
|
4223
|
+
display: 'flex',
|
|
4224
|
+
alignItems: 'center',
|
|
4225
|
+
justifyContent: 'center',
|
|
4226
|
+
},
|
|
4227
|
+
name: {
|
|
4228
|
+
marginTop: 8,
|
|
4229
|
+
fontSize: 12,
|
|
4230
|
+
lineHeight: '16px',
|
|
4231
|
+
color: 'var(--sps-color-text-tertiary)',
|
|
4232
|
+
overflow: 'hidden',
|
|
4233
|
+
textOverflow: 'ellipsis',
|
|
4234
|
+
whiteSpace: 'nowrap',
|
|
4235
|
+
width: '100%',
|
|
4236
|
+
fontFamily:
|
|
4237
|
+
'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
|
4238
|
+
},
|
|
4239
|
+
}));
|
|
4240
|
+
|
|
4241
|
+
export default function IconLibrary() {
|
|
4242
|
+
const { styles } = useStyles();
|
|
4243
|
+
const locale = useLocale();
|
|
4244
|
+
const [keyword, setKeyword] = useState<string>('');
|
|
4245
|
+
const [copyMode, setCopyMode] = useState<CopyMode>('name');
|
|
4246
|
+
|
|
4247
|
+
useEffect(() => {
|
|
4248
|
+
// 同步 dumi 站点语言到 $i18n（$i18n 识别 zh-cn / en）
|
|
4249
|
+
$i18n.updateLocale(locale.id === 'zh-CN' ? 'zh-cn' : 'en');
|
|
4250
|
+
}, [locale.id]);
|
|
4251
|
+
|
|
4252
|
+
const excludedIcons = useMemo(
|
|
4253
|
+
() =>
|
|
4254
|
+
new Set([
|
|
4255
|
+
'SparkDelete01LineCopy',
|
|
4256
|
+
'SparkA2d2dFill',
|
|
4257
|
+
'SparkA3d3dFill',
|
|
4258
|
+
'SparkBoldLine1',
|
|
4259
|
+
'SparkShanguangdengweikaiqiFlashlightOffLine',
|
|
4260
|
+
'SparkZhinengshengchengAiGenerateLine',
|
|
4261
|
+
'SparkQqkongjianQzoneFill',
|
|
4262
|
+
'SparkAccountManagementFill',
|
|
4263
|
+
]),
|
|
4264
|
+
[],
|
|
4265
|
+
);
|
|
4266
|
+
|
|
4267
|
+
const allIcons = useMemo<IconItem[]>(() => {
|
|
4268
|
+
return Object.entries(SparkIcons)
|
|
4269
|
+
.filter(([name, Icon]) => {
|
|
4270
|
+
if (!name.startsWith('Spark')) return false;
|
|
4271
|
+
if (excludedIcons.has(name)) return false;
|
|
4272
|
+
return typeof Icon === 'function';
|
|
4273
|
+
})
|
|
4274
|
+
.map(([name, Icon]) => ({
|
|
4275
|
+
name,
|
|
4276
|
+
Icon: Icon as React.ComponentType<any>,
|
|
4277
|
+
category: categorizeIcon(name),
|
|
4278
|
+
}))
|
|
4279
|
+
.sort((a, b) => a.name.localeCompare(b.name));
|
|
4280
|
+
}, [excludedIcons]);
|
|
4281
|
+
|
|
4282
|
+
const filteredIcons = useMemo<IconItem[]>(() => {
|
|
4283
|
+
const q = keyword.trim().toLowerCase();
|
|
4284
|
+
if (!q) return allIcons;
|
|
4285
|
+
return allIcons.filter((item) => item.name.toLowerCase().includes(q));
|
|
4286
|
+
}, [allIcons, keyword]);
|
|
4287
|
+
|
|
4288
|
+
const groupedIcons = useMemo<Record<string, IconItem[]>>(() => {
|
|
4289
|
+
return filteredIcons.reduce<Record<string, IconItem[]>>((acc, icon) => {
|
|
4290
|
+
const key = icon.category;
|
|
4291
|
+
if (!acc[key]) acc[key] = [];
|
|
4292
|
+
acc[key].push(icon);
|
|
4293
|
+
return acc;
|
|
4294
|
+
}, {});
|
|
4295
|
+
}, [filteredIcons]);
|
|
4296
|
+
|
|
4297
|
+
const orderedCategories = useMemo<string[]>(() => {
|
|
4298
|
+
const configOrder = Object.keys(ICON_CATEGORIES);
|
|
4299
|
+
const existing = new Set(Object.keys(groupedIcons));
|
|
4300
|
+
const ordered = configOrder.filter((k) => existing.has(k));
|
|
4301
|
+
const rest = Object.keys(groupedIcons)
|
|
4302
|
+
.filter((k) => !configOrder.includes(k))
|
|
4303
|
+
.sort((a, b) => a.localeCompare(b));
|
|
4304
|
+
return [...ordered, ...rest];
|
|
4305
|
+
}, [groupedIcons]);
|
|
4306
|
+
|
|
4307
|
+
const handleCopy = (item: IconItem) => {
|
|
4308
|
+
let text = item.name;
|
|
4309
|
+
if (copyMode === 'import') {
|
|
4310
|
+
text = `import { ${item.name} } from '@agentscope-ai/icons';`;
|
|
4311
|
+
}
|
|
4312
|
+
if (copyMode === 'jsx') {
|
|
4313
|
+
text = `<${item.name} style={{ fontSize: 24 }} />`;
|
|
4314
|
+
}
|
|
4315
|
+
|
|
4316
|
+
copy(text);
|
|
4317
|
+
message.success(
|
|
4318
|
+
$i18n.get({
|
|
4319
|
+
id: 'docs.icons.IconLibrary.CopySuccess',
|
|
4320
|
+
dm: '已复制',
|
|
4321
|
+
}),
|
|
4322
|
+
);
|
|
4323
|
+
};
|
|
4324
|
+
|
|
4325
|
+
return (
|
|
4326
|
+
<div className={styles.container}>
|
|
4327
|
+
<div className={styles.toolbar}>
|
|
4328
|
+
<div className={styles.toolbarLeft}>
|
|
4329
|
+
<Input
|
|
4330
|
+
placeholder={$i18n.get({
|
|
4331
|
+
id: 'docs.icons.IconLibrary.SearchPlaceholder',
|
|
4332
|
+
dm: '搜索图标（按导出名）',
|
|
4333
|
+
})}
|
|
4334
|
+
value={keyword}
|
|
4335
|
+
onChange={(e) => setKeyword((e?.target as any)?.value || '')}
|
|
4336
|
+
className={styles.search}
|
|
4337
|
+
prefix={<SparkSearchLine style={{ fontSize: 16 }} />}
|
|
4338
|
+
allowClear
|
|
4339
|
+
/>
|
|
4340
|
+
</div>
|
|
4341
|
+
|
|
4342
|
+
<div className={styles.toolbarRight}>
|
|
4343
|
+
<div className={styles.count}>
|
|
4344
|
+
{$i18n.get(
|
|
4345
|
+
{
|
|
4346
|
+
id: 'docs.icons.IconLibrary.TotalCount',
|
|
4347
|
+
dm: '共 {count} 个',
|
|
4348
|
+
},
|
|
4349
|
+
{ count: String(filteredIcons.length) },
|
|
4350
|
+
)}
|
|
4351
|
+
</div>
|
|
4352
|
+
<Radio.Group
|
|
4353
|
+
value={copyMode}
|
|
4354
|
+
onChange={(e) => setCopyMode(e.target.value)}
|
|
4355
|
+
optionType="button"
|
|
4356
|
+
buttonStyle="solid"
|
|
4357
|
+
options={[
|
|
4358
|
+
{
|
|
4359
|
+
label: $i18n.get({
|
|
4360
|
+
id: 'docs.icons.IconLibrary.CopyName',
|
|
4361
|
+
dm: '复制名称',
|
|
4362
|
+
}),
|
|
4363
|
+
value: 'name',
|
|
4364
|
+
},
|
|
4365
|
+
{
|
|
4366
|
+
label: $i18n.get({
|
|
4367
|
+
id: 'docs.icons.IconLibrary.CopyImport',
|
|
4368
|
+
dm: '复制 import',
|
|
4369
|
+
}),
|
|
4370
|
+
value: 'import',
|
|
4371
|
+
},
|
|
4372
|
+
{
|
|
4373
|
+
label: $i18n.get({
|
|
4374
|
+
id: 'docs.icons.IconLibrary.CopyJSX',
|
|
4375
|
+
dm: '复制 JSX',
|
|
4376
|
+
}),
|
|
4377
|
+
value: 'jsx',
|
|
4378
|
+
},
|
|
4379
|
+
]}
|
|
4380
|
+
/>
|
|
4381
|
+
</div>
|
|
4382
|
+
</div>
|
|
4383
|
+
|
|
4384
|
+
<div className={styles.groups}>
|
|
4385
|
+
{orderedCategories.map((category) => {
|
|
4386
|
+
const list = groupedIcons[category] || [];
|
|
4387
|
+
return (
|
|
4388
|
+
<div key={category}>
|
|
4389
|
+
<div className={styles.groupTitle}>
|
|
4390
|
+
{category}
|
|
4391
|
+
<span className={styles.groupCount}>({list.length})</span>
|
|
4392
|
+
</div>
|
|
4393
|
+
|
|
4394
|
+
<div className={styles.grid}>
|
|
4395
|
+
{list.map((item) => {
|
|
4396
|
+
const Icon = item.Icon;
|
|
4397
|
+
return (
|
|
4398
|
+
<div
|
|
4399
|
+
key={item.name}
|
|
4400
|
+
className={styles.card}
|
|
4401
|
+
onClick={() => handleCopy(item)}
|
|
4402
|
+
>
|
|
4403
|
+
<div className={styles.iconWrap}>
|
|
4404
|
+
<Icon style={{ fontSize: 24 }} />
|
|
4405
|
+
</div>
|
|
4406
|
+
<div className={styles.name} title={item.name}>
|
|
4407
|
+
{item.name}
|
|
4408
|
+
</div>
|
|
4409
|
+
</div>
|
|
4410
|
+
);
|
|
4411
|
+
})}
|
|
4412
|
+
</div>
|
|
4413
|
+
</div>
|
|
4414
|
+
);
|
|
4415
|
+
})}
|
|
4416
|
+
</div>
|
|
4417
|
+
</div>
|
|
4418
|
+
);
|
|
4419
|
+
}
|
|
4420
|
+
|
|
4421
|
+
|
|
4422
|
+
```
|
|
4423
|
+
|
|
4424
|
+
查看全部图标
|