@agentscope-ai/design 1.0.26-beta.1767843408082 → 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/components/commonComponents/Button/demo/demo1.js +0 -4
- package/lib/components/commonComponents/Empty/svg/Illustrate.js +117 -39
- package/lib/i18n/strings/en-US.json +7 -1
- package/lib/i18n/strings/zh-CN.json +7 -1
- package/llms/all.llms.txt +1183 -844
- 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/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 +18 -16
- package/package.json +6 -5
- package/llms/docs/guide/musicLofiGenerator.zh-CN.llms.txt +0 -12
package/llms/all.llms.txt
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
|
|
2
2
|
|
|
3
|
+
<DemoTitle title="Video" desc="视频展示">
|
|
4
|
+
#### API
|
|
5
|
+
|
|
6
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
7
|
+
|--------|--------|--------|--------|
|
|
8
|
+
| mouseEnterAutoPlay | 鼠标进入时是否自动播放 | boolean | false |
|
|
9
|
+
| children | video内部设置了按钮在暗色背景下的样式，如果有一些操作按钮想继承这个样式可以在这里传入 | React.ReactNode | |
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
3
16
|
<DemoTitle title="Upload" desc="文件选择上传和拖拽上传控件。">
|
|
4
17
|
#### API
|
|
5
18
|
|
|
@@ -96,119 +109,6 @@
|
|
|
96
109
|
|
|
97
110
|
|
|
98
111
|
|
|
99
|
-
<DemoTitle title="TimePicker" desc="输入或选择时间的控件。">
|
|
100
|
-
#### API
|
|
101
|
-
|
|
102
|
-
<AntdApiRef url="https://ant.design/components/time-picker-cn/#api"></AntdApiRef>
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
## antd API
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
```jsx
|
|
113
|
-
import dayjs from 'dayjs';
|
|
114
|
-
import customParseFormat from 'dayjs/plugin/customParseFormat'
|
|
115
|
-
|
|
116
|
-
dayjs.extend(customParseFormat)
|
|
117
|
-
<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
|
|
118
|
-
```
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
122
|
-
|--------|--------|--------|--------|--------|
|
|
123
|
-
| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
|
|
124
|
-
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
125
|
-
| cellRender | 自定义单元格的内容 | (current: number, info: { originNode: React.ReactNode, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
|
|
126
|
-
| changeOnScroll | 在滚动时改变选择值 | boolean | false | 5.14.0 |
|
|
127
|
-
| className | 选择器类名 | string | - | |
|
|
128
|
-
| defaultValue | 默认时间 | | - | |
|
|
129
|
-
| disabled | 禁用全部操作 | boolean | false | |
|
|
130
|
-
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
131
|
-
| format | 展示的时间格式 | string | HH:mm:ss | |
|
|
132
|
-
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | |
|
|
133
|
-
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | |
|
|
134
|
-
| hourStep | 小时选项间隔 | number | 1 | |
|
|
135
|
-
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
|
|
136
|
-
| minuteStep | 分钟选项间隔 | number | 1 | |
|
|
137
|
-
| needConfirm | 是否需要确认按钮，为 | boolean | - | 5.14.0 |
|
|
138
|
-
| open | 面板是否打开 | boolean | false | |
|
|
139
|
-
| placeholder | 没有值的时候显示的内容 | string \| [string, string] | 请选择时间 | |
|
|
140
|
-
| placement | 选择框弹出的位置 | bottomLeft | bottomLeft | |
|
|
141
|
-
| popupClassName | 弹出层类名 | string | - | |
|
|
142
|
-
| popupStyle | 弹出层样式对象 | object | - | |
|
|
143
|
-
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
|
|
144
|
-
| renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - | |
|
|
145
|
-
| secondStep | 秒选项间隔 | number | 1 | |
|
|
146
|
-
| showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
|
|
147
|
-
| size | 输入框大小， | large | - | |
|
|
148
|
-
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
149
|
-
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
|
150
|
-
| use12Hours | 使用 12 小时制，为 true 时 | boolean | false | |
|
|
151
|
-
| value | 当前时间 | | - | |
|
|
152
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
153
|
-
| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - | |
|
|
154
|
-
| onChange | 时间发生变化的回调 | function(time: dayjs, timeString: string): void | - | |
|
|
155
|
-
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - | |
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
#### DisabledTime
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
```typescript
|
|
162
|
-
type DisabledTime = (now: Dayjs) => {
|
|
163
|
-
disabledHours?: () => number[];
|
|
164
|
-
disabledMinutes?: (selectedHour: number) => number[];
|
|
165
|
-
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
166
|
-
disabledMilliseconds?: (
|
|
167
|
-
selectedHour: number,
|
|
168
|
-
selectedMinute: number,
|
|
169
|
-
selectedSecond: number,
|
|
170
|
-
) => number[];
|
|
171
|
-
};
|
|
172
|
-
```
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
注意：`disabledMilliseconds` 为 `5.14.0` 新增。
|
|
176
|
-
|
|
177
|
-
## 方法
|
|
178
|
-
|
|
179
|
-
| 名称 | 描述 | 版本 |
|
|
180
|
-
|--------|--------|--------|
|
|
181
|
-
| blur() | 移除焦点 | |
|
|
182
|
-
| focus() | 获取焦点 | |
|
|
183
|
-
|
|
184
|
-
|
|
185
|
-
## RangePicker
|
|
186
|
-
|
|
187
|
-
属性与 DatePicker 的 [RangePicker](/components/date-picker-cn#rangepicker) 相同。还包含以下属性：
|
|
188
|
-
|
|
189
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
190
|
-
|--------|--------|--------|--------|--------|
|
|
191
|
-
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
192
|
-
| order | 始末时间是否自动排序 | boolean | true | 4.1.0 |
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
### RangeDisabledTime
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
```typescript
|
|
199
|
-
type RangeDisabledTime = (
|
|
200
|
-
now: Dayjs,
|
|
201
|
-
type = 'start' | 'end',
|
|
202
|
-
) => {
|
|
203
|
-
disabledHours?: () => number[];
|
|
204
|
-
disabledMinutes?: (selectedHour: number) => number[];
|
|
205
|
-
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
206
|
-
};
|
|
207
|
-
```
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
112
|
<DemoTitle title="Tooltip" desc="简单的文本提示气泡框">
|
|
213
113
|
#### API
|
|
214
114
|
|
|
@@ -256,124 +156,6 @@ type RangeDisabledTime = (
|
|
|
256
156
|
|
|
257
157
|
|
|
258
158
|
|
|
259
|
-
<DemoTitle title="Video" desc="视频展示">
|
|
260
|
-
#### API
|
|
261
|
-
|
|
262
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
263
|
-
|--------|--------|--------|--------|
|
|
264
|
-
| mouseEnterAutoPlay | 鼠标进入时是否自动播放 | boolean | false |
|
|
265
|
-
| children | video内部设置了按钮在暗色背景下的样式，如果有一些操作按钮想继承这个样式可以在这里传入 | React.ReactNode | |
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
<DemoTitle title="Tag" desc="进行标记和分类的小标签">
|
|
273
|
-
#### API
|
|
274
|
-
|
|
275
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
276
|
-
|--------|--------|--------|--------|
|
|
277
|
-
| size | 尺寸 | 'small' \| 'middle' | 'middle' |
|
|
278
|
-
| color | 标签色 | SparkTagColors \| string | 'purple' |
|
|
279
|
-
|
|
280
|
-
<AntdApiRef url="https://ant.design/components/tag-cn/#api"></AntdApiRef>
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
## antd API
|
|
284
|
-
|
|
285
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
286
|
-
|
|
287
|
-
### Tag
|
|
288
|
-
|
|
289
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
290
|
-
|--------|--------|--------|--------|--------|
|
|
291
|
-
| closeIcon | 自定义关闭按钮。5.7.0：设置为 | ReactNode | false | 4.4.0 |
|
|
292
|
-
| icon | 设置图标 | ReactNode | - | |
|
|
293
|
-
| bordered | 是否有边框 | boolean | true | 5.4.0 |
|
|
294
|
-
| onClose | 关闭时的回调（可通过 | (e: React.MouseEvent) => void | - | |
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
### Tag.CheckableTag
|
|
298
|
-
|
|
299
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
300
|
-
|--------|--------|--------|--------|
|
|
301
|
-
| checked | 设置标签的选中状态 | boolean | false |
|
|
302
|
-
| onChange | 点击标签时触发的回调 | (checked) => void | - |
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
<DemoTitle title="Tabs" desc="用户可以通过点击不同的标签在同一页面中查看不同的内容区域。">
|
|
308
|
-
#### API
|
|
309
|
-
|
|
310
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
311
|
-
|--------|--------|--------|--------|
|
|
312
|
-
| type | 类型 | 'line' \| 'card' \| 'editable-card' \| 'segmented' | true |
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
<AntdApiRef url="https://ant.design/components/tabs-cn/#api"></AntdApiRef>
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
## antd API
|
|
319
|
-
|
|
320
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
321
|
-
|
|
322
|
-
### Tabs
|
|
323
|
-
|
|
324
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
325
|
-
|--------|--------|--------|--------|--------|
|
|
326
|
-
| activeKey | 当前激活 tab 面板的 key | string | - | |
|
|
327
|
-
| addIcon | 自定义添加按钮，设置 | ReactNode | | 4.4.0 |
|
|
328
|
-
| animated | 是否使用动画切换 Tabs | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | |
|
|
329
|
-
| centered | 标签居中展示 | boolean | false | 4.4.0 |
|
|
330
|
-
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板的 key | |
|
|
331
|
-
| hideAdd | 是否隐藏加号图标，在 | boolean | false | |
|
|
332
|
-
| indicator | 自定义指示条的长度和对齐方式 | { size?: number \| (origin: number) => number; align: | - | 5.13.0 |
|
|
333
|
-
| items | 配置选项卡内容 | | [] | 4.23.0 |
|
|
334
|
-
| more | 自定义折叠菜单属性 | | { icon: | |
|
|
335
|
-
| removeIcon | 自定义删除按钮，设置 | ReactNode | | 5.15.0 |
|
|
336
|
-
| popupClassName | 更多菜单的 | string | - | 4.21.0 |
|
|
337
|
-
| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
|
|
338
|
-
| size | 大小，提供 | string | middle | |
|
|
339
|
-
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
|
|
340
|
-
| tabBarGutter | tabs 之间的间隙 | number | - | |
|
|
341
|
-
| tabBarStyle | tab bar 的样式对象 | CSSProperties | - | |
|
|
342
|
-
| tabPosition | 页签位置，可选值有 | string | top | |
|
|
343
|
-
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
344
|
-
| onChange | 切换面板的回调 | (activeKey: string) => void | - | |
|
|
345
|
-
| onEdit | 新增和删除页签的回调，在 | (action === 'add' ? event : targetKey, action) => void | - | |
|
|
346
|
-
| onTabClick | tab 被点击的回调 | (key: string, event: MouseEvent) => void | - | |
|
|
347
|
-
| onTabScroll | tab 滚动时触发 | ({ direction: | - | 4.3.0 |
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
更多属性查看 [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
|
|
351
|
-
|
|
352
|
-
### TabItemType
|
|
353
|
-
|
|
354
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
355
|
-
|--------|--------|--------|--------|--------|
|
|
356
|
-
| closeIcon | 自定义关闭图标，在 | ReactNode | - | |
|
|
357
|
-
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
358
|
-
| disabled | 禁用某一项 | boolean | false | |
|
|
359
|
-
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
|
|
360
|
-
| key | 对应 activeKey | string | - | |
|
|
361
|
-
| label | 选项卡头显示文字 | ReactNode | - | |
|
|
362
|
-
| icon | 选项卡头显示图标 | ReactNode | - | 5.12.0 |
|
|
363
|
-
| children | 选项卡头显示内容 | ReactNode | - | |
|
|
364
|
-
| closable | 是否显示选项卡的关闭按钮，在 | boolean | true | |
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
### MoreProps
|
|
368
|
-
|
|
369
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
370
|
-
|--------|--------|--------|--------|--------|
|
|
371
|
-
| icon | 自定义折叠图标 | ReactNode | - | |
|
|
372
|
-
| | | | | |
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
159
|
<DemoTitle title="Table" desc="展示行列数据。">
|
|
378
160
|
#### API
|
|
379
161
|
|
|
@@ -629,25 +411,130 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
629
411
|
|
|
630
412
|
|
|
631
413
|
|
|
632
|
-
<DemoTitle title="
|
|
414
|
+
<DemoTitle title="Tag" desc="进行标记和分类的小标签">
|
|
633
415
|
#### API
|
|
634
416
|
|
|
635
417
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
636
418
|
|--------|--------|--------|--------|
|
|
637
|
-
|
|
|
419
|
+
| size | 尺寸 | 'small' \| 'middle' | 'middle' |
|
|
420
|
+
| color | 标签色 | SparkTagColors \| string | 'purple' |
|
|
638
421
|
|
|
639
|
-
<AntdApiRef url="https://ant.design/components/
|
|
422
|
+
<AntdApiRef url="https://ant.design/components/tag-cn/#api"></AntdApiRef>
|
|
640
423
|
|
|
641
424
|
|
|
642
425
|
## antd API
|
|
643
426
|
|
|
644
427
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
645
428
|
|
|
429
|
+
### Tag
|
|
430
|
+
|
|
646
431
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
647
432
|
|--------|--------|--------|--------|--------|
|
|
648
|
-
|
|
|
649
|
-
|
|
|
650
|
-
|
|
|
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 | - | |
|
|
437
|
+
|
|
438
|
+
|
|
439
|
+
### Tag.CheckableTag
|
|
440
|
+
|
|
441
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
442
|
+
|--------|--------|--------|--------|
|
|
443
|
+
| checked | 设置标签的选中状态 | boolean | false |
|
|
444
|
+
| onChange | 点击标签时触发的回调 | (checked) => void | - |
|
|
445
|
+
|
|
446
|
+
|
|
447
|
+
|
|
448
|
+
|
|
449
|
+
<DemoTitle title="Tabs" desc="用户可以通过点击不同的标签在同一页面中查看不同的内容区域。">
|
|
450
|
+
#### API
|
|
451
|
+
|
|
452
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
453
|
+
|--------|--------|--------|--------|
|
|
454
|
+
| type | 类型 | 'line' \| 'card' \| 'editable-card' \| 'segmented' | true |
|
|
455
|
+
|
|
456
|
+
|
|
457
|
+
<AntdApiRef url="https://ant.design/components/tabs-cn/#api"></AntdApiRef>
|
|
458
|
+
|
|
459
|
+
|
|
460
|
+
## antd API
|
|
461
|
+
|
|
462
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
463
|
+
|
|
464
|
+
### Tabs
|
|
465
|
+
|
|
466
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
467
|
+
|--------|--------|--------|--------|--------|
|
|
468
|
+
| activeKey | 当前激活 tab 面板的 key | string | - | |
|
|
469
|
+
| addIcon | 自定义添加按钮，设置 | ReactNode | | 4.4.0 |
|
|
470
|
+
| animated | 是否使用动画切换 Tabs | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | |
|
|
471
|
+
| centered | 标签居中展示 | boolean | false | 4.4.0 |
|
|
472
|
+
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板的 key | |
|
|
473
|
+
| hideAdd | 是否隐藏加号图标，在 | boolean | false | |
|
|
474
|
+
| indicator | 自定义指示条的长度和对齐方式 | { size?: number \| (origin: number) => number; align: | - | 5.13.0 |
|
|
475
|
+
| items | 配置选项卡内容 | | [] | 4.23.0 |
|
|
476
|
+
| more | 自定义折叠菜单属性 | | { icon: | |
|
|
477
|
+
| removeIcon | 自定义删除按钮，设置 | ReactNode | | 5.15.0 |
|
|
478
|
+
| popupClassName | 更多菜单的 | string | - | 4.21.0 |
|
|
479
|
+
| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
|
|
480
|
+
| size | 大小，提供 | string | middle | |
|
|
481
|
+
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
|
|
482
|
+
| tabBarGutter | tabs 之间的间隙 | number | - | |
|
|
483
|
+
| tabBarStyle | tab bar 的样式对象 | CSSProperties | - | |
|
|
484
|
+
| tabPosition | 页签位置，可选值有 | string | top | |
|
|
485
|
+
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
486
|
+
| onChange | 切换面板的回调 | (activeKey: string) => void | - | |
|
|
487
|
+
| onEdit | 新增和删除页签的回调，在 | (action === 'add' ? event : targetKey, action) => void | - | |
|
|
488
|
+
| onTabClick | tab 被点击的回调 | (key: string, event: MouseEvent) => void | - | |
|
|
489
|
+
| onTabScroll | tab 滚动时触发 | ({ direction: | - | 4.3.0 |
|
|
490
|
+
|
|
491
|
+
|
|
492
|
+
更多属性查看 [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
|
|
493
|
+
|
|
494
|
+
### TabItemType
|
|
495
|
+
|
|
496
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
497
|
+
|--------|--------|--------|--------|--------|
|
|
498
|
+
| closeIcon | 自定义关闭图标，在 | ReactNode | - | |
|
|
499
|
+
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
500
|
+
| disabled | 禁用某一项 | boolean | false | |
|
|
501
|
+
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
|
|
502
|
+
| key | 对应 activeKey | string | - | |
|
|
503
|
+
| label | 选项卡头显示文字 | ReactNode | - | |
|
|
504
|
+
| icon | 选项卡头显示图标 | ReactNode | - | 5.12.0 |
|
|
505
|
+
| children | 选项卡头显示内容 | ReactNode | - | |
|
|
506
|
+
| closable | 是否显示选项卡的关闭按钮，在 | boolean | true | |
|
|
507
|
+
|
|
508
|
+
|
|
509
|
+
### MoreProps
|
|
510
|
+
|
|
511
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
512
|
+
|--------|--------|--------|--------|--------|
|
|
513
|
+
| icon | 自定义折叠图标 | ReactNode | - | |
|
|
514
|
+
| | | | | |
|
|
515
|
+
|
|
516
|
+
|
|
517
|
+
|
|
518
|
+
|
|
519
|
+
<DemoTitle title="Switch" desc="使用开关切换两种状态之间。">
|
|
520
|
+
#### API
|
|
521
|
+
|
|
522
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
523
|
+
|--------|--------|--------|--------|
|
|
524
|
+
| label | Switch后的内容 | ReactNode | |
|
|
525
|
+
|
|
526
|
+
<AntdApiRef url="https://ant.design/components/switch-cn/#api"></AntdApiRef>
|
|
527
|
+
|
|
528
|
+
|
|
529
|
+
## antd API
|
|
530
|
+
|
|
531
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
532
|
+
|
|
533
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
534
|
+
|--------|--------|--------|--------|--------|
|
|
535
|
+
| autoFocus | 组件自动获取焦点 | boolean | false | |
|
|
536
|
+
| checked | 指定当前是否选中 | boolean | false | |
|
|
537
|
+
| checkedChildren | 选中时的内容 | ReactNode | - | |
|
|
651
538
|
| className | Switch 器类名 | string | - | |
|
|
652
539
|
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
653
540
|
| defaultValue | defaultChecked | boolean | - | 5.12.0 |
|
|
@@ -670,6 +557,119 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
670
557
|
|
|
671
558
|
|
|
672
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
|
+
|
|
581
|
+
|
|
582
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
583
|
+
|--------|--------|--------|--------|--------|
|
|
584
|
+
| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
|
|
585
|
+
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
586
|
+
| cellRender | 自定义单元格的内容 | (current: number, info: { originNode: React.ReactNode, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
|
|
587
|
+
| changeOnScroll | 在滚动时改变选择值 | boolean | false | 5.14.0 |
|
|
588
|
+
| className | 选择器类名 | string | - | |
|
|
589
|
+
| defaultValue | 默认时间 | | - | |
|
|
590
|
+
| disabled | 禁用全部操作 | boolean | false | |
|
|
591
|
+
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
592
|
+
| format | 展示的时间格式 | string | HH:mm:ss | |
|
|
593
|
+
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | |
|
|
594
|
+
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | |
|
|
595
|
+
| hourStep | 小时选项间隔 | number | 1 | |
|
|
596
|
+
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
|
|
597
|
+
| minuteStep | 分钟选项间隔 | number | 1 | |
|
|
598
|
+
| needConfirm | 是否需要确认按钮，为 | boolean | - | 5.14.0 |
|
|
599
|
+
| open | 面板是否打开 | boolean | false | |
|
|
600
|
+
| placeholder | 没有值的时候显示的内容 | string \| [string, string] | 请选择时间 | |
|
|
601
|
+
| placement | 选择框弹出的位置 | bottomLeft | bottomLeft | |
|
|
602
|
+
| popupClassName | 弹出层类名 | string | - | |
|
|
603
|
+
| popupStyle | 弹出层样式对象 | object | - | |
|
|
604
|
+
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
|
|
605
|
+
| renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - | |
|
|
606
|
+
| secondStep | 秒选项间隔 | number | 1 | |
|
|
607
|
+
| showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
|
|
608
|
+
| size | 输入框大小， | large | - | |
|
|
609
|
+
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
610
|
+
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
|
611
|
+
| use12Hours | 使用 12 小时制，为 true 时 | boolean | false | |
|
|
612
|
+
| value | 当前时间 | | - | |
|
|
613
|
+
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
614
|
+
| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - | |
|
|
615
|
+
| onChange | 时间发生变化的回调 | function(time: dayjs, timeString: string): void | - | |
|
|
616
|
+
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - | |
|
|
617
|
+
|
|
618
|
+
|
|
619
|
+
#### DisabledTime
|
|
620
|
+
|
|
621
|
+
|
|
622
|
+
```typescript
|
|
623
|
+
type DisabledTime = (now: Dayjs) => {
|
|
624
|
+
disabledHours?: () => number[];
|
|
625
|
+
disabledMinutes?: (selectedHour: number) => number[];
|
|
626
|
+
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
627
|
+
disabledMilliseconds?: (
|
|
628
|
+
selectedHour: number,
|
|
629
|
+
selectedMinute: number,
|
|
630
|
+
selectedSecond: number,
|
|
631
|
+
) => number[];
|
|
632
|
+
};
|
|
633
|
+
```
|
|
634
|
+
|
|
635
|
+
|
|
636
|
+
注意：`disabledMilliseconds` 为 `5.14.0` 新增。
|
|
637
|
+
|
|
638
|
+
## 方法
|
|
639
|
+
|
|
640
|
+
| 名称 | 描述 | 版本 |
|
|
641
|
+
|--------|--------|--------|
|
|
642
|
+
| blur() | 移除焦点 | |
|
|
643
|
+
| focus() | 获取焦点 | |
|
|
644
|
+
|
|
645
|
+
|
|
646
|
+
## RangePicker
|
|
647
|
+
|
|
648
|
+
属性与 DatePicker 的 [RangePicker](/components/date-picker-cn#rangepicker) 相同。还包含以下属性：
|
|
649
|
+
|
|
650
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
651
|
+
|--------|--------|--------|--------|--------|
|
|
652
|
+
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
653
|
+
| order | 始末时间是否自动排序 | boolean | true | 4.1.0 |
|
|
654
|
+
|
|
655
|
+
|
|
656
|
+
### RangeDisabledTime
|
|
657
|
+
|
|
658
|
+
|
|
659
|
+
```typescript
|
|
660
|
+
type RangeDisabledTime = (
|
|
661
|
+
now: Dayjs,
|
|
662
|
+
type = 'start' | 'end',
|
|
663
|
+
) => {
|
|
664
|
+
disabledHours?: () => number[];
|
|
665
|
+
disabledMinutes?: (selectedHour: number) => number[];
|
|
666
|
+
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
667
|
+
};
|
|
668
|
+
```
|
|
669
|
+
|
|
670
|
+
|
|
671
|
+
|
|
672
|
+
|
|
673
673
|
<DemoTitle title="Steps" desc="引导用户按照流程完成任务的导航条。">
|
|
674
674
|
#### API
|
|
675
675
|
|
|
@@ -806,6 +806,70 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
806
806
|
|
|
807
807
|
|
|
808
808
|
|
|
809
|
+
<DemoTitle title="Slider" desc="滑动型输入器，展示当前值和可选范围。">
|
|
810
|
+
#### API
|
|
811
|
+
|
|
812
|
+
<AntdApiRef url="https://ant.design/components/slider-cn/#api"></AntdApiRef>
|
|
813
|
+
|
|
814
|
+
|
|
815
|
+
## antd API
|
|
816
|
+
|
|
817
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
818
|
+
|
|
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
|
|
843
|
+
|
|
844
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
845
|
+
|--------|--------|--------|--------|--------|
|
|
846
|
+
| draggableTrack | 范围刻度是否可被拖拽 | boolean | false | |
|
|
847
|
+
| editable | 启动动态增减节点，不能和 | boolean | false | 5.20.0 |
|
|
848
|
+
| minCount | 配置 | number | 0 | 5.20.0 |
|
|
849
|
+
| maxCount | 配置 | number | - | 5.20.0 |
|
|
850
|
+
|
|
851
|
+
|
|
852
|
+
### tooltip
|
|
853
|
+
|
|
854
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
855
|
+
|--------|--------|--------|--------|--------|
|
|
856
|
+
| autoAdjustOverflow | 是否自动调整弹出位置 | boolean | true | 5.8.0 |
|
|
857
|
+
| open | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时 | boolean | - | 4.23.0 |
|
|
858
|
+
| placement | 设置 Tooltip 展示位置。参考 | string | - | 4.23.0 |
|
|
859
|
+
| getPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
|
|
860
|
+
| formatter | Slider 会把当前值传给 | value => ReactNode \| null | IDENTITY | 4.23.0 |
|
|
861
|
+
|
|
862
|
+
|
|
863
|
+
## 方法
|
|
864
|
+
|
|
865
|
+
| 名称 | 描述 | 版本 |
|
|
866
|
+
|--------|--------|--------|
|
|
867
|
+
| blur() | 移除焦点 | |
|
|
868
|
+
| focus() | 获取焦点 | |
|
|
869
|
+
|
|
870
|
+
|
|
871
|
+
|
|
872
|
+
|
|
809
873
|
<DemoTitle title="Skeleton" desc="在内容加载时提供占位图形展示。">
|
|
810
874
|
## antd API
|
|
811
875
|
|
|
@@ -867,6 +931,81 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
867
931
|
|
|
868
932
|
|
|
869
933
|
|
|
934
|
+
<DemoTitle title="RadioButton" desc="用于在多个备选项中选中单个状态。">
|
|
935
|
+
#### API
|
|
936
|
+
|
|
937
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
938
|
+
|--------|--------|--------|--------|
|
|
939
|
+
| bordered | 边框 | boolean | false |
|
|
940
|
+
| ghost | 按钮背景色类型 | boolean | true |
|
|
941
|
+
| gap | 间距 | number | 12 px |
|
|
942
|
+
|
|
943
|
+
|
|
944
|
+
<AntdApiRef url="https://ant.design/components/radio-cn/#api"></AntdApiRef>
|
|
945
|
+
|
|
946
|
+
|
|
947
|
+
## antd API
|
|
948
|
+
|
|
949
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
950
|
+
|
|
951
|
+
### Radio/Radio.Button
|
|
952
|
+
|
|
953
|
+
<!-- prettier-ignore -->
|
|
954
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
955
|
+
|--------|--------|--------|--------|
|
|
956
|
+
| autoFocus | 自动获取焦点 | boolean | false |
|
|
957
|
+
| checked | 指定当前是否选中 | boolean | false |
|
|
958
|
+
| defaultChecked | 初始是否选中 | boolean | false |
|
|
959
|
+
| disabled | 禁用 Radio | boolean | false |
|
|
960
|
+
| value | 根据 value 进行比较，判断是否选中 | any | - |
|
|
961
|
+
|
|
962
|
+
|
|
963
|
+
### Radio.Group
|
|
964
|
+
|
|
965
|
+
单选框组合，用于包裹一组 `Radio`。
|
|
966
|
+
|
|
967
|
+
<!-- prettier-ignore -->
|
|
968
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
969
|
+
|--------|--------|--------|--------|--------|
|
|
970
|
+
| buttonStyle | RadioButton 的风格样式，目前有描边和填色两种风格 | outline | outline | | |
|
|
971
|
+
| defaultValue | 默认选中的值 | any | - | | |
|
|
972
|
+
| disabled | 禁选所有子单选器 | boolean | false | | |
|
|
973
|
+
| name | RadioGroup 下所有 | string | - | | |
|
|
974
|
+
| options | 以配置形式设置子元素 | string[] \| number[] \| Array< | - | | |
|
|
975
|
+
| optionType | 用于设置 Radio | default | default | 4.4.0 | |
|
|
976
|
+
| size | 大小，只对按钮样式生效 | large | - | | |
|
|
977
|
+
| value | 用于设置当前选中的值 | any | - | | |
|
|
978
|
+
| block | 将 RadioGroup 宽度调整为其父宽度的选项 | boolean | false | 5.21.0 | |
|
|
979
|
+
| onChange | 选项变化时的回调函数 | function(e:Event) | - | | |
|
|
980
|
+
|
|
981
|
+
|
|
982
|
+
### CheckboxOptionType
|
|
983
|
+
|
|
984
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
985
|
+
|--------|--------|--------|--------|--------|
|
|
986
|
+
| label | 用于作为 Radio 选项展示的文本 | string | - | 4.4.0 |
|
|
987
|
+
| value | 关联 Radio 选项的值 | string | - | 4.4.0 |
|
|
988
|
+
| style | 应用到 Radio 选项的 style | React.CSSProperties | - | 4.4.0 |
|
|
989
|
+
| className | Radio 选项的类名 | string | - | 5.25.0 |
|
|
990
|
+
| disabled | 指定 Radio 选项是否要禁用 | boolean | false | 4.4.0 |
|
|
991
|
+
| title | 添加 Title 属性值 | string | - | 4.4.0 |
|
|
992
|
+
| id | 添加 Radio Id 属性值 | string | - | 4.4.0 |
|
|
993
|
+
| onChange | 当 Radio Group 的值发送改变时触发 | (e: CheckboxChangeEvent) => void; | - | 4.4.0 |
|
|
994
|
+
| required | 指定 Radio 选项是否必填 | boolean | false | 4.4.0 |
|
|
995
|
+
|
|
996
|
+
|
|
997
|
+
## 方法
|
|
998
|
+
|
|
999
|
+
### Radio
|
|
1000
|
+
|
|
1001
|
+
| 名称 | 描述 |
|
|
1002
|
+
|--------|--------|
|
|
1003
|
+
| blur() | 移除焦点 |
|
|
1004
|
+
| focus() | 获取焦点 |
|
|
1005
|
+
|
|
1006
|
+
|
|
1007
|
+
|
|
1008
|
+
|
|
870
1009
|
<DemoTitle title="Select" desc="下拉选择器">
|
|
871
1010
|
## antd API
|
|
872
1011
|
|
|
@@ -965,158 +1104,66 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
965
1104
|
|
|
966
1105
|
|
|
967
1106
|
|
|
968
|
-
<DemoTitle title="
|
|
969
|
-
|
|
970
|
-
|
|
971
|
-
<AntdApiRef url="https://ant.design/components/slider-cn/#api"></AntdApiRef>
|
|
972
|
-
|
|
973
|
-
|
|
974
|
-
## antd API
|
|
975
|
-
|
|
976
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
977
|
-
|
|
978
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
979
|
-
|--------|--------|--------|--------|--------|
|
|
980
|
-
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
981
|
-
| classNames | 语义化结构 className | | - | 5.10.0 |
|
|
982
|
-
| defaultValue | 设置初始取值。当 | number \| [number, number] | 0 \| [0, 0] | |
|
|
983
|
-
| disabled | 值为 true 时，滑块为禁用状态 | boolean | false | |
|
|
984
|
-
| keyboard | 支持使用键盘操作 handler | boolean | true | 5.2.0+ |
|
|
985
|
-
| dots | 是否只能拖拽到刻度上 | boolean | false | |
|
|
986
|
-
| included | marks | boolean | true | |
|
|
987
|
-
| marks | 刻度标记，key 的类型必须为 | object | { number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } } | |
|
|
988
|
-
| max | 最大值 | number | 100 | |
|
|
989
|
-
| min | 最小值 | number | 0 | |
|
|
990
|
-
| range | 双滑块模式 | boolean \| | false | |
|
|
991
|
-
| reverse | 反向坐标轴 | boolean | false | |
|
|
992
|
-
| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 | number \| null | 1 | |
|
|
993
|
-
| styles | 语义化结构 styles | | - | 5.10.0 |
|
|
994
|
-
| tooltip | 设置 Tooltip 相关属性 | | - | 4.23.0 |
|
|
995
|
-
| value | 设置当前取值。当 | number \| [number, number] | - | |
|
|
996
|
-
| vertical | 值为 true 时，Slider 为垂直方向 | boolean | false | |
|
|
997
|
-
| onChangeComplete | 与 | (value) => void | - | |
|
|
998
|
-
| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | (value) => void | - | |
|
|
999
|
-
|
|
1000
|
-
|
|
1001
|
-
### range
|
|
1002
|
-
|
|
1003
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1004
|
-
|--------|--------|--------|--------|--------|
|
|
1005
|
-
| draggableTrack | 范围刻度是否可被拖拽 | boolean | false | |
|
|
1006
|
-
| editable | 启动动态增减节点，不能和 | boolean | false | 5.20.0 |
|
|
1007
|
-
| minCount | 配置 | number | 0 | 5.20.0 |
|
|
1008
|
-
| maxCount | 配置 | number | - | 5.20.0 |
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
### tooltip
|
|
1012
|
-
|
|
1013
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1014
|
-
|--------|--------|--------|--------|--------|
|
|
1015
|
-
| autoAdjustOverflow | 是否自动调整弹出位置 | boolean | true | 5.8.0 |
|
|
1016
|
-
| open | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时 | boolean | - | 4.23.0 |
|
|
1017
|
-
| placement | 设置 Tooltip 展示位置。参考 | string | - | 4.23.0 |
|
|
1018
|
-
| getPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
|
|
1019
|
-
| formatter | Slider 会把当前值传给 | value => ReactNode \| null | IDENTITY | 4.23.0 |
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
## 方法
|
|
1023
|
-
|
|
1024
|
-
| 名称 | 描述 | 版本 |
|
|
1025
|
-
|--------|--------|--------|
|
|
1026
|
-
| blur() | 移除焦点 | |
|
|
1027
|
-
| focus() | 获取焦点 | |
|
|
1028
|
-
|
|
1029
|
-
|
|
1030
|
-
|
|
1031
|
-
|
|
1032
|
-
<DemoTitle title="RadioButton" desc="用于在多个备选项中选中单个状态。">
|
|
1033
|
-
#### API
|
|
1107
|
+
<DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。">
|
|
1108
|
+
## API
|
|
1034
1109
|
|
|
1035
1110
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1036
1111
|
|--------|--------|--------|--------|
|
|
1037
|
-
|
|
|
1038
|
-
| ghost | 按钮背景色类型 | boolean | true |
|
|
1039
|
-
| gap | 间距 | number | 12 px |
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
<AntdApiRef url="https://ant.design/components/radio-cn/#api"></AntdApiRef>
|
|
1043
|
-
|
|
1044
|
-
|
|
1045
|
-
## antd API
|
|
1046
|
-
|
|
1047
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1112
|
+
| texture | 是否显示纹理 | boolean | false |
|
|
1048
1113
|
|
|
1049
|
-
### Radio/Radio.Button
|
|
1050
1114
|
|
|
1051
|
-
<!-- prettier-ignore -->
|
|
1052
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
1053
|
-
|--------|--------|--------|--------|
|
|
1054
|
-
| autoFocus | 自动获取焦点 | boolean | false |
|
|
1055
|
-
| checked | 指定当前是否选中 | boolean | false |
|
|
1056
|
-
| defaultChecked | 初始是否选中 | boolean | false |
|
|
1057
|
-
| disabled | 禁用 Radio | boolean | false |
|
|
1058
|
-
| value | 根据 value 进行比较，判断是否选中 | any | - |
|
|
1059
1115
|
|
|
1060
1116
|
|
|
1061
|
-
### Radio.Group
|
|
1062
1117
|
|
|
1063
|
-
单选框组合，用于包裹一组 `Radio`。
|
|
1064
1118
|
|
|
1065
|
-
|
|
1066
|
-
|
|
1067
|
-
|--------|--------|--------|--------|--------|
|
|
1068
|
-
| buttonStyle | RadioButton 的风格样式，目前有描边和填色两种风格 | outline | outline | | |
|
|
1069
|
-
| defaultValue | 默认选中的值 | any | - | | |
|
|
1070
|
-
| disabled | 禁选所有子单选器 | boolean | false | | |
|
|
1071
|
-
| name | RadioGroup 下所有 | string | - | | |
|
|
1072
|
-
| options | 以配置形式设置子元素 | string[] \| number[] \| Array< | - | | |
|
|
1073
|
-
| optionType | 用于设置 Radio | default | default | 4.4.0 | |
|
|
1074
|
-
| size | 大小，只对按钮样式生效 | large | - | | |
|
|
1075
|
-
| value | 用于设置当前选中的值 | any | - | | |
|
|
1076
|
-
| block | 将 RadioGroup 宽度调整为其父宽度的选项 | boolean | false | 5.21.0 | |
|
|
1077
|
-
| onChange | 选项变化时的回调函数 | function(e:Event) | - | | |
|
|
1119
|
+
<DemoTitle title="Progress" desc="用于指示任务的完成进度">
|
|
1120
|
+
## antd API
|
|
1078
1121
|
|
|
1122
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1079
1123
|
|
|
1080
|
-
|
|
1124
|
+
各类型共用的属性。
|
|
1081
1125
|
|
|
1082
1126
|
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1083
1127
|
|--------|--------|--------|--------|--------|
|
|
1084
|
-
|
|
|
1085
|
-
|
|
|
1086
|
-
|
|
|
1087
|
-
|
|
|
1088
|
-
|
|
|
1089
|
-
|
|
|
1090
|
-
|
|
|
1091
|
-
|
|
|
1092
|
-
|
|
|
1128
|
+
| format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent + | - |
|
|
1129
|
+
| percent | 百分比 | number | 0 | - |
|
|
1130
|
+
| showInfo | 是否显示进度数值或状态图标 | boolean | true | - |
|
|
1131
|
+
| status | 状态，可选： | string | - | - |
|
|
1132
|
+
| strokeColor | 进度条的色彩 | string | - | - |
|
|
1133
|
+
| strokeLinecap | 进度条的样式 | round | round | - |
|
|
1134
|
+
| success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - | - |
|
|
1135
|
+
| trailColor | 未完成的分段的颜色 | string | - | - |
|
|
1136
|
+
| type | 类型，可选 | string | line | - |
|
|
1137
|
+
| size | 进度条的尺寸 | number \| [number \| string, number] \| { width: number, height: number } \| "small" \| "default" | "default" | 5.3.0, Object: 5.18.0 |
|
|
1093
1138
|
|
|
1094
1139
|
|
|
1095
|
-
|
|
1140
|
+
### `type="line"`
|
|
1096
1141
|
|
|
1097
|
-
|
|
1142
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1143
|
+
|--------|--------|--------|--------|--------|
|
|
1144
|
+
| steps | 进度条总共步数 | number | - | - |
|
|
1145
|
+
| rounding | 用于四舍五入数值的函数 | (step: number) => number | Math.round | 5.24.0 |
|
|
1146
|
+
| strokeColor | 进度条的色彩，传入 object 时为渐变。当有 | string \| string[] \| { from: string; to: string; direction: string } | - | 4.21.0: |
|
|
1147
|
+
| percentPosition | 进度数值位置，传入对象， | { align: string; type: string } | { align: "end", type: "outer" } | 5.18.0 |
|
|
1098
1148
|
|
|
1099
|
-
| 名称 | 描述 |
|
|
1100
|
-
|--------|--------|
|
|
1101
|
-
| blur() | 移除焦点 |
|
|
1102
|
-
| focus() | 获取焦点 |
|
|
1103
1149
|
|
|
1150
|
+
### `type="circle"`
|
|
1104
1151
|
|
|
1152
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1153
|
+
|--------|--------|--------|--------|--------|
|
|
1154
|
+
| steps | 进度条总共步数，传入 object 时，count 指步数，gap 指间隔大小。传 number 类型时，gap 默认为 2。 | number \| { count: number, gap: number } | - | 5.16.0 |
|
|
1155
|
+
| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| { number%: string } | - | - |
|
|
1156
|
+
| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |
|
|
1105
1157
|
|
|
1106
1158
|
|
|
1107
|
-
|
|
1108
|
-
#### API
|
|
1159
|
+
### `type="dashboard"`
|
|
1109
1160
|
|
|
1110
|
-
|
|
|
1111
|
-
|
|
1112
|
-
|
|
|
1113
|
-
|
|
|
1114
|
-
|
|
|
1115
|
-
|
|
|
1116
|
-
| variables | 可以插入的变量列表 | Array | |
|
|
1117
|
-
| onCreate | 新增变量的触发回调 | () => void | |
|
|
1118
|
-
| createBtnText | 新增变量的按钮文本 | string | |
|
|
1119
|
-
| tipsText | 提示文本，传入 false 时隐藏提示 | string \| React.ReactNode \| false | |
|
|
1161
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1162
|
+
|--------|--------|--------|--------|--------|
|
|
1163
|
+
| steps | 进度条总共步数，传入 object 时，count 指步数，gap 指间隔大小。传 number 类型时，gap 默认为 2。 | number \| { count: number, gap: number } | - | 5.16.0 |
|
|
1164
|
+
| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 295 | number | 75 | - |
|
|
1165
|
+
| gapPosition | 仪表盘进度条缺口位置 | top | bottom | - |
|
|
1166
|
+
| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |
|
|
1120
1167
|
|
|
1121
1168
|
|
|
1122
1169
|
|
|
@@ -1189,74 +1236,76 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1189
1236
|
|
|
1190
1237
|
|
|
1191
1238
|
|
|
1192
|
-
<DemoTitle title="
|
|
1193
|
-
|
|
1239
|
+
<DemoTitle title="MdEditor" desc="提示词编辑器，可以高亮 Markdown 的语法，支持自定义槽位变量的插入">
|
|
1240
|
+
#### API
|
|
1194
1241
|
|
|
1195
1242
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1196
1243
|
|--------|--------|--------|--------|
|
|
1197
|
-
|
|
|
1244
|
+
| maxLength | 可以输入内容的最大长度 | number | |
|
|
1245
|
+
| value | 输入的内容 | string | (必填) |
|
|
1246
|
+
| className | 输入内容的类名 | string | |
|
|
1247
|
+
| onChange | 输入内容的回调 | (value: string) => void | |
|
|
1248
|
+
| variables | 可以插入的变量列表 | Array | |
|
|
1249
|
+
| onCreate | 新增变量的触发回调 | () => void | |
|
|
1250
|
+
| createBtnText | 新增变量的按钮文本 | string | |
|
|
1251
|
+
| tipsText | 提示文本，传入 false 时隐藏提示 | string \| React.ReactNode \| false | |
|
|
1198
1252
|
|
|
1199
1253
|
|
|
1200
1254
|
|
|
1201
1255
|
|
|
1256
|
+
<DemoTitle title="Popover" desc="点击/鼠标移入元素，弹出气泡式的卡片浮层">
|
|
1257
|
+
#### API
|
|
1258
|
+
|
|
1259
|
+
<AntdApiRef url="https://ant.design/components/popover-cn/#api"></AntdApiRef>
|
|
1202
1260
|
|
|
1203
1261
|
|
|
1204
|
-
<DemoTitle title="Progress" desc="用于指示任务的完成进度">
|
|
1205
1262
|
## antd API
|
|
1206
1263
|
|
|
1207
1264
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1208
1265
|
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1212
|
-
|--------|--------|--------|--------|--------|
|
|
1213
|
-
| format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent + | - |
|
|
1214
|
-
| percent | 百分比 | number | 0 | - |
|
|
1215
|
-
| showInfo | 是否显示进度数值或状态图标 | boolean | true | - |
|
|
1216
|
-
| status | 状态，可选： | string | - | - |
|
|
1217
|
-
| strokeColor | 进度条的色彩 | string | - | - |
|
|
1218
|
-
| strokeLinecap | 进度条的样式 | round | round | - |
|
|
1219
|
-
| success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - | - |
|
|
1220
|
-
| trailColor | 未完成的分段的颜色 | string | - | - |
|
|
1221
|
-
| type | 类型，可选 | string | line | - |
|
|
1222
|
-
| size | 进度条的尺寸 | number \| [number \| string, number] \| { width: number, height: number } \| "small" \| "default" | "default" | 5.3.0, Object: 5.18.0 |
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
### `type="line"`
|
|
1226
|
-
|
|
1227
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1266
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1228
1267
|
|--------|--------|--------|--------|--------|
|
|
1229
|
-
|
|
|
1230
|
-
|
|
|
1231
|
-
| strokeColor | 进度条的色彩，传入 object 时为渐变。当有 | string \| string[] \| { from: string; to: string; direction: string } | - | 4.21.0: |
|
|
1232
|
-
| percentPosition | 进度数值位置，传入对象， | { align: string; type: string } | { align: "end", type: "outer" } | 5.18.0 |
|
|
1268
|
+
| content | 卡片内容 | ReactNode \| () => ReactNode | - | |
|
|
1269
|
+
| title | 卡片标题 | ReactNode \| () => ReactNode | - | |
|
|
1233
1270
|
|
|
1234
1271
|
|
|
1235
|
-
|
|
1272
|
+
<!-- 共同的 API -->
|
|
1273
|
+
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
1236
1274
|
|
|
1237
|
-
|
|
1275
|
+
<!-- prettier-ignore -->
|
|
1276
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1238
1277
|
|--------|--------|--------|--------|--------|
|
|
1239
|
-
|
|
|
1240
|
-
|
|
|
1241
|
-
|
|
|
1278
|
+
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
1279
|
+
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
1280
|
+
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
1281
|
+
| color | 背景颜色 | string | - | 4.3.0 |
|
|
1282
|
+
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
1283
|
+
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
1284
|
+
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
1285
|
+
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
1286
|
+
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
1287
|
+
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
1288
|
+
| placement | 气泡框位置，可选 | string | top | |
|
|
1289
|
+
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
1290
|
+
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
1291
|
+
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
1292
|
+
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
1242
1293
|
|
|
1294
|
+
## 注意
|
|
1243
1295
|
|
|
1244
|
-
|
|
1296
|
+
请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
|
|
1245
1297
|
|
|
1246
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1247
|
-
|--------|--------|--------|--------|--------|
|
|
1248
|
-
| steps | 进度条总共步数，传入 object 时，count 指步数，gap 指间隔大小。传 number 类型时，gap 默认为 2。 | number \| { count: number, gap: number } | - | 5.16.0 |
|
|
1249
|
-
| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 295 | number | 75 | - |
|
|
1250
|
-
| gapPosition | 仪表盘进度条缺口位置 | top | bottom | - |
|
|
1251
|
-
| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |
|
|
1252
1298
|
|
|
1253
1299
|
|
|
1300
|
+
<DemoTitle title="Popconfirm" desc="点击元素，弹出气泡式的确认框。">
|
|
1301
|
+
#### API
|
|
1254
1302
|
|
|
1303
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1304
|
+
|--------|--------|--------|--------|
|
|
1305
|
+
| type | 类型 | 'info' \| 'warning' \| 'error' \| 'success' \| 'confirm' | 'confirm' |
|
|
1255
1306
|
|
|
1256
|
-
<DemoTitle title="Popover" desc="点击/鼠标移入元素，弹出气泡式的卡片浮层">
|
|
1257
|
-
#### API
|
|
1258
1307
|
|
|
1259
|
-
<AntdApiRef url="https://ant.design/components/
|
|
1308
|
+
<AntdApiRef url="https://ant.design/components/popconfirm-cn/#api"></AntdApiRef>
|
|
1260
1309
|
|
|
1261
1310
|
|
|
1262
1311
|
## antd API
|
|
@@ -1265,8 +1314,19 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1265
1314
|
|
|
1266
1315
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1267
1316
|
|--------|--------|--------|--------|--------|
|
|
1268
|
-
|
|
|
1269
|
-
|
|
|
1317
|
+
| cancelButtonProps | cancel 按钮 props | | - | |
|
|
1318
|
+
| cancelText | 取消按钮文字 | string | 取消 | |
|
|
1319
|
+
| disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false | |
|
|
1320
|
+
| icon | 自定义弹出气泡 Icon 图标 | ReactNode | | |
|
|
1321
|
+
| okButtonProps | ok 按钮 props | | - | |
|
|
1322
|
+
| okText | 确认按钮文字 | string | 确定 | |
|
|
1323
|
+
| okType | 确认按钮类型 | string | primary | |
|
|
1324
|
+
| showCancel | 是否显示取消按钮 | boolean | true | 4.18.0 |
|
|
1325
|
+
| title | 确认框标题 | ReactNode \| () => ReactNode | - | |
|
|
1326
|
+
| description | 确认内容的详细描述 | ReactNode \| () => ReactNode | - | 5.1.0 |
|
|
1327
|
+
| onCancel | 点击取消的回调 | function(e) | - | |
|
|
1328
|
+
| onConfirm | 点击确认的回调 | function(e) | - | |
|
|
1329
|
+
| onPopupClick | 弹出气泡点击事件 | function(e) | - | 5.5.0 |
|
|
1270
1330
|
|
|
1271
1331
|
|
|
1272
1332
|
<!-- 共同的 API -->
|
|
@@ -1291,9 +1351,6 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1291
1351
|
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
1292
1352
|
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
1293
1353
|
|
|
1294
|
-
## 注意
|
|
1295
|
-
|
|
1296
|
-
请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
|
|
1297
1354
|
|
|
1298
1355
|
|
|
1299
1356
|
|
|
@@ -1344,6 +1401,102 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1344
1401
|
|
|
1345
1402
|
|
|
1346
1403
|
|
|
1404
|
+
<DemoTitle title="Notification" desc="用于指示任务的完成进度">
|
|
1405
|
+
#### API
|
|
1406
|
+
|
|
1407
|
+
<AntdApiRef url="https://ant.design/components/notification-cn/#api"></AntdApiRef>
|
|
1408
|
+
|
|
1409
|
+
|
|
1410
|
+
## antd API
|
|
1411
|
+
|
|
1412
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1413
|
+
|
|
1414
|
+
|
|
1415
|
+
- `notification.success(config)`
|
|
1416
|
+
- `notification.error(config)`
|
|
1417
|
+
- `notification.info(config)`
|
|
1418
|
+
- `notification.warning(config)`
|
|
1419
|
+
- `notification.open(config)`
|
|
1420
|
+
- `notification.destroy(key?: String)`
|
|
1421
|
+
|
|
1422
|
+
config 参数如下：
|
|
1423
|
+
|
|
1424
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1425
|
+
|--------|--------|--------|--------|--------|
|
|
1426
|
+
| actions | 自定义按钮组 | ReactNode | - | 5.24.0 |
|
|
1427
|
+
| className | 自定义 CSS class | string | - | - |
|
|
1428
|
+
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1429
|
+
| description | 通知提醒内容，必选 | ReactNode | - | - |
|
|
1430
|
+
| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 | - |
|
|
1431
|
+
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1432
|
+
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1433
|
+
| icon | 自定义图标 | ReactNode | - | - |
|
|
1434
|
+
| key | 当前通知唯一标志 | string | - | - |
|
|
1435
|
+
| message | 通知提醒标题，必选 | ReactNode | - | - |
|
|
1436
|
+
| placement | 弹出位置，可选 | string | topRight | - |
|
|
1437
|
+
| style | 自定义内联样式 | | - | - |
|
|
1438
|
+
| role | 供屏幕阅读器识别的通知内容语义，默认为 | alert \| status | alert | 5.6.0 |
|
|
1439
|
+
| onClick | 点击通知时触发的回调函数 | function | - | - |
|
|
1440
|
+
| onClose | 当通知关闭时触发 | function | - | - |
|
|
1441
|
+
| props | 透传至通知 | Object | - | - |
|
|
1442
|
+
|
|
1443
|
+
|
|
1444
|
+
|
|
1445
|
+
- `notification.useNotification(config)`
|
|
1446
|
+
|
|
1447
|
+
config 参数如下：
|
|
1448
|
+
|
|
1449
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1450
|
+
|--------|--------|--------|--------|--------|
|
|
1451
|
+
| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 | |
|
|
1452
|
+
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1453
|
+
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body | |
|
|
1454
|
+
| placement | 弹出位置，可选 | string | topRight | |
|
|
1455
|
+
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1456
|
+
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1457
|
+
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1458
|
+
| stack | 堆叠模式，超过阈值时会将所有消息收起 | boolean \| | { threshold: 3 } | 5.10.0 |
|
|
1459
|
+
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | |
|
|
1460
|
+
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
|
|
1461
|
+
|
|
1462
|
+
|
|
1463
|
+
### 全局配置
|
|
1464
|
+
|
|
1465
|
+
还提供了一个全局配置方法，在调用前提前配置，全局一次生效。
|
|
1466
|
+
|
|
1467
|
+
`notification.config(options)`
|
|
1468
|
+
|
|
1469
|
+
当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)当你想单独使用，可通过如下设置开启 RTL 模式。
|
|
1470
|
+
|
|
1471
|
+
|
|
1472
|
+
```js
|
|
1473
|
+
notification.config({
|
|
1474
|
+
placement: 'bottomRight',
|
|
1475
|
+
bottom: 50,
|
|
1476
|
+
duration: 3,
|
|
1477
|
+
rtl: true,
|
|
1478
|
+
});
|
|
1479
|
+
```
|
|
1480
|
+
|
|
1481
|
+
|
|
1482
|
+
#### notification.config
|
|
1483
|
+
|
|
1484
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1485
|
+
|--------|--------|--------|--------|--------|
|
|
1486
|
+
| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 | |
|
|
1487
|
+
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1488
|
+
| duration | 默认自动关闭延时，单位秒 | number | 4.5 | |
|
|
1489
|
+
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1490
|
+
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1491
|
+
| getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLNode | () => document.body | |
|
|
1492
|
+
| placement | 弹出位置，可选 | string | topRight | |
|
|
1493
|
+
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1494
|
+
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | |
|
|
1495
|
+
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
|
|
1496
|
+
|
|
1497
|
+
|
|
1498
|
+
|
|
1499
|
+
|
|
1347
1500
|
<DemoTitle title="Modal" desc="用于叠加当前页面上的对话框窗口，提供标题、内容区、操作区。">
|
|
1348
1501
|
#### API
|
|
1349
1502
|
|
|
@@ -1614,159 +1767,6 @@ message.config({
|
|
|
1614
1767
|
|
|
1615
1768
|
|
|
1616
1769
|
|
|
1617
|
-
<DemoTitle title="Popconfirm" desc="点击元素，弹出气泡式的确认框。">
|
|
1618
|
-
#### API
|
|
1619
|
-
|
|
1620
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1621
|
-
|--------|--------|--------|--------|
|
|
1622
|
-
| type | 类型 | 'info' \| 'warning' \| 'error' \| 'success' \| 'confirm' | 'confirm' |
|
|
1623
|
-
|
|
1624
|
-
|
|
1625
|
-
<AntdApiRef url="https://ant.design/components/popconfirm-cn/#api"></AntdApiRef>
|
|
1626
|
-
|
|
1627
|
-
|
|
1628
|
-
## antd API
|
|
1629
|
-
|
|
1630
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1631
|
-
|
|
1632
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1633
|
-
|--------|--------|--------|--------|--------|
|
|
1634
|
-
| cancelButtonProps | cancel 按钮 props | | - | |
|
|
1635
|
-
| cancelText | 取消按钮文字 | string | 取消 | |
|
|
1636
|
-
| disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false | |
|
|
1637
|
-
| icon | 自定义弹出气泡 Icon 图标 | ReactNode | | |
|
|
1638
|
-
| okButtonProps | ok 按钮 props | | - | |
|
|
1639
|
-
| okText | 确认按钮文字 | string | 确定 | |
|
|
1640
|
-
| okType | 确认按钮类型 | string | primary | |
|
|
1641
|
-
| showCancel | 是否显示取消按钮 | boolean | true | 4.18.0 |
|
|
1642
|
-
| title | 确认框标题 | ReactNode \| () => ReactNode | - | |
|
|
1643
|
-
| description | 确认内容的详细描述 | ReactNode \| () => ReactNode | - | 5.1.0 |
|
|
1644
|
-
| onCancel | 点击取消的回调 | function(e) | - | |
|
|
1645
|
-
| onConfirm | 点击确认的回调 | function(e) | - | |
|
|
1646
|
-
| onPopupClick | 弹出气泡点击事件 | function(e) | - | 5.5.0 |
|
|
1647
|
-
|
|
1648
|
-
|
|
1649
|
-
<!-- 共同的 API -->
|
|
1650
|
-
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
1651
|
-
|
|
1652
|
-
<!-- prettier-ignore -->
|
|
1653
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1654
|
-
|--------|--------|--------|--------|--------|
|
|
1655
|
-
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
1656
|
-
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
1657
|
-
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
1658
|
-
| color | 背景颜色 | string | - | 4.3.0 |
|
|
1659
|
-
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
1660
|
-
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
1661
|
-
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
1662
|
-
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
1663
|
-
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
1664
|
-
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
1665
|
-
| placement | 气泡框位置，可选 | string | top | |
|
|
1666
|
-
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
1667
|
-
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
1668
|
-
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
1669
|
-
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
1670
|
-
|
|
1671
|
-
|
|
1672
|
-
|
|
1673
|
-
|
|
1674
|
-
<DemoTitle title="Notification" desc="用于指示任务的完成进度">
|
|
1675
|
-
#### API
|
|
1676
|
-
|
|
1677
|
-
<AntdApiRef url="https://ant.design/components/notification-cn/#api"></AntdApiRef>
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
## antd API
|
|
1681
|
-
|
|
1682
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1683
|
-
|
|
1684
|
-
|
|
1685
|
-
- `notification.success(config)`
|
|
1686
|
-
- `notification.error(config)`
|
|
1687
|
-
- `notification.info(config)`
|
|
1688
|
-
- `notification.warning(config)`
|
|
1689
|
-
- `notification.open(config)`
|
|
1690
|
-
- `notification.destroy(key?: String)`
|
|
1691
|
-
|
|
1692
|
-
config 参数如下：
|
|
1693
|
-
|
|
1694
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1695
|
-
|--------|--------|--------|--------|--------|
|
|
1696
|
-
| actions | 自定义按钮组 | ReactNode | - | 5.24.0 |
|
|
1697
|
-
| className | 自定义 CSS class | string | - | - |
|
|
1698
|
-
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1699
|
-
| description | 通知提醒内容，必选 | ReactNode | - | - |
|
|
1700
|
-
| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 | - |
|
|
1701
|
-
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1702
|
-
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1703
|
-
| icon | 自定义图标 | ReactNode | - | - |
|
|
1704
|
-
| key | 当前通知唯一标志 | string | - | - |
|
|
1705
|
-
| message | 通知提醒标题，必选 | ReactNode | - | - |
|
|
1706
|
-
| placement | 弹出位置，可选 | string | topRight | - |
|
|
1707
|
-
| style | 自定义内联样式 | | - | - |
|
|
1708
|
-
| role | 供屏幕阅读器识别的通知内容语义，默认为 | alert \| status | alert | 5.6.0 |
|
|
1709
|
-
| onClick | 点击通知时触发的回调函数 | function | - | - |
|
|
1710
|
-
| onClose | 当通知关闭时触发 | function | - | - |
|
|
1711
|
-
| props | 透传至通知 | Object | - | - |
|
|
1712
|
-
|
|
1713
|
-
|
|
1714
|
-
|
|
1715
|
-
- `notification.useNotification(config)`
|
|
1716
|
-
|
|
1717
|
-
config 参数如下：
|
|
1718
|
-
|
|
1719
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1720
|
-
|--------|--------|--------|--------|--------|
|
|
1721
|
-
| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 | |
|
|
1722
|
-
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1723
|
-
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body | |
|
|
1724
|
-
| placement | 弹出位置，可选 | string | topRight | |
|
|
1725
|
-
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1726
|
-
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1727
|
-
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1728
|
-
| stack | 堆叠模式，超过阈值时会将所有消息收起 | boolean \| | { threshold: 3 } | 5.10.0 |
|
|
1729
|
-
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | |
|
|
1730
|
-
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
|
|
1731
|
-
|
|
1732
|
-
|
|
1733
|
-
### 全局配置
|
|
1734
|
-
|
|
1735
|
-
还提供了一个全局配置方法，在调用前提前配置，全局一次生效。
|
|
1736
|
-
|
|
1737
|
-
`notification.config(options)`
|
|
1738
|
-
|
|
1739
|
-
当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)当你想单独使用，可通过如下设置开启 RTL 模式。
|
|
1740
|
-
|
|
1741
|
-
|
|
1742
|
-
```js
|
|
1743
|
-
notification.config({
|
|
1744
|
-
placement: 'bottomRight',
|
|
1745
|
-
bottom: 50,
|
|
1746
|
-
duration: 3,
|
|
1747
|
-
rtl: true,
|
|
1748
|
-
});
|
|
1749
|
-
```
|
|
1750
|
-
|
|
1751
|
-
|
|
1752
|
-
#### notification.config
|
|
1753
|
-
|
|
1754
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1755
|
-
|--------|--------|--------|--------|--------|
|
|
1756
|
-
| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 | |
|
|
1757
|
-
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1758
|
-
| duration | 默认自动关闭延时，单位秒 | number | 4.5 | |
|
|
1759
|
-
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1760
|
-
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1761
|
-
| getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLNode | () => document.body | |
|
|
1762
|
-
| placement | 弹出位置，可选 | string | topRight | |
|
|
1763
|
-
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1764
|
-
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | |
|
|
1765
|
-
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
1770
|
<DemoTitle title="InputNumber" desc="通过鼠标或键盘，输入范围内的数值。">
|
|
1771
1771
|
#### API
|
|
1772
1772
|
|
|
@@ -2731,135 +2731,53 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
|
|
|
2731
2731
|
<DemoTitle title="FloatButton" desc="用于网站上的全局功能；无论浏览到何处都可以看见的按钮。">
|
|
2732
2732
|
#### API
|
|
2733
2733
|
|
|
2734
|
-
<AntdApiRef url="https://ant.design/components/float-button-cn/#api"></AntdApiRef>
|
|
2735
|
-
|
|
2736
|
-
|
|
2737
|
-
## antd API
|
|
2738
|
-
|
|
2739
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2740
|
-
|
|
2741
|
-
自 `antd@5.0.0` 版本开始提供该组件。
|
|
2742
|
-
|
|
2743
|
-
### 共同的 API
|
|
2744
|
-
|
|
2745
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2746
|
-
|--------|--------|--------|--------|--------|
|
|
2747
|
-
| icon | 自定义图标 | ReactNode | - | |
|
|
2748
|
-
| description | 文字及其它内容 | ReactNode | - | |
|
|
2749
|
-
| tooltip | 气泡卡片的内容 | ReactNode \| | - | TooltipProps: 5.25.0 |
|
|
2750
|
-
| type | 设置按钮类型 | default | default | |
|
|
2751
|
-
| shape | 设置按钮形状 | circle | circle | |
|
|
2752
|
-
| onClick | 点击按钮时的回调 | (event) => void | - | |
|
|
2753
|
-
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2754
|
-
| target | 相当于 a 标签的 target 属性，href 存在时生效 | string | - | |
|
|
2755
|
-
| htmlType | 设置 | submit | button | 5.21.0 |
|
|
2756
|
-
| badge | 带徽标数字的悬浮按钮（不支持 | | - | 5.4.0 |
|
|
2757
|
-
|
|
2758
|
-
|
|
2759
|
-
### FloatButton.Group
|
|
2760
|
-
|
|
2761
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2762
|
-
|--------|--------|--------|--------|--------|
|
|
2763
|
-
| shape | 设置包含的 FloatButton 按钮形状 | circle | circle | |
|
|
2764
|
-
| trigger | 触发方式（有触发方式为菜单模式） | click | - | |
|
|
2765
|
-
| open | 受控展开，需配合 trigger 一起使用 | boolean | - | |
|
|
2766
|
-
| closeIcon | 自定义关闭按钮 | React.ReactNode | | |
|
|
2767
|
-
| placement | 自定义菜单弹出位置 | top | top | 5.21.0 |
|
|
2768
|
-
| onOpenChange | 展开收起时的回调，需配合 trigger 一起使用 | (open: boolean) => void | - | |
|
|
2769
|
-
| onClick | 点击按钮时的回调（仅在菜单模式中有效） | (event) => void | - | 5.3.0 |
|
|
2770
|
-
|
|
2771
|
-
|
|
2772
|
-
### FloatButton.BackTop
|
|
2773
|
-
|
|
2774
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2775
|
-
|--------|--------|--------|--------|--------|
|
|
2776
|
-
| duration | 回到顶部所需时间（ms） | number | 450 | |
|
|
2777
|
-
| target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window | |
|
|
2778
|
-
| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |
|
|
2779
|
-
| onClick | 点击按钮的回调函数 | () => void | - | |
|
|
2780
|
-
|
|
2781
|
-
|
|
2782
|
-
|
|
2783
|
-
|
|
2784
|
-
<DemoTitle title="Empty" desc="用于空状态的占位图形展示。">
|
|
2785
|
-
## API
|
|
2786
|
-
|
|
2787
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2788
|
-
|--------|--------|--------|--------|
|
|
2789
|
-
| type | 空状态类型 | \| 'noData'
|
|
2790
|
-
\| 'networkError'
|
|
2791
|
-
\| '404'
|
|
2792
|
-
\| 'arrears'
|
|
2793
|
-
\| 'desktopOnly'
|
|
2794
|
-
\| 'noAudio'
|
|
2795
|
-
\| 'noImage'
|
|
2796
|
-
\| 'noVideo'
|
|
2797
|
-
\| 'noAccess'
|
|
2798
|
-
\| 'error'
|
|
2799
|
-
\| 'noChat'
|
|
2800
|
-
\| 'noModel'
|
|
2801
|
-
\| 'noApp'
|
|
2802
|
-
\| 'success'
|
|
2803
|
-
\| 'failed'
|
|
2804
|
-
\| 'inProgress'
|
|
2805
|
-
\| 'stayTuned' | 'noData' |
|
|
2806
|
-
| texture | 是否显示纹理 | boolean | true |
|
|
2807
|
-
| image | 图片地址 | string | 默认是no data的图片 |
|
|
2808
|
-
| imageStyle | 图片样式 | React.CSSProperties | |
|
|
2809
|
-
| title | 标题内容 | React.ReactNode | |
|
|
2810
|
-
| description | 自定义描述内容 | React.ReactNode | |
|
|
2811
|
-
| onOk | ok按钮的点击事件 | (e: React.MouseEvent) => void | |
|
|
2812
|
-
| okText | ok按钮的文本 | React.ReactNode | |
|
|
2813
|
-
| okType | ok按钮的类型 | SparkButtonProps['type'] | 'primary' |
|
|
2814
|
-
| okButtonProps | ok按钮的props | SparkButtonProps | |
|
|
2815
|
-
| children | 自定义空状态的内容 | React.ReactNode | |
|
|
2816
|
-
| className | 自定义空状态的类名 | string | |
|
|
2817
|
-
| style | 自定义空状态的样式 | React.CSSProperties | |
|
|
2818
|
-
| size | 自定义空状态的大小 | React.CSSProperties['width'] | |
|
|
2819
|
-
| autoFit | 是否自适应容器宽度，当容器宽度小于 size 时自动缩放 | boolean | false |
|
|
2820
|
-
|
|
2821
|
-
|
|
2822
|
-
<AntdApiRef url="https://ant.design/components/empty-cn/#api"></AntdApiRef>
|
|
2823
|
-
|
|
2824
|
-
|
|
2825
|
-
|
|
2826
|
-
|
|
2827
|
-
|
|
2828
|
-
<DemoTitle title="Descriptions" desc="展示多个只读字段的组合">
|
|
2829
|
-
#### API
|
|
2830
|
-
|
|
2831
|
-
<AntdApiRef url="https://ant.design/components/descriptions-cn/#api"></AntdApiRef>
|
|
2734
|
+
<AntdApiRef url="https://ant.design/components/float-button-cn/#api"></AntdApiRef>
|
|
2832
2735
|
|
|
2833
2736
|
|
|
2834
2737
|
## antd API
|
|
2835
2738
|
|
|
2836
2739
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2837
2740
|
|
|
2838
|
-
|
|
2741
|
+
自 `antd@5.0.0` 版本开始提供该组件。
|
|
2742
|
+
|
|
2743
|
+
### 共同的 API
|
|
2839
2744
|
|
|
2840
2745
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2841
2746
|
|--------|--------|--------|--------|--------|
|
|
2842
|
-
|
|
|
2843
|
-
|
|
|
2844
|
-
|
|
|
2845
|
-
|
|
|
2846
|
-
|
|
|
2847
|
-
|
|
|
2848
|
-
|
|
|
2849
|
-
|
|
|
2850
|
-
|
|
|
2851
|
-
|
|
|
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 |
|
|
2852
2757
|
|
|
2853
2758
|
|
|
2854
|
-
###
|
|
2759
|
+
### FloatButton.Group
|
|
2855
2760
|
|
|
2856
2761
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2857
2762
|
|--------|--------|--------|--------|--------|
|
|
2858
|
-
|
|
|
2859
|
-
|
|
|
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 |
|
|
2860
2770
|
|
|
2861
2771
|
|
|
2862
|
-
|
|
2772
|
+
### FloatButton.BackTop
|
|
2773
|
+
|
|
2774
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2775
|
+
|--------|--------|--------|--------|--------|
|
|
2776
|
+
| duration | 回到顶部所需时间（ms） | number | 450 | |
|
|
2777
|
+
| target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window | |
|
|
2778
|
+
| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |
|
|
2779
|
+
| onClick | 点击按钮的回调函数 | () => void | - | |
|
|
2780
|
+
|
|
2863
2781
|
|
|
2864
2782
|
|
|
2865
2783
|
|
|
@@ -3014,6 +2932,118 @@ const dividerItem = {
|
|
|
3014
2932
|
|
|
3015
2933
|
|
|
3016
2934
|
|
|
2935
|
+
<DemoTitle title="Empty" desc="用于空状态的占位图形展示。">
|
|
2936
|
+
## API
|
|
2937
|
+
|
|
2938
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2939
|
+
|--------|--------|--------|--------|
|
|
2940
|
+
| type | 空状态类型 | \| 'noData'
|
|
2941
|
+
\| 'networkError'
|
|
2942
|
+
\| '404'
|
|
2943
|
+
\| 'arrears'
|
|
2944
|
+
\| 'desktopOnly'
|
|
2945
|
+
\| 'noAudio'
|
|
2946
|
+
\| 'noImage'
|
|
2947
|
+
\| 'noVideo'
|
|
2948
|
+
\| 'noAccess'
|
|
2949
|
+
\| 'error'
|
|
2950
|
+
\| 'noChat'
|
|
2951
|
+
\| 'noModel'
|
|
2952
|
+
\| 'noApp'
|
|
2953
|
+
\| 'success'
|
|
2954
|
+
\| 'failed'
|
|
2955
|
+
\| 'inProgress'
|
|
2956
|
+
\| 'stayTuned' | 'noData' |
|
|
2957
|
+
| texture | 是否显示纹理 | boolean | true |
|
|
2958
|
+
| image | 图片地址 | string | 默认是no data的图片 |
|
|
2959
|
+
| imageStyle | 图片样式 | React.CSSProperties | |
|
|
2960
|
+
| title | 标题内容 | React.ReactNode | |
|
|
2961
|
+
| description | 自定义描述内容 | React.ReactNode | |
|
|
2962
|
+
| onOk | ok按钮的点击事件 | (e: React.MouseEvent) => void | |
|
|
2963
|
+
| okText | ok按钮的文本 | React.ReactNode | |
|
|
2964
|
+
| okType | ok按钮的类型 | SparkButtonProps['type'] | 'primary' |
|
|
2965
|
+
| okButtonProps | ok按钮的props | SparkButtonProps | |
|
|
2966
|
+
| children | 自定义空状态的内容 | React.ReactNode | |
|
|
2967
|
+
| className | 自定义空状态的类名 | string | |
|
|
2968
|
+
| style | 自定义空状态的样式 | React.CSSProperties | |
|
|
2969
|
+
| size | 自定义空状态的大小 | React.CSSProperties['width'] | |
|
|
2970
|
+
| autoFit | 是否自适应容器宽度，当容器宽度小于 size 时自动缩放 | boolean | false |
|
|
2971
|
+
|
|
2972
|
+
|
|
2973
|
+
<AntdApiRef url="https://ant.design/components/empty-cn/#api"></AntdApiRef>
|
|
2974
|
+
|
|
2975
|
+
|
|
2976
|
+
|
|
2977
|
+
|
|
2978
|
+
|
|
2979
|
+
<DemoTitle title="Descriptions" desc="展示多个只读字段的组合">
|
|
2980
|
+
#### API
|
|
2981
|
+
|
|
2982
|
+
<AntdApiRef url="https://ant.design/components/descriptions-cn/#api"></AntdApiRef>
|
|
2983
|
+
|
|
2984
|
+
|
|
2985
|
+
## antd API
|
|
2986
|
+
|
|
2987
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2988
|
+
|
|
2989
|
+
### Descriptions
|
|
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 |
|
|
3003
|
+
|
|
3004
|
+
|
|
3005
|
+
### DescriptionItem
|
|
3006
|
+
|
|
3007
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3008
|
+
|--------|--------|--------|--------|--------|
|
|
3009
|
+
| label | 内容的描述 | ReactNode | - | |
|
|
3010
|
+
| span | 包含列的数量（ | number\| | 1 | screens: 5.9.0 |
|
|
3011
|
+
|
|
3012
|
+
|
|
3013
|
+
span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
|
|
3014
|
+
|
|
3015
|
+
|
|
3016
|
+
|
|
3017
|
+
<DemoTitle title="FileIcon" desc="用于展示不同文件类型的图标，也可通过 FileCard 展示文件信息。">
|
|
3018
|
+
#### API
|
|
3019
|
+
|
|
3020
|
+
##### FileIcon Props
|
|
3021
|
+
|
|
3022
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3023
|
+
|--------|--------|--------|--------|
|
|
3024
|
+
| src | | string | |
|
|
3025
|
+
| image | | string | |
|
|
3026
|
+
| type | | string | (必填) |
|
|
3027
|
+
| size | | number | |
|
|
3028
|
+
| style | | React.CSSProperties | |
|
|
3029
|
+
|
|
3030
|
+
|
|
3031
|
+
##### FileCard Props
|
|
3032
|
+
|
|
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 | |
|
|
3043
|
+
|
|
3044
|
+
|
|
3045
|
+
|
|
3046
|
+
|
|
3017
3047
|
<DemoTitle title="DatePicker" desc="输入或选择时间的控件。">
|
|
3018
3048
|
#### API
|
|
3019
3049
|
|
|
@@ -3236,77 +3266,6 @@ export type FormatType =
|
|
|
3236
3266
|
|
|
3237
3267
|
|
|
3238
3268
|
|
|
3239
|
-
<DemoTitle title="CollapsePanel" desc="折叠面板">
|
|
3240
|
-
#### API
|
|
3241
|
-
|
|
3242
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3243
|
-
|--------|--------|--------|--------|
|
|
3244
|
-
| collapsedHeight | 收起状态下显示的内容高度 | number | 0 |
|
|
3245
|
-
| expandedHeight | 展开状态下的内容高度，设置后内容超出时可滚动，不设置则自适应内容高度 | number | 300 |
|
|
3246
|
-
| title | 面板标题 | string \| React.ReactNode | "" |
|
|
3247
|
-
| expandOnPanelClick | 是否允许点击整个面板进行展开 | boolean | false |
|
|
3248
|
-
| extra | 面板右侧内容 | React.ReactNode | |
|
|
3249
|
-
| children | 面板内容 | React.ReactNode | |
|
|
3250
|
-
| defaultExpanded | 是否默认展开 | boolean | false |
|
|
3251
|
-
| classNames | 语义化的classNames | Partial> | |
|
|
3252
|
-
| styles | 语义化的styles | Partial<
|
|
3253
|
-
Record
|
|
3254
|
-
> | |
|
|
3255
|
-
|
|
3256
|
-
|
|
3257
|
-
|
|
3258
|
-
## antd API
|
|
3259
|
-
|
|
3260
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3261
|
-
|
|
3262
|
-
### Collapse
|
|
3263
|
-
|
|
3264
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3265
|
-
|--------|--------|--------|--------|--------|
|
|
3266
|
-
| accordion | 手风琴模式 | boolean | false | |
|
|
3267
|
-
| activeKey | 当前激活 tab 面板的 key | string[] \| string | | |
|
|
3268
|
-
| bordered | 带边框风格的折叠面板 | boolean | true | |
|
|
3269
|
-
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 |
|
|
3270
|
-
| defaultActiveKey | 初始化选中面板的 key | string[] \| string | - | |
|
|
3271
|
-
| destroyOnHidden | 销毁折叠隐藏的面板 | boolean | false | 5.25.0 |
|
|
3272
|
-
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
|
|
3273
|
-
| expandIconPosition | 设置图标位置 | start | - | 4.21.0 |
|
|
3274
|
-
| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
|
|
3275
|
-
| size | 设置折叠面板大小 | large | middle | 5.2.0 |
|
|
3276
|
-
| onChange | 切换面板的回调 | function | - | |
|
|
3277
|
-
| items | 折叠项目内容 | | - | 5.6.0 |
|
|
3278
|
-
|
|
3279
|
-
|
|
3280
|
-
### ItemType
|
|
3281
|
-
|
|
3282
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3283
|
-
|--------|--------|--------|--------|--------|
|
|
3284
|
-
| classNames | 语义化结构 className | | - | 5.21.0 |
|
|
3285
|
-
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | |
|
|
3286
|
-
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3287
|
-
| key | 对应 activeKey | string \| number | - | |
|
|
3288
|
-
| label | 面板标题 | ReactNode | - | - |
|
|
3289
|
-
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3290
|
-
| styles | 语义化结构 style | | - | 5.21.0 |
|
|
3291
|
-
|
|
3292
|
-
|
|
3293
|
-
### Collapse.Panel
|
|
3294
|
-
|
|
3295
|
-
<!-- prettier-ignore -->
|
|
3296
|
-
<Container type="warning" title="已废弃">
|
|
3297
|
-
版本 >= 5.6.0 时请使用 items 方式配置面板。
|
|
3298
|
-
</Container>
|
|
3299
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3300
|
-
|--------|--------|--------|--------|--------|
|
|
3301
|
-
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 (icon: 4.24.0) |
|
|
3302
|
-
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3303
|
-
| header | 面板标题 | ReactNode | - | |
|
|
3304
|
-
| key | 对应 activeKey | string \| number | - | |
|
|
3305
|
-
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3306
|
-
|
|
3307
|
-
|
|
3308
|
-
|
|
3309
|
-
|
|
3310
3269
|
<DemoTitle title="Drawer" desc="从页面一侧滑入的操作面板，用于承载临时界面内容。">
|
|
3311
3270
|
#### API
|
|
3312
3271
|
|
|
@@ -3371,10 +3330,23 @@ v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v
|
|
|
3371
3330
|
|
|
3372
3331
|
|
|
3373
3332
|
|
|
3374
|
-
<DemoTitle title="
|
|
3333
|
+
<DemoTitle title="CollapsePanel" desc="折叠面板">
|
|
3375
3334
|
#### API
|
|
3376
3335
|
|
|
3377
|
-
|
|
3336
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3337
|
+
|--------|--------|--------|--------|
|
|
3338
|
+
| collapsedHeight | 收起状态下显示的内容高度 | number | 0 |
|
|
3339
|
+
| expandedHeight | 展开状态下的内容高度，设置后内容超出时可滚动，不设置则自适应内容高度 | number | 300 |
|
|
3340
|
+
| title | 面板标题 | string \| React.ReactNode | "" |
|
|
3341
|
+
| expandOnPanelClick | 是否允许点击整个面板进行展开 | boolean | false |
|
|
3342
|
+
| extra | 面板右侧内容 | React.ReactNode | |
|
|
3343
|
+
| children | 面板内容 | React.ReactNode | |
|
|
3344
|
+
| defaultExpanded | 是否默认展开 | boolean | false |
|
|
3345
|
+
| classNames | 语义化的classNames | Partial> | |
|
|
3346
|
+
| styles | 语义化的styles | Partial<
|
|
3347
|
+
Record
|
|
3348
|
+
> | |
|
|
3349
|
+
|
|
3378
3350
|
|
|
3379
3351
|
|
|
3380
3352
|
## antd API
|
|
@@ -3414,32 +3386,17 @@ v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v
|
|
|
3414
3386
|
|
|
3415
3387
|
### Collapse.Panel
|
|
3416
3388
|
|
|
3417
|
-
<!-- prettier-ignore -->
|
|
3418
|
-
<Container type="warning" title="已废弃">
|
|
3419
|
-
版本 >= 5.6.0 时请使用 items 方式配置面板。
|
|
3420
|
-
</Container>
|
|
3421
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3422
|
-
|--------|--------|--------|--------|--------|
|
|
3423
|
-
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 (icon: 4.24.0) |
|
|
3424
|
-
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3425
|
-
| header | 面板标题 | ReactNode | - | |
|
|
3426
|
-
| key | 对应 activeKey | string \| number | - | |
|
|
3427
|
-
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3428
|
-
|
|
3429
|
-
|
|
3430
|
-
|
|
3431
|
-
|
|
3432
|
-
<DemoTitle title="CodeBlock" desc="代码块">
|
|
3433
|
-
#### API
|
|
3434
|
-
|
|
3435
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3436
|
-
|--------|--------|--------|--------|
|
|
3437
|
-
| language | 语言 | string \| string[] | (必填) |
|
|
3438
|
-
| value | 值 | string | |
|
|
3439
|
-
| className | 类名 | string | |
|
|
3440
|
-
| theme | 主题 | 'dark' \| 'light' | |
|
|
3441
|
-
| readOnly | 只读 | boolean | |
|
|
3442
|
-
| onChange | | (value?: string) => void | |
|
|
3389
|
+
<!-- prettier-ignore -->
|
|
3390
|
+
<Container type="warning" title="已废弃">
|
|
3391
|
+
版本 >= 5.6.0 时请使用 items 方式配置面板。
|
|
3392
|
+
</Container>
|
|
3393
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3394
|
+
|--------|--------|--------|--------|--------|
|
|
3395
|
+
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 (icon: 4.24.0) |
|
|
3396
|
+
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3397
|
+
| header | 面板标题 | ReactNode | - | |
|
|
3398
|
+
| key | 对应 activeKey | string \| number | - | |
|
|
3399
|
+
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3443
3400
|
|
|
3444
3401
|
|
|
3445
3402
|
|
|
@@ -3515,6 +3472,79 @@ interface Option {
|
|
|
3515
3472
|
|
|
3516
3473
|
|
|
3517
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
|
+
|
|
3490
|
+
<DemoTitle title="Collapse" desc="可以折叠/展开的内容区域">
|
|
3491
|
+
#### API
|
|
3492
|
+
|
|
3493
|
+
<AntdApiRef url="https://ant.design/components/collapse-cn/#api"></AntdApiRef>
|
|
3494
|
+
|
|
3495
|
+
|
|
3496
|
+
## antd API
|
|
3497
|
+
|
|
3498
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3499
|
+
|
|
3500
|
+
### Collapse
|
|
3501
|
+
|
|
3502
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3503
|
+
|--------|--------|--------|--------|--------|
|
|
3504
|
+
| accordion | 手风琴模式 | boolean | false | |
|
|
3505
|
+
| activeKey | 当前激活 tab 面板的 key | string[] \| string | | |
|
|
3506
|
+
| bordered | 带边框风格的折叠面板 | boolean | true | |
|
|
3507
|
+
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 |
|
|
3508
|
+
| defaultActiveKey | 初始化选中面板的 key | string[] \| string | - | |
|
|
3509
|
+
| destroyOnHidden | 销毁折叠隐藏的面板 | boolean | false | 5.25.0 |
|
|
3510
|
+
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
|
|
3511
|
+
| expandIconPosition | 设置图标位置 | start | - | 4.21.0 |
|
|
3512
|
+
| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
|
|
3513
|
+
| size | 设置折叠面板大小 | large | middle | 5.2.0 |
|
|
3514
|
+
| onChange | 切换面板的回调 | function | - | |
|
|
3515
|
+
| items | 折叠项目内容 | | - | 5.6.0 |
|
|
3516
|
+
|
|
3517
|
+
|
|
3518
|
+
### ItemType
|
|
3519
|
+
|
|
3520
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3521
|
+
|--------|--------|--------|--------|--------|
|
|
3522
|
+
| classNames | 语义化结构 className | | - | 5.21.0 |
|
|
3523
|
+
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | |
|
|
3524
|
+
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3525
|
+
| key | 对应 activeKey | string \| number | - | |
|
|
3526
|
+
| label | 面板标题 | ReactNode | - | - |
|
|
3527
|
+
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3528
|
+
| styles | 语义化结构 style | | - | 5.21.0 |
|
|
3529
|
+
|
|
3530
|
+
|
|
3531
|
+
### Collapse.Panel
|
|
3532
|
+
|
|
3533
|
+
<!-- prettier-ignore -->
|
|
3534
|
+
<Container type="warning" title="已废弃">
|
|
3535
|
+
版本 >= 5.6.0 时请使用 items 方式配置面板。
|
|
3536
|
+
</Container>
|
|
3537
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3538
|
+
|--------|--------|--------|--------|--------|
|
|
3539
|
+
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 (icon: 4.24.0) |
|
|
3540
|
+
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3541
|
+
| header | 面板标题 | ReactNode | - | |
|
|
3542
|
+
| key | 对应 activeKey | string \| number | - | |
|
|
3543
|
+
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3544
|
+
|
|
3545
|
+
|
|
3546
|
+
|
|
3547
|
+
|
|
3518
3548
|
<DemoTitle title="Button" desc="按钮用于开始一个即时操作。">
|
|
3519
3549
|
#### API
|
|
3520
3550
|
|
|
@@ -3570,69 +3600,6 @@ type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' |
|
|
|
3570
3600
|
|
|
3571
3601
|
|
|
3572
3602
|
|
|
3573
|
-
<DemoTitle title="Card" desc="通用卡片容器">
|
|
3574
|
-
#### API
|
|
3575
|
-
|
|
3576
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3577
|
-
|--------|--------|--------|--------|
|
|
3578
|
-
| info | 副标题 | ReactNode | |
|
|
3579
|
-
|
|
3580
|
-
<AntdApiRef url="https://ant.design/components/card-cn/#api"></AntdApiRef>
|
|
3581
|
-
|
|
3582
|
-
|
|
3583
|
-
## antd API
|
|
3584
|
-
|
|
3585
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3586
|
-
|
|
3587
|
-
|
|
3588
|
-
```jsx
|
|
3589
|
-
<Card title="卡片标题">卡片内容</Card>
|
|
3590
|
-
```
|
|
3591
|
-
|
|
3592
|
-
|
|
3593
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3594
|
-
|--------|--------|--------|--------|--------|
|
|
3595
|
-
| actions | 卡片操作组，位置在卡片底部 | Array | - | |
|
|
3596
|
-
| activeTabKey | 当前激活页签的 key | string | - | |
|
|
3597
|
-
| variant | 形态变体 | outlined | outlined | 5.24.0 |
|
|
3598
|
-
| cover | 卡片封面 | ReactNode | - | |
|
|
3599
|
-
| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | 第一个页签的 key | |
|
|
3600
|
-
| extra | 卡片右上角的操作区域 | ReactNode | - | |
|
|
3601
|
-
| hoverable | 鼠标移过时可浮起 | boolean | false | |
|
|
3602
|
-
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false | |
|
|
3603
|
-
| size | card 的尺寸 | default | default | |
|
|
3604
|
-
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | |
|
|
3605
|
-
| tabList | 页签标题列表 | | - | |
|
|
3606
|
-
| tabProps | | - | - | |
|
|
3607
|
-
| title | 卡片标题 | ReactNode | - | |
|
|
3608
|
-
| type | 卡片类型，可设置为 | string | - | |
|
|
3609
|
-
| classNames | 配置卡片内置模块的 className | | - | 5.14.0 |
|
|
3610
|
-
| styles | 配置卡片内置模块的 style | | - | 5.14.0 |
|
|
3611
|
-
| onTabChange | 页签切换的回调 | (key) => void | - | |
|
|
3612
|
-
|
|
3613
|
-
|
|
3614
|
-
### Card.Grid
|
|
3615
|
-
|
|
3616
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3617
|
-
|--------|--------|--------|--------|--------|
|
|
3618
|
-
| className | 网格容器类名 | string | - | |
|
|
3619
|
-
| hoverable | 鼠标移过时可浮起 | boolean | true | |
|
|
3620
|
-
| style | 定义网格容器类名的样式 | CSSProperties | - | |
|
|
3621
|
-
|
|
3622
|
-
|
|
3623
|
-
### Card.Meta
|
|
3624
|
-
|
|
3625
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3626
|
-
|--------|--------|--------|--------|--------|
|
|
3627
|
-
| avatar | 头像/图标 | ReactNode | - | |
|
|
3628
|
-
| className | 容器类名 | string | - | |
|
|
3629
|
-
| description | 描述内容 | ReactNode | - | |
|
|
3630
|
-
| style | 定义容器类名的样式 | CSSProperties | - | |
|
|
3631
|
-
| title | 标题内容 | ReactNode | - | |
|
|
3632
|
-
|
|
3633
|
-
|
|
3634
|
-
|
|
3635
|
-
|
|
3636
3603
|
<DemoTitle title="Breadcrumb" desc="显示当前页面在系统层级结构中的位置，并能向上返回。">
|
|
3637
3604
|
#### API
|
|
3638
3605
|
|
|
@@ -3752,11 +3719,65 @@ return <Breadcrumb itemRender={itemRender} items={items} />;
|
|
|
3752
3719
|
|
|
3753
3720
|
|
|
3754
3721
|
|
|
3755
|
-
<DemoTitle title="
|
|
3722
|
+
<DemoTitle title="Card" desc="通用卡片容器">
|
|
3756
3723
|
#### API
|
|
3757
3724
|
|
|
3758
|
-
|
|
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
|
+
|
|
3759
3771
|
|
|
3772
|
+
### Card.Meta
|
|
3773
|
+
|
|
3774
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3775
|
+
|--------|--------|--------|--------|--------|
|
|
3776
|
+
| avatar | 头像/图标 | ReactNode | - | |
|
|
3777
|
+
| className | 容器类名 | string | - | |
|
|
3778
|
+
| description | 描述内容 | ReactNode | - | |
|
|
3779
|
+
| style | 定义容器类名的样式 | CSSProperties | - | |
|
|
3780
|
+
| title | 标题内容 | ReactNode | - | |
|
|
3760
3781
|
|
|
3761
3782
|
|
|
3762
3783
|
|
|
@@ -3800,6 +3821,15 @@ Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fa
|
|
|
3800
3821
|
|
|
3801
3822
|
|
|
3802
3823
|
|
|
3824
|
+
<DemoTitle title="Audio" desc="音频展示">
|
|
3825
|
+
#### API
|
|
3826
|
+
|
|
3827
|
+
ApiParser解析结果为空
|
|
3828
|
+
|
|
3829
|
+
|
|
3830
|
+
|
|
3831
|
+
|
|
3832
|
+
|
|
3803
3833
|
<DemoTitle title="Anchor" desc="用于跳转到页面指定位置。">
|
|
3804
3834
|
#### API
|
|
3805
3835
|
|
|
@@ -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
|
+
查看全部图标
|