@agentscope-ai/design 1.0.27-beta.1769680455227 → 1.0.27-beta.1769741632982
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/CodeBlock/demo/demo1.js +5 -2
- package/lib/components/commonComponents/CodeBlock/index.style.d.ts +6 -0
- package/lib/components/commonComponents/CodeBlock/index.style.js +8 -1
- package/llms/all.llms.txt +889 -888
- package/llms/components/commonComponents/PromptsEditor/index.zh-CN.llms.txt +2 -1
- package/llms/index.llms.txt +19 -19
- package/package.json +1 -1
package/llms/all.llms.txt
CHANGED
|
@@ -47,6 +47,167 @@
|
|
|
47
47
|
|
|
48
48
|
|
|
49
49
|
|
|
50
|
+
<DemoTitle title="TimePicker" desc="输入或选择时间的控件。">
|
|
51
|
+
#### API
|
|
52
|
+
|
|
53
|
+
<AntdApiRef url="https://ant.design/components/time-picker-cn/#api"></AntdApiRef>
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
## antd API
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
```jsx
|
|
64
|
+
import dayjs from 'dayjs';
|
|
65
|
+
import customParseFormat from 'dayjs/plugin/customParseFormat'
|
|
66
|
+
|
|
67
|
+
dayjs.extend(customParseFormat)
|
|
68
|
+
<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
|
|
69
|
+
```
|
|
70
|
+
|
|
71
|
+
|
|
72
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
73
|
+
|--------|--------|--------|--------|--------|
|
|
74
|
+
| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
|
|
75
|
+
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
76
|
+
| cellRender | 自定义单元格的内容 | (current: number, info: { originNode: React.ReactNode, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
|
|
77
|
+
| changeOnScroll | 在滚动时改变选择值 | boolean | false | 5.14.0 |
|
|
78
|
+
| className | 选择器类名 | string | - | |
|
|
79
|
+
| defaultValue | 默认时间 | | - | |
|
|
80
|
+
| disabled | 禁用全部操作 | boolean | false | |
|
|
81
|
+
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
82
|
+
| format | 展示的时间格式 | string | HH:mm:ss | |
|
|
83
|
+
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | |
|
|
84
|
+
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | |
|
|
85
|
+
| hourStep | 小时选项间隔 | number | 1 | |
|
|
86
|
+
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
|
|
87
|
+
| minuteStep | 分钟选项间隔 | number | 1 | |
|
|
88
|
+
| needConfirm | 是否需要确认按钮，为 | boolean | - | 5.14.0 |
|
|
89
|
+
| open | 面板是否打开 | boolean | false | |
|
|
90
|
+
| placeholder | 没有值的时候显示的内容 | string \| [string, string] | 请选择时间 | |
|
|
91
|
+
| placement | 选择框弹出的位置 | bottomLeft | bottomLeft | |
|
|
92
|
+
| popupClassName | 弹出层类名 | string | - | |
|
|
93
|
+
| popupStyle | 弹出层样式对象 | object | - | |
|
|
94
|
+
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
|
|
95
|
+
| renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - | |
|
|
96
|
+
| secondStep | 秒选项间隔 | number | 1 | |
|
|
97
|
+
| showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
|
|
98
|
+
| size | 输入框大小， | large | - | |
|
|
99
|
+
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
100
|
+
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
|
101
|
+
| use12Hours | 使用 12 小时制，为 true 时 | boolean | false | |
|
|
102
|
+
| value | 当前时间 | | - | |
|
|
103
|
+
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
104
|
+
| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - | |
|
|
105
|
+
| onChange | 时间发生变化的回调 | function(time: dayjs, timeString: string): void | - | |
|
|
106
|
+
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - | |
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
#### DisabledTime
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
```typescript
|
|
113
|
+
type DisabledTime = (now: Dayjs) => {
|
|
114
|
+
disabledHours?: () => number[];
|
|
115
|
+
disabledMinutes?: (selectedHour: number) => number[];
|
|
116
|
+
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
117
|
+
disabledMilliseconds?: (
|
|
118
|
+
selectedHour: number,
|
|
119
|
+
selectedMinute: number,
|
|
120
|
+
selectedSecond: number,
|
|
121
|
+
) => number[];
|
|
122
|
+
};
|
|
123
|
+
```
|
|
124
|
+
|
|
125
|
+
|
|
126
|
+
注意：`disabledMilliseconds` 为 `5.14.0` 新增。
|
|
127
|
+
|
|
128
|
+
## 方法
|
|
129
|
+
|
|
130
|
+
| 名称 | 描述 | 版本 |
|
|
131
|
+
|--------|--------|--------|
|
|
132
|
+
| blur() | 移除焦点 | |
|
|
133
|
+
| focus() | 获取焦点 | |
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
## RangePicker
|
|
137
|
+
|
|
138
|
+
属性与 DatePicker 的 [RangePicker](/components/date-picker-cn#rangepicker) 相同。还包含以下属性：
|
|
139
|
+
|
|
140
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
141
|
+
|--------|--------|--------|--------|--------|
|
|
142
|
+
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
143
|
+
| order | 始末时间是否自动排序 | boolean | true | 4.1.0 |
|
|
144
|
+
|
|
145
|
+
|
|
146
|
+
### RangeDisabledTime
|
|
147
|
+
|
|
148
|
+
|
|
149
|
+
```typescript
|
|
150
|
+
type RangeDisabledTime = (
|
|
151
|
+
now: Dayjs,
|
|
152
|
+
type = 'start' | 'end',
|
|
153
|
+
) => {
|
|
154
|
+
disabledHours?: () => number[];
|
|
155
|
+
disabledMinutes?: (selectedHour: number) => number[];
|
|
156
|
+
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
157
|
+
};
|
|
158
|
+
```
|
|
159
|
+
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
<DemoTitle title="Video" desc="视频展示">
|
|
164
|
+
#### API
|
|
165
|
+
|
|
166
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
167
|
+
|--------|--------|--------|--------|
|
|
168
|
+
| mouseEnterAutoPlay | 鼠标进入时是否自动播放 | boolean | false |
|
|
169
|
+
| children | video内部设置了按钮在暗色背景下的样式，如果有一些操作按钮想继承这个样式可以在这里传入 | React.ReactNode | |
|
|
170
|
+
|
|
171
|
+
|
|
172
|
+
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
|
|
176
|
+
<DemoTitle title="Tag" desc="进行标记和分类的小标签">
|
|
177
|
+
#### API
|
|
178
|
+
|
|
179
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
180
|
+
|--------|--------|--------|--------|
|
|
181
|
+
| size | 尺寸 | 'small' \| 'middle' | 'middle' |
|
|
182
|
+
| color | 标签色 | SparkTagColors \| string | 'purple' |
|
|
183
|
+
|
|
184
|
+
<AntdApiRef url="https://ant.design/components/tag-cn/#api"></AntdApiRef>
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
## antd API
|
|
188
|
+
|
|
189
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
190
|
+
|
|
191
|
+
### Tag
|
|
192
|
+
|
|
193
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
194
|
+
|--------|--------|--------|--------|--------|
|
|
195
|
+
| closeIcon | 自定义关闭按钮。5.7.0：设置为 | ReactNode | false | 4.4.0 |
|
|
196
|
+
| icon | 设置图标 | ReactNode | - | |
|
|
197
|
+
| bordered | 是否有边框 | boolean | true | 5.4.0 |
|
|
198
|
+
| onClose | 关闭时的回调（可通过 | (e: React.MouseEvent) => void | - | |
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
### Tag.CheckableTag
|
|
202
|
+
|
|
203
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
204
|
+
|--------|--------|--------|--------|
|
|
205
|
+
| checked | 设置标签的选中状态 | boolean | false |
|
|
206
|
+
| onChange | 点击标签时触发的回调 | (checked) => void | - |
|
|
207
|
+
|
|
208
|
+
|
|
209
|
+
|
|
210
|
+
|
|
50
211
|
<DemoTitle title="Upload" desc="文件选择上传和拖拽上传控件。">
|
|
51
212
|
#### API
|
|
52
213
|
|
|
@@ -143,41 +304,6 @@
|
|
|
143
304
|
|
|
144
305
|
|
|
145
306
|
|
|
146
|
-
<DemoTitle title="Tag" desc="进行标记和分类的小标签">
|
|
147
|
-
#### API
|
|
148
|
-
|
|
149
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
150
|
-
|--------|--------|--------|--------|
|
|
151
|
-
| size | 尺寸 | 'small' \| 'middle' | 'middle' |
|
|
152
|
-
| color | 标签色 | SparkTagColors \| string | 'purple' |
|
|
153
|
-
|
|
154
|
-
<AntdApiRef url="https://ant.design/components/tag-cn/#api"></AntdApiRef>
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
## antd API
|
|
158
|
-
|
|
159
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
160
|
-
|
|
161
|
-
### Tag
|
|
162
|
-
|
|
163
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
164
|
-
|--------|--------|--------|--------|--------|
|
|
165
|
-
| closeIcon | 自定义关闭按钮。5.7.0：设置为 | ReactNode | false | 4.4.0 |
|
|
166
|
-
| icon | 设置图标 | ReactNode | - | |
|
|
167
|
-
| bordered | 是否有边框 | boolean | true | 5.4.0 |
|
|
168
|
-
| onClose | 关闭时的回调（可通过 | (e: React.MouseEvent) => void | - | |
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
### Tag.CheckableTag
|
|
172
|
-
|
|
173
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
174
|
-
|--------|--------|--------|--------|
|
|
175
|
-
| checked | 设置标签的选中状态 | boolean | false |
|
|
176
|
-
| onChange | 点击标签时触发的回调 | (checked) => void | - |
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
|
|
181
307
|
<DemoTitle title="Tabs" desc="用户可以通过点击不同的标签在同一页面中查看不同的内容区域。">
|
|
182
308
|
#### API
|
|
183
309
|
|
|
@@ -249,61 +375,238 @@
|
|
|
249
375
|
|
|
250
376
|
|
|
251
377
|
|
|
252
|
-
<DemoTitle title="
|
|
378
|
+
<DemoTitle title="Steps" desc="引导用户按照流程完成任务的导航条。">
|
|
253
379
|
#### API
|
|
254
380
|
|
|
255
|
-
<AntdApiRef url="https://ant.design/components/
|
|
381
|
+
<AntdApiRef url="https://ant.design/components/steps-cn/#api"></AntdApiRef>
|
|
256
382
|
|
|
257
383
|
|
|
258
384
|
## antd API
|
|
259
385
|
|
|
260
386
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
261
387
|
|
|
262
|
-
###
|
|
388
|
+
### Steps
|
|
389
|
+
|
|
390
|
+
整体步骤条。
|
|
263
391
|
|
|
264
392
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
265
393
|
|--------|--------|--------|--------|--------|
|
|
266
|
-
|
|
|
267
|
-
|
|
|
268
|
-
|
|
|
269
|
-
|
|
|
270
|
-
|
|
|
271
|
-
|
|
|
272
|
-
|
|
|
273
|
-
|
|
|
274
|
-
|
|
|
275
|
-
|
|
|
276
|
-
|
|
|
277
|
-
|
|
|
278
|
-
|
|
|
279
|
-
| rowHoverable | 表格行是否开启 hover 交互 | boolean | true | 5.16.0 |
|
|
280
|
-
| scroll | 表格是否可滚动，也可以指定滚动区域的宽、高， | object | - | |
|
|
281
|
-
| showHeader | 是否显示表头 | boolean | true | |
|
|
282
|
-
| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示。当参数类型为对象时，将被设置为 Tooltip 的属性 | boolean \| | { target: 'full-header' } | 5.16.0 |
|
|
283
|
-
| size | 表格大小 | large | large | |
|
|
284
|
-
| sortDirections | 支持的排序方式，取值为 | Array | [ | |
|
|
285
|
-
| sticky | 设置粘性头部和滚动条 | boolean \| | - | 4.6.0 (getContainer: 4.7.0) |
|
|
286
|
-
| summary | 总结栏 | (currentData) => ReactNode | - | |
|
|
287
|
-
| tableLayout | 表格元素的 | - \| | 无 | |
|
|
288
|
-
| title | 表格标题 | function(currentPageData) | - | |
|
|
289
|
-
| virtual | 支持虚拟列表 | boolean | - | 5.9.0 |
|
|
290
|
-
| onChange | 分页、排序、筛选变化时触发 | function(pagination, filters, sorter, extra: { currentDataSource: [], action: | - | |
|
|
291
|
-
| onHeaderRow | 设置头部行属性 | function(columns, index) | - | |
|
|
292
|
-
| onRow | 设置行属性 | function(record, index) | - | |
|
|
293
|
-
| onScroll | 表单内容滚动时触发（虚拟滚动下只有垂直滚动会触发事件） | function(event) | - | 5.16.0 |
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
### Table ref
|
|
297
|
-
|
|
298
|
-
| 参数 | 说明 | 类型 | 版本 |
|
|
299
|
-
|--------|--------|--------|--------|
|
|
300
|
-
| nativeElement | 最外层 div 元素 | HTMLDivElement | 5.11.0 |
|
|
301
|
-
| scrollTo | 滚动到目标位置（设置 | (config: { index?: number, key?: React.Key, top?: number }) => void | 5.11.0 |
|
|
394
|
+
| className | 步骤条类名 | string | - | |
|
|
395
|
+
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 | number | 0 | |
|
|
396
|
+
| direction | 指定步骤条方向。目前支持水平（ | string | horizontal | |
|
|
397
|
+
| initial | 起始序号，从 0 开始记数 | number | 0 | |
|
|
398
|
+
| labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选 | string | horizontal | |
|
|
399
|
+
| percent | 当前 | number | - | 4.5.0 |
|
|
400
|
+
| progressDot | 点状步骤条，可以设置为一个 function，labelPlacement 将强制为 | boolean \| (iconDot, {index, status, title, description}) => ReactNode | false | |
|
|
401
|
+
| responsive | 当屏幕宽度小于 | boolean | true | |
|
|
402
|
+
| size | 指定大小，目前支持普通（ | string | default | |
|
|
403
|
+
| status | 指定当前步骤的状态，可选 | string | process | |
|
|
404
|
+
| type | 步骤条类型，可选 | string | default | inline: 5.0 |
|
|
405
|
+
| onChange | 点击切换步骤时触发 | (current) => void | - | |
|
|
406
|
+
| items | 配置选项卡内容 | | [] | 4.24.0 |
|
|
302
407
|
|
|
303
408
|
|
|
304
|
-
|
|
409
|
+
### `type="inline"`
|
|
410
|
+
|
|
411
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
412
|
+
|--------|--------|--------|--------|--------|
|
|
413
|
+
| className | 步骤条类名 | string | - | |
|
|
414
|
+
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 | number | 0 | |
|
|
415
|
+
| initial | 起始序号，从 0 开始记数 | number | 0 | |
|
|
416
|
+
| status | 指定当前步骤的状态，可选 | string | process | |
|
|
417
|
+
| onChange | 点击切换步骤时触发 | (current) => void | - | |
|
|
418
|
+
| items | 配置选项卡内容，不支持 | | [] | 4.24.0 |
|
|
419
|
+
|
|
420
|
+
|
|
421
|
+
### StepItem
|
|
422
|
+
|
|
423
|
+
步骤条内的每一个步骤。
|
|
424
|
+
|
|
425
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
426
|
+
|--------|--------|--------|--------|--------|
|
|
427
|
+
| description | 步骤的详情描述，可选 | ReactNode | - | |
|
|
428
|
+
| disabled | 禁用点击 | boolean | false | |
|
|
429
|
+
| icon | 步骤图标的类型，可选 | ReactNode | - | |
|
|
430
|
+
| status | 指定状态。当不配置该属性时，会使用 Steps 的 | string | wait | |
|
|
431
|
+
| subTitle | 子标题 | ReactNode | - | |
|
|
432
|
+
| title | 标题 | ReactNode | - | |
|
|
433
|
+
|
|
434
|
+
|
|
435
|
+
|
|
436
|
+
|
|
437
|
+
<DemoTitle title="Statistic" desc="展示统计数值">
|
|
438
|
+
#### API
|
|
439
|
+
|
|
440
|
+
<AntdApiRef url="https://ant.design/components/statistic-cn/#api"></AntdApiRef>
|
|
441
|
+
|
|
442
|
+
|
|
443
|
+
## antd API
|
|
444
|
+
|
|
445
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
446
|
+
|
|
447
|
+
#### Statistic
|
|
448
|
+
|
|
449
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
450
|
+
|--------|--------|--------|--------|--------|
|
|
451
|
+
| decimalSeparator | 设置小数点 | string | . | |
|
|
452
|
+
| formatter | 自定义数值展示 | (value) => ReactNode | - | |
|
|
453
|
+
| groupSeparator | 设置千分位标识符 | string | , | |
|
|
454
|
+
| loading | 数值是否加载中 | boolean | false | 4.8.0 |
|
|
455
|
+
| precision | 数值精度 | number | - | |
|
|
456
|
+
| prefix | 设置数值的前缀 | ReactNode | - | |
|
|
457
|
+
| suffix | 设置数值的后缀 | ReactNode | - | |
|
|
458
|
+
| title | 数值的标题 | ReactNode | - | |
|
|
459
|
+
| value | 数值内容 | string \| number | - | |
|
|
460
|
+
| valueStyle | 设置数值区域的样式 | CSSProperties | - | |
|
|
461
|
+
|
|
462
|
+
|
|
463
|
+
#### Statistic.Countdown <Badge type="error">Deprecated</Badge>
|
|
464
|
+
|
|
465
|
+
<!-- <Antd component="Alert" message="版本 >= 5.25.0 时请使用 Statistic.Timer 作为替代方案。" type="warning" banner="true"></Antd> -->
|
|
466
|
+
|
|
467
|
+
<!-- prettier-ignore -->
|
|
468
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
469
|
+
|--------|--------|--------|--------|--------|
|
|
470
|
+
| format | 格式化倒计时展示，参考 | string | HH:mm:ss | |
|
|
471
|
+
| prefix | 设置数值的前缀 | ReactNode | - | |
|
|
472
|
+
| suffix | 设置数值的后缀 | ReactNode | - | |
|
|
473
|
+
| title | 数值的标题 | ReactNode | - | |
|
|
474
|
+
| value | 数值内容 | number | - | |
|
|
475
|
+
| valueStyle | 设置数值区域的样式 | CSSProperties | - | |
|
|
476
|
+
| onFinish | 倒计时完成时触发 | () => void | - | |
|
|
477
|
+
| onChange | 倒计时时间变化时触发 | (value: number) => void | - | |
|
|
478
|
+
|
|
479
|
+
|
|
480
|
+
#### Statistic.Timer <Badge>5.25.0+</Badge>
|
|
481
|
+
|
|
482
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
483
|
+
|--------|--------|--------|--------|--------|
|
|
484
|
+
| type | 计时类型，正计时或者倒计时 | countdown | - | |
|
|
485
|
+
| format | 格式化倒计时展示，参考 | string | HH:mm:ss | |
|
|
486
|
+
| prefix | 设置数值的前缀 | ReactNode | - | |
|
|
487
|
+
| suffix | 设置数值的后缀 | ReactNode | - | |
|
|
488
|
+
| title | 数值的标题 | ReactNode | - | |
|
|
489
|
+
| value | 数值内容 | number | - | |
|
|
490
|
+
| valueStyle | 设置数值区域的样式 | CSSProperties | - | |
|
|
491
|
+
| onFinish | 倒计时完成时触发, 指定为 | () => void | - | |
|
|
492
|
+
| onChange | 倒计时时间变化时触发 | (value: number) => void | - | |
|
|
493
|
+
|
|
494
|
+
|
|
495
|
+
|
|
496
|
+
|
|
497
|
+
<DemoTitle title="Spinner" desc="指示页面或区块的加载中状态">
|
|
498
|
+
#### API
|
|
499
|
+
|
|
500
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
501
|
+
|--------|--------|--------|--------|
|
|
502
|
+
| tip | indicator下方的tip | React.ReactNode | - |
|
|
503
|
+
| indicator | 自定义indicator，用于展示progress的百分比和加载文案 | React.ReactNode | - |
|
|
504
|
+
| children | 被spinner包裹的子元素 | React.ReactNode | - |
|
|
505
|
+
| style | spinner最外层的样式 | React.CSSProperties | - |
|
|
506
|
+
| className | spinner的类名 | string | - |
|
|
507
|
+
| percent | 进度条的百分比 | number | - |
|
|
508
|
+
| spinning | 是否为加载中状态 | boolean | false |
|
|
509
|
+
| showProgress | 是否显示进度条，如果为true，不需要手动在children中添加Progress组件 | boolean | false |
|
|
510
|
+
|
|
305
511
|
|
|
306
|
-
|
|
512
|
+
|
|
513
|
+
|
|
514
|
+
<DemoTitle title="Switch" desc="使用开关切换两种状态之间。">
|
|
515
|
+
#### API
|
|
516
|
+
|
|
517
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
518
|
+
|--------|--------|--------|--------|
|
|
519
|
+
| label | Switch后的内容 | ReactNode | |
|
|
520
|
+
|
|
521
|
+
<AntdApiRef url="https://ant.design/components/switch-cn/#api"></AntdApiRef>
|
|
522
|
+
|
|
523
|
+
|
|
524
|
+
## antd API
|
|
525
|
+
|
|
526
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
527
|
+
|
|
528
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
529
|
+
|--------|--------|--------|--------|--------|
|
|
530
|
+
| autoFocus | 组件自动获取焦点 | boolean | false | |
|
|
531
|
+
| checked | 指定当前是否选中 | boolean | false | |
|
|
532
|
+
| checkedChildren | 选中时的内容 | ReactNode | - | |
|
|
533
|
+
| className | Switch 器类名 | string | - | |
|
|
534
|
+
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
535
|
+
| defaultValue | defaultChecked | boolean | - | 5.12.0 |
|
|
536
|
+
| disabled | 是否禁用 | boolean | false | |
|
|
537
|
+
| loading | 加载中的开关 | boolean | false | |
|
|
538
|
+
| size | 开关大小，可选值： | string | default | |
|
|
539
|
+
| unCheckedChildren | 非选中时的内容 | ReactNode | - | |
|
|
540
|
+
| value | checked | boolean | - | 5.12.0 |
|
|
541
|
+
| onChange | 变化时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
542
|
+
| onClick | 点击时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
543
|
+
|
|
544
|
+
|
|
545
|
+
## 方法
|
|
546
|
+
|
|
547
|
+
| 名称 | 描述 |
|
|
548
|
+
|--------|--------|
|
|
549
|
+
| blur() | 移除焦点 |
|
|
550
|
+
| focus() | 获取焦点 |
|
|
551
|
+
|
|
552
|
+
|
|
553
|
+
|
|
554
|
+
|
|
555
|
+
<DemoTitle title="Table" desc="展示行列数据。">
|
|
556
|
+
#### API
|
|
557
|
+
|
|
558
|
+
<AntdApiRef url="https://ant.design/components/table-cn/#api"></AntdApiRef>
|
|
559
|
+
|
|
560
|
+
|
|
561
|
+
## antd API
|
|
562
|
+
|
|
563
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
564
|
+
|
|
565
|
+
### Table
|
|
566
|
+
|
|
567
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
568
|
+
|--------|--------|--------|--------|--------|
|
|
569
|
+
| bordered | 是否展示外边框和列边框 | boolean | false | |
|
|
570
|
+
| columns | 表格列的配置描述，具体项见下表 | | - | |
|
|
571
|
+
| components | 覆盖默认的 table 元素 | | - | |
|
|
572
|
+
| dataSource | 数据数组 | object[] | - | |
|
|
573
|
+
| expandable | 配置展开属性 | | - | |
|
|
574
|
+
| footer | 表格尾部 | function(currentPageData) | - | |
|
|
575
|
+
| getPopupContainer | 设置表格内各类浮层的渲染节点，如筛选菜单 | (triggerNode) => HTMLElement | () => TableHtmlElement | |
|
|
576
|
+
| loading | 页面是否加载中 | boolean \| | false | |
|
|
577
|
+
| locale | 默认文案设置，目前包括排序、过滤、空数据文案 | object | | |
|
|
578
|
+
| pagination | 分页器，参考 | object \| | - | |
|
|
579
|
+
| rowClassName | 表格行的类名 | function(record, index): string | - | |
|
|
580
|
+
| rowKey | 表格行 key 的取值，可以是字符串或一个函数 | string \| function(record): string | key | |
|
|
581
|
+
| rowSelection | 表格行是否可选择， | object | - | |
|
|
582
|
+
| rowHoverable | 表格行是否开启 hover 交互 | boolean | true | 5.16.0 |
|
|
583
|
+
| scroll | 表格是否可滚动，也可以指定滚动区域的宽、高， | object | - | |
|
|
584
|
+
| showHeader | 是否显示表头 | boolean | true | |
|
|
585
|
+
| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示。当参数类型为对象时，将被设置为 Tooltip 的属性 | boolean \| | { target: 'full-header' } | 5.16.0 |
|
|
586
|
+
| size | 表格大小 | large | large | |
|
|
587
|
+
| sortDirections | 支持的排序方式，取值为 | Array | [ | |
|
|
588
|
+
| sticky | 设置粘性头部和滚动条 | boolean \| | - | 4.6.0 (getContainer: 4.7.0) |
|
|
589
|
+
| summary | 总结栏 | (currentData) => ReactNode | - | |
|
|
590
|
+
| tableLayout | 表格元素的 | - \| | 无 | |
|
|
591
|
+
| title | 表格标题 | function(currentPageData) | - | |
|
|
592
|
+
| virtual | 支持虚拟列表 | boolean | - | 5.9.0 |
|
|
593
|
+
| onChange | 分页、排序、筛选变化时触发 | function(pagination, filters, sorter, extra: { currentDataSource: [], action: | - | |
|
|
594
|
+
| onHeaderRow | 设置头部行属性 | function(columns, index) | - | |
|
|
595
|
+
| onRow | 设置行属性 | function(record, index) | - | |
|
|
596
|
+
| onScroll | 表单内容滚动时触发（虚拟滚动下只有垂直滚动会触发事件） | function(event) | - | 5.16.0 |
|
|
597
|
+
|
|
598
|
+
|
|
599
|
+
### Table ref
|
|
600
|
+
|
|
601
|
+
| 参数 | 说明 | 类型 | 版本 |
|
|
602
|
+
|--------|--------|--------|--------|
|
|
603
|
+
| nativeElement | 最外层 div 元素 | HTMLDivElement | 5.11.0 |
|
|
604
|
+
| scrollTo | 滚动到目标位置（设置 | (config: { index?: number, key?: React.Key, top?: number }) => void | 5.11.0 |
|
|
605
|
+
|
|
606
|
+
|
|
607
|
+
#### onRow 用法
|
|
608
|
+
|
|
609
|
+
适用于 `onRow` `onHeaderRow` `onCell` `onHeaderCell`。
|
|
307
610
|
|
|
308
611
|
|
|
309
612
|
```jsx
|
|
@@ -497,313 +800,10 @@ const Demo: React.FC = () => (
|
|
|
497
800
|
);
|
|
498
801
|
|
|
499
802
|
export default Demo;
|
|
500
|
-
```
|
|
501
|
-
|
|
502
|
-
|
|
503
|
-
TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/serene-platform-0jo5t)。
|
|
504
|
-
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
<DemoTitle title="Video" desc="视频展示">
|
|
508
|
-
#### API
|
|
509
|
-
|
|
510
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
511
|
-
|--------|--------|--------|--------|
|
|
512
|
-
| mouseEnterAutoPlay | 鼠标进入时是否自动播放 | boolean | false |
|
|
513
|
-
| children | video内部设置了按钮在暗色背景下的样式，如果有一些操作按钮想继承这个样式可以在这里传入 | React.ReactNode | |
|
|
514
|
-
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
<DemoTitle title="TimePicker" desc="输入或选择时间的控件。">
|
|
521
|
-
#### API
|
|
522
|
-
|
|
523
|
-
<AntdApiRef url="https://ant.design/components/time-picker-cn/#api"></AntdApiRef>
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
## antd API
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
531
|
-
|
|
532
|
-
|
|
533
|
-
```jsx
|
|
534
|
-
import dayjs from 'dayjs';
|
|
535
|
-
import customParseFormat from 'dayjs/plugin/customParseFormat'
|
|
536
|
-
|
|
537
|
-
dayjs.extend(customParseFormat)
|
|
538
|
-
<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
|
|
539
|
-
```
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
543
|
-
|--------|--------|--------|--------|--------|
|
|
544
|
-
| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
|
|
545
|
-
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
546
|
-
| cellRender | 自定义单元格的内容 | (current: number, info: { originNode: React.ReactNode, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
|
|
547
|
-
| changeOnScroll | 在滚动时改变选择值 | boolean | false | 5.14.0 |
|
|
548
|
-
| className | 选择器类名 | string | - | |
|
|
549
|
-
| defaultValue | 默认时间 | | - | |
|
|
550
|
-
| disabled | 禁用全部操作 | boolean | false | |
|
|
551
|
-
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
552
|
-
| format | 展示的时间格式 | string | HH:mm:ss | |
|
|
553
|
-
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | |
|
|
554
|
-
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | |
|
|
555
|
-
| hourStep | 小时选项间隔 | number | 1 | |
|
|
556
|
-
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
|
|
557
|
-
| minuteStep | 分钟选项间隔 | number | 1 | |
|
|
558
|
-
| needConfirm | 是否需要确认按钮，为 | boolean | - | 5.14.0 |
|
|
559
|
-
| open | 面板是否打开 | boolean | false | |
|
|
560
|
-
| placeholder | 没有值的时候显示的内容 | string \| [string, string] | 请选择时间 | |
|
|
561
|
-
| placement | 选择框弹出的位置 | bottomLeft | bottomLeft | |
|
|
562
|
-
| popupClassName | 弹出层类名 | string | - | |
|
|
563
|
-
| popupStyle | 弹出层样式对象 | object | - | |
|
|
564
|
-
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
|
|
565
|
-
| renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - | |
|
|
566
|
-
| secondStep | 秒选项间隔 | number | 1 | |
|
|
567
|
-
| showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
|
|
568
|
-
| size | 输入框大小， | large | - | |
|
|
569
|
-
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
570
|
-
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
|
571
|
-
| use12Hours | 使用 12 小时制，为 true 时 | boolean | false | |
|
|
572
|
-
| value | 当前时间 | | - | |
|
|
573
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
574
|
-
| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - | |
|
|
575
|
-
| onChange | 时间发生变化的回调 | function(time: dayjs, timeString: string): void | - | |
|
|
576
|
-
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - | |
|
|
577
|
-
|
|
578
|
-
|
|
579
|
-
#### DisabledTime
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
```typescript
|
|
583
|
-
type DisabledTime = (now: Dayjs) => {
|
|
584
|
-
disabledHours?: () => number[];
|
|
585
|
-
disabledMinutes?: (selectedHour: number) => number[];
|
|
586
|
-
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
587
|
-
disabledMilliseconds?: (
|
|
588
|
-
selectedHour: number,
|
|
589
|
-
selectedMinute: number,
|
|
590
|
-
selectedSecond: number,
|
|
591
|
-
) => number[];
|
|
592
|
-
};
|
|
593
|
-
```
|
|
594
|
-
|
|
595
|
-
|
|
596
|
-
注意：`disabledMilliseconds` 为 `5.14.0` 新增。
|
|
597
|
-
|
|
598
|
-
## 方法
|
|
599
|
-
|
|
600
|
-
| 名称 | 描述 | 版本 |
|
|
601
|
-
|--------|--------|--------|
|
|
602
|
-
| blur() | 移除焦点 | |
|
|
603
|
-
| focus() | 获取焦点 | |
|
|
604
|
-
|
|
605
|
-
|
|
606
|
-
## RangePicker
|
|
607
|
-
|
|
608
|
-
属性与 DatePicker 的 [RangePicker](/components/date-picker-cn#rangepicker) 相同。还包含以下属性：
|
|
609
|
-
|
|
610
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
611
|
-
|--------|--------|--------|--------|--------|
|
|
612
|
-
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
613
|
-
| order | 始末时间是否自动排序 | boolean | true | 4.1.0 |
|
|
614
|
-
|
|
615
|
-
|
|
616
|
-
### RangeDisabledTime
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
```typescript
|
|
620
|
-
type RangeDisabledTime = (
|
|
621
|
-
now: Dayjs,
|
|
622
|
-
type = 'start' | 'end',
|
|
623
|
-
) => {
|
|
624
|
-
disabledHours?: () => number[];
|
|
625
|
-
disabledMinutes?: (selectedHour: number) => number[];
|
|
626
|
-
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
627
|
-
};
|
|
628
|
-
```
|
|
629
|
-
|
|
630
|
-
|
|
631
|
-
|
|
632
|
-
|
|
633
|
-
<DemoTitle title="Steps" desc="引导用户按照流程完成任务的导航条。">
|
|
634
|
-
#### API
|
|
635
|
-
|
|
636
|
-
<AntdApiRef url="https://ant.design/components/steps-cn/#api"></AntdApiRef>
|
|
637
|
-
|
|
638
|
-
|
|
639
|
-
## antd API
|
|
640
|
-
|
|
641
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
642
|
-
|
|
643
|
-
### Steps
|
|
644
|
-
|
|
645
|
-
整体步骤条。
|
|
646
|
-
|
|
647
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
648
|
-
|--------|--------|--------|--------|--------|
|
|
649
|
-
| className | 步骤条类名 | string | - | |
|
|
650
|
-
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 | number | 0 | |
|
|
651
|
-
| direction | 指定步骤条方向。目前支持水平（ | string | horizontal | |
|
|
652
|
-
| initial | 起始序号，从 0 开始记数 | number | 0 | |
|
|
653
|
-
| labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选 | string | horizontal | |
|
|
654
|
-
| percent | 当前 | number | - | 4.5.0 |
|
|
655
|
-
| progressDot | 点状步骤条，可以设置为一个 function，labelPlacement 将强制为 | boolean \| (iconDot, {index, status, title, description}) => ReactNode | false | |
|
|
656
|
-
| responsive | 当屏幕宽度小于 | boolean | true | |
|
|
657
|
-
| size | 指定大小，目前支持普通（ | string | default | |
|
|
658
|
-
| status | 指定当前步骤的状态，可选 | string | process | |
|
|
659
|
-
| type | 步骤条类型，可选 | string | default | inline: 5.0 |
|
|
660
|
-
| onChange | 点击切换步骤时触发 | (current) => void | - | |
|
|
661
|
-
| items | 配置选项卡内容 | | [] | 4.24.0 |
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
### `type="inline"`
|
|
665
|
-
|
|
666
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
667
|
-
|--------|--------|--------|--------|--------|
|
|
668
|
-
| className | 步骤条类名 | string | - | |
|
|
669
|
-
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 | number | 0 | |
|
|
670
|
-
| initial | 起始序号，从 0 开始记数 | number | 0 | |
|
|
671
|
-
| status | 指定当前步骤的状态，可选 | string | process | |
|
|
672
|
-
| onChange | 点击切换步骤时触发 | (current) => void | - | |
|
|
673
|
-
| items | 配置选项卡内容，不支持 | | [] | 4.24.0 |
|
|
674
|
-
|
|
675
|
-
|
|
676
|
-
### StepItem
|
|
677
|
-
|
|
678
|
-
步骤条内的每一个步骤。
|
|
679
|
-
|
|
680
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
681
|
-
|--------|--------|--------|--------|--------|
|
|
682
|
-
| description | 步骤的详情描述，可选 | ReactNode | - | |
|
|
683
|
-
| disabled | 禁用点击 | boolean | false | |
|
|
684
|
-
| icon | 步骤图标的类型，可选 | ReactNode | - | |
|
|
685
|
-
| status | 指定状态。当不配置该属性时，会使用 Steps 的 | string | wait | |
|
|
686
|
-
| subTitle | 子标题 | ReactNode | - | |
|
|
687
|
-
| title | 标题 | ReactNode | - | |
|
|
688
|
-
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
<DemoTitle title="Statistic" desc="展示统计数值">
|
|
693
|
-
#### API
|
|
694
|
-
|
|
695
|
-
<AntdApiRef url="https://ant.design/components/statistic-cn/#api"></AntdApiRef>
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
## antd API
|
|
699
|
-
|
|
700
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
701
|
-
|
|
702
|
-
#### Statistic
|
|
703
|
-
|
|
704
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
705
|
-
|--------|--------|--------|--------|--------|
|
|
706
|
-
| decimalSeparator | 设置小数点 | string | . | |
|
|
707
|
-
| formatter | 自定义数值展示 | (value) => ReactNode | - | |
|
|
708
|
-
| groupSeparator | 设置千分位标识符 | string | , | |
|
|
709
|
-
| loading | 数值是否加载中 | boolean | false | 4.8.0 |
|
|
710
|
-
| precision | 数值精度 | number | - | |
|
|
711
|
-
| prefix | 设置数值的前缀 | ReactNode | - | |
|
|
712
|
-
| suffix | 设置数值的后缀 | ReactNode | - | |
|
|
713
|
-
| title | 数值的标题 | ReactNode | - | |
|
|
714
|
-
| value | 数值内容 | string \| number | - | |
|
|
715
|
-
| valueStyle | 设置数值区域的样式 | CSSProperties | - | |
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
#### Statistic.Countdown <Badge type="error">Deprecated</Badge>
|
|
719
|
-
|
|
720
|
-
<!-- <Antd component="Alert" message="版本 >= 5.25.0 时请使用 Statistic.Timer 作为替代方案。" type="warning" banner="true"></Antd> -->
|
|
721
|
-
|
|
722
|
-
<!-- prettier-ignore -->
|
|
723
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
724
|
-
|--------|--------|--------|--------|--------|
|
|
725
|
-
| format | 格式化倒计时展示，参考 | string | HH:mm:ss | |
|
|
726
|
-
| prefix | 设置数值的前缀 | ReactNode | - | |
|
|
727
|
-
| suffix | 设置数值的后缀 | ReactNode | - | |
|
|
728
|
-
| title | 数值的标题 | ReactNode | - | |
|
|
729
|
-
| value | 数值内容 | number | - | |
|
|
730
|
-
| valueStyle | 设置数值区域的样式 | CSSProperties | - | |
|
|
731
|
-
| onFinish | 倒计时完成时触发 | () => void | - | |
|
|
732
|
-
| onChange | 倒计时时间变化时触发 | (value: number) => void | - | |
|
|
733
|
-
|
|
734
|
-
|
|
735
|
-
#### Statistic.Timer <Badge>5.25.0+</Badge>
|
|
736
|
-
|
|
737
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
738
|
-
|--------|--------|--------|--------|--------|
|
|
739
|
-
| type | 计时类型，正计时或者倒计时 | countdown | - | |
|
|
740
|
-
| format | 格式化倒计时展示，参考 | string | HH:mm:ss | |
|
|
741
|
-
| prefix | 设置数值的前缀 | ReactNode | - | |
|
|
742
|
-
| suffix | 设置数值的后缀 | ReactNode | - | |
|
|
743
|
-
| title | 数值的标题 | ReactNode | - | |
|
|
744
|
-
| value | 数值内容 | number | - | |
|
|
745
|
-
| valueStyle | 设置数值区域的样式 | CSSProperties | - | |
|
|
746
|
-
| onFinish | 倒计时完成时触发, 指定为 | () => void | - | |
|
|
747
|
-
| onChange | 倒计时时间变化时触发 | (value: number) => void | - | |
|
|
748
|
-
|
|
749
|
-
|
|
750
|
-
|
|
751
|
-
|
|
752
|
-
<DemoTitle title="Switch" desc="使用开关切换两种状态之间。">
|
|
753
|
-
#### API
|
|
754
|
-
|
|
755
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
756
|
-
|--------|--------|--------|--------|
|
|
757
|
-
| label | Switch后的内容 | ReactNode | |
|
|
758
|
-
|
|
759
|
-
<AntdApiRef url="https://ant.design/components/switch-cn/#api"></AntdApiRef>
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
## antd API
|
|
763
|
-
|
|
764
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
765
|
-
|
|
766
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
767
|
-
|--------|--------|--------|--------|--------|
|
|
768
|
-
| autoFocus | 组件自动获取焦点 | boolean | false | |
|
|
769
|
-
| checked | 指定当前是否选中 | boolean | false | |
|
|
770
|
-
| checkedChildren | 选中时的内容 | ReactNode | - | |
|
|
771
|
-
| className | Switch 器类名 | string | - | |
|
|
772
|
-
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
773
|
-
| defaultValue | defaultChecked | boolean | - | 5.12.0 |
|
|
774
|
-
| disabled | 是否禁用 | boolean | false | |
|
|
775
|
-
| loading | 加载中的开关 | boolean | false | |
|
|
776
|
-
| size | 开关大小，可选值： | string | default | |
|
|
777
|
-
| unCheckedChildren | 非选中时的内容 | ReactNode | - | |
|
|
778
|
-
| value | checked | boolean | - | 5.12.0 |
|
|
779
|
-
| onChange | 变化时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
780
|
-
| onClick | 点击时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
781
|
-
|
|
782
|
-
|
|
783
|
-
## 方法
|
|
784
|
-
|
|
785
|
-
| 名称 | 描述 |
|
|
786
|
-
|--------|--------|
|
|
787
|
-
| blur() | 移除焦点 |
|
|
788
|
-
| focus() | 获取焦点 |
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
<DemoTitle title="Spinner" desc="指示页面或区块的加载中状态">
|
|
794
|
-
#### API
|
|
803
|
+
```
|
|
795
804
|
|
|
796
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
797
|
-
|--------|--------|--------|--------|
|
|
798
|
-
| tip | indicator下方的tip | React.ReactNode | - |
|
|
799
|
-
| indicator | 自定义indicator，用于展示progress的百分比和加载文案 | React.ReactNode | - |
|
|
800
|
-
| children | 被spinner包裹的子元素 | React.ReactNode | - |
|
|
801
|
-
| style | spinner最外层的样式 | React.CSSProperties | - |
|
|
802
|
-
| className | spinner的类名 | string | - |
|
|
803
|
-
| percent | 进度条的百分比 | number | - |
|
|
804
|
-
| spinning | 是否为加载中状态 | boolean | false |
|
|
805
|
-
| showProgress | 是否显示进度条，如果为true，不需要手动在children中添加Progress组件 | boolean | false |
|
|
806
805
|
|
|
806
|
+
TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/serene-platform-0jo5t)。
|
|
807
807
|
|
|
808
808
|
|
|
809
809
|
|
|
@@ -932,6 +932,18 @@ type RangeDisabledTime = (
|
|
|
932
932
|
|
|
933
933
|
|
|
934
934
|
|
|
935
|
+
<DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。">
|
|
936
|
+
## API
|
|
937
|
+
|
|
938
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
939
|
+
|--------|--------|--------|--------|
|
|
940
|
+
| texture | 是否显示纹理 | boolean | false |
|
|
941
|
+
|
|
942
|
+
|
|
943
|
+
|
|
944
|
+
|
|
945
|
+
|
|
946
|
+
|
|
935
947
|
<DemoTitle title="Select" desc="下拉选择器">
|
|
936
948
|
## antd API
|
|
937
949
|
|
|
@@ -1030,28 +1042,27 @@ type RangeDisabledTime = (
|
|
|
1030
1042
|
|
|
1031
1043
|
|
|
1032
1044
|
|
|
1033
|
-
<DemoTitle title="
|
|
1034
|
-
|
|
1045
|
+
<DemoTitle title="MdEditor" desc="提示词编辑器，可以高亮 Markdown 的语法，支持自定义槽位变量的插入">
|
|
1046
|
+
#### API
|
|
1035
1047
|
|
|
1036
1048
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1037
1049
|
|--------|--------|--------|--------|
|
|
1038
|
-
|
|
|
1039
|
-
|
|
1040
|
-
|
|
1050
|
+
| maxLength | 可以输入内容的最大长度 | number | |
|
|
1051
|
+
| value | 输入的内容 | string | |
|
|
1052
|
+
| className | 输入内容的类名 | string | |
|
|
1053
|
+
| onChange | 输入内容的回调 | (value: string) => void | |
|
|
1054
|
+
| variables | 可以插入的变量列表 | Array | |
|
|
1055
|
+
| onCreate | 新增变量的触发回调 | () => void | |
|
|
1056
|
+
| createBtnText | 新增变量的按钮文本 | string | |
|
|
1057
|
+
| tipsText | 提示文本，传入 false 时隐藏提示 | string \| React.ReactNode \| false | |
|
|
1058
|
+
| readOnly | 仅可读 | boolean | false |
|
|
1041
1059
|
|
|
1042
1060
|
|
|
1043
1061
|
|
|
1044
1062
|
|
|
1045
|
-
<DemoTitle title="
|
|
1063
|
+
<DemoTitle title="Radio" desc="用于在多个备选项中选中单个状态。">
|
|
1046
1064
|
#### API
|
|
1047
1065
|
|
|
1048
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1049
|
-
|--------|--------|--------|--------|
|
|
1050
|
-
| bordered | 边框 | boolean | false |
|
|
1051
|
-
| ghost | 按钮背景色类型 | boolean | true |
|
|
1052
|
-
| gap | 间距 | number | 12 px |
|
|
1053
|
-
|
|
1054
|
-
|
|
1055
1066
|
<AntdApiRef url="https://ant.design/components/radio-cn/#api"></AntdApiRef>
|
|
1056
1067
|
|
|
1057
1068
|
|
|
@@ -1117,9 +1128,16 @@ type RangeDisabledTime = (
|
|
|
1117
1128
|
|
|
1118
1129
|
|
|
1119
1130
|
|
|
1120
|
-
<DemoTitle title="
|
|
1131
|
+
<DemoTitle title="RadioButton" desc="用于在多个备选项中选中单个状态。">
|
|
1121
1132
|
#### API
|
|
1122
1133
|
|
|
1134
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1135
|
+
|--------|--------|--------|--------|
|
|
1136
|
+
| bordered | 边框 | boolean | false |
|
|
1137
|
+
| ghost | 按钮背景色类型 | boolean | true |
|
|
1138
|
+
| gap | 间距 | number | 12 px |
|
|
1139
|
+
|
|
1140
|
+
|
|
1123
1141
|
<AntdApiRef url="https://ant.design/components/radio-cn/#api"></AntdApiRef>
|
|
1124
1142
|
|
|
1125
1143
|
|
|
@@ -1185,20 +1203,47 @@ type RangeDisabledTime = (
|
|
|
1185
1203
|
|
|
1186
1204
|
|
|
1187
1205
|
|
|
1188
|
-
<DemoTitle title="
|
|
1206
|
+
<DemoTitle title="Popover" desc="点击/鼠标移入元素，弹出气泡式的卡片浮层">
|
|
1189
1207
|
#### API
|
|
1190
1208
|
|
|
1191
|
-
|
|
1192
|
-
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
|
1199
|
-
|
|
1200
|
-
|
|
|
1209
|
+
<AntdApiRef url="https://ant.design/components/popover-cn/#api"></AntdApiRef>
|
|
1210
|
+
|
|
1211
|
+
|
|
1212
|
+
## antd API
|
|
1213
|
+
|
|
1214
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1215
|
+
|
|
1216
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1217
|
+
|--------|--------|--------|--------|--------|
|
|
1218
|
+
| content | 卡片内容 | ReactNode \| () => ReactNode | - | |
|
|
1219
|
+
| title | 卡片标题 | ReactNode \| () => ReactNode | - | |
|
|
1220
|
+
|
|
1221
|
+
|
|
1222
|
+
<!-- 共同的 API -->
|
|
1223
|
+
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
1224
|
+
|
|
1225
|
+
<!-- prettier-ignore -->
|
|
1226
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1227
|
+
|--------|--------|--------|--------|--------|
|
|
1228
|
+
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
1229
|
+
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
1230
|
+
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
1231
|
+
| color | 背景颜色 | string | - | 4.3.0 |
|
|
1232
|
+
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
1233
|
+
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
1234
|
+
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
1235
|
+
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
1236
|
+
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
1237
|
+
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
1238
|
+
| placement | 气泡框位置，可选 | string | top | |
|
|
1239
|
+
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
1240
|
+
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
1241
|
+
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
1242
|
+
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
1243
|
+
|
|
1244
|
+
## 注意
|
|
1201
1245
|
|
|
1246
|
+
请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
|
|
1202
1247
|
|
|
1203
1248
|
|
|
1204
1249
|
|
|
@@ -1254,47 +1299,50 @@ type RangeDisabledTime = (
|
|
|
1254
1299
|
|
|
1255
1300
|
|
|
1256
1301
|
|
|
1257
|
-
<DemoTitle title="
|
|
1258
|
-
|
|
1302
|
+
<DemoTitle title="Pagination" desc="分页器用于分隔长列表，每次只加载一个页面。">
|
|
1303
|
+
## API
|
|
1259
1304
|
|
|
1260
|
-
|
|
1305
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1306
|
+
|--------|--------|--------|--------|
|
|
1307
|
+
| hideSwitchButton | 是否展示上一页/下一页的切换按钮 | boolean | false |
|
|
1308
|
+
|
|
1309
|
+
|
|
1310
|
+
<AntdApiRef url="https://ant.design/components/pagination-cn/#api"></AntdApiRef>
|
|
1261
1311
|
|
|
1262
1312
|
|
|
1263
1313
|
## antd API
|
|
1264
1314
|
|
|
1265
1315
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1266
1316
|
|
|
1267
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1268
|
-
|--------|--------|--------|--------|--------|
|
|
1269
|
-
| content | 卡片内容 | ReactNode \| () => ReactNode | - | |
|
|
1270
|
-
| title | 卡片标题 | ReactNode \| () => ReactNode | - | |
|
|
1271
1317
|
|
|
1318
|
+
```jsx
|
|
1319
|
+
<Pagination onChange={onChange} total={50} />
|
|
1320
|
+
```
|
|
1272
1321
|
|
|
1273
|
-
<!-- 共同的 API -->
|
|
1274
|
-
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
1275
1322
|
|
|
1276
|
-
<!-- prettier-ignore -->
|
|
1277
1323
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1278
1324
|
|--------|--------|--------|--------|--------|
|
|
1279
|
-
| align |
|
|
1280
|
-
|
|
|
1281
|
-
|
|
|
1282
|
-
|
|
|
1283
|
-
|
|
|
1284
|
-
|
|
|
1285
|
-
|
|
|
1286
|
-
|
|
|
1287
|
-
|
|
|
1288
|
-
|
|
|
1289
|
-
|
|
|
1290
|
-
|
|
|
1291
|
-
|
|
|
1292
|
-
|
|
|
1293
|
-
|
|
|
1294
|
-
|
|
1295
|
-
|
|
1325
|
+
| align | 对齐方式 | start \| center \| end | - | 5.19.0 |
|
|
1326
|
+
| current | 当前页数 | number | - | |
|
|
1327
|
+
| defaultCurrent | 默认的当前页数 | number | 1 | |
|
|
1328
|
+
| defaultPageSize | 默认的每页条数 | number | 10 | |
|
|
1329
|
+
| disabled | 禁用分页 | boolean | - | |
|
|
1330
|
+
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | |
|
|
1331
|
+
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | |
|
|
1332
|
+
| pageSize | 每页条数 | number | - | |
|
|
1333
|
+
| pageSizeOptions | 指定每页可以显示多少条 | number[] | [ | |
|
|
1334
|
+
| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | |
|
|
1335
|
+
| showLessItems | 是否显示较少页面内容 | boolean | false | |
|
|
1336
|
+
| showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false | |
|
|
1337
|
+
| showSizeChanger | 是否展示 | boolean \| | - | SelectProps: 5.21.0 |
|
|
1338
|
+
| showTitle | 是否显示原生 tooltip 页码提示 | boolean | true | |
|
|
1339
|
+
| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | |
|
|
1340
|
+
| simple | 当添加该属性时，显示为简单分页 | boolean \| { readOnly?: boolean } | - | |
|
|
1341
|
+
| size | 当为 | default | default | |
|
|
1342
|
+
| total | 数据总数 | number | 0 | |
|
|
1343
|
+
| onChange | 页码或 | function(page, pageSize) | - | |
|
|
1344
|
+
| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | |
|
|
1296
1345
|
|
|
1297
|
-
请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
|
|
1298
1346
|
|
|
1299
1347
|
|
|
1300
1348
|
|
|
@@ -1451,53 +1499,6 @@ notification.config({
|
|
|
1451
1499
|
|
|
1452
1500
|
|
|
1453
1501
|
|
|
1454
|
-
<DemoTitle title="Pagination" desc="分页器用于分隔长列表，每次只加载一个页面。">
|
|
1455
|
-
## API
|
|
1456
|
-
|
|
1457
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1458
|
-
|--------|--------|--------|--------|
|
|
1459
|
-
| hideSwitchButton | 是否展示上一页/下一页的切换按钮 | boolean | false |
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
<AntdApiRef url="https://ant.design/components/pagination-cn/#api"></AntdApiRef>
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
## antd API
|
|
1466
|
-
|
|
1467
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1468
|
-
|
|
1469
|
-
|
|
1470
|
-
```jsx
|
|
1471
|
-
<Pagination onChange={onChange} total={50} />
|
|
1472
|
-
```
|
|
1473
|
-
|
|
1474
|
-
|
|
1475
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1476
|
-
|--------|--------|--------|--------|--------|
|
|
1477
|
-
| align | 对齐方式 | start \| center \| end | - | 5.19.0 |
|
|
1478
|
-
| current | 当前页数 | number | - | |
|
|
1479
|
-
| defaultCurrent | 默认的当前页数 | number | 1 | |
|
|
1480
|
-
| defaultPageSize | 默认的每页条数 | number | 10 | |
|
|
1481
|
-
| disabled | 禁用分页 | boolean | - | |
|
|
1482
|
-
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | |
|
|
1483
|
-
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | |
|
|
1484
|
-
| pageSize | 每页条数 | number | - | |
|
|
1485
|
-
| pageSizeOptions | 指定每页可以显示多少条 | number[] | [ | |
|
|
1486
|
-
| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | |
|
|
1487
|
-
| showLessItems | 是否显示较少页面内容 | boolean | false | |
|
|
1488
|
-
| showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false | |
|
|
1489
|
-
| showSizeChanger | 是否展示 | boolean \| | - | SelectProps: 5.21.0 |
|
|
1490
|
-
| showTitle | 是否显示原生 tooltip 页码提示 | boolean | true | |
|
|
1491
|
-
| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | |
|
|
1492
|
-
| simple | 当添加该属性时，显示为简单分页 | boolean \| { readOnly?: boolean } | - | |
|
|
1493
|
-
| size | 当为 | default | default | |
|
|
1494
|
-
| total | 数据总数 | number | 0 | |
|
|
1495
|
-
| onChange | 页码或 | function(page, pageSize) | - | |
|
|
1496
|
-
| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | |
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
|
|
1500
|
-
|
|
1501
1502
|
<DemoTitle title="Message" desc="一条简洁且临时显示的消息，为操作提供全局反馈">
|
|
1502
1503
|
#### API
|
|
1503
1504
|
|
|
@@ -1768,33 +1769,56 @@ const confirmed = await modal.confirm({ ... });
|
|
|
1768
1769
|
|
|
1769
1770
|
|
|
1770
1771
|
|
|
1771
|
-
<DemoTitle title="
|
|
1772
|
+
<DemoTitle title="InputNumber" desc="通过鼠标或键盘，输入范围内的数值。">
|
|
1772
1773
|
#### API
|
|
1773
1774
|
|
|
1774
|
-
|
|
1775
|
-
|--------|--------|--------|--------|
|
|
1776
|
-
| visible | 是否显示预览 | boolean | false |
|
|
1777
|
-
| mediaList | 媒体列表 | MediaItem[] | [] |
|
|
1778
|
-
| currentIndex | 当前选中的索引 | number | 0 |
|
|
1779
|
-
| onClose | 关闭回调 | () => void | - |
|
|
1780
|
-
| className | 自定义样式类名 | string | - |
|
|
1775
|
+
<AntdApiRef url="https://ant.design/components/input-number-cn/#api"></AntdApiRef>
|
|
1781
1776
|
|
|
1782
1777
|
|
|
1783
|
-
|
|
1778
|
+
## antd API
|
|
1784
1779
|
|
|
1785
|
-
|
|
1786
|
-
|--------|--------|--------|--------|
|
|
1787
|
-
| type | 媒体类型 | 'image' \| 'video' | - |
|
|
1788
|
-
| src | 媒体资源地址 | string | - |
|
|
1789
|
-
| alt | 媒体替代文本 | string | - |
|
|
1780
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1790
1781
|
|
|
1782
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1783
|
+
|--------|--------|--------|--------|--------|
|
|
1784
|
+
| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | 4.17.0 |
|
|
1785
|
+
| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | 4.17.0 |
|
|
1786
|
+
| autoFocus | 自动获取焦点 | boolean | false | - |
|
|
1787
|
+
| changeOnBlur | 是否在失去焦点时，触发 | boolean | true | 5.11.0 |
|
|
1788
|
+
| changeOnWheel | 允许鼠标滚轮改变数值 | boolean | - | 5.14.0 |
|
|
1789
|
+
| controls | 是否显示增减按钮，也可设置自定义箭头图标 | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
|
|
1790
|
+
| decimalSeparator | 小数点 | string | - | - |
|
|
1791
|
+
| placeholder | 占位符 | string | - | |
|
|
1792
|
+
| defaultValue | 初始值 | number | - | - |
|
|
1793
|
+
| disabled | 禁用 | boolean | false | - |
|
|
1794
|
+
| formatter | 指定输入框展示值的格式 | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - | info: 4.17.0 |
|
|
1795
|
+
| keyboard | 是否启用键盘快捷行为 | boolean | true | 4.12.0 |
|
|
1796
|
+
| max | 最大值 | number | | - |
|
|
1797
|
+
| min | 最小值 | number | | - |
|
|
1798
|
+
| parser | 指定从 | function(string): number | - | - |
|
|
1799
|
+
| precision | 数值精度，配置 | number | - | - |
|
|
1800
|
+
| readOnly | 只读 | boolean | false | - |
|
|
1801
|
+
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
1802
|
+
| prefix | 带有前缀图标的 input | ReactNode | - | 4.17.0 |
|
|
1803
|
+
| suffix | 带有后缀图标的 input | ReactNode | - | 5.20.0 |
|
|
1804
|
+
| size | 输入框大小 | large | - | - |
|
|
1805
|
+
| step | 每次改变步数，可以为小数 | number \| string | 1 | - |
|
|
1806
|
+
| stringMode | 字符值模式，开启后支持高精度小数。同时 | boolean | false | 4.13.0 |
|
|
1807
|
+
| value | 当前值 | number | - | - |
|
|
1808
|
+
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
1809
|
+
| onChange | 变化回调 | function(value: number \| string \| null) | - | - |
|
|
1810
|
+
| onPressEnter | 按下回车的回调 | function(e) | - | - |
|
|
1811
|
+
| onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 |
|
|
1791
1812
|
|
|
1792
1813
|
|
|
1814
|
+
## Ref
|
|
1793
1815
|
|
|
1794
|
-
|
|
1795
|
-
|
|
1816
|
+
| 名称 | 说明 | 参数 | 版本 |
|
|
1817
|
+
|--------|--------|--------|--------|
|
|
1818
|
+
| blur() | 移除焦点 | - | |
|
|
1819
|
+
| focus() | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | cursor - 5.22.0 |
|
|
1820
|
+
| nativeElement | 获取原生 DOM 元素 | - | 5.17.3 |
|
|
1796
1821
|
|
|
1797
|
-
<AntdApiRef url="https://ant.design/components/input-cn/#inputsearch"></AntdApiRef>
|
|
1798
1822
|
|
|
1799
1823
|
|
|
1800
1824
|
|
|
@@ -1933,55 +1957,25 @@ interface CountConfig {
|
|
|
1933
1957
|
|
|
1934
1958
|
|
|
1935
1959
|
|
|
1936
|
-
<DemoTitle title="
|
|
1960
|
+
<DemoTitle title="MediaPreview" desc="用于预览图片和视频的弹窗组件">
|
|
1937
1961
|
#### API
|
|
1938
1962
|
|
|
1939
|
-
|
|
1940
|
-
|
|
1941
|
-
|
|
1942
|
-
|
|
1943
|
-
|
|
1944
|
-
|
|
1945
|
-
|
|
1946
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1947
|
-
|--------|--------|--------|--------|--------|
|
|
1948
|
-
| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | 4.17.0 |
|
|
1949
|
-
| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | 4.17.0 |
|
|
1950
|
-
| autoFocus | 自动获取焦点 | boolean | false | - |
|
|
1951
|
-
| changeOnBlur | 是否在失去焦点时，触发 | boolean | true | 5.11.0 |
|
|
1952
|
-
| changeOnWheel | 允许鼠标滚轮改变数值 | boolean | - | 5.14.0 |
|
|
1953
|
-
| controls | 是否显示增减按钮，也可设置自定义箭头图标 | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
|
|
1954
|
-
| decimalSeparator | 小数点 | string | - | - |
|
|
1955
|
-
| placeholder | 占位符 | string | - | |
|
|
1956
|
-
| defaultValue | 初始值 | number | - | - |
|
|
1957
|
-
| disabled | 禁用 | boolean | false | - |
|
|
1958
|
-
| formatter | 指定输入框展示值的格式 | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - | info: 4.17.0 |
|
|
1959
|
-
| keyboard | 是否启用键盘快捷行为 | boolean | true | 4.12.0 |
|
|
1960
|
-
| max | 最大值 | number | | - |
|
|
1961
|
-
| min | 最小值 | number | | - |
|
|
1962
|
-
| parser | 指定从 | function(string): number | - | - |
|
|
1963
|
-
| precision | 数值精度，配置 | number | - | - |
|
|
1964
|
-
| readOnly | 只读 | boolean | false | - |
|
|
1965
|
-
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
1966
|
-
| prefix | 带有前缀图标的 input | ReactNode | - | 4.17.0 |
|
|
1967
|
-
| suffix | 带有后缀图标的 input | ReactNode | - | 5.20.0 |
|
|
1968
|
-
| size | 输入框大小 | large | - | - |
|
|
1969
|
-
| step | 每次改变步数，可以为小数 | number \| string | 1 | - |
|
|
1970
|
-
| stringMode | 字符值模式，开启后支持高精度小数。同时 | boolean | false | 4.13.0 |
|
|
1971
|
-
| value | 当前值 | number | - | - |
|
|
1972
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
1973
|
-
| onChange | 变化回调 | function(value: number \| string \| null) | - | - |
|
|
1974
|
-
| onPressEnter | 按下回车的回调 | function(e) | - | - |
|
|
1975
|
-
| onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 |
|
|
1963
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
1964
|
+
|--------|--------|--------|--------|
|
|
1965
|
+
| visible | 是否显示预览 | boolean | false |
|
|
1966
|
+
| mediaList | 媒体列表 | MediaItem[] | [] |
|
|
1967
|
+
| currentIndex | 当前选中的索引 | number | 0 |
|
|
1968
|
+
| onClose | 关闭回调 | () => void | - |
|
|
1969
|
+
| className | 自定义样式类名 | string | - |
|
|
1976
1970
|
|
|
1977
1971
|
|
|
1978
|
-
|
|
1972
|
+
#### MediaItem
|
|
1979
1973
|
|
|
1980
|
-
|
|
|
1974
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
1981
1975
|
|--------|--------|--------|--------|
|
|
1982
|
-
|
|
|
1983
|
-
|
|
|
1984
|
-
|
|
|
1976
|
+
| type | 媒体类型 | 'image' \| 'video' | - |
|
|
1977
|
+
| src | 媒体资源地址 | string | - |
|
|
1978
|
+
| alt | 媒体替代文本 | string | - |
|
|
1985
1979
|
|
|
1986
1980
|
|
|
1987
1981
|
|
|
@@ -2153,6 +2147,59 @@ type TransformAction =
|
|
|
2153
2147
|
|
|
2154
2148
|
|
|
2155
2149
|
|
|
2150
|
+
<DemoTitle title="InputSearch" desc="带搜索按钮的输入框，用于搜索场景。">
|
|
2151
|
+
#### API
|
|
2152
|
+
|
|
2153
|
+
<AntdApiRef url="https://ant.design/components/input-cn/#inputsearch"></AntdApiRef>
|
|
2154
|
+
|
|
2155
|
+
|
|
2156
|
+
|
|
2157
|
+
<DemoTitle title="IconButton" desc="以图标为核心的轻量按钮组件，用于触发操作。">
|
|
2158
|
+
#### API
|
|
2159
|
+
|
|
2160
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2161
|
+
|--------|--------|--------|--------|
|
|
2162
|
+
| icon | icon | ReactNode \| string | |
|
|
2163
|
+
| iconType | 百炼图标iconfont的key，依赖百炼的iconFont，例如bl-icon-add | string | |
|
|
2164
|
+
| bordered | 边框 | boolean | true |
|
|
2165
|
+
| shape | 形状 | 'default' \| 'circle' | 'default' |
|
|
2166
|
+
|
|
2167
|
+
|
|
2168
|
+
## antd API
|
|
2169
|
+
|
|
2170
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2171
|
+
|
|
2172
|
+
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
2173
|
+
|
|
2174
|
+
按钮的属性说明如下：
|
|
2175
|
+
|
|
2176
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
2177
|
+
|--------|--------|--------|--------|--------|
|
|
2178
|
+
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
2179
|
+
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
2180
|
+
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
2181
|
+
| color | 设置按钮的颜色 | default | - | default |
|
|
2182
|
+
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
2183
|
+
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
2184
|
+
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
2185
|
+
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2186
|
+
| htmlType | 设置 | submit | button | |
|
|
2187
|
+
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
2188
|
+
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
2189
|
+
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
2190
|
+
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
2191
|
+
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
2192
|
+
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
2193
|
+
|
|
2194
|
+
|
|
2195
|
+
支持原生 button 的其他所有属性。
|
|
2196
|
+
|
|
2197
|
+
### PresetColors
|
|
2198
|
+
|
|
2199
|
+
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
2200
|
+
|
|
2201
|
+
|
|
2202
|
+
|
|
2156
2203
|
<DemoTitle title="Form" desc="高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。">
|
|
2157
2204
|
#### API
|
|
2158
2205
|
|
|
@@ -2713,52 +2760,6 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
|
|
|
2713
2760
|
|
|
2714
2761
|
|
|
2715
2762
|
|
|
2716
|
-
<DemoTitle title="IconButton" desc="以图标为核心的轻量按钮组件，用于触发操作。">
|
|
2717
|
-
#### API
|
|
2718
|
-
|
|
2719
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2720
|
-
|--------|--------|--------|--------|
|
|
2721
|
-
| icon | icon | ReactNode \| string | |
|
|
2722
|
-
| iconType | 百炼图标iconfont的key，依赖百炼的iconFont，例如bl-icon-add | string | |
|
|
2723
|
-
| bordered | 边框 | boolean | true |
|
|
2724
|
-
| shape | 形状 | 'default' \| 'circle' | 'default' |
|
|
2725
|
-
|
|
2726
|
-
|
|
2727
|
-
## antd API
|
|
2728
|
-
|
|
2729
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2730
|
-
|
|
2731
|
-
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
2732
|
-
|
|
2733
|
-
按钮的属性说明如下：
|
|
2734
|
-
|
|
2735
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
2736
|
-
|--------|--------|--------|--------|--------|
|
|
2737
|
-
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
2738
|
-
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
2739
|
-
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
2740
|
-
| color | 设置按钮的颜色 | default | - | default |
|
|
2741
|
-
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
2742
|
-
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
2743
|
-
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
2744
|
-
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2745
|
-
| htmlType | 设置 | submit | button | |
|
|
2746
|
-
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
2747
|
-
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
2748
|
-
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
2749
|
-
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
2750
|
-
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
2751
|
-
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
2752
|
-
|
|
2753
|
-
|
|
2754
|
-
支持原生 button 的其他所有属性。
|
|
2755
|
-
|
|
2756
|
-
### PresetColors
|
|
2757
|
-
|
|
2758
|
-
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
2759
|
-
|
|
2760
|
-
|
|
2761
|
-
|
|
2762
2763
|
<DemoTitle title="FileIcon" desc="用于展示不同文件类型的图标，也可通过 FileCard 展示文件信息。">
|
|
2763
2764
|
#### API
|
|
2764
2765
|
|
|
@@ -2842,6 +2843,50 @@ type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' |
|
|
|
2842
2843
|
|
|
2843
2844
|
|
|
2844
2845
|
|
|
2846
|
+
<DemoTitle title="Empty" desc="用于空状态的占位图形展示。">
|
|
2847
|
+
## API
|
|
2848
|
+
|
|
2849
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2850
|
+
|--------|--------|--------|--------|
|
|
2851
|
+
| type | 空状态类型 | \| 'noData'
|
|
2852
|
+
\| 'networkError'
|
|
2853
|
+
\| '404'
|
|
2854
|
+
\| 'arrears'
|
|
2855
|
+
\| 'desktopOnly'
|
|
2856
|
+
\| 'noAudio'
|
|
2857
|
+
\| 'noImage'
|
|
2858
|
+
\| 'noVideo'
|
|
2859
|
+
\| 'noAccess'
|
|
2860
|
+
\| 'error'
|
|
2861
|
+
\| 'noChat'
|
|
2862
|
+
\| 'noModel'
|
|
2863
|
+
\| 'noApp'
|
|
2864
|
+
\| 'success'
|
|
2865
|
+
\| 'failed'
|
|
2866
|
+
\| 'inProgress'
|
|
2867
|
+
\| 'stayTuned' | 'noData' |
|
|
2868
|
+
| texture | 是否显示纹理 | boolean | true |
|
|
2869
|
+
| image | 图片地址 | string | 默认是no data的图片 |
|
|
2870
|
+
| imageStyle | 图片样式 | React.CSSProperties | |
|
|
2871
|
+
| title | 标题内容 | React.ReactNode | |
|
|
2872
|
+
| description | 自定义描述内容 | React.ReactNode | |
|
|
2873
|
+
| onOk | ok按钮的点击事件 | (e: React.MouseEvent) => void | |
|
|
2874
|
+
| okText | ok按钮的文本 | React.ReactNode | |
|
|
2875
|
+
| okType | ok按钮的类型 | SparkButtonProps['type'] | 'primary' |
|
|
2876
|
+
| okButtonProps | ok按钮的props | SparkButtonProps | |
|
|
2877
|
+
| children | 自定义空状态的内容 | React.ReactNode | |
|
|
2878
|
+
| className | 自定义空状态的类名 | string | |
|
|
2879
|
+
| style | 自定义空状态的样式 | React.CSSProperties | |
|
|
2880
|
+
| size | 自定义空状态的大小 | React.CSSProperties['width'] | |
|
|
2881
|
+
| autoFit | 是否自适应容器宽度，当容器宽度小于 size 时自动缩放 | boolean | false |
|
|
2882
|
+
|
|
2883
|
+
|
|
2884
|
+
<AntdApiRef url="https://ant.design/components/empty-cn/#api"></AntdApiRef>
|
|
2885
|
+
|
|
2886
|
+
|
|
2887
|
+
|
|
2888
|
+
|
|
2889
|
+
|
|
2845
2890
|
<DemoTitle title="Dropdown" desc="向下弹出的列表。">
|
|
2846
2891
|
#### API
|
|
2847
2892
|
|
|
@@ -2987,52 +3032,8 @@ const dividerItem = {
|
|
|
2987
3032
|
|
|
2988
3033
|
|
|
2989
3034
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2990
|
-
|--------|--------|--------|--------|--------|
|
|
2991
|
-
| dashed | 是否虚线 | boolean | false | |
|
|
2992
|
-
|
|
2993
|
-
|
|
2994
|
-
|
|
2995
|
-
|
|
2996
|
-
<DemoTitle title="Empty" desc="用于空状态的占位图形展示。">
|
|
2997
|
-
## API
|
|
2998
|
-
|
|
2999
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3000
|
-
|--------|--------|--------|--------|
|
|
3001
|
-
| type | 空状态类型 | \| 'noData'
|
|
3002
|
-
\| 'networkError'
|
|
3003
|
-
\| '404'
|
|
3004
|
-
\| 'arrears'
|
|
3005
|
-
\| 'desktopOnly'
|
|
3006
|
-
\| 'noAudio'
|
|
3007
|
-
\| 'noImage'
|
|
3008
|
-
\| 'noVideo'
|
|
3009
|
-
\| 'noAccess'
|
|
3010
|
-
\| 'error'
|
|
3011
|
-
\| 'noChat'
|
|
3012
|
-
\| 'noModel'
|
|
3013
|
-
\| 'noApp'
|
|
3014
|
-
\| 'success'
|
|
3015
|
-
\| 'failed'
|
|
3016
|
-
\| 'inProgress'
|
|
3017
|
-
\| 'stayTuned' | 'noData' |
|
|
3018
|
-
| texture | 是否显示纹理 | boolean | true |
|
|
3019
|
-
| image | 图片地址 | string | 默认是no data的图片 |
|
|
3020
|
-
| imageStyle | 图片样式 | React.CSSProperties | |
|
|
3021
|
-
| title | 标题内容 | React.ReactNode | |
|
|
3022
|
-
| description | 自定义描述内容 | React.ReactNode | |
|
|
3023
|
-
| onOk | ok按钮的点击事件 | (e: React.MouseEvent) => void | |
|
|
3024
|
-
| okText | ok按钮的文本 | React.ReactNode | |
|
|
3025
|
-
| okType | ok按钮的类型 | SparkButtonProps['type'] | 'primary' |
|
|
3026
|
-
| okButtonProps | ok按钮的props | SparkButtonProps | |
|
|
3027
|
-
| children | 自定义空状态的内容 | React.ReactNode | |
|
|
3028
|
-
| className | 自定义空状态的类名 | string | |
|
|
3029
|
-
| style | 自定义空状态的样式 | React.CSSProperties | |
|
|
3030
|
-
| size | 自定义空状态的大小 | React.CSSProperties['width'] | |
|
|
3031
|
-
| autoFit | 是否自适应容器宽度，当容器宽度小于 size 时自动缩放 | boolean | false |
|
|
3032
|
-
|
|
3033
|
-
|
|
3034
|
-
<AntdApiRef url="https://ant.design/components/empty-cn/#api"></AntdApiRef>
|
|
3035
|
-
|
|
3035
|
+
|--------|--------|--------|--------|--------|
|
|
3036
|
+
| dashed | 是否虚线 | boolean | false | |
|
|
3036
3037
|
|
|
3037
3038
|
|
|
3038
3039
|
|
|
@@ -3139,6 +3140,135 @@ span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem
|
|
|
3139
3140
|
|
|
3140
3141
|
|
|
3141
3142
|
|
|
3143
|
+
<DemoTitle title="CollapsePanel" desc="折叠面板">
|
|
3144
|
+
#### API
|
|
3145
|
+
|
|
3146
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3147
|
+
|--------|--------|--------|--------|
|
|
3148
|
+
| collapsedHeight | 收起状态下显示的内容高度 | number | 0 |
|
|
3149
|
+
| expandedHeight | 展开状态下的内容高度，设置后内容超出时可滚动，不设置则自适应内容高度 | number | 300 |
|
|
3150
|
+
| title | 面板标题 | string \| React.ReactNode | "" |
|
|
3151
|
+
| expandOnPanelClick | 是否允许点击整个面板进行展开 | boolean | false |
|
|
3152
|
+
| extra | 面板右侧内容 | React.ReactNode | |
|
|
3153
|
+
| children | 面板内容 | React.ReactNode | |
|
|
3154
|
+
| defaultExpanded | 是否默认展开 | boolean | false |
|
|
3155
|
+
| classNames | 语义化的classNames | Partial> | |
|
|
3156
|
+
| styles | 语义化的styles | Partial<
|
|
3157
|
+
Record
|
|
3158
|
+
> | |
|
|
3159
|
+
|
|
3160
|
+
|
|
3161
|
+
|
|
3162
|
+
## antd API
|
|
3163
|
+
|
|
3164
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3165
|
+
|
|
3166
|
+
### Collapse
|
|
3167
|
+
|
|
3168
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3169
|
+
|--------|--------|--------|--------|--------|
|
|
3170
|
+
| accordion | 手风琴模式 | boolean | false | |
|
|
3171
|
+
| activeKey | 当前激活 tab 面板的 key | string[] \| string | | |
|
|
3172
|
+
| bordered | 带边框风格的折叠面板 | boolean | true | |
|
|
3173
|
+
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 |
|
|
3174
|
+
| defaultActiveKey | 初始化选中面板的 key | string[] \| string | - | |
|
|
3175
|
+
| destroyOnHidden | 销毁折叠隐藏的面板 | boolean | false | 5.25.0 |
|
|
3176
|
+
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
|
|
3177
|
+
| expandIconPosition | 设置图标位置 | start | - | 4.21.0 |
|
|
3178
|
+
| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
|
|
3179
|
+
| size | 设置折叠面板大小 | large | middle | 5.2.0 |
|
|
3180
|
+
| onChange | 切换面板的回调 | function | - | |
|
|
3181
|
+
| items | 折叠项目内容 | | - | 5.6.0 |
|
|
3182
|
+
|
|
3183
|
+
|
|
3184
|
+
### ItemType
|
|
3185
|
+
|
|
3186
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3187
|
+
|--------|--------|--------|--------|--------|
|
|
3188
|
+
| classNames | 语义化结构 className | | - | 5.21.0 |
|
|
3189
|
+
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | |
|
|
3190
|
+
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3191
|
+
| key | 对应 activeKey | string \| number | - | |
|
|
3192
|
+
| label | 面板标题 | ReactNode | - | - |
|
|
3193
|
+
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3194
|
+
| styles | 语义化结构 style | | - | 5.21.0 |
|
|
3195
|
+
|
|
3196
|
+
|
|
3197
|
+
### Collapse.Panel
|
|
3198
|
+
|
|
3199
|
+
<!-- prettier-ignore -->
|
|
3200
|
+
<Container type="warning" title="已废弃">
|
|
3201
|
+
版本 >= 5.6.0 时请使用 items 方式配置面板。
|
|
3202
|
+
</Container>
|
|
3203
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3204
|
+
|--------|--------|--------|--------|--------|
|
|
3205
|
+
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 (icon: 4.24.0) |
|
|
3206
|
+
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3207
|
+
| header | 面板标题 | ReactNode | - | |
|
|
3208
|
+
| key | 对应 activeKey | string \| number | - | |
|
|
3209
|
+
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3210
|
+
|
|
3211
|
+
|
|
3212
|
+
|
|
3213
|
+
|
|
3214
|
+
<DemoTitle title="Collapse" desc="可以折叠/展开的内容区域">
|
|
3215
|
+
#### API
|
|
3216
|
+
|
|
3217
|
+
<AntdApiRef url="https://ant.design/components/collapse-cn/#api"></AntdApiRef>
|
|
3218
|
+
|
|
3219
|
+
|
|
3220
|
+
## antd API
|
|
3221
|
+
|
|
3222
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3223
|
+
|
|
3224
|
+
### Collapse
|
|
3225
|
+
|
|
3226
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3227
|
+
|--------|--------|--------|--------|--------|
|
|
3228
|
+
| accordion | 手风琴模式 | boolean | false | |
|
|
3229
|
+
| activeKey | 当前激活 tab 面板的 key | string[] \| string | | |
|
|
3230
|
+
| bordered | 带边框风格的折叠面板 | boolean | true | |
|
|
3231
|
+
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 |
|
|
3232
|
+
| defaultActiveKey | 初始化选中面板的 key | string[] \| string | - | |
|
|
3233
|
+
| destroyOnHidden | 销毁折叠隐藏的面板 | boolean | false | 5.25.0 |
|
|
3234
|
+
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
|
|
3235
|
+
| expandIconPosition | 设置图标位置 | start | - | 4.21.0 |
|
|
3236
|
+
| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
|
|
3237
|
+
| size | 设置折叠面板大小 | large | middle | 5.2.0 |
|
|
3238
|
+
| onChange | 切换面板的回调 | function | - | |
|
|
3239
|
+
| items | 折叠项目内容 | | - | 5.6.0 |
|
|
3240
|
+
|
|
3241
|
+
|
|
3242
|
+
### ItemType
|
|
3243
|
+
|
|
3244
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3245
|
+
|--------|--------|--------|--------|--------|
|
|
3246
|
+
| classNames | 语义化结构 className | | - | 5.21.0 |
|
|
3247
|
+
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | |
|
|
3248
|
+
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3249
|
+
| key | 对应 activeKey | string \| number | - | |
|
|
3250
|
+
| label | 面板标题 | ReactNode | - | - |
|
|
3251
|
+
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3252
|
+
| styles | 语义化结构 style | | - | 5.21.0 |
|
|
3253
|
+
|
|
3254
|
+
|
|
3255
|
+
### Collapse.Panel
|
|
3256
|
+
|
|
3257
|
+
<!-- prettier-ignore -->
|
|
3258
|
+
<Container type="warning" title="已废弃">
|
|
3259
|
+
版本 >= 5.6.0 时请使用 items 方式配置面板。
|
|
3260
|
+
</Container>
|
|
3261
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3262
|
+
|--------|--------|--------|--------|--------|
|
|
3263
|
+
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 (icon: 4.24.0) |
|
|
3264
|
+
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3265
|
+
| header | 面板标题 | ReactNode | - | |
|
|
3266
|
+
| key | 对应 activeKey | string \| number | - | |
|
|
3267
|
+
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3268
|
+
|
|
3269
|
+
|
|
3270
|
+
|
|
3271
|
+
|
|
3142
3272
|
<DemoTitle title="DatePicker" desc="输入或选择时间的控件。">
|
|
3143
3273
|
#### API
|
|
3144
3274
|
|
|
@@ -3349,159 +3479,30 @@ type GenericFn = (value: Dayjs) => string;
|
|
|
3349
3479
|
export type FormatType =
|
|
3350
3480
|
| Generic
|
|
3351
3481
|
| GenericFn
|
|
3352
|
-
| Array
|
|
3353
|
-
| {
|
|
3354
|
-
format: string;
|
|
3355
|
-
type?: 'mask';
|
|
3356
|
-
};
|
|
3357
|
-
```
|
|
3358
|
-
|
|
3359
|
-
|
|
3360
|
-
注意：`type` 定义为 `5.14.0` 新增。
|
|
3361
|
-
|
|
3362
|
-
|
|
3363
|
-
|
|
3364
|
-
<DemoTitle title="CodeBlock" desc="代码块">
|
|
3365
|
-
#### API
|
|
3366
|
-
|
|
3367
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3368
|
-
|--------|--------|--------|--------|
|
|
3369
|
-
| language | 语言 | string \| string[] | (必填) |
|
|
3370
|
-
| value | 值 | string | |
|
|
3371
|
-
| className | 类名 | string | |
|
|
3372
|
-
| theme | 主题 | 'dark' \| 'light' | |
|
|
3373
|
-
| readOnly | 只读 | boolean | |
|
|
3374
|
-
| onChange | | (value?: string) => void | |
|
|
3375
|
-
| extensions | 扩展 | Extension[] | [] |
|
|
3376
|
-
|
|
3377
|
-
|
|
3378
|
-
|
|
3379
|
-
|
|
3380
|
-
<DemoTitle title="CollapsePanel" desc="折叠面板">
|
|
3381
|
-
#### API
|
|
3382
|
-
|
|
3383
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3384
|
-
|--------|--------|--------|--------|
|
|
3385
|
-
| collapsedHeight | 收起状态下显示的内容高度 | number | 0 |
|
|
3386
|
-
| expandedHeight | 展开状态下的内容高度，设置后内容超出时可滚动，不设置则自适应内容高度 | number | 300 |
|
|
3387
|
-
| title | 面板标题 | string \| React.ReactNode | "" |
|
|
3388
|
-
| expandOnPanelClick | 是否允许点击整个面板进行展开 | boolean | false |
|
|
3389
|
-
| extra | 面板右侧内容 | React.ReactNode | |
|
|
3390
|
-
| children | 面板内容 | React.ReactNode | |
|
|
3391
|
-
| defaultExpanded | 是否默认展开 | boolean | false |
|
|
3392
|
-
| classNames | 语义化的classNames | Partial> | |
|
|
3393
|
-
| styles | 语义化的styles | Partial<
|
|
3394
|
-
Record
|
|
3395
|
-
> | |
|
|
3396
|
-
|
|
3397
|
-
|
|
3398
|
-
|
|
3399
|
-
## antd API
|
|
3400
|
-
|
|
3401
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3402
|
-
|
|
3403
|
-
### Collapse
|
|
3404
|
-
|
|
3405
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3406
|
-
|--------|--------|--------|--------|--------|
|
|
3407
|
-
| accordion | 手风琴模式 | boolean | false | |
|
|
3408
|
-
| activeKey | 当前激活 tab 面板的 key | string[] \| string | | |
|
|
3409
|
-
| bordered | 带边框风格的折叠面板 | boolean | true | |
|
|
3410
|
-
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 |
|
|
3411
|
-
| defaultActiveKey | 初始化选中面板的 key | string[] \| string | - | |
|
|
3412
|
-
| destroyOnHidden | 销毁折叠隐藏的面板 | boolean | false | 5.25.0 |
|
|
3413
|
-
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
|
|
3414
|
-
| expandIconPosition | 设置图标位置 | start | - | 4.21.0 |
|
|
3415
|
-
| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
|
|
3416
|
-
| size | 设置折叠面板大小 | large | middle | 5.2.0 |
|
|
3417
|
-
| onChange | 切换面板的回调 | function | - | |
|
|
3418
|
-
| items | 折叠项目内容 | | - | 5.6.0 |
|
|
3419
|
-
|
|
3420
|
-
|
|
3421
|
-
### ItemType
|
|
3422
|
-
|
|
3423
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3424
|
-
|--------|--------|--------|--------|--------|
|
|
3425
|
-
| classNames | 语义化结构 className | | - | 5.21.0 |
|
|
3426
|
-
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | |
|
|
3427
|
-
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3428
|
-
| key | 对应 activeKey | string \| number | - | |
|
|
3429
|
-
| label | 面板标题 | ReactNode | - | - |
|
|
3430
|
-
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3431
|
-
| styles | 语义化结构 style | | - | 5.21.0 |
|
|
3432
|
-
|
|
3433
|
-
|
|
3434
|
-
### Collapse.Panel
|
|
3435
|
-
|
|
3436
|
-
<!-- prettier-ignore -->
|
|
3437
|
-
<Container type="warning" title="已废弃">
|
|
3438
|
-
版本 >= 5.6.0 时请使用 items 方式配置面板。
|
|
3439
|
-
</Container>
|
|
3440
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3441
|
-
|--------|--------|--------|--------|--------|
|
|
3442
|
-
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 (icon: 4.24.0) |
|
|
3443
|
-
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3444
|
-
| header | 面板标题 | ReactNode | - | |
|
|
3445
|
-
| key | 对应 activeKey | string \| number | - | |
|
|
3446
|
-
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3447
|
-
|
|
3448
|
-
|
|
3449
|
-
|
|
3450
|
-
|
|
3451
|
-
<DemoTitle title="Collapse" desc="可以折叠/展开的内容区域">
|
|
3452
|
-
#### API
|
|
3453
|
-
|
|
3454
|
-
<AntdApiRef url="https://ant.design/components/collapse-cn/#api"></AntdApiRef>
|
|
3455
|
-
|
|
3456
|
-
|
|
3457
|
-
## antd API
|
|
3458
|
-
|
|
3459
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3460
|
-
|
|
3461
|
-
### Collapse
|
|
3462
|
-
|
|
3463
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3464
|
-
|--------|--------|--------|--------|--------|
|
|
3465
|
-
| accordion | 手风琴模式 | boolean | false | |
|
|
3466
|
-
| activeKey | 当前激活 tab 面板的 key | string[] \| string | | |
|
|
3467
|
-
| bordered | 带边框风格的折叠面板 | boolean | true | |
|
|
3468
|
-
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 |
|
|
3469
|
-
| defaultActiveKey | 初始化选中面板的 key | string[] \| string | - | |
|
|
3470
|
-
| destroyOnHidden | 销毁折叠隐藏的面板 | boolean | false | 5.25.0 |
|
|
3471
|
-
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
|
|
3472
|
-
| expandIconPosition | 设置图标位置 | start | - | 4.21.0 |
|
|
3473
|
-
| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
|
|
3474
|
-
| size | 设置折叠面板大小 | large | middle | 5.2.0 |
|
|
3475
|
-
| onChange | 切换面板的回调 | function | - | |
|
|
3476
|
-
| items | 折叠项目内容 | | - | 5.6.0 |
|
|
3482
|
+
| Array
|
|
3483
|
+
| {
|
|
3484
|
+
format: string;
|
|
3485
|
+
type?: 'mask';
|
|
3486
|
+
};
|
|
3487
|
+
```
|
|
3477
3488
|
|
|
3478
3489
|
|
|
3479
|
-
|
|
3490
|
+
注意：`type` 定义为 `5.14.0` 新增。
|
|
3480
3491
|
|
|
3481
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3482
|
-
|--------|--------|--------|--------|--------|
|
|
3483
|
-
| classNames | 语义化结构 className | | - | 5.21.0 |
|
|
3484
|
-
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | |
|
|
3485
|
-
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3486
|
-
| key | 对应 activeKey | string \| number | - | |
|
|
3487
|
-
| label | 面板标题 | ReactNode | - | - |
|
|
3488
|
-
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3489
|
-
| styles | 语义化结构 style | | - | 5.21.0 |
|
|
3490
3492
|
|
|
3491
3493
|
|
|
3492
|
-
|
|
3494
|
+
<DemoTitle title="CodeBlock" desc="代码块">
|
|
3495
|
+
#### API
|
|
3493
3496
|
|
|
3494
|
-
|
|
3495
|
-
|
|
3496
|
-
|
|
3497
|
-
|
|
3498
|
-
|
|
|
3499
|
-
|
|
3500
|
-
|
|
|
3501
|
-
|
|
|
3502
|
-
|
|
|
3503
|
-
| key | 对应 activeKey | string \| number | - | |
|
|
3504
|
-
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3497
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3498
|
+
|--------|--------|--------|--------|
|
|
3499
|
+
| language | 语言 | string \| string[] | (必填) |
|
|
3500
|
+
| value | 值 | string | |
|
|
3501
|
+
| className | 类名 | string | |
|
|
3502
|
+
| theme | 主题 | 'dark' \| 'light' | |
|
|
3503
|
+
| readOnly | 只读 | boolean | |
|
|
3504
|
+
| onChange | | (value?: string) => void | |
|
|
3505
|
+
| extensions | 扩展 | Extension[] | [] |
|
|
3505
3506
|
|
|
3506
3507
|
|
|
3507
3508
|
|
|
@@ -3640,6 +3641,61 @@ interface Option {
|
|
|
3640
3641
|
|
|
3641
3642
|
|
|
3642
3643
|
|
|
3644
|
+
<DemoTitle title="Button" desc="按钮用于开始一个即时操作。">
|
|
3645
|
+
#### API
|
|
3646
|
+
|
|
3647
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3648
|
+
|--------|--------|--------|--------|
|
|
3649
|
+
| size | 按钮大小 | 'small' \| 'middle' \| 'large' | 'middle' |
|
|
3650
|
+
| type | 类型 | \| 'primary'
|
|
3651
|
+
\| 'dashed'
|
|
3652
|
+
\| 'link'
|
|
3653
|
+
\| 'text'
|
|
3654
|
+
\| 'default'
|
|
3655
|
+
\| 'primaryLess'
|
|
3656
|
+
\| 'textCompact' | 'deafult' |
|
|
3657
|
+
| tooltipContent | hover上去tooltip的内容 | string \| ReactNode | |
|
|
3658
|
+
| iconType | 百炼图标iconfont的key，依赖ConfigProvider传入的iconfont，例如bl-icon-add | string | |
|
|
3659
|
+
| iconSize | 图标大小 | SparkIconFontProps['size'] | |
|
|
3660
|
+
|
|
3661
|
+
<AntdApiRef url="https://ant.design/components/button-cn/#api"></AntdApiRef>
|
|
3662
|
+
|
|
3663
|
+
|
|
3664
|
+
## antd API
|
|
3665
|
+
|
|
3666
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3667
|
+
|
|
3668
|
+
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
3669
|
+
|
|
3670
|
+
按钮的属性说明如下：
|
|
3671
|
+
|
|
3672
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
3673
|
+
|--------|--------|--------|--------|--------|
|
|
3674
|
+
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
3675
|
+
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
3676
|
+
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
3677
|
+
| color | 设置按钮的颜色 | default | - | default |
|
|
3678
|
+
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
3679
|
+
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
3680
|
+
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
3681
|
+
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
3682
|
+
| htmlType | 设置 | submit | button | |
|
|
3683
|
+
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
3684
|
+
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
3685
|
+
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
3686
|
+
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
3687
|
+
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
3688
|
+
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
3689
|
+
|
|
3690
|
+
|
|
3691
|
+
支持原生 button 的其他所有属性。
|
|
3692
|
+
|
|
3693
|
+
### PresetColors
|
|
3694
|
+
|
|
3695
|
+
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
3696
|
+
|
|
3697
|
+
|
|
3698
|
+
|
|
3643
3699
|
<DemoTitle title="Breadcrumb" desc="显示当前页面在系统层级结构中的位置，并能向上返回。">
|
|
3644
3700
|
#### API
|
|
3645
3701
|
|
|
@@ -3759,61 +3815,6 @@ return <Breadcrumb itemRender={itemRender} items={items} />;
|
|
|
3759
3815
|
|
|
3760
3816
|
|
|
3761
3817
|
|
|
3762
|
-
<DemoTitle title="Button" desc="按钮用于开始一个即时操作。">
|
|
3763
|
-
#### API
|
|
3764
|
-
|
|
3765
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3766
|
-
|--------|--------|--------|--------|
|
|
3767
|
-
| size | 按钮大小 | 'small' \| 'middle' \| 'large' | 'middle' |
|
|
3768
|
-
| type | 类型 | \| 'primary'
|
|
3769
|
-
\| 'dashed'
|
|
3770
|
-
\| 'link'
|
|
3771
|
-
\| 'text'
|
|
3772
|
-
\| 'default'
|
|
3773
|
-
\| 'primaryLess'
|
|
3774
|
-
\| 'textCompact' | 'deafult' |
|
|
3775
|
-
| tooltipContent | hover上去tooltip的内容 | string \| ReactNode | |
|
|
3776
|
-
| iconType | 百炼图标iconfont的key，依赖ConfigProvider传入的iconfont，例如bl-icon-add | string | |
|
|
3777
|
-
| iconSize | 图标大小 | SparkIconFontProps['size'] | |
|
|
3778
|
-
|
|
3779
|
-
<AntdApiRef url="https://ant.design/components/button-cn/#api"></AntdApiRef>
|
|
3780
|
-
|
|
3781
|
-
|
|
3782
|
-
## antd API
|
|
3783
|
-
|
|
3784
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3785
|
-
|
|
3786
|
-
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
3787
|
-
|
|
3788
|
-
按钮的属性说明如下：
|
|
3789
|
-
|
|
3790
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
3791
|
-
|--------|--------|--------|--------|--------|
|
|
3792
|
-
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
3793
|
-
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
3794
|
-
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
3795
|
-
| color | 设置按钮的颜色 | default | - | default |
|
|
3796
|
-
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
3797
|
-
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
3798
|
-
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
3799
|
-
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
3800
|
-
| htmlType | 设置 | submit | button | |
|
|
3801
|
-
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
3802
|
-
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
3803
|
-
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
3804
|
-
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
3805
|
-
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
3806
|
-
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
3807
|
-
|
|
3808
|
-
|
|
3809
|
-
支持原生 button 的其他所有属性。
|
|
3810
|
-
|
|
3811
|
-
### PresetColors
|
|
3812
|
-
|
|
3813
|
-
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
3814
|
-
|
|
3815
|
-
|
|
3816
|
-
|
|
3817
3818
|
<DemoTitle title="Avatar" desc="用来代表用户或事物，支持图片、图标或字符展示。">
|
|
3818
3819
|
#### API
|
|
3819
3820
|
|
|
@@ -3862,6 +3863,59 @@ ApiParser解析结果为空
|
|
|
3862
3863
|
|
|
3863
3864
|
|
|
3864
3865
|
|
|
3866
|
+
<DemoTitle title="Anchor" desc="用于跳转到页面指定位置。">
|
|
3867
|
+
#### API
|
|
3868
|
+
|
|
3869
|
+
<AntdApiRef url="https://ant.design/components/anchor-cn/#api"></AntdApiRef>
|
|
3870
|
+
|
|
3871
|
+
|
|
3872
|
+
## antd API
|
|
3873
|
+
|
|
3874
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3875
|
+
|
|
3876
|
+
### Anchor Props
|
|
3877
|
+
|
|
3878
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3879
|
+
|--------|--------|--------|--------|--------|
|
|
3880
|
+
| affix | 固定模式 | boolean \| Omit | true | object: 5.19.0 |
|
|
3881
|
+
| bounds | 锚点区域边界 | number | 5 | |
|
|
3882
|
+
| getContainer | 指定滚动的容器 | () => HTMLElement | () => window | |
|
|
3883
|
+
| getCurrentAnchor | 自定义高亮的锚点 | (activeLink: string) => string | - | |
|
|
3884
|
+
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
|
|
3885
|
+
| showInkInFixed | affix={false} | boolean | false | |
|
|
3886
|
+
| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同， | number | - | |
|
|
3887
|
+
| onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - | |
|
|
3888
|
+
| onClick | click | (e: MouseEvent, link: object) => void | - | |
|
|
3889
|
+
| items | 数据化配置选项内容，支持通过 children 嵌套 | { key, href, title, target, children }[] | - | 5.1.0 |
|
|
3890
|
+
| direction | 设置导航方向 | vertical | vertical | 5.2.0 |
|
|
3891
|
+
| replace | 替换浏览器历史记录中项目的 href 而不是推送它 | boolean | false | 5.7.0 |
|
|
3892
|
+
|
|
3893
|
+
|
|
3894
|
+
### AnchorItem
|
|
3895
|
+
|
|
3896
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3897
|
+
|--------|--------|--------|--------|--------|
|
|
3898
|
+
| key | 唯一标志 | string \| number | - | |
|
|
3899
|
+
| href | 锚点链接 | string | - | |
|
|
3900
|
+
| target | 该属性指定在何处显示链接的资源 | string | - | |
|
|
3901
|
+
| title | 文字内容 | ReactNode | - | |
|
|
3902
|
+
| children | 嵌套的 Anchor Link， | | - | |
|
|
3903
|
+
| replace | 替换浏览器历史记录中的项目 href 而不是推送它 | boolean | false | 5.7.0 |
|
|
3904
|
+
|
|
3905
|
+
|
|
3906
|
+
### Link Props
|
|
3907
|
+
|
|
3908
|
+
建议使用 items 形式。
|
|
3909
|
+
|
|
3910
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3911
|
+
|--------|--------|--------|--------|--------|
|
|
3912
|
+
| href | 锚点链接 | string | - | |
|
|
3913
|
+
| target | 该属性指定在何处显示链接的资源 | string | - | |
|
|
3914
|
+
| title | 文字内容 | ReactNode | - | |
|
|
3915
|
+
|
|
3916
|
+
|
|
3917
|
+
|
|
3918
|
+
|
|
3865
3919
|
<DemoTitle title="AlertDialog" desc="一种在界面中弹出的对话框，用来向用户传达重要信息，并引导其进行确认或取消等操作。">
|
|
3866
3920
|
#### API
|
|
3867
3921
|
|
|
@@ -4069,59 +4123,6 @@ const confirmed = await modal.confirm({ ... });
|
|
|
4069
4123
|
|
|
4070
4124
|
|
|
4071
4125
|
|
|
4072
|
-
<DemoTitle title="Anchor" desc="用于跳转到页面指定位置。">
|
|
4073
|
-
#### API
|
|
4074
|
-
|
|
4075
|
-
<AntdApiRef url="https://ant.design/components/anchor-cn/#api"></AntdApiRef>
|
|
4076
|
-
|
|
4077
|
-
|
|
4078
|
-
## antd API
|
|
4079
|
-
|
|
4080
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
4081
|
-
|
|
4082
|
-
### Anchor Props
|
|
4083
|
-
|
|
4084
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
4085
|
-
|--------|--------|--------|--------|--------|
|
|
4086
|
-
| affix | 固定模式 | boolean \| Omit | true | object: 5.19.0 |
|
|
4087
|
-
| bounds | 锚点区域边界 | number | 5 | |
|
|
4088
|
-
| getContainer | 指定滚动的容器 | () => HTMLElement | () => window | |
|
|
4089
|
-
| getCurrentAnchor | 自定义高亮的锚点 | (activeLink: string) => string | - | |
|
|
4090
|
-
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
|
|
4091
|
-
| showInkInFixed | affix={false} | boolean | false | |
|
|
4092
|
-
| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同， | number | - | |
|
|
4093
|
-
| onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - | |
|
|
4094
|
-
| onClick | click | (e: MouseEvent, link: object) => void | - | |
|
|
4095
|
-
| items | 数据化配置选项内容，支持通过 children 嵌套 | { key, href, title, target, children }[] | - | 5.1.0 |
|
|
4096
|
-
| direction | 设置导航方向 | vertical | vertical | 5.2.0 |
|
|
4097
|
-
| replace | 替换浏览器历史记录中项目的 href 而不是推送它 | boolean | false | 5.7.0 |
|
|
4098
|
-
|
|
4099
|
-
|
|
4100
|
-
### AnchorItem
|
|
4101
|
-
|
|
4102
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
4103
|
-
|--------|--------|--------|--------|--------|
|
|
4104
|
-
| key | 唯一标志 | string \| number | - | |
|
|
4105
|
-
| href | 锚点链接 | string | - | |
|
|
4106
|
-
| target | 该属性指定在何处显示链接的资源 | string | - | |
|
|
4107
|
-
| title | 文字内容 | ReactNode | - | |
|
|
4108
|
-
| children | 嵌套的 Anchor Link， | | - | |
|
|
4109
|
-
| replace | 替换浏览器历史记录中的项目 href 而不是推送它 | boolean | false | 5.7.0 |
|
|
4110
|
-
|
|
4111
|
-
|
|
4112
|
-
### Link Props
|
|
4113
|
-
|
|
4114
|
-
建议使用 items 形式。
|
|
4115
|
-
|
|
4116
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
4117
|
-
|--------|--------|--------|--------|--------|
|
|
4118
|
-
| href | 锚点链接 | string | - | |
|
|
4119
|
-
| target | 该属性指定在何处显示链接的资源 | string | - | |
|
|
4120
|
-
| title | 文字内容 | ReactNode | - | |
|
|
4121
|
-
|
|
4122
|
-
|
|
4123
|
-
|
|
4124
|
-
|
|
4125
4126
|
# 使用
|
|
4126
4127
|
|
|
4127
4128
|
|