@agentscope-ai/design 1.0.9 → 1.0.11
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/alert.style.js +1 -1
- package/lib/antd/styles/breadcrumb.style.js +1 -1
- package/lib/antd/styles/button.style.js +1 -1
- package/lib/antd/styles/dropdown.style.js +1 -1
- package/lib/antd/styles/floatButton.style.js +1 -1
- package/lib/antd/styles/index.style.js +1 -1
- package/lib/antd/styles/inputNumber.style.js +1 -1
- package/lib/antd/styles/message.style.js +1 -1
- package/lib/antd/styles/notification.style.js +1 -1
- package/lib/antd/styles/popover.style.js +1 -1
- package/lib/antd/styles/radio.style.js +1 -1
- package/lib/antd/styles/segment.style.js +1 -1
- package/lib/antd/styles/select.style.js +1 -1
- package/lib/antd/styles/slider.style.js +1 -1
- package/lib/antd/styles/table.style.js +1 -1
- package/lib/antd/styles/tooltip.style.js +1 -1
- package/lib/antd/themes/bailianTheme.json +1 -1
- package/lib/antd/themes/generateThemeByToken.js +7 -1
- package/lib/components/commonComponents/AlertDialog/index.style.js +1 -1
- package/lib/components/commonComponents/Anchor/index.style.js +1 -1
- package/lib/components/commonComponents/Avatar/index.style.js +1 -1
- package/lib/components/commonComponents/Breadcrumb/index.style.js +1 -1
- package/lib/components/commonComponents/Button/index.d.ts +1 -1
- package/lib/components/commonComponents/Button/index.js +7 -7
- package/lib/components/commonComponents/Card/index.style.js +1 -1
- package/lib/components/commonComponents/Checkbox/index.style.js +1 -1
- package/lib/components/commonComponents/CodeBlock/index.js +2 -1
- package/lib/components/commonComponents/CodeBlock/index.style.js +1 -1
- package/lib/components/commonComponents/Collapse/index.style.js +1 -1
- package/lib/components/commonComponents/CollapsePanel/index.style.js +1 -1
- package/lib/components/commonComponents/ConfigProvider/index.js +10 -7
- package/lib/components/commonComponents/DatePicker/index.style.js +1 -1
- package/lib/components/commonComponents/Descriptions/index.style.js +1 -1
- package/lib/components/commonComponents/Drawer/index.style.js +1 -1
- package/lib/components/commonComponents/Dropdown/index.style.js +1 -1
- package/lib/components/commonComponents/EllipsisTip/index.style.js +1 -1
- package/lib/components/commonComponents/Empty/index.style.js +1 -1
- package/lib/components/commonComponents/FileIcon/index.style.js +1 -1
- package/lib/components/commonComponents/Form/index.style.js +1 -1
- package/lib/components/commonComponents/HelpIcon/index.style.js +1 -1
- package/lib/components/commonComponents/IconButton/index.style.js +1 -1
- package/lib/components/commonComponents/IconFont/index.style.js +1 -1
- package/lib/components/commonComponents/Image/index.style.js +1 -1
- package/lib/components/commonComponents/Input/index.style.js +1 -1
- package/lib/components/commonComponents/Modal/index.js +0 -1
- package/lib/components/commonComponents/Modal/index.style.js +1 -1
- package/lib/components/commonComponents/Pagination/index.js +75 -20
- package/lib/components/commonComponents/Pagination/index.style.js +1 -1
- package/lib/components/commonComponents/PromptsEditor/demo/basic.js +5 -4
- package/lib/components/commonComponents/PromptsEditor/index.d.ts +8 -2
- package/lib/components/commonComponents/PromptsEditor/index.js +16 -10
- package/lib/components/commonComponents/RadioButton/index.style.js +1 -1
- package/lib/components/commonComponents/Result/index.style.js +1 -1
- package/lib/components/commonComponents/SlateEditor/elements/index.style.js +1 -1
- package/lib/components/commonComponents/SlateEditor/index.style.js +1 -1
- package/lib/components/commonComponents/Slider/Input/index.js +6 -4
- package/lib/components/commonComponents/Slider/Input/index.style.js +2 -2
- package/lib/components/commonComponents/Slider/index.style.js +1 -1
- package/lib/components/commonComponents/SliderSelector/index.style.js +1 -1
- package/lib/components/commonComponents/Spinner/index.style.js +1 -1
- package/lib/components/commonComponents/Statistic/index.style.js +1 -1
- package/lib/components/commonComponents/Steps/index.style.js +1 -1
- package/lib/components/commonComponents/Switch/index.js +3 -3
- package/lib/components/commonComponents/Switch/index.style.js +1 -1
- package/lib/components/commonComponents/Table/demo/demo1.js +1 -9
- package/lib/components/commonComponents/Table/demo/demo2.js +1 -9
- package/lib/components/commonComponents/Table/demo/demo3.js +1 -9
- package/lib/components/commonComponents/Table/demo/demo4.js +1 -9
- package/lib/components/commonComponents/Table/index.d.ts +1 -1
- package/lib/components/commonComponents/Table/index.js +1 -1
- package/lib/components/commonComponents/Table/index.style.js +18 -2
- package/lib/components/commonComponents/Tabs/index.js +3 -1
- package/lib/components/commonComponents/Tabs/index.style.js +1 -1
- package/lib/components/commonComponents/Tag/index.style.js +1 -1
- package/lib/components/commonComponents/TimePicker/index.style.js +1 -1
- package/lib/components/commonComponents/Tooltip/index.style.js +1 -1
- package/lib/components/commonComponents/Upload/index.style.js +1 -1
- package/lib/components/commonComponents/Video/Control.d.ts +19 -0
- package/lib/components/commonComponents/Video/Control.js +104 -0
- package/lib/components/commonComponents/Video/demo/demo1.d.ts +2 -0
- package/lib/components/commonComponents/Video/demo/demo1.js +12 -0
- package/lib/components/commonComponents/Video/index.d.ts +18 -0
- package/lib/components/commonComponents/Video/index.js +222 -0
- package/lib/components/commonComponents/Video/index.style.d.ts +1 -0
- package/lib/components/commonComponents/Video/index.style.js +40 -0
- package/lib/i18n/strings/en-US.json +3 -1
- package/lib/i18n/strings/zh-CN.json +3 -1
- package/lib/index.d.ts +2 -1
- package/lib/index.js +1 -0
- package/lib/libs/createStyle/index.d.ts +7 -1
- package/lib/libs/createStyle/index.js +24 -72
- package/lib/libs/generateCssVars/index.js +1 -1
- package/package.json +12 -12
- package/lib/libs/newCreateStyle/index.d.ts +0 -7
- package/lib/libs/newCreateStyle/index.js +0 -26
- package/llms/all.llms.txt +0 -4235
- package/llms/components/commonComponents/Alert/index.zh-CN.llms.txt +0 -74
- package/llms/components/commonComponents/Anchor/index.zh-CN.llms.txt +0 -71
- package/llms/components/commonComponents/Avatar/index.zh-CN.llms.txt +0 -61
- package/llms/components/commonComponents/Breadcrumb/index.zh-CN.llms.txt +0 -89
- package/llms/components/commonComponents/Button/index.zh-CN.llms.txt +0 -99
- package/llms/components/commonComponents/Card/index.zh-CN.llms.txt +0 -79
- package/llms/components/commonComponents/Checkbox/index.zh-CN.llms.txt +0 -88
- package/llms/components/commonComponents/CodeBlock/index.zh-CN.llms.txt +0 -34
- package/llms/components/commonComponents/Collapse/index.zh-CN.llms.txt +0 -76
- package/llms/components/commonComponents/CollapsePanel/index.zh-CN.llms.txt +0 -75
- package/llms/components/commonComponents/DatePicker/index.zh-CN.llms.txt +0 -227
- package/llms/components/commonComponents/Descriptions/index.zh-CN.llms.txt +0 -60
- package/llms/components/commonComponents/Drawer/index.zh-CN.llms.txt +0 -87
- package/llms/components/commonComponents/Dropdown/index.zh-CN.llms.txt +0 -87
- package/llms/components/commonComponents/Empty/index.zh-CN.llms.txt +0 -100
- package/llms/components/commonComponents/FloatButton/index.zh-CN.llms.txt +0 -70
- package/llms/components/commonComponents/Form/index.zh-CN.llms.txt +0 -383
- package/llms/components/commonComponents/IconButton/index.zh-CN.llms.txt +0 -68
- package/llms/components/commonComponents/Image/index.zh-CN.llms.txt +0 -118
- package/llms/components/commonComponents/Input/index.zh-CN.llms.txt +0 -168
- package/llms/components/commonComponents/InputNumber/index.zh-CN.llms.txt +0 -66
- package/llms/components/commonComponents/Message/index.zh-CN.llms.txt +0 -114
- package/llms/components/commonComponents/Modal/index.zh-CN.llms.txt +0 -154
- package/llms/components/commonComponents/Notification/index.zh-CN.llms.txt +0 -118
- package/llms/components/commonComponents/Pagination/index.zh-CN.llms.txt +0 -62
- package/llms/components/commonComponents/Popover/index.zh-CN.llms.txt +0 -56
- package/llms/components/commonComponents/Progress/index.zh-CN.llms.txt +0 -64
- package/llms/components/commonComponents/Radio/index.zh-CN.llms.txt +0 -75
- package/llms/components/commonComponents/RadioButton/index.zh-CN.llms.txt +0 -94
- package/llms/components/commonComponents/Result/index.zh-CN.llms.txt +0 -63
- package/llms/components/commonComponents/Select/index.zh-CN.llms.txt +0 -120
- package/llms/components/commonComponents/Skeleton/index.zh-CN.llms.txt +0 -71
- package/llms/components/commonComponents/Slider/index.zh-CN.llms.txt +0 -83
- package/llms/components/commonComponents/Spinner/index.zh-CN.llms.txt +0 -38
- package/llms/components/commonComponents/Statistic/index.zh-CN.llms.txt +0 -77
- package/llms/components/commonComponents/Steps/index.zh-CN.llms.txt +0 -82
- package/llms/components/commonComponents/Switch/index.zh-CN.llms.txt +0 -58
- package/llms/components/commonComponents/Table/index.zh-CN.llms.txt +0 -228
- package/llms/components/commonComponents/Tabs/index.zh-CN.llms.txt +0 -95
- package/llms/components/commonComponents/Tag/index.zh-CN.llms.txt +0 -57
- package/llms/components/commonComponents/TimePicker/index.zh-CN.llms.txt +0 -104
- package/llms/components/commonComponents/Tooltip/index.zh-CN.llms.txt +0 -63
- package/llms/components/commonComponents/Upload/index.zh-CN.llms.txt +0 -105
- package/llms/index.llms.txt +0 -45
package/llms/all.llms.txt
DELETED
|
@@ -1,4235 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
<DemoTitle title="Upload" desc="文件选择上传和拖拽上传控件。"></DemoTitle>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
示例
|
|
10
|
-
|
|
11
|
-
<Install>Upload</Install>
|
|
12
|
-
|
|
13
|
-
#### 上传示例
|
|
14
|
-
|
|
15
|
-
以下是此上传组件的示例和变体
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
拖拽上传
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
已上传的文件展示
|
|
27
|
-
|
|
28
|
-
#### API
|
|
29
|
-
|
|
30
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd upload](https://ant.design/components/upload-cn) 查看更多 API
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
## antd API
|
|
34
|
-
|
|
35
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
36
|
-
|
|
37
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
38
|
-
|--------|--------|--------|--------|--------|
|
|
39
|
-
| accept | 接受上传的文件类型,详见 | string | - | |
|
|
40
|
-
| action | 上传的地址 | string | (file) => Promise<string> | - | |
|
|
41
|
-
| beforeUpload | 上传文件之前的钩子,参数为上传的文件,若返回 | (file, fileList) => boolean | Promise<File> | | - | |
|
|
42
|
-
| customRequest | 通过覆盖默认的上传行为,可以自定义自己的上传实现 | function | - | |
|
|
43
|
-
| data | 上传所需额外参数或返回上传额外参数的方法 | object|(file) => object | Promise<object> | - | |
|
|
44
|
-
| defaultFileList | 默认已经上传的文件列表 | object[] | - | |
|
|
45
|
-
| directory | 支持上传文件夹( | boolean | false | |
|
|
46
|
-
| disabled | 是否禁用 | boolean | false | 对于自定义 Upload children 时请将 disabled 属性同时传给 child node 确保 disabled 渲染效果保持一致 |
|
|
47
|
-
| fileList | 已经上传的文件列表(受控),使用此参数时,如果遇到 | | - | |
|
|
48
|
-
| headers | 设置上传的请求头部,IE10 以上有效 | object | - | |
|
|
49
|
-
| iconRender | 自定义显示 icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - | |
|
|
50
|
-
| isImageUrl | 自定义缩略图是否使用 <img /> 标签进行显示 | (file: UploadFile) => boolean | | |
|
|
51
|
-
| itemRender | 自定义上传列表项 | (originNode: ReactElement, file: UploadFile, fileList: object[], actions: { download: function, preview: function, remove: function }) => React.ReactNode | - | 4.16.0 |
|
|
52
|
-
| listType | 上传列表的内建样式,支持四种基本样式 | string | text | picture-circle |
|
|
53
|
-
| maxCount | 限制上传数量。当为 1 时,始终用最新上传的文件代替当前文件 | number | - | 4.10.0 |
|
|
54
|
-
| method | 上传请求的 http method | string | post | |
|
|
55
|
-
| multiple | 是否支持多选文件, | boolean | false | |
|
|
56
|
-
| name | 发到后台的文件参数名 | string | file | |
|
|
57
|
-
| openFileDialogOnClick | 点击打开文件对话框 | boolean | true | |
|
|
58
|
-
| pastable | 是否支持粘贴文件 | boolean | false | 5.25.0 |
|
|
59
|
-
| previewFile | 自定义文件预览逻辑 | (file: File | Blob) => Promise<dataURL: string> | - | |
|
|
60
|
-
| progress | 自定义进度条样式 | | { strokeWidth: 2, showInfo: false } | 4.3.0 |
|
|
61
|
-
| showUploadList | 是否展示文件列表, 可设为一个对象,用于单独设定 | boolean | { extra?: ReactNode | (file: UploadFile) => ReactNode, showPreviewIcon?: boolean | (file: UploadFile) => boolean, showDownloadIcon?: boolean | (file: UploadFile) => boolean, showRemoveIcon?: boolean | (file: UploadFile) => boolean, previewIcon?: ReactNode | (file: UploadFile) => ReactNode, removeIcon?: ReactNode | (file: UploadFile) => ReactNode, downloadIcon?: ReactNode | (file: UploadFile) => ReactNode } | true | extra |
|
|
62
|
-
| withCredentials | 上传请求时是否携带 cookie | boolean | false | |
|
|
63
|
-
| onChange | 上传文件改变时的回调,上传每个阶段都会触发该事件。详见 | function | - | |
|
|
64
|
-
| onDrop | 当文件被拖入上传区域时执行的回调功能 | (event: React.DragEvent) => void | - | 4.16.0 |
|
|
65
|
-
| onDownload | 点击下载文件时的回调,如果没有指定,则默认跳转到文件 url 对应的标签页 | function(file): void | (跳转新标签页) | |
|
|
66
|
-
| onPreview | 点击文件链接或预览图标时的回调 | function(file) | - | |
|
|
67
|
-
| onRemove | 点击移除文件时的回调,返回值为 false 时不移除。支持返回一个 Promise 对象,Promise 对象 resolve(false) 或 reject 时不移除 | function(file): boolean | Promise | - | |
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
### UploadFile
|
|
71
|
-
|
|
72
|
-
继承自 File,附带额外属性用于渲染。
|
|
73
|
-
|
|
74
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
75
|
-
|--------|--------|--------|--------|--------|
|
|
76
|
-
| crossOrigin | CORS 属性设置 | 'anonymous' | - | 4.20.0 |
|
|
77
|
-
| name | 文件名 | string | - | - |
|
|
78
|
-
| percent | 上传进度 | number | - | - |
|
|
79
|
-
| status | 上传状态,不同状态展示颜色也会有所不同 | error | - | - |
|
|
80
|
-
| thumbUrl | 缩略图地址 | string | - | - |
|
|
81
|
-
| uid | 唯一标识符,不设置时会自动生成 | string | - | - |
|
|
82
|
-
| url | 下载地址 | string | - | - |
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
### onChange
|
|
86
|
-
|
|
87
|
-
💡 上传中、完成、失败都会调用这个函数。
|
|
88
|
-
|
|
89
|
-
文件状态改变的回调,返回为:
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
1. `file` 当前操作的文件对象。
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
2. `fileList` 当前的文件列表。
|
|
104
|
-
|
|
105
|
-
3. `event` 上传中的服务端响应内容,包含了上传进度等信息,高级浏览器支持。
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
<DemoTitle title="Tooltip" desc="简单的文本提示气泡框"></DemoTitle>
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
示例
|
|
116
|
-
|
|
117
|
-
<Install>Tooltip</Install>
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
支持内嵌操作
|
|
124
|
-
|
|
125
|
-
#### API
|
|
126
|
-
|
|
127
|
-
| <div><span class="lang-en">Attribute</span><span class="lang-cn">属性名</span></div> | <div><span class="lang-en">Description</span><span class="lang-cn">描述</span></div> | <div><span class="lang-en">Type</span><span class="lang-cn">类型</span></div> | <div><span class="lang-en">Default</span><span class="lang-cn">默认值</span></div> |
|
|
128
|
-
|--------|--------|--------|--------|
|
|
129
|
-
| mode | <div><span class="lang-en">color mode</span><span class="lang-cn">颜色模式</span></div> | 'dark' | 'light' | 'light' |
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd tooltip](https://ant.design/components/tooltip-cn) 查看更多 API
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
## antd API
|
|
136
|
-
|
|
137
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
138
|
-
|
|
139
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
140
|
-
|--------|--------|--------|--------|
|
|
141
|
-
| title | 提示文字 | ReactNode | () => ReactNode | - |
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
### 共同的 API
|
|
145
|
-
|
|
146
|
-
<Antd component="Alert" message="以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。" type="info" banner="true"></Antd>
|
|
147
|
-
|
|
148
|
-
<!-- prettier-ignore -->
|
|
149
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
150
|
-
|--------|--------|--------|--------|--------|
|
|
151
|
-
| align | 该值将合并到 placement 的配置中,设置参考 | object | - | |
|
|
152
|
-
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean | { pointAtCenter: boolean } | true | 5.2.0 |
|
|
153
|
-
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
154
|
-
| color | 背景颜色 | string | - | 4.3.0 |
|
|
155
|
-
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
156
|
-
| | 关闭后是否销毁 dom | boolean | false | |
|
|
157
|
-
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
158
|
-
| fresh | 默认情况下,Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
159
|
-
| getPopupContainer | 浮层渲染父节点,默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
160
|
-
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip,单位:秒 | number | 0.1 | |
|
|
161
|
-
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip,单位:秒 | number | 0.1 | |
|
|
162
|
-
| | 卡片类名, 请使用 | string | - | |
|
|
163
|
-
| | 卡片样式, 请使用 | React.CSSProperties | - | |
|
|
164
|
-
| | 卡片内容区域的样式对象, 请使用 | React.CSSProperties | - | |
|
|
165
|
-
| placement | 气泡框位置,可选 | string | top | |
|
|
166
|
-
| trigger | 触发行为,可选 | string | string[] | hover | |
|
|
167
|
-
| open | 用于手动控制浮层显隐,小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
168
|
-
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
169
|
-
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
<DemoTitle title="TimePicker" desc="输入或选择时间的控件。"></DemoTitle>
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
180
|
-
示例
|
|
181
|
-
|
|
182
|
-
<Install>TimePicker</Install>
|
|
183
|
-
|
|
184
|
-
#### 时间选择框示例
|
|
185
|
-
|
|
186
|
-
以下是此时间选择框组件的示例和变体
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
选择时间范围
|
|
193
|
-
|
|
194
|
-
#### API
|
|
195
|
-
|
|
196
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd time-picker](https://ant.design/components/time-picker-cn) 查看更多 API
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
## antd API
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
210
|
-
|--------|--------|--------|--------|--------|
|
|
211
|
-
| allowClear | 自定义清除按钮 | boolean | { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
|
|
212
|
-
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
213
|
-
| cellRender | 自定义单元格的内容 | (current: number, info: { originNode: React.ReactNode, today: dayjs, range?: 'start' | 'end', subType: 'hour' | 'minute' | 'second' | 'meridiem' }) => React.ReactNode | - | 5.4.0 |
|
|
214
|
-
| changeOnScroll | 在滚动时改变选择值 | boolean | false | 5.14.0 |
|
|
215
|
-
| className | 选择器类名 | string | - | |
|
|
216
|
-
| defaultValue | 默认时间 | | - | |
|
|
217
|
-
| disabled | 禁用全部操作 | boolean | false | |
|
|
218
|
-
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
219
|
-
| format | 展示的时间格式 | string | HH:mm:ss | |
|
|
220
|
-
| getPopupContainer | 定义浮层的容器,默认为 body 上新建 div | function(trigger) | - | |
|
|
221
|
-
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | |
|
|
222
|
-
| hourStep | 小时选项间隔 | number | 1 | |
|
|
223
|
-
| inputReadOnly | 设置输入框为只读(避免在移动设备上打开虚拟键盘) | boolean | false | |
|
|
224
|
-
| minuteStep | 分钟选项间隔 | number | 1 | |
|
|
225
|
-
| needConfirm | 是否需要确认按钮,为 | boolean | - | 5.14.0 |
|
|
226
|
-
| open | 面板是否打开 | boolean | false | |
|
|
227
|
-
| placeholder | 没有值的时候显示的内容 | string | [string, string] | 请选择时间 | |
|
|
228
|
-
| placement | 选择框弹出的位置 | bottomLeft | bottomLeft | |
|
|
229
|
-
| popupClassName | 弹出层类名 | string | - | |
|
|
230
|
-
| popupStyle | 弹出层样式对象 | object | - | |
|
|
231
|
-
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
|
|
232
|
-
| renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - | |
|
|
233
|
-
| secondStep | 秒选项间隔 | number | 1 | |
|
|
234
|
-
| showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
|
|
235
|
-
| size | 输入框大小, | large | - | |
|
|
236
|
-
| status | 设置校验状态 | 'error' | 'warning' | - | 4.19.0 |
|
|
237
|
-
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
|
238
|
-
| use12Hours | 使用 12 小时制,为 true 时 | boolean | false | |
|
|
239
|
-
| value | 当前时间 | | - | |
|
|
240
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 | |
|
|
241
|
-
| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - | |
|
|
242
|
-
| onChange | 时间发生变化的回调 | function(time: dayjs, timeString: string): void | - | |
|
|
243
|
-
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - | |
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
#### DisabledTime
|
|
247
|
-
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
251
|
-
|
|
252
|
-
注意:`disabledMilliseconds` 为 `5.14.0` 新增。
|
|
253
|
-
|
|
254
|
-
## 方法
|
|
255
|
-
|
|
256
|
-
| 名称 | 描述 | 版本 |
|
|
257
|
-
|--------|--------|--------|
|
|
258
|
-
| blur() | 移除焦点 | |
|
|
259
|
-
| focus() | 获取焦点 | |
|
|
260
|
-
|
|
261
|
-
|
|
262
|
-
## RangePicker
|
|
263
|
-
|
|
264
|
-
属性与 DatePicker 的 [RangePicker](/components/date-picker-cn#rangepicker) 相同。还包含以下属性:
|
|
265
|
-
|
|
266
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
267
|
-
|--------|--------|--------|--------|--------|
|
|
268
|
-
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
269
|
-
| order | 始末时间是否自动排序 | boolean | true | 4.1.0 |
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
### RangeDisabledTime
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
<DemoTitle title="Tabs" desc="用户可以通过点击不同的标签在同一页面中查看不同的内容区域。"></DemoTitle>
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
示例
|
|
287
|
-
|
|
288
|
-
<Install>Tabs</Install>
|
|
289
|
-
|
|
290
|
-
## 标签页示例
|
|
291
|
-
|
|
292
|
-
以下是此组件的示例和变体
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
默认样式
|
|
299
|
-
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
|
|
303
|
-
|
|
304
|
-
下划线样式
|
|
305
|
-
|
|
306
|
-
## API
|
|
307
|
-
|
|
308
|
-
| <div><span class="lang-en">Attribute</span><span class="lang-cn">属性名</span></div> | <div><span class="lang-en">Description</span><span class="lang-cn">描述</span></div> | <div><span class="lang-en">Type</span><span class="lang-cn">类型</span></div> | <div><span class="lang-en">Default</span><span class="lang-cn">默认值</span></div> |
|
|
309
|
-
|--------|--------|--------|--------|
|
|
310
|
-
| type | <div><span class="lang-en">Type</span><span class="lang-cn">类型</span></div> | 'segmented' | 'card' | 'editable-card' | 'line' | 'segmented' |
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
本组件完全兼容 antd 同名组件,详情可访问[antd tabs](https://ant.design/components/tabs-cn/)查看更多 API。
|
|
314
|
-
|
|
315
|
-
|
|
316
|
-
## antd API
|
|
317
|
-
|
|
318
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
319
|
-
|
|
320
|
-
### Tabs
|
|
321
|
-
|
|
322
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
323
|
-
|--------|--------|--------|--------|--------|
|
|
324
|
-
| activeKey | 当前激活 tab 面板的 key | string | - | |
|
|
325
|
-
| addIcon | 自定义添加按钮,设置 | ReactNode | <PlusOutlined /> | 4.4.0 |
|
|
326
|
-
| animated | 是否使用动画切换 Tabs | boolean| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | |
|
|
327
|
-
| centered | 标签居中展示 | boolean | false | 4.4.0 |
|
|
328
|
-
| defaultActiveKey | 初始化选中面板的 key,如果没有设置 activeKey | string | 第一个面板的 key | |
|
|
329
|
-
| hideAdd | 是否隐藏加号图标,在 | boolean | false | |
|
|
330
|
-
| indicator | 自定义指示条的长度和对齐方式 | { size?: number | (origin: number) => number; align: | - | 5.13.0 |
|
|
331
|
-
| items | 配置选项卡内容 | | [] | 4.23.0 |
|
|
332
|
-
| more | 自定义折叠菜单属性 | | { icon: | |
|
|
333
|
-
| removeIcon | 自定义删除按钮,设置 | ReactNode | <CloseOutlined /> | 5.15.0 |
|
|
334
|
-
| popupClassName | 更多菜单的 | string | - | 4.21.0 |
|
|
335
|
-
| renderTabBar | 替换 TabBar,用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
|
|
336
|
-
| size | 大小,提供 | string | middle | |
|
|
337
|
-
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
|
|
338
|
-
| tabBarGutter | tabs 之间的间隙 | number | - | |
|
|
339
|
-
| tabBarStyle | tab bar 的样式对象 | CSSProperties | - | |
|
|
340
|
-
| tabPosition | 页签位置,可选值有 | string | top | |
|
|
341
|
-
| | 被隐藏时是否销毁 DOM 结构,使用 | boolean | false | |
|
|
342
|
-
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
343
|
-
| onChange | 切换面板的回调 | (activeKey: string) => void | - | |
|
|
344
|
-
| onEdit | 新增和删除页签的回调,在 | (action === 'add' ? event : targetKey, action) => void | - | |
|
|
345
|
-
| onTabClick | tab 被点击的回调 | (key: string, event: MouseEvent) => void | - | |
|
|
346
|
-
| onTabScroll | tab 滚动时触发 | ({ direction: | - | 4.3.0 |
|
|
347
|
-
|
|
348
|
-
|
|
349
|
-
更多属性查看 [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
|
|
350
|
-
|
|
351
|
-
### TabItemType
|
|
352
|
-
|
|
353
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
354
|
-
|--------|--------|--------|--------|--------|
|
|
355
|
-
| closeIcon | 自定义关闭图标,在 | ReactNode | - | |
|
|
356
|
-
| | 被隐藏时是否销毁 DOM 结构,使用 | boolean | false | 5.11.0 |
|
|
357
|
-
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
358
|
-
| disabled | 禁用某一项 | boolean | false | |
|
|
359
|
-
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
|
|
360
|
-
| key | 对应 activeKey | string | - | |
|
|
361
|
-
| label | 选项卡头显示文字 | ReactNode | - | |
|
|
362
|
-
| icon | 选项卡头显示图标 | ReactNode | - | 5.12.0 |
|
|
363
|
-
| children | 选项卡头显示内容 | ReactNode | - | |
|
|
364
|
-
| closable | 是否显示选项卡的关闭按钮,在 | boolean | true | |
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
### MoreProps
|
|
368
|
-
|
|
369
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
370
|
-
|--------|--------|--------|--------|--------|
|
|
371
|
-
| icon | 自定义折叠图标 | ReactNode | - | |
|
|
372
|
-
| | | | | |
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
<DemoTitle title="Tag" desc="进行标记和分类的小标签"></DemoTitle>
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
示例
|
|
384
|
-
|
|
385
|
-
<Install>Tag</Install>
|
|
386
|
-
|
|
387
|
-
#### 标签示例
|
|
388
|
-
|
|
389
|
-
以下是此标签组件的示例和变体
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
支持 Icon
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
支持关闭
|
|
401
|
-
|
|
402
|
-
#### API
|
|
403
|
-
|
|
404
|
-
| <div><span class="lang-en">Attribute</span><span class="lang-cn">属性名</span></div> | <div><span class="lang-en">Description</span><span class="lang-cn">描述</span></div> | <div><span class="lang-en">Type</span><span class="lang-cn">类型</span></div> | <div><span class="lang-en">Default</span><span class="lang-cn">默认值</span></div> |
|
|
405
|
-
|--------|--------|--------|--------|
|
|
406
|
-
| size | <div><span class="lang-en">size of the tag</span><span class="lang-cn">尺寸</span></div> | 'small' | 'middle' | 'middle' |
|
|
407
|
-
|
|
408
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd tag](https://ant.design/components/tag-cn) 查看更多 API
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
## antd API
|
|
412
|
-
|
|
413
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
414
|
-
|
|
415
|
-
### Tag
|
|
416
|
-
|
|
417
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
418
|
-
|--------|--------|--------|--------|--------|
|
|
419
|
-
| closeIcon | 自定义关闭按钮。5.7.0:设置为 | ReactNode | false | 4.4.0 |
|
|
420
|
-
| color | 标签色 | string | - | |
|
|
421
|
-
| icon | 设置图标 | ReactNode | - | |
|
|
422
|
-
| bordered | 是否有边框 | boolean | true | 5.4.0 |
|
|
423
|
-
| onClose | 关闭时的回调(可通过 | (e: React.MouseEvent<HTMLElement, MouseEvent>) => void | - | |
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
### Tag.CheckableTag
|
|
427
|
-
|
|
428
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
429
|
-
|--------|--------|--------|--------|
|
|
430
|
-
| checked | 设置标签的选中状态 | boolean | false |
|
|
431
|
-
| onChange | 点击标签时触发的回调 | (checked) => void | - |
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
<DemoTitle title="Table" desc="展示行列数据。"></DemoTitle>
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
441
|
-
|
|
442
|
-
示例
|
|
443
|
-
|
|
444
|
-
<Install>Table</Install>
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
首列为单选框时
|
|
451
|
-
|
|
452
|
-
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
456
|
-
首列为多选框时
|
|
457
|
-
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
461
|
-
|
|
462
|
-
支持从列头排序
|
|
463
|
-
|
|
464
|
-
#### FAQs
|
|
465
|
-
|
|
466
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd table](https://ant.design/components/table-cn) 查看更多 API
|
|
467
|
-
|
|
468
|
-
|
|
469
|
-
## antd API
|
|
470
|
-
|
|
471
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
472
|
-
|
|
473
|
-
### Table
|
|
474
|
-
|
|
475
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
476
|
-
|--------|--------|--------|--------|--------|
|
|
477
|
-
| bordered | 是否展示外边框和列边框 | boolean | false | |
|
|
478
|
-
| columns | 表格列的配置描述,具体项见下表 | | - | |
|
|
479
|
-
| components | 覆盖默认的 table 元素 | | - | |
|
|
480
|
-
| dataSource | 数据数组 | object[] | - | |
|
|
481
|
-
| expandable | 配置展开属性 | | - | |
|
|
482
|
-
| footer | 表格尾部 | function(currentPageData) | - | |
|
|
483
|
-
| getPopupContainer | 设置表格内各类浮层的渲染节点,如筛选菜单 | (triggerNode) => HTMLElement | () => TableHtmlElement | |
|
|
484
|
-
| loading | 页面是否加载中 | boolean | | false | |
|
|
485
|
-
| locale | 默认文案设置,目前包括排序、过滤、空数据文案 | object | | |
|
|
486
|
-
| pagination | 分页器,参考 | object | | - | |
|
|
487
|
-
| rowClassName | 表格行的类名 | function(record, index): string | - | |
|
|
488
|
-
| rowKey | 表格行 key 的取值,可以是字符串或一个函数 | string | function(record): string | key | |
|
|
489
|
-
| rowSelection | 表格行是否可选择, | object | - | |
|
|
490
|
-
| rowHoverable | 表格行是否开启 hover 交互 | boolean | true | 5.16.0 |
|
|
491
|
-
| scroll | 表格是否可滚动,也可以指定滚动区域的宽、高, | object | - | |
|
|
492
|
-
| showHeader | 是否显示表头 | boolean | true | |
|
|
493
|
-
| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示。当参数类型为对象时,将被设置为 Tooltip 的属性 | boolean | | { target: 'full-header' } | 5.16.0 |
|
|
494
|
-
| size | 表格大小 | large | large | |
|
|
495
|
-
| sortDirections | 支持的排序方式,取值为 | Array | [ | |
|
|
496
|
-
| sticky | 设置粘性头部和滚动条 | boolean | | - | 4.6.0 (getContainer: 4.7.0) |
|
|
497
|
-
| summary | 总结栏 | (currentData) => ReactNode | - | |
|
|
498
|
-
| tableLayout | 表格元素的 | - | | 无 | |
|
|
499
|
-
| title | 表格标题 | function(currentPageData) | - | |
|
|
500
|
-
| virtual | 支持虚拟列表 | boolean | - | 5.9.0 |
|
|
501
|
-
| onChange | 分页、排序、筛选变化时触发 | function(pagination, filters, sorter, extra: { currentDataSource: [], action: | - | |
|
|
502
|
-
| onHeaderRow | 设置头部行属性 | function(columns, index) | - | |
|
|
503
|
-
| onRow | 设置行属性 | function(record, index) | - | |
|
|
504
|
-
| onScroll | 表单内容滚动时触发(虚拟滚动下只有垂直滚动会触发事件) | function(event) | - | 5.16.0 |
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
### Table ref
|
|
508
|
-
|
|
509
|
-
| 参数 | 说明 | 类型 | 版本 |
|
|
510
|
-
|--------|--------|--------|--------|
|
|
511
|
-
| nativeElement | 最外层 div 元素 | HTMLDivElement | 5.11.0 |
|
|
512
|
-
| scrollTo | 滚动到目标位置(设置 | (config: { index?: number, key?: React.Key, top?: number }) => void | 5.11.0 |
|
|
513
|
-
|
|
514
|
-
|
|
515
|
-
#### onRow 用法
|
|
516
|
-
|
|
517
|
-
适用于 `onRow` `onHeaderRow` `onCell` `onHeaderCell`。
|
|
518
|
-
|
|
519
|
-
|
|
520
|
-
|
|
521
|
-
|
|
522
|
-
|
|
523
|
-
### Column
|
|
524
|
-
|
|
525
|
-
列描述数据对象,是 columns 中的一项,Column 使用相同的 API。
|
|
526
|
-
|
|
527
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
528
|
-
|--------|--------|--------|--------|--------|
|
|
529
|
-
| align | 设置列的对齐方式 | left | left | |
|
|
530
|
-
| className | 列样式类名 | string | - | |
|
|
531
|
-
| colSpan | 表头列合并,设置为 0 时,不渲染 | number | - | |
|
|
532
|
-
| dataIndex | 列数据在数据项中对应的路径,支持通过数组查询嵌套路径 | string | string[] | - | |
|
|
533
|
-
| defaultFilteredValue | 默认筛选值 | string[] | - | |
|
|
534
|
-
| filterResetToDefaultFilteredValue | 点击重置按钮的时候,是否恢复默认筛选值 | boolean | false | |
|
|
535
|
-
| defaultSortOrder | 默认排序顺序 | ascend | - | |
|
|
536
|
-
| ellipsis | 超过宽度将自动省略,暂不支持和排序筛选一起使用。 | boolean | { showTitle?: boolean } | false | showTitle: 4.3.0 |
|
|
537
|
-
| filterDropdown | 可以自定义筛选菜单,此函数只负责渲染图层,需要自行编写各种交互 | ReactNode | (props: | - | |
|
|
538
|
-
| filtered | 标识数据是否经过过滤,筛选图标会高亮 | boolean | false | |
|
|
539
|
-
| filteredValue | 筛选的受控属性,外界可用此控制列的筛选状态,值为已筛选的 value 数组 | string[] | - | |
|
|
540
|
-
| filterIcon | 自定义 filter 图标。 | ReactNode | (filtered: boolean) => ReactNode | false | |
|
|
541
|
-
| filterOnClose | 是否在筛选菜单关闭时触发筛选 | boolean | true | 5.15.0 |
|
|
542
|
-
| filterMultiple | 是否多选 | boolean | true | |
|
|
543
|
-
| filterMode | 指定筛选菜单的用户界面 | 'menu' | 'tree' | 'menu' | 4.17.0 |
|
|
544
|
-
| filterSearch | 筛选菜单项是否可搜索 | boolean | function(input, record):boolean | false | boolean:4.17.0 function:4.19.0 |
|
|
545
|
-
| filters | 表头的筛选菜单项 | object[] | - | |
|
|
546
|
-
| filterDropdownProps | 自定义下拉属性,在 | | - | 5.22.0 |
|
|
547
|
-
| fixed | (IE 下无效)列是否固定,可选 | boolean | string | false | |
|
|
548
|
-
| key | React 需要的 key,如果已经设置了唯一的 | string | - | |
|
|
549
|
-
| render | 生成复杂数据的渲染函数,参数分别为当前单元格的值,当前行数据,行索引 | function(value, record, index) {} | - | |
|
|
550
|
-
| responsive | 响应式 breakpoint 配置列表。未设置则始终可见。 | | - | 4.2.0 |
|
|
551
|
-
| rowScope | 设置列范围 | row | - | 5.1.0 |
|
|
552
|
-
| shouldCellUpdate | 自定义单元格渲染时机 | (record, prevRecord) => boolean | - | 4.3.0 |
|
|
553
|
-
| showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中 | boolean | | { target: 'full-header' } | 5.16.0 |
|
|
554
|
-
| sortDirections | 支持的排序方式,覆盖 | Array | [ | |
|
|
555
|
-
| sorter | 排序函数,本地排序使用一个函数(参考 | function | boolean | { compare: function, multiple: number } | - | |
|
|
556
|
-
| sortOrder | 排序的受控属性,外界可用此控制列的排序,可设置为 | ascend | - | |
|
|
557
|
-
| sortIcon | 自定义 sort 图标 | (props: { sortOrder }) => ReactNode | - | 5.6.0 |
|
|
558
|
-
| title | 列头显示文字(函数用法 | ReactNode | ({ sortOrder, sortColumn, filters }) => ReactNode | - | |
|
|
559
|
-
| width | 列宽度( | string | number | - | |
|
|
560
|
-
| minWidth | 最小列宽度,只在 | number | - | 5.21.0 |
|
|
561
|
-
| hidden | 隐藏列 | boolean | false | 5.13.0 |
|
|
562
|
-
| onCell | 设置单元格属性 | function(record, rowIndex) | - | |
|
|
563
|
-
| onFilter | 本地模式下,确定筛选的运行函数 | function | - | |
|
|
564
|
-
| onHeaderCell | 设置头部单元格属性 | function(column) | - | |
|
|
565
|
-
|
|
566
|
-
|
|
567
|
-
### ColumnGroup
|
|
568
|
-
|
|
569
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
570
|
-
|--------|--------|--------|--------|
|
|
571
|
-
| title | 列头显示文字 | ReactNode | - |
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
### pagination
|
|
575
|
-
|
|
576
|
-
分页的配置项。
|
|
577
|
-
|
|
578
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
579
|
-
|--------|--------|--------|--------|
|
|
580
|
-
| position | 指定分页显示的位置, 取值为 | Array | [ |
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
更多配置项,请查看 [`Pagination`](/components/pagination-cn)。
|
|
584
|
-
|
|
585
|
-
### expandable
|
|
586
|
-
|
|
587
|
-
展开功能的配置。
|
|
588
|
-
|
|
589
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
590
|
-
|--------|--------|--------|--------|--------|
|
|
591
|
-
| childrenColumnName | 指定树形结构的列名 | string | children | |
|
|
592
|
-
| columnTitle | 自定义展开列表头 | ReactNode | - | 4.23.0 |
|
|
593
|
-
| columnWidth | 自定义展开列宽度 | string | number | - | |
|
|
594
|
-
| defaultExpandAllRows | 初始时,是否展开所有行 | boolean | false | |
|
|
595
|
-
| defaultExpandedRowKeys | 默认展开的行 | string[] | - | |
|
|
596
|
-
| expandedRowClassName | 展开行的 className | string | (record, index, indent) => string | - | string: 5.22.0 |
|
|
597
|
-
| expandedRowKeys | 展开的行,控制属性 | string[] | - | |
|
|
598
|
-
| expandedRowRender | 额外的展开行 | function(record, index, indent, expanded): ReactNode | - | |
|
|
599
|
-
| expandIcon | 自定义展开图标,参考 | function(props): ReactNode | - | |
|
|
600
|
-
| expandRowByClick | 通过点击行来展开子行 | boolean | false | |
|
|
601
|
-
| fixed | 控制展开图标是否固定,可选 | boolean | string | false | 4.16.0 |
|
|
602
|
-
| indentSize | 展示树形数据时,每层缩进的宽度,以 px 为单位 | number | 15 | |
|
|
603
|
-
| rowExpandable | 设置是否允许行展开( | (record) => boolean | - | |
|
|
604
|
-
| showExpandColumn | 是否显示展开图标列 | boolean | true | 4.18.0 |
|
|
605
|
-
| onExpand | 点击展开图标时触发 | function(expanded, record) | - | |
|
|
606
|
-
| onExpandedRowsChange | 展开的行变化时触发 | function(expandedRows) | - | |
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
### rowSelection
|
|
610
|
-
|
|
611
|
-
选择功能的配置。
|
|
612
|
-
|
|
613
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
614
|
-
|--------|--------|--------|--------|--------|
|
|
615
|
-
| align | 设置选择列的对齐方式 | left | left | 5.25.0 |
|
|
616
|
-
| checkStrictly | checkable 状态下节点选择完全受控(父子数据选中状态不再关联) | boolean | true | 4.4.0 |
|
|
617
|
-
| columnTitle | 自定义列表选择框标题 | ReactNode | (originalNode: ReactNode) => ReactNode | - | |
|
|
618
|
-
| columnWidth | 自定义列表选择框宽度 | string | number | 32px | |
|
|
619
|
-
| fixed | 把选择框列固定在左边 | boolean | - | |
|
|
620
|
-
| getCheckboxProps | 选择框的默认属性配置 | function(record) | - | |
|
|
621
|
-
| hideSelectAll | 隐藏全选勾选框与自定义选择项 | boolean | false | 4.3.0 |
|
|
622
|
-
| preserveSelectedRowKeys | 当数据被删除时仍然保留选项的 | boolean | - | 4.4.0 |
|
|
623
|
-
| renderCell | 渲染勾选框,用法与 Column 的 | function(checked, record, index, originNode) {} | - | 4.1.0 |
|
|
624
|
-
| selectedRowKeys | 指定选中项的 key 数组,需要和 onChange 进行配合 | string[] | number[] | [] | |
|
|
625
|
-
| defaultSelectedRowKeys | 默认选中项的 key 数组 | string[] | number[] | [] | |
|
|
626
|
-
| selections | 自定义选择项 | object[] | boolean | true | |
|
|
627
|
-
| type | 多选/单选 | checkbox | checkbox | |
|
|
628
|
-
| onCell | 设置单元格属性,用法与 Column 的 | function(record, rowIndex) | - | 5.5.0 |
|
|
629
|
-
| onChange | 选中项发生变化时的回调 | function(selectedRowKeys, selectedRows, info: { type }) | - | info.type |
|
|
630
|
-
| onSelect | 用户手动选择/取消选择某行的回调 | function(record, selected, selectedRows, nativeEvent) | - | |
|
|
631
|
-
| onSelectAll | 用户手动选择/取消选择所有行的回调 | function(selected, selectedRows, changeRows) | - | |
|
|
632
|
-
| onSelectInvert | 用户手动选择反选的回调 | function(selectedRowKeys) | - | |
|
|
633
|
-
| onSelectNone | 用户清空选择的回调 | function() | - | |
|
|
634
|
-
| onSelectMultiple | 用户使用键盘 shift 选择多行的回调 | function(selected, selectedRows, changeRows) | - | |
|
|
635
|
-
|
|
636
|
-
|
|
637
|
-
### scroll
|
|
638
|
-
|
|
639
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
640
|
-
|--------|--------|--------|--------|
|
|
641
|
-
| scrollToFirstRowOnChange | 当分页、排序、筛选变化后是否滚动到表格顶部 | boolean | - |
|
|
642
|
-
| x | 设置横向滚动,也可用于指定滚动区域的宽,可以设置为像素值,百分比, | string | number | true | - |
|
|
643
|
-
| y | 设置纵向滚动,也可用于指定滚动区域的高,可以设置为像素值 | string | number | - |
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
### selection
|
|
647
|
-
|
|
648
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
649
|
-
|--------|--------|--------|--------|
|
|
650
|
-
| key | React 需要的 key,建议设置 | string | - |
|
|
651
|
-
| text | 选择项显示的文字 | ReactNode | - |
|
|
652
|
-
| onSelect | 选择项点击回调 | function(changeableRowKeys) | - |
|
|
653
|
-
|
|
654
|
-
|
|
655
|
-
## 在 TypeScript 中使用
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/serene-platform-0jo5t)。
|
|
662
|
-
|
|
663
|
-
|
|
664
|
-
|
|
665
|
-
<DemoTitle title="Switch" desc="使用开关切换两种状态之间。"></DemoTitle>
|
|
666
|
-
|
|
667
|
-
|
|
668
|
-
|
|
669
|
-
|
|
670
|
-
|
|
671
|
-
示例
|
|
672
|
-
|
|
673
|
-
<Install>Switch</Install>
|
|
674
|
-
|
|
675
|
-
#### 开关示例
|
|
676
|
-
|
|
677
|
-
以下是此开关组件的示例和变体
|
|
678
|
-
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
683
|
-
两种大小
|
|
684
|
-
|
|
685
|
-
#### API
|
|
686
|
-
|
|
687
|
-
| <div><span class="lang-en">Attribute</span><span class="lang-cn">属性名</span></div> | <div><span class="lang-en">Description</span><span class="lang-cn">描述</span></div> | <div><span class="lang-en">Type</span><span class="lang-cn">类型</span></div> | <div><span class="lang-en">Default</span><span class="lang-cn">默认值</span></div> |
|
|
688
|
-
|--------|--------|--------|--------|
|
|
689
|
-
| label | <div><span class="lang-en">content after the switch</span><span class="lang-cn">Switch后的内容</span></div> | ReactNode | |
|
|
690
|
-
|
|
691
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd switch](https://ant.design/components/switch-cn) 查看更多 API
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
## antd API
|
|
695
|
-
|
|
696
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
697
|
-
|
|
698
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
699
|
-
|--------|--------|--------|--------|--------|
|
|
700
|
-
| autoFocus | 组件自动获取焦点 | boolean | false | |
|
|
701
|
-
| checked | 指定当前是否选中 | boolean | false | |
|
|
702
|
-
| checkedChildren | 选中时的内容 | ReactNode | - | |
|
|
703
|
-
| className | Switch 器类名 | string | - | |
|
|
704
|
-
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
705
|
-
| defaultValue | defaultChecked | boolean | - | 5.12.0 |
|
|
706
|
-
| disabled | 是否禁用 | boolean | false | |
|
|
707
|
-
| loading | 加载中的开关 | boolean | false | |
|
|
708
|
-
| size | 开关大小,可选值: | string | default | |
|
|
709
|
-
| unCheckedChildren | 非选中时的内容 | ReactNode | - | |
|
|
710
|
-
| value | checked | boolean | - | 5.12.0 |
|
|
711
|
-
| onChange | 变化时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
712
|
-
| onClick | 点击时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
713
|
-
|
|
714
|
-
|
|
715
|
-
## 方法
|
|
716
|
-
|
|
717
|
-
| 名称 | 描述 |
|
|
718
|
-
|--------|--------|
|
|
719
|
-
| blur() | 移除焦点 |
|
|
720
|
-
| focus() | 获取焦点 |
|
|
721
|
-
|
|
722
|
-
|
|
723
|
-
|
|
724
|
-
|
|
725
|
-
<DemoTitle title="Steps" desc="引导用户按照流程完成任务的导航条。"></DemoTitle>
|
|
726
|
-
|
|
727
|
-
|
|
728
|
-
|
|
729
|
-
|
|
730
|
-
|
|
731
|
-
示例
|
|
732
|
-
|
|
733
|
-
<Install>Steps</Install>
|
|
734
|
-
|
|
735
|
-
#### 步骤条示例
|
|
736
|
-
|
|
737
|
-
以下是此组件的示例和变体
|
|
738
|
-
|
|
739
|
-
|
|
740
|
-
|
|
741
|
-
|
|
742
|
-
|
|
743
|
-
附带描述
|
|
744
|
-
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
|
-
垂直方向
|
|
750
|
-
|
|
751
|
-
#### API
|
|
752
|
-
|
|
753
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd steps](https://ant.design/components/steps-cn) 查看更多 API
|
|
754
|
-
|
|
755
|
-
|
|
756
|
-
## antd API
|
|
757
|
-
|
|
758
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
759
|
-
|
|
760
|
-
### Steps
|
|
761
|
-
|
|
762
|
-
整体步骤条。
|
|
763
|
-
|
|
764
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
765
|
-
|--------|--------|--------|--------|--------|
|
|
766
|
-
| className | 步骤条类名 | string | - | |
|
|
767
|
-
| current | 指定当前步骤,从 0 开始记数。在子 Step 元素中,可以通过 | number | 0 | |
|
|
768
|
-
| direction | 指定步骤条方向。目前支持水平( | string | horizontal | |
|
|
769
|
-
| initial | 起始序号,从 0 开始记数 | number | 0 | |
|
|
770
|
-
| labelPlacement | 指定标签放置位置,默认水平放图标右侧,可选 | string | horizontal | |
|
|
771
|
-
| percent | 当前 | number | - | 4.5.0 |
|
|
772
|
-
| progressDot | 点状步骤条,可以设置为一个 function,labelPlacement 将强制为 | boolean | (iconDot, {index, status, title, description}) => ReactNode | false | |
|
|
773
|
-
| responsive | 当屏幕宽度小于 | boolean | true | |
|
|
774
|
-
| size | 指定大小,目前支持普通( | string | default | |
|
|
775
|
-
| status | 指定当前步骤的状态,可选 | string | process | |
|
|
776
|
-
| type | 步骤条类型,可选 | string | default | inline: 5.0 |
|
|
777
|
-
| onChange | 点击切换步骤时触发 | (current) => void | - | |
|
|
778
|
-
| items | 配置选项卡内容 | | [] | 4.24.0 |
|
|
779
|
-
|
|
780
|
-
|
|
781
|
-
### `type="inline"`
|
|
782
|
-
|
|
783
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
784
|
-
|--------|--------|--------|--------|--------|
|
|
785
|
-
| className | 步骤条类名 | string | - | |
|
|
786
|
-
| current | 指定当前步骤,从 0 开始记数。在子 Step 元素中,可以通过 | number | 0 | |
|
|
787
|
-
| initial | 起始序号,从 0 开始记数 | number | 0 | |
|
|
788
|
-
| status | 指定当前步骤的状态,可选 | string | process | |
|
|
789
|
-
| onChange | 点击切换步骤时触发 | (current) => void | - | |
|
|
790
|
-
| items | 配置选项卡内容,不支持 | | [] | 4.24.0 |
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
### StepItem
|
|
794
|
-
|
|
795
|
-
步骤条内的每一个步骤。
|
|
796
|
-
|
|
797
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
798
|
-
|--------|--------|--------|--------|--------|
|
|
799
|
-
| description | 步骤的详情描述,可选 | ReactNode | - | |
|
|
800
|
-
| disabled | 禁用点击 | boolean | false | |
|
|
801
|
-
| icon | 步骤图标的类型,可选 | ReactNode | - | |
|
|
802
|
-
| status | 指定状态。当不配置该属性时,会使用 Steps 的 | string | wait | |
|
|
803
|
-
| subTitle | 子标题 | ReactNode | - | |
|
|
804
|
-
| title | 标题 | ReactNode | - | |
|
|
805
|
-
|
|
806
|
-
|
|
807
|
-
|
|
808
|
-
|
|
809
|
-
<DemoTitle title="Statistic" desc="展示统计数值"></DemoTitle>
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
|
|
813
|
-
|
|
814
|
-
|
|
815
|
-
示例
|
|
816
|
-
|
|
817
|
-
<Install>Statistic</Install>
|
|
818
|
-
|
|
819
|
-
#### 统计数值示例
|
|
820
|
-
|
|
821
|
-
以下是此组件的示例和变体
|
|
822
|
-
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
通过前缀和后缀添加元素
|
|
828
|
-
|
|
829
|
-
#### API
|
|
830
|
-
|
|
831
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd statistic](https://ant.design/components/statistic-cn) 查看更多 API
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
## antd API
|
|
835
|
-
|
|
836
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
837
|
-
|
|
838
|
-
#### Statistic
|
|
839
|
-
|
|
840
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
841
|
-
|--------|--------|--------|--------|--------|
|
|
842
|
-
| decimalSeparator | 设置小数点 | string | . | |
|
|
843
|
-
| formatter | 自定义数值展示 | (value) => ReactNode | - | |
|
|
844
|
-
| groupSeparator | 设置千分位标识符 | string | , | |
|
|
845
|
-
| loading | 数值是否加载中 | boolean | false | 4.8.0 |
|
|
846
|
-
| precision | 数值精度 | number | - | |
|
|
847
|
-
| prefix | 设置数值的前缀 | ReactNode | - | |
|
|
848
|
-
| suffix | 设置数值的后缀 | ReactNode | - | |
|
|
849
|
-
| title | 数值的标题 | ReactNode | - | |
|
|
850
|
-
| value | 数值内容 | string | number | - | |
|
|
851
|
-
| valueStyle | 设置数值区域的样式 | CSSProperties | - | |
|
|
852
|
-
|
|
853
|
-
|
|
854
|
-
#### Statistic.Countdown <Badge type="error">Deprecated</Badge>
|
|
855
|
-
|
|
856
|
-
<Antd component="Alert" message="版本 >= 5.25.0 时请使用 Statistic.Timer 作为替代方案。" type="warning" banner="true"></Antd>
|
|
857
|
-
|
|
858
|
-
<!-- prettier-ignore -->
|
|
859
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
860
|
-
|--------|--------|--------|--------|--------|
|
|
861
|
-
| format | 格式化倒计时展示,参考 | string | HH:mm:ss | |
|
|
862
|
-
| prefix | 设置数值的前缀 | ReactNode | - | |
|
|
863
|
-
| suffix | 设置数值的后缀 | ReactNode | - | |
|
|
864
|
-
| title | 数值的标题 | ReactNode | - | |
|
|
865
|
-
| value | 数值内容 | number | - | |
|
|
866
|
-
| valueStyle | 设置数值区域的样式 | CSSProperties | - | |
|
|
867
|
-
| onFinish | 倒计时完成时触发 | () => void | - | |
|
|
868
|
-
| onChange | 倒计时时间变化时触发 | (value: number) => void | - | |
|
|
869
|
-
|
|
870
|
-
|
|
871
|
-
#### Statistic.Timer <Badge>5.25.0+</Badge>
|
|
872
|
-
|
|
873
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
874
|
-
|--------|--------|--------|--------|--------|
|
|
875
|
-
| type | 计时类型,正计时或者倒计时 | countdown | - | |
|
|
876
|
-
| format | 格式化倒计时展示,参考 | string | HH:mm:ss | |
|
|
877
|
-
| prefix | 设置数值的前缀 | ReactNode | - | |
|
|
878
|
-
| suffix | 设置数值的后缀 | ReactNode | - | |
|
|
879
|
-
| title | 数值的标题 | ReactNode | - | |
|
|
880
|
-
| value | 数值内容 | number | - | |
|
|
881
|
-
| valueStyle | 设置数值区域的样式 | CSSProperties | - | |
|
|
882
|
-
| onFinish | 倒计时完成时触发, 指定为 | () => void | - | |
|
|
883
|
-
| onChange | 倒计时时间变化时触发 | (value: number) => void | - | |
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
|
|
887
|
-
|
|
888
|
-
<DemoTitle title="Spinner" desc="指示页面或区块的加载中状态"></DemoTitle>
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
|
|
892
|
-
|
|
893
|
-
|
|
894
|
-
示例
|
|
895
|
-
|
|
896
|
-
<Install>Spinner</Install>
|
|
897
|
-
|
|
898
|
-
#### 加载中示例
|
|
899
|
-
|
|
900
|
-
以下是加载中组件的示例和变体
|
|
901
|
-
|
|
902
|
-
## 代码演示
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
|
|
908
|
-
支持操作和进度展示
|
|
909
|
-
|
|
910
|
-
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
将现有容器变为加载状态
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
支持自定义指示符
|
|
919
|
-
|
|
920
|
-
|
|
921
|
-
#### API
|
|
922
|
-
|
|
923
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd spin](https://ant.design/components/spin-cn) 查看更多 API
|
|
924
|
-
|
|
925
|
-
|
|
926
|
-
|
|
927
|
-
<DemoTitle title="Slider" desc="滑动型输入器,展示当前值和可选范围。"></DemoTitle>
|
|
928
|
-
|
|
929
|
-
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
示例
|
|
934
|
-
|
|
935
|
-
<Install>Slider</Install>
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
|
|
940
|
-
|
|
941
|
-
反向
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
范围选择
|
|
948
|
-
|
|
949
|
-
#### API
|
|
950
|
-
|
|
951
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd slider](https://ant.design/components/slider-cn) 查看更多 API
|
|
952
|
-
|
|
953
|
-
|
|
954
|
-
## antd API
|
|
955
|
-
|
|
956
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
957
|
-
|
|
958
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
959
|
-
|--------|--------|--------|--------|--------|
|
|
960
|
-
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
961
|
-
| classNames | 语义化结构 className | | - | 5.10.0 |
|
|
962
|
-
| defaultValue | 设置初始取值。当 | number | [number, number] | 0 | [0, 0] | |
|
|
963
|
-
| disabled | 值为 true 时,滑块为禁用状态 | boolean | false | |
|
|
964
|
-
| keyboard | 支持使用键盘操作 handler | boolean | true | 5.2.0+ |
|
|
965
|
-
| dots | 是否只能拖拽到刻度上 | boolean | false | |
|
|
966
|
-
| included | marks | boolean | true | |
|
|
967
|
-
| marks | 刻度标记,key 的类型必须为 | object | { number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } } | |
|
|
968
|
-
| max | 最大值 | number | 100 | |
|
|
969
|
-
| min | 最小值 | number | 0 | |
|
|
970
|
-
| range | 双滑块模式 | boolean | | false | |
|
|
971
|
-
| reverse | 反向坐标轴 | boolean | false | |
|
|
972
|
-
| step | 步长,取值必须大于 0,并且可被 (max - min) 整除。当 | number | null | 1 | |
|
|
973
|
-
| styles | 语义化结构 styles | | - | 5.10.0 |
|
|
974
|
-
| tooltip | 设置 Tooltip 相关属性 | | - | 4.23.0 |
|
|
975
|
-
| value | 设置当前取值。当 | number | [number, number] | - | |
|
|
976
|
-
| vertical | 值为 true 时,Slider 为垂直方向 | boolean | false | |
|
|
977
|
-
| onChangeComplete | 与 | (value) => void | - | |
|
|
978
|
-
| onChange | 当 Slider 的值发生改变时,会触发 onChange 事件,并把改变后的值作为参数传入 | (value) => void | - | |
|
|
979
|
-
|
|
980
|
-
|
|
981
|
-
### range
|
|
982
|
-
|
|
983
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
984
|
-
|--------|--------|--------|--------|--------|
|
|
985
|
-
| draggableTrack | 范围刻度是否可被拖拽 | boolean | false | |
|
|
986
|
-
| editable | 启动动态增减节点,不能和 | boolean | false | 5.20.0 |
|
|
987
|
-
| minCount | 配置 | number | 0 | 5.20.0 |
|
|
988
|
-
| maxCount | 配置 | number | - | 5.20.0 |
|
|
989
|
-
|
|
990
|
-
|
|
991
|
-
### tooltip
|
|
992
|
-
|
|
993
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
994
|
-
|--------|--------|--------|--------|--------|
|
|
995
|
-
| autoAdjustOverflow | 是否自动调整弹出位置 | boolean | true | 5.8.0 |
|
|
996
|
-
| open | 值为 true 时,Tooltip 将会始终显示;否则始终不显示,哪怕在拖拽及移入时 | boolean | - | 4.23.0 |
|
|
997
|
-
| placement | 设置 Tooltip 展示位置。参考 | string | - | 4.23.0 |
|
|
998
|
-
| getPopupContainer | Tooltip 渲染父节点,默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
|
|
999
|
-
| formatter | Slider 会把当前值传给 | value => ReactNode | null | IDENTITY | 4.23.0 |
|
|
1000
|
-
|
|
1001
|
-
|
|
1002
|
-
## 方法
|
|
1003
|
-
|
|
1004
|
-
| 名称 | 描述 | 版本 |
|
|
1005
|
-
|--------|--------|--------|
|
|
1006
|
-
| blur() | 移除焦点 | |
|
|
1007
|
-
| focus() | 获取焦点 | |
|
|
1008
|
-
|
|
1009
|
-
|
|
1010
|
-
|
|
1011
|
-
|
|
1012
|
-
<DemoTitle title="Skeleton" desc="在内容加载时提供占位图形展示。"></DemoTitle>
|
|
1013
|
-
|
|
1014
|
-
|
|
1015
|
-
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
示例
|
|
1019
|
-
|
|
1020
|
-
<Install>Skeleton</Install>
|
|
1021
|
-
|
|
1022
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd skeleton](https://ant.design/components/skeleton-cn) 查看更多 API
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
## antd API
|
|
1026
|
-
|
|
1027
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
1028
|
-
|
|
1029
|
-
### Skeleton
|
|
1030
|
-
|
|
1031
|
-
| 属性 | 说明 | 类型 | 默认值 |
|
|
1032
|
-
|--------|--------|--------|--------|
|
|
1033
|
-
| active | 是否展示动画效果 | boolean | false |
|
|
1034
|
-
| avatar | 是否显示头像占位图 | boolean | | false |
|
|
1035
|
-
| loading | 为 true 时,显示占位图。反之则直接展示子组件 | boolean | - |
|
|
1036
|
-
| paragraph | 是否显示段落占位图 | boolean | | true |
|
|
1037
|
-
| round | 为 true 时,段落和标题显示圆角 | boolean | false |
|
|
1038
|
-
| title | 是否显示标题占位图 | boolean | | true |
|
|
1039
|
-
|
|
1040
|
-
|
|
1041
|
-
### SkeletonAvatarProps
|
|
1042
|
-
|
|
1043
|
-
| 属性 | 说明 | 类型 | 默认值 |
|
|
1044
|
-
|--------|--------|--------|--------|
|
|
1045
|
-
| active | 是否展示动画效果,仅在单独使用头像骨架时生效 | boolean | false |
|
|
1046
|
-
| shape | 指定头像的形状 | circle | - |
|
|
1047
|
-
| size | 设置头像占位图的大小 | number | | - |
|
|
1048
|
-
|
|
1049
|
-
|
|
1050
|
-
### SkeletonTitleProps
|
|
1051
|
-
|
|
1052
|
-
| 属性 | 说明 | 类型 | 默认值 |
|
|
1053
|
-
|--------|--------|--------|--------|
|
|
1054
|
-
| width | 设置标题占位图的宽度 | number | string | - |
|
|
1055
|
-
|
|
1056
|
-
|
|
1057
|
-
### SkeletonParagraphProps
|
|
1058
|
-
|
|
1059
|
-
| 属性 | 说明 | 类型 | 默认值 |
|
|
1060
|
-
|--------|--------|--------|--------|
|
|
1061
|
-
| rows | 设置段落占位图的行数 | number | - |
|
|
1062
|
-
| width | 设置段落占位图的宽度,若为数组时则为对应的每行宽度,反之则是最后一行的宽度 | number | string | Array<number | string> | - |
|
|
1063
|
-
|
|
1064
|
-
|
|
1065
|
-
### SkeletonButtonProps
|
|
1066
|
-
|
|
1067
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1068
|
-
|--------|--------|--------|--------|--------|
|
|
1069
|
-
| active | 是否展示动画效果 | boolean | false | |
|
|
1070
|
-
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | 4.17.0 |
|
|
1071
|
-
| shape | 指定按钮的形状 | circle | - | |
|
|
1072
|
-
| size | 设置按钮的大小 | large | - | |
|
|
1073
|
-
|
|
1074
|
-
|
|
1075
|
-
### SkeletonInputProps
|
|
1076
|
-
|
|
1077
|
-
| 属性 | 说明 | 类型 | 默认值 |
|
|
1078
|
-
|--------|--------|--------|--------|
|
|
1079
|
-
| active | 是否展示动画效果 | boolean | false |
|
|
1080
|
-
| size | 设置输入框的大小 | large | - |
|
|
1081
|
-
|
|
1082
|
-
|
|
1083
|
-
|
|
1084
|
-
|
|
1085
|
-
<DemoTitle title="Select" desc="下拉选择器"></DemoTitle>
|
|
1086
|
-
|
|
1087
|
-
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
|
|
1091
|
-
示例
|
|
1092
|
-
|
|
1093
|
-
<Install>Select</Install>
|
|
1094
|
-
|
|
1095
|
-
|
|
1096
|
-
|
|
1097
|
-
|
|
1098
|
-
|
|
1099
|
-
多选情况
|
|
1100
|
-
|
|
1101
|
-
#### FAQs
|
|
1102
|
-
|
|
1103
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd select](https://ant.design/components/select-cn) 查看更多 API
|
|
1104
|
-
|
|
1105
|
-
|
|
1106
|
-
## antd API
|
|
1107
|
-
|
|
1108
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
1109
|
-
|
|
1110
|
-
### Select props
|
|
1111
|
-
|
|
1112
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1113
|
-
|--------|--------|--------|--------|--------|
|
|
1114
|
-
| allowClear | 自定义清除按钮 | boolean | { clearIcon?: ReactNode } | false | 5.8.0: 支持对象类型 |
|
|
1115
|
-
| autoClearSearchValue | 是否在选中项后清空搜索框,只在 | boolean | true | |
|
|
1116
|
-
| autoFocus | 默认获取焦点 | boolean | false | |
|
|
1117
|
-
| classNames | 语义化结构 class | | - | 5.25.0 |
|
|
1118
|
-
| defaultActiveFirstOption | 是否默认高亮第一个选项 | boolean | true | |
|
|
1119
|
-
| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |
|
|
1120
|
-
| defaultValue | 指定默认选中的条目 | string | string[] | | - | |
|
|
1121
|
-
| disabled | 是否禁用 | boolean | false | |
|
|
1122
|
-
| | 下拉菜单的 className 属性,使用 | string | - | 4.23.0 |
|
|
1123
|
-
| popupMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 | boolean | number | true | 5.5.0 |
|
|
1124
|
-
| | 自定义下拉框内容,使用 | (originNode: ReactNode) => ReactNode | - | |
|
|
1125
|
-
| popupRender | 自定义下拉框内容 | (originNode: ReactNode) => ReactNode | - | |
|
|
1126
|
-
| | 下拉菜单的 style 属性,使用 | CSSProperties | - | |
|
|
1127
|
-
| fieldNames | 自定义节点 label、value、options、groupLabel 的字段 | object | { label: | 4.17.0( |
|
|
1128
|
-
| filterOption | 是否根据输入项进行筛选。当其为一个函数时,会接收 | boolean | function(inputValue, option) | true | |
|
|
1129
|
-
| filterSort | 搜索时对筛选结果项的排序函数, 类似 | (optionA: Option, optionB: Option, info: { searchValue: string }) => number | - | searchValue |
|
|
1130
|
-
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。 | function(triggerNode) | () => document.body | |
|
|
1131
|
-
| labelInValue | 是否把每个选项的 label 包装到 value 中,会把 Select 的 value 类型从 | boolean | false | |
|
|
1132
|
-
| listHeight | 设置弹窗滚动高度 | number | 256 | |
|
|
1133
|
-
| loading | 加载中状态 | boolean | false | |
|
|
1134
|
-
| maxCount | 指定可选中的最多 items 数量,仅在 | number | - | 5.13.0 |
|
|
1135
|
-
| maxTagCount | 最多显示多少个 tag,响应式模式会对性能产生损耗 | number | | - | responsive: 4.10 |
|
|
1136
|
-
| maxTagPlaceholder | 隐藏 tag 时显示的内容 | ReactNode | function(omittedValues) | - | |
|
|
1137
|
-
| maxTagTextLength | 最大显示的 tag 文本长度 | number | - | |
|
|
1138
|
-
| menuItemSelectedIcon | 自定义多选时当前选中的条目图标 | ReactNode | - | |
|
|
1139
|
-
| mode | 设置 Select 的模式为多选或标签 | multiple | - | |
|
|
1140
|
-
| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | Not Found | |
|
|
1141
|
-
| open | 是否展开下拉菜单 | boolean | - | |
|
|
1142
|
-
| optionFilterProp | 搜索时过滤对应的 | string | value | |
|
|
1143
|
-
| optionLabelProp | 回填到选择框的 Option 的属性值,默认是 Option 的子元素。比如在子元素需要高亮效果时,此值可以设为 | string | children | |
|
|
1144
|
-
| options | 数据化配置选项内容,相比 jsx 定义会获得更好的渲染性能 | { label, value }[] | - | |
|
|
1145
|
-
| optionRender | 自定义渲染下拉选项 | (option: FlattenOptionData<BaseOptionType> , info: { index: number }) => React.ReactNode | - | 5.11.0 |
|
|
1146
|
-
| placeholder | 选择框默认文本 | string | - | |
|
|
1147
|
-
| placement | 选择框弹出的位置 | bottomLeft | bottomLeft | |
|
|
1148
|
-
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
|
|
1149
|
-
| removeIcon | 自定义的多选框清除图标 | ReactNode | - | |
|
|
1150
|
-
| searchValue | 控制搜索文本 | string | - | |
|
|
1151
|
-
| showSearch | 配置是否可搜索 | boolean | 单选为 false,多选为 true | |
|
|
1152
|
-
| size | 选择框大小 | large | middle | |
|
|
1153
|
-
| status | 设置校验状态 | 'error' | 'warning' | - | 4.19.0 |
|
|
1154
|
-
| suffixIcon | 自定义的选择框后缀图标。以防止图标被用于其他交互,替换的图标默认不会响应展开、收缩事件,可以通过添加 | ReactNode | <DownOutlined /> | |
|
|
1155
|
-
| styles | 语义化结构 style | | - | 5.25.0 |
|
|
1156
|
-
| tagRender | 自定义 tag 内容 render,仅在 | (props) => ReactNode | - | |
|
|
1157
|
-
| labelRender | 自定义当前选中的 label 内容 render (LabelInValueType的定义见 | (props: LabelInValueType) => ReactNode | - | 5.15.0 |
|
|
1158
|
-
| tokenSeparators | 自动分词的分隔符,仅在 | string[] | - | |
|
|
1159
|
-
| value | 指定当前选中的条目,多选时为一个数组。(value 数组引用未变化时,Select 不会更新) | string | string[] | | - | |
|
|
1160
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 | |
|
|
1161
|
-
| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 |
|
|
1162
|
-
| onBlur | 失去焦点时回调 | function | - | |
|
|
1163
|
-
| onChange | 选中 option,或 input 的 value 变化时,调用此函数 | function(value, option:Option | Array<Option>) | - | |
|
|
1164
|
-
| onClear | 清除内容时回调 | function | - | 4.6.0 |
|
|
1165
|
-
| onDeselect | 取消选中时调用,参数为选中项的 value (或 key) 值,仅在 | function(value: string | number | LabeledValue) | - | |
|
|
1166
|
-
| | 展开下拉菜单的回调,使用 | (open: boolean) => void | - | |
|
|
1167
|
-
| onOpenChange | 展开下拉菜单的回调 | (open: boolean) => void | - | |
|
|
1168
|
-
| onFocus | 获得焦点时回调 | (event: FocusEvent) => void | - | |
|
|
1169
|
-
| onInputKeyDown | 按键按下时回调 | (event: KeyboardEvent) => void | - | |
|
|
1170
|
-
| onPopupScroll | 下拉列表滚动时的回调 | (event: UIEvent) => void | - | |
|
|
1171
|
-
| onSearch | 文本框值变化时回调 | function(value: string) | - | |
|
|
1172
|
-
| onSelect | 被选中时调用,参数为选中项的 value (或 key) 值 | function(value: string | number | LabeledValue, option: Option) | - | |
|
|
1173
|
-
|
|
1174
|
-
|
|
1175
|
-
注意,如果发现下拉菜单跟随页面滚动,或者需要在其他弹层中触发 Select,请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentElement}` 将下拉弹层渲染节点固定在触发器的父元素中。
|
|
1176
|
-
|
|
1177
|
-
### Select Methods
|
|
1178
|
-
|
|
1179
|
-
| 名称 | 说明 | 版本 |
|
|
1180
|
-
|--------|--------|--------|
|
|
1181
|
-
| blur() | 取消焦点 | |
|
|
1182
|
-
| focus() | 获取焦点 | |
|
|
1183
|
-
|
|
1184
|
-
|
|
1185
|
-
### Option props
|
|
1186
|
-
|
|
1187
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1188
|
-
|--------|--------|--------|--------|--------|
|
|
1189
|
-
| className | Option 器类名 | string | - | |
|
|
1190
|
-
| disabled | 是否禁用 | boolean | false | |
|
|
1191
|
-
| title | 选项上的原生 title 提示 | string | - | |
|
|
1192
|
-
| value | 默认根据此属性值进行筛选 | string | number | - | |
|
|
1193
|
-
|
|
1194
|
-
|
|
1195
|
-
### OptGroup props
|
|
1196
|
-
|
|
1197
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1198
|
-
|--------|--------|--------|--------|--------|
|
|
1199
|
-
| key | Key | string | - | |
|
|
1200
|
-
| label | 组名 | React.ReactNode | - | |
|
|
1201
|
-
| className | Option 器类名 | string | - | |
|
|
1202
|
-
| title | 选项上的原生 title 提示 | string | - | |
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
<DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。"></DemoTitle>
|
|
1208
|
-
|
|
1209
|
-
|
|
1210
|
-
|
|
1211
|
-
|
|
1212
|
-
|
|
1213
|
-
示例
|
|
1214
|
-
|
|
1215
|
-
<Install>Result</Install>
|
|
1216
|
-
|
|
1217
|
-
#### 结果示例
|
|
1218
|
-
|
|
1219
|
-
以下是结果组件的示例和变体
|
|
1220
|
-
|
|
1221
|
-
|
|
1222
|
-
|
|
1223
|
-
|
|
1224
|
-
|
|
1225
|
-
失败
|
|
1226
|
-
|
|
1227
|
-
|
|
1228
|
-
|
|
1229
|
-
|
|
1230
|
-
页面错误
|
|
1231
|
-
|
|
1232
|
-
|
|
1233
|
-
|
|
1234
|
-
|
|
1235
|
-
进行中
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
1239
|
-
|
|
1240
|
-
404
|
|
1241
|
-
|
|
1242
|
-
|
|
1243
|
-
|
|
1244
|
-
|
|
1245
|
-
网络错误
|
|
1246
|
-
|
|
1247
|
-
## API
|
|
1248
|
-
|
|
1249
|
-
| <div><span class="lang-en">Attribute</span><span class="lang-cn">属性名</span></div> | <div><span class="lang-en">Description</span><span class="lang-cn">描述</span></div> | <div><span class="lang-en">Type</span><span class="lang-cn">类型</span></div> | <div><span class="lang-en">Default</span><span class="lang-cn">默认值</span></div> |
|
|
1250
|
-
|--------|--------|--------|--------|
|
|
1251
|
-
| texture | <div><span class="lang-en"></span><span class="lang-cn">是否显示纹理</span></div> | boolean | false |
|
|
1252
|
-
|
|
1253
|
-
|
|
1254
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd result](https://ant.design/components/result-cn) 查看更多 API
|
|
1255
|
-
|
|
1256
|
-
|
|
1257
|
-
## antd API
|
|
1258
|
-
|
|
1259
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
1260
|
-
|
|
1261
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
1262
|
-
|--------|--------|--------|--------|
|
|
1263
|
-
| extra | 操作区 | ReactNode | - |
|
|
1264
|
-
| icon | 自定义 icon | ReactNode | - |
|
|
1265
|
-
| status | 结果的状态,决定图标和颜色 | success | info |
|
|
1266
|
-
| subTitle | subTitle 文字 | ReactNode | - |
|
|
1267
|
-
| title | title 文字 | ReactNode | - |
|
|
1268
|
-
|
|
1269
|
-
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
<DemoTitle title="RadioButton" desc="用于在多个备选项中选中单个状态。"></DemoTitle>
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
示例
|
|
1279
|
-
|
|
1280
|
-
<Install>RadioButton</Install>
|
|
1281
|
-
|
|
1282
|
-
|
|
1283
|
-
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
不同尺寸
|
|
1287
|
-
|
|
1288
|
-
|
|
1289
|
-
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
禁用状态
|
|
1293
|
-
|
|
1294
|
-
#### API
|
|
1295
|
-
|
|
1296
|
-
| <div><span class="lang-en">Attribute</span><span class="lang-cn">属性名</span></div> | <div><span class="lang-en">Description</span><span class="lang-cn">描述</span></div> | <div><span class="lang-en">Type</span><span class="lang-cn">类型</span></div> | <div><span class="lang-en">Default</span><span class="lang-cn">默认值</span></div> |
|
|
1297
|
-
|--------|--------|--------|--------|
|
|
1298
|
-
| bordered | <div><span class="lang-en">border</span><span class="lang-cn">边框</span></div> | boolean | false |
|
|
1299
|
-
| ghost | <div><span class="lang-en">ghost</span><span class="lang-cn">按钮背景色类型</span></div> | boolean | true |
|
|
1300
|
-
| gap | <div><span class="lang-en">gap</span><span class="lang-cn">间距</span></div> | number | 12 px |
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd radio](https://ant.design/components/radio-cn) 查看更多 API
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
## antd API
|
|
1307
|
-
|
|
1308
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
1309
|
-
|
|
1310
|
-
### Radio/Radio.Button
|
|
1311
|
-
|
|
1312
|
-
<!-- prettier-ignore -->
|
|
1313
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
1314
|
-
|--------|--------|--------|--------|
|
|
1315
|
-
| autoFocus | 自动获取焦点 | boolean | false |
|
|
1316
|
-
| checked | 指定当前是否选中 | boolean | false |
|
|
1317
|
-
| defaultChecked | 初始是否选中 | boolean | false |
|
|
1318
|
-
| disabled | 禁用 Radio | boolean | false |
|
|
1319
|
-
| value | 根据 value 进行比较,判断是否选中 | any | - |
|
|
1320
|
-
|
|
1321
|
-
|
|
1322
|
-
### Radio.Group
|
|
1323
|
-
|
|
1324
|
-
单选框组合,用于包裹一组 `Radio`。
|
|
1325
|
-
|
|
1326
|
-
<!-- prettier-ignore -->
|
|
1327
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1328
|
-
|--------|--------|--------|--------|--------|
|
|
1329
|
-
| buttonStyle | RadioButton 的风格样式,目前有描边和填色两种风格 | outline | outline | | |
|
|
1330
|
-
| defaultValue | 默认选中的值 | any | - | | |
|
|
1331
|
-
| disabled | 禁选所有子单选器 | boolean | false | | |
|
|
1332
|
-
| name | RadioGroup 下所有 | string | - | | |
|
|
1333
|
-
| options | 以配置形式设置子元素 | string[] | number[] | Array< | - | | |
|
|
1334
|
-
| optionType | 用于设置 Radio | default | default | 4.4.0 | |
|
|
1335
|
-
| size | 大小,只对按钮样式生效 | large | - | | |
|
|
1336
|
-
| value | 用于设置当前选中的值 | any | - | | |
|
|
1337
|
-
| block | 将 RadioGroup 宽度调整为其父宽度的选项 | boolean | false | 5.21.0 | |
|
|
1338
|
-
| onChange | 选项变化时的回调函数 | function(e:Event) | - | | |
|
|
1339
|
-
|
|
1340
|
-
|
|
1341
|
-
### CheckboxOptionType
|
|
1342
|
-
|
|
1343
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1344
|
-
|--------|--------|--------|--------|--------|
|
|
1345
|
-
| label | 用于作为 Radio 选项展示的文本 | string | - | 4.4.0 |
|
|
1346
|
-
| value | 关联 Radio 选项的值 | string | - | 4.4.0 |
|
|
1347
|
-
| style | 应用到 Radio 选项的 style | React.CSSProperties | - | 4.4.0 |
|
|
1348
|
-
| className | Radio 选项的类名 | string | - | 5.25.0 |
|
|
1349
|
-
| disabled | 指定 Radio 选项是否要禁用 | boolean | false | 4.4.0 |
|
|
1350
|
-
| title | 添加 Title 属性值 | string | - | 4.4.0 |
|
|
1351
|
-
| id | 添加 Radio Id 属性值 | string | - | 4.4.0 |
|
|
1352
|
-
| onChange | 当 Radio Group 的值发送改变时触发 | (e: CheckboxChangeEvent) => void; | - | 4.4.0 |
|
|
1353
|
-
| required | 指定 Radio 选项是否必填 | boolean | false | 4.4.0 |
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
## 方法
|
|
1357
|
-
|
|
1358
|
-
### Radio
|
|
1359
|
-
|
|
1360
|
-
| 名称 | 描述 |
|
|
1361
|
-
|--------|--------|
|
|
1362
|
-
| blur() | 移除焦点 |
|
|
1363
|
-
| focus() | 获取焦点 |
|
|
1364
|
-
|
|
1365
|
-
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
<DemoTitle title="Radio" desc="用于在多个备选项中选中单个状态。"></DemoTitle>
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
示例
|
|
1375
|
-
|
|
1376
|
-
<Install>Radio</Install>
|
|
1377
|
-
|
|
1378
|
-
#### API
|
|
1379
|
-
|
|
1380
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd radio](https://ant.design/components/radio-cn) 查看更多 API
|
|
1381
|
-
|
|
1382
|
-
|
|
1383
|
-
## antd API
|
|
1384
|
-
|
|
1385
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
1386
|
-
|
|
1387
|
-
### Radio/Radio.Button
|
|
1388
|
-
|
|
1389
|
-
<!-- prettier-ignore -->
|
|
1390
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
1391
|
-
|--------|--------|--------|--------|
|
|
1392
|
-
| autoFocus | 自动获取焦点 | boolean | false |
|
|
1393
|
-
| checked | 指定当前是否选中 | boolean | false |
|
|
1394
|
-
| defaultChecked | 初始是否选中 | boolean | false |
|
|
1395
|
-
| disabled | 禁用 Radio | boolean | false |
|
|
1396
|
-
| value | 根据 value 进行比较,判断是否选中 | any | - |
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
### Radio.Group
|
|
1400
|
-
|
|
1401
|
-
单选框组合,用于包裹一组 `Radio`。
|
|
1402
|
-
|
|
1403
|
-
<!-- prettier-ignore -->
|
|
1404
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1405
|
-
|--------|--------|--------|--------|--------|
|
|
1406
|
-
| buttonStyle | RadioButton 的风格样式,目前有描边和填色两种风格 | outline | outline | | |
|
|
1407
|
-
| defaultValue | 默认选中的值 | any | - | | |
|
|
1408
|
-
| disabled | 禁选所有子单选器 | boolean | false | | |
|
|
1409
|
-
| name | RadioGroup 下所有 | string | - | | |
|
|
1410
|
-
| options | 以配置形式设置子元素 | string[] | number[] | Array< | - | | |
|
|
1411
|
-
| optionType | 用于设置 Radio | default | default | 4.4.0 | |
|
|
1412
|
-
| size | 大小,只对按钮样式生效 | large | - | | |
|
|
1413
|
-
| value | 用于设置当前选中的值 | any | - | | |
|
|
1414
|
-
| block | 将 RadioGroup 宽度调整为其父宽度的选项 | boolean | false | 5.21.0 | |
|
|
1415
|
-
| onChange | 选项变化时的回调函数 | function(e:Event) | - | | |
|
|
1416
|
-
|
|
1417
|
-
|
|
1418
|
-
### CheckboxOptionType
|
|
1419
|
-
|
|
1420
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1421
|
-
|--------|--------|--------|--------|--------|
|
|
1422
|
-
| label | 用于作为 Radio 选项展示的文本 | string | - | 4.4.0 |
|
|
1423
|
-
| value | 关联 Radio 选项的值 | string | - | 4.4.0 |
|
|
1424
|
-
| style | 应用到 Radio 选项的 style | React.CSSProperties | - | 4.4.0 |
|
|
1425
|
-
| className | Radio 选项的类名 | string | - | 5.25.0 |
|
|
1426
|
-
| disabled | 指定 Radio 选项是否要禁用 | boolean | false | 4.4.0 |
|
|
1427
|
-
| title | 添加 Title 属性值 | string | - | 4.4.0 |
|
|
1428
|
-
| id | 添加 Radio Id 属性值 | string | - | 4.4.0 |
|
|
1429
|
-
| onChange | 当 Radio Group 的值发送改变时触发 | (e: CheckboxChangeEvent) => void; | - | 4.4.0 |
|
|
1430
|
-
| required | 指定 Radio 选项是否必填 | boolean | false | 4.4.0 |
|
|
1431
|
-
|
|
1432
|
-
|
|
1433
|
-
## 方法
|
|
1434
|
-
|
|
1435
|
-
### Radio
|
|
1436
|
-
|
|
1437
|
-
| 名称 | 描述 |
|
|
1438
|
-
|--------|--------|
|
|
1439
|
-
| blur() | 移除焦点 |
|
|
1440
|
-
| focus() | 获取焦点 |
|
|
1441
|
-
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
<DemoTitle title="Progress" desc="用于指示任务的完成进度"></DemoTitle>
|
|
1446
|
-
|
|
1447
|
-
|
|
1448
|
-
|
|
1449
|
-
|
|
1450
|
-
|
|
1451
|
-
示例
|
|
1452
|
-
|
|
1453
|
-
<Install>
|
|
1454
|
-
import { Progress } from 'antd';
|
|
1455
|
-
</Install>
|
|
1456
|
-
|
|
1457
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd progress](https://ant.design/components/progress-cn) 查看更多 API
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
## antd API
|
|
1461
|
-
|
|
1462
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
1463
|
-
|
|
1464
|
-
各类型共用的属性。
|
|
1465
|
-
|
|
1466
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1467
|
-
|--------|--------|--------|--------|--------|
|
|
1468
|
-
| format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent + | - |
|
|
1469
|
-
| percent | 百分比 | number | 0 | - |
|
|
1470
|
-
| showInfo | 是否显示进度数值或状态图标 | boolean | true | - |
|
|
1471
|
-
| status | 状态,可选: | string | - | - |
|
|
1472
|
-
| strokeColor | 进度条的色彩 | string | - | - |
|
|
1473
|
-
| strokeLinecap | 进度条的样式 | round | round | - |
|
|
1474
|
-
| success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - | - |
|
|
1475
|
-
| trailColor | 未完成的分段的颜色 | string | - | - |
|
|
1476
|
-
| type | 类型,可选 | string | line | - |
|
|
1477
|
-
| size | 进度条的尺寸 | number | [number | string, number] | { width: number, height: number } | "small" | "default" | "default" | 5.3.0, Object: 5.18.0 |
|
|
1478
|
-
|
|
1479
|
-
|
|
1480
|
-
### `type="line"`
|
|
1481
|
-
|
|
1482
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1483
|
-
|--------|--------|--------|--------|--------|
|
|
1484
|
-
| steps | 进度条总共步数 | number | - | - |
|
|
1485
|
-
| rounding | 用于四舍五入数值的函数 | (step: number) => number | Math.round | 5.24.0 |
|
|
1486
|
-
| strokeColor | 进度条的色彩,传入 object 时为渐变。当有 | string | string[] | { from: string; to: string; direction: string } | - | 4.21.0: |
|
|
1487
|
-
| percentPosition | 进度数值位置,传入对象, | { align: string; type: string } | { align: "end", type: "outer" } | 5.18.0 |
|
|
1488
|
-
|
|
1489
|
-
|
|
1490
|
-
### `type="circle"`
|
|
1491
|
-
|
|
1492
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1493
|
-
|--------|--------|--------|--------|--------|
|
|
1494
|
-
| steps | 进度条总共步数,传入 object 时,count 指步数,gap 指间隔大小。传 number 类型时,gap 默认为 2。 | number | { count: number, gap: number } | - | 5.16.0 |
|
|
1495
|
-
| strokeColor | 圆形进度条线的色彩,传入 object 时为渐变 | string | { number%: string } | - | - |
|
|
1496
|
-
| strokeWidth | 圆形进度条线的宽度,单位是进度条画布宽度的百分比 | number | 6 | - |
|
|
1497
|
-
|
|
1498
|
-
|
|
1499
|
-
### `type="dashboard"`
|
|
1500
|
-
|
|
1501
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1502
|
-
|--------|--------|--------|--------|--------|
|
|
1503
|
-
| steps | 进度条总共步数,传入 object 时,count 指步数,gap 指间隔大小。传 number 类型时,gap 默认为 2。 | number | { count: number, gap: number } | - | 5.16.0 |
|
|
1504
|
-
| gapDegree | 仪表盘进度条缺口角度,可取值 0 ~ 295 | number | 75 | - |
|
|
1505
|
-
| gapPosition | 仪表盘进度条缺口位置 | top | bottom | - |
|
|
1506
|
-
| strokeWidth | 仪表盘进度条线的宽度,单位是进度条画布宽度的百分比 | number | 6 | - |
|
|
1507
|
-
|
|
1508
|
-
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
<DemoTitle title="Popover" desc="点击/鼠标移入元素,弹出气泡式的卡片浮层"></DemoTitle>
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
|
|
1517
|
-
示例
|
|
1518
|
-
|
|
1519
|
-
<Install>Popover</Install>
|
|
1520
|
-
|
|
1521
|
-
#### API
|
|
1522
|
-
|
|
1523
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd popover](https://ant.design/components/popover-cn) 查看更多 API
|
|
1524
|
-
|
|
1525
|
-
|
|
1526
|
-
## antd API
|
|
1527
|
-
|
|
1528
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
1529
|
-
|
|
1530
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1531
|
-
|--------|--------|--------|--------|--------|
|
|
1532
|
-
| content | 卡片内容 | ReactNode | () => ReactNode | - | |
|
|
1533
|
-
| title | 卡片标题 | ReactNode | () => ReactNode | - | |
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
<!-- 共同的 API -->
|
|
1537
|
-
<Antd component="Alert" message="以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。" type="info" banner="true"></Antd>
|
|
1538
|
-
|
|
1539
|
-
<!-- prettier-ignore -->
|
|
1540
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1541
|
-
|--------|--------|--------|--------|--------|
|
|
1542
|
-
| align | 该值将合并到 placement 的配置中,设置参考 | object | - | |
|
|
1543
|
-
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean | { pointAtCenter: boolean } | true | 5.2.0 |
|
|
1544
|
-
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
1545
|
-
| color | 背景颜色 | string | - | 4.3.0 |
|
|
1546
|
-
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
1547
|
-
| | 关闭后是否销毁 dom | boolean | false | |
|
|
1548
|
-
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
1549
|
-
| fresh | 默认情况下,Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
1550
|
-
| getPopupContainer | 浮层渲染父节点,默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
1551
|
-
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip,单位:秒 | number | 0.1 | |
|
|
1552
|
-
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip,单位:秒 | number | 0.1 | |
|
|
1553
|
-
| | 卡片类名, 请使用 | string | - | |
|
|
1554
|
-
| | 卡片样式, 请使用 | React.CSSProperties | - | |
|
|
1555
|
-
| | 卡片内容区域的样式对象, 请使用 | React.CSSProperties | - | |
|
|
1556
|
-
| placement | 气泡框位置,可选 | string | top | |
|
|
1557
|
-
| trigger | 触发行为,可选 | string | string[] | hover | |
|
|
1558
|
-
| open | 用于手动控制浮层显隐,小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
1559
|
-
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
1560
|
-
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
1561
|
-
|
|
1562
|
-
## 注意
|
|
1563
|
-
|
|
1564
|
-
请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
|
|
1565
|
-
|
|
1566
|
-
|
|
1567
|
-
|
|
1568
|
-
<DemoTitle title="Notification" desc="用于指示任务的完成进度"></DemoTitle>
|
|
1569
|
-
|
|
1570
|
-
|
|
1571
|
-
|
|
1572
|
-
|
|
1573
|
-
|
|
1574
|
-
示例
|
|
1575
|
-
|
|
1576
|
-
<Install>Notification</Install>
|
|
1577
|
-
|
|
1578
|
-
#### 带图标的通知提醒框
|
|
1579
|
-
|
|
1580
|
-
使用 useNotification hooks 调用,支持不同类型的通知
|
|
1581
|
-
|
|
1582
|
-
|
|
1583
|
-
|
|
1584
|
-
|
|
1585
|
-
|
|
1586
|
-
提供下一步操作
|
|
1587
|
-
|
|
1588
|
-
|
|
1589
|
-
|
|
1590
|
-
|
|
1591
|
-
不同状态的通知提醒框
|
|
1592
|
-
|
|
1593
|
-
|
|
1594
|
-
|
|
1595
|
-
|
|
1596
|
-
不同弹出位置
|
|
1597
|
-
|
|
1598
|
-
#### API
|
|
1599
|
-
|
|
1600
|
-
ApiParser解析结果为空
|
|
1601
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd notification](https://ant.design/components/notification-cn) 查看更多 API
|
|
1602
|
-
|
|
1603
|
-
|
|
1604
|
-
## antd API
|
|
1605
|
-
|
|
1606
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
1607
|
-
|
|
1608
|
-
|
|
1609
|
-
- `notification.success(config)`
|
|
1610
|
-
- `notification.error(config)`
|
|
1611
|
-
- `notification.info(config)`
|
|
1612
|
-
- `notification.warning(config)`
|
|
1613
|
-
- `notification.open(config)`
|
|
1614
|
-
- `notification.destroy(key?: String)`
|
|
1615
|
-
|
|
1616
|
-
config 参数如下:
|
|
1617
|
-
|
|
1618
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1619
|
-
|--------|--------|--------|--------|--------|
|
|
1620
|
-
| actions | 自定义按钮组 | ReactNode | - | 5.24.0 |
|
|
1621
|
-
| | 自定义按钮组,请使用 | ReactNode | - | - |
|
|
1622
|
-
| className | 自定义 CSS class | string | - | - |
|
|
1623
|
-
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0:设置为 null 或 false 时隐藏关闭按钮 |
|
|
1624
|
-
| description | 通知提醒内容,必选 | ReactNode | - | - |
|
|
1625
|
-
| duration | 默认 4.5 秒后自动关闭,配置为 null 则不自动关闭 | number | 4.5 | - |
|
|
1626
|
-
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1627
|
-
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1628
|
-
| icon | 自定义图标 | ReactNode | - | - |
|
|
1629
|
-
| key | 当前通知唯一标志 | string | - | - |
|
|
1630
|
-
| message | 通知提醒标题,必选 | ReactNode | - | - |
|
|
1631
|
-
| placement | 弹出位置,可选 | string | topRight | - |
|
|
1632
|
-
| style | 自定义内联样式 | | - | - |
|
|
1633
|
-
| role | 供屏幕阅读器识别的通知内容语义,默认为 | alert | status | alert | 5.6.0 |
|
|
1634
|
-
| onClick | 点击通知时触发的回调函数 | function | - | - |
|
|
1635
|
-
| onClose | 当通知关闭时触发 | function | - | - |
|
|
1636
|
-
| props | 透传至通知 | Object | - | - |
|
|
1637
|
-
|
|
1638
|
-
|
|
1639
|
-
|
|
1640
|
-
- `notification.useNotification(config)`
|
|
1641
|
-
|
|
1642
|
-
config 参数如下:
|
|
1643
|
-
|
|
1644
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1645
|
-
|--------|--------|--------|--------|--------|
|
|
1646
|
-
| bottom | 消息从底部弹出时,距离底部的位置,单位像素 | number | 24 | |
|
|
1647
|
-
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0:设置为 null 或 false 时隐藏关闭按钮 |
|
|
1648
|
-
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body | |
|
|
1649
|
-
| placement | 弹出位置,可选 | string | topRight | |
|
|
1650
|
-
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1651
|
-
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1652
|
-
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1653
|
-
| stack | 堆叠模式,超过阈值时会将所有消息收起 | boolean | | { threshold: 3 } | 5.10.0 |
|
|
1654
|
-
| top | 消息从顶部弹出时,距离顶部的位置,单位像素 | number | 24 | |
|
|
1655
|
-
| maxCount | 最大显示数,超过限制时,最早的消息会被自动关闭 | number | - | 4.17.0 |
|
|
1656
|
-
|
|
1657
|
-
|
|
1658
|
-
### 全局配置
|
|
1659
|
-
|
|
1660
|
-
还提供了一个全局配置方法,在调用前提前配置,全局一次生效。
|
|
1661
|
-
|
|
1662
|
-
`notification.config(options)`
|
|
1663
|
-
|
|
1664
|
-
当你使用 `ConfigProvider` 进行全局化配置时,系统会默认自动开启 RTL 模式。(4.3.0+)当你想单独使用,可通过如下设置开启 RTL 模式。
|
|
1665
|
-
|
|
1666
|
-
|
|
1667
|
-
|
|
1668
|
-
|
|
1669
|
-
|
|
1670
|
-
#### notification.config
|
|
1671
|
-
|
|
1672
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1673
|
-
|--------|--------|--------|--------|--------|
|
|
1674
|
-
| bottom | 消息从底部弹出时,距离底部的位置,单位像素 | number | 24 | |
|
|
1675
|
-
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0:设置为 null 或 false 时隐藏关闭按钮 |
|
|
1676
|
-
| duration | 默认自动关闭延时,单位秒 | number | 4.5 | |
|
|
1677
|
-
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1678
|
-
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1679
|
-
| getContainer | 配置渲染节点的输出位置,但依旧为全屏展示 | () => HTMLNode | () => document.body | |
|
|
1680
|
-
| placement | 弹出位置,可选 | string | topRight | |
|
|
1681
|
-
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1682
|
-
| top | 消息从顶部弹出时,距离顶部的位置,单位像素 | number | 24 | |
|
|
1683
|
-
| maxCount | 最大显示数,超过限制时,最早的消息会被自动关闭 | number | - | 4.17.0 |
|
|
1684
|
-
|
|
1685
|
-
|
|
1686
|
-
|
|
1687
|
-
|
|
1688
|
-
<DemoTitle title="Pagination" desc="分页器用于分隔长列表,每次只加载一个页面。"></DemoTitle>
|
|
1689
|
-
|
|
1690
|
-
|
|
1691
|
-
|
|
1692
|
-
|
|
1693
|
-
|
|
1694
|
-
示例
|
|
1695
|
-
|
|
1696
|
-
<Install>Pagination</Install>
|
|
1697
|
-
|
|
1698
|
-
#### 翻页器示例
|
|
1699
|
-
|
|
1700
|
-
以下是此组件的示例和变体
|
|
1701
|
-
|
|
1702
|
-
|
|
1703
|
-
|
|
1704
|
-
|
|
1705
|
-
|
|
1706
|
-
更详细的展示
|
|
1707
|
-
|
|
1708
|
-
## API
|
|
1709
|
-
|
|
1710
|
-
| <div><span class="lang-en">Attribute</span><span class="lang-cn">属性名</span></div> | <div><span class="lang-en">Description</span><span class="lang-cn">描述</span></div> | <div><span class="lang-en">Type</span><span class="lang-cn">类型</span></div> | <div><span class="lang-en">Default</span><span class="lang-cn">默认值</span></div> |
|
|
1711
|
-
|--------|--------|--------|--------|
|
|
1712
|
-
| hideSwitchButton | <div><span class="lang-en">Whether to show previous/next page switch button</span><span class="lang-cn">是否展示上一页/下一页的切换按钮</span></div> | boolean | 'false' |
|
|
1713
|
-
|
|
1714
|
-
|
|
1715
|
-
本组件完全兼容 antd 同名组件,详情可访问[antd pagination](https://ant.design/components/pagination-cn/)查看更多 API。
|
|
1716
|
-
|
|
1717
|
-
|
|
1718
|
-
## antd API
|
|
1719
|
-
|
|
1720
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
|
|
1724
|
-
|
|
1725
|
-
|
|
1726
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1727
|
-
|--------|--------|--------|--------|--------|
|
|
1728
|
-
| align | 对齐方式 | start | center | end | - | 5.19.0 |
|
|
1729
|
-
| current | 当前页数 | number | - | |
|
|
1730
|
-
| defaultCurrent | 默认的当前页数 | number | 1 | |
|
|
1731
|
-
| defaultPageSize | 默认的每页条数 | number | 10 | |
|
|
1732
|
-
| disabled | 禁用分页 | boolean | - | |
|
|
1733
|
-
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | |
|
|
1734
|
-
| itemRender | 用于自定义页码的结构,可用于优化 SEO | (page, type: 'page' | 'prev' | 'next', originalElement) => React.ReactNode | - | |
|
|
1735
|
-
| pageSize | 每页条数 | number | - | |
|
|
1736
|
-
| pageSizeOptions | 指定每页可以显示多少条 | number[] | [ | |
|
|
1737
|
-
| responsive | 当 size 未指定时,根据屏幕宽度自动调整尺寸 | boolean | - | |
|
|
1738
|
-
| showLessItems | 是否显示较少页面内容 | boolean | false | |
|
|
1739
|
-
| showQuickJumper | 是否可以快速跳转至某页 | boolean | { goButton: ReactNode } | false | |
|
|
1740
|
-
| showSizeChanger | 是否展示 | boolean | | - | SelectProps: 5.21.0 |
|
|
1741
|
-
| showTitle | 是否显示原生 tooltip 页码提示 | boolean | true | |
|
|
1742
|
-
| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | |
|
|
1743
|
-
| simple | 当添加该属性时,显示为简单分页 | boolean | { readOnly?: boolean } | - | |
|
|
1744
|
-
| size | 当为 | default | default | |
|
|
1745
|
-
| total | 数据总数 | number | 0 | |
|
|
1746
|
-
| onChange | 页码或 | function(page, pageSize) | - | |
|
|
1747
|
-
| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | |
|
|
1748
|
-
|
|
1749
|
-
|
|
1750
|
-
|
|
1751
|
-
|
|
1752
|
-
<DemoTitle title="Message" desc="一条简洁且临时显示的消息,为操作提供全局反馈"></DemoTitle>
|
|
1753
|
-
|
|
1754
|
-
|
|
1755
|
-
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
示例
|
|
1759
|
-
|
|
1760
|
-
<Install>Message</Install>
|
|
1761
|
-
|
|
1762
|
-
#### 全局提示示例
|
|
1763
|
-
|
|
1764
|
-
以下是全局提示组件的示例和变体
|
|
1765
|
-
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
不同状态的的全局提示
|
|
1771
|
-
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
|
|
1775
|
-
提供下一步操作
|
|
1776
|
-
|
|
1777
|
-
#### API
|
|
1778
|
-
|
|
1779
|
-
| <div><span class="lang-en">Attribute</span><span class="lang-cn">属性名</span></div> | <div><span class="lang-en">Description</span><span class="lang-cn">描述</span></div> | <div><span class="lang-en">Type</span><span class="lang-cn">类型</span></div> | <div><span class="lang-en">Default</span><span class="lang-cn">默认值</span></div> |
|
|
1780
|
-
|--------|--------|--------|--------|
|
|
1781
|
-
| conent | <div><span class="lang-en">content to be displayed</span><span class="lang-cn">显示的内容</span></div> | string | "" |
|
|
1782
|
-
|
|
1783
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd message](https://ant.design/components/message-cn) 查看更多 API
|
|
1784
|
-
|
|
1785
|
-
|
|
1786
|
-
## antd API
|
|
1787
|
-
|
|
1788
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
1789
|
-
|
|
1790
|
-
组件提供了一些静态方法,使用方式和参数如下:
|
|
1791
|
-
|
|
1792
|
-
|
|
1793
|
-
- `message.success(content, [duration], onClose)`
|
|
1794
|
-
- `message.error(content, [duration], onClose)`
|
|
1795
|
-
- `message.info(content, [duration], onClose)`
|
|
1796
|
-
- `message.warning(content, [duration], onClose)`
|
|
1797
|
-
- `message.loading(content, [duration], onClose)`
|
|
1798
|
-
|
|
1799
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
1800
|
-
|--------|--------|--------|--------|
|
|
1801
|
-
| content | 提示内容 | ReactNode | config | - |
|
|
1802
|
-
| duration | 自动关闭的延时,单位秒。设为 0 时不自动关闭 | number | 3 |
|
|
1803
|
-
| onClose | 关闭时触发的回调函数 | function | - |
|
|
1804
|
-
|
|
1805
|
-
|
|
1806
|
-
组件同时提供 promise 接口。
|
|
1807
|
-
|
|
1808
|
-
|
|
1809
|
-
- `message[level](content, [duration]).then(afterClose)`
|
|
1810
|
-
- `message[level](content, [duration], onClose).then(afterClose)`
|
|
1811
|
-
|
|
1812
|
-
其中 `message[level]` 是组件已经提供的静态方法。`then` 接口返回值是 Promise。
|
|
1813
|
-
|
|
1814
|
-
也可以对象的形式传递参数:
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
- `message.open(config)`
|
|
1818
|
-
- `message.success(config)`
|
|
1819
|
-
- `message.error(config)`
|
|
1820
|
-
- `message.info(config)`
|
|
1821
|
-
- `message.warning(config)`
|
|
1822
|
-
- `message.loading(config)`
|
|
1823
|
-
|
|
1824
|
-
`config` 对象属性如下:
|
|
1825
|
-
|
|
1826
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
1827
|
-
|--------|--------|--------|--------|
|
|
1828
|
-
| className | 自定义 CSS class | string | - |
|
|
1829
|
-
| content | 提示内容 | ReactNode | - |
|
|
1830
|
-
| duration | 自动关闭的延时,单位秒。设为 0 时不自动关闭 | number | 3 |
|
|
1831
|
-
| icon | 自定义图标 | ReactNode | - |
|
|
1832
|
-
| key | 当前提示的唯一标志 | string | number | - |
|
|
1833
|
-
| style | 自定义内联样式 | | - |
|
|
1834
|
-
| onClick | 点击 message 时触发的回调函数 | function | - |
|
|
1835
|
-
| onClose | 关闭时触发的回调函数 | function | - |
|
|
1836
|
-
|
|
1837
|
-
|
|
1838
|
-
### 全局方法
|
|
1839
|
-
|
|
1840
|
-
还提供了全局配置和全局销毁方法:
|
|
1841
|
-
|
|
1842
|
-
|
|
1843
|
-
- `message.config(options)`
|
|
1844
|
-
- `message.destroy()`
|
|
1845
|
-
|
|
1846
|
-
也可通过 `message.destroy(key)` 来关闭一条消息。
|
|
1847
|
-
|
|
1848
|
-
#### message.config
|
|
1849
|
-
|
|
1850
|
-
当你使用 `ConfigProvider` 进行全局化配置时,系统会默认自动开启 RTL 模式。(4.3.0+)当你想单独使用,可通过如下设置开启 RTL 模式。
|
|
1851
|
-
|
|
1852
|
-
|
|
1853
|
-
|
|
1854
|
-
|
|
1855
|
-
|
|
1856
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1857
|
-
|--------|--------|--------|--------|--------|
|
|
1858
|
-
| duration | 默认自动关闭延时,单位秒 | number | 3 | |
|
|
1859
|
-
| getContainer | 配置渲染节点的输出位置,但依旧为全屏展示 | () => HTMLElement | () => document.body | |
|
|
1860
|
-
| maxCount | 最大显示数,超过限制时,最早的消息会被自动关闭 | number | - | |
|
|
1861
|
-
| prefixCls | 消息节点的 className 前缀 | string | ant-message | 4.5.0 |
|
|
1862
|
-
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1863
|
-
| top | 消息距离顶部的位置 | string | number | 8 | |
|
|
1864
|
-
|
|
1865
|
-
|
|
1866
|
-
|
|
1867
|
-
|
|
1868
|
-
<DemoTitle title="InputNumber" desc="通过鼠标或键盘,输入范围内的数值。"></DemoTitle>
|
|
1869
|
-
|
|
1870
|
-
|
|
1871
|
-
|
|
1872
|
-
|
|
1873
|
-
|
|
1874
|
-
示例
|
|
1875
|
-
|
|
1876
|
-
<Install>InputNumber</Install>
|
|
1877
|
-
|
|
1878
|
-
|
|
1879
|
-
|
|
1880
|
-
|
|
1881
|
-
|
|
1882
|
-
三种大小
|
|
1883
|
-
|
|
1884
|
-
#### API
|
|
1885
|
-
|
|
1886
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd input-number](https://ant.design/components/input-number-cn) 查看更多 API
|
|
1887
|
-
|
|
1888
|
-
|
|
1889
|
-
## antd API
|
|
1890
|
-
|
|
1891
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
1892
|
-
|
|
1893
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1894
|
-
|--------|--------|--------|--------|--------|
|
|
1895
|
-
| addonAfter | 带标签的 input,设置后置标签 | ReactNode | - | 4.17.0 |
|
|
1896
|
-
| addonBefore | 带标签的 input,设置前置标签 | ReactNode | - | 4.17.0 |
|
|
1897
|
-
| autoFocus | 自动获取焦点 | boolean | false | - |
|
|
1898
|
-
| changeOnBlur | 是否在失去焦点时,触发 | boolean | true | 5.11.0 |
|
|
1899
|
-
| changeOnWheel | 允许鼠标滚轮改变数值 | boolean | - | 5.14.0 |
|
|
1900
|
-
| controls | 是否显示增减按钮,也可设置自定义箭头图标 | boolean | { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
|
|
1901
|
-
| decimalSeparator | 小数点 | string | - | - |
|
|
1902
|
-
| placeholder | 占位符 | string | - | |
|
|
1903
|
-
| defaultValue | 初始值 | number | - | - |
|
|
1904
|
-
| disabled | 禁用 | boolean | false | - |
|
|
1905
|
-
| formatter | 指定输入框展示值的格式 | function(value: number | string, info: { userTyping: boolean, input: string }): string | - | info: 4.17.0 |
|
|
1906
|
-
| keyboard | 是否启用键盘快捷行为 | boolean | true | 4.12.0 |
|
|
1907
|
-
| max | 最大值 | number | | - |
|
|
1908
|
-
| min | 最小值 | number | | - |
|
|
1909
|
-
| parser | 指定从 | function(string): number | - | - |
|
|
1910
|
-
| precision | 数值精度,配置 | number | - | - |
|
|
1911
|
-
| readOnly | 只读 | boolean | false | - |
|
|
1912
|
-
| status | 设置校验状态 | 'error' | 'warning' | - | 4.19.0 |
|
|
1913
|
-
| prefix | 带有前缀图标的 input | ReactNode | - | 4.17.0 |
|
|
1914
|
-
| suffix | 带有后缀图标的 input | ReactNode | - | 5.20.0 |
|
|
1915
|
-
| size | 输入框大小 | large | - | - |
|
|
1916
|
-
| step | 每次改变步数,可以为小数 | number | string | 1 | - |
|
|
1917
|
-
| stringMode | 字符值模式,开启后支持高精度小数。同时 | boolean | false | 4.13.0 |
|
|
1918
|
-
| value | 当前值 | number | - | - |
|
|
1919
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 | |
|
|
1920
|
-
| onChange | 变化回调 | function(value: number | string | null) | - | - |
|
|
1921
|
-
| onPressEnter | 按下回车的回调 | function(e) | - | - |
|
|
1922
|
-
| onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' | 'down' }) => void | - | 4.7.0 |
|
|
1923
|
-
|
|
1924
|
-
|
|
1925
|
-
## Ref
|
|
1926
|
-
|
|
1927
|
-
| 名称 | 说明 | 参数 | 版本 |
|
|
1928
|
-
|--------|--------|--------|--------|
|
|
1929
|
-
| blur() | 移除焦点 | - | |
|
|
1930
|
-
| focus() | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' }) | cursor - 5.22.0 |
|
|
1931
|
-
| nativeElement | 获取原生 DOM 元素 | - | 5.17.3 |
|
|
1932
|
-
|
|
1933
|
-
|
|
1934
|
-
|
|
1935
|
-
|
|
1936
|
-
<DemoTitle title="Image" desc="可预览的图片"></DemoTitle>
|
|
1937
|
-
|
|
1938
|
-
|
|
1939
|
-
|
|
1940
|
-
|
|
1941
|
-
|
|
1942
|
-
示例
|
|
1943
|
-
|
|
1944
|
-
<Install>Image</Install>
|
|
1945
|
-
|
|
1946
|
-
#### API
|
|
1947
|
-
|
|
1948
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd image](https://ant.design/components/image-cn) 查看更多 API
|
|
1949
|
-
|
|
1950
|
-
|
|
1951
|
-
## antd API
|
|
1952
|
-
|
|
1953
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
1954
|
-
|
|
1955
|
-
### Image
|
|
1956
|
-
|
|
1957
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1958
|
-
|--------|--------|--------|--------|--------|
|
|
1959
|
-
| alt | 图像描述 | string | - | 4.6.0 |
|
|
1960
|
-
| fallback | 加载失败容错地址 | string | - | 4.6.0 |
|
|
1961
|
-
| height | 图像高度 | string | number | - | 4.6.0 |
|
|
1962
|
-
| placeholder | 加载占位,为 | ReactNode | - | 4.6.0 |
|
|
1963
|
-
| preview | 预览参数,为 | boolean | | true | 4.6.0 |
|
|
1964
|
-
| src | 图片地址 | string | - | 4.6.0 |
|
|
1965
|
-
| width | 图像宽度 | string | number | - | 4.6.0 |
|
|
1966
|
-
| onError | 加载错误回调 | (event: Event) => void | - | 4.12.0 |
|
|
1967
|
-
|
|
1968
|
-
|
|
1969
|
-
其他属性见 [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
|
|
1970
|
-
|
|
1971
|
-
### PreviewType
|
|
1972
|
-
|
|
1973
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1974
|
-
|--------|--------|--------|--------|--------|
|
|
1975
|
-
| visible | 是否显示 | boolean | - | - |
|
|
1976
|
-
| src | 自定义预览 src | string | - | 4.10.0 |
|
|
1977
|
-
| getContainer | 指定预览挂载的节点,但依旧为全屏展示,false 为挂载在当前位置 | string | HTMLElement | (() => HTMLElement) | false | - | 4.8.0 |
|
|
1978
|
-
| movable | 是否可移动 | boolean | true | 5.8.0 |
|
|
1979
|
-
| mask | 缩略图遮罩 | ReactNode | - | 4.9.0 |
|
|
1980
|
-
| maskClassName | 缩略图遮罩类名 | string | - | 4.11.0 |
|
|
1981
|
-
| rootClassName | 预览图的根 DOM 类名 | string | - | 5.4.0 |
|
|
1982
|
-
| scaleStep | 1 + scaleStep | number | 0.5 | - |
|
|
1983
|
-
| minScale | 最小缩放倍数 | number | 1 | 5.7.0 |
|
|
1984
|
-
| maxScale | 最大放大倍数 | number | 50 | 5.7.0 |
|
|
1985
|
-
| closeIcon | 自定义关闭 Icon | React.ReactNode | - | 5.7.0 |
|
|
1986
|
-
| forceRender | 强制渲染预览图 | boolean | - | - |
|
|
1987
|
-
| toolbarRender | 自定义工具栏 | (originalNode: React.ReactElement, info: Omit< | - | 5.7.0, |
|
|
1988
|
-
| imageRender | 自定义预览内容 | (originalNode: React.ReactElement, info: { transform: | - | 5.7.0, image: 5.18.0 |
|
|
1989
|
-
| | 关闭预览时销毁子元素 | boolean | false | |
|
|
1990
|
-
| destroyOnHidden | 关闭预览时销毁子元素 | boolean | false | 5.25.0 |
|
|
1991
|
-
| onTransform | 预览图 transform 变化的回调 | { transform: | - | 5.7.0 |
|
|
1992
|
-
| onVisibleChange | 当 | (visible: boolean, prevVisible: boolean) => void | - | - |
|
|
1993
|
-
|
|
1994
|
-
|
|
1995
|
-
## PreviewGroup
|
|
1996
|
-
|
|
1997
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1998
|
-
|--------|--------|--------|--------|--------|
|
|
1999
|
-
| preview | 预览参数,为 | boolean | | true | 4.6.0 |
|
|
2000
|
-
| items | 预览数组 | string[] | { src: string, crossOrigin: string, ... }[] | - | 5.7.0 |
|
|
2001
|
-
| fallback | 加载失败容错地址 | string | - | 5.7.0 |
|
|
2002
|
-
|
|
2003
|
-
|
|
2004
|
-
### PreviewGroupType
|
|
2005
|
-
|
|
2006
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2007
|
-
|--------|--------|--------|--------|--------|
|
|
2008
|
-
| visible | 是否显示 | boolean | - | - |
|
|
2009
|
-
| getContainer | 指定预览挂载的节点,但依旧为全屏展示,false 为挂载在当前位置 | string | HTMLElement | (() => HTMLElement) | false | - | 4.8.0 |
|
|
2010
|
-
| movable | 是否可移动 | boolean | true | 5.8.0 |
|
|
2011
|
-
| current | 当前预览图的 index | number | - | 4.12.0 |
|
|
2012
|
-
| mask | 缩略图遮罩 | ReactNode | - | 4.9.0 |
|
|
2013
|
-
| maskClassName | 缩略图遮罩类名 | string | - | 4.11.0 |
|
|
2014
|
-
| | 预览图的根 DOM 类名,不做推荐了,v6 会移到根组件上 | string | - | 5.4.0 |
|
|
2015
|
-
| scaleStep | 1 + scaleStep | number | 0.5 | - |
|
|
2016
|
-
| minScale | 最小缩放倍数 | number | 1 | 5.7.0 |
|
|
2017
|
-
| maxScale | 最大放大倍数 | number | 50 | 5.7.0 |
|
|
2018
|
-
| closeIcon | 自定义关闭 Icon | React.ReactNode | - | 5.7.0 |
|
|
2019
|
-
| forceRender | 强制渲染预览图 | boolean | - | - |
|
|
2020
|
-
| countRender | 自定义预览计数内容 | (current: number, total: number) => React.ReactNode | - | 4.20.0 |
|
|
2021
|
-
| toolbarRender | 自定义工具栏 | (originalNode: React.ReactElement, info: | - | 5.7.0, |
|
|
2022
|
-
| imageRender | 自定义预览内容 | (originalNode: React.ReactElement, info: { transform: | - | 5.7.0, image: 5.18.0 |
|
|
2023
|
-
| onTransform | 预览图 transform 变化的回调 | { transform: | - | 5.7.0 |
|
|
2024
|
-
| onChange | 切换预览图的回调 | (current: number, prevCurrent: number) => void | - | 5.3.0 |
|
|
2025
|
-
| onVisibleChange | 当 | (visible: boolean, prevVisible: boolean, current: number) => void | - | current 参数 5.3.0 |
|
|
2026
|
-
|
|
2027
|
-
|
|
2028
|
-
## Interface
|
|
2029
|
-
|
|
2030
|
-
### TransformType
|
|
2031
|
-
|
|
2032
|
-
|
|
2033
|
-
|
|
2034
|
-
|
|
2035
|
-
|
|
2036
|
-
### TransformAction
|
|
2037
|
-
|
|
2038
|
-
|
|
2039
|
-
|
|
2040
|
-
|
|
2041
|
-
|
|
2042
|
-
### ToolbarRenderInfoType
|
|
2043
|
-
|
|
2044
|
-
|
|
2045
|
-
|
|
2046
|
-
|
|
2047
|
-
|
|
2048
|
-
### ImgInfo
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
|
|
2052
|
-
|
|
2053
|
-
|
|
2054
|
-
|
|
2055
|
-
|
|
2056
|
-
<DemoTitle title="Modal" desc="用于叠加当前页面上的对话框窗口,提供标题、内容区、操作区。"></DemoTitle>
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
|
-
|
|
2060
|
-
|
|
2061
|
-
|
|
2062
|
-
示例
|
|
2063
|
-
|
|
2064
|
-
<Install>Modal</Install>
|
|
2065
|
-
|
|
2066
|
-
|
|
2067
|
-
|
|
2068
|
-
|
|
2069
|
-
|
|
2070
|
-
自定义样式
|
|
2071
|
-
|
|
2072
|
-
|
|
2073
|
-
|
|
2074
|
-
|
|
2075
|
-
预设宽度
|
|
2076
|
-
|
|
2077
|
-
#### API
|
|
2078
|
-
|
|
2079
|
-
| <div><span class="lang-en">Attribute</span><span class="lang-cn">属性名</span></div> | <div><span class="lang-en">Description</span><span class="lang-cn">描述</span></div> | <div><span class="lang-en">Type</span><span class="lang-cn">类型</span></div> | <div><span class="lang-en">Default</span><span class="lang-cn">默认值</span></div> |
|
|
2080
|
-
|--------|--------|--------|--------|
|
|
2081
|
-
| info | <div><span class="lang-en"></span><span class="lang-cn"></span></div> | string | React.ReactNode | |
|
|
2082
|
-
| showDivider | <div><span class="lang-en"></span><span class="lang-cn"></span></div> | boolean | |
|
|
2083
|
-
|
|
2084
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd modal](https://ant.design/components/modal-cn) 查看更多 API
|
|
2085
|
-
|
|
2086
|
-
|
|
2087
|
-
## antd API
|
|
2088
|
-
|
|
2089
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
2090
|
-
|
|
2091
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2092
|
-
|--------|--------|--------|--------|--------|
|
|
2093
|
-
| afterClose | Modal 完全关闭后的回调 | function | - | |
|
|
2094
|
-
| classNames | 配置弹窗内置模块的 className | | - | |
|
|
2095
|
-
| styles | 配置弹窗内置模块的 style | | - | 5.10.0 |
|
|
2096
|
-
| cancelButtonProps | cancel 按钮 props | | - | |
|
|
2097
|
-
| cancelText | 取消按钮文字 | ReactNode | 取消 | |
|
|
2098
|
-
| centered | 垂直居中展示 Modal | boolean | false | |
|
|
2099
|
-
| closable | 是否显示右上角的关闭按钮 | boolean | { closeIcon?: React.ReactNode; disabled?: boolean; } | true | |
|
|
2100
|
-
| closeIcon | 自定义关闭图标。5.7.0:设置为 | ReactNode | <CloseOutlined /> | |
|
|
2101
|
-
| confirmLoading | 确定按钮 loading | boolean | false | |
|
|
2102
|
-
| | 关闭时销毁 Modal 里的子元素 | boolean | false | |
|
|
2103
|
-
| destroyOnHidden | 关闭时销毁 Modal 里的子元素 | boolean | false | 5.25.0 |
|
|
2104
|
-
| focusTriggerAfterClose | 对话框关闭后是否需要聚焦触发元素 | boolean | true | 4.9.0 |
|
|
2105
|
-
| footer | 底部内容,当不需要默认底部按钮时,可以设为 | ReactNode | (originNode: ReactNode, extra: { OkBtn: React.FC, CancelBtn: React.FC }) => ReactNode | (确定取消按钮) | renderFunction: 5.9.0 |
|
|
2106
|
-
| forceRender | 强制渲染 Modal | boolean | false | |
|
|
2107
|
-
| getContainer | 指定 Modal 挂载的节点,但依旧为全屏展示, | HTMLElement | () => HTMLElement | Selectors | false | document.body | |
|
|
2108
|
-
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
|
|
2109
|
-
| mask | 是否展示遮罩 | boolean | true | |
|
|
2110
|
-
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
|
|
2111
|
-
| modalRender | 自定义渲染对话框 | (node: ReactNode) => ReactNode | - | 4.7.0 |
|
|
2112
|
-
| okButtonProps | ok 按钮 props | | - | |
|
|
2113
|
-
| okText | 确认按钮文字 | ReactNode | 确定 | |
|
|
2114
|
-
| okType | 确认按钮类型 | string | primary | |
|
|
2115
|
-
| style | 可用于设置浮层的样式,调整浮层位置等 | CSSProperties | - | |
|
|
2116
|
-
| loading | 显示骨架屏 | boolean | | 5.18.0 |
|
|
2117
|
-
| title | 标题 | ReactNode | - | |
|
|
2118
|
-
| open | 对话框是否可见 | boolean | - | |
|
|
2119
|
-
| width | 宽度 | string | number | | 520 | Breakpoint: 5.23.0 |
|
|
2120
|
-
| wrapClassName | 对话框外层容器的类名 | string | - | |
|
|
2121
|
-
| zIndex | 设置 Modal 的 | number | 1000 | |
|
|
2122
|
-
| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | - | |
|
|
2123
|
-
| onOk | 点击确定回调 | function(e) | - | |
|
|
2124
|
-
| afterOpenChange | 打开和关闭 Modal 时动画结束后的回调 | (open: boolean) => void | - | 5.4.0 |
|
|
2125
|
-
|
|
2126
|
-
|
|
2127
|
-
#### 注意
|
|
2128
|
-
|
|
2129
|
-
|
|
2130
|
-
- `<Modal />` 默认关闭后状态不会自动清空,如果希望每次打开都是新内容,请设置 `destroyOnHidden`。
|
|
2131
|
-
- `<Modal />` 和 Form 一起配合使用时,设置 `destroyOnHidden` 也不会在 Modal 关闭时销毁表单字段数据,需要设置 `<Form preserve={false} />`。
|
|
2132
|
-
- `Modal.method()` RTL 模式仅支持 hooks 用法。
|
|
2133
|
-
|
|
2134
|
-
### Modal.method()
|
|
2135
|
-
|
|
2136
|
-
包括:
|
|
2137
|
-
|
|
2138
|
-
|
|
2139
|
-
- `Modal.info`
|
|
2140
|
-
- `Modal.success`
|
|
2141
|
-
- `Modal.error`
|
|
2142
|
-
- `Modal.warning`
|
|
2143
|
-
- `Modal.confirm`
|
|
2144
|
-
|
|
2145
|
-
以上均为一个函数,参数为 object,具体属性如下:
|
|
2146
|
-
|
|
2147
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2148
|
-
|--------|--------|--------|--------|--------|
|
|
2149
|
-
| afterClose | Modal 完全关闭后的回调 | function | - | 4.9.0 |
|
|
2150
|
-
| autoFocusButton | 指定自动获得焦点的按钮 | null | | ok | |
|
|
2151
|
-
| cancelButtonProps | cancel 按钮 props | | - | |
|
|
2152
|
-
| cancelText | 设置 Modal.confirm 取消按钮文字 | string | 取消 | |
|
|
2153
|
-
| centered | 垂直居中展示 Modal | boolean | false | |
|
|
2154
|
-
| className | 容器类名 | string | - | |
|
|
2155
|
-
| closable | 是否显示右上角的关闭按钮 | boolean | false | 4.9.0 |
|
|
2156
|
-
| closeIcon | 自定义关闭图标 | ReactNode | undefined | 4.9.0 |
|
|
2157
|
-
| content | 内容 | ReactNode | - | |
|
|
2158
|
-
| footer | 底部内容,当不需要默认底部按钮时,可以设为 | ReactNode | (originNode: ReactNode, extra: { OkBtn: React.FC, CancelBtn: React.FC }) => ReactNode | - | renderFunction: 5.9.0 |
|
|
2159
|
-
| getContainer | 指定 Modal 挂载的 HTML 节点,false 为挂载在当前 dom | HTMLElement | () => HTMLElement | Selectors | false | document.body | |
|
|
2160
|
-
| icon | 自定义图标 | ReactNode | <ExclamationCircleFilled /> | |
|
|
2161
|
-
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
|
|
2162
|
-
| mask | 是否展示遮罩 | boolean | true | |
|
|
2163
|
-
| maskClosable | 点击蒙层是否允许关闭 | boolean | false | |
|
|
2164
|
-
| okButtonProps | ok 按钮 props | | - | |
|
|
2165
|
-
| okText | 确认按钮文字 | string | 确定 | |
|
|
2166
|
-
| okType | 确认按钮类型 | string | primary | |
|
|
2167
|
-
| style | 可用于设置浮层的样式,调整浮层位置等 | CSSProperties | - | |
|
|
2168
|
-
| title | 标题 | ReactNode | - | |
|
|
2169
|
-
| width | 宽度 | string | number | 416 | |
|
|
2170
|
-
| wrapClassName | 对话框外层容器的类名 | string | - | 4.18.0 |
|
|
2171
|
-
| zIndex | 设置 Modal 的 | number | 1000 | |
|
|
2172
|
-
| onCancel | 点击取消回调,参数为关闭函数,若返回 promise 时 resolve 为正常关闭, reject 为不关闭 | function(close) | - | |
|
|
2173
|
-
| onOk | 点击确定回调,参数为关闭函数,若返回 promise 时 resolve 为正常关闭, reject 为不关闭 | function(close) | - | |
|
|
2174
|
-
|
|
2175
|
-
|
|
2176
|
-
以上函数调用后,会返回一个引用,可以通过该引用更新和关闭弹窗。
|
|
2177
|
-
|
|
2178
|
-
|
|
2179
|
-
|
|
2180
|
-
|
|
2181
|
-
|
|
2182
|
-
|
|
2183
|
-
- `Modal.destroyAll`
|
|
2184
|
-
|
|
2185
|
-
使用 `Modal.destroyAll()` 可以销毁弹出的确认窗(即上述的 `Modal.info`、`Modal.success`、`Modal.error`、`Modal.warning`、`Modal.confirm`)。通常用于路由监听当中,处理路由前进、后退不能销毁确认对话框的问题,而不用各处去使用实例的返回值进行关闭(`modal.destroy()` 适用于主动关闭,而不是路由这样被动关闭)
|
|
2186
|
-
|
|
2187
|
-
|
|
2188
|
-
|
|
2189
|
-
|
|
2190
|
-
|
|
2191
|
-
### Modal.useModal()
|
|
2192
|
-
|
|
2193
|
-
当你需要使用 Context 时,可以通过 `Modal.useModal` 创建一个 `contextHolder` 插入子节点中。通过 hooks 创建的临时 Modal 将会得到 `contextHolder` 所在位置的所有上下文。创建的 `modal` 对象拥有与 [`Modal.method`](#modalmethod) 相同的创建通知方法。
|
|
2194
|
-
|
|
2195
|
-
|
|
2196
|
-
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
`modal.confirm` 返回方法:
|
|
2200
|
-
|
|
2201
|
-
|
|
2202
|
-
- `destroy`:销毁当前窗口
|
|
2203
|
-
- `update`:更新当前窗口
|
|
2204
|
-
- `then`:Promise 链式调用,支持 `await` 操作。该方法为 Hooks 仅有
|
|
2205
|
-
|
|
2206
|
-
|
|
2207
|
-
|
|
2208
|
-
|
|
2209
|
-
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
<DemoTitle title="Input" desc="通过鼠标或键盘输入内容,为表单提供输入字段的基础容器。。"></DemoTitle>
|
|
2213
|
-
|
|
2214
|
-
|
|
2215
|
-
|
|
2216
|
-
|
|
2217
|
-
|
|
2218
|
-
示例
|
|
2219
|
-
|
|
2220
|
-
<Install>Input</Install>
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
|
-
|
|
2225
|
-
|
|
2226
|
-
三种大小
|
|
2227
|
-
|
|
2228
|
-
|
|
2229
|
-
|
|
2230
|
-
|
|
2231
|
-
|
|
2232
|
-
大圆角形态
|
|
2233
|
-
|
|
2234
|
-
|
|
2235
|
-
|
|
2236
|
-
|
|
2237
|
-
|
|
2238
|
-
带前置图标
|
|
2239
|
-
|
|
2240
|
-
|
|
2241
|
-
|
|
2242
|
-
|
|
2243
|
-
|
|
2244
|
-
支持拖拽高度的文本域
|
|
2245
|
-
|
|
2246
|
-
|
|
2247
|
-
|
|
2248
|
-
|
|
2249
|
-
|
|
2250
|
-
适应文本高度的文本域
|
|
2251
|
-
|
|
2252
|
-
|
|
2253
|
-
|
|
2254
|
-
|
|
2255
|
-
|
|
2256
|
-
带字数提示
|
|
2257
|
-
|
|
2258
|
-
#### API
|
|
2259
|
-
|
|
2260
|
-
| <div><span class="lang-en">Attribute</span><span class="lang-cn">属性名</span></div> | <div><span class="lang-en">Description</span><span class="lang-cn">描述</span></div> | <div><span class="lang-en">Type</span><span class="lang-cn">类型</span></div> | <div><span class="lang-en">Default</span><span class="lang-cn">默认值</span></div> |
|
|
2261
|
-
|--------|--------|--------|--------|
|
|
2262
|
-
| shape | <div><span class="lang-en">Shape</span><span class="lang-cn">形态</span></div> | 'default' | 'round' | default 默认 |
|
|
2263
|
-
|
|
2264
|
-
|
|
2265
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd input](https://ant.design/components/input-cn) 查看更多 API
|
|
2266
|
-
|
|
2267
|
-
|
|
2268
|
-
## antd API
|
|
2269
|
-
|
|
2270
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
2271
|
-
|
|
2272
|
-
### Input
|
|
2273
|
-
|
|
2274
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2275
|
-
|--------|--------|--------|--------|--------|
|
|
2276
|
-
| addonAfter | 带标签的 input,设置后置标签 | ReactNode | - | |
|
|
2277
|
-
| addonBefore | 带标签的 input,设置前置标签 | ReactNode | - | |
|
|
2278
|
-
| allowClear | 可以点击清除图标删除内容 | boolean | { clearIcon: ReactNode } | - | |
|
|
2279
|
-
| | 是否有边框, 请使用 | boolean | true | 4.5.0 |
|
|
2280
|
-
| classNames | 语义化结构 class | Record< | - | 5.4.0 |
|
|
2281
|
-
| count | 字符计数配置 | | - | 5.10.0 |
|
|
2282
|
-
| defaultValue | 输入框默认内容 | string | - | |
|
|
2283
|
-
| disabled | 是否禁用状态,默认为 false | boolean | false | |
|
|
2284
|
-
| id | 输入框的 id | string | - | |
|
|
2285
|
-
| maxLength | 最大长度 | number | - | |
|
|
2286
|
-
| prefix | 带有前缀图标的 input | ReactNode | - | |
|
|
2287
|
-
| showCount | 是否展示字数 | boolean | { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 info.value: 4.23.0 |
|
|
2288
|
-
| status | 设置校验状态 | 'error' | 'warning' | - | 4.19.0 |
|
|
2289
|
-
| styles | 语义化结构 style | Record< | - | 5.4.0 |
|
|
2290
|
-
| size | 控件大小。注:标准表单内的输入框大小限制为 | large | - | |
|
|
2291
|
-
| suffix | 带有后缀图标的 input | ReactNode | - | |
|
|
2292
|
-
| type | 声明 input 类型,同原生 input 标签的 type 属性,见: | string | text | |
|
|
2293
|
-
| value | 输入框内容 | string | - | |
|
|
2294
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 | |
|
|
2295
|
-
| onChange | 输入框内容变化时的回调 | function(e) | - | |
|
|
2296
|
-
| onPressEnter | 按下回车的回调 | function(e) | - | |
|
|
2297
|
-
| onClear | 按下清除按钮的回调 | () => void | - | 5.20.0 |
|
|
2298
|
-
|
|
2299
|
-
|
|
2300
|
-
如果 `Input` 在 `Form.Item` 内,并且 `Form.Item` 设置了 `id` 属性,则 `value` `defaultValue` 和 `id` 属性会被自动设置。
|
|
2301
|
-
|
|
2302
|
-
Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes) 一致。
|
|
2303
|
-
|
|
2304
|
-
#### CountConfig
|
|
2305
|
-
|
|
2306
|
-
|
|
2307
|
-
|
|
2308
|
-
|
|
2309
|
-
|
|
2310
|
-
### Input.TextArea
|
|
2311
|
-
|
|
2312
|
-
同 Input 属性,外加:
|
|
2313
|
-
|
|
2314
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2315
|
-
|--------|--------|--------|--------|--------|
|
|
2316
|
-
| autoSize | 自适应内容高度,可设置为 true | false 或对象:{ minRows: 2, maxRows: 6 } | boolean | object | false | |
|
|
2317
|
-
| classNames | 语义化结构 class | Record< | - | 5.4.0 |
|
|
2318
|
-
| styles | 语义化结构 style | Record< | - | 5.4.0 |
|
|
2319
|
-
|
|
2320
|
-
|
|
2321
|
-
`Input.TextArea` 的其他属性和浏览器自带的 [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) 一致。
|
|
2322
|
-
|
|
2323
|
-
### Input.Search
|
|
2324
|
-
|
|
2325
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
2326
|
-
|--------|--------|--------|--------|
|
|
2327
|
-
| enterButton | 是否有确认按钮,可设为按钮文字。该属性会与 | ReactNode | false |
|
|
2328
|
-
| loading | 搜索 loading | boolean | false |
|
|
2329
|
-
| onSearch | 点击搜索图标、清除图标,或按下回车键时的回调 | function(value, event, { source: "input" | "clear" }) | - |
|
|
2330
|
-
|
|
2331
|
-
|
|
2332
|
-
其余属性和 Input 一致。
|
|
2333
|
-
|
|
2334
|
-
### Input.Password
|
|
2335
|
-
|
|
2336
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2337
|
-
|--------|--------|--------|--------|--------|
|
|
2338
|
-
| iconRender | 自定义切换按钮 | (visible) => ReactNode | (visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />) | 4.3.0 |
|
|
2339
|
-
| visibilityToggle | 是否显示切换按钮或者控制密码显隐 | boolean | | true | |
|
|
2340
|
-
|
|
2341
|
-
|
|
2342
|
-
### Input.OTP
|
|
2343
|
-
|
|
2344
|
-
`5.16.0` 新增。
|
|
2345
|
-
|
|
2346
|
-
开发者注意事项:当 `mask` 属性的类型为 string 时,我们强烈推荐接收单个字符或单个 emoji,如果传入多个字符或多个 emoji,则会在控制台抛出警告。
|
|
2347
|
-
|
|
2348
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2349
|
-
|--------|--------|--------|--------|--------|
|
|
2350
|
-
| defaultValue | 默认值 | string | - | |
|
|
2351
|
-
| disabled | 是否禁用 | boolean | false | |
|
|
2352
|
-
| formatter | 格式化展示,留空字段会被 | (value: string) => string | - | |
|
|
2353
|
-
| separator | 分隔符,在指定索引的输入框后渲染分隔符 | ReactNode |((i: number) => ReactNode) | - | 5.24.0 |
|
|
2354
|
-
| mask | 自定义展示,和 | boolean | string | false | 5.17.0 |
|
|
2355
|
-
| length | 输入元素数量 | number | 6 | |
|
|
2356
|
-
| status | 设置校验状态 | 'error' | 'warning' | - | |
|
|
2357
|
-
| size | 输入框大小 | small | middle | |
|
|
2358
|
-
| variant | 形态变体 | outlined | outlined | underlined |
|
|
2359
|
-
| value | 输入框内容 | string | - | |
|
|
2360
|
-
| onChange | 当输入框内容全部填充时触发回调 | (value: string) => void | - | |
|
|
2361
|
-
| onInput | 输入值变化时触发的回调 | (value: string[]) => void | - | 5.22.0 |
|
|
2362
|
-
|
|
2363
|
-
|
|
2364
|
-
#### VisibilityToggle
|
|
2365
|
-
|
|
2366
|
-
| Property | Description | Type | Default | Version |
|
|
2367
|
-
|--------|--------|--------|--------|--------|
|
|
2368
|
-
| visible | 用于手动控制密码显隐 | boolean | false | 4.24 |
|
|
2369
|
-
| onVisibleChange | 显隐密码的回调 | (visible) => void | - | 4.24 |
|
|
2370
|
-
|
|
2371
|
-
|
|
2372
|
-
#### Input Methods
|
|
2373
|
-
|
|
2374
|
-
| 名称 | 说明 | 参数 | 版本 |
|
|
2375
|
-
|--------|--------|--------|--------|
|
|
2376
|
-
| blur | 取消焦点 | - | |
|
|
2377
|
-
| focus | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' | 'end' | 'all' }) | option - 4.10.0 |
|
|
2378
|
-
|
|
2379
|
-
|
|
2380
|
-
|
|
2381
|
-
|
|
2382
|
-
<DemoTitle title="IconButton" desc="以图标为核心的轻量按钮组件,用于触发操作。"></DemoTitle>
|
|
2383
|
-
|
|
2384
|
-
|
|
2385
|
-
|
|
2386
|
-
|
|
2387
|
-
|
|
2388
|
-
示例
|
|
2389
|
-
|
|
2390
|
-
<Install>IconButton</Install>
|
|
2391
|
-
|
|
2392
|
-
#### 图标按钮示例
|
|
2393
|
-
|
|
2394
|
-
以下是此组件的示例和变体
|
|
2395
|
-
|
|
2396
|
-
|
|
2397
|
-
|
|
2398
|
-
|
|
2399
|
-
带边框的图标按钮
|
|
2400
|
-
|
|
2401
|
-
|
|
2402
|
-
|
|
2403
|
-
|
|
2404
|
-
圆形图标按钮
|
|
2405
|
-
|
|
2406
|
-
#### API
|
|
2407
|
-
|
|
2408
|
-
| <div><span class="lang-en">Attribute</span><span class="lang-cn">属性名</span></div> | <div><span class="lang-en">Description</span><span class="lang-cn">描述</span></div> | <div><span class="lang-en">Type</span><span class="lang-cn">类型</span></div> | <div><span class="lang-en">Default</span><span class="lang-cn">默认值</span></div> |
|
|
2409
|
-
|--------|--------|--------|--------|
|
|
2410
|
-
| icon | <div><span class="lang-en"></span><span class="lang-cn">icon</span></div> | ReactNode | string | |
|
|
2411
|
-
| iconType | <div><span class="lang-en"></span><span class="lang-cn">百炼图标iconfont的key,依赖百炼的iconFont,例如bl-icon-add</span></div> | string | |
|
|
2412
|
-
| bordered | <div><span class="lang-en"></span><span class="lang-cn">边框</span></div> | boolean | true |
|
|
2413
|
-
| shape | <div><span class="lang-en"></span><span class="lang-cn">形状</span></div> | 'default' | 'circle' | 'default' |
|
|
2414
|
-
|
|
2415
|
-
|
|
2416
|
-
## antd API
|
|
2417
|
-
|
|
2418
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
2419
|
-
|
|
2420
|
-
通过设置 Button 的属性来产生不同的按钮样式,推荐顺序为:`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
2421
|
-
|
|
2422
|
-
按钮的属性说明如下:
|
|
2423
|
-
|
|
2424
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
2425
|
-
|--------|--------|--------|--------|--------|
|
|
2426
|
-
| autoInsertSpace | 我们默认提供两个汉字之间的空格,可以设置 | boolean | true | 5.17.0 |
|
|
2427
|
-
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
2428
|
-
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
2429
|
-
| color | 设置按钮的颜色 | default | - | default |
|
|
2430
|
-
| danger | 语法糖,设置危险按钮。当设置 | boolean | false | |
|
|
2431
|
-
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
2432
|
-
| ghost | 幽灵属性,使按钮背景透明 | boolean | false | |
|
|
2433
|
-
| href | 点击跳转的地址,指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2434
|
-
| htmlType | 设置 | submit | button | |
|
|
2435
|
-
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
2436
|
-
| loading | 设置按钮载入状态 | boolean | { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
2437
|
-
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
2438
|
-
| target | 相当于 a 链接的 target 属性,href 存在时生效 | string | - | |
|
|
2439
|
-
| onClick | 点击按钮时的回调 | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - | |
|
|
2440
|
-
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
2441
|
-
|
|
2442
|
-
|
|
2443
|
-
支持原生 button 的其他所有属性。
|
|
2444
|
-
|
|
2445
|
-
### PresetColors
|
|
2446
|
-
|
|
2447
|
-
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
2448
|
-
|
|
2449
|
-
|
|
2450
|
-
|
|
2451
|
-
<DemoTitle title="Form" desc="高性能表单控件,自带数据域管理。包含数据录入、校验以及对应样式。"></DemoTitle>
|
|
2452
|
-
|
|
2453
|
-
|
|
2454
|
-
|
|
2455
|
-
|
|
2456
|
-
|
|
2457
|
-
示例
|
|
2458
|
-
|
|
2459
|
-
<Install>Form</Install>
|
|
2460
|
-
|
|
2461
|
-
#### 标签页示例
|
|
2462
|
-
|
|
2463
|
-
以下是此组件的示例和变体
|
|
2464
|
-
|
|
2465
|
-
|
|
2466
|
-
|
|
2467
|
-
|
|
2468
|
-
|
|
2469
|
-
横向排布
|
|
2470
|
-
|
|
2471
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd form](https://ant.design/components/form-cn) 查看更多 API
|
|
2472
|
-
|
|
2473
|
-
|
|
2474
|
-
## antd API
|
|
2475
|
-
|
|
2476
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
2477
|
-
|
|
2478
|
-
### Form
|
|
2479
|
-
|
|
2480
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2481
|
-
|--------|--------|--------|--------|--------|
|
|
2482
|
-
| colon | 配置 Form.Item 的 | boolean | true | |
|
|
2483
|
-
| disabled | 设置表单组件禁用,仅对 antd 组件有效 | boolean | false | 4.21.0 |
|
|
2484
|
-
| component | 设置 Form 渲染元素,为 | ComponentType | false | form | |
|
|
2485
|
-
| fields | 通过状态管理(如 redux)控制表单字段,如非强需求不推荐使用。查看 | | - | |
|
|
2486
|
-
| form | 经 | | - | |
|
|
2487
|
-
| feedbackIcons | 当 | | - | 5.9.0 |
|
|
2488
|
-
| initialValues | 表单默认值,只有初始化以及重置时生效 | object | - | |
|
|
2489
|
-
| labelAlign | label 标签的文本对齐方式 | left | right | |
|
|
2490
|
-
| labelWrap | label 标签的文本换行方式 | boolean | false | 4.18.0 |
|
|
2491
|
-
| labelCol | label 标签布局,同 | | - | |
|
|
2492
|
-
| layout | 表单布局 | horizontal | horizontal | |
|
|
2493
|
-
| name | 表单名称,会作为表单字段 | string | - | |
|
|
2494
|
-
| preserve | 当字段被删除时保留字段值。你可以通过 | boolean | true | 4.4.0 |
|
|
2495
|
-
| requiredMark | 必选样式,可以切换为必选或者可选展示样式。此为 Form 配置,Form.Item 无法单独配置 | boolean | | true | renderProps |
|
|
2496
|
-
| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean | | false | focus: 5.24.0 |
|
|
2497
|
-
| size | 设置字段组件的尺寸(仅限 antd 组件) | small | - | |
|
|
2498
|
-
| validateMessages | 验证提示模板,说明 | | - | |
|
|
2499
|
-
| validateTrigger | 统一设置字段触发验证的时机 | string | string[] | onChange | 4.3.0 |
|
|
2500
|
-
| variant | 表单内控件变体 | outlined | outlined | 5.13.0 | |
|
|
2501
|
-
| wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol | | - | |
|
|
2502
|
-
| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | - | |
|
|
2503
|
-
| onFinish | 提交表单且数据验证成功后回调事件 | function(values) | - | |
|
|
2504
|
-
| onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | - | |
|
|
2505
|
-
| onValuesChange | 字段值更新时触发回调事件 | function(changedValues, allValues) | - | |
|
|
2506
|
-
| clearOnDestroy | 当表单被卸载时清空表单值 | boolean | false | 5.18.0 |
|
|
2507
|
-
|
|
2508
|
-
|
|
2509
|
-
支持原生 form 除 `onSubmit` 外的所有属性。
|
|
2510
|
-
|
|
2511
|
-
### validateMessages
|
|
2512
|
-
|
|
2513
|
-
Form 为验证提供了[默认的错误提示信息](https://github.com/ant-design/ant-design/blob/6234509d18bac1ac60fbb3f92a5b2c6a6361295a/components/locale/en_US.ts#L88-L134),你可以通过配置 `validateMessages` 属性,修改对应的提示模板。一种常见的使用方式,是配置国际化提示信息:
|
|
2514
|
-
|
|
2515
|
-
|
|
2516
|
-
|
|
2517
|
-
|
|
2518
|
-
|
|
2519
|
-
此外,[ConfigProvider](/components/config-provider-cn) 也提供了全局化配置方案,允许统一配置错误提示模板:
|
|
2520
|
-
|
|
2521
|
-
|
|
2522
|
-
|
|
2523
|
-
|
|
2524
|
-
|
|
2525
|
-
## Form.Item
|
|
2526
|
-
|
|
2527
|
-
表单字段组件,用于数据双向绑定、校验、布局等。
|
|
2528
|
-
|
|
2529
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2530
|
-
|--------|--------|--------|--------|--------|
|
|
2531
|
-
| colon | 配合 | boolean | true | |
|
|
2532
|
-
| dependencies | 设置依赖字段,说明 | | - | |
|
|
2533
|
-
| extra | 额外的提示信息,和 | ReactNode | - | |
|
|
2534
|
-
| getValueFromEvent | 设置如何将 event 的值转换成字段值 | (..args: any[]) => any | - | |
|
|
2535
|
-
| getValueProps | 为子元素添加额外的属性 (不建议通过 | (value: any) => Record<string, any> | - | 4.2.0 |
|
|
2536
|
-
| hasFeedback | 配合 | boolean | { icons: | false | icons: 5.9.0 |
|
|
2537
|
-
| help | 提示信息,如不设置,则会根据校验规则自动生成 | ReactNode | - | |
|
|
2538
|
-
| hidden | 是否隐藏字段(依然会收集和校验字段) | boolean | false | 4.4.0 |
|
|
2539
|
-
| htmlFor | 设置子元素 label | string | - | |
|
|
2540
|
-
| initialValue | 设置子元素默认值,如果与 Form 的 | string | - | 4.2.0 |
|
|
2541
|
-
| label | label | ReactNode | - | null: 5.22.0 |
|
|
2542
|
-
| labelAlign | 标签文本对齐方式 | left | right | |
|
|
2543
|
-
| labelCol | label | | - | |
|
|
2544
|
-
| messageVariables | 默认验证字段的信息,查看 | Record<string, string> | - | 4.7.0 |
|
|
2545
|
-
| name | 字段名,支持数组 | | - | |
|
|
2546
|
-
| normalize | 组件获取值后进行转换,再放入 Form 中。不支持异步 | (value, prevValue, prevValues) => any | - | |
|
|
2547
|
-
| noStyle | 为 | boolean | false | |
|
|
2548
|
-
| preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 |
|
|
2549
|
-
| required | 必填样式设置。如不设置,则会根据校验规则自动生成 | boolean | false | |
|
|
2550
|
-
| rules | 校验规则,设置字段的校验逻辑。点击 | | - | |
|
|
2551
|
-
| shouldUpdate | 自定义字段更新逻辑,说明 | boolean | (prevValue, curValue) => boolean | false | |
|
|
2552
|
-
| tooltip | 配置提示信息 | ReactNode | | - | 4.7.0 |
|
|
2553
|
-
| trigger | 设置收集字段值变更的时机。点击 | string | onChange | |
|
|
2554
|
-
| validateFirst | 当某一规则校验不通过时,是否停止剩下的规则的校验。设置 | boolean | | false | parallel |
|
|
2555
|
-
| validateDebounce | 设置防抖,延迟毫秒数后进行校验 | number | - | 5.9.0 |
|
|
2556
|
-
| validateStatus | 校验状态,如不设置,则会根据校验规则自动生成,可选:'success' 'warning' 'error' 'validating' | string | - | |
|
|
2557
|
-
| validateTrigger | 设置字段校验的时机 | string | string[] | onChange | |
|
|
2558
|
-
| valuePropName | 子节点的值的属性。注意:Switch、Checkbox 的 valuePropName 应该是 | string | value | |
|
|
2559
|
-
| wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 | | - | |
|
|
2560
|
-
| layout | 表单项布局 | horizontal | - | 5.18.0 |
|
|
2561
|
-
|
|
2562
|
-
|
|
2563
|
-
被设置了 `name` 属性的 `Form.Item` 包装的控件,表单控件会自动添加 `value`(或 `valuePropName` 指定的其他属性) `onChange`(或 `trigger` 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:
|
|
2564
|
-
|
|
2565
|
-
|
|
2566
|
-
1. 你**不再需要也不应该**用 `onChange` 来做数据收集同步(你可以使用 Form 的 `onValuesChange`),但还是可以继续监听 `onChange` 事件。
|
|
2567
|
-
2. 你不能用控件的 `value` 或 `defaultValue` 等属性来设置表单域的值,默认值可以用 Form 里的 `initialValues` 来设置。注意 `initialValues` 不能被 `setState` 动态更新,你需要用 `setFieldsValue` 来更新。
|
|
2568
|
-
3. 你不应该用 `setState`,可以使用 `form.setFieldsValue` 来动态改变表单值。
|
|
2569
|
-
|
|
2570
|
-
### dependencies
|
|
2571
|
-
|
|
2572
|
-
当字段间存在依赖关系时使用。如果一个字段设置了 `dependencies` 属性。那么它所依赖的字段更新时,该字段将自动触发更新与校验。一种常见的场景,就是注册用户表单的“密码”与“确认密码”字段。“确认密码”校验依赖于“密码”字段,设置 `dependencies` 后,“密码”字段更新会重新触发“校验密码”的校验逻辑。你可以参考[具体例子](#form-demo-dependencies)。
|
|
2573
|
-
|
|
2574
|
-
`dependencies` 不应和 `shouldUpdate` 一起使用,因为这可能带来更新逻辑的混乱。
|
|
2575
|
-
|
|
2576
|
-
### FeedbackIcons
|
|
2577
|
-
|
|
2578
|
-
`({ status: ValidateStatus, errors: ReactNode, warnings: ReactNode }) => Record<ValidateStatus, ReactNode>`
|
|
2579
|
-
|
|
2580
|
-
### shouldUpdate
|
|
2581
|
-
|
|
2582
|
-
Form 通过增量更新方式,只更新被修改的字段相关组件以达到性能优化目的。大部分场景下,你只需要编写代码或者与 [`dependencies`](#dependencies) 属性配合校验即可。而在某些特定场景,例如修改某个字段值后出现新的字段选项、或者纯粹希望表单任意变化都对某一个区域进行渲染。你可以通过 `shouldUpdate` 修改 Form.Item 的更新逻辑。
|
|
2583
|
-
|
|
2584
|
-
当 `shouldUpdate` 为 `true` 时,Form 的任意变化都会使该 Form.Item 重新渲染。这对于自定义渲染一些区域十分有帮助,要注意 Form.Item 里包裹的子组件必须由函数返回,否则 `shouldUpdate` 不会起作用:
|
|
2585
|
-
|
|
2586
|
-
相关issue:[#34500](https://github.com/ant-design/ant-design/issues/34500)
|
|
2587
|
-
|
|
2588
|
-
|
|
2589
|
-
|
|
2590
|
-
|
|
2591
|
-
|
|
2592
|
-
你可以参考[示例](#form-demo-inline-login)查看具体使用场景。
|
|
2593
|
-
|
|
2594
|
-
当 `shouldUpdate` 为方法时,表单的每次数值更新都会调用该方法,提供原先的值与当前的值以供你比较是否需要更新。这对于是否根据值来渲染额外字段十分有帮助:
|
|
2595
|
-
|
|
2596
|
-
|
|
2597
|
-
|
|
2598
|
-
|
|
2599
|
-
|
|
2600
|
-
你可以参考[示例](#form-demo-control-hooks)查看具体使用场景。
|
|
2601
|
-
|
|
2602
|
-
### messageVariables
|
|
2603
|
-
|
|
2604
|
-
你可以通过 `messageVariables` 修改 Form.Item 的默认验证信息。
|
|
2605
|
-
|
|
2606
|
-
|
|
2607
|
-
|
|
2608
|
-
|
|
2609
|
-
|
|
2610
|
-
自 `5.20.2` 起,当你希望不要转译 `${}` 时,你可以通过 `\\${}` 来略过:
|
|
2611
|
-
|
|
2612
|
-
|
|
2613
|
-
|
|
2614
|
-
|
|
2615
|
-
|
|
2616
|
-
## Form.List
|
|
2617
|
-
|
|
2618
|
-
为字段提供数组化管理。
|
|
2619
|
-
|
|
2620
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2621
|
-
|--------|--------|--------|--------|--------|
|
|
2622
|
-
| children | 渲染函数 | (fields: Field[], operation: { add, remove, move }, meta: { errors }) => React.ReactNode | - | |
|
|
2623
|
-
| initialValue | 设置子元素默认值,如果与 Form 的 | any[] | - | 4.9.0 |
|
|
2624
|
-
| name | 字段名,支持数组。List 本身也是字段,因而 | | - | |
|
|
2625
|
-
| rules | 校验规则,仅支持自定义规则。需要配合 | { validator, message }[] | - | 4.7.0 |
|
|
2626
|
-
|
|
2627
|
-
|
|
2628
|
-
|
|
2629
|
-
|
|
2630
|
-
|
|
2631
|
-
|
|
2632
|
-
注意:Form.List 下的字段不应该配置 `initialValue`,你始终应该通过 Form.List 的 `initialValue` 或者 Form 的 `initialValues` 来配置。
|
|
2633
|
-
|
|
2634
|
-
## operation
|
|
2635
|
-
|
|
2636
|
-
Form.List 渲染表单相关操作函数。
|
|
2637
|
-
|
|
2638
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2639
|
-
|--------|--------|--------|--------|--------|
|
|
2640
|
-
| add | 新增表单项 | (defaultValue?: any, insertIndex?: number) => void | insertIndex | 4.6.0 |
|
|
2641
|
-
| move | 移动表单项 | (from: number, to: number) => void | - | |
|
|
2642
|
-
| remove | 删除表单项 | (index: number | number[]) => void | number[] | 4.5.0 |
|
|
2643
|
-
|
|
2644
|
-
|
|
2645
|
-
## Form.ErrorList
|
|
2646
|
-
|
|
2647
|
-
4.7.0 新增。错误展示组件,仅限配合 Form.List 的 rules 一同使用。参考[示例](#form-demo-dynamic-form-item)。
|
|
2648
|
-
|
|
2649
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
2650
|
-
|--------|--------|--------|--------|
|
|
2651
|
-
| errors | 错误列表 | ReactNode[] | - |
|
|
2652
|
-
|
|
2653
|
-
|
|
2654
|
-
## Form.Provider
|
|
2655
|
-
|
|
2656
|
-
提供表单间联动功能,其下设置 `name` 的 Form 更新时,会自动触发对应事件。查看[示例](#form-demo-form-context)。
|
|
2657
|
-
|
|
2658
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
2659
|
-
|--------|--------|--------|--------|
|
|
2660
|
-
| onFormChange | 子表单字段更新时触发 | function(formName: string, info: { changedFields, forms }) | - |
|
|
2661
|
-
| onFormFinish | 子表单提交时触发 | function(formName: string, info: { values, forms }) | - |
|
|
2662
|
-
|
|
2663
|
-
|
|
2664
|
-
|
|
2665
|
-
|
|
2666
|
-
|
|
2667
|
-
|
|
2668
|
-
### FormInstance
|
|
2669
|
-
|
|
2670
|
-
| 名称 | 说明 | 类型 | 版本 |
|
|
2671
|
-
|--------|--------|--------|--------|
|
|
2672
|
-
| getFieldError | 获取对应字段名的错误信息 | (name: | |
|
|
2673
|
-
| getFieldInstance | 获取对应字段实例 | (name: | 4.4.0 |
|
|
2674
|
-
| getFieldsError | 获取一组字段名对应的错误信息,返回为数组形式 | (nameList?: | |
|
|
2675
|
-
| getFieldsValue | 获取一组字段名对应的值,会按照对应结构返回。默认返回现存字段值,当调用 | | |
|
|
2676
|
-
| getFieldValue | 获取对应字段名的值 | (name: | |
|
|
2677
|
-
| isFieldsTouched | 检查一组字段是否被用户操作过, | (nameList?: | |
|
|
2678
|
-
| isFieldTouched | 检查对应字段是否被用户操作过 | (name: | |
|
|
2679
|
-
| isFieldValidating | 检查对应字段是否正在校验 | (name: | |
|
|
2680
|
-
| resetFields | 重置一组字段到 | (fields?: | |
|
|
2681
|
-
| scrollToField | 滚动到对应字段位置 | (name: | focus: 5.24.0 |
|
|
2682
|
-
| setFields | 设置一组字段状态 | (fields: | |
|
|
2683
|
-
| setFieldValue | 设置表单的值(该值将直接传入 form store 中并且 | (name: | 4.22.0 |
|
|
2684
|
-
| setFieldsValue | 设置表单的值(该值将直接传入 form store 中并且 | (values) => void | |
|
|
2685
|
-
| submit | 提交表单,与点击 | () => void | |
|
|
2686
|
-
| validateFields | 触发表单验证,设置 | (nameList?: | |
|
|
2687
|
-
|
|
2688
|
-
|
|
2689
|
-
#### validateFields
|
|
2690
|
-
|
|
2691
|
-
|
|
2692
|
-
|
|
2693
|
-
|
|
2694
|
-
|
|
2695
|
-
返回示例:
|
|
2696
|
-
|
|
2697
|
-
|
|
2698
|
-
|
|
2699
|
-
|
|
2700
|
-
|
|
2701
|
-
## Hooks
|
|
2702
|
-
|
|
2703
|
-
### Form.useForm
|
|
2704
|
-
|
|
2705
|
-
`type Form.useForm = (): [FormInstance]`
|
|
2706
|
-
|
|
2707
|
-
创建 Form 实例,用于管理所有数据状态。
|
|
2708
|
-
|
|
2709
|
-
### Form.useFormInstance
|
|
2710
|
-
|
|
2711
|
-
`type Form.useFormInstance = (): FormInstance`
|
|
2712
|
-
|
|
2713
|
-
`4.20.0` 新增,获取当前上下文正在使用的 Form 实例,常见于封装子组件消费无需透传 Form 实例:
|
|
2714
|
-
|
|
2715
|
-
|
|
2716
|
-
|
|
2717
|
-
|
|
2718
|
-
|
|
2719
|
-
### Form.useWatch
|
|
2720
|
-
|
|
2721
|
-
`type Form.useWatch = (namePath: NamePath | (selector: (values: Store)) => any, formInstance?: FormInstance | WatchOptions): Value`
|
|
2722
|
-
|
|
2723
|
-
`5.12.0` 新增 `selector`
|
|
2724
|
-
|
|
2725
|
-
用于直接获取 form 中字段对应的值。通过该 Hooks 可以与诸如 `useSWR` 进行联动从而降低维护成本:
|
|
2726
|
-
|
|
2727
|
-
|
|
2728
|
-
|
|
2729
|
-
|
|
2730
|
-
|
|
2731
|
-
如果你的组件被包裹在 `Form.Item` 内部,你可以省略第二个参数,`Form.useWatch` 会自动找到上层最近的 `FormInstance`。
|
|
2732
|
-
|
|
2733
|
-
`useWatch` 默认只监听在 Form 中注册的字段,如果需要监听非注册字段,可以通过配置 `preserve` 进行监听:
|
|
2734
|
-
|
|
2735
|
-
|
|
2736
|
-
|
|
2737
|
-
|
|
2738
|
-
|
|
2739
|
-
### Form.Item.useStatus
|
|
2740
|
-
|
|
2741
|
-
`type Form.Item.useStatus = (): { status: ValidateStatus | undefined, errors: ReactNode[], warnings: ReactNode[] }`
|
|
2742
|
-
|
|
2743
|
-
`4.22.0` 新增,可用于获取当前 Form.Item 的校验状态,如果上层没有 Form.Item,`status` 将会返回 `undefined`。`5.4.0` 新增 `errors` 和 `warnings`,可用于获取当前 Form.Item 的错误信息和警告信息:
|
|
2744
|
-
|
|
2745
|
-
|
|
2746
|
-
|
|
2747
|
-
|
|
2748
|
-
|
|
2749
|
-
#### 与其他获取数据的方式的区别
|
|
2750
|
-
|
|
2751
|
-
Form 仅会对变更的 Field 进行刷新,从而避免完整的组件刷新可能引发的性能问题。因而你无法在 render 阶段通过 `form.getFieldsValue` 来实时获取字段值,而 `useWatch` 提供了一种特定字段访问的方式,从而使得在当前组件中可以直接消费字段的值。同时,如果为了更好的渲染性能,你可以通过 Field 的 renderProps 仅更新需要更新的部分。而当当前组件更新或者 effect 都不需要消费字段值时,则可以通过 `onValuesChange` 将数据抛出,从而避免组件更新。
|
|
2752
|
-
|
|
2753
|
-
## Interface
|
|
2754
|
-
|
|
2755
|
-
### NamePath
|
|
2756
|
-
|
|
2757
|
-
`string | number | (string | number)[]`
|
|
2758
|
-
|
|
2759
|
-
### GetFieldsValue
|
|
2760
|
-
|
|
2761
|
-
`getFieldsValue` 提供了多种重载方法:
|
|
2762
|
-
|
|
2763
|
-
#### getFieldsValue(nameList?: true | [NamePath](#namepath)[], filterFunc?: FilterFunc)
|
|
2764
|
-
|
|
2765
|
-
当不提供 `nameList` 时,返回所有注册字段,这也包含 List 下所有的值(即便 List 下没有绑定 Item)。
|
|
2766
|
-
|
|
2767
|
-
当 `nameList` 为 `true` 时,返回 store 中所有的值,包含未注册字段。例如通过 `setFieldsValue` 设置了不存在的 Item 的值,也可以通过 `true` 全部获取。
|
|
2768
|
-
|
|
2769
|
-
当 `nameList` 为数组时,返回规定路径的值。需要注意的是,`nameList` 为嵌套数组。例如你需要某路径值应该如下:
|
|
2770
|
-
|
|
2771
|
-
|
|
2772
|
-
|
|
2773
|
-
|
|
2774
|
-
|
|
2775
|
-
#### getFieldsValue({ strict?: boolean, filter?: FilterFunc })
|
|
2776
|
-
|
|
2777
|
-
`5.8.0` 新增接受配置参数。当 `strict` 为 `true` 时会仅匹配 Item 的值。例如 `{ list: [{ bamboo: 1, little: 2 }] }` 中,如果 List 仅绑定了 `bamboo` 字段,那么 `getFieldsValue({ strict: true })` 会只获得 `{ list: [{ bamboo: 1 }] }`。
|
|
2778
|
-
|
|
2779
|
-
### FilterFunc
|
|
2780
|
-
|
|
2781
|
-
用于过滤一些字段值,`meta` 会返回字段相关信息。例如可以用来获取仅被用户修改过的值等等。
|
|
2782
|
-
|
|
2783
|
-
|
|
2784
|
-
|
|
2785
|
-
|
|
2786
|
-
|
|
2787
|
-
### FieldData
|
|
2788
|
-
|
|
2789
|
-
| 名称 | 说明 | 类型 |
|
|
2790
|
-
|--------|--------|--------|
|
|
2791
|
-
| errors | 错误信息 | string[] |
|
|
2792
|
-
| warnings | 警告信息 | string[] |
|
|
2793
|
-
| name | 字段名称 | |
|
|
2794
|
-
| touched | 是否被用户操作过 | boolean |
|
|
2795
|
-
| validating | 是否正在校验 | boolean |
|
|
2796
|
-
| value | 字段对应值 | any |
|
|
2797
|
-
|
|
2798
|
-
|
|
2799
|
-
### Rule
|
|
2800
|
-
|
|
2801
|
-
Rule 支持接收 object 进行配置,也支持 function 来动态获取 form 的数据:
|
|
2802
|
-
|
|
2803
|
-
|
|
2804
|
-
|
|
2805
|
-
|
|
2806
|
-
|
|
2807
|
-
| 名称 | 说明 | 类型 | 版本 |
|
|
2808
|
-
|--------|--------|--------|--------|
|
|
2809
|
-
| defaultField | 仅在 | | |
|
|
2810
|
-
| enum | 是否匹配枚举中的值(需要将 | any[] | |
|
|
2811
|
-
| fields | 仅在 | Record<string, | |
|
|
2812
|
-
| len | string 类型时为字符串长度;number 类型时为确定数字; array 类型时为数组长度 | number | |
|
|
2813
|
-
| max | 必须设置 | number | |
|
|
2814
|
-
| message | 错误信息,不设置时会通过 | string | ReactElement | |
|
|
2815
|
-
| min | 必须设置 | number | |
|
|
2816
|
-
| pattern | 正则表达式匹配 | RegExp | |
|
|
2817
|
-
| required | 是否为必选字段 | boolean | |
|
|
2818
|
-
| transform | 将字段值转换成目标值后进行校验 | (value) => any | |
|
|
2819
|
-
| type | 类型,常见有 | string | |
|
|
2820
|
-
| validateTrigger | 设置触发验证时机,必须是 Form.Item 的 | string | string[] | |
|
|
2821
|
-
| validator | 自定义校验,接收 Promise 作为返回值。 | ( | |
|
|
2822
|
-
| warningOnly | 仅警告,不阻塞表单提交 | boolean | 4.17.0 |
|
|
2823
|
-
| whitespace | 如果字段仅包含空格则校验不通过,只在 | boolean | |
|
|
2824
|
-
|
|
2825
|
-
|
|
2826
|
-
### WatchOptions
|
|
2827
|
-
|
|
2828
|
-
| 名称 | 说明 | 类型 | 默认值 | 版本 |
|
|
2829
|
-
|--------|--------|--------|--------|--------|
|
|
2830
|
-
| form | 指定 Form 实例 | FormInstance | 当前 context 中的 Form | 5.4.0 |
|
|
2831
|
-
| preserve | 是否监视没有对应的 | boolean | false | 5.4.0 |
|
|
2832
|
-
|
|
2833
|
-
|
|
2834
|
-
|
|
2835
|
-
|
|
2836
|
-
<DemoTitle title="FloatButton" desc="用于网站上的全局功能;无论浏览到何处都可以看见的按钮。"></DemoTitle>
|
|
2837
|
-
|
|
2838
|
-
|
|
2839
|
-
|
|
2840
|
-
|
|
2841
|
-
|
|
2842
|
-
示例
|
|
2843
|
-
|
|
2844
|
-
<Install>
|
|
2845
|
-
import { FloatButton } from 'antd';
|
|
2846
|
-
</Install>
|
|
2847
|
-
|
|
2848
|
-
#### 悬浮按钮示例
|
|
2849
|
-
|
|
2850
|
-
以下是此组件的示例和变体
|
|
2851
|
-
|
|
2852
|
-
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
|
|
2856
|
-
以主题色为背景的悬浮按钮
|
|
2857
|
-
|
|
2858
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd float-button](https://ant.design/components/float-button-cn) 查看更多 API
|
|
2859
|
-
|
|
2860
|
-
|
|
2861
|
-
## antd API
|
|
2862
|
-
|
|
2863
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
2864
|
-
|
|
2865
|
-
自 `antd@5.0.0` 版本开始提供该组件。
|
|
2866
|
-
|
|
2867
|
-
### 共同的 API
|
|
2868
|
-
|
|
2869
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2870
|
-
|--------|--------|--------|--------|--------|
|
|
2871
|
-
| icon | 自定义图标 | ReactNode | - | |
|
|
2872
|
-
| description | 文字及其它内容 | ReactNode | - | |
|
|
2873
|
-
| tooltip | 气泡卡片的内容 | ReactNode | | - | TooltipProps: 5.25.0 |
|
|
2874
|
-
| type | 设置按钮类型 | default | default | |
|
|
2875
|
-
| shape | 设置按钮形状 | circle | circle | |
|
|
2876
|
-
| onClick | 点击按钮时的回调 | (event) => void | - | |
|
|
2877
|
-
| href | 点击跳转的地址,指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2878
|
-
| target | 相当于 a 标签的 target 属性,href 存在时生效 | string | - | |
|
|
2879
|
-
| htmlType | 设置 | submit | button | 5.21.0 |
|
|
2880
|
-
| badge | 带徽标数字的悬浮按钮(不支持 | | - | 5.4.0 |
|
|
2881
|
-
|
|
2882
|
-
|
|
2883
|
-
### FloatButton.Group
|
|
2884
|
-
|
|
2885
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2886
|
-
|--------|--------|--------|--------|--------|
|
|
2887
|
-
| shape | 设置包含的 FloatButton 按钮形状 | circle | circle | |
|
|
2888
|
-
| trigger | 触发方式(有触发方式为菜单模式) | click | - | |
|
|
2889
|
-
| open | 受控展开,需配合 trigger 一起使用 | boolean | - | |
|
|
2890
|
-
| closeIcon | 自定义关闭按钮 | React.ReactNode | <CloseOutlined /> | |
|
|
2891
|
-
| placement | 自定义菜单弹出位置 | top | top | 5.21.0 |
|
|
2892
|
-
| onOpenChange | 展开收起时的回调,需配合 trigger 一起使用 | (open: boolean) => void | - | |
|
|
2893
|
-
| onClick | 点击按钮时的回调(仅在菜单模式中有效) | (event) => void | - | 5.3.0 |
|
|
2894
|
-
|
|
2895
|
-
|
|
2896
|
-
### FloatButton.BackTop
|
|
2897
|
-
|
|
2898
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2899
|
-
|--------|--------|--------|--------|--------|
|
|
2900
|
-
| duration | 回到顶部所需时间(ms) | number | 450 | |
|
|
2901
|
-
| target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window | |
|
|
2902
|
-
| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |
|
|
2903
|
-
| onClick | 点击按钮的回调函数 | () => void | - | |
|
|
2904
|
-
|
|
2905
|
-
|
|
2906
|
-
|
|
2907
|
-
|
|
2908
|
-
<DemoTitle title="Empty" desc="用于空状态的占位图形展示。"></DemoTitle>
|
|
2909
|
-
|
|
2910
|
-
|
|
2911
|
-
|
|
2912
|
-
|
|
2913
|
-
|
|
2914
|
-
示例
|
|
2915
|
-
|
|
2916
|
-
<Install>Empty</Install>
|
|
2917
|
-
|
|
2918
|
-
#### 空状态示例
|
|
2919
|
-
|
|
2920
|
-
以下是空状态组件的示例和变体
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
|
|
2926
|
-
无权限
|
|
2927
|
-
|
|
2928
|
-
|
|
2929
|
-
|
|
2930
|
-
|
|
2931
|
-
其他
|
|
2932
|
-
|
|
2933
|
-
## API
|
|
2934
|
-
|
|
2935
|
-
| <div><span class="lang-en">Attribute</span><span class="lang-cn">属性名</span></div> | <div><span class="lang-en">Description</span><span class="lang-cn">描述</span></div> | <div><span class="lang-en">Type</span><span class="lang-cn">类型</span></div> | <div><span class="lang-en">Default</span><span class="lang-cn">默认值</span></div> |
|
|
2936
|
-
|--------|--------|--------|--------|
|
|
2937
|
-
| type | <div><span class="lang-en"></span><span class="lang-cn">空状态类型</span></div> | | 'noData'
|
|
2938
|
-
| 'networkError'
|
|
2939
|
-
| '404'
|
|
2940
|
-
| 'arrears'
|
|
2941
|
-
| 'desktopOnly'
|
|
2942
|
-
| 'noAudio'
|
|
2943
|
-
| 'noImage'
|
|
2944
|
-
| 'noVideo'
|
|
2945
|
-
| 'noAccess'
|
|
2946
|
-
| 'error'
|
|
2947
|
-
| 'noModel'
|
|
2948
|
-
| 'noApp'
|
|
2949
|
-
| 'success'
|
|
2950
|
-
| 'failed'
|
|
2951
|
-
| 'inProgress'
|
|
2952
|
-
| 'stayTuned' | 'noData' |
|
|
2953
|
-
| texture | <div><span class="lang-en"></span><span class="lang-cn">是否显示纹理</span></div> | boolean | true |
|
|
2954
|
-
| image | <div><span class="lang-en"></span><span class="lang-cn">图片地址</span></div> | string | 默认是no data的图片 |
|
|
2955
|
-
| imageStyle | <div><span class="lang-en"></span><span class="lang-cn">图片样式</span></div> | React.CSSProperties | |
|
|
2956
|
-
| title | <div><span class="lang-en"></span><span class="lang-cn">标题内容</span></div> | React.ReactNode | |
|
|
2957
|
-
| description | <div><span class="lang-en"></span><span class="lang-cn">自定义描述内容</span></div> | React.ReactNode | |
|
|
2958
|
-
| onOk | <div><span class="lang-en"></span><span class="lang-cn">ok按钮的点击事件</span></div> | (e: React.MouseEvent<HTMLButtonElement>) => void | |
|
|
2959
|
-
| okText | <div><span class="lang-en"></span><span class="lang-cn">ok按钮的文本</span></div> | React.ReactNode | |
|
|
2960
|
-
| okType | <div><span class="lang-en"></span><span class="lang-cn">ok按钮的类型</span></div> | SparkButtonProps['type'] | |
|
|
2961
|
-
| okButtonProps | <div><span class="lang-en"></span><span class="lang-cn">ok按钮的props</span></div> | SparkButtonProps | |
|
|
2962
|
-
| children | <div><span class="lang-en"></span><span class="lang-cn">自定义空状态的内容</span></div> | React.ReactNode | |
|
|
2963
|
-
| className | <div><span class="lang-en"></span><span class="lang-cn">自定义空状态的类名</span></div> | string | |
|
|
2964
|
-
| style | <div><span class="lang-en"></span><span class="lang-cn">自定义空状态的样式</span></div> | React.CSSProperties | |
|
|
2965
|
-
| size | <div><span class="lang-en"></span><span class="lang-cn"></span></div> | React.CSSProperties['width'] | |
|
|
2966
|
-
|
|
2967
|
-
|
|
2968
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd empty](https://ant.design/components/empty-cn) 查看更多 API
|
|
2969
|
-
|
|
2970
|
-
|
|
2971
|
-
## antd API
|
|
2972
|
-
|
|
2973
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
2974
|
-
|
|
2975
|
-
|
|
2976
|
-
|
|
2977
|
-
|
|
2978
|
-
|
|
2979
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2980
|
-
|--------|--------|--------|--------|--------|
|
|
2981
|
-
|
|
2982
|
-
|
|
2983
|
-
## 内置图片
|
|
2984
|
-
|
|
2985
|
-
|
|
2986
|
-
- Empty.PRESENTED_IMAGE_SIMPLE,<div class="site-empty-buildIn-img site-empty-buildIn-simple"><div>
|
|
2987
|
-
|
|
2988
|
-
- Empty.PRESENTED_IMAGE_DEFAULT,<div class="site-empty-buildIn-img site-empty-buildIn-default"></div>
|
|
2989
|
-
|
|
2990
|
-
<style>
|
|
2991
|
-
.site-empty-buildIn-img {
|
|
2992
|
-
background-repeat: no-repeat;
|
|
2993
|
-
background-size: contain;
|
|
2994
|
-
}
|
|
2995
|
-
.site-empty-buildIn-simple {
|
|
2996
|
-
width: 55px;
|
|
2997
|
-
height: 35px;
|
|
2998
|
-
background-image: url("https://user-images.githubusercontent.com/507615/54591679-b0ceb580-4a65-11e9-925c-ad15b4eae93d.png");
|
|
2999
|
-
}
|
|
3000
|
-
.site-empty-buildIn-default {
|
|
3001
|
-
width: 121px;
|
|
3002
|
-
height: 116px;
|
|
3003
|
-
background-image: url("https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png");
|
|
3004
|
-
}
|
|
3005
|
-
</style>
|
|
3006
|
-
|
|
3007
|
-
|
|
3008
|
-
|
|
3009
|
-
<DemoTitle title="Dropdown" desc="向下弹出的列表。"></DemoTitle>
|
|
3010
|
-
|
|
3011
|
-
|
|
3012
|
-
|
|
3013
|
-
|
|
3014
|
-
|
|
3015
|
-
基础用法
|
|
3016
|
-
|
|
3017
|
-
<Install>Dropdown</Install>
|
|
3018
|
-
|
|
3019
|
-
#### 下拉菜单示例
|
|
3020
|
-
|
|
3021
|
-
以下是此下拉菜单组件的示例和变体
|
|
3022
|
-
|
|
3023
|
-
|
|
3024
|
-
|
|
3025
|
-
|
|
3026
|
-
|
|
3027
|
-
带图标的下拉菜单
|
|
3028
|
-
|
|
3029
|
-
|
|
3030
|
-
|
|
3031
|
-
|
|
3032
|
-
危险状态菜单项
|
|
3033
|
-
|
|
3034
|
-
|
|
3035
|
-
|
|
3036
|
-
|
|
3037
|
-
支持选择
|
|
3038
|
-
|
|
3039
|
-
|
|
3040
|
-
|
|
3041
|
-
|
|
3042
|
-
支持级联
|
|
3043
|
-
|
|
3044
|
-
#### API
|
|
3045
|
-
|
|
3046
|
-
ApiParser解析结果为空
|
|
3047
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd dropdown](https://ant.design/components/dropdown-cn) 查看更多 API
|
|
3048
|
-
|
|
3049
|
-
|
|
3050
|
-
## antd API
|
|
3051
|
-
|
|
3052
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
3053
|
-
|
|
3054
|
-
### Dropdown
|
|
3055
|
-
|
|
3056
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3057
|
-
|--------|--------|--------|--------|--------|
|
|
3058
|
-
| arrow | 下拉框箭头是否显示 | boolean | { pointAtCenter: boolean } | false | |
|
|
3059
|
-
| autoAdjustOverflow | 下拉框被遮挡时自动调整位置 | boolean | true | 5.2.0 |
|
|
3060
|
-
| autoFocus | 打开后自动聚焦下拉框 | boolean | false | 4.21.0 |
|
|
3061
|
-
| disabled | 菜单是否禁用 | boolean | - | |
|
|
3062
|
-
| | 关闭后是否销毁 Dropdown,使用 | boolean | false | |
|
|
3063
|
-
| destroyOnHidden | 关闭后是否销毁 Dropdown | boolean | false | 5.25.0 |
|
|
3064
|
-
| | 自定义下拉框内容,使用 | (menus: ReactNode) => ReactNode | - | 4.24.0 |
|
|
3065
|
-
| popupRender | 自定义弹出框内容 | (menus: ReactNode) => ReactNode | - | 5.25.0 |
|
|
3066
|
-
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
3067
|
-
| menu | 菜单配置项 | | - | 4.24.0 |
|
|
3068
|
-
| overlayClassName | 下拉根元素的类名称 | string | - | |
|
|
3069
|
-
| overlayStyle | 下拉根元素的样式 | CSSProperties | - | |
|
|
3070
|
-
| placement | 菜单弹出位置: | string | bottomLeft | |
|
|
3071
|
-
| trigger | 触发下拉的行为,移动端不支持 hover | Array< | [ | |
|
|
3072
|
-
| open | 菜单是否显示,小于 4.23.0 使用 | boolean | - | 4.23.0 |
|
|
3073
|
-
| onOpenChange | 菜单显示状态改变时调用,点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 | (open: boolean, info: { source: 'trigger' | 'menu' }) => void | - | info.source |
|
|
3074
|
-
|
|
3075
|
-
|
|
3076
|
-
### Dropdown.Button
|
|
3077
|
-
|
|
3078
|
-
属性与 Dropdown 的相同。还包含以下属性:
|
|
3079
|
-
|
|
3080
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3081
|
-
|--------|--------|--------|--------|--------|
|
|
3082
|
-
| buttonsRender | 自定义左右两个按钮 | (buttons: ReactNode[]) => ReactNode[] | - | |
|
|
3083
|
-
| loading | 设置按钮载入状态,和 | boolean | { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
3084
|
-
| danger | 设置危险按钮 | boolean | - | 4.23.0 |
|
|
3085
|
-
| icon | 右侧的 icon | ReactNode | - | |
|
|
3086
|
-
| size | 按钮大小,和 | large | middle | |
|
|
3087
|
-
| type | 按钮类型,和 | primary | default | |
|
|
3088
|
-
| onClick | 点击左侧按钮的回调,和 | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - | |
|
|
3089
|
-
|
|
3090
|
-
|
|
3091
|
-
## 注意
|
|
3092
|
-
|
|
3093
|
-
请确保 `Dropdown` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
|
|
3094
|
-
|
|
3095
|
-
|
|
3096
|
-
|
|
3097
|
-
<DemoTitle title="Descriptions" desc="展示多个只读字段的组合"></DemoTitle>
|
|
3098
|
-
|
|
3099
|
-
|
|
3100
|
-
|
|
3101
|
-
|
|
3102
|
-
|
|
3103
|
-
示例
|
|
3104
|
-
|
|
3105
|
-
<Install>Descriptions</Install>
|
|
3106
|
-
|
|
3107
|
-
#### 描述面板示例
|
|
3108
|
-
|
|
3109
|
-
以下是此组件的示例和变体
|
|
3110
|
-
|
|
3111
|
-
|
|
3112
|
-
|
|
3113
|
-
|
|
3114
|
-
|
|
3115
|
-
竖直方向
|
|
3116
|
-
|
|
3117
|
-
#### API
|
|
3118
|
-
|
|
3119
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd descriptions](https://ant.design/components/descriptions-cn) 查看更多 API
|
|
3120
|
-
|
|
3121
|
-
|
|
3122
|
-
## antd API
|
|
3123
|
-
|
|
3124
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
3125
|
-
|
|
3126
|
-
### Descriptions
|
|
3127
|
-
|
|
3128
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3129
|
-
|--------|--------|--------|--------|--------|
|
|
3130
|
-
| bordered | 是否展示边框 | boolean | false | |
|
|
3131
|
-
| colon | 配置 | boolean | true | |
|
|
3132
|
-
| column | 一行的 | number | | 3 | |
|
|
3133
|
-
| | 自定义内容样式,请使用 | CSSProperties | - | 4.10.0 |
|
|
3134
|
-
| extra | 描述列表的操作区域,显示在右上方 | ReactNode | - | 4.5.0 |
|
|
3135
|
-
| items | 描述列表项内容 | | - | 5.8.0 |
|
|
3136
|
-
| | 自定义标签样式,请使用 | CSSProperties | - | 4.10.0 |
|
|
3137
|
-
| layout | 描述布局 | horizontal | horizontal | |
|
|
3138
|
-
| size | 设置列表的大小。可以设置为 | default | - | |
|
|
3139
|
-
| title | 描述列表的标题,显示在最顶部 | ReactNode | - | |
|
|
3140
|
-
| classNames | 语义化结构 class | | - | 5.23.0 |
|
|
3141
|
-
| styles | 语义化结构 style | | - | 5.23.0 |
|
|
3142
|
-
|
|
3143
|
-
|
|
3144
|
-
### DescriptionItem
|
|
3145
|
-
|
|
3146
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3147
|
-
|--------|--------|--------|--------|--------|
|
|
3148
|
-
| | 自定义内容样式,请使用 | CSSProperties | - | 4.9.0 |
|
|
3149
|
-
| label | 内容的描述 | ReactNode | - | |
|
|
3150
|
-
| | 自定义标签样式,请使用 | CSSProperties | - | 4.9.0 |
|
|
3151
|
-
| span | 包含列的数量( | number| | 1 | screens: 5.9.0 |
|
|
3152
|
-
|
|
3153
|
-
|
|
3154
|
-
span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`(或 `contentStyle`)时,两者会同时作用。样式冲突时,后者会覆盖前者。
|
|
3155
|
-
|
|
3156
|
-
|
|
3157
|
-
|
|
3158
|
-
<DemoTitle title="Drawer" desc="从页面一侧滑入的操作面板,用于承载临时界面内容。"></DemoTitle>
|
|
3159
|
-
|
|
3160
|
-
|
|
3161
|
-
|
|
3162
|
-
|
|
3163
|
-
|
|
3164
|
-
示例
|
|
3165
|
-
|
|
3166
|
-
<Install>Drawer</Install>
|
|
3167
|
-
|
|
3168
|
-
#### 全局提示示例
|
|
3169
|
-
|
|
3170
|
-
以下是全局提示组件的示例和变体
|
|
3171
|
-
|
|
3172
|
-
|
|
3173
|
-
|
|
3174
|
-
|
|
3175
|
-
|
|
3176
|
-
不同滑入的位置
|
|
3177
|
-
|
|
3178
|
-
|
|
3179
|
-
|
|
3180
|
-
|
|
3181
|
-
多级抽屉
|
|
3182
|
-
|
|
3183
|
-
|
|
3184
|
-
|
|
3185
|
-
|
|
3186
|
-
自定义样式
|
|
3187
|
-
|
|
3188
|
-
|
|
3189
|
-
|
|
3190
|
-
|
|
3191
|
-
预设宽度
|
|
3192
|
-
|
|
3193
|
-
#### API
|
|
3194
|
-
|
|
3195
|
-
| <div><span class="lang-en">Attribute</span><span class="lang-cn">属性名</span></div> | <div><span class="lang-en">Description</span><span class="lang-cn">描述</span></div> | <div><span class="lang-en">Type</span><span class="lang-cn">类型</span></div> | <div><span class="lang-en">Default</span><span class="lang-cn">默认值</span></div> |
|
|
3196
|
-
|--------|--------|--------|--------|
|
|
3197
|
-
| showDivider | <div><span class="lang-en">whether to show divider</span><span class="lang-cn">是否显示分割线</span></div> | boolean | true |
|
|
3198
|
-
|
|
3199
|
-
##### 带按钮的抽屉
|
|
3200
|
-
|
|
3201
|
-
ApiParser解析结果为空
|
|
3202
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd drawer](https://ant.design/components/drawer-cn) 查看更多 API
|
|
3203
|
-
|
|
3204
|
-
|
|
3205
|
-
## antd API
|
|
3206
|
-
|
|
3207
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
3208
|
-
|
|
3209
|
-
<!-- prettier-ignore -->
|
|
3210
|
-
<Container type="warning" title="注意">
|
|
3211
|
-
v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v4 `className` 与 `style` 改至配置 Drawer 窗体样式以和 Modal 对齐。
|
|
3212
|
-
</Container>
|
|
3213
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3214
|
-
|--------|--------|--------|--------|--------|
|
|
3215
|
-
| autoFocus | 抽屉展开后是否将焦点切换至其 DOM 节点 | boolean | true | 4.17.0 |
|
|
3216
|
-
| afterOpenChange | 切换抽屉时动画结束后的回调 | function(open) | - | |
|
|
3217
|
-
| className | Drawer 容器外层 className 设置,如果需要设置最外层,请使用 rootClassName | string | - | |
|
|
3218
|
-
| classNames | 语义化结构 className | | - | 5.10.0 |
|
|
3219
|
-
| closeIcon | 自定义关闭图标。5.7.0:设置为 | ReactNode | <CloseOutlined /> | |
|
|
3220
|
-
| | 关闭时销毁 Drawer 里的子元素 | boolean | false | |
|
|
3221
|
-
| destroyOnHidden | 关闭时销毁 Drawer 里的子元素 | boolean | false | 5.25.0 |
|
|
3222
|
-
| extra | 抽屉右上角的操作区域 | ReactNode | - | 4.17.0 |
|
|
3223
|
-
| footer | 抽屉的页脚 | ReactNode | - | |
|
|
3224
|
-
| forceRender | 预渲染 Drawer 内元素 | boolean | false | |
|
|
3225
|
-
| getContainer | 指定 Drawer 挂载的节点, | HTMLElement | () => HTMLElement | Selectors | false | body | |
|
|
3226
|
-
| height | 高度,在 | string | number | 378 | |
|
|
3227
|
-
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
|
|
3228
|
-
| mask | 是否展示遮罩 | boolean | true | |
|
|
3229
|
-
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
|
|
3230
|
-
| placement | 抽屉的方向 | top | right | |
|
|
3231
|
-
| push | 用于设置多层 Drawer 的推动行为 | boolean | { distance: string | number } | { distance: 180 } | 4.5.0+ |
|
|
3232
|
-
| rootStyle | 可用于设置 Drawer 最外层容器的样式,和 | CSSProperties | - | |
|
|
3233
|
-
| size | 预设抽屉宽度(或高度),default | 'default' | 'large' | 'default' | 4.17.0 |
|
|
3234
|
-
| style | 设计 Drawer 容器样式,如果你只需要设置内容部分请使用 | CSSProperties | - | |
|
|
3235
|
-
| styles | 语义化结构 style | | - | 5.10.0 |
|
|
3236
|
-
| title | 标题 | ReactNode | - | |
|
|
3237
|
-
| loading | 显示骨架屏 | boolean | false | 5.17.0 |
|
|
3238
|
-
| open | Drawer 是否可见 | boolean | - |
|
|
3239
|
-
| width | 宽度 | string | number | 378 | |
|
|
3240
|
-
| zIndex | 设置 Drawer 的 | number | 1000 | |
|
|
3241
|
-
| onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - | |
|
|
3242
|
-
| drawerRender | 自定义渲染抽屉 | (node: ReactNode) => ReactNode | - | 5.18.0 |
|
|
3243
|
-
|
|
3244
|
-
|
|
3245
|
-
|
|
3246
|
-
|
|
3247
|
-
<DemoTitle title="DatePicker" desc="输入或选择时间的控件。"></DemoTitle>
|
|
3248
|
-
|
|
3249
|
-
|
|
3250
|
-
|
|
3251
|
-
|
|
3252
|
-
|
|
3253
|
-
示例
|
|
3254
|
-
|
|
3255
|
-
<Install>DatePicker</Install>
|
|
3256
|
-
|
|
3257
|
-
#### 时间选择框示例
|
|
3258
|
-
|
|
3259
|
-
用于选择或输入日期,支持指定范围并可预设常用日期。
|
|
3260
|
-
|
|
3261
|
-
|
|
3262
|
-
|
|
3263
|
-
|
|
3264
|
-
|
|
3265
|
-
不同类型的日期选择器
|
|
3266
|
-
|
|
3267
|
-
|
|
3268
|
-
|
|
3269
|
-
|
|
3270
|
-
|
|
3271
|
-
选择日期范围
|
|
3272
|
-
|
|
3273
|
-
|
|
3274
|
-
|
|
3275
|
-
|
|
3276
|
-
|
|
3277
|
-
多选
|
|
3278
|
-
|
|
3279
|
-
#### API
|
|
3280
|
-
|
|
3281
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd date-picker](https://ant.design/components/date-picker-cn) 查看更多 API
|
|
3282
|
-
|
|
3283
|
-
|
|
3284
|
-
## antd API
|
|
3285
|
-
|
|
3286
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
3287
|
-
|
|
3288
|
-
日期类组件包括以下五种形式。
|
|
3289
|
-
|
|
3290
|
-
|
|
3291
|
-
- DatePicker
|
|
3292
|
-
- DatePicker[picker="month"]
|
|
3293
|
-
- DatePicker[picker="week"]
|
|
3294
|
-
- DatePicker[picker="year"]
|
|
3295
|
-
- DatePicker[picker="quarter"] (4.1.0 新增)
|
|
3296
|
-
- RangePicker
|
|
3297
|
-
|
|
3298
|
-
### 国际化配置
|
|
3299
|
-
|
|
3300
|
-
默认配置为 en-US,如果你需要设置其他语言,推荐在入口处使用我们提供的国际化组件,详见:[ConfigProvider 国际化](https://ant.design/components/config-provider-cn/)。
|
|
3301
|
-
|
|
3302
|
-
如有特殊需求(仅修改单一组件的语言),请使用 locale 参数,参考:[默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)。
|
|
3303
|
-
|
|
3304
|
-
|
|
3305
|
-
|
|
3306
|
-
|
|
3307
|
-
|
|
3308
|
-
<!-- prettier-ignore -->
|
|
3309
|
-
<Container type="warning">
|
|
3310
|
-
在搭配 Next.js 的 App Router 使用时,注意在引入 dayjs 的 locale 文件时加上 `'use client'`。这是由于 Ant Design 的组件都是客户端组件,在 RSC 中引入 dayjs 的 locale 文件将不会在客户端生效。
|
|
3311
|
-
</Container>
|
|
3312
|
-
### 共同的 API
|
|
3313
|
-
|
|
3314
|
-
以下 API 为 DatePicker、 RangePicker 共享的 API。
|
|
3315
|
-
|
|
3316
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3317
|
-
|--------|--------|--------|--------|--------|
|
|
3318
|
-
| allowClear | 自定义清除按钮 | boolean | { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
|
|
3319
|
-
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
3320
|
-
| className | 选择器 className | string | - | |
|
|
3321
|
-
| dateRender | 自定义日期单元格的内容,5.4.0 起用 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 |
|
|
3322
|
-
| cellRender | 自定义单元格的内容 | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' | 'end', type: PanelMode, locale?: Locale, subType?: 'hour' | 'minute' | 'second' | 'meridiem' }) => React.ReactNode | - | 5.4.0 |
|
|
3323
|
-
| components | 自定义面板 | Record<Panel | 'input', React.ComponentType> | - | 5.14.0 |
|
|
3324
|
-
| defaultOpen | 是否默认展开控制弹层 | boolean | - | |
|
|
3325
|
-
| disabled | 禁用 | boolean | false | |
|
|
3326
|
-
| disabledDate | 不可选择的日期 | (currentDate: dayjs, info: { from?: dayjs, type: Picker }) => boolean | - | info |
|
|
3327
|
-
| format | 设置日期格式,为数组时支持多格式匹配,展示以第一个为准。配置参考 | | | |
|
|
3328
|
-
| order | 多选、范围时是否自动排序 | boolean | true | 5.14.0 |
|
|
3329
|
-
| preserveInvalidOnBlur | 失去焦点是否要清空输入框内无效内容 | boolean | false | 5.14.0 |
|
|
3330
|
-
| | 额外的弹出日历 className,使用 | string | - | 4.23.0 |
|
|
3331
|
-
| getPopupContainer | 定义浮层的容器,默认为 body 上新建 div | function(trigger) | - | |
|
|
3332
|
-
| inputReadOnly | 设置输入框为只读(避免在移动设备上打开虚拟键盘) | boolean | false | |
|
|
3333
|
-
| locale | 国际化配置 | object | | |
|
|
3334
|
-
| minDate | 最小日期,同样会限制面板的切换范围 | dayjs | - | 5.14.0 |
|
|
3335
|
-
| maxDate | 最大日期,同样会限制面板的切换范围 | dayjs | - | 5.14.0 |
|
|
3336
|
-
| mode | 日期面板的状态( | time | - | |
|
|
3337
|
-
| needConfirm | 是否需要确认按钮,为 | boolean | - | 5.14.0 |
|
|
3338
|
-
| nextIcon | 自定义下一个图标 | ReactNode | - | 4.17.0 |
|
|
3339
|
-
| open | 控制弹层是否展开 | boolean | - | |
|
|
3340
|
-
| panelRender | 自定义渲染面板 | (panelNode) => ReactNode | - | 4.5.0 |
|
|
3341
|
-
| picker | 设置选择器类型 | date | date | quarter |
|
|
3342
|
-
| placeholder | 输入框提示文字 | string | [string, string] | - | |
|
|
3343
|
-
| placement | 选择框弹出的位置 | bottomLeft | bottomLeft | |
|
|
3344
|
-
| | 额外的弹出日历样式,使用 | CSSProperties | {} | |
|
|
3345
|
-
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
|
|
3346
|
-
| prevIcon | 自定义上一个图标 | ReactNode | - | 4.17.0 |
|
|
3347
|
-
| presets | 预设时间范围快捷选择, 自 | { label: React.ReactNode, value: Dayjs | (() => Dayjs) }[] | - | |
|
|
3348
|
-
| size | 输入框大小, | large | - | |
|
|
3349
|
-
| status | 设置校验状态 | 'error' | 'warning' | - | 4.19.0 |
|
|
3350
|
-
| style | 自定义输入框样式 | CSSProperties | {} | |
|
|
3351
|
-
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
|
3352
|
-
| superNextIcon | 自定义 | ReactNode | - | 4.17.0 |
|
|
3353
|
-
| superPrevIcon | 自定义 | ReactNode | - | 4.17.0 |
|
|
3354
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 | |
|
|
3355
|
-
| onOpenChange | 弹出日历和关闭日历的回调 | function(open) | - | |
|
|
3356
|
-
| onPanelChange | 日历面板切换的回调 | function(value, mode) | - | |
|
|
3357
|
-
|
|
3358
|
-
|
|
3359
|
-
### 共同的方法
|
|
3360
|
-
|
|
3361
|
-
| 名称 | 描述 | 版本 |
|
|
3362
|
-
|--------|--------|--------|
|
|
3363
|
-
| blur() | 移除焦点 | |
|
|
3364
|
-
| focus() | 获取焦点 | |
|
|
3365
|
-
|
|
3366
|
-
|
|
3367
|
-
### DatePicker
|
|
3368
|
-
|
|
3369
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3370
|
-
|--------|--------|--------|--------|--------|
|
|
3371
|
-
| defaultPickerValue | 默认面板日期,每次面板打开时会被重置到该日期 | | - | 5.14.0 |
|
|
3372
|
-
| defaultValue | 默认日期,如果开始时间或结束时间为 | | - | |
|
|
3373
|
-
| disabledTime | 不可选择的时间 | function(date) | - | |
|
|
3374
|
-
| format | 展示的日期格式,配置参考 | | YYYY-MM-DD | |
|
|
3375
|
-
| multiple | 是否为多选,不支持 | boolean | false | 5.14.0 |
|
|
3376
|
-
| pickerValue | 面板日期,可以用于受控切换面板所在日期。配合 | | - | 5.14.0 |
|
|
3377
|
-
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
|
|
3378
|
-
| showNow | 显示当前日期时间的快捷选择 | boolean | - | |
|
|
3379
|
-
| showTime | 增加时间选择功能 | Object | boolean | | |
|
|
3380
|
-
| showTime.defaultValue | 设置用户选择日期时默认的时分秒, | | dayjs() | |
|
|
3381
|
-
| showWeek | DatePicker 下展示当前周 | boolean | false | 5.14.0 |
|
|
3382
|
-
| value | 日期 | | - | |
|
|
3383
|
-
| onChange | 时间发生变化的回调 | function(date: dayjs, dateString: string) | - | |
|
|
3384
|
-
| onOk | 点击确定按钮的回调 | function() | - | |
|
|
3385
|
-
| onPanelChange | 日期面板变化时的回调 | function(value, mode) | - | |
|
|
3386
|
-
|
|
3387
|
-
|
|
3388
|
-
### DatePicker[picker=year]
|
|
3389
|
-
|
|
3390
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3391
|
-
|--------|--------|--------|--------|--------|
|
|
3392
|
-
| defaultValue | 默认日期 | | - | |
|
|
3393
|
-
| format | 展示的日期格式,配置参考 | | YYYY | |
|
|
3394
|
-
| multiple | 是否为多选 | boolean | false | 5.14.0 |
|
|
3395
|
-
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
|
3396
|
-
| value | 日期 | | - | |
|
|
3397
|
-
| onChange | 时间发生变化的回调,发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | |
|
|
3398
|
-
|
|
3399
|
-
|
|
3400
|
-
### DatePicker[picker=quarter]
|
|
3401
|
-
|
|
3402
|
-
`4.1.0` 新增。
|
|
3403
|
-
|
|
3404
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3405
|
-
|--------|--------|--------|--------|--------|
|
|
3406
|
-
| defaultValue | 默认日期 | | - | |
|
|
3407
|
-
| format | 展示的日期格式,配置参考 | | YYYY-\QQ | |
|
|
3408
|
-
| multiple | 是否为多选 | boolean | false | 5.14.0 |
|
|
3409
|
-
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
|
3410
|
-
| value | 日期 | | - | |
|
|
3411
|
-
| onChange | 时间发生变化的回调,发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | |
|
|
3412
|
-
|
|
3413
|
-
|
|
3414
|
-
### DatePicker[picker=month]
|
|
3415
|
-
|
|
3416
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3417
|
-
|--------|--------|--------|--------|--------|
|
|
3418
|
-
| defaultValue | 默认日期 | | - | |
|
|
3419
|
-
| format | 展示的日期格式,配置参考 | | YYYY-MM | |
|
|
3420
|
-
| multiple | 是否为多选 | boolean | false | 5.14.0 |
|
|
3421
|
-
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
|
3422
|
-
| value | 日期 | | - | |
|
|
3423
|
-
| onChange | 时间发生变化的回调,发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | |
|
|
3424
|
-
|
|
3425
|
-
|
|
3426
|
-
### DatePicker[picker=week]
|
|
3427
|
-
|
|
3428
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3429
|
-
|--------|--------|--------|--------|--------|
|
|
3430
|
-
| defaultValue | 默认日期 | | - | |
|
|
3431
|
-
| format | 展示的日期格式,配置参考 | | YYYY-wo | |
|
|
3432
|
-
| multiple | 是否为多选 | boolean | false | 5.14.0 |
|
|
3433
|
-
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
|
|
3434
|
-
| value | 日期 | | - | |
|
|
3435
|
-
| onChange | 时间发生变化的回调,发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | |
|
|
3436
|
-
| showWeek | DatePicker 下展示当前周 | boolean | true | 5.14.0 |
|
|
3437
|
-
|
|
3438
|
-
|
|
3439
|
-
### RangePicker
|
|
3440
|
-
|
|
3441
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3442
|
-
|--------|--------|--------|--------|--------|
|
|
3443
|
-
| allowEmpty | 允许起始项部分为空 | [boolean, boolean] | [false, false] | |
|
|
3444
|
-
| cellRender | 自定义单元格的内容。 | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' | 'end', type: PanelMode, locale?: Locale, subType?: 'hour' | 'minute' | 'second' | 'meridiem' }) => React.ReactNode | - | 5.4.0 |
|
|
3445
|
-
| dateRender | 自定义日期单元格的内容,5.4.0 起用 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 |
|
|
3446
|
-
| defaultPickerValue | 默认面板日期,每次面板打开时会被重置到该日期 | | - | 5.14.0 |
|
|
3447
|
-
| defaultValue | 默认日期 | | - | |
|
|
3448
|
-
| disabled | 禁用起始项 | [boolean, boolean] | - | |
|
|
3449
|
-
| disabledTime | 不可选择的时间 | function(date: dayjs, partial: | - | info.from |
|
|
3450
|
-
| format | 展示的日期格式,配置参考 | | YYYY-MM-DD HH:mm:ss | |
|
|
3451
|
-
| id | 设置输入框 | { start?: string, end?: string } | - | 5.14.0 |
|
|
3452
|
-
| pickerValue | 面板日期,可以用于受控切换面板所在日期。配合 | | - | 5.14.0 |
|
|
3453
|
-
| presets | 预设时间范围快捷选择,自 | { label: React.ReactNode, value: (Dayjs | (() => Dayjs))[] }[] | - | |
|
|
3454
|
-
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
|
3455
|
-
| separator | 设置分隔符 | React.ReactNode | <SwapRightOutlined /> | |
|
|
3456
|
-
| showTime | 增加时间选择功能 | Object|boolean | | |
|
|
3457
|
-
| showTime.defaultValue | 设置用户选择日期时默认的时分秒, | | [dayjs(), dayjs()] | |
|
|
3458
|
-
| value | 日期 | | - | |
|
|
3459
|
-
| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - | |
|
|
3460
|
-
| onChange | 日期范围发生变化的回调 | function(dates: [dayjs, dayjs], dateStrings: [string, string]) | - | |
|
|
3461
|
-
| onFocus | 聚焦时回调 | function(event, { range: 'start' | 'end' }) | - | range |
|
|
3462
|
-
| onBlur | 失焦时回调 | function(event, { range: 'start' | 'end' }) | - | range |
|
|
3463
|
-
|
|
3464
|
-
|
|
3465
|
-
#### formatType
|
|
3466
|
-
|
|
3467
|
-
|
|
3468
|
-
|
|
3469
|
-
|
|
3470
|
-
|
|
3471
|
-
注意:`type` 定义为 `5.14.0` 新增。
|
|
3472
|
-
|
|
3473
|
-
|
|
3474
|
-
|
|
3475
|
-
<DemoTitle title="CollapsePanel" desc="折叠面板"></DemoTitle>
|
|
3476
|
-
|
|
3477
|
-
|
|
3478
|
-
|
|
3479
|
-
|
|
3480
|
-
|
|
3481
|
-
示例
|
|
3482
|
-
|
|
3483
|
-
<Install>CollapsePanel</Install>
|
|
3484
|
-
|
|
3485
|
-
#### API
|
|
3486
|
-
|
|
3487
|
-
| <div><span class="lang-en">Attribute</span><span class="lang-cn">属性名</span></div> | <div><span class="lang-en">Description</span><span class="lang-cn">描述</span></div> | <div><span class="lang-en">Type</span><span class="lang-cn">类型</span></div> | <div><span class="lang-en">Default</span><span class="lang-cn">默认值</span></div> |
|
|
3488
|
-
|--------|--------|--------|--------|
|
|
3489
|
-
| collapsedHeight | <div><span class="lang-en"></span><span class="lang-cn">收起状态下显示的内容高度</span></div> | number | 0 |
|
|
3490
|
-
| expandedHeight | <div><span class="lang-en"></span><span class="lang-cn">展开状态下的内容高度,设置后内容超出时可滚动,不设置则自适应内容高度</span></div> | number | 300 |
|
|
3491
|
-
| title | <div><span class="lang-en"></span><span class="lang-cn">面板标题</span></div> | string | React.ReactNode | "" |
|
|
3492
|
-
| expandOnPanelClick | <div><span class="lang-en"></span><span class="lang-cn">是否允许点击整个面板进行展开</span></div> | boolean | false |
|
|
3493
|
-
| extra | <div><span class="lang-en"></span><span class="lang-cn">面板右侧内容</span></div> | React.ReactNode | |
|
|
3494
|
-
| children | <div><span class="lang-en"></span><span class="lang-cn">面板内容</span></div> | React.ReactNode | |
|
|
3495
|
-
| defaultExpanded | <div><span class="lang-en"></span><span class="lang-cn">是否默认展开</span></div> | boolean | false |
|
|
3496
|
-
|
|
3497
|
-
|
|
3498
|
-
|
|
3499
|
-
## antd API
|
|
3500
|
-
|
|
3501
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
3502
|
-
|
|
3503
|
-
### Collapse
|
|
3504
|
-
|
|
3505
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3506
|
-
|--------|--------|--------|--------|--------|
|
|
3507
|
-
| accordion | 手风琴模式 | boolean | false | |
|
|
3508
|
-
| activeKey | 当前激活 tab 面板的 key | string[] | string | | |
|
|
3509
|
-
| bordered | 带边框风格的折叠面板 | boolean | true | |
|
|
3510
|
-
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 |
|
|
3511
|
-
| defaultActiveKey | 初始化选中面板的 key | string[] | string | - | |
|
|
3512
|
-
| | 销毁折叠隐藏的面板 | boolean | false | |
|
|
3513
|
-
| destroyOnHidden | 销毁折叠隐藏的面板 | boolean | false | 5.25.0 |
|
|
3514
|
-
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
|
|
3515
|
-
| expandIconPosition | 设置图标位置 | start | - | 4.21.0 |
|
|
3516
|
-
| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
|
|
3517
|
-
| size | 设置折叠面板大小 | large | middle | 5.2.0 |
|
|
3518
|
-
| onChange | 切换面板的回调 | function | - | |
|
|
3519
|
-
| items | 折叠项目内容 | | - | 5.6.0 |
|
|
3520
|
-
|
|
3521
|
-
|
|
3522
|
-
### ItemType
|
|
3523
|
-
|
|
3524
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3525
|
-
|--------|--------|--------|--------|--------|
|
|
3526
|
-
| classNames | 语义化结构 className | | - | 5.21.0 |
|
|
3527
|
-
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | |
|
|
3528
|
-
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3529
|
-
| key | 对应 activeKey | string | number | - | |
|
|
3530
|
-
| label | 面板标题 | ReactNode | - | - |
|
|
3531
|
-
| showArrow | 是否展示当前面板上的箭头(为 false 时,collapsible 不能设为 icon) | boolean | true | |
|
|
3532
|
-
| styles | 语义化结构 style | | - | 5.21.0 |
|
|
3533
|
-
|
|
3534
|
-
|
|
3535
|
-
### Collapse.Panel
|
|
3536
|
-
|
|
3537
|
-
<!-- prettier-ignore -->
|
|
3538
|
-
<Container type="warning" title="已废弃">
|
|
3539
|
-
版本 >= 5.6.0 时请使用 items 方式配置面板。
|
|
3540
|
-
</Container>
|
|
3541
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3542
|
-
|--------|--------|--------|--------|--------|
|
|
3543
|
-
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 (icon: 4.24.0) |
|
|
3544
|
-
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3545
|
-
| header | 面板标题 | ReactNode | - | |
|
|
3546
|
-
| key | 对应 activeKey | string | number | - | |
|
|
3547
|
-
| showArrow | 是否展示当前面板上的箭头(为 false 时,collapsible 不能设为 icon) | boolean | true | |
|
|
3548
|
-
|
|
3549
|
-
|
|
3550
|
-
|
|
3551
|
-
|
|
3552
|
-
<DemoTitle title="Collapse" desc="可以折叠/展开的内容区域"></DemoTitle>
|
|
3553
|
-
|
|
3554
|
-
|
|
3555
|
-
|
|
3556
|
-
|
|
3557
|
-
|
|
3558
|
-
示例
|
|
3559
|
-
|
|
3560
|
-
<Install>Collapse</Install>
|
|
3561
|
-
|
|
3562
|
-
#### 折叠面板示例
|
|
3563
|
-
|
|
3564
|
-
以下是此组件的示例和变体
|
|
3565
|
-
|
|
3566
|
-
|
|
3567
|
-
|
|
3568
|
-
|
|
3569
|
-
|
|
3570
|
-
支持操作配置
|
|
3571
|
-
|
|
3572
|
-
#### API
|
|
3573
|
-
|
|
3574
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd collapse](https://ant.design/components/collapse-cn) 查看更多 API
|
|
3575
|
-
|
|
3576
|
-
|
|
3577
|
-
## antd API
|
|
3578
|
-
|
|
3579
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
3580
|
-
|
|
3581
|
-
### Collapse
|
|
3582
|
-
|
|
3583
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3584
|
-
|--------|--------|--------|--------|--------|
|
|
3585
|
-
| accordion | 手风琴模式 | boolean | false | |
|
|
3586
|
-
| activeKey | 当前激活 tab 面板的 key | string[] | string | | |
|
|
3587
|
-
| bordered | 带边框风格的折叠面板 | boolean | true | |
|
|
3588
|
-
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 |
|
|
3589
|
-
| defaultActiveKey | 初始化选中面板的 key | string[] | string | - | |
|
|
3590
|
-
| | 销毁折叠隐藏的面板 | boolean | false | |
|
|
3591
|
-
| destroyOnHidden | 销毁折叠隐藏的面板 | boolean | false | 5.25.0 |
|
|
3592
|
-
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
|
|
3593
|
-
| expandIconPosition | 设置图标位置 | start | - | 4.21.0 |
|
|
3594
|
-
| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
|
|
3595
|
-
| size | 设置折叠面板大小 | large | middle | 5.2.0 |
|
|
3596
|
-
| onChange | 切换面板的回调 | function | - | |
|
|
3597
|
-
| items | 折叠项目内容 | | - | 5.6.0 |
|
|
3598
|
-
|
|
3599
|
-
|
|
3600
|
-
### ItemType
|
|
3601
|
-
|
|
3602
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3603
|
-
|--------|--------|--------|--------|--------|
|
|
3604
|
-
| classNames | 语义化结构 className | | - | 5.21.0 |
|
|
3605
|
-
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | |
|
|
3606
|
-
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3607
|
-
| key | 对应 activeKey | string | number | - | |
|
|
3608
|
-
| label | 面板标题 | ReactNode | - | - |
|
|
3609
|
-
| showArrow | 是否展示当前面板上的箭头(为 false 时,collapsible 不能设为 icon) | boolean | true | |
|
|
3610
|
-
| styles | 语义化结构 style | | - | 5.21.0 |
|
|
3611
|
-
|
|
3612
|
-
|
|
3613
|
-
### Collapse.Panel
|
|
3614
|
-
|
|
3615
|
-
<!-- prettier-ignore -->
|
|
3616
|
-
<Container type="warning" title="已废弃">
|
|
3617
|
-
版本 >= 5.6.0 时请使用 items 方式配置面板。
|
|
3618
|
-
</Container>
|
|
3619
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3620
|
-
|--------|--------|--------|--------|--------|
|
|
3621
|
-
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 (icon: 4.24.0) |
|
|
3622
|
-
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3623
|
-
| header | 面板标题 | ReactNode | - | |
|
|
3624
|
-
| key | 对应 activeKey | string | number | - | |
|
|
3625
|
-
| showArrow | 是否展示当前面板上的箭头(为 false 时,collapsible 不能设为 icon) | boolean | true | |
|
|
3626
|
-
|
|
3627
|
-
|
|
3628
|
-
|
|
3629
|
-
|
|
3630
|
-
<DemoTitle title="CodeBlock" desc="代码块"></DemoTitle>
|
|
3631
|
-
|
|
3632
|
-
|
|
3633
|
-
|
|
3634
|
-
|
|
3635
|
-
|
|
3636
|
-
示例
|
|
3637
|
-
|
|
3638
|
-
<Install>CodeBlock</Install>
|
|
3639
|
-
|
|
3640
|
-
|
|
3641
|
-
|
|
3642
|
-
|
|
3643
|
-
|
|
3644
|
-
纯代码展示
|
|
3645
|
-
|
|
3646
|
-
|
|
3647
|
-
|
|
3648
|
-
|
|
3649
|
-
|
|
3650
|
-
限制高度下的展示
|
|
3651
|
-
|
|
3652
|
-
#### API
|
|
3653
|
-
|
|
3654
|
-
| <div><span class="lang-en">Attribute</span><span class="lang-cn">属性名</span></div> | <div><span class="lang-en">Description</span><span class="lang-cn">描述</span></div> | <div><span class="lang-en">Type</span><span class="lang-cn">类型</span></div> | <div><span class="lang-en">Default</span><span class="lang-cn">默认值</span></div> |
|
|
3655
|
-
|--------|--------|--------|--------|
|
|
3656
|
-
| language | <div><span class="lang-en">Language</span><span class="lang-cn">语言</span></div> | string | string[] | <div><span class="lang-en">(Required)</span><span class="lang-cn">(必填)</span></div> |
|
|
3657
|
-
| value | <div><span class="lang-en">Value</span><span class="lang-cn">值</span></div> | string | <div><span class="lang-en">(Required)</span><span class="lang-cn">(必填)</span></div> |
|
|
3658
|
-
| className | <div><span class="lang-en">Class name</span><span class="lang-cn">类名</span></div> | string | |
|
|
3659
|
-
| theme | <div><span class="lang-en"></span><span class="lang-cn">主题</span></div> | 'dark' | 'light' | |
|
|
3660
|
-
| readOnly | <div><span class="lang-en">Read only</span><span class="lang-cn">只读</span></div> | boolean | |
|
|
3661
|
-
| onChange | <div><span class="lang-en"></span><span class="lang-cn"></span></div> | (value: string) => void | |
|
|
3662
|
-
|
|
3663
|
-
|
|
3664
|
-
|
|
3665
|
-
|
|
3666
|
-
<DemoTitle title="Card" desc="通用卡片容器"></DemoTitle>
|
|
3667
|
-
|
|
3668
|
-
|
|
3669
|
-
|
|
3670
|
-
|
|
3671
|
-
|
|
3672
|
-
示例
|
|
3673
|
-
|
|
3674
|
-
<Install>Card</Install>
|
|
3675
|
-
|
|
3676
|
-
#### 卡片示例
|
|
3677
|
-
|
|
3678
|
-
以下是此卡片组件的示例和变体
|
|
3679
|
-
|
|
3680
|
-
|
|
3681
|
-
|
|
3682
|
-
|
|
3683
|
-
|
|
3684
|
-
仅展示 Content
|
|
3685
|
-
|
|
3686
|
-
#### API
|
|
3687
|
-
|
|
3688
|
-
| <div><span class="lang-en">Attribute</span><span class="lang-cn">属性名</span></div> | <div><span class="lang-en">Description</span><span class="lang-cn">描述</span></div> | <div><span class="lang-en">Type</span><span class="lang-cn">类型</span></div> | <div><span class="lang-en">Default</span><span class="lang-cn">默认值</span></div> |
|
|
3689
|
-
|--------|--------|--------|--------|
|
|
3690
|
-
| info | <div><span class="lang-en">subtitle</span><span class="lang-cn">副标题</span></div> | ReactNode | |
|
|
3691
|
-
|
|
3692
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd card](https://ant.design/components/card-cn) 查看更多 API
|
|
3693
|
-
|
|
3694
|
-
|
|
3695
|
-
## antd API
|
|
3696
|
-
|
|
3697
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
3698
|
-
|
|
3699
|
-
|
|
3700
|
-
|
|
3701
|
-
|
|
3702
|
-
|
|
3703
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3704
|
-
|--------|--------|--------|--------|--------|
|
|
3705
|
-
| actions | 卡片操作组,位置在卡片底部 | Array<ReactNode> | - | |
|
|
3706
|
-
| activeTabKey | 当前激活页签的 key | string | - | |
|
|
3707
|
-
| | 是否有边框, 请使用 | boolean | true | |
|
|
3708
|
-
| variant | 形态变体 | outlined | outlined | 5.24.0 |
|
|
3709
|
-
| cover | 卡片封面 | ReactNode | - | |
|
|
3710
|
-
| defaultActiveTabKey | 初始化选中页签的 key,如果没有设置 activeTabKey | string | 第一个页签的 key | |
|
|
3711
|
-
| extra | 卡片右上角的操作区域 | ReactNode | - | |
|
|
3712
|
-
| hoverable | 鼠标移过时可浮起 | boolean | false | |
|
|
3713
|
-
| loading | 当卡片内容还在加载中时,可以用 loading 展示一个占位 | boolean | false | |
|
|
3714
|
-
| size | card 的尺寸 | default | default | |
|
|
3715
|
-
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | |
|
|
3716
|
-
| tabList | 页签标题列表 | | - | |
|
|
3717
|
-
| tabProps | | - | - | |
|
|
3718
|
-
| title | 卡片标题 | ReactNode | - | |
|
|
3719
|
-
| type | 卡片类型,可设置为 | string | - | |
|
|
3720
|
-
| classNames | 配置卡片内置模块的 className | | - | 5.14.0 |
|
|
3721
|
-
| styles | 配置卡片内置模块的 style | | - | 5.14.0 |
|
|
3722
|
-
| onTabChange | 页签切换的回调 | (key) => void | - | |
|
|
3723
|
-
|
|
3724
|
-
|
|
3725
|
-
### Card.Grid
|
|
3726
|
-
|
|
3727
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3728
|
-
|--------|--------|--------|--------|--------|
|
|
3729
|
-
| className | 网格容器类名 | string | - | |
|
|
3730
|
-
| hoverable | 鼠标移过时可浮起 | boolean | true | |
|
|
3731
|
-
| style | 定义网格容器类名的样式 | CSSProperties | - | |
|
|
3732
|
-
|
|
3733
|
-
|
|
3734
|
-
### Card.Meta
|
|
3735
|
-
|
|
3736
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3737
|
-
|--------|--------|--------|--------|--------|
|
|
3738
|
-
| avatar | 头像/图标 | ReactNode | - | |
|
|
3739
|
-
| className | 容器类名 | string | - | |
|
|
3740
|
-
| description | 描述内容 | ReactNode | - | |
|
|
3741
|
-
| style | 定义容器类名的样式 | CSSProperties | - | |
|
|
3742
|
-
| title | 标题内容 | ReactNode | - | |
|
|
3743
|
-
|
|
3744
|
-
|
|
3745
|
-
|
|
3746
|
-
|
|
3747
|
-
<DemoTitle title="Checkbox" desc="收集用户的多项选择。"></DemoTitle>
|
|
3748
|
-
|
|
3749
|
-
|
|
3750
|
-
|
|
3751
|
-
|
|
3752
|
-
|
|
3753
|
-
示例
|
|
3754
|
-
|
|
3755
|
-
<Install>Checkbox</Install>
|
|
3756
|
-
|
|
3757
|
-
#### 多选框示例
|
|
3758
|
-
|
|
3759
|
-
以下是此组件的示例和变体
|
|
3760
|
-
|
|
3761
|
-
|
|
3762
|
-
|
|
3763
|
-
|
|
3764
|
-
|
|
3765
|
-
附带描述
|
|
3766
|
-
|
|
3767
|
-
|
|
3768
|
-
|
|
3769
|
-
|
|
3770
|
-
|
|
3771
|
-
部分选择
|
|
3772
|
-
|
|
3773
|
-
## API
|
|
3774
|
-
|
|
3775
|
-
| <div><span class="lang-en">Attribute</span><span class="lang-cn">属性名</span></div> | <div><span class="lang-en">Description</span><span class="lang-cn">描述</span></div> | <div><span class="lang-en">Type</span><span class="lang-cn">类型</span></div> | <div><span class="lang-en">Default</span><span class="lang-cn">默认值</span></div> |
|
|
3776
|
-
|--------|--------|--------|--------|
|
|
3777
|
-
| description | <div><span class="lang-en">Description Text</span><span class="lang-cn">描述文本</span></div> | string | |
|
|
3778
|
-
| descriptionClassName | <div><span class="lang-en">Description Text Style Class Name</span><span class="lang-cn">描述文本的样式类名</span></div> | string | |
|
|
3779
|
-
| descriptionStyle | <div><span class="lang-en">Description Text Inline Style</span><span class="lang-cn">描述文本的内联样式</span></div> | React.CSSProperties | |
|
|
3780
|
-
|
|
3781
|
-
|
|
3782
|
-
本组件完全兼容 antd 同名组件,详情可访问[antd checkbox](https://ant.design/components/checkbox-cn/)查看更多 API。
|
|
3783
|
-
|
|
3784
|
-
|
|
3785
|
-
## antd API
|
|
3786
|
-
|
|
3787
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
3788
|
-
|
|
3789
|
-
#### Checkbox
|
|
3790
|
-
|
|
3791
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3792
|
-
|--------|--------|--------|--------|--------|
|
|
3793
|
-
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
3794
|
-
| checked | 指定当前是否选中 | boolean | false | |
|
|
3795
|
-
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
3796
|
-
| disabled | 失效状态 | boolean | false | |
|
|
3797
|
-
| indeterminate | 设置 indeterminate 状态,只负责样式控制 | boolean | false | |
|
|
3798
|
-
| onChange | 变化时的回调函数 | (e: CheckboxChangeEvent) => void | - | |
|
|
3799
|
-
| onBlur | 失去焦点时的回调 | function() | - | |
|
|
3800
|
-
| onFocus | 获得焦点时的回调 | function() | - | |
|
|
3801
|
-
|
|
3802
|
-
|
|
3803
|
-
#### Checkbox.Group
|
|
3804
|
-
|
|
3805
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3806
|
-
|--------|--------|--------|--------|--------|
|
|
3807
|
-
| defaultValue | 默认选中的选项 | (string | number)[] | [] | |
|
|
3808
|
-
| disabled | 整组失效 | boolean | false | |
|
|
3809
|
-
| name | CheckboxGroup 下所有 | string | - | |
|
|
3810
|
-
| options | 指定可选项 | string[] | number[] | Option[] | [] | |
|
|
3811
|
-
| value | 指定选中的选项 | (string | number | boolean)[] | [] | |
|
|
3812
|
-
| title | 选项的 title | string | - | |
|
|
3813
|
-
| className | 选项的类名 | string | - | 5.25.0 |
|
|
3814
|
-
| style | 选项的样式 | React.CSSProperties | - | |
|
|
3815
|
-
| onChange | 变化时的回调函数 | (checkedValue: T[]) => void | - | |
|
|
3816
|
-
|
|
3817
|
-
|
|
3818
|
-
##### Option
|
|
3819
|
-
|
|
3820
|
-
|
|
3821
|
-
|
|
3822
|
-
|
|
3823
|
-
|
|
3824
|
-
### 方法
|
|
3825
|
-
|
|
3826
|
-
#### Checkbox
|
|
3827
|
-
|
|
3828
|
-
| 名称 | 描述 | 版本 |
|
|
3829
|
-
|--------|--------|--------|
|
|
3830
|
-
| blur() | 移除焦点 | |
|
|
3831
|
-
| focus() | 获取焦点 | |
|
|
3832
|
-
| nativeElement | 返回 Checkbox 的 DOM 节点 | 5.17.3 |
|
|
3833
|
-
|
|
3834
|
-
|
|
3835
|
-
|
|
3836
|
-
|
|
3837
|
-
<DemoTitle title="Button" desc="按钮用于开始一个即时操作。"></DemoTitle>
|
|
3838
|
-
|
|
3839
|
-
|
|
3840
|
-
|
|
3841
|
-
|
|
3842
|
-
|
|
3843
|
-
示例
|
|
3844
|
-
|
|
3845
|
-
<Install>Button</Install>
|
|
3846
|
-
|
|
3847
|
-
#### 按钮示例
|
|
3848
|
-
|
|
3849
|
-
以下是此按钮组件的示例和变体
|
|
3850
|
-
|
|
3851
|
-
|
|
3852
|
-
|
|
3853
|
-
|
|
3854
|
-
|
|
3855
|
-
主按钮
|
|
3856
|
-
|
|
3857
|
-
|
|
3858
|
-
|
|
3859
|
-
|
|
3860
|
-
次要按钮
|
|
3861
|
-
|
|
3862
|
-
|
|
3863
|
-
|
|
3864
|
-
|
|
3865
|
-
文字按钮
|
|
3866
|
-
|
|
3867
|
-
|
|
3868
|
-
|
|
3869
|
-
|
|
3870
|
-
紧凑型文字按钮
|
|
3871
|
-
|
|
3872
|
-
#### 图标按钮
|
|
3873
|
-
|
|
3874
|
-
推荐方式:直接使用 antd 提供的 icon 属性,从@agentscope-ai/icons 中获取对应的 React 组件,或是您的自定义 JSX。
|
|
3875
|
-
<br/>
|
|
3876
|
-
便捷方式:我们的按钮组件接受 iconType 属性,如果在 ConfigProvider 中设置了 iconfont 属性,您可以在 iconType 中直接传入图标的 Symbol
|
|
3877
|
-
|
|
3878
|
-
|
|
3879
|
-
|
|
3880
|
-
|
|
3881
|
-
图标前置按钮
|
|
3882
|
-
|
|
3883
|
-
#### API
|
|
3884
|
-
|
|
3885
|
-
| <div><span class="lang-en">Attribute</span><span class="lang-cn">属性名</span></div> | <div><span class="lang-en">Description</span><span class="lang-cn">描述</span></div> | <div><span class="lang-en">Type</span><span class="lang-cn">类型</span></div> | <div><span class="lang-en">Default</span><span class="lang-cn">默认值</span></div> |
|
|
3886
|
-
|--------|--------|--------|--------|
|
|
3887
|
-
| size | <div><span class="lang-en">size of the button</span><span class="lang-cn">按钮大小</span></div> | 'small' | 'middle' | 'large' | 'middle' |
|
|
3888
|
-
| type | <div><span class="lang-en">type of the button</span><span class="lang-cn">类型</span></div> | | 'primary'
|
|
3889
|
-
| 'dashed'
|
|
3890
|
-
| 'link'
|
|
3891
|
-
| 'text'
|
|
3892
|
-
| 'default'
|
|
3893
|
-
| 'primaryLess'
|
|
3894
|
-
| 'textCompact' | 'deafult' |
|
|
3895
|
-
| tooltipContent | <div><span class="lang-en">content of the tooltip</span><span class="lang-cn">hover上去Popover的内容</span></div> | string | ReactNode | |
|
|
3896
|
-
| iconType | <div><span class="lang-en">key of the iconfont, depends on the iconfont of the ConfigProvider, such as bl-icon-add</span><span class="lang-cn">百炼图标iconfont的key,依赖ConfigProvider传入的iconfont,例如bl-icon-add</span></div> | string | |
|
|
3897
|
-
| iconSize | <div><span class="lang-en">size of the icon</span><span class="lang-cn">图标大小</span></div> | SparkIconFontProps['size'] | |
|
|
3898
|
-
|
|
3899
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd button](https://ant.design/components/button-cn) 查看更多 API
|
|
3900
|
-
|
|
3901
|
-
|
|
3902
|
-
## antd API
|
|
3903
|
-
|
|
3904
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
3905
|
-
|
|
3906
|
-
通过设置 Button 的属性来产生不同的按钮样式,推荐顺序为:`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
3907
|
-
|
|
3908
|
-
按钮的属性说明如下:
|
|
3909
|
-
|
|
3910
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
3911
|
-
|--------|--------|--------|--------|--------|
|
|
3912
|
-
| autoInsertSpace | 我们默认提供两个汉字之间的空格,可以设置 | boolean | true | 5.17.0 |
|
|
3913
|
-
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
3914
|
-
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
3915
|
-
| color | 设置按钮的颜色 | default | - | default |
|
|
3916
|
-
| danger | 语法糖,设置危险按钮。当设置 | boolean | false | |
|
|
3917
|
-
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
3918
|
-
| ghost | 幽灵属性,使按钮背景透明 | boolean | false | |
|
|
3919
|
-
| href | 点击跳转的地址,指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
3920
|
-
| htmlType | 设置 | submit | button | |
|
|
3921
|
-
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
3922
|
-
| loading | 设置按钮载入状态 | boolean | { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
3923
|
-
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
3924
|
-
| target | 相当于 a 链接的 target 属性,href 存在时生效 | string | - | |
|
|
3925
|
-
| onClick | 点击按钮时的回调 | (event: React.MouseEvent<HTMLElement, MouseEvent>) => void | - | |
|
|
3926
|
-
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
3927
|
-
|
|
3928
|
-
|
|
3929
|
-
支持原生 button 的其他所有属性。
|
|
3930
|
-
|
|
3931
|
-
### PresetColors
|
|
3932
|
-
|
|
3933
|
-
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
3934
|
-
|
|
3935
|
-
|
|
3936
|
-
|
|
3937
|
-
<DemoTitle title="Breadcrumb" desc="显示当前页面在系统层级结构中的位置,并能向上返回。"></DemoTitle>
|
|
3938
|
-
|
|
3939
|
-
|
|
3940
|
-
|
|
3941
|
-
|
|
3942
|
-
|
|
3943
|
-
示例
|
|
3944
|
-
|
|
3945
|
-
<Install>Breadcrumb</Install>
|
|
3946
|
-
|
|
3947
|
-
#### 面包屑示例
|
|
3948
|
-
|
|
3949
|
-
以下是此组件的示例和变体
|
|
3950
|
-
|
|
3951
|
-
|
|
3952
|
-
|
|
3953
|
-
|
|
3954
|
-
|
|
3955
|
-
带头像和下拉菜单
|
|
3956
|
-
|
|
3957
|
-
## API
|
|
3958
|
-
|
|
3959
|
-
#### BreadcrumbItems 配置
|
|
3960
|
-
|
|
3961
|
-
| <div><span class="lang-en">Attribute</span><span class="lang-cn">属性名</span></div> | <div><span class="lang-en">Description</span><span class="lang-cn">描述</span></div> | <div><span class="lang-en">Type</span><span class="lang-cn">类型</span></div> | <div><span class="lang-en">Default</span><span class="lang-cn">默认值</span></div> |
|
|
3962
|
-
|--------|--------|--------|--------|
|
|
3963
|
-
| title | <div><span class="lang-en">Breadcrumb Item Title</span><span class="lang-cn">面包屑项标题</span></div> | string | React.ReactNode | <div><span class="lang-en">(Required)</span><span class="lang-cn">(必填)</span></div> |
|
|
3964
|
-
| IconUrl | <div><span class="lang-en">Icon URL</span><span class="lang-cn">图标地址</span></div> | string | '' |
|
|
3965
|
-
| dropdown | <div><span class="lang-en">Dropdown Menu Configuration</span><span class="lang-cn">下拉菜单配置</span></div> | {
|
|
3966
|
-
items: Array<{
|
|
3967
|
-
key: string;
|
|
3968
|
-
label: React.ReactNode;
|
|
3969
|
-
}>;
|
|
3970
|
-
} | |
|
|
3971
|
-
|
|
3972
|
-
|
|
3973
|
-
本组件完全兼容 antd 同名组件,详情可访问[antd breadcrumb](https://ant.design/components/breadcrumb-cn/)查看更多 API。
|
|
3974
|
-
|
|
3975
|
-
|
|
3976
|
-
## antd API
|
|
3977
|
-
|
|
3978
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
3979
|
-
|
|
3980
|
-
### Breadcrumb
|
|
3981
|
-
|
|
3982
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3983
|
-
|--------|--------|--------|--------|--------|
|
|
3984
|
-
| itemRender | 自定义链接函数,和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | - | |
|
|
3985
|
-
| params | 路由的参数 | object | - | |
|
|
3986
|
-
| separator | 分隔符自定义 | ReactNode | / | |
|
|
3987
|
-
|
|
3988
|
-
|
|
3989
|
-
### ItemType
|
|
3990
|
-
|
|
3991
|
-
type ItemType = Omit<[RouteItemType](#routeitemtype), 'title' | 'path'> | [SeparatorType](#separatortype)
|
|
3992
|
-
|
|
3993
|
-
### RouteItemType
|
|
3994
|
-
|
|
3995
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3996
|
-
|--------|--------|--------|--------|--------|
|
|
3997
|
-
| className | 自定义类名 | string | - | |
|
|
3998
|
-
| dropdownProps | 弹出下拉菜单的自定义配置 | | - | |
|
|
3999
|
-
| href | 链接的目的地,不能和 | string | - | |
|
|
4000
|
-
| path | 拼接路径,每一层都会拼接前一个 | string | - | |
|
|
4001
|
-
| menu | 菜单配置项 | | - | 4.24.0 |
|
|
4002
|
-
| onClick | 单击事件 | (e:MouseEvent) => void | - | |
|
|
4003
|
-
| title | 名称 | ReactNode | - | 5.3.0 |
|
|
4004
|
-
|
|
4005
|
-
|
|
4006
|
-
### SeparatorType
|
|
4007
|
-
|
|
4008
|
-
|
|
4009
|
-
|
|
4010
|
-
|
|
4011
|
-
|
|
4012
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
4013
|
-
|--------|--------|--------|--------|--------|
|
|
4014
|
-
| type | 标记为分隔符 | separator | | 5.3.0 |
|
|
4015
|
-
| separator | 要显示的分隔符 | ReactNode | / | 5.3.0 |
|
|
4016
|
-
|
|
4017
|
-
|
|
4018
|
-
### 和 browserHistory 配合
|
|
4019
|
-
|
|
4020
|
-
和 react-router 一起使用时,默认生成的 url 路径是带有 `#` 的,如果和 browserHistory 一起使用的话,你可以使用 `itemRender` 属性定义面包屑链接。
|
|
4021
|
-
|
|
4022
|
-
|
|
4023
|
-
|
|
4024
|
-
|
|
4025
|
-
|
|
4026
|
-
|
|
4027
|
-
|
|
4028
|
-
<DemoTitle title="Avatar" desc="用来代表用户或事物,支持图片、图标或字符展示。"></DemoTitle>
|
|
4029
|
-
|
|
4030
|
-
|
|
4031
|
-
|
|
4032
|
-
|
|
4033
|
-
|
|
4034
|
-
示例
|
|
4035
|
-
|
|
4036
|
-
<Install>Avatar</Install>
|
|
4037
|
-
|
|
4038
|
-
#### 头像示例
|
|
4039
|
-
|
|
4040
|
-
以下是此头像组件的示例和变体
|
|
4041
|
-
|
|
4042
|
-
|
|
4043
|
-
|
|
4044
|
-
|
|
4045
|
-
|
|
4046
|
-
文字头像
|
|
4047
|
-
|
|
4048
|
-
|
|
4049
|
-
|
|
4050
|
-
|
|
4051
|
-
自定义图片
|
|
4052
|
-
|
|
4053
|
-
#### API
|
|
4054
|
-
|
|
4055
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd avatar](https://ant.design/components/avatar-cn) 查看更多 API
|
|
4056
|
-
|
|
4057
|
-
|
|
4058
|
-
## antd API
|
|
4059
|
-
|
|
4060
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
4061
|
-
|
|
4062
|
-
### Avatar
|
|
4063
|
-
|
|
4064
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
4065
|
-
|--------|--------|--------|--------|--------|
|
|
4066
|
-
| alt | 图像无法显示时的替代文本 | string | - | |
|
|
4067
|
-
| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 |
|
|
4068
|
-
| icon | 设置头像的自定义图标 | ReactNode | - | |
|
|
4069
|
-
| shape | 指定头像的形状 | circle | circle | |
|
|
4070
|
-
| size | 设置头像的大小 | number | | default | 4.7.0 |
|
|
4071
|
-
| src | 图片类头像的资源地址或者图片元素 | string | ReactNode | - | ReactNode: 4.8.0 |
|
|
4072
|
-
| srcSet | 设置图片类头像响应式资源地址 | string | - | |
|
|
4073
|
-
| draggable | 图片是否允许拖动 | boolean | | true | |
|
|
4074
|
-
| crossOrigin | CORS 属性设置 | 'anonymous' | - | 4.17.0 |
|
|
4075
|
-
| onError | 图片加载失败的事件,返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - | |
|
|
4076
|
-
|
|
4077
|
-
|
|
4078
|
-
Tip:你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fallback 行为,优先级为 `icon` > `children`
|
|
4079
|
-
|
|
4080
|
-
### Avatar.Group <Badge>4.5.0+</Badge>
|
|
4081
|
-
|
|
4082
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
4083
|
-
|--------|--------|--------|--------|--------|
|
|
4084
|
-
| max | 设置最多显示相关配置, | { count?: number; style?: CSSProperties; popover?: PopoverProps } | - | 5.18.0 |
|
|
4085
|
-
| size | 设置头像的大小 | number | | default | 4.8.0 |
|
|
4086
|
-
| shape | 设置头像的形状 | circle | circle | 5.8.0 |
|
|
4087
|
-
|
|
4088
|
-
|
|
4089
|
-
|
|
4090
|
-
|
|
4091
|
-
<DemoTitle title="Anchor" desc="用于跳转到页面指定位置。"></DemoTitle>
|
|
4092
|
-
|
|
4093
|
-
|
|
4094
|
-
|
|
4095
|
-
|
|
4096
|
-
|
|
4097
|
-
示例
|
|
4098
|
-
|
|
4099
|
-
<Install>Anchor</Install>
|
|
4100
|
-
|
|
4101
|
-
#### 锚点示例
|
|
4102
|
-
|
|
4103
|
-
以下是此组件的示例和变体
|
|
4104
|
-
|
|
4105
|
-
|
|
4106
|
-
|
|
4107
|
-
|
|
4108
|
-
|
|
4109
|
-
水平方向锚点
|
|
4110
|
-
|
|
4111
|
-
#### API
|
|
4112
|
-
|
|
4113
|
-
ApiParser解析结果为空
|
|
4114
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd anchor](https://ant.design/components/anchor-cn) 查看更多 API
|
|
4115
|
-
|
|
4116
|
-
|
|
4117
|
-
## antd API
|
|
4118
|
-
|
|
4119
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
4120
|
-
|
|
4121
|
-
### Anchor Props
|
|
4122
|
-
|
|
4123
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
4124
|
-
|--------|--------|--------|--------|--------|
|
|
4125
|
-
| affix | 固定模式 | boolean | Omit<AffixProps, 'offsetTop' | 'target' | 'children'> | true | object: 5.19.0 |
|
|
4126
|
-
| bounds | 锚点区域边界 | number | 5 | |
|
|
4127
|
-
| getContainer | 指定滚动的容器 | () => HTMLElement | () => window | |
|
|
4128
|
-
| getCurrentAnchor | 自定义高亮的锚点 | (activeLink: string) => string | - | |
|
|
4129
|
-
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
|
|
4130
|
-
| showInkInFixed | affix={false} | boolean | false | |
|
|
4131
|
-
| targetOffset | 锚点滚动偏移量,默认与 offsetTop 相同, | number | - | |
|
|
4132
|
-
| onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - | |
|
|
4133
|
-
| onClick | click | (e: MouseEvent, link: object) => void | - | |
|
|
4134
|
-
| items | 数据化配置选项内容,支持通过 children 嵌套 | { key, href, title, target, children }[] | - | 5.1.0 |
|
|
4135
|
-
| direction | 设置导航方向 | vertical | vertical | 5.2.0 |
|
|
4136
|
-
| replace | 替换浏览器历史记录中项目的 href 而不是推送它 | boolean | false | 5.7.0 |
|
|
4137
|
-
|
|
4138
|
-
|
|
4139
|
-
### AnchorItem
|
|
4140
|
-
|
|
4141
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
4142
|
-
|--------|--------|--------|--------|--------|
|
|
4143
|
-
| key | 唯一标志 | string | number | - | |
|
|
4144
|
-
| href | 锚点链接 | string | - | |
|
|
4145
|
-
| target | 该属性指定在何处显示链接的资源 | string | - | |
|
|
4146
|
-
| title | 文字内容 | ReactNode | - | |
|
|
4147
|
-
| children | 嵌套的 Anchor Link, | | - | |
|
|
4148
|
-
| replace | 替换浏览器历史记录中的项目 href 而不是推送它 | boolean | false | 5.7.0 |
|
|
4149
|
-
|
|
4150
|
-
|
|
4151
|
-
### Link Props
|
|
4152
|
-
|
|
4153
|
-
建议使用 items 形式。
|
|
4154
|
-
|
|
4155
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
4156
|
-
|--------|--------|--------|--------|--------|
|
|
4157
|
-
| href | 锚点链接 | string | - | |
|
|
4158
|
-
| target | 该属性指定在何处显示链接的资源 | string | - | |
|
|
4159
|
-
| title | 文字内容 | ReactNode | - | |
|
|
4160
|
-
|
|
4161
|
-
|
|
4162
|
-
|
|
4163
|
-
|
|
4164
|
-
<DemoTitle title="Alert" desc="向用户突出显示的重要提示信息。"></DemoTitle>
|
|
4165
|
-
|
|
4166
|
-
|
|
4167
|
-
|
|
4168
|
-
|
|
4169
|
-
|
|
4170
|
-
示例
|
|
4171
|
-
|
|
4172
|
-
|
|
4173
|
-
|
|
4174
|
-
<Install>Alert</Install>
|
|
4175
|
-
|
|
4176
|
-
|
|
4177
|
-
|
|
4178
|
-
#### 全局提示示例
|
|
4179
|
-
|
|
4180
|
-
以下是全局提示组件的示例和变体
|
|
4181
|
-
|
|
4182
|
-
|
|
4183
|
-
|
|
4184
|
-
|
|
4185
|
-
不同状态
|
|
4186
|
-
|
|
4187
|
-
|
|
4188
|
-
|
|
4189
|
-
|
|
4190
|
-
仅文字描述
|
|
4191
|
-
|
|
4192
|
-
|
|
4193
|
-
|
|
4194
|
-
|
|
4195
|
-
支持关闭
|
|
4196
|
-
|
|
4197
|
-
|
|
4198
|
-
|
|
4199
|
-
|
|
4200
|
-
提供自定义操作
|
|
4201
|
-
|
|
4202
|
-
|
|
4203
|
-
|
|
4204
|
-
|
|
4205
|
-
是否用于顶部公告
|
|
4206
|
-
|
|
4207
|
-
#### API
|
|
4208
|
-
|
|
4209
|
-
本组件完全兼容 antd 同名组件,详情可访问 [antd alert](https://ant.design/components/alert-cn) 查看更多 API
|
|
4210
|
-
|
|
4211
|
-
|
|
4212
|
-
## antd API
|
|
4213
|
-
|
|
4214
|
-
通用属性参考:[通用属性](/docs/react/common-props)
|
|
4215
|
-
|
|
4216
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
4217
|
-
|--------|--------|--------|--------|--------|
|
|
4218
|
-
| action | 自定义操作项 | ReactNode | - | 4.9.0 |
|
|
4219
|
-
| afterClose | 关闭动画结束后触发的回调函数 | () => void | - | |
|
|
4220
|
-
| banner | 是否用作顶部公告 | boolean | false | |
|
|
4221
|
-
| closable | 可关闭配置,>=5.15.0: 支持 | boolean | ({ closeIcon?: React.ReactNode } & React.AriaAttributes) | false | |
|
|
4222
|
-
| description | 警告提示的辅助性文字介绍 | ReactNode | - | |
|
|
4223
|
-
| icon | 自定义图标, | ReactNode | - | |
|
|
4224
|
-
| message | 警告提示内容 | ReactNode | - | |
|
|
4225
|
-
| showIcon | 是否显示辅助图标 | boolean | false, | |
|
|
4226
|
-
| type | 指定警告提示的样式,有四种选择 | string | info | |
|
|
4227
|
-
| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | - | |
|
|
4228
|
-
|
|
4229
|
-
|
|
4230
|
-
### Alert.ErrorBoundary
|
|
4231
|
-
|
|
4232
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
4233
|
-
|--------|--------|--------|--------|--------|
|
|
4234
|
-
| description | 自定义错误内容,如果未指定会展示报错堆栈 | ReactNode | {{ error stack }} | |
|
|
4235
|
-
| message | 自定义错误标题,如果未指定会展示原生报错信息 | ReactNode | {{ error }} | |
|