@agentscope-ai/design 1.0.26 → 1.0.27-beta.1769678521654
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/index.style.js +3 -1
- package/lib/antd/styles/inputSearch.style.d.ts +2 -0
- package/lib/antd/styles/inputSearch.style.js +15 -0
- package/lib/antd/styles/table.style.js +7 -1
- package/lib/components/commonComponents/Audio/Control.style.js +1 -1
- package/lib/components/commonComponents/CodeBlock/index.d.ts +7 -0
- package/lib/components/commonComponents/CodeBlock/index.js +2 -2
- package/lib/components/commonComponents/MediaPreview/demo/demo1.d.ts +1 -0
- package/lib/components/commonComponents/MediaPreview/demo/demo1.js +44 -0
- package/lib/components/commonComponents/MediaPreview/index.d.ts +23 -0
- package/lib/components/commonComponents/MediaPreview/index.js +352 -0
- package/lib/components/commonComponents/MediaPreview/index.style.d.ts +1 -0
- package/lib/components/commonComponents/MediaPreview/index.style.js +54 -0
- package/lib/components/commonComponents/Pagination/index.js +22 -23
- package/lib/components/commonComponents/PromptsEditor/index.d.ts +6 -0
- package/lib/components/commonComponents/PromptsEditor/index.js +2 -1
- package/lib/components/commonComponents/Tabs/index.d.ts +6 -0
- package/lib/components/commonComponents/Tabs/index.js +7 -5
- package/lib/index.d.ts +9 -8
- package/lib/index.js +7 -6
- package/llms/all.llms.txt +1071 -1039
- package/llms/components/commonComponents/CodeBlock/index.zh-CN.llms.txt +1 -0
- package/llms/components/commonComponents/InputSearch/index.zh-CN.llms.txt +6 -0
- package/llms/components/commonComponents/MediaPreview/index.zh-CN.llms.txt +21 -0
- package/llms/components/commonComponents/Tabs/index.zh-CN.llms.txt +1 -0
- package/llms/docs/changelog/index.zh-CN.llms.txt +22 -0
- package/llms/index.llms.txt +19 -17
- package/package.json +1 -1
- package/llms/docs/guide/iconLibrary.zh-CN.llms.txt +0 -150
- package/llms/docs/icons/sparkIcons.zh-CN.llms.txt +0 -25
package/llms/all.llms.txt
CHANGED
|
@@ -1,14 +1,48 @@
|
|
|
1
1
|
|
|
2
2
|
|
|
3
|
-
<DemoTitle title="
|
|
3
|
+
<DemoTitle title="Tooltip" desc="简单的文本提示气泡框">
|
|
4
4
|
#### API
|
|
5
5
|
|
|
6
6
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
7
7
|
|--------|--------|--------|--------|
|
|
8
|
-
|
|
|
9
|
-
|
|
|
8
|
+
| mode | 颜色模式 | 'dark' \| 'light' | 'dark' |
|
|
9
|
+
| maxHeight | 最大高度 | number \| string | '90vh' |
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
<AntdApiRef url="https://ant.design/components/tooltip-cn/#api"></AntdApiRef>
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## antd API
|
|
16
|
+
|
|
17
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
18
|
+
|
|
19
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
20
|
+
|--------|--------|--------|--------|
|
|
21
|
+
| title | 提示文字 | ReactNode \| () => ReactNode | - |
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
### 共同的 API
|
|
10
25
|
|
|
26
|
+
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
11
27
|
|
|
28
|
+
<!-- prettier-ignore -->
|
|
29
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
30
|
+
|--------|--------|--------|--------|--------|
|
|
31
|
+
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
32
|
+
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
33
|
+
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
34
|
+
| color | 背景颜色 | string | - | 4.3.0 |
|
|
35
|
+
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
36
|
+
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
37
|
+
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
38
|
+
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
39
|
+
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
40
|
+
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
41
|
+
| placement | 气泡框位置，可选 | string | top | |
|
|
42
|
+
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
43
|
+
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
44
|
+
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
45
|
+
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
12
46
|
|
|
13
47
|
|
|
14
48
|
|
|
@@ -109,49 +143,108 @@
|
|
|
109
143
|
|
|
110
144
|
|
|
111
145
|
|
|
112
|
-
<DemoTitle title="
|
|
146
|
+
<DemoTitle title="Tag" desc="进行标记和分类的小标签">
|
|
113
147
|
#### API
|
|
114
148
|
|
|
115
149
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
116
150
|
|--------|--------|--------|--------|
|
|
117
|
-
|
|
|
118
|
-
|
|
|
119
|
-
|
|
151
|
+
| size | 尺寸 | 'small' \| 'middle' | 'middle' |
|
|
152
|
+
| color | 标签色 | SparkTagColors \| string | 'purple' |
|
|
120
153
|
|
|
121
|
-
<AntdApiRef url="https://ant.design/components/
|
|
154
|
+
<AntdApiRef url="https://ant.design/components/tag-cn/#api"></AntdApiRef>
|
|
122
155
|
|
|
123
156
|
|
|
124
157
|
## antd API
|
|
125
158
|
|
|
126
159
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
127
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
|
+
|
|
128
173
|
| 参数 | 说明 | 类型 | 默认值 |
|
|
129
174
|
|--------|--------|--------|--------|
|
|
130
|
-
|
|
|
175
|
+
| checked | 设置标签的选中状态 | boolean | false |
|
|
176
|
+
| onChange | 点击标签时触发的回调 | (checked) => void | - |
|
|
131
177
|
|
|
132
178
|
|
|
133
|
-
### 共同的 API
|
|
134
179
|
|
|
135
|
-
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
136
180
|
|
|
137
|
-
|
|
181
|
+
<DemoTitle title="Tabs" desc="用户可以通过点击不同的标签在同一页面中查看不同的内容区域。">
|
|
182
|
+
#### API
|
|
183
|
+
|
|
184
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
185
|
+
|--------|--------|--------|--------|
|
|
186
|
+
| type | 类型 | 'line' \| 'card' \| 'editable-card' \| 'segmented' | true |
|
|
187
|
+
| className | 类名 | string | '' |
|
|
188
|
+
|
|
189
|
+
|
|
190
|
+
<AntdApiRef url="https://ant.design/components/tabs-cn/#api"></AntdApiRef>
|
|
191
|
+
|
|
192
|
+
|
|
193
|
+
## antd API
|
|
194
|
+
|
|
195
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
196
|
+
|
|
197
|
+
### Tabs
|
|
198
|
+
|
|
138
199
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
139
200
|
|--------|--------|--------|--------|--------|
|
|
140
|
-
|
|
|
141
|
-
|
|
|
142
|
-
|
|
|
143
|
-
|
|
|
144
|
-
|
|
|
145
|
-
|
|
|
146
|
-
|
|
|
147
|
-
|
|
|
148
|
-
|
|
|
149
|
-
|
|
|
150
|
-
|
|
|
151
|
-
|
|
|
152
|
-
|
|
|
153
|
-
|
|
|
154
|
-
|
|
|
201
|
+
| activeKey | 当前激活 tab 面板的 key | string | - | |
|
|
202
|
+
| addIcon | 自定义添加按钮，设置 | ReactNode | | 4.4.0 |
|
|
203
|
+
| animated | 是否使用动画切换 Tabs | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | |
|
|
204
|
+
| centered | 标签居中展示 | boolean | false | 4.4.0 |
|
|
205
|
+
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板的 key | |
|
|
206
|
+
| hideAdd | 是否隐藏加号图标，在 | boolean | false | |
|
|
207
|
+
| indicator | 自定义指示条的长度和对齐方式 | { size?: number \| (origin: number) => number; align: | - | 5.13.0 |
|
|
208
|
+
| items | 配置选项卡内容 | | [] | 4.23.0 |
|
|
209
|
+
| more | 自定义折叠菜单属性 | | { icon: | |
|
|
210
|
+
| removeIcon | 自定义删除按钮，设置 | ReactNode | | 5.15.0 |
|
|
211
|
+
| popupClassName | 更多菜单的 | string | - | 4.21.0 |
|
|
212
|
+
| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
|
|
213
|
+
| size | 大小，提供 | string | middle | |
|
|
214
|
+
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
|
|
215
|
+
| tabBarGutter | tabs 之间的间隙 | number | - | |
|
|
216
|
+
| tabBarStyle | tab bar 的样式对象 | CSSProperties | - | |
|
|
217
|
+
| tabPosition | 页签位置，可选值有 | string | top | |
|
|
218
|
+
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
219
|
+
| onChange | 切换面板的回调 | (activeKey: string) => void | - | |
|
|
220
|
+
| onEdit | 新增和删除页签的回调，在 | (action === 'add' ? event : targetKey, action) => void | - | |
|
|
221
|
+
| onTabClick | tab 被点击的回调 | (key: string, event: MouseEvent) => void | - | |
|
|
222
|
+
| onTabScroll | tab 滚动时触发 | ({ direction: | - | 4.3.0 |
|
|
223
|
+
|
|
224
|
+
|
|
225
|
+
更多属性查看 [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
|
|
226
|
+
|
|
227
|
+
### TabItemType
|
|
228
|
+
|
|
229
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
230
|
+
|--------|--------|--------|--------|--------|
|
|
231
|
+
| closeIcon | 自定义关闭图标，在 | ReactNode | - | |
|
|
232
|
+
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
233
|
+
| disabled | 禁用某一项 | boolean | false | |
|
|
234
|
+
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
|
|
235
|
+
| key | 对应 activeKey | string | - | |
|
|
236
|
+
| label | 选项卡头显示文字 | ReactNode | - | |
|
|
237
|
+
| icon | 选项卡头显示图标 | ReactNode | - | 5.12.0 |
|
|
238
|
+
| children | 选项卡头显示内容 | ReactNode | - | |
|
|
239
|
+
| closable | 是否显示选项卡的关闭按钮，在 | boolean | true | |
|
|
240
|
+
|
|
241
|
+
|
|
242
|
+
### MoreProps
|
|
243
|
+
|
|
244
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
245
|
+
|--------|--------|--------|--------|--------|
|
|
246
|
+
| icon | 自定义折叠图标 | ReactNode | - | |
|
|
247
|
+
| | | | | |
|
|
155
248
|
|
|
156
249
|
|
|
157
250
|
|
|
@@ -411,241 +504,108 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
411
504
|
|
|
412
505
|
|
|
413
506
|
|
|
414
|
-
<DemoTitle title="
|
|
507
|
+
<DemoTitle title="Video" desc="视频展示">
|
|
415
508
|
#### API
|
|
416
509
|
|
|
417
510
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
418
511
|
|--------|--------|--------|--------|
|
|
419
|
-
|
|
|
420
|
-
|
|
|
512
|
+
| mouseEnterAutoPlay | 鼠标进入时是否自动播放 | boolean | false |
|
|
513
|
+
| children | video内部设置了按钮在暗色背景下的样式，如果有一些操作按钮想继承这个样式可以在这里传入 | React.ReactNode | |
|
|
421
514
|
|
|
422
|
-
|
|
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>
|
|
423
524
|
|
|
424
525
|
|
|
425
526
|
## antd API
|
|
426
527
|
|
|
528
|
+
|
|
529
|
+
|
|
427
530
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
428
531
|
|
|
429
|
-
### Tag
|
|
430
532
|
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
| icon | 设置图标 | ReactNode | - | |
|
|
435
|
-
| bordered | 是否有边框 | boolean | true | 5.4.0 |
|
|
436
|
-
| onClose | 关闭时的回调（可通过 | (e: React.MouseEvent) => void | - | |
|
|
533
|
+
```jsx
|
|
534
|
+
import dayjs from 'dayjs';
|
|
535
|
+
import customParseFormat from 'dayjs/plugin/customParseFormat'
|
|
437
536
|
|
|
537
|
+
dayjs.extend(customParseFormat)
|
|
538
|
+
<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
|
|
539
|
+
```
|
|
438
540
|
|
|
439
|
-
### Tag.CheckableTag
|
|
440
541
|
|
|
441
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
442
|
-
|
|
443
|
-
|
|
|
444
|
-
|
|
|
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 | - | |
|
|
445
577
|
|
|
446
578
|
|
|
579
|
+
#### DisabledTime
|
|
447
580
|
|
|
448
581
|
|
|
449
|
-
|
|
450
|
-
|
|
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
|
+
```
|
|
451
594
|
|
|
452
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
453
|
-
|--------|--------|--------|--------|
|
|
454
|
-
| type | 类型 | 'line' \| 'card' \| 'editable-card' \| 'segmented' | true |
|
|
455
595
|
|
|
596
|
+
注意：`disabledMilliseconds` 为 `5.14.0` 新增。
|
|
456
597
|
|
|
457
|
-
|
|
598
|
+
## 方法
|
|
458
599
|
|
|
600
|
+
| 名称 | 描述 | 版本 |
|
|
601
|
+
|--------|--------|--------|
|
|
602
|
+
| blur() | 移除焦点 | |
|
|
603
|
+
| focus() | 获取焦点 | |
|
|
459
604
|
|
|
460
|
-
## antd API
|
|
461
605
|
|
|
462
|
-
|
|
606
|
+
## RangePicker
|
|
463
607
|
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
467
|
-
|--------|--------|--------|--------|--------|
|
|
468
|
-
| activeKey | 当前激活 tab 面板的 key | string | - | |
|
|
469
|
-
| addIcon | 自定义添加按钮，设置 | ReactNode | | 4.4.0 |
|
|
470
|
-
| animated | 是否使用动画切换 Tabs | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | |
|
|
471
|
-
| centered | 标签居中展示 | boolean | false | 4.4.0 |
|
|
472
|
-
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板的 key | |
|
|
473
|
-
| hideAdd | 是否隐藏加号图标，在 | boolean | false | |
|
|
474
|
-
| indicator | 自定义指示条的长度和对齐方式 | { size?: number \| (origin: number) => number; align: | - | 5.13.0 |
|
|
475
|
-
| items | 配置选项卡内容 | | [] | 4.23.0 |
|
|
476
|
-
| more | 自定义折叠菜单属性 | | { icon: | |
|
|
477
|
-
| removeIcon | 自定义删除按钮，设置 | ReactNode | | 5.15.0 |
|
|
478
|
-
| popupClassName | 更多菜单的 | string | - | 4.21.0 |
|
|
479
|
-
| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
|
|
480
|
-
| size | 大小，提供 | string | middle | |
|
|
481
|
-
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
|
|
482
|
-
| tabBarGutter | tabs 之间的间隙 | number | - | |
|
|
483
|
-
| tabBarStyle | tab bar 的样式对象 | CSSProperties | - | |
|
|
484
|
-
| tabPosition | 页签位置，可选值有 | string | top | |
|
|
485
|
-
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
486
|
-
| onChange | 切换面板的回调 | (activeKey: string) => void | - | |
|
|
487
|
-
| onEdit | 新增和删除页签的回调，在 | (action === 'add' ? event : targetKey, action) => void | - | |
|
|
488
|
-
| onTabClick | tab 被点击的回调 | (key: string, event: MouseEvent) => void | - | |
|
|
489
|
-
| onTabScroll | tab 滚动时触发 | ({ direction: | - | 4.3.0 |
|
|
490
|
-
|
|
491
|
-
|
|
492
|
-
更多属性查看 [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
|
|
493
|
-
|
|
494
|
-
### TabItemType
|
|
495
|
-
|
|
496
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
497
|
-
|--------|--------|--------|--------|--------|
|
|
498
|
-
| closeIcon | 自定义关闭图标，在 | ReactNode | - | |
|
|
499
|
-
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
500
|
-
| disabled | 禁用某一项 | boolean | false | |
|
|
501
|
-
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
|
|
502
|
-
| key | 对应 activeKey | string | - | |
|
|
503
|
-
| label | 选项卡头显示文字 | ReactNode | - | |
|
|
504
|
-
| icon | 选项卡头显示图标 | ReactNode | - | 5.12.0 |
|
|
505
|
-
| children | 选项卡头显示内容 | ReactNode | - | |
|
|
506
|
-
| closable | 是否显示选项卡的关闭按钮，在 | boolean | true | |
|
|
507
|
-
|
|
508
|
-
|
|
509
|
-
### MoreProps
|
|
510
|
-
|
|
511
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
512
|
-
|--------|--------|--------|--------|--------|
|
|
513
|
-
| icon | 自定义折叠图标 | ReactNode | - | |
|
|
514
|
-
| | | | | |
|
|
515
|
-
|
|
516
|
-
|
|
517
|
-
|
|
518
|
-
|
|
519
|
-
<DemoTitle title="Switch" desc="使用开关切换两种状态之间。">
|
|
520
|
-
#### API
|
|
521
|
-
|
|
522
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
523
|
-
|--------|--------|--------|--------|
|
|
524
|
-
| label | Switch后的内容 | ReactNode | |
|
|
525
|
-
|
|
526
|
-
<AntdApiRef url="https://ant.design/components/switch-cn/#api"></AntdApiRef>
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
## antd API
|
|
530
|
-
|
|
531
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
532
|
-
|
|
533
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
534
|
-
|--------|--------|--------|--------|--------|
|
|
535
|
-
| autoFocus | 组件自动获取焦点 | boolean | false | |
|
|
536
|
-
| checked | 指定当前是否选中 | boolean | false | |
|
|
537
|
-
| checkedChildren | 选中时的内容 | ReactNode | - | |
|
|
538
|
-
| className | Switch 器类名 | string | - | |
|
|
539
|
-
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
540
|
-
| defaultValue | defaultChecked | boolean | - | 5.12.0 |
|
|
541
|
-
| disabled | 是否禁用 | boolean | false | |
|
|
542
|
-
| loading | 加载中的开关 | boolean | false | |
|
|
543
|
-
| size | 开关大小，可选值： | string | default | |
|
|
544
|
-
| unCheckedChildren | 非选中时的内容 | ReactNode | - | |
|
|
545
|
-
| value | checked | boolean | - | 5.12.0 |
|
|
546
|
-
| onChange | 变化时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
547
|
-
| onClick | 点击时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
548
|
-
|
|
549
|
-
|
|
550
|
-
## 方法
|
|
551
|
-
|
|
552
|
-
| 名称 | 描述 |
|
|
553
|
-
|--------|--------|
|
|
554
|
-
| blur() | 移除焦点 |
|
|
555
|
-
| focus() | 获取焦点 |
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
<DemoTitle title="TimePicker" desc="输入或选择时间的控件。">
|
|
561
|
-
#### API
|
|
562
|
-
|
|
563
|
-
<AntdApiRef url="https://ant.design/components/time-picker-cn/#api"></AntdApiRef>
|
|
564
|
-
|
|
565
|
-
|
|
566
|
-
## antd API
|
|
567
|
-
|
|
568
|
-
|
|
569
|
-
|
|
570
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
571
|
-
|
|
572
|
-
|
|
573
|
-
```jsx
|
|
574
|
-
import dayjs from 'dayjs';
|
|
575
|
-
import customParseFormat from 'dayjs/plugin/customParseFormat'
|
|
576
|
-
|
|
577
|
-
dayjs.extend(customParseFormat)
|
|
578
|
-
<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
|
|
579
|
-
```
|
|
580
|
-
|
|
581
|
-
|
|
582
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
583
|
-
|--------|--------|--------|--------|--------|
|
|
584
|
-
| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
|
|
585
|
-
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
586
|
-
| cellRender | 自定义单元格的内容 | (current: number, info: { originNode: React.ReactNode, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
|
|
587
|
-
| changeOnScroll | 在滚动时改变选择值 | boolean | false | 5.14.0 |
|
|
588
|
-
| className | 选择器类名 | string | - | |
|
|
589
|
-
| defaultValue | 默认时间 | | - | |
|
|
590
|
-
| disabled | 禁用全部操作 | boolean | false | |
|
|
591
|
-
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
592
|
-
| format | 展示的时间格式 | string | HH:mm:ss | |
|
|
593
|
-
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | |
|
|
594
|
-
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | |
|
|
595
|
-
| hourStep | 小时选项间隔 | number | 1 | |
|
|
596
|
-
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
|
|
597
|
-
| minuteStep | 分钟选项间隔 | number | 1 | |
|
|
598
|
-
| needConfirm | 是否需要确认按钮，为 | boolean | - | 5.14.0 |
|
|
599
|
-
| open | 面板是否打开 | boolean | false | |
|
|
600
|
-
| placeholder | 没有值的时候显示的内容 | string \| [string, string] | 请选择时间 | |
|
|
601
|
-
| placement | 选择框弹出的位置 | bottomLeft | bottomLeft | |
|
|
602
|
-
| popupClassName | 弹出层类名 | string | - | |
|
|
603
|
-
| popupStyle | 弹出层样式对象 | object | - | |
|
|
604
|
-
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
|
|
605
|
-
| renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - | |
|
|
606
|
-
| secondStep | 秒选项间隔 | number | 1 | |
|
|
607
|
-
| showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
|
|
608
|
-
| size | 输入框大小， | large | - | |
|
|
609
|
-
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
610
|
-
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
|
611
|
-
| use12Hours | 使用 12 小时制，为 true 时 | boolean | false | |
|
|
612
|
-
| value | 当前时间 | | - | |
|
|
613
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
614
|
-
| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - | |
|
|
615
|
-
| onChange | 时间发生变化的回调 | function(time: dayjs, timeString: string): void | - | |
|
|
616
|
-
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - | |
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
#### DisabledTime
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
```typescript
|
|
623
|
-
type DisabledTime = (now: Dayjs) => {
|
|
624
|
-
disabledHours?: () => number[];
|
|
625
|
-
disabledMinutes?: (selectedHour: number) => number[];
|
|
626
|
-
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
627
|
-
disabledMilliseconds?: (
|
|
628
|
-
selectedHour: number,
|
|
629
|
-
selectedMinute: number,
|
|
630
|
-
selectedSecond: number,
|
|
631
|
-
) => number[];
|
|
632
|
-
};
|
|
633
|
-
```
|
|
634
|
-
|
|
635
|
-
|
|
636
|
-
注意：`disabledMilliseconds` 为 `5.14.0` 新增。
|
|
637
|
-
|
|
638
|
-
## 方法
|
|
639
|
-
|
|
640
|
-
| 名称 | 描述 | 版本 |
|
|
641
|
-
|--------|--------|--------|
|
|
642
|
-
| blur() | 移除焦点 | |
|
|
643
|
-
| focus() | 获取焦点 | |
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
## RangePicker
|
|
647
|
-
|
|
648
|
-
属性与 DatePicker 的 [RangePicker](/components/date-picker-cn#rangepicker) 相同。还包含以下属性：
|
|
608
|
+
属性与 DatePicker 的 [RangePicker](/components/date-picker-cn#rangepicker) 相同。还包含以下属性：
|
|
649
609
|
|
|
650
610
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
651
611
|
|--------|--------|--------|--------|--------|
|
|
@@ -789,6 +749,47 @@ type RangeDisabledTime = (
|
|
|
789
749
|
|
|
790
750
|
|
|
791
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
|
+
|
|
792
793
|
<DemoTitle title="Spinner" desc="指示页面或区块的加载中状态">
|
|
793
794
|
#### API
|
|
794
795
|
|
|
@@ -931,87 +932,12 @@ type RangeDisabledTime = (
|
|
|
931
932
|
|
|
932
933
|
|
|
933
934
|
|
|
934
|
-
<DemoTitle title="
|
|
935
|
-
#### API
|
|
936
|
-
|
|
937
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
938
|
-
|--------|--------|--------|--------|
|
|
939
|
-
| bordered | 边框 | boolean | false |
|
|
940
|
-
| ghost | 按钮背景色类型 | boolean | true |
|
|
941
|
-
| gap | 间距 | number | 12 px |
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
<AntdApiRef url="https://ant.design/components/radio-cn/#api"></AntdApiRef>
|
|
945
|
-
|
|
946
|
-
|
|
935
|
+
<DemoTitle title="Select" desc="下拉选择器">
|
|
947
936
|
## antd API
|
|
948
937
|
|
|
949
938
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
950
939
|
|
|
951
|
-
###
|
|
952
|
-
|
|
953
|
-
<!-- prettier-ignore -->
|
|
954
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
955
|
-
|--------|--------|--------|--------|
|
|
956
|
-
| autoFocus | 自动获取焦点 | boolean | false |
|
|
957
|
-
| checked | 指定当前是否选中 | boolean | false |
|
|
958
|
-
| defaultChecked | 初始是否选中 | boolean | false |
|
|
959
|
-
| disabled | 禁用 Radio | boolean | false |
|
|
960
|
-
| value | 根据 value 进行比较，判断是否选中 | any | - |
|
|
961
|
-
|
|
962
|
-
|
|
963
|
-
### Radio.Group
|
|
964
|
-
|
|
965
|
-
单选框组合，用于包裹一组 `Radio`。
|
|
966
|
-
|
|
967
|
-
<!-- prettier-ignore -->
|
|
968
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
969
|
-
|--------|--------|--------|--------|--------|
|
|
970
|
-
| buttonStyle | RadioButton 的风格样式，目前有描边和填色两种风格 | outline | outline | | |
|
|
971
|
-
| defaultValue | 默认选中的值 | any | - | | |
|
|
972
|
-
| disabled | 禁选所有子单选器 | boolean | false | | |
|
|
973
|
-
| name | RadioGroup 下所有 | string | - | | |
|
|
974
|
-
| options | 以配置形式设置子元素 | string[] \| number[] \| Array< | - | | |
|
|
975
|
-
| optionType | 用于设置 Radio | default | default | 4.4.0 | |
|
|
976
|
-
| size | 大小，只对按钮样式生效 | large | - | | |
|
|
977
|
-
| value | 用于设置当前选中的值 | any | - | | |
|
|
978
|
-
| block | 将 RadioGroup 宽度调整为其父宽度的选项 | boolean | false | 5.21.0 | |
|
|
979
|
-
| onChange | 选项变化时的回调函数 | function(e:Event) | - | | |
|
|
980
|
-
|
|
981
|
-
|
|
982
|
-
### CheckboxOptionType
|
|
983
|
-
|
|
984
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
985
|
-
|--------|--------|--------|--------|--------|
|
|
986
|
-
| label | 用于作为 Radio 选项展示的文本 | string | - | 4.4.0 |
|
|
987
|
-
| value | 关联 Radio 选项的值 | string | - | 4.4.0 |
|
|
988
|
-
| style | 应用到 Radio 选项的 style | React.CSSProperties | - | 4.4.0 |
|
|
989
|
-
| className | Radio 选项的类名 | string | - | 5.25.0 |
|
|
990
|
-
| disabled | 指定 Radio 选项是否要禁用 | boolean | false | 4.4.0 |
|
|
991
|
-
| title | 添加 Title 属性值 | string | - | 4.4.0 |
|
|
992
|
-
| id | 添加 Radio Id 属性值 | string | - | 4.4.0 |
|
|
993
|
-
| onChange | 当 Radio Group 的值发送改变时触发 | (e: CheckboxChangeEvent) => void; | - | 4.4.0 |
|
|
994
|
-
| required | 指定 Radio 选项是否必填 | boolean | false | 4.4.0 |
|
|
995
|
-
|
|
996
|
-
|
|
997
|
-
## 方法
|
|
998
|
-
|
|
999
|
-
### Radio
|
|
1000
|
-
|
|
1001
|
-
| 名称 | 描述 |
|
|
1002
|
-
|--------|--------|
|
|
1003
|
-
| blur() | 移除焦点 |
|
|
1004
|
-
| focus() | 获取焦点 |
|
|
1005
|
-
|
|
1006
|
-
|
|
1007
|
-
|
|
1008
|
-
|
|
1009
|
-
<DemoTitle title="Select" desc="下拉选择器">
|
|
1010
|
-
## antd API
|
|
1011
|
-
|
|
1012
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1013
|
-
|
|
1014
|
-
### Select props
|
|
940
|
+
### Select props
|
|
1015
941
|
|
|
1016
942
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1017
943
|
|--------|--------|--------|--------|--------|
|
|
@@ -1116,54 +1042,77 @@ type RangeDisabledTime = (
|
|
|
1116
1042
|
|
|
1117
1043
|
|
|
1118
1044
|
|
|
1119
|
-
<DemoTitle title="
|
|
1045
|
+
<DemoTitle title="RadioButton" desc="用于在多个备选项中选中单个状态。">
|
|
1046
|
+
#### API
|
|
1047
|
+
|
|
1048
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1049
|
+
|--------|--------|--------|--------|
|
|
1050
|
+
| bordered | 边框 | boolean | false |
|
|
1051
|
+
| ghost | 按钮背景色类型 | boolean | true |
|
|
1052
|
+
| gap | 间距 | number | 12 px |
|
|
1053
|
+
|
|
1054
|
+
|
|
1055
|
+
<AntdApiRef url="https://ant.design/components/radio-cn/#api"></AntdApiRef>
|
|
1056
|
+
|
|
1057
|
+
|
|
1120
1058
|
## antd API
|
|
1121
1059
|
|
|
1122
1060
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1123
1061
|
|
|
1124
|
-
|
|
1062
|
+
### Radio/Radio.Button
|
|
1125
1063
|
|
|
1126
|
-
|
|
1127
|
-
|
|
1128
|
-
|
|
1129
|
-
|
|
|
1130
|
-
|
|
|
1131
|
-
|
|
|
1132
|
-
|
|
|
1133
|
-
|
|
|
1134
|
-
| success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - | - |
|
|
1135
|
-
| trailColor | 未完成的分段的颜色 | string | - | - |
|
|
1136
|
-
| type | 类型，可选 | string | line | - |
|
|
1137
|
-
| size | 进度条的尺寸 | number \| [number \| string, number] \| { width: number, height: number } \| "small" \| "default" | "default" | 5.3.0, Object: 5.18.0 |
|
|
1064
|
+
<!-- prettier-ignore -->
|
|
1065
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
1066
|
+
|--------|--------|--------|--------|
|
|
1067
|
+
| autoFocus | 自动获取焦点 | boolean | false |
|
|
1068
|
+
| checked | 指定当前是否选中 | boolean | false |
|
|
1069
|
+
| defaultChecked | 初始是否选中 | boolean | false |
|
|
1070
|
+
| disabled | 禁用 Radio | boolean | false |
|
|
1071
|
+
| value | 根据 value 进行比较，判断是否选中 | any | - |
|
|
1138
1072
|
|
|
1139
1073
|
|
|
1140
|
-
###
|
|
1074
|
+
### Radio.Group
|
|
1141
1075
|
|
|
1142
|
-
|
|
1076
|
+
单选框组合，用于包裹一组 `Radio`。
|
|
1077
|
+
|
|
1078
|
+
<!-- prettier-ignore -->
|
|
1079
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1143
1080
|
|--------|--------|--------|--------|--------|
|
|
1144
|
-
|
|
|
1145
|
-
|
|
|
1146
|
-
|
|
|
1147
|
-
|
|
|
1081
|
+
| buttonStyle | RadioButton 的风格样式，目前有描边和填色两种风格 | outline | outline | | |
|
|
1082
|
+
| defaultValue | 默认选中的值 | any | - | | |
|
|
1083
|
+
| disabled | 禁选所有子单选器 | boolean | false | | |
|
|
1084
|
+
| name | RadioGroup 下所有 | string | - | | |
|
|
1085
|
+
| options | 以配置形式设置子元素 | string[] \| number[] \| Array< | - | | |
|
|
1086
|
+
| optionType | 用于设置 Radio | default | default | 4.4.0 | |
|
|
1087
|
+
| size | 大小，只对按钮样式生效 | large | - | | |
|
|
1088
|
+
| value | 用于设置当前选中的值 | any | - | | |
|
|
1089
|
+
| block | 将 RadioGroup 宽度调整为其父宽度的选项 | boolean | false | 5.21.0 | |
|
|
1090
|
+
| onChange | 选项变化时的回调函数 | function(e:Event) | - | | |
|
|
1148
1091
|
|
|
1149
1092
|
|
|
1150
|
-
###
|
|
1093
|
+
### CheckboxOptionType
|
|
1151
1094
|
|
|
1152
1095
|
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1153
1096
|
|--------|--------|--------|--------|--------|
|
|
1154
|
-
|
|
|
1155
|
-
|
|
|
1156
|
-
|
|
|
1097
|
+
| label | 用于作为 Radio 选项展示的文本 | string | - | 4.4.0 |
|
|
1098
|
+
| value | 关联 Radio 选项的值 | string | - | 4.4.0 |
|
|
1099
|
+
| style | 应用到 Radio 选项的 style | React.CSSProperties | - | 4.4.0 |
|
|
1100
|
+
| className | Radio 选项的类名 | string | - | 5.25.0 |
|
|
1101
|
+
| disabled | 指定 Radio 选项是否要禁用 | boolean | false | 4.4.0 |
|
|
1102
|
+
| title | 添加 Title 属性值 | string | - | 4.4.0 |
|
|
1103
|
+
| id | 添加 Radio Id 属性值 | string | - | 4.4.0 |
|
|
1104
|
+
| onChange | 当 Radio Group 的值发送改变时触发 | (e: CheckboxChangeEvent) => void; | - | 4.4.0 |
|
|
1105
|
+
| required | 指定 Radio 选项是否必填 | boolean | false | 4.4.0 |
|
|
1157
1106
|
|
|
1158
1107
|
|
|
1159
|
-
|
|
1108
|
+
## 方法
|
|
1160
1109
|
|
|
1161
|
-
|
|
1162
|
-
|
|
1163
|
-
|
|
|
1164
|
-
|
|
1165
|
-
|
|
|
1166
|
-
|
|
|
1110
|
+
### Radio
|
|
1111
|
+
|
|
1112
|
+
| 名称 | 描述 |
|
|
1113
|
+
|--------|--------|
|
|
1114
|
+
| blur() | 移除焦点 |
|
|
1115
|
+
| focus() | 获取焦点 |
|
|
1167
1116
|
|
|
1168
1117
|
|
|
1169
1118
|
|
|
@@ -1253,6 +1202,58 @@ type RangeDisabledTime = (
|
|
|
1253
1202
|
|
|
1254
1203
|
|
|
1255
1204
|
|
|
1205
|
+
<DemoTitle title="Progress" desc="用于指示任务的完成进度">
|
|
1206
|
+
## antd API
|
|
1207
|
+
|
|
1208
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1209
|
+
|
|
1210
|
+
各类型共用的属性。
|
|
1211
|
+
|
|
1212
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1213
|
+
|--------|--------|--------|--------|--------|
|
|
1214
|
+
| format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent + | - |
|
|
1215
|
+
| percent | 百分比 | number | 0 | - |
|
|
1216
|
+
| showInfo | 是否显示进度数值或状态图标 | boolean | true | - |
|
|
1217
|
+
| status | 状态，可选： | string | - | - |
|
|
1218
|
+
| strokeColor | 进度条的色彩 | string | - | - |
|
|
1219
|
+
| strokeLinecap | 进度条的样式 | round | round | - |
|
|
1220
|
+
| success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - | - |
|
|
1221
|
+
| trailColor | 未完成的分段的颜色 | string | - | - |
|
|
1222
|
+
| type | 类型，可选 | string | line | - |
|
|
1223
|
+
| size | 进度条的尺寸 | number \| [number \| string, number] \| { width: number, height: number } \| "small" \| "default" | "default" | 5.3.0, Object: 5.18.0 |
|
|
1224
|
+
|
|
1225
|
+
|
|
1226
|
+
### `type="line"`
|
|
1227
|
+
|
|
1228
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1229
|
+
|--------|--------|--------|--------|--------|
|
|
1230
|
+
| steps | 进度条总共步数 | number | - | - |
|
|
1231
|
+
| rounding | 用于四舍五入数值的函数 | (step: number) => number | Math.round | 5.24.0 |
|
|
1232
|
+
| strokeColor | 进度条的色彩，传入 object 时为渐变。当有 | string \| string[] \| { from: string; to: string; direction: string } | - | 4.21.0: |
|
|
1233
|
+
| percentPosition | 进度数值位置，传入对象， | { align: string; type: string } | { align: "end", type: "outer" } | 5.18.0 |
|
|
1234
|
+
|
|
1235
|
+
|
|
1236
|
+
### `type="circle"`
|
|
1237
|
+
|
|
1238
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1239
|
+
|--------|--------|--------|--------|--------|
|
|
1240
|
+
| steps | 进度条总共步数，传入 object 时，count 指步数，gap 指间隔大小。传 number 类型时，gap 默认为 2。 | number \| { count: number, gap: number } | - | 5.16.0 |
|
|
1241
|
+
| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| { number%: string } | - | - |
|
|
1242
|
+
| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |
|
|
1243
|
+
|
|
1244
|
+
|
|
1245
|
+
### `type="dashboard"`
|
|
1246
|
+
|
|
1247
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1248
|
+
|--------|--------|--------|--------|--------|
|
|
1249
|
+
| steps | 进度条总共步数，传入 object 时，count 指步数，gap 指间隔大小。传 number 类型时，gap 默认为 2。 | number \| { count: number, gap: number } | - | 5.16.0 |
|
|
1250
|
+
| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 295 | number | 75 | - |
|
|
1251
|
+
| gapPosition | 仪表盘进度条缺口位置 | top | bottom | - |
|
|
1252
|
+
| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |
|
|
1253
|
+
|
|
1254
|
+
|
|
1255
|
+
|
|
1256
|
+
|
|
1256
1257
|
<DemoTitle title="Popover" desc="点击/鼠标移入元素，弹出气泡式的卡片浮层">
|
|
1257
1258
|
#### API
|
|
1258
1259
|
|
|
@@ -1354,53 +1355,6 @@ type RangeDisabledTime = (
|
|
|
1354
1355
|
|
|
1355
1356
|
|
|
1356
1357
|
|
|
1357
|
-
<DemoTitle title="Pagination" desc="分页器用于分隔长列表，每次只加载一个页面。">
|
|
1358
|
-
## API
|
|
1359
|
-
|
|
1360
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1361
|
-
|--------|--------|--------|--------|
|
|
1362
|
-
| hideSwitchButton | 是否展示上一页/下一页的切换按钮 | boolean | false |
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
<AntdApiRef url="https://ant.design/components/pagination-cn/#api"></AntdApiRef>
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
## antd API
|
|
1369
|
-
|
|
1370
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
```jsx
|
|
1374
|
-
<Pagination onChange={onChange} total={50} />
|
|
1375
|
-
```
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1379
|
-
|--------|--------|--------|--------|--------|
|
|
1380
|
-
| align | 对齐方式 | start \| center \| end | - | 5.19.0 |
|
|
1381
|
-
| current | 当前页数 | number | - | |
|
|
1382
|
-
| defaultCurrent | 默认的当前页数 | number | 1 | |
|
|
1383
|
-
| defaultPageSize | 默认的每页条数 | number | 10 | |
|
|
1384
|
-
| disabled | 禁用分页 | boolean | - | |
|
|
1385
|
-
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | |
|
|
1386
|
-
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | |
|
|
1387
|
-
| pageSize | 每页条数 | number | - | |
|
|
1388
|
-
| pageSizeOptions | 指定每页可以显示多少条 | number[] | [ | |
|
|
1389
|
-
| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | |
|
|
1390
|
-
| showLessItems | 是否显示较少页面内容 | boolean | false | |
|
|
1391
|
-
| showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false | |
|
|
1392
|
-
| showSizeChanger | 是否展示 | boolean \| | - | SelectProps: 5.21.0 |
|
|
1393
|
-
| showTitle | 是否显示原生 tooltip 页码提示 | boolean | true | |
|
|
1394
|
-
| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | |
|
|
1395
|
-
| simple | 当添加该属性时，显示为简单分页 | boolean \| { readOnly?: boolean } | - | |
|
|
1396
|
-
| size | 当为 | default | default | |
|
|
1397
|
-
| total | 数据总数 | number | 0 | |
|
|
1398
|
-
| onChange | 页码或 | function(page, pageSize) | - | |
|
|
1399
|
-
| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | |
|
|
1400
|
-
|
|
1401
|
-
|
|
1402
|
-
|
|
1403
|
-
|
|
1404
1358
|
<DemoTitle title="Notification" desc="用于指示任务的完成进度">
|
|
1405
1359
|
#### API
|
|
1406
1360
|
|
|
@@ -1497,40 +1451,187 @@ notification.config({
|
|
|
1497
1451
|
|
|
1498
1452
|
|
|
1499
1453
|
|
|
1500
|
-
<DemoTitle title="
|
|
1501
|
-
|
|
1454
|
+
<DemoTitle title="Pagination" desc="分页器用于分隔长列表，每次只加载一个页面。">
|
|
1455
|
+
## API
|
|
1502
1456
|
|
|
1503
1457
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1504
1458
|
|--------|--------|--------|--------|
|
|
1505
|
-
|
|
|
1506
|
-
| showDivider | 是否显示分割线 | boolean | true |
|
|
1459
|
+
| hideSwitchButton | 是否展示上一页/下一页的切换按钮 | boolean | false |
|
|
1507
1460
|
|
|
1508
|
-
|
|
1461
|
+
|
|
1462
|
+
<AntdApiRef url="https://ant.design/components/pagination-cn/#api"></AntdApiRef>
|
|
1509
1463
|
|
|
1510
1464
|
|
|
1511
1465
|
## antd API
|
|
1512
1466
|
|
|
1513
1467
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1514
1468
|
|
|
1469
|
+
|
|
1470
|
+
```jsx
|
|
1471
|
+
<Pagination onChange={onChange} total={50} />
|
|
1472
|
+
```
|
|
1473
|
+
|
|
1474
|
+
|
|
1515
1475
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1516
1476
|
|--------|--------|--------|--------|--------|
|
|
1517
|
-
|
|
|
1518
|
-
|
|
|
1519
|
-
|
|
|
1520
|
-
|
|
|
1521
|
-
|
|
|
1522
|
-
|
|
|
1523
|
-
|
|
|
1524
|
-
|
|
|
1525
|
-
|
|
|
1526
|
-
|
|
|
1527
|
-
|
|
|
1528
|
-
|
|
|
1529
|
-
|
|
|
1530
|
-
|
|
|
1531
|
-
|
|
|
1532
|
-
|
|
|
1533
|
-
|
|
|
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
|
+
<DemoTitle title="Message" desc="一条简洁且临时显示的消息，为操作提供全局反馈">
|
|
1502
|
+
#### API
|
|
1503
|
+
|
|
1504
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1505
|
+
|--------|--------|--------|--------|
|
|
1506
|
+
| conent | 显示的内容 | string | "" |
|
|
1507
|
+
|
|
1508
|
+
<AntdApiRef url="https://ant.design/components/message-cn/#api"></AntdApiRef>
|
|
1509
|
+
|
|
1510
|
+
|
|
1511
|
+
## antd API
|
|
1512
|
+
|
|
1513
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1514
|
+
|
|
1515
|
+
组件提供了一些静态方法，使用方式和参数如下：
|
|
1516
|
+
|
|
1517
|
+
|
|
1518
|
+
- `message.success(content, [duration], onClose)`
|
|
1519
|
+
- `message.error(content, [duration], onClose)`
|
|
1520
|
+
- `message.info(content, [duration], onClose)`
|
|
1521
|
+
- `message.warning(content, [duration], onClose)`
|
|
1522
|
+
- `message.loading(content, [duration], onClose)`
|
|
1523
|
+
|
|
1524
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
1525
|
+
|--------|--------|--------|--------|
|
|
1526
|
+
| content | 提示内容 | ReactNode \| config | - |
|
|
1527
|
+
| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number | 3 |
|
|
1528
|
+
| onClose | 关闭时触发的回调函数 | function | - |
|
|
1529
|
+
|
|
1530
|
+
|
|
1531
|
+
组件同时提供 promise 接口。
|
|
1532
|
+
|
|
1533
|
+
|
|
1534
|
+
- `message[level](content, [duration]).then(afterClose)`
|
|
1535
|
+
- `message[level](content, [duration], onClose).then(afterClose)`
|
|
1536
|
+
|
|
1537
|
+
其中 `message[level]` 是组件已经提供的静态方法。`then` 接口返回值是 Promise。
|
|
1538
|
+
|
|
1539
|
+
也可以对象的形式传递参数：
|
|
1540
|
+
|
|
1541
|
+
|
|
1542
|
+
- `message.open(config)`
|
|
1543
|
+
- `message.success(config)`
|
|
1544
|
+
- `message.error(config)`
|
|
1545
|
+
- `message.info(config)`
|
|
1546
|
+
- `message.warning(config)`
|
|
1547
|
+
- `message.loading(config)`
|
|
1548
|
+
|
|
1549
|
+
`config` 对象属性如下：
|
|
1550
|
+
|
|
1551
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
1552
|
+
|--------|--------|--------|--------|
|
|
1553
|
+
| className | 自定义 CSS class | string | - |
|
|
1554
|
+
| content | 提示内容 | ReactNode | - |
|
|
1555
|
+
| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number | 3 |
|
|
1556
|
+
| icon | 自定义图标 | ReactNode | - |
|
|
1557
|
+
| key | 当前提示的唯一标志 | string \| number | - |
|
|
1558
|
+
| style | 自定义内联样式 | | - |
|
|
1559
|
+
| onClick | 点击 message 时触发的回调函数 | function | - |
|
|
1560
|
+
| onClose | 关闭时触发的回调函数 | function | - |
|
|
1561
|
+
|
|
1562
|
+
|
|
1563
|
+
### 全局方法
|
|
1564
|
+
|
|
1565
|
+
还提供了全局配置和全局销毁方法：
|
|
1566
|
+
|
|
1567
|
+
|
|
1568
|
+
- `message.config(options)`
|
|
1569
|
+
- `message.destroy()`
|
|
1570
|
+
|
|
1571
|
+
也可通过 `message.destroy(key)` 来关闭一条消息。
|
|
1572
|
+
|
|
1573
|
+
#### message.config
|
|
1574
|
+
|
|
1575
|
+
当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)当你想单独使用，可通过如下设置开启 RTL 模式。
|
|
1576
|
+
|
|
1577
|
+
|
|
1578
|
+
```js
|
|
1579
|
+
message.config({
|
|
1580
|
+
top: 100,
|
|
1581
|
+
duration: 2,
|
|
1582
|
+
maxCount: 3,
|
|
1583
|
+
rtl: true,
|
|
1584
|
+
prefixCls: 'my-message',
|
|
1585
|
+
});
|
|
1586
|
+
```
|
|
1587
|
+
|
|
1588
|
+
|
|
1589
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1590
|
+
|--------|--------|--------|--------|--------|
|
|
1591
|
+
| duration | 默认自动关闭延时，单位秒 | number | 3 | |
|
|
1592
|
+
| getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLElement | () => document.body | |
|
|
1593
|
+
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | |
|
|
1594
|
+
| prefixCls | 消息节点的 className 前缀 | string | ant-message | 4.5.0 |
|
|
1595
|
+
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1596
|
+
| top | 消息距离顶部的位置 | string \| number | 8 | |
|
|
1597
|
+
|
|
1598
|
+
|
|
1599
|
+
|
|
1600
|
+
|
|
1601
|
+
<DemoTitle title="Modal" desc="用于叠加当前页面上的对话框窗口，提供标题、内容区、操作区。">
|
|
1602
|
+
#### API
|
|
1603
|
+
|
|
1604
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1605
|
+
|--------|--------|--------|--------|
|
|
1606
|
+
| info | 底部额外内容 | string \| React.ReactNode | |
|
|
1607
|
+
| showDivider | 是否显示分割线 | boolean | true |
|
|
1608
|
+
|
|
1609
|
+
<AntdApiRef url="https://ant.design/components/modal-cn/#api"></AntdApiRef>
|
|
1610
|
+
|
|
1611
|
+
|
|
1612
|
+
## antd API
|
|
1613
|
+
|
|
1614
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1615
|
+
|
|
1616
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1617
|
+
|--------|--------|--------|--------|--------|
|
|
1618
|
+
| afterClose | Modal 完全关闭后的回调 | function | - | |
|
|
1619
|
+
| classNames | 配置弹窗内置模块的 className | | - | |
|
|
1620
|
+
| styles | 配置弹窗内置模块的 style | | - | 5.10.0 |
|
|
1621
|
+
| cancelButtonProps | cancel 按钮 props | | - | |
|
|
1622
|
+
| cancelText | 取消按钮文字 | ReactNode | 取消 | |
|
|
1623
|
+
| centered | 垂直居中展示 Modal | boolean | false | |
|
|
1624
|
+
| closable | 是否显示右上角的关闭按钮 | boolean \| { closeIcon?: React.ReactNode; disabled?: boolean; } | true | |
|
|
1625
|
+
| closeIcon | 自定义关闭图标。5.7.0：设置为 | ReactNode | | |
|
|
1626
|
+
| confirmLoading | 确定按钮 loading | boolean | false | |
|
|
1627
|
+
| destroyOnHidden | 关闭时销毁 Modal 里的子元素 | boolean | false | 5.25.0 |
|
|
1628
|
+
| focusTriggerAfterClose | 对话框关闭后是否需要聚焦触发元素 | boolean | true | 4.9.0 |
|
|
1629
|
+
| footer | 底部内容，当不需要默认底部按钮时，可以设为 | ReactNode \| (originNode: ReactNode, extra: { OkBtn: React.FC, CancelBtn: React.FC }) => ReactNode | (确定取消按钮) | renderFunction: 5.9.0 |
|
|
1630
|
+
| forceRender | 强制渲染 Modal | boolean | false | |
|
|
1631
|
+
| getContainer | 指定 Modal 挂载的节点，但依旧为全屏展示， | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body | |
|
|
1632
|
+
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
|
|
1633
|
+
| mask | 是否展示遮罩 | boolean | true | |
|
|
1634
|
+
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
|
|
1534
1635
|
| modalRender | 自定义渲染对话框 | (node: ReactNode) => ReactNode | - | 4.7.0 |
|
|
1535
1636
|
| okButtonProps | ok 按钮 props | | - | |
|
|
1536
1637
|
| okText | 确认按钮文字 | ReactNode | 确定 | |
|
|
@@ -1667,102 +1768,167 @@ const confirmed = await modal.confirm({ ... });
|
|
|
1667
1768
|
|
|
1668
1769
|
|
|
1669
1770
|
|
|
1670
|
-
<DemoTitle title="
|
|
1771
|
+
<DemoTitle title="MediaPreview" desc="用于预览图片和视频的弹窗组件">
|
|
1671
1772
|
#### API
|
|
1672
1773
|
|
|
1673
|
-
|
|
|
1774
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
1674
1775
|
|--------|--------|--------|--------|
|
|
1675
|
-
|
|
|
1776
|
+
| visible | 是否显示预览 | boolean | false |
|
|
1777
|
+
| mediaList | 媒体列表 | MediaItem[] | [] |
|
|
1778
|
+
| currentIndex | 当前选中的索引 | number | 0 |
|
|
1779
|
+
| onClose | 关闭回调 | () => void | - |
|
|
1780
|
+
| className | 自定义样式类名 | string | - |
|
|
1676
1781
|
|
|
1677
|
-
<AntdApiRef url="https://ant.design/components/message-cn/#api"></AntdApiRef>
|
|
1678
1782
|
|
|
1783
|
+
#### MediaItem
|
|
1679
1784
|
|
|
1680
|
-
|
|
1785
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
1786
|
+
|--------|--------|--------|--------|
|
|
1787
|
+
| type | 媒体类型 | 'image' \| 'video' | - |
|
|
1788
|
+
| src | 媒体资源地址 | string | - |
|
|
1789
|
+
| alt | 媒体替代文本 | string | - |
|
|
1681
1790
|
|
|
1682
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1683
1791
|
|
|
1684
|
-
组件提供了一些静态方法，使用方式和参数如下：
|
|
1685
1792
|
|
|
1686
1793
|
|
|
1687
|
-
|
|
1688
|
-
|
|
1689
|
-
- `message.info(content, [duration], onClose)`
|
|
1690
|
-
- `message.warning(content, [duration], onClose)`
|
|
1691
|
-
- `message.loading(content, [duration], onClose)`
|
|
1794
|
+
<DemoTitle title="InputSearch" desc="带搜索按钮的输入框，用于搜索场景。">
|
|
1795
|
+
#### API
|
|
1692
1796
|
|
|
1693
|
-
|
|
1694
|
-
|--------|--------|--------|--------|
|
|
1695
|
-
| content | 提示内容 | ReactNode \| config | - |
|
|
1696
|
-
| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number | 3 |
|
|
1697
|
-
| onClose | 关闭时触发的回调函数 | function | - |
|
|
1797
|
+
<AntdApiRef url="https://ant.design/components/input-cn/#inputsearch"></AntdApiRef>
|
|
1698
1798
|
|
|
1699
1799
|
|
|
1700
|
-
组件同时提供 promise 接口。
|
|
1701
1800
|
|
|
1801
|
+
<DemoTitle title="Input" desc="通过鼠标或键盘输入内容，为表单提供输入字段的基础容器。。">
|
|
1802
|
+
#### API
|
|
1702
1803
|
|
|
1703
|
-
|
|
1704
|
-
|
|
1804
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1805
|
+
|--------|--------|--------|--------|
|
|
1806
|
+
| shape | 形态 | 'default' \| 'round' | default 默认 |
|
|
1705
1807
|
|
|
1706
|
-
其中 `message[level]` 是组件已经提供的静态方法。`then` 接口返回值是 Promise。
|
|
1707
1808
|
|
|
1708
|
-
|
|
1809
|
+
<AntdApiRef url="https://ant.design/components/input-cn/#api"></AntdApiRef>
|
|
1709
1810
|
|
|
1710
1811
|
|
|
1711
|
-
|
|
1712
|
-
- `message.success(config)`
|
|
1713
|
-
- `message.error(config)`
|
|
1714
|
-
- `message.info(config)`
|
|
1715
|
-
- `message.warning(config)`
|
|
1716
|
-
- `message.loading(config)`
|
|
1812
|
+
## antd API
|
|
1717
1813
|
|
|
1718
|
-
|
|
1814
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1719
1815
|
|
|
1720
|
-
|
|
1721
|
-
|--------|--------|--------|--------|
|
|
1722
|
-
| className | 自定义 CSS class | string | - |
|
|
1723
|
-
| content | 提示内容 | ReactNode | - |
|
|
1724
|
-
| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number | 3 |
|
|
1725
|
-
| icon | 自定义图标 | ReactNode | - |
|
|
1726
|
-
| key | 当前提示的唯一标志 | string \| number | - |
|
|
1727
|
-
| style | 自定义内联样式 | | - |
|
|
1728
|
-
| onClick | 点击 message 时触发的回调函数 | function | - |
|
|
1729
|
-
| onClose | 关闭时触发的回调函数 | function | - |
|
|
1816
|
+
### Input
|
|
1730
1817
|
|
|
1818
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1819
|
+
|--------|--------|--------|--------|--------|
|
|
1820
|
+
| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | |
|
|
1821
|
+
| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | |
|
|
1822
|
+
| allowClear | 可以点击清除图标删除内容 | boolean \| { clearIcon: ReactNode } | - | |
|
|
1823
|
+
| classNames | 语义化结构 class | Record< | - | 5.4.0 |
|
|
1824
|
+
| count | 字符计数配置 | | - | 5.10.0 |
|
|
1825
|
+
| defaultValue | 输入框默认内容 | string | - | |
|
|
1826
|
+
| disabled | 是否禁用状态，默认为 false | boolean | false | |
|
|
1827
|
+
| id | 输入框的 id | string | - | |
|
|
1828
|
+
| maxLength | 最大长度 | number | - | |
|
|
1829
|
+
| prefix | 带有前缀图标的 input | ReactNode | - | |
|
|
1830
|
+
| showCount | 是否展示字数 | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 info.value: 4.23.0 |
|
|
1831
|
+
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
1832
|
+
| styles | 语义化结构 style | Record< | - | 5.4.0 |
|
|
1833
|
+
| size | 控件大小。注：标准表单内的输入框大小限制为 | large | - | |
|
|
1834
|
+
| suffix | 带有后缀图标的 input | ReactNode | - | |
|
|
1835
|
+
| type | 声明 input 类型，同原生 input 标签的 type 属性，见： | string | text | |
|
|
1836
|
+
| value | 输入框内容 | string | - | |
|
|
1837
|
+
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
1838
|
+
| onChange | 输入框内容变化时的回调 | function(e) | - | |
|
|
1839
|
+
| onPressEnter | 按下回车的回调 | function(e) | - | |
|
|
1840
|
+
| onClear | 按下清除按钮的回调 | () => void | - | 5.20.0 |
|
|
1731
1841
|
|
|
1732
|
-
### 全局方法
|
|
1733
1842
|
|
|
1734
|
-
|
|
1843
|
+
如果 `Input` 在 `Form.Item` 内，并且 `Form.Item` 设置了 `id` 属性，则 `value` `defaultValue` 和 `id` 属性会被自动设置。
|
|
1735
1844
|
|
|
1845
|
+
Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes) 一致。
|
|
1736
1846
|
|
|
1737
|
-
|
|
1738
|
-
- `message.destroy()`
|
|
1847
|
+
#### CountConfig
|
|
1739
1848
|
|
|
1740
|
-
也可通过 `message.destroy(key)` 来关闭一条消息。
|
|
1741
1849
|
|
|
1742
|
-
|
|
1850
|
+
```tsx
|
|
1851
|
+
interface CountConfig {
|
|
1852
|
+
// 最大字符数，不同于原生 `maxLength`，超出后标红但不会截断
|
|
1853
|
+
max?: number;
|
|
1854
|
+
// 自定义字符计数，例如标准 emoji 长度大于 1，可以自定义计数策略将其改为 1
|
|
1855
|
+
strategy?: (value: string) => number;
|
|
1856
|
+
// 同 `showCount`
|
|
1857
|
+
show?: boolean | ((args: { value: string; count: number; maxLength?: number }) => ReactNode);
|
|
1858
|
+
// 当字符数超出 `count.max` 时的自定义裁剪逻辑，不配置时不进行裁剪
|
|
1859
|
+
exceedFormatter?: (value: string, config: { max: number }) => string;
|
|
1860
|
+
}
|
|
1861
|
+
```
|
|
1743
1862
|
|
|
1744
|
-
当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)当你想单独使用，可通过如下设置开启 RTL 模式。
|
|
1745
1863
|
|
|
1864
|
+
### Input.TextArea
|
|
1746
1865
|
|
|
1747
|
-
|
|
1748
|
-
|
|
1749
|
-
|
|
1750
|
-
|
|
1751
|
-
|
|
1752
|
-
|
|
1753
|
-
|
|
1754
|
-
|
|
1755
|
-
|
|
1866
|
+
同 Input 属性，外加：
|
|
1867
|
+
|
|
1868
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1869
|
+
|--------|--------|--------|--------|--------|
|
|
1870
|
+
| autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false | |
|
|
1871
|
+
| classNames | 语义化结构 class | Record< | - | 5.4.0 |
|
|
1872
|
+
| styles | 语义化结构 style | Record< | - | 5.4.0 |
|
|
1873
|
+
|
|
1874
|
+
|
|
1875
|
+
`Input.TextArea` 的其他属性和浏览器自带的 [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) 一致。
|
|
1756
1876
|
|
|
1877
|
+
### Input.Search
|
|
1878
|
+
|
|
1879
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
1880
|
+
|--------|--------|--------|--------|
|
|
1881
|
+
| enterButton | 是否有确认按钮，可设为按钮文字。该属性会与 | ReactNode | false |
|
|
1882
|
+
| loading | 搜索 loading | boolean | false |
|
|
1883
|
+
| onSearch | 点击搜索图标、清除图标，或按下回车键时的回调 | function(value, event, { source: "input" \| "clear" }) | - |
|
|
1884
|
+
|
|
1885
|
+
|
|
1886
|
+
其余属性和 Input 一致。
|
|
1887
|
+
|
|
1888
|
+
### Input.Password
|
|
1757
1889
|
|
|
1758
1890
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1759
1891
|
|--------|--------|--------|--------|--------|
|
|
1760
|
-
|
|
|
1761
|
-
|
|
|
1762
|
-
|
|
1763
|
-
|
|
1764
|
-
|
|
1765
|
-
|
|
1892
|
+
| iconRender | 自定义切换按钮 | (visible) => ReactNode | (visible) => (visible ? : ) | 4.3.0 |
|
|
1893
|
+
| visibilityToggle | 是否显示切换按钮或者控制密码显隐 | boolean \| | true | |
|
|
1894
|
+
|
|
1895
|
+
|
|
1896
|
+
### Input.OTP
|
|
1897
|
+
|
|
1898
|
+
`5.16.0` 新增。
|
|
1899
|
+
|
|
1900
|
+
开发者注意事项：当 `mask` 属性的类型为 string 时，我们强烈推荐接收单个字符或单个 emoji，如果传入多个字符或多个 emoji，则会在控制台抛出警告。
|
|
1901
|
+
|
|
1902
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1903
|
+
|--------|--------|--------|--------|--------|
|
|
1904
|
+
| defaultValue | 默认值 | string | - | |
|
|
1905
|
+
| disabled | 是否禁用 | boolean | false | |
|
|
1906
|
+
| formatter | 格式化展示，留空字段会被 | (value: string) => string | - | |
|
|
1907
|
+
| separator | 分隔符，在指定索引的输入框后渲染分隔符 | ReactNode \|((i: number) => ReactNode) | - | 5.24.0 |
|
|
1908
|
+
| mask | 自定义展示，和 | boolean \| string | false | 5.17.0 |
|
|
1909
|
+
| length | 输入元素数量 | number | 6 | |
|
|
1910
|
+
| status | 设置校验状态 | 'error' \| 'warning' | - | |
|
|
1911
|
+
| size | 输入框大小 | small | middle | |
|
|
1912
|
+
| variant | 形态变体 | outlined | outlined | underlined |
|
|
1913
|
+
| value | 输入框内容 | string | - | |
|
|
1914
|
+
| onChange | 当输入框内容全部填充时触发回调 | (value: string) => void | - | |
|
|
1915
|
+
| onInput | 输入值变化时触发的回调 | (value: string[]) => void | - | 5.22.0 |
|
|
1916
|
+
|
|
1917
|
+
|
|
1918
|
+
#### VisibilityToggle
|
|
1919
|
+
|
|
1920
|
+
| Property | Description | Type | Default | Version |
|
|
1921
|
+
|--------|--------|--------|--------|--------|
|
|
1922
|
+
| visible | 用于手动控制密码显隐 | boolean | false | 4.24 |
|
|
1923
|
+
| onVisibleChange | 显隐密码的回调 | (visible) => void | - | 4.24 |
|
|
1924
|
+
|
|
1925
|
+
|
|
1926
|
+
#### Input Methods
|
|
1927
|
+
|
|
1928
|
+
| 名称 | 说明 | 参数 | 版本 |
|
|
1929
|
+
|--------|--------|--------|--------|
|
|
1930
|
+
| blur | 取消焦点 | - | |
|
|
1931
|
+
| focus | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | option - 4.10.0 |
|
|
1766
1932
|
|
|
1767
1933
|
|
|
1768
1934
|
|
|
@@ -1883,288 +2049,107 @@ message.config({
|
|
|
1883
2049
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1884
2050
|
|--------|--------|--------|--------|--------|
|
|
1885
2051
|
| visible | 是否显示 | boolean | - | - |
|
|
1886
|
-
| getContainer | 指定预览挂载的节点，但依旧为全屏展示，false 为挂载在当前位置 | string \| HTMLElement \| (() => HTMLElement) \| false | - | 4.8.0 |
|
|
1887
|
-
| movable | 是否可移动 | boolean | true | 5.8.0 |
|
|
1888
|
-
| current | 当前预览图的 index | number | - | 4.12.0 |
|
|
1889
|
-
| mask | 缩略图遮罩 | ReactNode | - | 4.9.0 |
|
|
1890
|
-
| maskClassName | 缩略图遮罩类名 | string | - | 4.11.0 |
|
|
1891
|
-
| scaleStep | 1 + scaleStep | number | 0.5 | - |
|
|
1892
|
-
| minScale | 最小缩放倍数 | number | 1 | 5.7.0 |
|
|
1893
|
-
| maxScale | 最大放大倍数 | number | 50 | 5.7.0 |
|
|
1894
|
-
| closeIcon | 自定义关闭 Icon | React.ReactNode | - | 5.7.0 |
|
|
1895
|
-
| forceRender | 强制渲染预览图 | boolean | - | - |
|
|
1896
|
-
| countRender | 自定义预览计数内容 | (current: number, total: number) => React.ReactNode | - | 4.20.0 |
|
|
1897
|
-
| toolbarRender | 自定义工具栏 | (originalNode: React.ReactElement, info: | - | 5.7.0, |
|
|
1898
|
-
| imageRender | 自定义预览内容 | (originalNode: React.ReactElement, info: { transform: | - | 5.7.0, image: 5.18.0 |
|
|
1899
|
-
| onTransform | 预览图 transform 变化的回调 | { transform: | - | 5.7.0 |
|
|
1900
|
-
| onChange | 切换预览图的回调 | (current: number, prevCurrent: number) => void | - | 5.3.0 |
|
|
1901
|
-
| onVisibleChange | 当 | (visible: boolean, prevVisible: boolean, current: number) => void | - | current 参数 5.3.0 |
|
|
1902
|
-
|
|
1903
|
-
|
|
1904
|
-
## Interface
|
|
1905
|
-
|
|
1906
|
-
### TransformType
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
```typescript
|
|
1910
|
-
{
|
|
1911
|
-
x: number;
|
|
1912
|
-
y: number;
|
|
1913
|
-
rotate: number;
|
|
1914
|
-
scale: number;
|
|
1915
|
-
flipX: boolean;
|
|
1916
|
-
flipY: boolean;
|
|
1917
|
-
}
|
|
1918
|
-
```
|
|
1919
|
-
|
|
1920
|
-
|
|
1921
|
-
### TransformAction
|
|
1922
|
-
|
|
1923
|
-
|
|
1924
|
-
```typescript
|
|
1925
|
-
type TransformAction =
|
|
1926
|
-
| 'flipY'
|
|
1927
|
-
| 'flipX'
|
|
1928
|
-
| 'rotateLeft'
|
|
1929
|
-
| 'rotateRight'
|
|
1930
|
-
| 'zoomIn'
|
|
1931
|
-
| 'zoomOut'
|
|
1932
|
-
| 'close'
|
|
1933
|
-
| 'prev'
|
|
1934
|
-
| 'next'
|
|
1935
|
-
| 'wheel'
|
|
1936
|
-
| 'doubleClick'
|
|
1937
|
-
| 'move'
|
|
1938
|
-
| 'dragRebound'
|
|
1939
|
-
| 'reset';
|
|
1940
|
-
```
|
|
1941
|
-
|
|
1942
|
-
|
|
1943
|
-
### ToolbarRenderInfoType
|
|
1944
|
-
|
|
1945
|
-
|
|
1946
|
-
```typescript
|
|
1947
|
-
{
|
|
1948
|
-
icons: {
|
|
1949
|
-
flipYIcon: React.ReactNode;
|
|
1950
|
-
flipXIcon: React.ReactNode;
|
|
1951
|
-
rotateLeftIcon: React.ReactNode;
|
|
1952
|
-
rotateRightIcon: React.ReactNode;
|
|
1953
|
-
zoomOutIcon: React.ReactNode;
|
|
1954
|
-
zoomInIcon: React.ReactNode;
|
|
1955
|
-
};
|
|
1956
|
-
actions: {
|
|
1957
|
-
onActive?: (index: number) => void; // 5.21.0 之后支持
|
|
1958
|
-
onFlipY: () => void;
|
|
1959
|
-
onFlipX: () => void;
|
|
1960
|
-
onRotateLeft: () => void;
|
|
1961
|
-
onRotateRight: () => void;
|
|
1962
|
-
onZoomOut: () => void;
|
|
1963
|
-
onZoomIn: () => void;
|
|
1964
|
-
onReset: () => void; // 5.17.3 之后支持
|
|
1965
|
-
onClose: () => void;
|
|
1966
|
-
};
|
|
1967
|
-
transform: TransformType,
|
|
1968
|
-
current: number;
|
|
1969
|
-
total: number;
|
|
1970
|
-
image: ImgInfo
|
|
1971
|
-
}
|
|
1972
|
-
```
|
|
1973
|
-
|
|
1974
|
-
|
|
1975
|
-
### ImgInfo
|
|
1976
|
-
|
|
1977
|
-
|
|
1978
|
-
```typescript
|
|
1979
|
-
{
|
|
1980
|
-
url: string;
|
|
1981
|
-
alt: string;
|
|
1982
|
-
width: string | number;
|
|
1983
|
-
height: string | number;
|
|
1984
|
-
}
|
|
1985
|
-
```
|
|
1986
|
-
|
|
1987
|
-
|
|
1988
|
-
|
|
1989
|
-
|
|
1990
|
-
<DemoTitle title="Input" desc="通过鼠标或键盘输入内容，为表单提供输入字段的基础容器。。">
|
|
1991
|
-
#### API
|
|
1992
|
-
|
|
1993
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1994
|
-
|--------|--------|--------|--------|
|
|
1995
|
-
| shape | 形态 | 'default' \| 'round' | default 默认 |
|
|
1996
|
-
|
|
1997
|
-
|
|
1998
|
-
<AntdApiRef url="https://ant.design/components/input-cn/#api"></AntdApiRef>
|
|
1999
|
-
|
|
2000
|
-
|
|
2001
|
-
## antd API
|
|
2002
|
-
|
|
2003
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2004
|
-
|
|
2005
|
-
### Input
|
|
2006
|
-
|
|
2007
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2008
|
-
|--------|--------|--------|--------|--------|
|
|
2009
|
-
| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | |
|
|
2010
|
-
| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | |
|
|
2011
|
-
| allowClear | 可以点击清除图标删除内容 | boolean \| { clearIcon: ReactNode } | - | |
|
|
2012
|
-
| classNames | 语义化结构 class | Record< | - | 5.4.0 |
|
|
2013
|
-
| count | 字符计数配置 | | - | 5.10.0 |
|
|
2014
|
-
| defaultValue | 输入框默认内容 | string | - | |
|
|
2015
|
-
| disabled | 是否禁用状态，默认为 false | boolean | false | |
|
|
2016
|
-
| id | 输入框的 id | string | - | |
|
|
2017
|
-
| maxLength | 最大长度 | number | - | |
|
|
2018
|
-
| prefix | 带有前缀图标的 input | ReactNode | - | |
|
|
2019
|
-
| showCount | 是否展示字数 | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 info.value: 4.23.0 |
|
|
2020
|
-
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
2021
|
-
| styles | 语义化结构 style | Record< | - | 5.4.0 |
|
|
2022
|
-
| size | 控件大小。注：标准表单内的输入框大小限制为 | large | - | |
|
|
2023
|
-
| suffix | 带有后缀图标的 input | ReactNode | - | |
|
|
2024
|
-
| type | 声明 input 类型，同原生 input 标签的 type 属性，见： | string | text | |
|
|
2025
|
-
| value | 输入框内容 | string | - | |
|
|
2026
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
2027
|
-
| onChange | 输入框内容变化时的回调 | function(e) | - | |
|
|
2028
|
-
| onPressEnter | 按下回车的回调 | function(e) | - | |
|
|
2029
|
-
| onClear | 按下清除按钮的回调 | () => void | - | 5.20.0 |
|
|
2030
|
-
|
|
2031
|
-
|
|
2032
|
-
如果 `Input` 在 `Form.Item` 内，并且 `Form.Item` 设置了 `id` 属性，则 `value` `defaultValue` 和 `id` 属性会被自动设置。
|
|
2033
|
-
|
|
2034
|
-
Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes) 一致。
|
|
2035
|
-
|
|
2036
|
-
#### CountConfig
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
```tsx
|
|
2040
|
-
interface CountConfig {
|
|
2041
|
-
// 最大字符数，不同于原生 `maxLength`，超出后标红但不会截断
|
|
2042
|
-
max?: number;
|
|
2043
|
-
// 自定义字符计数，例如标准 emoji 长度大于 1，可以自定义计数策略将其改为 1
|
|
2044
|
-
strategy?: (value: string) => number;
|
|
2045
|
-
// 同 `showCount`
|
|
2046
|
-
show?: boolean | ((args: { value: string; count: number; maxLength?: number }) => ReactNode);
|
|
2047
|
-
// 当字符数超出 `count.max` 时的自定义裁剪逻辑，不配置时不进行裁剪
|
|
2048
|
-
exceedFormatter?: (value: string, config: { max: number }) => string;
|
|
2049
|
-
}
|
|
2050
|
-
```
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
### Input.TextArea
|
|
2054
|
-
|
|
2055
|
-
同 Input 属性，外加：
|
|
2056
|
-
|
|
2057
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2058
|
-
|--------|--------|--------|--------|--------|
|
|
2059
|
-
| autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false | |
|
|
2060
|
-
| classNames | 语义化结构 class | Record< | - | 5.4.0 |
|
|
2061
|
-
| styles | 语义化结构 style | Record< | - | 5.4.0 |
|
|
2062
|
-
|
|
2063
|
-
|
|
2064
|
-
`Input.TextArea` 的其他属性和浏览器自带的 [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) 一致。
|
|
2065
|
-
|
|
2066
|
-
### Input.Search
|
|
2067
|
-
|
|
2068
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
2069
|
-
|--------|--------|--------|--------|
|
|
2070
|
-
| enterButton | 是否有确认按钮，可设为按钮文字。该属性会与 | ReactNode | false |
|
|
2071
|
-
| loading | 搜索 loading | boolean | false |
|
|
2072
|
-
| onSearch | 点击搜索图标、清除图标，或按下回车键时的回调 | function(value, event, { source: "input" \| "clear" }) | - |
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
其余属性和 Input 一致。
|
|
2076
|
-
|
|
2077
|
-
### Input.Password
|
|
2078
|
-
|
|
2079
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2080
|
-
|--------|--------|--------|--------|--------|
|
|
2081
|
-
| iconRender | 自定义切换按钮 | (visible) => ReactNode | (visible) => (visible ? : ) | 4.3.0 |
|
|
2082
|
-
| visibilityToggle | 是否显示切换按钮或者控制密码显隐 | boolean \| | true | |
|
|
2083
|
-
|
|
2084
|
-
|
|
2085
|
-
### Input.OTP
|
|
2086
|
-
|
|
2087
|
-
`5.16.0` 新增。
|
|
2088
|
-
|
|
2089
|
-
开发者注意事项：当 `mask` 属性的类型为 string 时，我们强烈推荐接收单个字符或单个 emoji，如果传入多个字符或多个 emoji，则会在控制台抛出警告。
|
|
2090
|
-
|
|
2091
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2092
|
-
|--------|--------|--------|--------|--------|
|
|
2093
|
-
| defaultValue | 默认值 | string | - | |
|
|
2094
|
-
| disabled | 是否禁用 | boolean | false | |
|
|
2095
|
-
| formatter | 格式化展示，留空字段会被 | (value: string) => string | - | |
|
|
2096
|
-
| separator | 分隔符，在指定索引的输入框后渲染分隔符 | ReactNode \|((i: number) => ReactNode) | - | 5.24.0 |
|
|
2097
|
-
| mask | 自定义展示，和 | boolean \| string | false | 5.17.0 |
|
|
2098
|
-
| length | 输入元素数量 | number | 6 | |
|
|
2099
|
-
| status | 设置校验状态 | 'error' \| 'warning' | - | |
|
|
2100
|
-
| size | 输入框大小 | small | middle | |
|
|
2101
|
-
| variant | 形态变体 | outlined | outlined | underlined |
|
|
2102
|
-
| value | 输入框内容 | string | - | |
|
|
2103
|
-
| onChange | 当输入框内容全部填充时触发回调 | (value: string) => void | - | |
|
|
2104
|
-
| onInput | 输入值变化时触发的回调 | (value: string[]) => void | - | 5.22.0 |
|
|
2105
|
-
|
|
2106
|
-
|
|
2107
|
-
#### VisibilityToggle
|
|
2108
|
-
|
|
2109
|
-
| Property | Description | Type | Default | Version |
|
|
2110
|
-
|--------|--------|--------|--------|--------|
|
|
2111
|
-
| visible | 用于手动控制密码显隐 | boolean | false | 4.24 |
|
|
2112
|
-
| onVisibleChange | 显隐密码的回调 | (visible) => void | - | 4.24 |
|
|
2052
|
+
| getContainer | 指定预览挂载的节点，但依旧为全屏展示，false 为挂载在当前位置 | string \| HTMLElement \| (() => HTMLElement) \| false | - | 4.8.0 |
|
|
2053
|
+
| movable | 是否可移动 | boolean | true | 5.8.0 |
|
|
2054
|
+
| current | 当前预览图的 index | number | - | 4.12.0 |
|
|
2055
|
+
| mask | 缩略图遮罩 | ReactNode | - | 4.9.0 |
|
|
2056
|
+
| maskClassName | 缩略图遮罩类名 | string | - | 4.11.0 |
|
|
2057
|
+
| scaleStep | 1 + scaleStep | number | 0.5 | - |
|
|
2058
|
+
| minScale | 最小缩放倍数 | number | 1 | 5.7.0 |
|
|
2059
|
+
| maxScale | 最大放大倍数 | number | 50 | 5.7.0 |
|
|
2060
|
+
| closeIcon | 自定义关闭 Icon | React.ReactNode | - | 5.7.0 |
|
|
2061
|
+
| forceRender | 强制渲染预览图 | boolean | - | - |
|
|
2062
|
+
| countRender | 自定义预览计数内容 | (current: number, total: number) => React.ReactNode | - | 4.20.0 |
|
|
2063
|
+
| toolbarRender | 自定义工具栏 | (originalNode: React.ReactElement, info: | - | 5.7.0, |
|
|
2064
|
+
| imageRender | 自定义预览内容 | (originalNode: React.ReactElement, info: { transform: | - | 5.7.0, image: 5.18.0 |
|
|
2065
|
+
| onTransform | 预览图 transform 变化的回调 | { transform: | - | 5.7.0 |
|
|
2066
|
+
| onChange | 切换预览图的回调 | (current: number, prevCurrent: number) => void | - | 5.3.0 |
|
|
2067
|
+
| onVisibleChange | 当 | (visible: boolean, prevVisible: boolean, current: number) => void | - | current 参数 5.3.0 |
|
|
2113
2068
|
|
|
2114
2069
|
|
|
2115
|
-
|
|
2070
|
+
## Interface
|
|
2116
2071
|
|
|
2117
|
-
|
|
2118
|
-
|--------|--------|--------|--------|
|
|
2119
|
-
| blur | 取消焦点 | - | |
|
|
2120
|
-
| focus | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | option - 4.10.0 |
|
|
2072
|
+
### TransformType
|
|
2121
2073
|
|
|
2122
2074
|
|
|
2075
|
+
```typescript
|
|
2076
|
+
{
|
|
2077
|
+
x: number;
|
|
2078
|
+
y: number;
|
|
2079
|
+
rotate: number;
|
|
2080
|
+
scale: number;
|
|
2081
|
+
flipX: boolean;
|
|
2082
|
+
flipY: boolean;
|
|
2083
|
+
}
|
|
2084
|
+
```
|
|
2123
2085
|
|
|
2124
2086
|
|
|
2125
|
-
|
|
2126
|
-
#### API
|
|
2087
|
+
### TransformAction
|
|
2127
2088
|
|
|
2128
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2129
|
-
|--------|--------|--------|--------|
|
|
2130
|
-
| icon | icon | ReactNode \| string | |
|
|
2131
|
-
| iconType | 百炼图标iconfont的key，依赖百炼的iconFont，例如bl-icon-add | string | |
|
|
2132
|
-
| bordered | 边框 | boolean | true |
|
|
2133
|
-
| shape | 形状 | 'default' \| 'circle' | 'default' |
|
|
2134
2089
|
|
|
2090
|
+
```typescript
|
|
2091
|
+
type TransformAction =
|
|
2092
|
+
| 'flipY'
|
|
2093
|
+
| 'flipX'
|
|
2094
|
+
| 'rotateLeft'
|
|
2095
|
+
| 'rotateRight'
|
|
2096
|
+
| 'zoomIn'
|
|
2097
|
+
| 'zoomOut'
|
|
2098
|
+
| 'close'
|
|
2099
|
+
| 'prev'
|
|
2100
|
+
| 'next'
|
|
2101
|
+
| 'wheel'
|
|
2102
|
+
| 'doubleClick'
|
|
2103
|
+
| 'move'
|
|
2104
|
+
| 'dragRebound'
|
|
2105
|
+
| 'reset';
|
|
2106
|
+
```
|
|
2135
2107
|
|
|
2136
|
-
## antd API
|
|
2137
2108
|
|
|
2138
|
-
|
|
2109
|
+
### ToolbarRenderInfoType
|
|
2139
2110
|
|
|
2140
|
-
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
2141
2111
|
|
|
2142
|
-
|
|
2112
|
+
```typescript
|
|
2113
|
+
{
|
|
2114
|
+
icons: {
|
|
2115
|
+
flipYIcon: React.ReactNode;
|
|
2116
|
+
flipXIcon: React.ReactNode;
|
|
2117
|
+
rotateLeftIcon: React.ReactNode;
|
|
2118
|
+
rotateRightIcon: React.ReactNode;
|
|
2119
|
+
zoomOutIcon: React.ReactNode;
|
|
2120
|
+
zoomInIcon: React.ReactNode;
|
|
2121
|
+
};
|
|
2122
|
+
actions: {
|
|
2123
|
+
onActive?: (index: number) => void; // 5.21.0 之后支持
|
|
2124
|
+
onFlipY: () => void;
|
|
2125
|
+
onFlipX: () => void;
|
|
2126
|
+
onRotateLeft: () => void;
|
|
2127
|
+
onRotateRight: () => void;
|
|
2128
|
+
onZoomOut: () => void;
|
|
2129
|
+
onZoomIn: () => void;
|
|
2130
|
+
onReset: () => void; // 5.17.3 之后支持
|
|
2131
|
+
onClose: () => void;
|
|
2132
|
+
};
|
|
2133
|
+
transform: TransformType,
|
|
2134
|
+
current: number;
|
|
2135
|
+
total: number;
|
|
2136
|
+
image: ImgInfo
|
|
2137
|
+
}
|
|
2138
|
+
```
|
|
2143
2139
|
|
|
2144
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
2145
|
-
|--------|--------|--------|--------|--------|
|
|
2146
|
-
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
2147
|
-
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
2148
|
-
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
2149
|
-
| color | 设置按钮的颜色 | default | - | default |
|
|
2150
|
-
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
2151
|
-
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
2152
|
-
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
2153
|
-
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2154
|
-
| htmlType | 设置 | submit | button | |
|
|
2155
|
-
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
2156
|
-
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
2157
|
-
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
2158
|
-
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
2159
|
-
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
2160
|
-
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
2161
2140
|
|
|
2141
|
+
### ImgInfo
|
|
2162
2142
|
|
|
2163
|
-
支持原生 button 的其他所有属性。
|
|
2164
2143
|
|
|
2165
|
-
|
|
2144
|
+
```typescript
|
|
2145
|
+
{
|
|
2146
|
+
url: string;
|
|
2147
|
+
alt: string;
|
|
2148
|
+
width: string | number;
|
|
2149
|
+
height: string | number;
|
|
2150
|
+
}
|
|
2151
|
+
```
|
|
2166
2152
|
|
|
2167
|
-
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
2168
2153
|
|
|
2169
2154
|
|
|
2170
2155
|
|
|
@@ -2728,6 +2713,82 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
|
|
|
2728
2713
|
|
|
2729
2714
|
|
|
2730
2715
|
|
|
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
|
+
<DemoTitle title="FileIcon" desc="用于展示不同文件类型的图标，也可通过 FileCard 展示文件信息。">
|
|
2763
|
+
#### API
|
|
2764
|
+
|
|
2765
|
+
##### FileIcon Props
|
|
2766
|
+
|
|
2767
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2768
|
+
|--------|--------|--------|--------|
|
|
2769
|
+
| src | | string | |
|
|
2770
|
+
| image | | string | |
|
|
2771
|
+
| type | | string | (必填) |
|
|
2772
|
+
| size | | number | |
|
|
2773
|
+
| style | | React.CSSProperties | |
|
|
2774
|
+
|
|
2775
|
+
|
|
2776
|
+
##### FileCard Props
|
|
2777
|
+
|
|
2778
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2779
|
+
|--------|--------|--------|--------|
|
|
2780
|
+
| iconSize | | number | |
|
|
2781
|
+
| src | | string | |
|
|
2782
|
+
| type | | string | (必填) |
|
|
2783
|
+
| name | | string | (必填) |
|
|
2784
|
+
| desc | | string | |
|
|
2785
|
+
| size | | number | |
|
|
2786
|
+
| width | | React.CSSProperties['width'] | |
|
|
2787
|
+
| children | | React.ReactNode | |
|
|
2788
|
+
|
|
2789
|
+
|
|
2790
|
+
|
|
2791
|
+
|
|
2731
2792
|
<DemoTitle title="FloatButton" desc="用于网站上的全局功能；无论浏览到何处都可以看见的按钮。">
|
|
2732
2793
|
#### API
|
|
2733
2794
|
|
|
@@ -2976,6 +3037,70 @@ const dividerItem = {
|
|
|
2976
3037
|
|
|
2977
3038
|
|
|
2978
3039
|
|
|
3040
|
+
<DemoTitle title="Drawer" desc="从页面一侧滑入的操作面板，用于承载临时界面内容。">
|
|
3041
|
+
#### API
|
|
3042
|
+
|
|
3043
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3044
|
+
|--------|--------|--------|--------|
|
|
3045
|
+
| showDivider | 是否显示分割线 | boolean | true |
|
|
3046
|
+
|
|
3047
|
+
##### Drawer.Confirm - 带按钮的抽屉
|
|
3048
|
+
|
|
3049
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3050
|
+
|--------|--------|--------|--------|
|
|
3051
|
+
| footer | 自定义底部内容 | React.ReactNode | |
|
|
3052
|
+
| onOk | 点击确定回调 | () => void | |
|
|
3053
|
+
| okText | 确认按钮文字 | string | |
|
|
3054
|
+
| okButtonProps | 确认按钮属性 | ButtonProps | |
|
|
3055
|
+
| onCancel | 点击取消回调 | () => void | |
|
|
3056
|
+
| cancelText | 取消按钮文字 | string | |
|
|
3057
|
+
| cancelButtonProps | 取消按钮属性 | ButtonProps | |
|
|
3058
|
+
| info | 底部额外内容 | React.ReactNode | |
|
|
3059
|
+
|
|
3060
|
+
<AntdApiRef url="https://ant.design/components/drawer-cn/#api"></AntdApiRef>
|
|
3061
|
+
|
|
3062
|
+
|
|
3063
|
+
## antd API
|
|
3064
|
+
|
|
3065
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3066
|
+
|
|
3067
|
+
<!-- prettier-ignore -->
|
|
3068
|
+
<Container type="warning" title="注意">
|
|
3069
|
+
v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v4 `className` 与 `style` 改至配置 Drawer 窗体样式以和 Modal 对齐。
|
|
3070
|
+
</Container>
|
|
3071
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3072
|
+
|--------|--------|--------|--------|--------|
|
|
3073
|
+
| autoFocus | 抽屉展开后是否将焦点切换至其 DOM 节点 | boolean | true | 4.17.0 |
|
|
3074
|
+
| afterOpenChange | 切换抽屉时动画结束后的回调 | function(open) | - | |
|
|
3075
|
+
| className | Drawer 容器外层 className 设置，如果需要设置最外层，请使用 rootClassName | string | - | |
|
|
3076
|
+
| classNames | 语义化结构 className | | - | 5.10.0 |
|
|
3077
|
+
| closeIcon | 自定义关闭图标。5.7.0：设置为 | ReactNode | | |
|
|
3078
|
+
| destroyOnHidden | 关闭时销毁 Drawer 里的子元素 | boolean | false | 5.25.0 |
|
|
3079
|
+
| extra | 抽屉右上角的操作区域 | ReactNode | - | 4.17.0 |
|
|
3080
|
+
| footer | 抽屉的页脚 | ReactNode | - | |
|
|
3081
|
+
| forceRender | 预渲染 Drawer 内元素 | boolean | false | |
|
|
3082
|
+
| getContainer | 指定 Drawer 挂载的节点， | HTMLElement \| () => HTMLElement \| Selectors \| false | body | |
|
|
3083
|
+
| height | 高度，在 | string \| number | 378 | |
|
|
3084
|
+
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
|
|
3085
|
+
| mask | 是否展示遮罩 | boolean | true | |
|
|
3086
|
+
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
|
|
3087
|
+
| placement | 抽屉的方向 | top | right | |
|
|
3088
|
+
| push | 用于设置多层 Drawer 的推动行为 | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
|
|
3089
|
+
| rootStyle | 可用于设置 Drawer 最外层容器的样式，和 | CSSProperties | - | |
|
|
3090
|
+
| size | 预设抽屉宽度（或高度），default | 'default' \| 'large' | 'default' | 4.17.0 |
|
|
3091
|
+
| style | 设计 Drawer 容器样式，如果你只需要设置内容部分请使用 | CSSProperties | - | |
|
|
3092
|
+
| styles | 语义化结构 style | | - | 5.10.0 |
|
|
3093
|
+
| title | 标题 | ReactNode | - | |
|
|
3094
|
+
| loading | 显示骨架屏 | boolean | false | 5.17.0 |
|
|
3095
|
+
| open | Drawer 是否可见 | boolean | - |
|
|
3096
|
+
| width | 宽度 | string \| number | 378 | |
|
|
3097
|
+
| zIndex | 设置 Drawer 的 | number | 1000 | |
|
|
3098
|
+
| onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - | |
|
|
3099
|
+
| drawerRender | 自定义渲染抽屉 | (node: ReactNode) => ReactNode | - | 5.18.0 |
|
|
3100
|
+
|
|
3101
|
+
|
|
3102
|
+
|
|
3103
|
+
|
|
2979
3104
|
<DemoTitle title="Descriptions" desc="展示多个只读字段的组合">
|
|
2980
3105
|
#### API
|
|
2981
3106
|
|
|
@@ -3014,36 +3139,6 @@ span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem
|
|
|
3014
3139
|
|
|
3015
3140
|
|
|
3016
3141
|
|
|
3017
|
-
<DemoTitle title="FileIcon" desc="用于展示不同文件类型的图标，也可通过 FileCard 展示文件信息。">
|
|
3018
|
-
#### API
|
|
3019
|
-
|
|
3020
|
-
##### FileIcon Props
|
|
3021
|
-
|
|
3022
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3023
|
-
|--------|--------|--------|--------|
|
|
3024
|
-
| src | | string | |
|
|
3025
|
-
| image | | string | |
|
|
3026
|
-
| type | | string | (必填) |
|
|
3027
|
-
| size | | number | |
|
|
3028
|
-
| style | | React.CSSProperties | |
|
|
3029
|
-
|
|
3030
|
-
|
|
3031
|
-
##### FileCard Props
|
|
3032
|
-
|
|
3033
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3034
|
-
|--------|--------|--------|--------|
|
|
3035
|
-
| iconSize | | number | |
|
|
3036
|
-
| src | | string | |
|
|
3037
|
-
| type | | string | (必填) |
|
|
3038
|
-
| name | | string | (必填) |
|
|
3039
|
-
| desc | | string | |
|
|
3040
|
-
| size | | number | |
|
|
3041
|
-
| width | | React.CSSProperties['width'] | |
|
|
3042
|
-
| children | | React.ReactNode | |
|
|
3043
|
-
|
|
3044
|
-
|
|
3045
|
-
|
|
3046
|
-
|
|
3047
3142
|
<DemoTitle title="DatePicker" desc="输入或选择时间的控件。">
|
|
3048
3143
|
#### API
|
|
3049
3144
|
|
|
@@ -3266,66 +3361,18 @@ export type FormatType =
|
|
|
3266
3361
|
|
|
3267
3362
|
|
|
3268
3363
|
|
|
3269
|
-
<DemoTitle title="
|
|
3364
|
+
<DemoTitle title="CodeBlock" desc="代码块">
|
|
3270
3365
|
#### API
|
|
3271
3366
|
|
|
3272
3367
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3273
3368
|
|--------|--------|--------|--------|
|
|
3274
|
-
|
|
|
3275
|
-
|
|
3276
|
-
|
|
3277
|
-
|
|
3278
|
-
|
|
|
3279
|
-
|
|
3280
|
-
|
|
|
3281
|
-
| onOk | 点击确定回调 | () => void | |
|
|
3282
|
-
| okText | 确认按钮文字 | string | |
|
|
3283
|
-
| okButtonProps | 确认按钮属性 | ButtonProps | |
|
|
3284
|
-
| onCancel | 点击取消回调 | () => void | |
|
|
3285
|
-
| cancelText | 取消按钮文字 | string | |
|
|
3286
|
-
| cancelButtonProps | 取消按钮属性 | ButtonProps | |
|
|
3287
|
-
| info | 底部额外内容 | React.ReactNode | |
|
|
3288
|
-
|
|
3289
|
-
<AntdApiRef url="https://ant.design/components/drawer-cn/#api"></AntdApiRef>
|
|
3290
|
-
|
|
3291
|
-
|
|
3292
|
-
## antd API
|
|
3293
|
-
|
|
3294
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3295
|
-
|
|
3296
|
-
<!-- prettier-ignore -->
|
|
3297
|
-
<Container type="warning" title="注意">
|
|
3298
|
-
v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v4 `className` 与 `style` 改至配置 Drawer 窗体样式以和 Modal 对齐。
|
|
3299
|
-
</Container>
|
|
3300
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3301
|
-
|--------|--------|--------|--------|--------|
|
|
3302
|
-
| autoFocus | 抽屉展开后是否将焦点切换至其 DOM 节点 | boolean | true | 4.17.0 |
|
|
3303
|
-
| afterOpenChange | 切换抽屉时动画结束后的回调 | function(open) | - | |
|
|
3304
|
-
| className | Drawer 容器外层 className 设置，如果需要设置最外层，请使用 rootClassName | string | - | |
|
|
3305
|
-
| classNames | 语义化结构 className | | - | 5.10.0 |
|
|
3306
|
-
| closeIcon | 自定义关闭图标。5.7.0：设置为 | ReactNode | | |
|
|
3307
|
-
| destroyOnHidden | 关闭时销毁 Drawer 里的子元素 | boolean | false | 5.25.0 |
|
|
3308
|
-
| extra | 抽屉右上角的操作区域 | ReactNode | - | 4.17.0 |
|
|
3309
|
-
| footer | 抽屉的页脚 | ReactNode | - | |
|
|
3310
|
-
| forceRender | 预渲染 Drawer 内元素 | boolean | false | |
|
|
3311
|
-
| getContainer | 指定 Drawer 挂载的节点， | HTMLElement \| () => HTMLElement \| Selectors \| false | body | |
|
|
3312
|
-
| height | 高度，在 | string \| number | 378 | |
|
|
3313
|
-
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
|
|
3314
|
-
| mask | 是否展示遮罩 | boolean | true | |
|
|
3315
|
-
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
|
|
3316
|
-
| placement | 抽屉的方向 | top | right | |
|
|
3317
|
-
| push | 用于设置多层 Drawer 的推动行为 | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
|
|
3318
|
-
| rootStyle | 可用于设置 Drawer 最外层容器的样式，和 | CSSProperties | - | |
|
|
3319
|
-
| size | 预设抽屉宽度（或高度），default | 'default' \| 'large' | 'default' | 4.17.0 |
|
|
3320
|
-
| style | 设计 Drawer 容器样式，如果你只需要设置内容部分请使用 | CSSProperties | - | |
|
|
3321
|
-
| styles | 语义化结构 style | | - | 5.10.0 |
|
|
3322
|
-
| title | 标题 | ReactNode | - | |
|
|
3323
|
-
| loading | 显示骨架屏 | boolean | false | 5.17.0 |
|
|
3324
|
-
| open | Drawer 是否可见 | boolean | - |
|
|
3325
|
-
| width | 宽度 | string \| number | 378 | |
|
|
3326
|
-
| zIndex | 设置 Drawer 的 | number | 1000 | |
|
|
3327
|
-
| onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - | |
|
|
3328
|
-
| drawerRender | 自定义渲染抽屉 | (node: ReactNode) => ReactNode | - | 5.18.0 |
|
|
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[] | [] |
|
|
3329
3376
|
|
|
3330
3377
|
|
|
3331
3378
|
|
|
@@ -3401,92 +3448,6 @@ v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v
|
|
|
3401
3448
|
|
|
3402
3449
|
|
|
3403
3450
|
|
|
3404
|
-
<DemoTitle title="Checkbox" desc="收集用户的多项选择。">
|
|
3405
|
-
#### API
|
|
3406
|
-
|
|
3407
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3408
|
-
|--------|--------|--------|--------|
|
|
3409
|
-
| description | 描述文本 | string | |
|
|
3410
|
-
| descriptionClassName | 描述文本的样式类名 | string | |
|
|
3411
|
-
| descriptionStyle | 描述文本的内联样式 | React.CSSProperties | |
|
|
3412
|
-
|
|
3413
|
-
|
|
3414
|
-
<AntdApiRef url="https://ant.design/components/checkbox-cn/#api"></AntdApiRef>
|
|
3415
|
-
|
|
3416
|
-
|
|
3417
|
-
## antd API
|
|
3418
|
-
|
|
3419
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3420
|
-
|
|
3421
|
-
#### Checkbox
|
|
3422
|
-
|
|
3423
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3424
|
-
|--------|--------|--------|--------|--------|
|
|
3425
|
-
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
3426
|
-
| checked | 指定当前是否选中 | boolean | false | |
|
|
3427
|
-
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
3428
|
-
| disabled | 失效状态 | boolean | false | |
|
|
3429
|
-
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false | |
|
|
3430
|
-
| onChange | 变化时的回调函数 | (e: CheckboxChangeEvent) => void | - | |
|
|
3431
|
-
| onBlur | 失去焦点时的回调 | function() | - | |
|
|
3432
|
-
| onFocus | 获得焦点时的回调 | function() | - | |
|
|
3433
|
-
|
|
3434
|
-
|
|
3435
|
-
#### Checkbox.Group
|
|
3436
|
-
|
|
3437
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3438
|
-
|--------|--------|--------|--------|--------|
|
|
3439
|
-
| defaultValue | 默认选中的选项 | (string \| number)[] | [] | |
|
|
3440
|
-
| disabled | 整组失效 | boolean | false | |
|
|
3441
|
-
| name | CheckboxGroup 下所有 | string | - | |
|
|
3442
|
-
| options | 指定可选项 | string[] \| number[] \| Option[] | [] | |
|
|
3443
|
-
| value | 指定选中的选项 | (string \| number \| boolean)[] | [] | |
|
|
3444
|
-
| title | 选项的 title | string | - | |
|
|
3445
|
-
| className | 选项的类名 | string | - | 5.25.0 |
|
|
3446
|
-
| style | 选项的样式 | React.CSSProperties | - | |
|
|
3447
|
-
| onChange | 变化时的回调函数 | (checkedValue: T[]) => void | - | |
|
|
3448
|
-
|
|
3449
|
-
|
|
3450
|
-
##### Option
|
|
3451
|
-
|
|
3452
|
-
|
|
3453
|
-
```typescript
|
|
3454
|
-
interface Option {
|
|
3455
|
-
label: string;
|
|
3456
|
-
value: string;
|
|
3457
|
-
disabled?: boolean;
|
|
3458
|
-
}
|
|
3459
|
-
```
|
|
3460
|
-
|
|
3461
|
-
|
|
3462
|
-
### 方法
|
|
3463
|
-
|
|
3464
|
-
#### Checkbox
|
|
3465
|
-
|
|
3466
|
-
| 名称 | 描述 | 版本 |
|
|
3467
|
-
|--------|--------|--------|
|
|
3468
|
-
| blur() | 移除焦点 | |
|
|
3469
|
-
| focus() | 获取焦点 | |
|
|
3470
|
-
| nativeElement | 返回 Checkbox 的 DOM 节点 | 5.17.3 |
|
|
3471
|
-
|
|
3472
|
-
|
|
3473
|
-
|
|
3474
|
-
|
|
3475
|
-
<DemoTitle title="CodeBlock" desc="代码块">
|
|
3476
|
-
#### API
|
|
3477
|
-
|
|
3478
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3479
|
-
|--------|--------|--------|--------|
|
|
3480
|
-
| language | 语言 | string \| string[] | (必填) |
|
|
3481
|
-
| value | 值 | string | |
|
|
3482
|
-
| className | 类名 | string | |
|
|
3483
|
-
| theme | 主题 | 'dark' \| 'light' | |
|
|
3484
|
-
| readOnly | 只读 | boolean | |
|
|
3485
|
-
| onChange | | (value?: string) => void | |
|
|
3486
|
-
|
|
3487
|
-
|
|
3488
|
-
|
|
3489
|
-
|
|
3490
3451
|
<DemoTitle title="Collapse" desc="可以折叠/展开的内容区域">
|
|
3491
3452
|
#### API
|
|
3492
3453
|
|
|
@@ -3545,58 +3506,137 @@ interface Option {
|
|
|
3545
3506
|
|
|
3546
3507
|
|
|
3547
3508
|
|
|
3548
|
-
<DemoTitle title="
|
|
3509
|
+
<DemoTitle title="Card" desc="通用卡片容器">
|
|
3549
3510
|
#### API
|
|
3550
3511
|
|
|
3551
3512
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3552
3513
|
|--------|--------|--------|--------|
|
|
3553
|
-
|
|
|
3554
|
-
|
|
3555
|
-
|
|
3556
|
-
|
|
3557
|
-
|
|
3558
|
-
|
|
3559
|
-
|
|
3560
|
-
|
|
3561
|
-
|
|
3562
|
-
|
|
3563
|
-
|
|
3514
|
+
| info | 副标题 | ReactNode | |
|
|
3515
|
+
|
|
3516
|
+
<AntdApiRef url="https://ant.design/components/card-cn/#api"></AntdApiRef>
|
|
3517
|
+
|
|
3518
|
+
|
|
3519
|
+
## antd API
|
|
3520
|
+
|
|
3521
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3522
|
+
|
|
3523
|
+
|
|
3524
|
+
```jsx
|
|
3525
|
+
<Card title="卡片标题">卡片内容</Card>
|
|
3526
|
+
```
|
|
3527
|
+
|
|
3528
|
+
|
|
3529
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3530
|
+
|--------|--------|--------|--------|--------|
|
|
3531
|
+
| actions | 卡片操作组，位置在卡片底部 | Array | - | |
|
|
3532
|
+
| activeTabKey | 当前激活页签的 key | string | - | |
|
|
3533
|
+
| variant | 形态变体 | outlined | outlined | 5.24.0 |
|
|
3534
|
+
| cover | 卡片封面 | ReactNode | - | |
|
|
3535
|
+
| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | 第一个页签的 key | |
|
|
3536
|
+
| extra | 卡片右上角的操作区域 | ReactNode | - | |
|
|
3537
|
+
| hoverable | 鼠标移过时可浮起 | boolean | false | |
|
|
3538
|
+
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false | |
|
|
3539
|
+
| size | card 的尺寸 | default | default | |
|
|
3540
|
+
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | |
|
|
3541
|
+
| tabList | 页签标题列表 | | - | |
|
|
3542
|
+
| tabProps | | - | - | |
|
|
3543
|
+
| title | 卡片标题 | ReactNode | - | |
|
|
3544
|
+
| type | 卡片类型，可设置为 | string | - | |
|
|
3545
|
+
| classNames | 配置卡片内置模块的 className | | - | 5.14.0 |
|
|
3546
|
+
| styles | 配置卡片内置模块的 style | | - | 5.14.0 |
|
|
3547
|
+
| onTabChange | 页签切换的回调 | (key) => void | - | |
|
|
3548
|
+
|
|
3549
|
+
|
|
3550
|
+
### Card.Grid
|
|
3551
|
+
|
|
3552
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3553
|
+
|--------|--------|--------|--------|--------|
|
|
3554
|
+
| className | 网格容器类名 | string | - | |
|
|
3555
|
+
| hoverable | 鼠标移过时可浮起 | boolean | true | |
|
|
3556
|
+
| style | 定义网格容器类名的样式 | CSSProperties | - | |
|
|
3557
|
+
|
|
3558
|
+
|
|
3559
|
+
### Card.Meta
|
|
3560
|
+
|
|
3561
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3562
|
+
|--------|--------|--------|--------|--------|
|
|
3563
|
+
| avatar | 头像/图标 | ReactNode | - | |
|
|
3564
|
+
| className | 容器类名 | string | - | |
|
|
3565
|
+
| description | 描述内容 | ReactNode | - | |
|
|
3566
|
+
| style | 定义容器类名的样式 | CSSProperties | - | |
|
|
3567
|
+
| title | 标题内容 | ReactNode | - | |
|
|
3568
|
+
|
|
3569
|
+
|
|
3570
|
+
|
|
3571
|
+
|
|
3572
|
+
<DemoTitle title="Checkbox" desc="收集用户的多项选择。">
|
|
3573
|
+
#### API
|
|
3564
3574
|
|
|
3565
|
-
|
|
3575
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3576
|
+
|--------|--------|--------|--------|
|
|
3577
|
+
| description | 描述文本 | string | |
|
|
3578
|
+
| descriptionClassName | 描述文本的样式类名 | string | |
|
|
3579
|
+
| descriptionStyle | 描述文本的内联样式 | React.CSSProperties | |
|
|
3580
|
+
|
|
3581
|
+
|
|
3582
|
+
<AntdApiRef url="https://ant.design/components/checkbox-cn/#api"></AntdApiRef>
|
|
3566
3583
|
|
|
3567
3584
|
|
|
3568
3585
|
## antd API
|
|
3569
3586
|
|
|
3570
3587
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3571
3588
|
|
|
3572
|
-
|
|
3589
|
+
#### Checkbox
|
|
3573
3590
|
|
|
3574
|
-
|
|
3591
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3592
|
+
|--------|--------|--------|--------|--------|
|
|
3593
|
+
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
3594
|
+
| checked | 指定当前是否选中 | boolean | false | |
|
|
3595
|
+
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
3596
|
+
| disabled | 失效状态 | boolean | false | |
|
|
3597
|
+
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false | |
|
|
3598
|
+
| onChange | 变化时的回调函数 | (e: CheckboxChangeEvent) => void | - | |
|
|
3599
|
+
| onBlur | 失去焦点时的回调 | function() | - | |
|
|
3600
|
+
| onFocus | 获得焦点时的回调 | function() | - | |
|
|
3575
3601
|
|
|
3576
|
-
|
|
3602
|
+
|
|
3603
|
+
#### Checkbox.Group
|
|
3604
|
+
|
|
3605
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3577
3606
|
|--------|--------|--------|--------|--------|
|
|
3578
|
-
|
|
|
3579
|
-
|
|
|
3580
|
-
|
|
|
3581
|
-
|
|
|
3582
|
-
|
|
|
3583
|
-
|
|
|
3584
|
-
|
|
|
3585
|
-
|
|
|
3586
|
-
|
|
|
3587
|
-
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
3588
|
-
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
3589
|
-
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
3590
|
-
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
3591
|
-
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
3592
|
-
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
3607
|
+
| defaultValue | 默认选中的选项 | (string \| number)[] | [] | |
|
|
3608
|
+
| disabled | 整组失效 | boolean | false | |
|
|
3609
|
+
| name | CheckboxGroup 下所有 | string | - | |
|
|
3610
|
+
| options | 指定可选项 | string[] \| number[] \| Option[] | [] | |
|
|
3611
|
+
| value | 指定选中的选项 | (string \| number \| boolean)[] | [] | |
|
|
3612
|
+
| title | 选项的 title | string | - | |
|
|
3613
|
+
| className | 选项的类名 | string | - | 5.25.0 |
|
|
3614
|
+
| style | 选项的样式 | React.CSSProperties | - | |
|
|
3615
|
+
| onChange | 变化时的回调函数 | (checkedValue: T[]) => void | - | |
|
|
3593
3616
|
|
|
3594
3617
|
|
|
3595
|
-
|
|
3618
|
+
##### Option
|
|
3596
3619
|
|
|
3597
|
-
### PresetColors
|
|
3598
3620
|
|
|
3599
|
-
|
|
3621
|
+
```typescript
|
|
3622
|
+
interface Option {
|
|
3623
|
+
label: string;
|
|
3624
|
+
value: string;
|
|
3625
|
+
disabled?: boolean;
|
|
3626
|
+
}
|
|
3627
|
+
```
|
|
3628
|
+
|
|
3629
|
+
|
|
3630
|
+
### 方法
|
|
3631
|
+
|
|
3632
|
+
#### Checkbox
|
|
3633
|
+
|
|
3634
|
+
| 名称 | 描述 | 版本 |
|
|
3635
|
+
|--------|--------|--------|
|
|
3636
|
+
| blur() | 移除焦点 | |
|
|
3637
|
+
| focus() | 获取焦点 | |
|
|
3638
|
+
| nativeElement | 返回 Checkbox 的 DOM 节点 | 5.17.3 |
|
|
3639
|
+
|
|
3600
3640
|
|
|
3601
3641
|
|
|
3602
3642
|
|
|
@@ -3719,66 +3759,58 @@ return <Breadcrumb itemRender={itemRender} items={items} />;
|
|
|
3719
3759
|
|
|
3720
3760
|
|
|
3721
3761
|
|
|
3722
|
-
<DemoTitle title="
|
|
3762
|
+
<DemoTitle title="Button" desc="按钮用于开始一个即时操作。">
|
|
3723
3763
|
#### API
|
|
3724
3764
|
|
|
3725
3765
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3726
3766
|
|--------|--------|--------|--------|
|
|
3727
|
-
|
|
|
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'] | |
|
|
3728
3778
|
|
|
3729
|
-
<AntdApiRef url="https://ant.design/components/
|
|
3779
|
+
<AntdApiRef url="https://ant.design/components/button-cn/#api"></AntdApiRef>
|
|
3730
3780
|
|
|
3731
3781
|
|
|
3732
3782
|
## antd API
|
|
3733
3783
|
|
|
3734
3784
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3735
3785
|
|
|
3786
|
+
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
3736
3787
|
|
|
3737
|
-
|
|
3738
|
-
<Card title="卡片标题">卡片内容</Card>
|
|
3739
|
-
```
|
|
3740
|
-
|
|
3741
|
-
|
|
3742
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3743
|
-
|--------|--------|--------|--------|--------|
|
|
3744
|
-
| actions | 卡片操作组，位置在卡片底部 | Array | - | |
|
|
3745
|
-
| activeTabKey | 当前激活页签的 key | string | - | |
|
|
3746
|
-
| variant | 形态变体 | outlined | outlined | 5.24.0 |
|
|
3747
|
-
| cover | 卡片封面 | ReactNode | - | |
|
|
3748
|
-
| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | 第一个页签的 key | |
|
|
3749
|
-
| extra | 卡片右上角的操作区域 | ReactNode | - | |
|
|
3750
|
-
| hoverable | 鼠标移过时可浮起 | boolean | false | |
|
|
3751
|
-
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false | |
|
|
3752
|
-
| size | card 的尺寸 | default | default | |
|
|
3753
|
-
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | |
|
|
3754
|
-
| tabList | 页签标题列表 | | - | |
|
|
3755
|
-
| tabProps | | - | - | |
|
|
3756
|
-
| title | 卡片标题 | ReactNode | - | |
|
|
3757
|
-
| type | 卡片类型，可设置为 | string | - | |
|
|
3758
|
-
| classNames | 配置卡片内置模块的 className | | - | 5.14.0 |
|
|
3759
|
-
| styles | 配置卡片内置模块的 style | | - | 5.14.0 |
|
|
3760
|
-
| onTabChange | 页签切换的回调 | (key) => void | - | |
|
|
3761
|
-
|
|
3762
|
-
|
|
3763
|
-
### Card.Grid
|
|
3788
|
+
按钮的属性说明如下：
|
|
3764
3789
|
|
|
3765
|
-
|
|
|
3790
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
3766
3791
|
|--------|--------|--------|--------|--------|
|
|
3767
|
-
|
|
|
3768
|
-
|
|
|
3769
|
-
|
|
|
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 |
|
|
3770
3807
|
|
|
3771
3808
|
|
|
3772
|
-
|
|
3809
|
+
支持原生 button 的其他所有属性。
|
|
3773
3810
|
|
|
3774
|
-
|
|
3775
|
-
|--------|--------|--------|--------|--------|
|
|
3776
|
-
| avatar | 头像/图标 | ReactNode | - | |
|
|
3777
|
-
| className | 容器类名 | string | - | |
|
|
3778
|
-
| description | 描述内容 | ReactNode | - | |
|
|
3779
|
-
| style | 定义容器类名的样式 | CSSProperties | - | |
|
|
3780
|
-
| title | 标题内容 | ReactNode | - | |
|
|
3811
|
+
### PresetColors
|
|
3781
3812
|
|
|
3813
|
+
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
3782
3814
|
|
|
3783
3815
|
|
|
3784
3816
|
|
|
@@ -3830,59 +3862,6 @@ ApiParser解析结果为空
|
|
|
3830
3862
|
|
|
3831
3863
|
|
|
3832
3864
|
|
|
3833
|
-
<DemoTitle title="Anchor" desc="用于跳转到页面指定位置。">
|
|
3834
|
-
#### API
|
|
3835
|
-
|
|
3836
|
-
<AntdApiRef url="https://ant.design/components/anchor-cn/#api"></AntdApiRef>
|
|
3837
|
-
|
|
3838
|
-
|
|
3839
|
-
## antd API
|
|
3840
|
-
|
|
3841
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3842
|
-
|
|
3843
|
-
### Anchor Props
|
|
3844
|
-
|
|
3845
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3846
|
-
|--------|--------|--------|--------|--------|
|
|
3847
|
-
| affix | 固定模式 | boolean \| Omit | true | object: 5.19.0 |
|
|
3848
|
-
| bounds | 锚点区域边界 | number | 5 | |
|
|
3849
|
-
| getContainer | 指定滚动的容器 | () => HTMLElement | () => window | |
|
|
3850
|
-
| getCurrentAnchor | 自定义高亮的锚点 | (activeLink: string) => string | - | |
|
|
3851
|
-
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
|
|
3852
|
-
| showInkInFixed | affix={false} | boolean | false | |
|
|
3853
|
-
| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同， | number | - | |
|
|
3854
|
-
| onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - | |
|
|
3855
|
-
| onClick | click | (e: MouseEvent, link: object) => void | - | |
|
|
3856
|
-
| items | 数据化配置选项内容，支持通过 children 嵌套 | { key, href, title, target, children }[] | - | 5.1.0 |
|
|
3857
|
-
| direction | 设置导航方向 | vertical | vertical | 5.2.0 |
|
|
3858
|
-
| replace | 替换浏览器历史记录中项目的 href 而不是推送它 | boolean | false | 5.7.0 |
|
|
3859
|
-
|
|
3860
|
-
|
|
3861
|
-
### AnchorItem
|
|
3862
|
-
|
|
3863
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3864
|
-
|--------|--------|--------|--------|--------|
|
|
3865
|
-
| key | 唯一标志 | string \| number | - | |
|
|
3866
|
-
| href | 锚点链接 | string | - | |
|
|
3867
|
-
| target | 该属性指定在何处显示链接的资源 | string | - | |
|
|
3868
|
-
| title | 文字内容 | ReactNode | - | |
|
|
3869
|
-
| children | 嵌套的 Anchor Link， | | - | |
|
|
3870
|
-
| replace | 替换浏览器历史记录中的项目 href 而不是推送它 | boolean | false | 5.7.0 |
|
|
3871
|
-
|
|
3872
|
-
|
|
3873
|
-
### Link Props
|
|
3874
|
-
|
|
3875
|
-
建议使用 items 形式。
|
|
3876
|
-
|
|
3877
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3878
|
-
|--------|--------|--------|--------|--------|
|
|
3879
|
-
| href | 锚点链接 | string | - | |
|
|
3880
|
-
| target | 该属性指定在何处显示链接的资源 | string | - | |
|
|
3881
|
-
| title | 文字内容 | ReactNode | - | |
|
|
3882
|
-
|
|
3883
|
-
|
|
3884
|
-
|
|
3885
|
-
|
|
3886
3865
|
<DemoTitle title="AlertDialog" desc="一种在界面中弹出的对话框，用来向用户传达重要信息，并引导其进行确认或取消等操作。">
|
|
3887
3866
|
#### API
|
|
3888
3867
|
|
|
@@ -4090,6 +4069,59 @@ const confirmed = await modal.confirm({ ... });
|
|
|
4090
4069
|
|
|
4091
4070
|
|
|
4092
4071
|
|
|
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
|
+
|
|
4093
4125
|
# 使用
|
|
4094
4126
|
|
|
4095
4127
|
|