@agentscope-ai/design 1.0.26-beta.1767835933900 → 1.0.26-beta.1767839208001
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/antd/styles/button.style.js +3 -1
- package/lib/components/commonComponents/Button/demo/demo1.js +4 -0
- package/lib/components/commonComponents/CodeBlock/index.d.ts +2 -2
- package/lib/components/commonComponents/CodeBlock/index.js +1 -1
- package/lib/components/commonComponents/Tabs/index.js +37 -22
- package/llms/all.llms.txt +916 -915
- package/llms/components/commonComponents/CodeBlock/index.zh-CN.llms.txt +2 -2
- package/llms/components/commonComponents/Empty/index.zh-CN.llms.txt +1 -0
- package/llms/docs/guide/musicLofiGenerator.zh-CN.llms.txt +12 -0
- package/llms/index.llms.txt +21 -21
- package/package.json +1 -1
package/llms/all.llms.txt
CHANGED
|
@@ -1,18 +1,5 @@
|
|
|
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
|
-
|
|
16
3
|
<DemoTitle title="Upload" desc="文件选择上传和拖拽上传控件。">
|
|
17
4
|
#### API
|
|
18
5
|
|
|
@@ -109,6 +96,53 @@
|
|
|
109
96
|
|
|
110
97
|
|
|
111
98
|
|
|
99
|
+
<DemoTitle title="Tooltip" desc="简单的文本提示气泡框">
|
|
100
|
+
#### API
|
|
101
|
+
|
|
102
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
103
|
+
|--------|--------|--------|--------|
|
|
104
|
+
| mode | 颜色模式 | 'dark' \| 'light' | 'dark' |
|
|
105
|
+
| maxHeight | 最大高度 | number \| string | '90vh' |
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
<AntdApiRef url="https://ant.design/components/tooltip-cn/#api"></AntdApiRef>
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
## antd API
|
|
112
|
+
|
|
113
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
114
|
+
|
|
115
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
116
|
+
|--------|--------|--------|--------|
|
|
117
|
+
| title | 提示文字 | ReactNode \| () => ReactNode | - |
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
### 共同的 API
|
|
121
|
+
|
|
122
|
+
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
123
|
+
|
|
124
|
+
<!-- prettier-ignore -->
|
|
125
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
126
|
+
|--------|--------|--------|--------|--------|
|
|
127
|
+
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
128
|
+
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
129
|
+
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
130
|
+
| color | 背景颜色 | string | - | 4.3.0 |
|
|
131
|
+
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
132
|
+
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
133
|
+
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
134
|
+
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
135
|
+
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
136
|
+
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
137
|
+
| placement | 气泡框位置，可选 | string | top | |
|
|
138
|
+
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
139
|
+
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
140
|
+
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
141
|
+
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
|
|
112
146
|
<DemoTitle title="TimePicker" desc="输入或选择时间的控件。">
|
|
113
147
|
#### API
|
|
114
148
|
|
|
@@ -222,88 +256,6 @@ type RangeDisabledTime = (
|
|
|
222
256
|
|
|
223
257
|
|
|
224
258
|
|
|
225
|
-
<DemoTitle title="Tooltip" desc="简单的文本提示气泡框">
|
|
226
|
-
#### API
|
|
227
|
-
|
|
228
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
229
|
-
|--------|--------|--------|--------|
|
|
230
|
-
| mode | 颜色模式 | 'dark' \| 'light' | 'dark' |
|
|
231
|
-
| maxHeight | 最大高度 | number \| string | '90vh' |
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
<AntdApiRef url="https://ant.design/components/tooltip-cn/#api"></AntdApiRef>
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
## antd API
|
|
238
|
-
|
|
239
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
240
|
-
|
|
241
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
242
|
-
|--------|--------|--------|--------|
|
|
243
|
-
| title | 提示文字 | ReactNode \| () => ReactNode | - |
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
### 共同的 API
|
|
247
|
-
|
|
248
|
-
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
249
|
-
|
|
250
|
-
<!-- prettier-ignore -->
|
|
251
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
252
|
-
|--------|--------|--------|--------|--------|
|
|
253
|
-
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
254
|
-
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
255
|
-
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
256
|
-
| color | 背景颜色 | string | - | 4.3.0 |
|
|
257
|
-
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
258
|
-
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
259
|
-
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
260
|
-
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
261
|
-
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
262
|
-
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
263
|
-
| placement | 气泡框位置，可选 | string | top | |
|
|
264
|
-
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
265
|
-
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
266
|
-
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
267
|
-
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
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
259
|
<DemoTitle title="Tabs" desc="用户可以通过点击不同的标签在同一页面中查看不同的内容区域。">
|
|
308
260
|
#### API
|
|
309
261
|
|
|
@@ -374,6 +326,41 @@ type RangeDisabledTime = (
|
|
|
374
326
|
|
|
375
327
|
|
|
376
328
|
|
|
329
|
+
<DemoTitle title="Tag" desc="进行标记和分类的小标签">
|
|
330
|
+
#### API
|
|
331
|
+
|
|
332
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
333
|
+
|--------|--------|--------|--------|
|
|
334
|
+
| size | 尺寸 | 'small' \| 'middle' | 'middle' |
|
|
335
|
+
| color | 标签色 | SparkTagColors \| string | 'purple' |
|
|
336
|
+
|
|
337
|
+
<AntdApiRef url="https://ant.design/components/tag-cn/#api"></AntdApiRef>
|
|
338
|
+
|
|
339
|
+
|
|
340
|
+
## antd API
|
|
341
|
+
|
|
342
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
343
|
+
|
|
344
|
+
### Tag
|
|
345
|
+
|
|
346
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
347
|
+
|--------|--------|--------|--------|--------|
|
|
348
|
+
| closeIcon | 自定义关闭按钮。5.7.0：设置为 | ReactNode | false | 4.4.0 |
|
|
349
|
+
| icon | 设置图标 | ReactNode | - | |
|
|
350
|
+
| bordered | 是否有边框 | boolean | true | 5.4.0 |
|
|
351
|
+
| onClose | 关闭时的回调（可通过 | (e: React.MouseEvent) => void | - | |
|
|
352
|
+
|
|
353
|
+
|
|
354
|
+
### Tag.CheckableTag
|
|
355
|
+
|
|
356
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
357
|
+
|--------|--------|--------|--------|
|
|
358
|
+
| checked | 设置标签的选中状态 | boolean | false |
|
|
359
|
+
| onChange | 点击标签时触发的回调 | (checked) => void | - |
|
|
360
|
+
|
|
361
|
+
|
|
362
|
+
|
|
363
|
+
|
|
377
364
|
<DemoTitle title="Switch" desc="使用开关切换两种状态之间。">
|
|
378
365
|
#### API
|
|
379
366
|
|
|
@@ -415,6 +402,78 @@ type RangeDisabledTime = (
|
|
|
415
402
|
|
|
416
403
|
|
|
417
404
|
|
|
405
|
+
<DemoTitle title="Video" desc="视频展示">
|
|
406
|
+
#### API
|
|
407
|
+
|
|
408
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
409
|
+
|--------|--------|--------|--------|
|
|
410
|
+
| mouseEnterAutoPlay | 鼠标进入时是否自动播放 | boolean | false |
|
|
411
|
+
| children | video内部设置了按钮在暗色背景下的样式，如果有一些操作按钮想继承这个样式可以在这里传入 | React.ReactNode | |
|
|
412
|
+
|
|
413
|
+
|
|
414
|
+
|
|
415
|
+
|
|
416
|
+
|
|
417
|
+
|
|
418
|
+
<DemoTitle title="Steps" desc="引导用户按照流程完成任务的导航条。">
|
|
419
|
+
#### API
|
|
420
|
+
|
|
421
|
+
<AntdApiRef url="https://ant.design/components/steps-cn/#api"></AntdApiRef>
|
|
422
|
+
|
|
423
|
+
|
|
424
|
+
## antd API
|
|
425
|
+
|
|
426
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
427
|
+
|
|
428
|
+
### Steps
|
|
429
|
+
|
|
430
|
+
整体步骤条。
|
|
431
|
+
|
|
432
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
433
|
+
|--------|--------|--------|--------|--------|
|
|
434
|
+
| className | 步骤条类名 | string | - | |
|
|
435
|
+
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 | number | 0 | |
|
|
436
|
+
| direction | 指定步骤条方向。目前支持水平（ | string | horizontal | |
|
|
437
|
+
| initial | 起始序号，从 0 开始记数 | number | 0 | |
|
|
438
|
+
| labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选 | string | horizontal | |
|
|
439
|
+
| percent | 当前 | number | - | 4.5.0 |
|
|
440
|
+
| progressDot | 点状步骤条，可以设置为一个 function，labelPlacement 将强制为 | boolean \| (iconDot, {index, status, title, description}) => ReactNode | false | |
|
|
441
|
+
| responsive | 当屏幕宽度小于 | boolean | true | |
|
|
442
|
+
| size | 指定大小，目前支持普通（ | string | default | |
|
|
443
|
+
| status | 指定当前步骤的状态，可选 | string | process | |
|
|
444
|
+
| type | 步骤条类型，可选 | string | default | inline: 5.0 |
|
|
445
|
+
| onChange | 点击切换步骤时触发 | (current) => void | - | |
|
|
446
|
+
| items | 配置选项卡内容 | | [] | 4.24.0 |
|
|
447
|
+
|
|
448
|
+
|
|
449
|
+
### `type="inline"`
|
|
450
|
+
|
|
451
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
452
|
+
|--------|--------|--------|--------|--------|
|
|
453
|
+
| className | 步骤条类名 | string | - | |
|
|
454
|
+
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 | number | 0 | |
|
|
455
|
+
| initial | 起始序号，从 0 开始记数 | number | 0 | |
|
|
456
|
+
| status | 指定当前步骤的状态，可选 | string | process | |
|
|
457
|
+
| onChange | 点击切换步骤时触发 | (current) => void | - | |
|
|
458
|
+
| items | 配置选项卡内容，不支持 | | [] | 4.24.0 |
|
|
459
|
+
|
|
460
|
+
|
|
461
|
+
### StepItem
|
|
462
|
+
|
|
463
|
+
步骤条内的每一个步骤。
|
|
464
|
+
|
|
465
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
466
|
+
|--------|--------|--------|--------|--------|
|
|
467
|
+
| description | 步骤的详情描述，可选 | ReactNode | - | |
|
|
468
|
+
| disabled | 禁用点击 | boolean | false | |
|
|
469
|
+
| icon | 步骤图标的类型，可选 | ReactNode | - | |
|
|
470
|
+
| status | 指定状态。当不配置该属性时，会使用 Steps 的 | string | wait | |
|
|
471
|
+
| subTitle | 子标题 | ReactNode | - | |
|
|
472
|
+
| title | 标题 | ReactNode | - | |
|
|
473
|
+
|
|
474
|
+
|
|
475
|
+
|
|
476
|
+
|
|
418
477
|
<DemoTitle title="Table" desc="展示行列数据。">
|
|
419
478
|
#### API
|
|
420
479
|
|
|
@@ -670,76 +729,17 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
670
729
|
|
|
671
730
|
|
|
672
731
|
|
|
673
|
-
<DemoTitle title="
|
|
732
|
+
<DemoTitle title="Statistic" desc="展示统计数值">
|
|
674
733
|
#### API
|
|
675
734
|
|
|
676
|
-
<AntdApiRef url="https://ant.design/components/
|
|
735
|
+
<AntdApiRef url="https://ant.design/components/statistic-cn/#api"></AntdApiRef>
|
|
677
736
|
|
|
678
737
|
|
|
679
738
|
## antd API
|
|
680
739
|
|
|
681
740
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
682
741
|
|
|
683
|
-
|
|
684
|
-
|
|
685
|
-
整体步骤条。
|
|
686
|
-
|
|
687
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
688
|
-
|--------|--------|--------|--------|--------|
|
|
689
|
-
| className | 步骤条类名 | string | - | |
|
|
690
|
-
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 | number | 0 | |
|
|
691
|
-
| direction | 指定步骤条方向。目前支持水平（ | string | horizontal | |
|
|
692
|
-
| initial | 起始序号，从 0 开始记数 | number | 0 | |
|
|
693
|
-
| labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选 | string | horizontal | |
|
|
694
|
-
| percent | 当前 | number | - | 4.5.0 |
|
|
695
|
-
| progressDot | 点状步骤条，可以设置为一个 function，labelPlacement 将强制为 | boolean \| (iconDot, {index, status, title, description}) => ReactNode | false | |
|
|
696
|
-
| responsive | 当屏幕宽度小于 | boolean | true | |
|
|
697
|
-
| size | 指定大小，目前支持普通（ | string | default | |
|
|
698
|
-
| status | 指定当前步骤的状态，可选 | string | process | |
|
|
699
|
-
| type | 步骤条类型，可选 | string | default | inline: 5.0 |
|
|
700
|
-
| onChange | 点击切换步骤时触发 | (current) => void | - | |
|
|
701
|
-
| items | 配置选项卡内容 | | [] | 4.24.0 |
|
|
702
|
-
|
|
703
|
-
|
|
704
|
-
### `type="inline"`
|
|
705
|
-
|
|
706
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
707
|
-
|--------|--------|--------|--------|--------|
|
|
708
|
-
| className | 步骤条类名 | string | - | |
|
|
709
|
-
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 | number | 0 | |
|
|
710
|
-
| initial | 起始序号，从 0 开始记数 | number | 0 | |
|
|
711
|
-
| status | 指定当前步骤的状态，可选 | string | process | |
|
|
712
|
-
| onChange | 点击切换步骤时触发 | (current) => void | - | |
|
|
713
|
-
| items | 配置选项卡内容，不支持 | | [] | 4.24.0 |
|
|
714
|
-
|
|
715
|
-
|
|
716
|
-
### StepItem
|
|
717
|
-
|
|
718
|
-
步骤条内的每一个步骤。
|
|
719
|
-
|
|
720
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
721
|
-
|--------|--------|--------|--------|--------|
|
|
722
|
-
| description | 步骤的详情描述，可选 | ReactNode | - | |
|
|
723
|
-
| disabled | 禁用点击 | boolean | false | |
|
|
724
|
-
| icon | 步骤图标的类型，可选 | ReactNode | - | |
|
|
725
|
-
| status | 指定状态。当不配置该属性时，会使用 Steps 的 | string | wait | |
|
|
726
|
-
| subTitle | 子标题 | ReactNode | - | |
|
|
727
|
-
| title | 标题 | ReactNode | - | |
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
|
|
732
|
-
<DemoTitle title="Statistic" desc="展示统计数值">
|
|
733
|
-
#### API
|
|
734
|
-
|
|
735
|
-
<AntdApiRef url="https://ant.design/components/statistic-cn/#api"></AntdApiRef>
|
|
736
|
-
|
|
737
|
-
|
|
738
|
-
## antd API
|
|
739
|
-
|
|
740
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
741
|
-
|
|
742
|
-
#### Statistic
|
|
742
|
+
#### Statistic
|
|
743
743
|
|
|
744
744
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
745
745
|
|--------|--------|--------|--------|--------|
|
|
@@ -789,23 +789,6 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
789
789
|
|
|
790
790
|
|
|
791
791
|
|
|
792
|
-
<DemoTitle title="Spinner" desc="指示页面或区块的加载中状态">
|
|
793
|
-
#### API
|
|
794
|
-
|
|
795
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
796
|
-
|--------|--------|--------|--------|
|
|
797
|
-
| tip | indicator下方的tip | React.ReactNode | - |
|
|
798
|
-
| indicator | 自定义indicator，用于展示progress的百分比和加载文案 | React.ReactNode | - |
|
|
799
|
-
| children | 被spinner包裹的子元素 | React.ReactNode | - |
|
|
800
|
-
| style | spinner最外层的样式 | React.CSSProperties | - |
|
|
801
|
-
| className | spinner的类名 | string | - |
|
|
802
|
-
| percent | 进度条的百分比 | number | - |
|
|
803
|
-
| spinning | 是否为加载中状态 | boolean | false |
|
|
804
|
-
| showProgress | 是否显示进度条，如果为true，不需要手动在children中添加Progress组件 | boolean | false |
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
792
|
<DemoTitle title="Skeleton" desc="在内容加载时提供占位图形展示。">
|
|
810
793
|
## antd API
|
|
811
794
|
|
|
@@ -931,18 +914,6 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
931
914
|
|
|
932
915
|
|
|
933
916
|
|
|
934
|
-
<DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。">
|
|
935
|
-
## API
|
|
936
|
-
|
|
937
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
938
|
-
|--------|--------|--------|--------|
|
|
939
|
-
| texture | 是否显示纹理 | boolean | false |
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
917
|
<DemoTitle title="Select" desc="下拉选择器">
|
|
947
918
|
## antd API
|
|
948
919
|
|
|
@@ -1041,6 +1012,23 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1041
1012
|
|
|
1042
1013
|
|
|
1043
1014
|
|
|
1015
|
+
<DemoTitle title="Spinner" desc="指示页面或区块的加载中状态">
|
|
1016
|
+
#### API
|
|
1017
|
+
|
|
1018
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1019
|
+
|--------|--------|--------|--------|
|
|
1020
|
+
| tip | indicator下方的tip | React.ReactNode | - |
|
|
1021
|
+
| indicator | 自定义indicator，用于展示progress的百分比和加载文案 | React.ReactNode | - |
|
|
1022
|
+
| children | 被spinner包裹的子元素 | React.ReactNode | - |
|
|
1023
|
+
| style | spinner最外层的样式 | React.CSSProperties | - |
|
|
1024
|
+
| className | spinner的类名 | string | - |
|
|
1025
|
+
| percent | 进度条的百分比 | number | - |
|
|
1026
|
+
| spinning | 是否为加载中状态 | boolean | false |
|
|
1027
|
+
| showProgress | 是否显示进度条，如果为true，不需要手动在children中添加Progress组件 | boolean | false |
|
|
1028
|
+
|
|
1029
|
+
|
|
1030
|
+
|
|
1031
|
+
|
|
1044
1032
|
<DemoTitle title="RadioButton" desc="用于在多个备选项中选中单个状态。">
|
|
1045
1033
|
#### API
|
|
1046
1034
|
|
|
@@ -1116,6 +1104,35 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1116
1104
|
|
|
1117
1105
|
|
|
1118
1106
|
|
|
1107
|
+
<DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。">
|
|
1108
|
+
## API
|
|
1109
|
+
|
|
1110
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1111
|
+
|--------|--------|--------|--------|
|
|
1112
|
+
| texture | 是否显示纹理 | boolean | false |
|
|
1113
|
+
|
|
1114
|
+
|
|
1115
|
+
|
|
1116
|
+
|
|
1117
|
+
|
|
1118
|
+
|
|
1119
|
+
<DemoTitle title="MdEditor" desc="提示词编辑器，可以高亮 Markdown 的语法，支持自定义槽位变量的插入">
|
|
1120
|
+
#### API
|
|
1121
|
+
|
|
1122
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1123
|
+
|--------|--------|--------|--------|
|
|
1124
|
+
| maxLength | 可以输入内容的最大长度 | number | |
|
|
1125
|
+
| value | 输入的内容 | string | (必填) |
|
|
1126
|
+
| className | 输入内容的类名 | string | |
|
|
1127
|
+
| onChange | 输入内容的回调 | (value: string) => void | |
|
|
1128
|
+
| variables | 可以插入的变量列表 | Array | |
|
|
1129
|
+
| onCreate | 新增变量的触发回调 | () => void | |
|
|
1130
|
+
| createBtnText | 新增变量的按钮文本 | string | |
|
|
1131
|
+
| tipsText | 提示文本，传入 false 时隐藏提示 | string \| React.ReactNode \| false | |
|
|
1132
|
+
|
|
1133
|
+
|
|
1134
|
+
|
|
1135
|
+
|
|
1119
1136
|
<DemoTitle title="Radio" desc="用于在多个备选项中选中单个状态。">
|
|
1120
1137
|
#### API
|
|
1121
1138
|
|
|
@@ -1236,6 +1253,53 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1236
1253
|
|
|
1237
1254
|
|
|
1238
1255
|
|
|
1256
|
+
<DemoTitle title="Pagination" desc="分页器用于分隔长列表，每次只加载一个页面。">
|
|
1257
|
+
## API
|
|
1258
|
+
|
|
1259
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1260
|
+
|--------|--------|--------|--------|
|
|
1261
|
+
| hideSwitchButton | 是否展示上一页/下一页的切换按钮 | boolean | false |
|
|
1262
|
+
|
|
1263
|
+
|
|
1264
|
+
<AntdApiRef url="https://ant.design/components/pagination-cn/#api"></AntdApiRef>
|
|
1265
|
+
|
|
1266
|
+
|
|
1267
|
+
## antd API
|
|
1268
|
+
|
|
1269
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1270
|
+
|
|
1271
|
+
|
|
1272
|
+
```jsx
|
|
1273
|
+
<Pagination onChange={onChange} total={50} />
|
|
1274
|
+
```
|
|
1275
|
+
|
|
1276
|
+
|
|
1277
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1278
|
+
|--------|--------|--------|--------|--------|
|
|
1279
|
+
| align | 对齐方式 | start \| center \| end | - | 5.19.0 |
|
|
1280
|
+
| current | 当前页数 | number | - | |
|
|
1281
|
+
| defaultCurrent | 默认的当前页数 | number | 1 | |
|
|
1282
|
+
| defaultPageSize | 默认的每页条数 | number | 10 | |
|
|
1283
|
+
| disabled | 禁用分页 | boolean | - | |
|
|
1284
|
+
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | |
|
|
1285
|
+
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | |
|
|
1286
|
+
| pageSize | 每页条数 | number | - | |
|
|
1287
|
+
| pageSizeOptions | 指定每页可以显示多少条 | number[] | [ | |
|
|
1288
|
+
| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | |
|
|
1289
|
+
| showLessItems | 是否显示较少页面内容 | boolean | false | |
|
|
1290
|
+
| showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false | |
|
|
1291
|
+
| showSizeChanger | 是否展示 | boolean \| | - | SelectProps: 5.21.0 |
|
|
1292
|
+
| showTitle | 是否显示原生 tooltip 页码提示 | boolean | true | |
|
|
1293
|
+
| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | |
|
|
1294
|
+
| simple | 当添加该属性时，显示为简单分页 | boolean \| { readOnly?: boolean } | - | |
|
|
1295
|
+
| size | 当为 | default | default | |
|
|
1296
|
+
| total | 数据总数 | number | 0 | |
|
|
1297
|
+
| onChange | 页码或 | function(page, pageSize) | - | |
|
|
1298
|
+
| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | |
|
|
1299
|
+
|
|
1300
|
+
|
|
1301
|
+
|
|
1302
|
+
|
|
1239
1303
|
<DemoTitle title="Popconfirm" desc="点击元素，弹出气泡式的确认框。">
|
|
1240
1304
|
#### API
|
|
1241
1305
|
|
|
@@ -1293,6 +1357,50 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1293
1357
|
|
|
1294
1358
|
|
|
1295
1359
|
|
|
1360
|
+
<DemoTitle title="Popover" desc="点击/鼠标移入元素，弹出气泡式的卡片浮层">
|
|
1361
|
+
#### API
|
|
1362
|
+
|
|
1363
|
+
<AntdApiRef url="https://ant.design/components/popover-cn/#api"></AntdApiRef>
|
|
1364
|
+
|
|
1365
|
+
|
|
1366
|
+
## antd API
|
|
1367
|
+
|
|
1368
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1369
|
+
|
|
1370
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1371
|
+
|--------|--------|--------|--------|--------|
|
|
1372
|
+
| content | 卡片内容 | ReactNode \| () => ReactNode | - | |
|
|
1373
|
+
| title | 卡片标题 | ReactNode \| () => ReactNode | - | |
|
|
1374
|
+
|
|
1375
|
+
|
|
1376
|
+
<!-- 共同的 API -->
|
|
1377
|
+
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
1378
|
+
|
|
1379
|
+
<!-- prettier-ignore -->
|
|
1380
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1381
|
+
|--------|--------|--------|--------|--------|
|
|
1382
|
+
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
1383
|
+
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
1384
|
+
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
1385
|
+
| color | 背景颜色 | string | - | 4.3.0 |
|
|
1386
|
+
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
1387
|
+
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
1388
|
+
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
1389
|
+
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
1390
|
+
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
1391
|
+
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
1392
|
+
| placement | 气泡框位置，可选 | string | top | |
|
|
1393
|
+
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
1394
|
+
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
1395
|
+
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
1396
|
+
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
1397
|
+
|
|
1398
|
+
## 注意
|
|
1399
|
+
|
|
1400
|
+
请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
|
|
1401
|
+
|
|
1402
|
+
|
|
1403
|
+
|
|
1296
1404
|
<DemoTitle title="Notification" desc="用于指示任务的完成进度">
|
|
1297
1405
|
#### API
|
|
1298
1406
|
|
|
@@ -1389,76 +1497,15 @@ notification.config({
|
|
|
1389
1497
|
|
|
1390
1498
|
|
|
1391
1499
|
|
|
1392
|
-
<DemoTitle title="
|
|
1500
|
+
<DemoTitle title="Modal" desc="用于叠加当前页面上的对话框窗口，提供标题、内容区、操作区。">
|
|
1393
1501
|
#### API
|
|
1394
1502
|
|
|
1395
1503
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1396
1504
|
|--------|--------|--------|--------|
|
|
1397
|
-
|
|
|
1398
|
-
|
|
|
1399
|
-
| className | 输入内容的类名 | string | |
|
|
1400
|
-
| onChange | 输入内容的回调 | (value: string) => void | |
|
|
1401
|
-
| variables | 可以插入的变量列表 | Array | |
|
|
1402
|
-
| onCreate | 新增变量的触发回调 | () => void | |
|
|
1403
|
-
| createBtnText | 新增变量的按钮文本 | string | |
|
|
1404
|
-
| tipsText | 提示文本，传入 false 时隐藏提示 | string \| React.ReactNode \| false | |
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1408
|
-
|
|
1409
|
-
<DemoTitle title="Popover" desc="点击/鼠标移入元素，弹出气泡式的卡片浮层">
|
|
1410
|
-
#### API
|
|
1505
|
+
| info | 底部额外内容 | string \| React.ReactNode | |
|
|
1506
|
+
| showDivider | 是否显示分割线 | boolean | true |
|
|
1411
1507
|
|
|
1412
|
-
<AntdApiRef url="https://ant.design/components/
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
## antd API
|
|
1416
|
-
|
|
1417
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1418
|
-
|
|
1419
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1420
|
-
|--------|--------|--------|--------|--------|
|
|
1421
|
-
| content | 卡片内容 | ReactNode \| () => ReactNode | - | |
|
|
1422
|
-
| title | 卡片标题 | ReactNode \| () => ReactNode | - | |
|
|
1423
|
-
|
|
1424
|
-
|
|
1425
|
-
<!-- 共同的 API -->
|
|
1426
|
-
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
1427
|
-
|
|
1428
|
-
<!-- prettier-ignore -->
|
|
1429
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1430
|
-
|--------|--------|--------|--------|--------|
|
|
1431
|
-
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
1432
|
-
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
1433
|
-
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
1434
|
-
| color | 背景颜色 | string | - | 4.3.0 |
|
|
1435
|
-
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
1436
|
-
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
1437
|
-
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
1438
|
-
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
1439
|
-
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
1440
|
-
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
1441
|
-
| placement | 气泡框位置，可选 | string | top | |
|
|
1442
|
-
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
1443
|
-
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
1444
|
-
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
1445
|
-
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
1446
|
-
|
|
1447
|
-
## 注意
|
|
1448
|
-
|
|
1449
|
-
请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
|
|
1450
|
-
|
|
1451
|
-
|
|
1452
|
-
|
|
1453
|
-
<DemoTitle title="Modal" desc="用于叠加当前页面上的对话框窗口，提供标题、内容区、操作区。">
|
|
1454
|
-
#### API
|
|
1455
|
-
|
|
1456
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1457
|
-
|--------|--------|--------|--------|
|
|
1458
|
-
| info | 底部额外内容 | string \| React.ReactNode | |
|
|
1459
|
-
| showDivider | 是否显示分割线 | boolean | true |
|
|
1460
|
-
|
|
1461
|
-
<AntdApiRef url="https://ant.design/components/modal-cn/#api"></AntdApiRef>
|
|
1508
|
+
<AntdApiRef url="https://ant.design/components/modal-cn/#api"></AntdApiRef>
|
|
1462
1509
|
|
|
1463
1510
|
|
|
1464
1511
|
## antd API
|
|
@@ -1620,53 +1667,6 @@ const confirmed = await modal.confirm({ ... });
|
|
|
1620
1667
|
|
|
1621
1668
|
|
|
1622
1669
|
|
|
1623
|
-
<DemoTitle title="Pagination" desc="分页器用于分隔长列表，每次只加载一个页面。">
|
|
1624
|
-
## API
|
|
1625
|
-
|
|
1626
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1627
|
-
|--------|--------|--------|--------|
|
|
1628
|
-
| hideSwitchButton | 是否展示上一页/下一页的切换按钮 | boolean | false |
|
|
1629
|
-
|
|
1630
|
-
|
|
1631
|
-
<AntdApiRef url="https://ant.design/components/pagination-cn/#api"></AntdApiRef>
|
|
1632
|
-
|
|
1633
|
-
|
|
1634
|
-
## antd API
|
|
1635
|
-
|
|
1636
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
```jsx
|
|
1640
|
-
<Pagination onChange={onChange} total={50} />
|
|
1641
|
-
```
|
|
1642
|
-
|
|
1643
|
-
|
|
1644
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1645
|
-
|--------|--------|--------|--------|--------|
|
|
1646
|
-
| align | 对齐方式 | start \| center \| end | - | 5.19.0 |
|
|
1647
|
-
| current | 当前页数 | number | - | |
|
|
1648
|
-
| defaultCurrent | 默认的当前页数 | number | 1 | |
|
|
1649
|
-
| defaultPageSize | 默认的每页条数 | number | 10 | |
|
|
1650
|
-
| disabled | 禁用分页 | boolean | - | |
|
|
1651
|
-
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | |
|
|
1652
|
-
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | |
|
|
1653
|
-
| pageSize | 每页条数 | number | - | |
|
|
1654
|
-
| pageSizeOptions | 指定每页可以显示多少条 | number[] | [ | |
|
|
1655
|
-
| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | |
|
|
1656
|
-
| showLessItems | 是否显示较少页面内容 | boolean | false | |
|
|
1657
|
-
| showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false | |
|
|
1658
|
-
| showSizeChanger | 是否展示 | boolean \| | - | SelectProps: 5.21.0 |
|
|
1659
|
-
| showTitle | 是否显示原生 tooltip 页码提示 | boolean | true | |
|
|
1660
|
-
| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | |
|
|
1661
|
-
| simple | 当添加该属性时，显示为简单分页 | boolean \| { readOnly?: boolean } | - | |
|
|
1662
|
-
| size | 当为 | default | default | |
|
|
1663
|
-
| total | 数据总数 | number | 0 | |
|
|
1664
|
-
| onChange | 页码或 | function(page, pageSize) | - | |
|
|
1665
|
-
| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | |
|
|
1666
|
-
|
|
1667
|
-
|
|
1668
|
-
|
|
1669
|
-
|
|
1670
1670
|
<DemoTitle title="Message" desc="一条简洁且临时显示的消息，为操作提供全局反馈">
|
|
1671
1671
|
#### API
|
|
1672
1672
|
|
|
@@ -1767,6 +1767,59 @@ message.config({
|
|
|
1767
1767
|
|
|
1768
1768
|
|
|
1769
1769
|
|
|
1770
|
+
<DemoTitle title="InputNumber" desc="通过鼠标或键盘，输入范围内的数值。">
|
|
1771
|
+
#### API
|
|
1772
|
+
|
|
1773
|
+
<AntdApiRef url="https://ant.design/components/input-number-cn/#api"></AntdApiRef>
|
|
1774
|
+
|
|
1775
|
+
|
|
1776
|
+
## antd API
|
|
1777
|
+
|
|
1778
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1779
|
+
|
|
1780
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1781
|
+
|--------|--------|--------|--------|--------|
|
|
1782
|
+
| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | 4.17.0 |
|
|
1783
|
+
| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | 4.17.0 |
|
|
1784
|
+
| autoFocus | 自动获取焦点 | boolean | false | - |
|
|
1785
|
+
| changeOnBlur | 是否在失去焦点时，触发 | boolean | true | 5.11.0 |
|
|
1786
|
+
| changeOnWheel | 允许鼠标滚轮改变数值 | boolean | - | 5.14.0 |
|
|
1787
|
+
| controls | 是否显示增减按钮，也可设置自定义箭头图标 | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
|
|
1788
|
+
| decimalSeparator | 小数点 | string | - | - |
|
|
1789
|
+
| placeholder | 占位符 | string | - | |
|
|
1790
|
+
| defaultValue | 初始值 | number | - | - |
|
|
1791
|
+
| disabled | 禁用 | boolean | false | - |
|
|
1792
|
+
| formatter | 指定输入框展示值的格式 | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - | info: 4.17.0 |
|
|
1793
|
+
| keyboard | 是否启用键盘快捷行为 | boolean | true | 4.12.0 |
|
|
1794
|
+
| max | 最大值 | number | | - |
|
|
1795
|
+
| min | 最小值 | number | | - |
|
|
1796
|
+
| parser | 指定从 | function(string): number | - | - |
|
|
1797
|
+
| precision | 数值精度，配置 | number | - | - |
|
|
1798
|
+
| readOnly | 只读 | boolean | false | - |
|
|
1799
|
+
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
1800
|
+
| prefix | 带有前缀图标的 input | ReactNode | - | 4.17.0 |
|
|
1801
|
+
| suffix | 带有后缀图标的 input | ReactNode | - | 5.20.0 |
|
|
1802
|
+
| size | 输入框大小 | large | - | - |
|
|
1803
|
+
| step | 每次改变步数，可以为小数 | number \| string | 1 | - |
|
|
1804
|
+
| stringMode | 字符值模式，开启后支持高精度小数。同时 | boolean | false | 4.13.0 |
|
|
1805
|
+
| value | 当前值 | number | - | - |
|
|
1806
|
+
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
1807
|
+
| onChange | 变化回调 | function(value: number \| string \| null) | - | - |
|
|
1808
|
+
| onPressEnter | 按下回车的回调 | function(e) | - | - |
|
|
1809
|
+
| onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 |
|
|
1810
|
+
|
|
1811
|
+
|
|
1812
|
+
## Ref
|
|
1813
|
+
|
|
1814
|
+
| 名称 | 说明 | 参数 | 版本 |
|
|
1815
|
+
|--------|--------|--------|--------|
|
|
1816
|
+
| blur() | 移除焦点 | - | |
|
|
1817
|
+
| focus() | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | cursor - 5.22.0 |
|
|
1818
|
+
| nativeElement | 获取原生 DOM 元素 | - | 5.17.3 |
|
|
1819
|
+
|
|
1820
|
+
|
|
1821
|
+
|
|
1822
|
+
|
|
1770
1823
|
<DemoTitle title="Input" desc="通过鼠标或键盘输入内容，为表单提供输入字段的基础容器。。">
|
|
1771
1824
|
#### API
|
|
1772
1825
|
|
|
@@ -1902,59 +1955,6 @@ interface CountConfig {
|
|
|
1902
1955
|
|
|
1903
1956
|
|
|
1904
1957
|
|
|
1905
|
-
<DemoTitle title="InputNumber" desc="通过鼠标或键盘，输入范围内的数值。">
|
|
1906
|
-
#### API
|
|
1907
|
-
|
|
1908
|
-
<AntdApiRef url="https://ant.design/components/input-number-cn/#api"></AntdApiRef>
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
## antd API
|
|
1912
|
-
|
|
1913
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1914
|
-
|
|
1915
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1916
|
-
|--------|--------|--------|--------|--------|
|
|
1917
|
-
| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | 4.17.0 |
|
|
1918
|
-
| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | 4.17.0 |
|
|
1919
|
-
| autoFocus | 自动获取焦点 | boolean | false | - |
|
|
1920
|
-
| changeOnBlur | 是否在失去焦点时，触发 | boolean | true | 5.11.0 |
|
|
1921
|
-
| changeOnWheel | 允许鼠标滚轮改变数值 | boolean | - | 5.14.0 |
|
|
1922
|
-
| controls | 是否显示增减按钮，也可设置自定义箭头图标 | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
|
|
1923
|
-
| decimalSeparator | 小数点 | string | - | - |
|
|
1924
|
-
| placeholder | 占位符 | string | - | |
|
|
1925
|
-
| defaultValue | 初始值 | number | - | - |
|
|
1926
|
-
| disabled | 禁用 | boolean | false | - |
|
|
1927
|
-
| formatter | 指定输入框展示值的格式 | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - | info: 4.17.0 |
|
|
1928
|
-
| keyboard | 是否启用键盘快捷行为 | boolean | true | 4.12.0 |
|
|
1929
|
-
| max | 最大值 | number | | - |
|
|
1930
|
-
| min | 最小值 | number | | - |
|
|
1931
|
-
| parser | 指定从 | function(string): number | - | - |
|
|
1932
|
-
| precision | 数值精度，配置 | number | - | - |
|
|
1933
|
-
| readOnly | 只读 | boolean | false | - |
|
|
1934
|
-
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
1935
|
-
| prefix | 带有前缀图标的 input | ReactNode | - | 4.17.0 |
|
|
1936
|
-
| suffix | 带有后缀图标的 input | ReactNode | - | 5.20.0 |
|
|
1937
|
-
| size | 输入框大小 | large | - | - |
|
|
1938
|
-
| step | 每次改变步数，可以为小数 | number \| string | 1 | - |
|
|
1939
|
-
| stringMode | 字符值模式，开启后支持高精度小数。同时 | boolean | false | 4.13.0 |
|
|
1940
|
-
| value | 当前值 | number | - | - |
|
|
1941
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
1942
|
-
| onChange | 变化回调 | function(value: number \| string \| null) | - | - |
|
|
1943
|
-
| onPressEnter | 按下回车的回调 | function(e) | - | - |
|
|
1944
|
-
| onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 |
|
|
1945
|
-
|
|
1946
|
-
|
|
1947
|
-
## Ref
|
|
1948
|
-
|
|
1949
|
-
| 名称 | 说明 | 参数 | 版本 |
|
|
1950
|
-
|--------|--------|--------|--------|
|
|
1951
|
-
| blur() | 移除焦点 | - | |
|
|
1952
|
-
| focus() | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | cursor - 5.22.0 |
|
|
1953
|
-
| nativeElement | 获取原生 DOM 元素 | - | 5.17.3 |
|
|
1954
|
-
|
|
1955
|
-
|
|
1956
|
-
|
|
1957
|
-
|
|
1958
1958
|
<DemoTitle title="Image" desc="可预览的图片">
|
|
1959
1959
|
#### API
|
|
1960
1960
|
|
|
@@ -2122,158 +2122,59 @@ type TransformAction =
|
|
|
2122
2122
|
|
|
2123
2123
|
|
|
2124
2124
|
|
|
2125
|
-
<DemoTitle title="
|
|
2125
|
+
<DemoTitle title="Form" desc="高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。">
|
|
2126
2126
|
#### API
|
|
2127
2127
|
|
|
2128
|
-
|
|
2129
|
-
|--------|--------|--------|--------|
|
|
2130
|
-
| icon | icon | ReactNode \| string | |
|
|
2131
|
-
| iconType | 百炼图标iconfont的key，依赖百炼的iconFont，例如bl-icon-add | string | |
|
|
2132
|
-
| bordered | 边框 | boolean | true |
|
|
2133
|
-
| shape | 形状 | 'default' \| 'circle' | 'default' |
|
|
2128
|
+
<AntdApiRef url="https://ant.design/components/form-cn/#api"></AntdApiRef>
|
|
2134
2129
|
|
|
2135
2130
|
|
|
2136
2131
|
## antd API
|
|
2137
2132
|
|
|
2138
2133
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2139
2134
|
|
|
2140
|
-
|
|
2141
|
-
|
|
2142
|
-
按钮的属性说明如下：
|
|
2135
|
+
### Form
|
|
2143
2136
|
|
|
2144
|
-
|
|
|
2137
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2145
2138
|
|--------|--------|--------|--------|--------|
|
|
2146
|
-
|
|
|
2147
|
-
|
|
|
2148
|
-
|
|
|
2149
|
-
|
|
|
2150
|
-
|
|
|
2151
|
-
|
|
|
2152
|
-
|
|
|
2153
|
-
|
|
|
2154
|
-
|
|
|
2155
|
-
|
|
|
2156
|
-
|
|
|
2157
|
-
|
|
|
2158
|
-
|
|
|
2159
|
-
|
|
|
2160
|
-
|
|
|
2139
|
+
| colon | 配置 Form.Item 的 | boolean | true | |
|
|
2140
|
+
| disabled | 设置表单组件禁用，仅对 antd 组件有效 | boolean | false | 4.21.0 |
|
|
2141
|
+
| component | 设置 Form 渲染元素，为 | ComponentType \| false | form | |
|
|
2142
|
+
| fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。查看 | | - | |
|
|
2143
|
+
| form | 经 | | - | |
|
|
2144
|
+
| feedbackIcons | 当 | | - | 5.9.0 |
|
|
2145
|
+
| initialValues | 表单默认值，只有初始化以及重置时生效 | object | - | |
|
|
2146
|
+
| labelAlign | label 标签的文本对齐方式 | left | right | |
|
|
2147
|
+
| labelWrap | label 标签的文本换行方式 | boolean | false | 4.18.0 |
|
|
2148
|
+
| labelCol | label 标签布局，同 | | - | |
|
|
2149
|
+
| layout | 表单布局 | horizontal | horizontal | |
|
|
2150
|
+
| name | 表单名称，会作为表单字段 | string | - | |
|
|
2151
|
+
| preserve | 当字段被删除时保留字段值。你可以通过 | boolean | true | 4.4.0 |
|
|
2152
|
+
| requiredMark | 必选样式，可以切换为必选或者可选展示样式。此为 Form 配置，Form.Item 无法单独配置 | boolean \| | true | renderProps |
|
|
2153
|
+
| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean \| | false | focus: 5.24.0 |
|
|
2154
|
+
| size | 设置字段组件的尺寸（仅限 antd 组件） | small | - | |
|
|
2155
|
+
| validateMessages | 验证提示模板，说明 | | - | |
|
|
2156
|
+
| validateTrigger | 统一设置字段触发验证的时机 | string \| string[] | onChange | 4.3.0 |
|
|
2157
|
+
| variant | 表单内控件变体 | outlined | outlined | 5.13.0 \| |
|
|
2158
|
+
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | | - | |
|
|
2159
|
+
| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | - | |
|
|
2160
|
+
| onFinish | 提交表单且数据验证成功后回调事件 | function(values) | - | |
|
|
2161
|
+
| onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | - | |
|
|
2162
|
+
| onValuesChange | 字段值更新时触发回调事件 | function(changedValues, allValues) | - | |
|
|
2163
|
+
| clearOnDestroy | 当表单被卸载时清空表单值 | boolean | false | 5.18.0 |
|
|
2161
2164
|
|
|
2162
2165
|
|
|
2163
|
-
支持原生
|
|
2166
|
+
支持原生 form 除 `onSubmit` 外的所有属性。
|
|
2164
2167
|
|
|
2165
|
-
###
|
|
2168
|
+
### validateMessages
|
|
2166
2169
|
|
|
2167
|
-
|
|
2170
|
+
Form 为验证提供了[默认的错误提示信息](https://github.com/ant-design/ant-design/blob/6234509d18bac1ac60fbb3f92a5b2c6a6361295a/components/locale/en_US.ts#L88-L134)，你可以通过配置 `validateMessages` 属性，修改对应的提示模板。一种常见的使用方式，是配置国际化提示信息：
|
|
2168
2171
|
|
|
2169
2172
|
|
|
2170
|
-
|
|
2171
|
-
|
|
2172
|
-
|
|
2173
|
-
|
|
2174
|
-
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
## antd API
|
|
2178
|
-
|
|
2179
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2180
|
-
|
|
2181
|
-
自 `antd@5.0.0` 版本开始提供该组件。
|
|
2182
|
-
|
|
2183
|
-
### 共同的 API
|
|
2184
|
-
|
|
2185
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2186
|
-
|--------|--------|--------|--------|--------|
|
|
2187
|
-
| icon | 自定义图标 | ReactNode | - | |
|
|
2188
|
-
| description | 文字及其它内容 | ReactNode | - | |
|
|
2189
|
-
| tooltip | 气泡卡片的内容 | ReactNode \| | - | TooltipProps: 5.25.0 |
|
|
2190
|
-
| type | 设置按钮类型 | default | default | |
|
|
2191
|
-
| shape | 设置按钮形状 | circle | circle | |
|
|
2192
|
-
| onClick | 点击按钮时的回调 | (event) => void | - | |
|
|
2193
|
-
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2194
|
-
| target | 相当于 a 标签的 target 属性，href 存在时生效 | string | - | |
|
|
2195
|
-
| htmlType | 设置 | submit | button | 5.21.0 |
|
|
2196
|
-
| badge | 带徽标数字的悬浮按钮（不支持 | | - | 5.4.0 |
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
### FloatButton.Group
|
|
2200
|
-
|
|
2201
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2202
|
-
|--------|--------|--------|--------|--------|
|
|
2203
|
-
| shape | 设置包含的 FloatButton 按钮形状 | circle | circle | |
|
|
2204
|
-
| trigger | 触发方式（有触发方式为菜单模式） | click | - | |
|
|
2205
|
-
| open | 受控展开，需配合 trigger 一起使用 | boolean | - | |
|
|
2206
|
-
| closeIcon | 自定义关闭按钮 | React.ReactNode | | |
|
|
2207
|
-
| placement | 自定义菜单弹出位置 | top | top | 5.21.0 |
|
|
2208
|
-
| onOpenChange | 展开收起时的回调，需配合 trigger 一起使用 | (open: boolean) => void | - | |
|
|
2209
|
-
| onClick | 点击按钮时的回调（仅在菜单模式中有效） | (event) => void | - | 5.3.0 |
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
### FloatButton.BackTop
|
|
2213
|
-
|
|
2214
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2215
|
-
|--------|--------|--------|--------|--------|
|
|
2216
|
-
| duration | 回到顶部所需时间（ms） | number | 450 | |
|
|
2217
|
-
| target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window | |
|
|
2218
|
-
| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |
|
|
2219
|
-
| onClick | 点击按钮的回调函数 | () => void | - | |
|
|
2220
|
-
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
<DemoTitle title="Form" desc="高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。">
|
|
2225
|
-
#### API
|
|
2226
|
-
|
|
2227
|
-
<AntdApiRef url="https://ant.design/components/form-cn/#api"></AntdApiRef>
|
|
2228
|
-
|
|
2229
|
-
|
|
2230
|
-
## antd API
|
|
2231
|
-
|
|
2232
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2233
|
-
|
|
2234
|
-
### Form
|
|
2235
|
-
|
|
2236
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2237
|
-
|--------|--------|--------|--------|--------|
|
|
2238
|
-
| colon | 配置 Form.Item 的 | boolean | true | |
|
|
2239
|
-
| disabled | 设置表单组件禁用，仅对 antd 组件有效 | boolean | false | 4.21.0 |
|
|
2240
|
-
| component | 设置 Form 渲染元素，为 | ComponentType \| false | form | |
|
|
2241
|
-
| fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。查看 | | - | |
|
|
2242
|
-
| form | 经 | | - | |
|
|
2243
|
-
| feedbackIcons | 当 | | - | 5.9.0 |
|
|
2244
|
-
| initialValues | 表单默认值，只有初始化以及重置时生效 | object | - | |
|
|
2245
|
-
| labelAlign | label 标签的文本对齐方式 | left | right | |
|
|
2246
|
-
| labelWrap | label 标签的文本换行方式 | boolean | false | 4.18.0 |
|
|
2247
|
-
| labelCol | label 标签布局，同 | | - | |
|
|
2248
|
-
| layout | 表单布局 | horizontal | horizontal | |
|
|
2249
|
-
| name | 表单名称，会作为表单字段 | string | - | |
|
|
2250
|
-
| preserve | 当字段被删除时保留字段值。你可以通过 | boolean | true | 4.4.0 |
|
|
2251
|
-
| requiredMark | 必选样式，可以切换为必选或者可选展示样式。此为 Form 配置，Form.Item 无法单独配置 | boolean \| | true | renderProps |
|
|
2252
|
-
| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean \| | false | focus: 5.24.0 |
|
|
2253
|
-
| size | 设置字段组件的尺寸（仅限 antd 组件） | small | - | |
|
|
2254
|
-
| validateMessages | 验证提示模板，说明 | | - | |
|
|
2255
|
-
| validateTrigger | 统一设置字段触发验证的时机 | string \| string[] | onChange | 4.3.0 |
|
|
2256
|
-
| variant | 表单内控件变体 | outlined | outlined | 5.13.0 \| |
|
|
2257
|
-
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | | - | |
|
|
2258
|
-
| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | - | |
|
|
2259
|
-
| onFinish | 提交表单且数据验证成功后回调事件 | function(values) | - | |
|
|
2260
|
-
| onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | - | |
|
|
2261
|
-
| onValuesChange | 字段值更新时触发回调事件 | function(changedValues, allValues) | - | |
|
|
2262
|
-
| clearOnDestroy | 当表单被卸载时清空表单值 | boolean | false | 5.18.0 |
|
|
2263
|
-
|
|
2264
|
-
|
|
2265
|
-
支持原生 form 除 `onSubmit` 外的所有属性。
|
|
2266
|
-
|
|
2267
|
-
### validateMessages
|
|
2268
|
-
|
|
2269
|
-
Form 为验证提供了[默认的错误提示信息](https://github.com/ant-design/ant-design/blob/6234509d18bac1ac60fbb3f92a5b2c6a6361295a/components/locale/en_US.ts#L88-L134)，你可以通过配置 `validateMessages` 属性，修改对应的提示模板。一种常见的使用方式，是配置国际化提示信息：
|
|
2270
|
-
|
|
2271
|
-
|
|
2272
|
-
```jsx
|
|
2273
|
-
const validateMessages = {
|
|
2274
|
-
required: "'${name}' 是必选字段",
|
|
2275
|
-
// ...
|
|
2276
|
-
};
|
|
2173
|
+
```jsx
|
|
2174
|
+
const validateMessages = {
|
|
2175
|
+
required: "'${name}' 是必选字段",
|
|
2176
|
+
// ...
|
|
2177
|
+
};
|
|
2277
2178
|
|
|
2278
2179
|
<Form validateMessages={validateMessages} />;
|
|
2279
2180
|
```
|
|
@@ -2781,6 +2682,149 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
|
|
|
2781
2682
|
|
|
2782
2683
|
|
|
2783
2684
|
|
|
2685
|
+
<DemoTitle title="IconButton" desc="以图标为核心的轻量按钮组件，用于触发操作。">
|
|
2686
|
+
#### API
|
|
2687
|
+
|
|
2688
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2689
|
+
|--------|--------|--------|--------|
|
|
2690
|
+
| icon | icon | ReactNode \| string | |
|
|
2691
|
+
| iconType | 百炼图标iconfont的key，依赖百炼的iconFont，例如bl-icon-add | string | |
|
|
2692
|
+
| bordered | 边框 | boolean | true |
|
|
2693
|
+
| shape | 形状 | 'default' \| 'circle' | 'default' |
|
|
2694
|
+
|
|
2695
|
+
|
|
2696
|
+
## antd API
|
|
2697
|
+
|
|
2698
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2699
|
+
|
|
2700
|
+
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
2701
|
+
|
|
2702
|
+
按钮的属性说明如下：
|
|
2703
|
+
|
|
2704
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
2705
|
+
|--------|--------|--------|--------|--------|
|
|
2706
|
+
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
2707
|
+
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
2708
|
+
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
2709
|
+
| color | 设置按钮的颜色 | default | - | default |
|
|
2710
|
+
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
2711
|
+
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
2712
|
+
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
2713
|
+
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2714
|
+
| htmlType | 设置 | submit | button | |
|
|
2715
|
+
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
2716
|
+
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
2717
|
+
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
2718
|
+
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
2719
|
+
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
2720
|
+
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
2721
|
+
|
|
2722
|
+
|
|
2723
|
+
支持原生 button 的其他所有属性。
|
|
2724
|
+
|
|
2725
|
+
### PresetColors
|
|
2726
|
+
|
|
2727
|
+
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
2728
|
+
|
|
2729
|
+
|
|
2730
|
+
|
|
2731
|
+
<DemoTitle title="FloatButton" desc="用于网站上的全局功能；无论浏览到何处都可以看见的按钮。">
|
|
2732
|
+
#### API
|
|
2733
|
+
|
|
2734
|
+
<AntdApiRef url="https://ant.design/components/float-button-cn/#api"></AntdApiRef>
|
|
2735
|
+
|
|
2736
|
+
|
|
2737
|
+
## antd API
|
|
2738
|
+
|
|
2739
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2740
|
+
|
|
2741
|
+
自 `antd@5.0.0` 版本开始提供该组件。
|
|
2742
|
+
|
|
2743
|
+
### 共同的 API
|
|
2744
|
+
|
|
2745
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2746
|
+
|--------|--------|--------|--------|--------|
|
|
2747
|
+
| icon | 自定义图标 | ReactNode | - | |
|
|
2748
|
+
| description | 文字及其它内容 | ReactNode | - | |
|
|
2749
|
+
| tooltip | 气泡卡片的内容 | ReactNode \| | - | TooltipProps: 5.25.0 |
|
|
2750
|
+
| type | 设置按钮类型 | default | default | |
|
|
2751
|
+
| shape | 设置按钮形状 | circle | circle | |
|
|
2752
|
+
| onClick | 点击按钮时的回调 | (event) => void | - | |
|
|
2753
|
+
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2754
|
+
| target | 相当于 a 标签的 target 属性，href 存在时生效 | string | - | |
|
|
2755
|
+
| htmlType | 设置 | submit | button | 5.21.0 |
|
|
2756
|
+
| badge | 带徽标数字的悬浮按钮（不支持 | | - | 5.4.0 |
|
|
2757
|
+
|
|
2758
|
+
|
|
2759
|
+
### FloatButton.Group
|
|
2760
|
+
|
|
2761
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2762
|
+
|--------|--------|--------|--------|--------|
|
|
2763
|
+
| shape | 设置包含的 FloatButton 按钮形状 | circle | circle | |
|
|
2764
|
+
| trigger | 触发方式（有触发方式为菜单模式） | click | - | |
|
|
2765
|
+
| open | 受控展开，需配合 trigger 一起使用 | boolean | - | |
|
|
2766
|
+
| closeIcon | 自定义关闭按钮 | React.ReactNode | | |
|
|
2767
|
+
| placement | 自定义菜单弹出位置 | top | top | 5.21.0 |
|
|
2768
|
+
| onOpenChange | 展开收起时的回调，需配合 trigger 一起使用 | (open: boolean) => void | - | |
|
|
2769
|
+
| onClick | 点击按钮时的回调（仅在菜单模式中有效） | (event) => void | - | 5.3.0 |
|
|
2770
|
+
|
|
2771
|
+
|
|
2772
|
+
### FloatButton.BackTop
|
|
2773
|
+
|
|
2774
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2775
|
+
|--------|--------|--------|--------|--------|
|
|
2776
|
+
| duration | 回到顶部所需时间（ms） | number | 450 | |
|
|
2777
|
+
| target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window | |
|
|
2778
|
+
| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |
|
|
2779
|
+
| onClick | 点击按钮的回调函数 | () => void | - | |
|
|
2780
|
+
|
|
2781
|
+
|
|
2782
|
+
|
|
2783
|
+
|
|
2784
|
+
<DemoTitle title="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
|
+
|
|
2784
2828
|
<DemoTitle title="Dropdown" desc="向下弹出的列表。">
|
|
2785
2829
|
#### API
|
|
2786
2830
|
|
|
@@ -2932,47 +2976,42 @@ const dividerItem = {
|
|
|
2932
2976
|
|
|
2933
2977
|
|
|
2934
2978
|
|
|
2935
|
-
<DemoTitle title="
|
|
2936
|
-
|
|
2979
|
+
<DemoTitle title="Descriptions" desc="展示多个只读字段的组合">
|
|
2980
|
+
#### API
|
|
2937
2981
|
|
|
2938
|
-
|
|
2939
|
-
|--------|--------|--------|--------|
|
|
2940
|
-
| type | 空状态类型 | \| 'noData'
|
|
2941
|
-
\| 'networkError'
|
|
2942
|
-
\| '404'
|
|
2943
|
-
\| 'arrears'
|
|
2944
|
-
\| 'desktopOnly'
|
|
2945
|
-
\| 'noAudio'
|
|
2946
|
-
\| 'noImage'
|
|
2947
|
-
\| 'noVideo'
|
|
2948
|
-
\| 'noAccess'
|
|
2949
|
-
\| 'error'
|
|
2950
|
-
\| 'noModel'
|
|
2951
|
-
\| 'noApp'
|
|
2952
|
-
\| 'success'
|
|
2953
|
-
\| 'failed'
|
|
2954
|
-
\| 'inProgress'
|
|
2955
|
-
\| 'stayTuned' | 'noData' |
|
|
2956
|
-
| texture | 是否显示纹理 | boolean | true |
|
|
2957
|
-
| image | 图片地址 | string | 默认是no data的图片 |
|
|
2958
|
-
| imageStyle | 图片样式 | React.CSSProperties | |
|
|
2959
|
-
| title | 标题内容 | React.ReactNode | |
|
|
2960
|
-
| description | 自定义描述内容 | React.ReactNode | |
|
|
2961
|
-
| onOk | ok按钮的点击事件 | (e: React.MouseEvent) => void | |
|
|
2962
|
-
| okText | ok按钮的文本 | React.ReactNode | |
|
|
2963
|
-
| okType | ok按钮的类型 | SparkButtonProps['type'] | 'primary' |
|
|
2964
|
-
| okButtonProps | ok按钮的props | SparkButtonProps | |
|
|
2965
|
-
| children | 自定义空状态的内容 | React.ReactNode | |
|
|
2966
|
-
| className | 自定义空状态的类名 | string | |
|
|
2967
|
-
| style | 自定义空状态的样式 | React.CSSProperties | |
|
|
2968
|
-
| size | 自定义空状态的大小 | React.CSSProperties['width'] | |
|
|
2969
|
-
| autoFit | 是否自适应容器宽度，当容器宽度小于 size 时自动缩放 | boolean | false |
|
|
2982
|
+
<AntdApiRef url="https://ant.design/components/descriptions-cn/#api"></AntdApiRef>
|
|
2970
2983
|
|
|
2971
2984
|
|
|
2972
|
-
|
|
2985
|
+
## antd API
|
|
2973
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 |
|
|
2974
3003
|
|
|
2975
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
|
+
|
|
2976
3015
|
|
|
2977
3016
|
|
|
2978
3017
|
<DemoTitle title="Drawer" desc="从页面一侧滑入的操作面板，用于承载临时界面内容。">
|
|
@@ -3039,41 +3078,74 @@ v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v
|
|
|
3039
3078
|
|
|
3040
3079
|
|
|
3041
3080
|
|
|
3042
|
-
<DemoTitle title="
|
|
3081
|
+
<DemoTitle title="CollapsePanel" desc="折叠面板">
|
|
3043
3082
|
#### API
|
|
3044
3083
|
|
|
3045
|
-
|
|
3084
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3085
|
+
|--------|--------|--------|--------|
|
|
3086
|
+
| collapsedHeight | 收起状态下显示的内容高度 | number | 0 |
|
|
3087
|
+
| expandedHeight | 展开状态下的内容高度，设置后内容超出时可滚动，不设置则自适应内容高度 | number | 300 |
|
|
3088
|
+
| title | 面板标题 | string \| React.ReactNode | "" |
|
|
3089
|
+
| expandOnPanelClick | 是否允许点击整个面板进行展开 | boolean | false |
|
|
3090
|
+
| extra | 面板右侧内容 | React.ReactNode | |
|
|
3091
|
+
| children | 面板内容 | React.ReactNode | |
|
|
3092
|
+
| defaultExpanded | 是否默认展开 | boolean | false |
|
|
3093
|
+
| classNames | 语义化的classNames | Partial> | |
|
|
3094
|
+
| styles | 语义化的styles | Partial<
|
|
3095
|
+
Record
|
|
3096
|
+
> | |
|
|
3097
|
+
|
|
3046
3098
|
|
|
3047
3099
|
|
|
3048
3100
|
## antd API
|
|
3049
3101
|
|
|
3050
3102
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3051
3103
|
|
|
3052
|
-
###
|
|
3104
|
+
### Collapse
|
|
3053
3105
|
|
|
3054
3106
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3055
3107
|
|--------|--------|--------|--------|--------|
|
|
3056
|
-
|
|
|
3057
|
-
|
|
|
3058
|
-
|
|
|
3059
|
-
|
|
|
3060
|
-
|
|
|
3061
|
-
|
|
|
3062
|
-
|
|
|
3063
|
-
|
|
|
3064
|
-
|
|
|
3065
|
-
|
|
|
3108
|
+
| accordion | 手风琴模式 | boolean | false | |
|
|
3109
|
+
| activeKey | 当前激活 tab 面板的 key | string[] \| string | | |
|
|
3110
|
+
| bordered | 带边框风格的折叠面板 | boolean | true | |
|
|
3111
|
+
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 |
|
|
3112
|
+
| defaultActiveKey | 初始化选中面板的 key | string[] \| string | - | |
|
|
3113
|
+
| destroyOnHidden | 销毁折叠隐藏的面板 | boolean | false | 5.25.0 |
|
|
3114
|
+
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
|
|
3115
|
+
| expandIconPosition | 设置图标位置 | start | - | 4.21.0 |
|
|
3116
|
+
| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
|
|
3117
|
+
| size | 设置折叠面板大小 | large | middle | 5.2.0 |
|
|
3118
|
+
| onChange | 切换面板的回调 | function | - | |
|
|
3119
|
+
| items | 折叠项目内容 | | - | 5.6.0 |
|
|
3066
3120
|
|
|
3067
3121
|
|
|
3068
|
-
###
|
|
3122
|
+
### ItemType
|
|
3069
3123
|
|
|
3070
3124
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3071
3125
|
|--------|--------|--------|--------|--------|
|
|
3072
|
-
|
|
|
3073
|
-
|
|
|
3126
|
+
| classNames | 语义化结构 className | | - | 5.21.0 |
|
|
3127
|
+
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | |
|
|
3128
|
+
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3129
|
+
| key | 对应 activeKey | string \| number | - | |
|
|
3130
|
+
| label | 面板标题 | ReactNode | - | - |
|
|
3131
|
+
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3132
|
+
| styles | 语义化结构 style | | - | 5.21.0 |
|
|
3074
3133
|
|
|
3075
3134
|
|
|
3076
|
-
|
|
3135
|
+
### Collapse.Panel
|
|
3136
|
+
|
|
3137
|
+
<!-- prettier-ignore -->
|
|
3138
|
+
<Container type="warning" title="已废弃">
|
|
3139
|
+
版本 >= 5.6.0 时请使用 items 方式配置面板。
|
|
3140
|
+
</Container>
|
|
3141
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3142
|
+
|--------|--------|--------|--------|--------|
|
|
3143
|
+
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 (icon: 4.24.0) |
|
|
3144
|
+
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3145
|
+
| header | 面板标题 | ReactNode | - | |
|
|
3146
|
+
| key | 对应 activeKey | string \| number | - | |
|
|
3147
|
+
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3148
|
+
|
|
3077
3149
|
|
|
3078
3150
|
|
|
3079
3151
|
|
|
@@ -3299,24 +3371,26 @@ export type FormatType =
|
|
|
3299
3371
|
|
|
3300
3372
|
|
|
3301
3373
|
|
|
3302
|
-
<DemoTitle title="
|
|
3374
|
+
<DemoTitle title="CodeBlock" desc="代码块">
|
|
3303
3375
|
#### API
|
|
3304
3376
|
|
|
3305
3377
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3306
3378
|
|--------|--------|--------|--------|
|
|
3307
|
-
|
|
|
3308
|
-
|
|
|
3309
|
-
|
|
|
3310
|
-
|
|
|
3311
|
-
|
|
|
3312
|
-
|
|
|
3313
|
-
|
|
3314
|
-
|
|
3315
|
-
| styles | 语义化的styles | Partial<
|
|
3316
|
-
Record
|
|
3317
|
-
> | |
|
|
3379
|
+
| language | 语言 | string \| string[] | (必填) |
|
|
3380
|
+
| value | 值 | string | |
|
|
3381
|
+
| className | 类名 | string | |
|
|
3382
|
+
| theme | 主题 | 'dark' \| 'light' | |
|
|
3383
|
+
| readOnly | 只读 | boolean | |
|
|
3384
|
+
| onChange | | (value?: string) => void | |
|
|
3385
|
+
|
|
3386
|
+
|
|
3318
3387
|
|
|
3319
3388
|
|
|
3389
|
+
<DemoTitle title="Collapse" desc="可以折叠/展开的内容区域">
|
|
3390
|
+
#### API
|
|
3391
|
+
|
|
3392
|
+
<AntdApiRef url="https://ant.design/components/collapse-cn/#api"></AntdApiRef>
|
|
3393
|
+
|
|
3320
3394
|
|
|
3321
3395
|
## antd API
|
|
3322
3396
|
|
|
@@ -3370,21 +3444,6 @@ export type FormatType =
|
|
|
3370
3444
|
|
|
3371
3445
|
|
|
3372
3446
|
|
|
3373
|
-
<DemoTitle title="CodeBlock" desc="代码块">
|
|
3374
|
-
#### API
|
|
3375
|
-
|
|
3376
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3377
|
-
|--------|--------|--------|--------|
|
|
3378
|
-
| language | 语言 | string \| string[] | (必填) |
|
|
3379
|
-
| value | 值 | string | (必填) |
|
|
3380
|
-
| className | 类名 | string | |
|
|
3381
|
-
| theme | 主题 | 'dark' \| 'light' | |
|
|
3382
|
-
| readOnly | 只读 | boolean | |
|
|
3383
|
-
| onChange | | (value: string) => void | |
|
|
3384
|
-
|
|
3385
|
-
|
|
3386
|
-
|
|
3387
|
-
|
|
3388
3447
|
<DemoTitle title="Checkbox" desc="收集用户的多项选择。">
|
|
3389
3448
|
#### API
|
|
3390
3449
|
|
|
@@ -3456,197 +3515,84 @@ interface Option {
|
|
|
3456
3515
|
|
|
3457
3516
|
|
|
3458
3517
|
|
|
3459
|
-
<DemoTitle title="
|
|
3518
|
+
<DemoTitle title="Card" desc="通用卡片容器">
|
|
3460
3519
|
#### API
|
|
3461
3520
|
|
|
3462
|
-
|
|
3521
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3522
|
+
|--------|--------|--------|--------|
|
|
3523
|
+
| info | 副标题 | ReactNode | |
|
|
3524
|
+
|
|
3525
|
+
<AntdApiRef url="https://ant.design/components/card-cn/#api"></AntdApiRef>
|
|
3463
3526
|
|
|
3464
3527
|
|
|
3465
3528
|
## antd API
|
|
3466
3529
|
|
|
3467
3530
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3468
3531
|
|
|
3469
|
-
|
|
3532
|
+
|
|
3533
|
+
```jsx
|
|
3534
|
+
<Card title="卡片标题">卡片内容</Card>
|
|
3535
|
+
```
|
|
3536
|
+
|
|
3470
3537
|
|
|
3471
3538
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3472
3539
|
|--------|--------|--------|--------|--------|
|
|
3473
|
-
|
|
|
3474
|
-
|
|
|
3475
|
-
|
|
|
3476
|
-
|
|
|
3477
|
-
|
|
|
3478
|
-
|
|
|
3479
|
-
|
|
|
3480
|
-
|
|
|
3481
|
-
|
|
|
3482
|
-
|
|
|
3483
|
-
|
|
|
3484
|
-
|
|
|
3540
|
+
| actions | 卡片操作组，位置在卡片底部 | Array | - | |
|
|
3541
|
+
| activeTabKey | 当前激活页签的 key | string | - | |
|
|
3542
|
+
| variant | 形态变体 | outlined | outlined | 5.24.0 |
|
|
3543
|
+
| cover | 卡片封面 | ReactNode | - | |
|
|
3544
|
+
| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | 第一个页签的 key | |
|
|
3545
|
+
| extra | 卡片右上角的操作区域 | ReactNode | - | |
|
|
3546
|
+
| hoverable | 鼠标移过时可浮起 | boolean | false | |
|
|
3547
|
+
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false | |
|
|
3548
|
+
| size | card 的尺寸 | default | default | |
|
|
3549
|
+
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | |
|
|
3550
|
+
| tabList | 页签标题列表 | | - | |
|
|
3551
|
+
| tabProps | | - | - | |
|
|
3552
|
+
| title | 卡片标题 | ReactNode | - | |
|
|
3553
|
+
| type | 卡片类型，可设置为 | string | - | |
|
|
3554
|
+
| classNames | 配置卡片内置模块的 className | | - | 5.14.0 |
|
|
3555
|
+
| styles | 配置卡片内置模块的 style | | - | 5.14.0 |
|
|
3556
|
+
| onTabChange | 页签切换的回调 | (key) => void | - | |
|
|
3485
3557
|
|
|
3486
3558
|
|
|
3487
|
-
###
|
|
3559
|
+
### Card.Grid
|
|
3488
3560
|
|
|
3489
3561
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3490
3562
|
|--------|--------|--------|--------|--------|
|
|
3491
|
-
|
|
|
3492
|
-
|
|
|
3493
|
-
|
|
|
3494
|
-
| key | 对应 activeKey | string \| number | - | |
|
|
3495
|
-
| label | 面板标题 | ReactNode | - | - |
|
|
3496
|
-
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3497
|
-
| styles | 语义化结构 style | | - | 5.21.0 |
|
|
3563
|
+
| className | 网格容器类名 | string | - | |
|
|
3564
|
+
| hoverable | 鼠标移过时可浮起 | boolean | true | |
|
|
3565
|
+
| style | 定义网格容器类名的样式 | CSSProperties | - | |
|
|
3498
3566
|
|
|
3499
3567
|
|
|
3500
|
-
###
|
|
3568
|
+
### Card.Meta
|
|
3501
3569
|
|
|
3502
|
-
<!-- prettier-ignore -->
|
|
3503
|
-
<Container type="warning" title="已废弃">
|
|
3504
|
-
版本 >= 5.6.0 时请使用 items 方式配置面板。
|
|
3505
|
-
</Container>
|
|
3506
3570
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3507
3571
|
|--------|--------|--------|--------|--------|
|
|
3508
|
-
|
|
|
3509
|
-
|
|
|
3510
|
-
|
|
|
3511
|
-
|
|
|
3512
|
-
|
|
|
3572
|
+
| avatar | 头像/图标 | ReactNode | - | |
|
|
3573
|
+
| className | 容器类名 | string | - | |
|
|
3574
|
+
| description | 描述内容 | ReactNode | - | |
|
|
3575
|
+
| style | 定义容器类名的样式 | CSSProperties | - | |
|
|
3576
|
+
| title | 标题内容 | ReactNode | - | |
|
|
3513
3577
|
|
|
3514
3578
|
|
|
3515
3579
|
|
|
3516
3580
|
|
|
3517
|
-
<DemoTitle title="
|
|
3581
|
+
<DemoTitle title="Breadcrumb" desc="显示当前页面在系统层级结构中的位置，并能向上返回。">
|
|
3518
3582
|
#### API
|
|
3519
3583
|
|
|
3584
|
+
#### BreadcrumbItems 配置
|
|
3585
|
+
|
|
3520
3586
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3521
3587
|
|--------|--------|--------|--------|
|
|
3522
|
-
|
|
|
3523
|
-
|
|
|
3524
|
-
|
|
3525
|
-
|
|
3526
|
-
|
|
3527
|
-
|
|
3528
|
-
|
|
3529
|
-
|
|
3530
|
-
| tooltipContent | hover上去tooltip的内容 | string \| ReactNode | |
|
|
3531
|
-
| iconType | 百炼图标iconfont的key，依赖ConfigProvider传入的iconfont，例如bl-icon-add | string | |
|
|
3532
|
-
| iconSize | 图标大小 | SparkIconFontProps['size'] | |
|
|
3533
|
-
|
|
3534
|
-
<AntdApiRef url="https://ant.design/components/button-cn/#api"></AntdApiRef>
|
|
3535
|
-
|
|
3536
|
-
|
|
3537
|
-
## antd API
|
|
3538
|
-
|
|
3539
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3540
|
-
|
|
3541
|
-
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
3542
|
-
|
|
3543
|
-
按钮的属性说明如下：
|
|
3544
|
-
|
|
3545
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
3546
|
-
|--------|--------|--------|--------|--------|
|
|
3547
|
-
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
3548
|
-
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
3549
|
-
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
3550
|
-
| color | 设置按钮的颜色 | default | - | default |
|
|
3551
|
-
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
3552
|
-
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
3553
|
-
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
3554
|
-
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
3555
|
-
| htmlType | 设置 | submit | button | |
|
|
3556
|
-
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
3557
|
-
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
3558
|
-
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
3559
|
-
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
3560
|
-
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
3561
|
-
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
3562
|
-
|
|
3563
|
-
|
|
3564
|
-
支持原生 button 的其他所有属性。
|
|
3565
|
-
|
|
3566
|
-
### PresetColors
|
|
3567
|
-
|
|
3568
|
-
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
3569
|
-
|
|
3570
|
-
|
|
3571
|
-
|
|
3572
|
-
<DemoTitle title="Card" desc="通用卡片容器">
|
|
3573
|
-
#### API
|
|
3574
|
-
|
|
3575
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3576
|
-
|--------|--------|--------|--------|
|
|
3577
|
-
| info | 副标题 | ReactNode | |
|
|
3578
|
-
|
|
3579
|
-
<AntdApiRef url="https://ant.design/components/card-cn/#api"></AntdApiRef>
|
|
3580
|
-
|
|
3581
|
-
|
|
3582
|
-
## antd API
|
|
3583
|
-
|
|
3584
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3585
|
-
|
|
3586
|
-
|
|
3587
|
-
```jsx
|
|
3588
|
-
<Card title="卡片标题">卡片内容</Card>
|
|
3589
|
-
```
|
|
3590
|
-
|
|
3591
|
-
|
|
3592
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3593
|
-
|--------|--------|--------|--------|--------|
|
|
3594
|
-
| actions | 卡片操作组，位置在卡片底部 | Array | - | |
|
|
3595
|
-
| activeTabKey | 当前激活页签的 key | string | - | |
|
|
3596
|
-
| variant | 形态变体 | outlined | outlined | 5.24.0 |
|
|
3597
|
-
| cover | 卡片封面 | ReactNode | - | |
|
|
3598
|
-
| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | 第一个页签的 key | |
|
|
3599
|
-
| extra | 卡片右上角的操作区域 | ReactNode | - | |
|
|
3600
|
-
| hoverable | 鼠标移过时可浮起 | boolean | false | |
|
|
3601
|
-
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false | |
|
|
3602
|
-
| size | card 的尺寸 | default | default | |
|
|
3603
|
-
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | |
|
|
3604
|
-
| tabList | 页签标题列表 | | - | |
|
|
3605
|
-
| tabProps | | - | - | |
|
|
3606
|
-
| title | 卡片标题 | ReactNode | - | |
|
|
3607
|
-
| type | 卡片类型，可设置为 | string | - | |
|
|
3608
|
-
| classNames | 配置卡片内置模块的 className | | - | 5.14.0 |
|
|
3609
|
-
| styles | 配置卡片内置模块的 style | | - | 5.14.0 |
|
|
3610
|
-
| onTabChange | 页签切换的回调 | (key) => void | - | |
|
|
3611
|
-
|
|
3612
|
-
|
|
3613
|
-
### Card.Grid
|
|
3614
|
-
|
|
3615
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3616
|
-
|--------|--------|--------|--------|--------|
|
|
3617
|
-
| className | 网格容器类名 | string | - | |
|
|
3618
|
-
| hoverable | 鼠标移过时可浮起 | boolean | true | |
|
|
3619
|
-
| style | 定义网格容器类名的样式 | CSSProperties | - | |
|
|
3620
|
-
|
|
3621
|
-
|
|
3622
|
-
### Card.Meta
|
|
3623
|
-
|
|
3624
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3625
|
-
|--------|--------|--------|--------|--------|
|
|
3626
|
-
| avatar | 头像/图标 | ReactNode | - | |
|
|
3627
|
-
| className | 容器类名 | string | - | |
|
|
3628
|
-
| description | 描述内容 | ReactNode | - | |
|
|
3629
|
-
| style | 定义容器类名的样式 | CSSProperties | - | |
|
|
3630
|
-
| title | 标题内容 | ReactNode | - | |
|
|
3631
|
-
|
|
3632
|
-
|
|
3633
|
-
|
|
3634
|
-
|
|
3635
|
-
<DemoTitle title="Breadcrumb" desc="显示当前页面在系统层级结构中的位置，并能向上返回。">
|
|
3636
|
-
#### API
|
|
3637
|
-
|
|
3638
|
-
#### BreadcrumbItems 配置
|
|
3639
|
-
|
|
3640
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3641
|
-
|--------|--------|--------|--------|
|
|
3642
|
-
| title | 面包屑项标题 | string \| React.ReactNode | (必填) |
|
|
3643
|
-
| iconUrl | 图标地址 | string | '' |
|
|
3644
|
-
| dropdown | 下拉菜单配置 | {
|
|
3645
|
-
items: Array<{
|
|
3646
|
-
key: string;
|
|
3647
|
-
label: React.ReactNode;
|
|
3648
|
-
}>;
|
|
3649
|
-
} | |
|
|
3588
|
+
| title | 面包屑项标题 | string \| React.ReactNode | (必填) |
|
|
3589
|
+
| iconUrl | 图标地址 | string | '' |
|
|
3590
|
+
| dropdown | 下拉菜单配置 | {
|
|
3591
|
+
items: Array<{
|
|
3592
|
+
key: string;
|
|
3593
|
+
label: React.ReactNode;
|
|
3594
|
+
}>;
|
|
3595
|
+
} | |
|
|
3650
3596
|
|
|
3651
3597
|
|
|
3652
3598
|
<AntdApiRef url="https://ant.design/components/breadcrumb-cn/#api"></AntdApiRef>
|
|
@@ -3751,6 +3697,61 @@ return <Breadcrumb itemRender={itemRender} items={items} />;
|
|
|
3751
3697
|
|
|
3752
3698
|
|
|
3753
3699
|
|
|
3700
|
+
<DemoTitle title="Button" desc="按钮用于开始一个即时操作。">
|
|
3701
|
+
#### API
|
|
3702
|
+
|
|
3703
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3704
|
+
|--------|--------|--------|--------|
|
|
3705
|
+
| size | 按钮大小 | 'small' \| 'middle' \| 'large' | 'middle' |
|
|
3706
|
+
| type | 类型 | \| 'primary'
|
|
3707
|
+
\| 'dashed'
|
|
3708
|
+
\| 'link'
|
|
3709
|
+
\| 'text'
|
|
3710
|
+
\| 'default'
|
|
3711
|
+
\| 'primaryLess'
|
|
3712
|
+
\| 'textCompact' | 'deafult' |
|
|
3713
|
+
| tooltipContent | hover上去tooltip的内容 | string \| ReactNode | |
|
|
3714
|
+
| iconType | 百炼图标iconfont的key，依赖ConfigProvider传入的iconfont，例如bl-icon-add | string | |
|
|
3715
|
+
| iconSize | 图标大小 | SparkIconFontProps['size'] | |
|
|
3716
|
+
|
|
3717
|
+
<AntdApiRef url="https://ant.design/components/button-cn/#api"></AntdApiRef>
|
|
3718
|
+
|
|
3719
|
+
|
|
3720
|
+
## antd API
|
|
3721
|
+
|
|
3722
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3723
|
+
|
|
3724
|
+
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
3725
|
+
|
|
3726
|
+
按钮的属性说明如下：
|
|
3727
|
+
|
|
3728
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
3729
|
+
|--------|--------|--------|--------|--------|
|
|
3730
|
+
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
3731
|
+
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
3732
|
+
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
3733
|
+
| color | 设置按钮的颜色 | default | - | default |
|
|
3734
|
+
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
3735
|
+
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
3736
|
+
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
3737
|
+
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
3738
|
+
| htmlType | 设置 | submit | button | |
|
|
3739
|
+
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
3740
|
+
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
3741
|
+
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
3742
|
+
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
3743
|
+
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
3744
|
+
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
3745
|
+
|
|
3746
|
+
|
|
3747
|
+
支持原生 button 的其他所有属性。
|
|
3748
|
+
|
|
3749
|
+
### PresetColors
|
|
3750
|
+
|
|
3751
|
+
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
3752
|
+
|
|
3753
|
+
|
|
3754
|
+
|
|
3754
3755
|
<DemoTitle title="Avatar" desc="用来代表用户或事物，支持图片、图标或字符展示。">
|
|
3755
3756
|
#### API
|
|
3756
3757
|
|
|
@@ -3790,6 +3791,15 @@ Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fa
|
|
|
3790
3791
|
|
|
3791
3792
|
|
|
3792
3793
|
|
|
3794
|
+
<DemoTitle title="Audio" desc="音频展示">
|
|
3795
|
+
#### API
|
|
3796
|
+
|
|
3797
|
+
ApiParser解析结果为空
|
|
3798
|
+
|
|
3799
|
+
|
|
3800
|
+
|
|
3801
|
+
|
|
3802
|
+
|
|
3793
3803
|
<DemoTitle title="Anchor" desc="用于跳转到页面指定位置。">
|
|
3794
3804
|
#### API
|
|
3795
3805
|
|
|
@@ -3843,49 +3853,6 @@ Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fa
|
|
|
3843
3853
|
|
|
3844
3854
|
|
|
3845
3855
|
|
|
3846
|
-
<DemoTitle title="Audio" desc="音频展示">
|
|
3847
|
-
#### API
|
|
3848
|
-
|
|
3849
|
-
ApiParser解析结果为空
|
|
3850
|
-
|
|
3851
|
-
|
|
3852
|
-
|
|
3853
|
-
|
|
3854
|
-
|
|
3855
|
-
<DemoTitle title="Alert" desc="向用户突出显示的重要提示信息。">
|
|
3856
|
-
#### API
|
|
3857
|
-
|
|
3858
|
-
<AntdApiRef url="https://ant.design/components/alert-cn/#api"></AntdApiRef>
|
|
3859
|
-
|
|
3860
|
-
|
|
3861
|
-
## antd API
|
|
3862
|
-
|
|
3863
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3864
|
-
|
|
3865
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3866
|
-
|--------|--------|--------|--------|--------|
|
|
3867
|
-
| action | 自定义操作项 | ReactNode | - | 4.9.0 |
|
|
3868
|
-
| afterClose | 关闭动画结束后触发的回调函数 | () => void | - | |
|
|
3869
|
-
| banner | 是否用作顶部公告 | boolean | false | |
|
|
3870
|
-
| closable | 可关闭配置，>=5.15.0: 支持 | boolean \| ({ closeIcon?: React.ReactNode } & React.AriaAttributes) | false | |
|
|
3871
|
-
| description | 警告提示的辅助性文字介绍 | ReactNode | - | |
|
|
3872
|
-
| icon | 自定义图标， | ReactNode | - | |
|
|
3873
|
-
| message | 警告提示内容 | ReactNode | - | |
|
|
3874
|
-
| showIcon | 是否显示辅助图标 | boolean | false， | |
|
|
3875
|
-
| type | 指定警告提示的样式，有四种选择 | string | info | |
|
|
3876
|
-
| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | - | |
|
|
3877
|
-
|
|
3878
|
-
|
|
3879
|
-
### Alert.ErrorBoundary
|
|
3880
|
-
|
|
3881
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3882
|
-
|--------|--------|--------|--------|--------|
|
|
3883
|
-
| description | 自定义错误内容，如果未指定会展示报错堆栈 | ReactNode | {{ error stack }} | |
|
|
3884
|
-
| message | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }} | |
|
|
3885
|
-
|
|
3886
|
-
|
|
3887
|
-
|
|
3888
|
-
|
|
3889
3856
|
<DemoTitle title="AlertDialog" desc="一种在界面中弹出的对话框，用来向用户传达重要信息，并引导其进行确认或取消等操作。">
|
|
3890
3857
|
#### API
|
|
3891
3858
|
|
|
@@ -4059,27 +4026,113 @@ const confirmed = await modal.confirm({ ... });
|
|
|
4059
4026
|
|
|
4060
4027
|
|
|
4061
4028
|
|
|
4062
|
-
|
|
4029
|
+
<DemoTitle title="Alert" desc="向用户突出显示的重要提示信息。">
|
|
4030
|
+
#### API
|
|
4063
4031
|
|
|
4064
|
-
|
|
4032
|
+
<AntdApiRef url="https://ant.design/components/alert-cn/#api"></AntdApiRef>
|
|
4065
4033
|
|
|
4066
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
|
|
4067
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
|
|
4068
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
|
|
4069
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #676767;"></span> carbonDarkTheme（暗色模式）</div>
|
|
4070
4034
|
|
|
4071
|
-
|
|
4035
|
+
## antd API
|
|
4072
4036
|
|
|
4037
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
4073
4038
|
|
|
4074
|
-
|
|
4075
|
-
|
|
4039
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
4040
|
+
|--------|--------|--------|--------|--------|
|
|
4041
|
+
| action | 自定义操作项 | ReactNode | - | 4.9.0 |
|
|
4042
|
+
| afterClose | 关闭动画结束后触发的回调函数 | () => void | - | |
|
|
4043
|
+
| banner | 是否用作顶部公告 | boolean | false | |
|
|
4044
|
+
| closable | 可关闭配置，>=5.15.0: 支持 | boolean \| ({ closeIcon?: React.ReactNode } & React.AriaAttributes) | false | |
|
|
4045
|
+
| description | 警告提示的辅助性文字介绍 | ReactNode | - | |
|
|
4046
|
+
| icon | 自定义图标， | ReactNode | - | |
|
|
4047
|
+
| message | 警告提示内容 | ReactNode | - | |
|
|
4048
|
+
| showIcon | 是否显示辅助图标 | boolean | false， | |
|
|
4049
|
+
| type | 指定警告提示的样式，有四种选择 | string | info | |
|
|
4050
|
+
| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | - | |
|
|
4076
4051
|
|
|
4077
|
-
const App = () => {
|
|
4078
|
-
return <ConfigProvider {...purpleTheme}>Hello Spark Design!</ConfigProvider>;
|
|
4079
|
-
};
|
|
4080
4052
|
|
|
4081
|
-
|
|
4082
|
-
|
|
4053
|
+
### Alert.ErrorBoundary
|
|
4054
|
+
|
|
4055
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
4056
|
+
|--------|--------|--------|--------|--------|
|
|
4057
|
+
| description | 自定义错误内容，如果未指定会展示报错堆栈 | ReactNode | {{ error stack }} | |
|
|
4058
|
+
| message | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }} | |
|
|
4059
|
+
|
|
4060
|
+
|
|
4061
|
+
|
|
4062
|
+
|
|
4063
|
+
<div align="center"><a name="readme-top"></a>
|
|
4064
|
+
<img height="120" src="https://img.alicdn.com/imgextra/i1/O1CN01ipemFb1EzmZI9LiTe_!!6000000000423-55-tps-28-28.svg" style="border: none">
|
|
4065
|
+
<h1>Alibaba Cloud Spark Design</h1>
|
|
4066
|
+
</div>
|
|
4067
|
+
|
|
4068
|
+
# 概述
|
|
4069
|
+
|
|
4070
|
+
Alibaba Cloud Spark Design 是一个基于 Ant Design 的 React UI 组件库，包含丰富的基础组件和场景组件，专为构建优秀的 LLM 产品而设计。
|
|
4071
|
+
<br />
|
|
4072
|
+
<br />
|
|
4073
|
+
|
|
4074
|
+
## ✨ 特性
|
|
4075
|
+
|
|
4076
|
+
|
|
4077
|
+
- <img height="15" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"> 基于 Ant Design，兼容 Ant Design 生态系统。您可以无需修改代码即可切换到 Spark Design。
|
|
4078
|
+
- 🛡 使用 TypeScript 编写，具有可预测的静态类型。
|
|
4079
|
+
- 🧠 为 LLM 产品设计的各种场景组件。
|
|
4080
|
+
- 💡 与@agentscope-ai/chat 和 @agentscope-ai/flow 配合使用，构建企业级 LLM 应用。
|
|
4081
|
+
- 🎨 多种预设主题。
|
|
4082
|
+
- ☀️ 轻松切换明暗模式。
|
|
4083
|
+
|
|
4084
|
+
## 📦 安装
|
|
4085
|
+
|
|
4086
|
+
|
|
4087
|
+
```bash
|
|
4088
|
+
npm install antd @agentscope-ai/icons @agentscope-ai/design --save
|
|
4089
|
+
```
|
|
4090
|
+
|
|
4091
|
+
|
|
4092
|
+
## Tree Shaking 支持
|
|
4093
|
+
|
|
4094
|
+
@agentscope-ai/design 默认基于 ES 模块支持 tree shaking
|
|
4095
|
+
|
|
4096
|
+
## TypeScript
|
|
4097
|
+
|
|
4098
|
+
@agentscope-ai/chat 使用 TypeScript 编写并提供完整的定义文件。
|
|
4099
|
+
|
|
4100
|
+
## 内置主题
|
|
4101
|
+
|
|
4102
|
+
我们提供四种内置主题：
|
|
4103
|
+
|
|
4104
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
|
|
4105
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
|
|
4106
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
|
|
4107
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #676767;"></span> carbonDarkTheme（暗色模式）</div>
|
|
4108
|
+
|
|
4109
|
+
## 🏗️ 开源
|
|
4110
|
+
|
|
4111
|
+
[@agentscope-ai/design](https://www.npmjs.com/package/@agentscope-ai/design) 和 [@agentscope-ai/chat](https://www.npmjs.com/package/@agentscope-ai/chat) 正在积极推进开源，预计将在 2025 年底完成。目前，您可以通过 npm 访问我们的项目。
|
|
4112
|
+
|
|
4113
|
+
|
|
4114
|
+
|
|
4115
|
+
## 内置主题
|
|
4116
|
+
|
|
4117
|
+
Alibaba Cloud Spark Design 提供四种内置主题：
|
|
4118
|
+
|
|
4119
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
|
|
4120
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
|
|
4121
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
|
|
4122
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #676767;"></span> carbonDarkTheme（暗色模式）</div>
|
|
4123
|
+
|
|
4124
|
+
### 示例用法
|
|
4125
|
+
|
|
4126
|
+
|
|
4127
|
+
```tsx
|
|
4128
|
+
import { ConfigProvider, purpleTheme } from '@agentscope-ai/design';
|
|
4129
|
+
|
|
4130
|
+
const App = () => {
|
|
4131
|
+
return <ConfigProvider {...purpleTheme}>Hello Spark Design!</ConfigProvider>;
|
|
4132
|
+
};
|
|
4133
|
+
|
|
4134
|
+
export default App;
|
|
4135
|
+
```
|
|
4083
4136
|
|
|
4084
4137
|
|
|
4085
4138
|
## 从 Antd token 生成您自己的主题
|
|
@@ -4192,96 +4245,20 @@ export default App;
|
|
|
4192
4245
|
|
|
4193
4246
|
|
|
4194
4247
|
|
|
4195
|
-
|
|
4196
|
-
<img height="120" src="https://img.alicdn.com/imgextra/i1/O1CN01ipemFb1EzmZI9LiTe_!!6000000000423-55-tps-28-28.svg" style="border: none">
|
|
4197
|
-
<h1>Alibaba Cloud Spark Design</h1>
|
|
4198
|
-
</div>
|
|
4199
|
-
|
|
4200
|
-
# 概述
|
|
4201
|
-
|
|
4202
|
-
Alibaba Cloud Spark Design 是一个基于 Ant Design 的 React UI 组件库，包含丰富的基础组件和场景组件，专为构建优秀的 LLM 产品而设计。
|
|
4203
|
-
<br />
|
|
4204
|
-
<br />
|
|
4205
|
-
|
|
4206
|
-
## ✨ 特性
|
|
4207
|
-
|
|
4208
|
-
|
|
4209
|
-
- <img height="15" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"> 基于 Ant Design，兼容 Ant Design 生态系统。您可以无需修改代码即可切换到 Spark Design。
|
|
4210
|
-
- 🛡 使用 TypeScript 编写，具有可预测的静态类型。
|
|
4211
|
-
- 🧠 为 LLM 产品设计的各种场景组件。
|
|
4212
|
-
- 💡 与@agentscope-ai/chat 和 @agentscope-ai/flow 配合使用，构建企业级 LLM 应用。
|
|
4213
|
-
- 🎨 多种预设主题。
|
|
4214
|
-
- ☀️ 轻松切换明暗模式。
|
|
4215
|
-
|
|
4216
|
-
## 📦 安装
|
|
4217
|
-
|
|
4218
|
-
|
|
4219
|
-
```bash
|
|
4220
|
-
npm install antd @agentscope-ai/icons @agentscope-ai/design --save
|
|
4221
|
-
```
|
|
4222
|
-
|
|
4223
|
-
|
|
4224
|
-
## Tree Shaking 支持
|
|
4225
|
-
|
|
4226
|
-
@agentscope-ai/design 默认基于 ES 模块支持 tree shaking
|
|
4227
|
-
|
|
4228
|
-
## TypeScript
|
|
4229
|
-
|
|
4230
|
-
@agentscope-ai/chat 使用 TypeScript 编写并提供完整的定义文件。
|
|
4231
|
-
|
|
4232
|
-
## 内置主题
|
|
4233
|
-
|
|
4234
|
-
我们提供四种内置主题：
|
|
4235
|
-
|
|
4236
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
|
|
4237
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
|
|
4238
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
|
|
4239
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #676767;"></span> carbonDarkTheme（暗色模式）</div>
|
|
4240
|
-
|
|
4241
|
-
## 🏗️ 开源
|
|
4242
|
-
|
|
4243
|
-
[@agentscope-ai/design](https://www.npmjs.com/package/@agentscope-ai/design) 和 [@agentscope-ai/chat](https://www.npmjs.com/package/@agentscope-ai/chat) 正在积极推进开源，预计将在 2025 年底完成。目前，您可以通过 npm 访问我们的项目。
|
|
4244
|
-
|
|
4245
|
-
|
|
4246
|
-
|
|
4247
|
-
# 使用
|
|
4248
|
-
|
|
4249
|
-
|
|
4250
|
-
|
|
4251
|
-
```tsx
|
|
4252
|
-
import { SparkLoadingLine } from '@agentscope-ai/icons';
|
|
4253
|
-
|
|
4254
|
-
export default () => {
|
|
4255
|
-
return (
|
|
4256
|
-
<SparkLoadingLine
|
|
4257
|
-
className="your-class-name"
|
|
4258
|
-
style={{ color: 'var(--sps-color-primary)' }}
|
|
4259
|
-
spin
|
|
4260
|
-
size={48}
|
|
4261
|
-
/>
|
|
4262
|
-
);
|
|
4263
|
-
};
|
|
4264
|
-
|
|
4265
|
-
```
|
|
4266
|
-
|
|
4267
|
-
基本用法
|
|
4268
|
-
|
|
4269
|
-
访问 [Icon Library](https://sparkdesign.agentscope.io/#/resources/icons) 查看全部 Icon
|
|
4270
|
-
|
|
4271
|
-
|
|
4272
|
-
|
|
4273
|
-
# 从零开始使用
|
|
4248
|
+
# 从 Antd 迁移
|
|
4274
4249
|
|
|
4275
4250
|
## 📦 安装
|
|
4276
4251
|
|
|
4277
4252
|
|
|
4278
4253
|
```bash
|
|
4279
|
-
$ npm install
|
|
4254
|
+
$ npm install @agentscope-ai/icons @agentscope-ai/design --save
|
|
4280
4255
|
```
|
|
4281
4256
|
|
|
4282
4257
|
|
|
4283
4258
|
## 🔨 使用
|
|
4284
4259
|
|
|
4260
|
+
从 @agentscope-ai/design 导出的所有同名组件在 API 方面都与 antd 的对应组件兼容，这意味着您无需学习如何使用它们。如果您想充分利用 Alibaba Cloud Spark Design 的新功能，可以尝试使用这些组件而不是 antd 的组件。
|
|
4261
|
+
|
|
4285
4262
|
|
|
4286
4263
|
```tsx
|
|
4287
4264
|
import {
|
|
@@ -4353,33 +4330,17 @@ export default App;
|
|
|
4353
4330
|
```
|
|
4354
4331
|
|
|
4355
4332
|
|
|
4356
|
-
|
|
4357
|
-
|
|
4358
|
-
# 从 Antd 迁移
|
|
4359
|
-
|
|
4360
|
-
## 📦 安装
|
|
4361
|
-
|
|
4362
|
-
|
|
4363
|
-
```bash
|
|
4364
|
-
$ npm install @agentscope-ai/icons @agentscope-ai/design --save
|
|
4365
|
-
```
|
|
4366
|
-
|
|
4367
|
-
|
|
4368
|
-
## 🔨 使用
|
|
4369
|
-
|
|
4370
|
-
从 @agentscope-ai/design 导出的所有同名组件在 API 方面都与 antd 的对应组件兼容，这意味着您无需学习如何使用它们。如果您想充分利用 Alibaba Cloud Spark Design 的新功能，可以尝试使用这些组件而不是 antd 的组件。
|
|
4333
|
+
如果您想继续使用 antd 的组件，那也没问题。您只需要将 antd 的 ConfigProvider 替换为 @agentscope-ai/design 的即可。
|
|
4371
4334
|
|
|
4372
4335
|
|
|
4373
4336
|
```tsx
|
|
4374
4337
|
import {
|
|
4375
|
-
Button,
|
|
4376
|
-
Image,
|
|
4377
4338
|
ConfigProvider,
|
|
4378
4339
|
purpleDarkTheme,
|
|
4379
4340
|
purpleTheme,
|
|
4380
4341
|
} from '@agentscope-ai/design';
|
|
4342
|
+
import { Button, Image, Flex } from 'antd';
|
|
4381
4343
|
import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
|
|
4382
|
-
import { Flex } from 'antd';
|
|
4383
4344
|
import zhCN from 'antd/locale/zh_CN';
|
|
4384
4345
|
import { useState } from 'react';
|
|
4385
4346
|
|
|
@@ -4440,17 +4401,87 @@ export default App;
|
|
|
4440
4401
|
```
|
|
4441
4402
|
|
|
4442
4403
|
|
|
4443
|
-
|
|
4404
|
+
|
|
4405
|
+
|
|
4406
|
+
# 使用
|
|
4407
|
+
|
|
4408
|
+
|
|
4409
|
+
|
|
4410
|
+
```tsx
|
|
4411
|
+
import { SparkLoadingLine } from '@agentscope-ai/icons';
|
|
4412
|
+
|
|
4413
|
+
export default () => {
|
|
4414
|
+
return (
|
|
4415
|
+
<SparkLoadingLine
|
|
4416
|
+
className="your-class-name"
|
|
4417
|
+
style={{ color: 'var(--sps-color-primary)' }}
|
|
4418
|
+
spin
|
|
4419
|
+
size={48}
|
|
4420
|
+
/>
|
|
4421
|
+
);
|
|
4422
|
+
};
|
|
4423
|
+
|
|
4424
|
+
```
|
|
4425
|
+
|
|
4426
|
+
基本用法
|
|
4427
|
+
|
|
4428
|
+
访问 [Icon Library](https://sparkdesign.agentscope.io/#/resources/icons) 查看全部 Icon
|
|
4429
|
+
|
|
4430
|
+
|
|
4431
|
+
|
|
4432
|
+
# Vibe 编程
|
|
4433
|
+
|
|
4434
|
+
## LLMs.txt
|
|
4435
|
+
|
|
4436
|
+
为了让 Cursor 和 Claude Code 等工具理解 Spark Design，我们支持 LLMs.txt 文件，使 Spark Design 的文档可供大型语言模型使用。
|
|
4437
|
+
|
|
4438
|
+
|
|
4439
|
+
- [index.llms.txt](https://g.alicdn.com/code/npm/@ali/agentscope-ai-design/4.7.2/docs-dist/llms/index.llms.txt)：主要的 LLMs.txt 索引文件
|
|
4440
|
+
- [all.llms.txt](https://g.alicdn.com/code/npm/@ali/agentscope-ai-design/4.7.2/docs-dist/llms/all.llms.txt)：Spark Design 的完整文档
|
|
4441
|
+
|
|
4442
|
+
在 Cursor 中使用 @Docs 功能将 LLMs.txt 文件包含在您的项目中。[了解更多](https://docs.cursor.com/en/context/@-symbols/@-docs)
|
|
4443
|
+
|
|
4444
|
+
## D2C
|
|
4445
|
+
|
|
4446
|
+
在前端使用 Alibaba Cloud Spark Design、设计稿使用 Spark Design 套件的前提下，通过 masterGo 视觉稿生成代码可以做到以下几点：
|
|
4447
|
+
|
|
4448
|
+
|
|
4449
|
+
- 准确识别 icon
|
|
4450
|
+
- 使用标准 css token
|
|
4451
|
+
- 无需测量间距、圆角等数据，AI 直接还原布局（90%以上概率准确生成）
|
|
4452
|
+
- 使用标准组件还原页面，大部分标准组件可一次性正确生成，无需二次调整
|
|
4453
|
+
|
|
4454
|
+
<div>
|
|
4455
|
+
<video style="width: 100%" controls src="https://cloud.video.taobao.com/vod/PrrYzvYJkoDlbJwoL8Ei1Bo_60LrKAROCojWxB_EAYs.mp4" />
|
|
4456
|
+
</div>
|
|
4457
|
+
|
|
4458
|
+
我们会在不久的将来开放 masterGo 的设计套件和 rules，帮助您高效率还原视觉稿
|
|
4459
|
+
|
|
4460
|
+
|
|
4461
|
+
|
|
4462
|
+
# 从零开始使用
|
|
4463
|
+
|
|
4464
|
+
## 📦 安装
|
|
4465
|
+
|
|
4466
|
+
|
|
4467
|
+
```bash
|
|
4468
|
+
$ npm install antd @agentscope-ai/icons @agentscope-ai/design --save
|
|
4469
|
+
```
|
|
4470
|
+
|
|
4471
|
+
|
|
4472
|
+
## 🔨 使用
|
|
4444
4473
|
|
|
4445
4474
|
|
|
4446
4475
|
```tsx
|
|
4447
4476
|
import {
|
|
4477
|
+
Button,
|
|
4478
|
+
Image,
|
|
4448
4479
|
ConfigProvider,
|
|
4449
4480
|
purpleDarkTheme,
|
|
4450
4481
|
purpleTheme,
|
|
4451
4482
|
} from '@agentscope-ai/design';
|
|
4452
|
-
import { Button, Image, Flex } from 'antd';
|
|
4453
4483
|
import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
|
|
4484
|
+
import { Flex } from 'antd';
|
|
4454
4485
|
import zhCN from 'antd/locale/zh_CN';
|
|
4455
4486
|
import { useState } from 'react';
|
|
4456
4487
|
|
|
@@ -4513,36 +4544,6 @@ export default App;
|
|
|
4513
4544
|
|
|
4514
4545
|
|
|
4515
4546
|
|
|
4516
|
-
# Vibe 编程
|
|
4517
|
-
|
|
4518
|
-
## LLMs.txt
|
|
4519
|
-
|
|
4520
|
-
为了让 Cursor 和 Claude Code 等工具理解 Spark Design，我们支持 LLMs.txt 文件，使 Spark Design 的文档可供大型语言模型使用。
|
|
4521
|
-
|
|
4522
|
-
|
|
4523
|
-
- [index.llms.txt](https://g.alicdn.com/code/npm/@ali/agentscope-ai-design/4.7.2/docs-dist/llms/index.llms.txt)：主要的 LLMs.txt 索引文件
|
|
4524
|
-
- [all.llms.txt](https://g.alicdn.com/code/npm/@ali/agentscope-ai-design/4.7.2/docs-dist/llms/all.llms.txt)：Spark Design 的完整文档
|
|
4525
|
-
|
|
4526
|
-
在 Cursor 中使用 @Docs 功能将 LLMs.txt 文件包含在您的项目中。[了解更多](https://docs.cursor.com/en/context/@-symbols/@-docs)
|
|
4527
|
-
|
|
4528
|
-
## D2C
|
|
4529
|
-
|
|
4530
|
-
在前端使用 Alibaba Cloud Spark Design、设计稿使用 Spark Design 套件的前提下，通过 masterGo 视觉稿生成代码可以做到以下几点：
|
|
4531
|
-
|
|
4532
|
-
|
|
4533
|
-
- 准确识别 icon
|
|
4534
|
-
- 使用标准 css token
|
|
4535
|
-
- 无需测量间距、圆角等数据，AI 直接还原布局（90%以上概率准确生成）
|
|
4536
|
-
- 使用标准组件还原页面，大部分标准组件可一次性正确生成，无需二次调整
|
|
4537
|
-
|
|
4538
|
-
<div>
|
|
4539
|
-
<video style="width: 100%" controls src="https://cloud.video.taobao.com/vod/PrrYzvYJkoDlbJwoL8Ei1Bo_60LrKAROCojWxB_EAYs.mp4" />
|
|
4540
|
-
</div>
|
|
4541
|
-
|
|
4542
|
-
我们会在不久的将来开放 masterGo 的设计套件和 rules，帮助您高效率还原视觉稿
|
|
4543
|
-
|
|
4544
|
-
|
|
4545
|
-
|
|
4546
4547
|
# Tokens
|
|
4547
4548
|
|
|
4548
4549
|
除了来自 [antd](https://ant.design/theme-editor) 的固有 tokens 之外，Spark Design 在原有基础上扩展了更多变量。完整的 token 示例如下所示：
|