@agentscope-ai/design 1.0.26-beta.1767839208001 → 1.0.26-beta.1767840384443
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/commonComponents/Tabs/index.js +5 -2
- package/llms/all.llms.txt +976 -976
- package/llms/index.llms.txt +17 -17
- package/package.json +1 -1
package/llms/all.llms.txt
CHANGED
|
@@ -96,6 +96,54 @@
|
|
|
96
96
|
|
|
97
97
|
|
|
98
98
|
|
|
99
|
+
<DemoTitle title="Video" desc="视频展示">
|
|
100
|
+
#### API
|
|
101
|
+
|
|
102
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
103
|
+
|--------|--------|--------|--------|
|
|
104
|
+
| mouseEnterAutoPlay | 鼠标进入时是否自动播放 | boolean | false |
|
|
105
|
+
| children | video内部设置了按钮在暗色背景下的样式，如果有一些操作按钮想继承这个样式可以在这里传入 | React.ReactNode | |
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
<DemoTitle title="Tag" desc="进行标记和分类的小标签">
|
|
113
|
+
#### API
|
|
114
|
+
|
|
115
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
116
|
+
|--------|--------|--------|--------|
|
|
117
|
+
| size | 尺寸 | 'small' \| 'middle' | 'middle' |
|
|
118
|
+
| color | 标签色 | SparkTagColors \| string | 'purple' |
|
|
119
|
+
|
|
120
|
+
<AntdApiRef url="https://ant.design/components/tag-cn/#api"></AntdApiRef>
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
## antd API
|
|
124
|
+
|
|
125
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
126
|
+
|
|
127
|
+
### Tag
|
|
128
|
+
|
|
129
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
130
|
+
|--------|--------|--------|--------|--------|
|
|
131
|
+
| closeIcon | 自定义关闭按钮。5.7.0：设置为 | ReactNode | false | 4.4.0 |
|
|
132
|
+
| icon | 设置图标 | ReactNode | - | |
|
|
133
|
+
| bordered | 是否有边框 | boolean | true | 5.4.0 |
|
|
134
|
+
| onClose | 关闭时的回调（可通过 | (e: React.MouseEvent) => void | - | |
|
|
135
|
+
|
|
136
|
+
|
|
137
|
+
### Tag.CheckableTag
|
|
138
|
+
|
|
139
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
140
|
+
|--------|--------|--------|--------|
|
|
141
|
+
| checked | 设置标签的选中状态 | boolean | false |
|
|
142
|
+
| onChange | 点击标签时触发的回调 | (checked) => void | - |
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
|
|
146
|
+
|
|
99
147
|
<DemoTitle title="Tooltip" desc="简单的文本提示气泡框">
|
|
100
148
|
#### API
|
|
101
149
|
|
|
@@ -143,589 +191,541 @@
|
|
|
143
191
|
|
|
144
192
|
|
|
145
193
|
|
|
146
|
-
<DemoTitle title="
|
|
194
|
+
<DemoTitle title="Table" desc="展示行列数据。">
|
|
147
195
|
#### API
|
|
148
196
|
|
|
149
|
-
<AntdApiRef url="https://ant.design/components/
|
|
197
|
+
<AntdApiRef url="https://ant.design/components/table-cn/#api"></AntdApiRef>
|
|
150
198
|
|
|
151
199
|
|
|
152
200
|
## antd API
|
|
153
201
|
|
|
154
|
-
|
|
155
|
-
|
|
156
202
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
157
203
|
|
|
158
|
-
|
|
159
|
-
```jsx
|
|
160
|
-
import dayjs from 'dayjs';
|
|
161
|
-
import customParseFormat from 'dayjs/plugin/customParseFormat'
|
|
162
|
-
|
|
163
|
-
dayjs.extend(customParseFormat)
|
|
164
|
-
<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
|
|
165
|
-
```
|
|
166
|
-
|
|
204
|
+
### Table
|
|
167
205
|
|
|
168
206
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
169
207
|
|--------|--------|--------|--------|--------|
|
|
170
|
-
|
|
|
171
|
-
|
|
|
172
|
-
|
|
|
173
|
-
|
|
|
174
|
-
|
|
|
175
|
-
|
|
|
176
|
-
|
|
|
177
|
-
|
|
|
178
|
-
|
|
|
179
|
-
|
|
|
180
|
-
|
|
|
181
|
-
|
|
|
182
|
-
|
|
|
183
|
-
|
|
|
184
|
-
|
|
|
185
|
-
|
|
|
186
|
-
|
|
|
187
|
-
|
|
|
188
|
-
|
|
|
189
|
-
|
|
|
190
|
-
|
|
|
191
|
-
|
|
|
192
|
-
|
|
|
193
|
-
|
|
|
194
|
-
|
|
|
195
|
-
|
|
|
196
|
-
|
|
|
197
|
-
|
|
|
198
|
-
| value | 当前时间 | | - | |
|
|
199
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
200
|
-
| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - | |
|
|
201
|
-
| onChange | 时间发生变化的回调 | function(time: dayjs, timeString: string): void | - | |
|
|
202
|
-
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - | |
|
|
208
|
+
| bordered | 是否展示外边框和列边框 | boolean | false | |
|
|
209
|
+
| columns | 表格列的配置描述，具体项见下表 | | - | |
|
|
210
|
+
| components | 覆盖默认的 table 元素 | | - | |
|
|
211
|
+
| dataSource | 数据数组 | object[] | - | |
|
|
212
|
+
| expandable | 配置展开属性 | | - | |
|
|
213
|
+
| footer | 表格尾部 | function(currentPageData) | - | |
|
|
214
|
+
| getPopupContainer | 设置表格内各类浮层的渲染节点，如筛选菜单 | (triggerNode) => HTMLElement | () => TableHtmlElement | |
|
|
215
|
+
| loading | 页面是否加载中 | boolean \| | false | |
|
|
216
|
+
| locale | 默认文案设置，目前包括排序、过滤、空数据文案 | object | | |
|
|
217
|
+
| pagination | 分页器，参考 | object \| | - | |
|
|
218
|
+
| rowClassName | 表格行的类名 | function(record, index): string | - | |
|
|
219
|
+
| rowKey | 表格行 key 的取值，可以是字符串或一个函数 | string \| function(record): string | key | |
|
|
220
|
+
| rowSelection | 表格行是否可选择， | object | - | |
|
|
221
|
+
| rowHoverable | 表格行是否开启 hover 交互 | boolean | true | 5.16.0 |
|
|
222
|
+
| scroll | 表格是否可滚动，也可以指定滚动区域的宽、高， | object | - | |
|
|
223
|
+
| showHeader | 是否显示表头 | boolean | true | |
|
|
224
|
+
| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示。当参数类型为对象时，将被设置为 Tooltip 的属性 | boolean \| | { target: 'full-header' } | 5.16.0 |
|
|
225
|
+
| size | 表格大小 | large | large | |
|
|
226
|
+
| sortDirections | 支持的排序方式，取值为 | Array | [ | |
|
|
227
|
+
| sticky | 设置粘性头部和滚动条 | boolean \| | - | 4.6.0 (getContainer: 4.7.0) |
|
|
228
|
+
| summary | 总结栏 | (currentData) => ReactNode | - | |
|
|
229
|
+
| tableLayout | 表格元素的 | - \| | 无 | |
|
|
230
|
+
| title | 表格标题 | function(currentPageData) | - | |
|
|
231
|
+
| virtual | 支持虚拟列表 | boolean | - | 5.9.0 |
|
|
232
|
+
| onChange | 分页、排序、筛选变化时触发 | function(pagination, filters, sorter, extra: { currentDataSource: [], action: | - | |
|
|
233
|
+
| onHeaderRow | 设置头部行属性 | function(columns, index) | - | |
|
|
234
|
+
| onRow | 设置行属性 | function(record, index) | - | |
|
|
235
|
+
| onScroll | 表单内容滚动时触发（虚拟滚动下只有垂直滚动会触发事件） | function(event) | - | 5.16.0 |
|
|
203
236
|
|
|
204
237
|
|
|
205
|
-
|
|
238
|
+
### Table ref
|
|
206
239
|
|
|
240
|
+
| 参数 | 说明 | 类型 | 版本 |
|
|
241
|
+
|--------|--------|--------|--------|
|
|
242
|
+
| nativeElement | 最外层 div 元素 | HTMLDivElement | 5.11.0 |
|
|
243
|
+
| scrollTo | 滚动到目标位置（设置 | (config: { index?: number, key?: React.Key, top?: number }) => void | 5.11.0 |
|
|
207
244
|
|
|
208
|
-
```typescript
|
|
209
|
-
type DisabledTime = (now: Dayjs) => {
|
|
210
|
-
disabledHours?: () => number[];
|
|
211
|
-
disabledMinutes?: (selectedHour: number) => number[];
|
|
212
|
-
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
213
|
-
disabledMilliseconds?: (
|
|
214
|
-
selectedHour: number,
|
|
215
|
-
selectedMinute: number,
|
|
216
|
-
selectedSecond: number,
|
|
217
|
-
) => number[];
|
|
218
|
-
};
|
|
219
|
-
```
|
|
220
245
|
|
|
246
|
+
#### onRow 用法
|
|
221
247
|
|
|
222
|
-
|
|
248
|
+
适用于 `onRow` `onHeaderRow` `onCell` `onHeaderCell`。
|
|
223
249
|
|
|
224
|
-
## 方法
|
|
225
250
|
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
251
|
+
```jsx
|
|
252
|
+
<Table
|
|
253
|
+
onRow={(record) => {
|
|
254
|
+
return {
|
|
255
|
+
onClick: (event) => {}, // 点击行
|
|
256
|
+
onDoubleClick: (event) => {},
|
|
257
|
+
onContextMenu: (event) => {},
|
|
258
|
+
onMouseEnter: (event) => {}, // 鼠标移入行
|
|
259
|
+
onMouseLeave: (event) => {},
|
|
260
|
+
};
|
|
261
|
+
}}
|
|
262
|
+
onHeaderRow={(columns, index) => {
|
|
263
|
+
return {
|
|
264
|
+
onClick: () => {}, // 点击表头行
|
|
265
|
+
};
|
|
266
|
+
}}
|
|
267
|
+
/>
|
|
268
|
+
```
|
|
230
269
|
|
|
231
270
|
|
|
232
|
-
|
|
271
|
+
### Column
|
|
233
272
|
|
|
234
|
-
|
|
273
|
+
列描述数据对象，是 columns 中的一项，Column 使用相同的 API。
|
|
235
274
|
|
|
236
275
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
237
276
|
|--------|--------|--------|--------|--------|
|
|
238
|
-
|
|
|
239
|
-
|
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
277
|
+
| align | 设置列的对齐方式 | left | left | |
|
|
278
|
+
| className | 列样式类名 | string | - | |
|
|
279
|
+
| colSpan | 表头列合并，设置为 0 时，不渲染 | number | - | |
|
|
280
|
+
| dataIndex | 列数据在数据项中对应的路径，支持通过数组查询嵌套路径 | string \| string[] | - | |
|
|
281
|
+
| defaultFilteredValue | 默认筛选值 | string[] | - | |
|
|
282
|
+
| filterResetToDefaultFilteredValue | 点击重置按钮的时候，是否恢复默认筛选值 | boolean | false | |
|
|
283
|
+
| defaultSortOrder | 默认排序顺序 | ascend | - | |
|
|
284
|
+
| ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。 | boolean \| { showTitle?: boolean } | false | showTitle: 4.3.0 |
|
|
285
|
+
| filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | ReactNode \| (props: | - | |
|
|
286
|
+
| filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false | |
|
|
287
|
+
| filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string[] | - | |
|
|
288
|
+
| filterIcon | 自定义 filter 图标。 | ReactNode \| (filtered: boolean) => ReactNode | false | |
|
|
289
|
+
| filterOnClose | 是否在筛选菜单关闭时触发筛选 | boolean | true | 5.15.0 |
|
|
290
|
+
| filterMultiple | 是否多选 | boolean | true | |
|
|
291
|
+
| filterMode | 指定筛选菜单的用户界面 | 'menu' \| 'tree' | 'menu' | 4.17.0 |
|
|
292
|
+
| filterSearch | 筛选菜单项是否可搜索 | boolean \| function(input, record):boolean | false | boolean:4.17.0 function:4.19.0 |
|
|
293
|
+
| filters | 表头的筛选菜单项 | object[] | - | |
|
|
294
|
+
| filterDropdownProps | 自定义下拉属性，在 | | - | 5.22.0 |
|
|
295
|
+
| fixed | （IE 下无效）列是否固定，可选 | boolean \| string | false | |
|
|
296
|
+
| key | React 需要的 key，如果已经设置了唯一的 | string | - | |
|
|
297
|
+
| render | 生成复杂数据的渲染函数，参数分别为当前单元格的值，当前行数据，行索引 | function(value, record, index) {} | - | |
|
|
298
|
+
| responsive | 响应式 breakpoint 配置列表。未设置则始终可见。 | | - | 4.2.0 |
|
|
299
|
+
| rowScope | 设置列范围 | row | - | 5.1.0 |
|
|
300
|
+
| shouldCellUpdate | 自定义单元格渲染时机 | (record, prevRecord) => boolean | - | 4.3.0 |
|
|
301
|
+
| showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中 | boolean \| | { target: 'full-header' } | 5.16.0 |
|
|
302
|
+
| sortDirections | 支持的排序方式，覆盖 | Array | [ | |
|
|
303
|
+
| sorter | 排序函数，本地排序使用一个函数(参考 | function \| boolean \| { compare: function, multiple: number } | - | |
|
|
304
|
+
| sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 | ascend | - | |
|
|
305
|
+
| sortIcon | 自定义 sort 图标 | (props: { sortOrder }) => ReactNode | - | 5.6.0 |
|
|
306
|
+
| title | 列头显示文字（函数用法 | ReactNode \| ({ sortOrder, sortColumn, filters }) => ReactNode | - | |
|
|
307
|
+
| width | 列宽度（ | string \| number | - | |
|
|
308
|
+
| minWidth | 最小列宽度，只在 | number | - | 5.21.0 |
|
|
309
|
+
| hidden | 隐藏列 | boolean | false | 5.13.0 |
|
|
310
|
+
| onCell | 设置单元格属性 | function(record, rowIndex) | - | |
|
|
311
|
+
| onFilter | 本地模式下，确定筛选的运行函数 | function | - | |
|
|
312
|
+
| onHeaderCell | 设置头部单元格属性 | function(column) | - | |
|
|
243
313
|
|
|
244
314
|
|
|
245
|
-
|
|
246
|
-
type RangeDisabledTime = (
|
|
247
|
-
now: Dayjs,
|
|
248
|
-
type = 'start' | 'end',
|
|
249
|
-
) => {
|
|
250
|
-
disabledHours?: () => number[];
|
|
251
|
-
disabledMinutes?: (selectedHour: number) => number[];
|
|
252
|
-
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
253
|
-
};
|
|
254
|
-
```
|
|
315
|
+
### ColumnGroup
|
|
255
316
|
|
|
317
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
318
|
+
|--------|--------|--------|--------|
|
|
319
|
+
| title | 列头显示文字 | ReactNode | - |
|
|
256
320
|
|
|
257
321
|
|
|
322
|
+
### pagination
|
|
258
323
|
|
|
259
|
-
|
|
260
|
-
#### API
|
|
324
|
+
分页的配置项。
|
|
261
325
|
|
|
262
|
-
|
|
|
326
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
263
327
|
|--------|--------|--------|--------|
|
|
264
|
-
|
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
<AntdApiRef url="https://ant.design/components/tabs-cn/#api"></AntdApiRef>
|
|
328
|
+
| position | 指定分页显示的位置， 取值为 | Array | [ |
|
|
268
329
|
|
|
269
330
|
|
|
270
|
-
|
|
331
|
+
更多配置项，请查看 [`Pagination`](/components/pagination-cn)。
|
|
271
332
|
|
|
272
|
-
|
|
333
|
+
### expandable
|
|
273
334
|
|
|
274
|
-
|
|
335
|
+
展开功能的配置。
|
|
275
336
|
|
|
276
337
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
277
338
|
|--------|--------|--------|--------|--------|
|
|
278
|
-
|
|
|
279
|
-
|
|
|
280
|
-
|
|
|
281
|
-
|
|
|
282
|
-
|
|
|
283
|
-
|
|
|
284
|
-
|
|
|
285
|
-
|
|
|
286
|
-
|
|
|
287
|
-
|
|
|
288
|
-
|
|
|
289
|
-
|
|
|
290
|
-
|
|
|
291
|
-
|
|
|
292
|
-
|
|
|
293
|
-
|
|
|
294
|
-
| tabPosition | 页签位置，可选值有 | string | top | |
|
|
295
|
-
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
296
|
-
| onChange | 切换面板的回调 | (activeKey: string) => void | - | |
|
|
297
|
-
| onEdit | 新增和删除页签的回调，在 | (action === 'add' ? event : targetKey, action) => void | - | |
|
|
298
|
-
| onTabClick | tab 被点击的回调 | (key: string, event: MouseEvent) => void | - | |
|
|
299
|
-
| onTabScroll | tab 滚动时触发 | ({ direction: | - | 4.3.0 |
|
|
300
|
-
|
|
301
|
-
|
|
302
|
-
更多属性查看 [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
|
|
303
|
-
|
|
304
|
-
### TabItemType
|
|
339
|
+
| childrenColumnName | 指定树形结构的列名 | string | children | |
|
|
340
|
+
| columnTitle | 自定义展开列表头 | ReactNode | - | 4.23.0 |
|
|
341
|
+
| columnWidth | 自定义展开列宽度 | string \| number | - | |
|
|
342
|
+
| defaultExpandAllRows | 初始时，是否展开所有行 | boolean | false | |
|
|
343
|
+
| defaultExpandedRowKeys | 默认展开的行 | string[] | - | |
|
|
344
|
+
| expandedRowClassName | 展开行的 className | string \| (record, index, indent) => string | - | string: 5.22.0 |
|
|
345
|
+
| expandedRowKeys | 展开的行，控制属性 | string[] | - | |
|
|
346
|
+
| expandedRowRender | 额外的展开行 | function(record, index, indent, expanded): ReactNode | - | |
|
|
347
|
+
| expandIcon | 自定义展开图标，参考 | function(props): ReactNode | - | |
|
|
348
|
+
| expandRowByClick | 通过点击行来展开子行 | boolean | false | |
|
|
349
|
+
| fixed | 控制展开图标是否固定，可选 | boolean \| string | false | 4.16.0 |
|
|
350
|
+
| indentSize | 展示树形数据时，每层缩进的宽度，以 px 为单位 | number | 15 | |
|
|
351
|
+
| rowExpandable | 设置是否允许行展开（ | (record) => boolean | - | |
|
|
352
|
+
| showExpandColumn | 是否显示展开图标列 | boolean | true | 4.18.0 |
|
|
353
|
+
| onExpand | 点击展开图标时触发 | function(expanded, record) | - | |
|
|
354
|
+
| onExpandedRowsChange | 展开的行变化时触发 | function(expandedRows) | - | |
|
|
305
355
|
|
|
306
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
307
|
-
|--------|--------|--------|--------|--------|
|
|
308
|
-
| closeIcon | 自定义关闭图标，在 | ReactNode | - | |
|
|
309
|
-
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
310
|
-
| disabled | 禁用某一项 | boolean | false | |
|
|
311
|
-
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
|
|
312
|
-
| key | 对应 activeKey | string | - | |
|
|
313
|
-
| label | 选项卡头显示文字 | ReactNode | - | |
|
|
314
|
-
| icon | 选项卡头显示图标 | ReactNode | - | 5.12.0 |
|
|
315
|
-
| children | 选项卡头显示内容 | ReactNode | - | |
|
|
316
|
-
| closable | 是否显示选项卡的关闭按钮，在 | boolean | true | |
|
|
317
356
|
|
|
357
|
+
### rowSelection
|
|
318
358
|
|
|
319
|
-
|
|
359
|
+
选择功能的配置。
|
|
320
360
|
|
|
321
361
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
322
362
|
|--------|--------|--------|--------|--------|
|
|
323
|
-
|
|
|
324
|
-
|
|
|
325
|
-
|
|
326
|
-
|
|
363
|
+
| align | 设置选择列的对齐方式 | left | left | 5.25.0 |
|
|
364
|
+
| checkStrictly | checkable 状态下节点选择完全受控（父子数据选中状态不再关联） | boolean | true | 4.4.0 |
|
|
365
|
+
| columnTitle | 自定义列表选择框标题 | ReactNode \| (originalNode: ReactNode) => ReactNode | - | |
|
|
366
|
+
| columnWidth | 自定义列表选择框宽度 | string \| number | 32px | |
|
|
367
|
+
| fixed | 把选择框列固定在左边 | boolean | - | |
|
|
368
|
+
| getCheckboxProps | 选择框的默认属性配置 | function(record) | - | |
|
|
369
|
+
| hideSelectAll | 隐藏全选勾选框与自定义选择项 | boolean | false | 4.3.0 |
|
|
370
|
+
| preserveSelectedRowKeys | 当数据被删除时仍然保留选项的 | boolean | - | 4.4.0 |
|
|
371
|
+
| renderCell | 渲染勾选框，用法与 Column 的 | function(checked, record, index, originNode) {} | - | 4.1.0 |
|
|
372
|
+
| selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | string[] \| number[] | [] | |
|
|
373
|
+
| defaultSelectedRowKeys | 默认选中项的 key 数组 | string[] \| number[] | [] | |
|
|
374
|
+
| selections | 自定义选择项 | object[] \| boolean | true | |
|
|
375
|
+
| type | 多选/单选 | checkbox | checkbox | |
|
|
376
|
+
| onCell | 设置单元格属性，用法与 Column 的 | function(record, rowIndex) | - | 5.5.0 |
|
|
377
|
+
| onChange | 选中项发生变化时的回调 | function(selectedRowKeys, selectedRows, info: { type }) | - | info.type |
|
|
378
|
+
| onSelect | 用户手动选择/取消选择某行的回调 | function(record, selected, selectedRows, nativeEvent) | - | |
|
|
379
|
+
| onSelectAll | 用户手动选择/取消选择所有行的回调 | function(selected, selectedRows, changeRows) | - | |
|
|
380
|
+
| onSelectInvert | 用户手动选择反选的回调 | function(selectedRowKeys) | - | |
|
|
381
|
+
| onSelectNone | 用户清空选择的回调 | function() | - | |
|
|
382
|
+
| onSelectMultiple | 用户使用键盘 shift 选择多行的回调 | function(selected, selectedRows, changeRows) | - | |
|
|
327
383
|
|
|
328
384
|
|
|
329
|
-
|
|
330
|
-
#### API
|
|
385
|
+
### scroll
|
|
331
386
|
|
|
332
|
-
|
|
|
387
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
333
388
|
|--------|--------|--------|--------|
|
|
334
|
-
|
|
|
335
|
-
|
|
|
336
|
-
|
|
337
|
-
<AntdApiRef url="https://ant.design/components/tag-cn/#api"></AntdApiRef>
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
## antd API
|
|
341
|
-
|
|
342
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
343
|
-
|
|
344
|
-
### Tag
|
|
345
|
-
|
|
346
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
347
|
-
|--------|--------|--------|--------|--------|
|
|
348
|
-
| closeIcon | 自定义关闭按钮。5.7.0：设置为 | ReactNode | false | 4.4.0 |
|
|
349
|
-
| icon | 设置图标 | ReactNode | - | |
|
|
350
|
-
| bordered | 是否有边框 | boolean | true | 5.4.0 |
|
|
351
|
-
| onClose | 关闭时的回调（可通过 | (e: React.MouseEvent) => void | - | |
|
|
389
|
+
| scrollToFirstRowOnChange | 当分页、排序、筛选变化后是否滚动到表格顶部 | boolean | - |
|
|
390
|
+
| x | 设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比， | string \| number \| true | - |
|
|
391
|
+
| y | 设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值 | string \| number | - |
|
|
352
392
|
|
|
353
393
|
|
|
354
|
-
###
|
|
394
|
+
### selection
|
|
355
395
|
|
|
356
396
|
| 参数 | 说明 | 类型 | 默认值 |
|
|
357
397
|
|--------|--------|--------|--------|
|
|
358
|
-
|
|
|
359
|
-
|
|
|
360
|
-
|
|
361
|
-
|
|
362
|
-
|
|
398
|
+
| key | React 需要的 key，建议设置 | string | - |
|
|
399
|
+
| text | 选择项显示的文字 | ReactNode | - |
|
|
400
|
+
| onSelect | 选择项点击回调 | function(changeableRowKeys) | - |
|
|
363
401
|
|
|
364
|
-
<DemoTitle title="Switch" desc="使用开关切换两种状态之间。">
|
|
365
|
-
#### API
|
|
366
402
|
|
|
367
|
-
|
|
368
|
-
|--------|--------|--------|--------|
|
|
369
|
-
| label | Switch后的内容 | ReactNode | |
|
|
403
|
+
## 在 TypeScript 中使用
|
|
370
404
|
|
|
371
|
-
<AntdApiRef url="https://ant.design/components/switch-cn/#api"></AntdApiRef>
|
|
372
405
|
|
|
406
|
+
```tsx
|
|
407
|
+
import React from 'react';
|
|
408
|
+
import { Table } from 'antd';
|
|
409
|
+
import type { TableColumnsType } from 'antd';
|
|
373
410
|
|
|
374
|
-
|
|
411
|
+
interface User {
|
|
412
|
+
key: number;
|
|
413
|
+
name: string;
|
|
414
|
+
}
|
|
375
415
|
|
|
376
|
-
|
|
416
|
+
const columns: TableColumnsType<User> = [
|
|
417
|
+
{
|
|
418
|
+
key: 'name',
|
|
419
|
+
title: 'Name',
|
|
420
|
+
dataIndex: 'name',
|
|
421
|
+
},
|
|
422
|
+
];
|
|
377
423
|
|
|
378
|
-
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
|
|
384
|
-
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
385
|
-
| defaultValue | defaultChecked | boolean | - | 5.12.0 |
|
|
386
|
-
| disabled | 是否禁用 | boolean | false | |
|
|
387
|
-
| loading | 加载中的开关 | boolean | false | |
|
|
388
|
-
| size | 开关大小，可选值： | string | default | |
|
|
389
|
-
| unCheckedChildren | 非选中时的内容 | ReactNode | - | |
|
|
390
|
-
| value | checked | boolean | - | 5.12.0 |
|
|
391
|
-
| onChange | 变化时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
392
|
-
| onClick | 点击时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
424
|
+
const data: User[] = [
|
|
425
|
+
{
|
|
426
|
+
key: 0,
|
|
427
|
+
name: 'Jack',
|
|
428
|
+
},
|
|
429
|
+
];
|
|
393
430
|
|
|
431
|
+
const Demo: React.FC = () => (
|
|
432
|
+
<>
|
|
433
|
+
<Table<User> columns={columns} dataSource={data} />
|
|
434
|
+
{/* 使用 JSX 风格的 API */}
|
|
435
|
+
<Table<User> dataSource={data}>
|
|
436
|
+
<Table.Column<User> key="name" title="Name" dataIndex="name" />
|
|
437
|
+
</Table>
|
|
438
|
+
</>
|
|
439
|
+
);
|
|
394
440
|
|
|
395
|
-
|
|
441
|
+
export default Demo;
|
|
442
|
+
```
|
|
396
443
|
|
|
397
|
-
| 名称 | 描述 |
|
|
398
|
-
|--------|--------|
|
|
399
|
-
| blur() | 移除焦点 |
|
|
400
|
-
| focus() | 获取焦点 |
|
|
401
444
|
|
|
445
|
+
TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/serene-platform-0jo5t)。
|
|
402
446
|
|
|
403
447
|
|
|
404
448
|
|
|
405
|
-
<DemoTitle title="
|
|
449
|
+
<DemoTitle title="Tabs" desc="用户可以通过点击不同的标签在同一页面中查看不同的内容区域。">
|
|
406
450
|
#### API
|
|
407
451
|
|
|
408
452
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
409
453
|
|--------|--------|--------|--------|
|
|
410
|
-
|
|
|
411
|
-
| children | video内部设置了按钮在暗色背景下的样式，如果有一些操作按钮想继承这个样式可以在这里传入 | React.ReactNode | |
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
454
|
+
| type | 类型 | 'line' \| 'card' \| 'editable-card' \| 'segmented' | true |
|
|
417
455
|
|
|
418
|
-
<DemoTitle title="Steps" desc="引导用户按照流程完成任务的导航条。">
|
|
419
|
-
#### API
|
|
420
456
|
|
|
421
|
-
<AntdApiRef url="https://ant.design/components/
|
|
457
|
+
<AntdApiRef url="https://ant.design/components/tabs-cn/#api"></AntdApiRef>
|
|
422
458
|
|
|
423
459
|
|
|
424
460
|
## antd API
|
|
425
461
|
|
|
426
462
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
427
463
|
|
|
428
|
-
###
|
|
429
|
-
|
|
430
|
-
整体步骤条。
|
|
464
|
+
### Tabs
|
|
431
465
|
|
|
432
466
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
433
467
|
|--------|--------|--------|--------|--------|
|
|
434
|
-
|
|
|
435
|
-
|
|
|
436
|
-
|
|
|
437
|
-
|
|
|
438
|
-
|
|
|
439
|
-
|
|
|
440
|
-
|
|
|
441
|
-
|
|
|
442
|
-
|
|
|
443
|
-
|
|
|
444
|
-
|
|
|
445
|
-
|
|
|
446
|
-
|
|
|
468
|
+
| activeKey | 当前激活 tab 面板的 key | string | - | |
|
|
469
|
+
| addIcon | 自定义添加按钮，设置 | ReactNode | | 4.4.0 |
|
|
470
|
+
| animated | 是否使用动画切换 Tabs | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | |
|
|
471
|
+
| centered | 标签居中展示 | boolean | false | 4.4.0 |
|
|
472
|
+
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板的 key | |
|
|
473
|
+
| hideAdd | 是否隐藏加号图标，在 | boolean | false | |
|
|
474
|
+
| indicator | 自定义指示条的长度和对齐方式 | { size?: number \| (origin: number) => number; align: | - | 5.13.0 |
|
|
475
|
+
| items | 配置选项卡内容 | | [] | 4.23.0 |
|
|
476
|
+
| more | 自定义折叠菜单属性 | | { icon: | |
|
|
477
|
+
| removeIcon | 自定义删除按钮，设置 | ReactNode | | 5.15.0 |
|
|
478
|
+
| popupClassName | 更多菜单的 | string | - | 4.21.0 |
|
|
479
|
+
| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
|
|
480
|
+
| size | 大小，提供 | string | middle | |
|
|
481
|
+
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
|
|
482
|
+
| tabBarGutter | tabs 之间的间隙 | number | - | |
|
|
483
|
+
| tabBarStyle | tab bar 的样式对象 | CSSProperties | - | |
|
|
484
|
+
| tabPosition | 页签位置，可选值有 | string | top | |
|
|
485
|
+
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
486
|
+
| onChange | 切换面板的回调 | (activeKey: string) => void | - | |
|
|
487
|
+
| onEdit | 新增和删除页签的回调，在 | (action === 'add' ? event : targetKey, action) => void | - | |
|
|
488
|
+
| onTabClick | tab 被点击的回调 | (key: string, event: MouseEvent) => void | - | |
|
|
489
|
+
| onTabScroll | tab 滚动时触发 | ({ direction: | - | 4.3.0 |
|
|
447
490
|
|
|
448
491
|
|
|
449
|
-
|
|
492
|
+
更多属性查看 [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
|
|
493
|
+
|
|
494
|
+
### TabItemType
|
|
450
495
|
|
|
451
496
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
452
497
|
|--------|--------|--------|--------|--------|
|
|
453
|
-
|
|
|
454
|
-
|
|
|
455
|
-
|
|
|
456
|
-
|
|
|
457
|
-
|
|
|
458
|
-
|
|
|
459
|
-
|
|
498
|
+
| closeIcon | 自定义关闭图标，在 | ReactNode | - | |
|
|
499
|
+
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
500
|
+
| disabled | 禁用某一项 | boolean | false | |
|
|
501
|
+
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
|
|
502
|
+
| key | 对应 activeKey | string | - | |
|
|
503
|
+
| label | 选项卡头显示文字 | ReactNode | - | |
|
|
504
|
+
| icon | 选项卡头显示图标 | ReactNode | - | 5.12.0 |
|
|
505
|
+
| children | 选项卡头显示内容 | ReactNode | - | |
|
|
506
|
+
| closable | 是否显示选项卡的关闭按钮，在 | boolean | true | |
|
|
460
507
|
|
|
461
|
-
### StepItem
|
|
462
508
|
|
|
463
|
-
|
|
509
|
+
### MoreProps
|
|
464
510
|
|
|
465
511
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
466
512
|
|--------|--------|--------|--------|--------|
|
|
467
|
-
|
|
|
468
|
-
|
|
|
469
|
-
| icon | 步骤图标的类型，可选 | ReactNode | - | |
|
|
470
|
-
| status | 指定状态。当不配置该属性时，会使用 Steps 的 | string | wait | |
|
|
471
|
-
| subTitle | 子标题 | ReactNode | - | |
|
|
472
|
-
| title | 标题 | ReactNode | - | |
|
|
513
|
+
| icon | 自定义折叠图标 | ReactNode | - | |
|
|
514
|
+
| | | | | |
|
|
473
515
|
|
|
474
516
|
|
|
475
517
|
|
|
476
518
|
|
|
477
|
-
<DemoTitle title="
|
|
519
|
+
<DemoTitle title="TimePicker" desc="输入或选择时间的控件。">
|
|
478
520
|
#### API
|
|
479
521
|
|
|
480
|
-
<AntdApiRef url="https://ant.design/components/
|
|
522
|
+
<AntdApiRef url="https://ant.design/components/time-picker-cn/#api"></AntdApiRef>
|
|
481
523
|
|
|
482
524
|
|
|
483
525
|
## antd API
|
|
484
526
|
|
|
527
|
+
|
|
528
|
+
|
|
485
529
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
486
530
|
|
|
487
|
-
|
|
531
|
+
|
|
532
|
+
```jsx
|
|
533
|
+
import dayjs from 'dayjs';
|
|
534
|
+
import customParseFormat from 'dayjs/plugin/customParseFormat'
|
|
535
|
+
|
|
536
|
+
dayjs.extend(customParseFormat)
|
|
537
|
+
<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
|
|
538
|
+
```
|
|
539
|
+
|
|
488
540
|
|
|
489
541
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
490
542
|
|--------|--------|--------|--------|--------|
|
|
491
|
-
|
|
|
492
|
-
|
|
|
493
|
-
|
|
|
494
|
-
|
|
|
495
|
-
|
|
|
496
|
-
|
|
|
497
|
-
|
|
|
498
|
-
|
|
|
499
|
-
|
|
|
500
|
-
|
|
|
501
|
-
|
|
|
502
|
-
|
|
|
503
|
-
|
|
|
504
|
-
|
|
|
505
|
-
|
|
|
506
|
-
|
|
|
507
|
-
|
|
|
508
|
-
|
|
|
509
|
-
|
|
|
510
|
-
|
|
|
511
|
-
|
|
|
512
|
-
|
|
|
513
|
-
|
|
|
514
|
-
|
|
|
515
|
-
|
|
|
516
|
-
|
|
|
517
|
-
|
|
|
518
|
-
|
|
|
543
|
+
| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
|
|
544
|
+
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
545
|
+
| cellRender | 自定义单元格的内容 | (current: number, info: { originNode: React.ReactNode, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
|
|
546
|
+
| changeOnScroll | 在滚动时改变选择值 | boolean | false | 5.14.0 |
|
|
547
|
+
| className | 选择器类名 | string | - | |
|
|
548
|
+
| defaultValue | 默认时间 | | - | |
|
|
549
|
+
| disabled | 禁用全部操作 | boolean | false | |
|
|
550
|
+
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
551
|
+
| format | 展示的时间格式 | string | HH:mm:ss | |
|
|
552
|
+
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | |
|
|
553
|
+
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | |
|
|
554
|
+
| hourStep | 小时选项间隔 | number | 1 | |
|
|
555
|
+
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
|
|
556
|
+
| minuteStep | 分钟选项间隔 | number | 1 | |
|
|
557
|
+
| needConfirm | 是否需要确认按钮，为 | boolean | - | 5.14.0 |
|
|
558
|
+
| open | 面板是否打开 | boolean | false | |
|
|
559
|
+
| placeholder | 没有值的时候显示的内容 | string \| [string, string] | 请选择时间 | |
|
|
560
|
+
| placement | 选择框弹出的位置 | bottomLeft | bottomLeft | |
|
|
561
|
+
| popupClassName | 弹出层类名 | string | - | |
|
|
562
|
+
| popupStyle | 弹出层样式对象 | object | - | |
|
|
563
|
+
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
|
|
564
|
+
| renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - | |
|
|
565
|
+
| secondStep | 秒选项间隔 | number | 1 | |
|
|
566
|
+
| showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
|
|
567
|
+
| size | 输入框大小， | large | - | |
|
|
568
|
+
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
569
|
+
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
|
570
|
+
| use12Hours | 使用 12 小时制，为 true 时 | boolean | false | |
|
|
571
|
+
| value | 当前时间 | | - | |
|
|
572
|
+
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
573
|
+
| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - | |
|
|
574
|
+
| onChange | 时间发生变化的回调 | function(time: dayjs, timeString: string): void | - | |
|
|
575
|
+
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - | |
|
|
519
576
|
|
|
520
577
|
|
|
521
|
-
|
|
578
|
+
#### DisabledTime
|
|
522
579
|
|
|
523
|
-
| 参数 | 说明 | 类型 | 版本 |
|
|
524
|
-
|--------|--------|--------|--------|
|
|
525
|
-
| nativeElement | 最外层 div 元素 | HTMLDivElement | 5.11.0 |
|
|
526
|
-
| scrollTo | 滚动到目标位置（设置 | (config: { index?: number, key?: React.Key, top?: number }) => void | 5.11.0 |
|
|
527
580
|
|
|
581
|
+
```typescript
|
|
582
|
+
type DisabledTime = (now: Dayjs) => {
|
|
583
|
+
disabledHours?: () => number[];
|
|
584
|
+
disabledMinutes?: (selectedHour: number) => number[];
|
|
585
|
+
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
586
|
+
disabledMilliseconds?: (
|
|
587
|
+
selectedHour: number,
|
|
588
|
+
selectedMinute: number,
|
|
589
|
+
selectedSecond: number,
|
|
590
|
+
) => number[];
|
|
591
|
+
};
|
|
592
|
+
```
|
|
528
593
|
|
|
529
|
-
#### onRow 用法
|
|
530
594
|
|
|
531
|
-
|
|
595
|
+
注意：`disabledMilliseconds` 为 `5.14.0` 新增。
|
|
532
596
|
|
|
597
|
+
## 方法
|
|
533
598
|
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
537
|
-
|
|
538
|
-
onClick: (event) => {}, // 点击行
|
|
539
|
-
onDoubleClick: (event) => {},
|
|
540
|
-
onContextMenu: (event) => {},
|
|
541
|
-
onMouseEnter: (event) => {}, // 鼠标移入行
|
|
542
|
-
onMouseLeave: (event) => {},
|
|
543
|
-
};
|
|
544
|
-
}}
|
|
545
|
-
onHeaderRow={(columns, index) => {
|
|
546
|
-
return {
|
|
547
|
-
onClick: () => {}, // 点击表头行
|
|
548
|
-
};
|
|
549
|
-
}}
|
|
550
|
-
/>
|
|
551
|
-
```
|
|
599
|
+
| 名称 | 描述 | 版本 |
|
|
600
|
+
|--------|--------|--------|
|
|
601
|
+
| blur() | 移除焦点 | |
|
|
602
|
+
| focus() | 获取焦点 | |
|
|
552
603
|
|
|
553
604
|
|
|
554
|
-
|
|
605
|
+
## RangePicker
|
|
555
606
|
|
|
556
|
-
|
|
607
|
+
属性与 DatePicker 的 [RangePicker](/components/date-picker-cn#rangepicker) 相同。还包含以下属性：
|
|
557
608
|
|
|
558
609
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
559
610
|
|--------|--------|--------|--------|--------|
|
|
560
|
-
|
|
|
561
|
-
|
|
|
562
|
-
|
|
563
|
-
| dataIndex | 列数据在数据项中对应的路径，支持通过数组查询嵌套路径 | string \| string[] | - | |
|
|
564
|
-
| defaultFilteredValue | 默认筛选值 | string[] | - | |
|
|
565
|
-
| filterResetToDefaultFilteredValue | 点击重置按钮的时候，是否恢复默认筛选值 | boolean | false | |
|
|
566
|
-
| defaultSortOrder | 默认排序顺序 | ascend | - | |
|
|
567
|
-
| ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。 | boolean \| { showTitle?: boolean } | false | showTitle: 4.3.0 |
|
|
568
|
-
| filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | ReactNode \| (props: | - | |
|
|
569
|
-
| filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false | |
|
|
570
|
-
| filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string[] | - | |
|
|
571
|
-
| filterIcon | 自定义 filter 图标。 | ReactNode \| (filtered: boolean) => ReactNode | false | |
|
|
572
|
-
| filterOnClose | 是否在筛选菜单关闭时触发筛选 | boolean | true | 5.15.0 |
|
|
573
|
-
| filterMultiple | 是否多选 | boolean | true | |
|
|
574
|
-
| filterMode | 指定筛选菜单的用户界面 | 'menu' \| 'tree' | 'menu' | 4.17.0 |
|
|
575
|
-
| filterSearch | 筛选菜单项是否可搜索 | boolean \| function(input, record):boolean | false | boolean:4.17.0 function:4.19.0 |
|
|
576
|
-
| filters | 表头的筛选菜单项 | object[] | - | |
|
|
577
|
-
| filterDropdownProps | 自定义下拉属性，在 | | - | 5.22.0 |
|
|
578
|
-
| fixed | （IE 下无效）列是否固定，可选 | boolean \| string | false | |
|
|
579
|
-
| key | React 需要的 key，如果已经设置了唯一的 | string | - | |
|
|
580
|
-
| render | 生成复杂数据的渲染函数，参数分别为当前单元格的值，当前行数据，行索引 | function(value, record, index) {} | - | |
|
|
581
|
-
| responsive | 响应式 breakpoint 配置列表。未设置则始终可见。 | | - | 4.2.0 |
|
|
582
|
-
| rowScope | 设置列范围 | row | - | 5.1.0 |
|
|
583
|
-
| shouldCellUpdate | 自定义单元格渲染时机 | (record, prevRecord) => boolean | - | 4.3.0 |
|
|
584
|
-
| showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中 | boolean \| | { target: 'full-header' } | 5.16.0 |
|
|
585
|
-
| sortDirections | 支持的排序方式，覆盖 | Array | [ | |
|
|
586
|
-
| sorter | 排序函数，本地排序使用一个函数(参考 | function \| boolean \| { compare: function, multiple: number } | - | |
|
|
587
|
-
| sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 | ascend | - | |
|
|
588
|
-
| sortIcon | 自定义 sort 图标 | (props: { sortOrder }) => ReactNode | - | 5.6.0 |
|
|
589
|
-
| title | 列头显示文字（函数用法 | ReactNode \| ({ sortOrder, sortColumn, filters }) => ReactNode | - | |
|
|
590
|
-
| width | 列宽度（ | string \| number | - | |
|
|
591
|
-
| minWidth | 最小列宽度，只在 | number | - | 5.21.0 |
|
|
592
|
-
| hidden | 隐藏列 | boolean | false | 5.13.0 |
|
|
593
|
-
| onCell | 设置单元格属性 | function(record, rowIndex) | - | |
|
|
594
|
-
| onFilter | 本地模式下，确定筛选的运行函数 | function | - | |
|
|
595
|
-
| onHeaderCell | 设置头部单元格属性 | function(column) | - | |
|
|
611
|
+
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
612
|
+
| order | 始末时间是否自动排序 | boolean | true | 4.1.0 |
|
|
613
|
+
|
|
596
614
|
|
|
615
|
+
### RangeDisabledTime
|
|
597
616
|
|
|
598
|
-
### ColumnGroup
|
|
599
617
|
|
|
600
|
-
|
|
601
|
-
|
|
602
|
-
|
|
618
|
+
```typescript
|
|
619
|
+
type RangeDisabledTime = (
|
|
620
|
+
now: Dayjs,
|
|
621
|
+
type = 'start' | 'end',
|
|
622
|
+
) => {
|
|
623
|
+
disabledHours?: () => number[];
|
|
624
|
+
disabledMinutes?: (selectedHour: number) => number[];
|
|
625
|
+
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
626
|
+
};
|
|
627
|
+
```
|
|
603
628
|
|
|
604
629
|
|
|
605
|
-
### pagination
|
|
606
630
|
|
|
607
|
-
分页的配置项。
|
|
608
631
|
|
|
609
|
-
|
|
632
|
+
<DemoTitle title="Switch" desc="使用开关切换两种状态之间。">
|
|
633
|
+
#### API
|
|
634
|
+
|
|
635
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
610
636
|
|--------|--------|--------|--------|
|
|
611
|
-
|
|
|
637
|
+
| label | Switch后的内容 | ReactNode | |
|
|
612
638
|
|
|
639
|
+
<AntdApiRef url="https://ant.design/components/switch-cn/#api"></AntdApiRef>
|
|
613
640
|
|
|
614
|
-
更多配置项，请查看 [`Pagination`](/components/pagination-cn)。
|
|
615
641
|
|
|
616
|
-
|
|
642
|
+
## antd API
|
|
617
643
|
|
|
618
|
-
|
|
644
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
619
645
|
|
|
620
646
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
621
647
|
|--------|--------|--------|--------|--------|
|
|
622
|
-
|
|
|
623
|
-
|
|
|
624
|
-
|
|
|
625
|
-
|
|
|
626
|
-
|
|
|
627
|
-
|
|
|
628
|
-
|
|
|
629
|
-
|
|
|
630
|
-
|
|
|
631
|
-
|
|
|
632
|
-
|
|
|
633
|
-
|
|
|
634
|
-
|
|
|
635
|
-
| showExpandColumn | 是否显示展开图标列 | boolean | true | 4.18.0 |
|
|
636
|
-
| onExpand | 点击展开图标时触发 | function(expanded, record) | - | |
|
|
637
|
-
| onExpandedRowsChange | 展开的行变化时触发 | function(expandedRows) | - | |
|
|
648
|
+
| autoFocus | 组件自动获取焦点 | boolean | false | |
|
|
649
|
+
| checked | 指定当前是否选中 | boolean | false | |
|
|
650
|
+
| checkedChildren | 选中时的内容 | ReactNode | - | |
|
|
651
|
+
| className | Switch 器类名 | string | - | |
|
|
652
|
+
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
653
|
+
| defaultValue | defaultChecked | boolean | - | 5.12.0 |
|
|
654
|
+
| disabled | 是否禁用 | boolean | false | |
|
|
655
|
+
| loading | 加载中的开关 | boolean | false | |
|
|
656
|
+
| size | 开关大小，可选值： | string | default | |
|
|
657
|
+
| unCheckedChildren | 非选中时的内容 | ReactNode | - | |
|
|
658
|
+
| value | checked | boolean | - | 5.12.0 |
|
|
659
|
+
| onChange | 变化时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
660
|
+
| onClick | 点击时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
638
661
|
|
|
639
662
|
|
|
640
|
-
|
|
663
|
+
## 方法
|
|
641
664
|
|
|
642
|
-
|
|
665
|
+
| 名称 | 描述 |
|
|
666
|
+
|--------|--------|
|
|
667
|
+
| blur() | 移除焦点 |
|
|
668
|
+
| focus() | 获取焦点 |
|
|
643
669
|
|
|
644
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
645
|
-
|--------|--------|--------|--------|--------|
|
|
646
|
-
| align | 设置选择列的对齐方式 | left | left | 5.25.0 |
|
|
647
|
-
| checkStrictly | checkable 状态下节点选择完全受控（父子数据选中状态不再关联） | boolean | true | 4.4.0 |
|
|
648
|
-
| columnTitle | 自定义列表选择框标题 | ReactNode \| (originalNode: ReactNode) => ReactNode | - | |
|
|
649
|
-
| columnWidth | 自定义列表选择框宽度 | string \| number | 32px | |
|
|
650
|
-
| fixed | 把选择框列固定在左边 | boolean | - | |
|
|
651
|
-
| getCheckboxProps | 选择框的默认属性配置 | function(record) | - | |
|
|
652
|
-
| hideSelectAll | 隐藏全选勾选框与自定义选择项 | boolean | false | 4.3.0 |
|
|
653
|
-
| preserveSelectedRowKeys | 当数据被删除时仍然保留选项的 | boolean | - | 4.4.0 |
|
|
654
|
-
| renderCell | 渲染勾选框，用法与 Column 的 | function(checked, record, index, originNode) {} | - | 4.1.0 |
|
|
655
|
-
| selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | string[] \| number[] | [] | |
|
|
656
|
-
| defaultSelectedRowKeys | 默认选中项的 key 数组 | string[] \| number[] | [] | |
|
|
657
|
-
| selections | 自定义选择项 | object[] \| boolean | true | |
|
|
658
|
-
| type | 多选/单选 | checkbox | checkbox | |
|
|
659
|
-
| onCell | 设置单元格属性，用法与 Column 的 | function(record, rowIndex) | - | 5.5.0 |
|
|
660
|
-
| onChange | 选中项发生变化时的回调 | function(selectedRowKeys, selectedRows, info: { type }) | - | info.type |
|
|
661
|
-
| onSelect | 用户手动选择/取消选择某行的回调 | function(record, selected, selectedRows, nativeEvent) | - | |
|
|
662
|
-
| onSelectAll | 用户手动选择/取消选择所有行的回调 | function(selected, selectedRows, changeRows) | - | |
|
|
663
|
-
| onSelectInvert | 用户手动选择反选的回调 | function(selectedRowKeys) | - | |
|
|
664
|
-
| onSelectNone | 用户清空选择的回调 | function() | - | |
|
|
665
|
-
| onSelectMultiple | 用户使用键盘 shift 选择多行的回调 | function(selected, selectedRows, changeRows) | - | |
|
|
666
670
|
|
|
667
671
|
|
|
668
|
-
### scroll
|
|
669
672
|
|
|
670
|
-
|
|
671
|
-
|
|
672
|
-
| scrollToFirstRowOnChange | 当分页、排序、筛选变化后是否滚动到表格顶部 | boolean | - |
|
|
673
|
-
| x | 设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比， | string \| number \| true | - |
|
|
674
|
-
| y | 设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值 | string \| number | - |
|
|
673
|
+
<DemoTitle title="Steps" desc="引导用户按照流程完成任务的导航条。">
|
|
674
|
+
#### API
|
|
675
675
|
|
|
676
|
+
<AntdApiRef url="https://ant.design/components/steps-cn/#api"></AntdApiRef>
|
|
676
677
|
|
|
677
|
-
### selection
|
|
678
678
|
|
|
679
|
-
|
|
680
|
-
|--------|--------|--------|--------|
|
|
681
|
-
| key | React 需要的 key，建议设置 | string | - |
|
|
682
|
-
| text | 选择项显示的文字 | ReactNode | - |
|
|
683
|
-
| onSelect | 选择项点击回调 | function(changeableRowKeys) | - |
|
|
679
|
+
## antd API
|
|
684
680
|
|
|
681
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
685
682
|
|
|
686
|
-
|
|
683
|
+
### Steps
|
|
687
684
|
|
|
685
|
+
整体步骤条。
|
|
688
686
|
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
687
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
688
|
+
|--------|--------|--------|--------|--------|
|
|
689
|
+
| className | 步骤条类名 | string | - | |
|
|
690
|
+
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 | number | 0 | |
|
|
691
|
+
| direction | 指定步骤条方向。目前支持水平（ | string | horizontal | |
|
|
692
|
+
| initial | 起始序号，从 0 开始记数 | number | 0 | |
|
|
693
|
+
| labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选 | string | horizontal | |
|
|
694
|
+
| percent | 当前 | number | - | 4.5.0 |
|
|
695
|
+
| progressDot | 点状步骤条，可以设置为一个 function，labelPlacement 将强制为 | boolean \| (iconDot, {index, status, title, description}) => ReactNode | false | |
|
|
696
|
+
| responsive | 当屏幕宽度小于 | boolean | true | |
|
|
697
|
+
| size | 指定大小，目前支持普通（ | string | default | |
|
|
698
|
+
| status | 指定当前步骤的状态，可选 | string | process | |
|
|
699
|
+
| type | 步骤条类型，可选 | string | default | inline: 5.0 |
|
|
700
|
+
| onChange | 点击切换步骤时触发 | (current) => void | - | |
|
|
701
|
+
| items | 配置选项卡内容 | | [] | 4.24.0 |
|
|
693
702
|
|
|
694
|
-
interface User {
|
|
695
|
-
key: number;
|
|
696
|
-
name: string;
|
|
697
|
-
}
|
|
698
703
|
|
|
699
|
-
|
|
700
|
-
{
|
|
701
|
-
key: 'name',
|
|
702
|
-
title: 'Name',
|
|
703
|
-
dataIndex: 'name',
|
|
704
|
-
},
|
|
705
|
-
];
|
|
704
|
+
### `type="inline"`
|
|
706
705
|
|
|
707
|
-
|
|
708
|
-
|
|
709
|
-
|
|
710
|
-
|
|
711
|
-
|
|
712
|
-
|
|
706
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
707
|
+
|--------|--------|--------|--------|--------|
|
|
708
|
+
| className | 步骤条类名 | string | - | |
|
|
709
|
+
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 | number | 0 | |
|
|
710
|
+
| initial | 起始序号，从 0 开始记数 | number | 0 | |
|
|
711
|
+
| status | 指定当前步骤的状态，可选 | string | process | |
|
|
712
|
+
| onChange | 点击切换步骤时触发 | (current) => void | - | |
|
|
713
|
+
| items | 配置选项卡内容，不支持 | | [] | 4.24.0 |
|
|
713
714
|
|
|
714
|
-
const Demo: React.FC = () => (
|
|
715
|
-
<>
|
|
716
|
-
<Table<User> columns={columns} dataSource={data} />
|
|
717
|
-
{/* 使用 JSX 风格的 API */}
|
|
718
|
-
<Table<User> dataSource={data}>
|
|
719
|
-
<Table.Column<User> key="name" title="Name" dataIndex="name" />
|
|
720
|
-
</Table>
|
|
721
|
-
</>
|
|
722
|
-
);
|
|
723
715
|
|
|
724
|
-
|
|
725
|
-
```
|
|
716
|
+
### StepItem
|
|
726
717
|
|
|
718
|
+
步骤条内的每一个步骤。
|
|
719
|
+
|
|
720
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
721
|
+
|--------|--------|--------|--------|--------|
|
|
722
|
+
| description | 步骤的详情描述，可选 | ReactNode | - | |
|
|
723
|
+
| disabled | 禁用点击 | boolean | false | |
|
|
724
|
+
| icon | 步骤图标的类型，可选 | ReactNode | - | |
|
|
725
|
+
| status | 指定状态。当不配置该属性时，会使用 Steps 的 | string | wait | |
|
|
726
|
+
| subTitle | 子标题 | ReactNode | - | |
|
|
727
|
+
| title | 标题 | ReactNode | - | |
|
|
727
728
|
|
|
728
|
-
TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/serene-platform-0jo5t)。
|
|
729
729
|
|
|
730
730
|
|
|
731
731
|
|
|
@@ -789,6 +789,23 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
789
789
|
|
|
790
790
|
|
|
791
791
|
|
|
792
|
+
<DemoTitle title="Spinner" desc="指示页面或区块的加载中状态">
|
|
793
|
+
#### API
|
|
794
|
+
|
|
795
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
796
|
+
|--------|--------|--------|--------|
|
|
797
|
+
| tip | indicator下方的tip | React.ReactNode | - |
|
|
798
|
+
| indicator | 自定义indicator，用于展示progress的百分比和加载文案 | React.ReactNode | - |
|
|
799
|
+
| children | 被spinner包裹的子元素 | React.ReactNode | - |
|
|
800
|
+
| style | spinner最外层的样式 | React.CSSProperties | - |
|
|
801
|
+
| className | spinner的类名 | string | - |
|
|
802
|
+
| percent | 进度条的百分比 | number | - |
|
|
803
|
+
| spinning | 是否为加载中状态 | boolean | false |
|
|
804
|
+
| showProgress | 是否显示进度条，如果为true，不需要手动在children中添加Progress组件 | boolean | false |
|
|
805
|
+
|
|
806
|
+
|
|
807
|
+
|
|
808
|
+
|
|
792
809
|
<DemoTitle title="Skeleton" desc="在内容加载时提供占位图形展示。">
|
|
793
810
|
## antd API
|
|
794
811
|
|
|
@@ -834,82 +851,18 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
834
851
|
|
|
835
852
|
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
836
853
|
|--------|--------|--------|--------|--------|
|
|
837
|
-
| active | 是否展示动画效果 | boolean | false | |
|
|
838
|
-
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | 4.17.0 |
|
|
839
|
-
| shape | 指定按钮的形状 | circle | - | |
|
|
840
|
-
| size | 设置按钮的大小 | large | - | |
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
### SkeletonInputProps
|
|
844
|
-
|
|
845
|
-
| 属性 | 说明 | 类型 | 默认值 |
|
|
846
|
-
|--------|--------|--------|--------|
|
|
847
|
-
| active | 是否展示动画效果 | boolean | false |
|
|
848
|
-
| size | 设置输入框的大小 | large | - |
|
|
849
|
-
|
|
850
|
-
|
|
851
|
-
|
|
852
|
-
|
|
853
|
-
<DemoTitle title="Slider" desc="滑动型输入器，展示当前值和可选范围。">
|
|
854
|
-
#### API
|
|
855
|
-
|
|
856
|
-
<AntdApiRef url="https://ant.design/components/slider-cn/#api"></AntdApiRef>
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
## antd API
|
|
860
|
-
|
|
861
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
862
|
-
|
|
863
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
864
|
-
|--------|--------|--------|--------|--------|
|
|
865
|
-
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
866
|
-
| classNames | 语义化结构 className | | - | 5.10.0 |
|
|
867
|
-
| defaultValue | 设置初始取值。当 | number \| [number, number] | 0 \| [0, 0] | |
|
|
868
|
-
| disabled | 值为 true 时，滑块为禁用状态 | boolean | false | |
|
|
869
|
-
| keyboard | 支持使用键盘操作 handler | boolean | true | 5.2.0+ |
|
|
870
|
-
| dots | 是否只能拖拽到刻度上 | boolean | false | |
|
|
871
|
-
| included | marks | boolean | true | |
|
|
872
|
-
| marks | 刻度标记，key 的类型必须为 | object | { number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } } | |
|
|
873
|
-
| max | 最大值 | number | 100 | |
|
|
874
|
-
| min | 最小值 | number | 0 | |
|
|
875
|
-
| range | 双滑块模式 | boolean \| | false | |
|
|
876
|
-
| reverse | 反向坐标轴 | boolean | false | |
|
|
877
|
-
| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 | number \| null | 1 | |
|
|
878
|
-
| styles | 语义化结构 styles | | - | 5.10.0 |
|
|
879
|
-
| tooltip | 设置 Tooltip 相关属性 | | - | 4.23.0 |
|
|
880
|
-
| value | 设置当前取值。当 | number \| [number, number] | - | |
|
|
881
|
-
| vertical | 值为 true 时，Slider 为垂直方向 | boolean | false | |
|
|
882
|
-
| onChangeComplete | 与 | (value) => void | - | |
|
|
883
|
-
| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | (value) => void | - | |
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
### range
|
|
887
|
-
|
|
888
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
889
|
-
|--------|--------|--------|--------|--------|
|
|
890
|
-
| draggableTrack | 范围刻度是否可被拖拽 | boolean | false | |
|
|
891
|
-
| editable | 启动动态增减节点，不能和 | boolean | false | 5.20.0 |
|
|
892
|
-
| minCount | 配置 | number | 0 | 5.20.0 |
|
|
893
|
-
| maxCount | 配置 | number | - | 5.20.0 |
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
### tooltip
|
|
897
|
-
|
|
898
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
899
|
-
|--------|--------|--------|--------|--------|
|
|
900
|
-
| autoAdjustOverflow | 是否自动调整弹出位置 | boolean | true | 5.8.0 |
|
|
901
|
-
| open | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时 | boolean | - | 4.23.0 |
|
|
902
|
-
| placement | 设置 Tooltip 展示位置。参考 | string | - | 4.23.0 |
|
|
903
|
-
| getPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
|
|
904
|
-
| formatter | Slider 会把当前值传给 | value => ReactNode \| null | IDENTITY | 4.23.0 |
|
|
854
|
+
| active | 是否展示动画效果 | boolean | false | |
|
|
855
|
+
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | 4.17.0 |
|
|
856
|
+
| shape | 指定按钮的形状 | circle | - | |
|
|
857
|
+
| size | 设置按钮的大小 | large | - | |
|
|
905
858
|
|
|
906
859
|
|
|
907
|
-
|
|
860
|
+
### SkeletonInputProps
|
|
908
861
|
|
|
909
|
-
|
|
|
910
|
-
|
|
911
|
-
|
|
|
912
|
-
|
|
|
862
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
863
|
+
|--------|--------|--------|--------|
|
|
864
|
+
| active | 是否展示动画效果 | boolean | false |
|
|
865
|
+
| size | 设置输入框的大小 | large | - |
|
|
913
866
|
|
|
914
867
|
|
|
915
868
|
|
|
@@ -1012,33 +965,85 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1012
965
|
|
|
1013
966
|
|
|
1014
967
|
|
|
1015
|
-
<DemoTitle title="
|
|
968
|
+
<DemoTitle title="Slider" desc="滑动型输入器，展示当前值和可选范围。">
|
|
1016
969
|
#### API
|
|
1017
970
|
|
|
1018
|
-
|
|
1019
|
-
|--------|--------|--------|--------|
|
|
1020
|
-
| tip | indicator下方的tip | React.ReactNode | - |
|
|
1021
|
-
| indicator | 自定义indicator，用于展示progress的百分比和加载文案 | React.ReactNode | - |
|
|
1022
|
-
| children | 被spinner包裹的子元素 | React.ReactNode | - |
|
|
1023
|
-
| style | spinner最外层的样式 | React.CSSProperties | - |
|
|
1024
|
-
| className | spinner的类名 | string | - |
|
|
1025
|
-
| percent | 进度条的百分比 | number | - |
|
|
1026
|
-
| spinning | 是否为加载中状态 | boolean | false |
|
|
1027
|
-
| showProgress | 是否显示进度条，如果为true，不需要手动在children中添加Progress组件 | boolean | false |
|
|
971
|
+
<AntdApiRef url="https://ant.design/components/slider-cn/#api"></AntdApiRef>
|
|
1028
972
|
|
|
1029
973
|
|
|
974
|
+
## antd API
|
|
975
|
+
|
|
976
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
977
|
+
|
|
978
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
979
|
+
|--------|--------|--------|--------|--------|
|
|
980
|
+
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
981
|
+
| classNames | 语义化结构 className | | - | 5.10.0 |
|
|
982
|
+
| defaultValue | 设置初始取值。当 | number \| [number, number] | 0 \| [0, 0] | |
|
|
983
|
+
| disabled | 值为 true 时，滑块为禁用状态 | boolean | false | |
|
|
984
|
+
| keyboard | 支持使用键盘操作 handler | boolean | true | 5.2.0+ |
|
|
985
|
+
| dots | 是否只能拖拽到刻度上 | boolean | false | |
|
|
986
|
+
| included | marks | boolean | true | |
|
|
987
|
+
| marks | 刻度标记，key 的类型必须为 | object | { number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } } | |
|
|
988
|
+
| max | 最大值 | number | 100 | |
|
|
989
|
+
| min | 最小值 | number | 0 | |
|
|
990
|
+
| range | 双滑块模式 | boolean \| | false | |
|
|
991
|
+
| reverse | 反向坐标轴 | boolean | false | |
|
|
992
|
+
| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 | number \| null | 1 | |
|
|
993
|
+
| styles | 语义化结构 styles | | - | 5.10.0 |
|
|
994
|
+
| tooltip | 设置 Tooltip 相关属性 | | - | 4.23.0 |
|
|
995
|
+
| value | 设置当前取值。当 | number \| [number, number] | - | |
|
|
996
|
+
| vertical | 值为 true 时，Slider 为垂直方向 | boolean | false | |
|
|
997
|
+
| onChangeComplete | 与 | (value) => void | - | |
|
|
998
|
+
| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | (value) => void | - | |
|
|
999
|
+
|
|
1000
|
+
|
|
1001
|
+
### range
|
|
1002
|
+
|
|
1003
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1004
|
+
|--------|--------|--------|--------|--------|
|
|
1005
|
+
| draggableTrack | 范围刻度是否可被拖拽 | boolean | false | |
|
|
1006
|
+
| editable | 启动动态增减节点，不能和 | boolean | false | 5.20.0 |
|
|
1007
|
+
| minCount | 配置 | number | 0 | 5.20.0 |
|
|
1008
|
+
| maxCount | 配置 | number | - | 5.20.0 |
|
|
1009
|
+
|
|
1010
|
+
|
|
1011
|
+
### tooltip
|
|
1012
|
+
|
|
1013
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1014
|
+
|--------|--------|--------|--------|--------|
|
|
1015
|
+
| autoAdjustOverflow | 是否自动调整弹出位置 | boolean | true | 5.8.0 |
|
|
1016
|
+
| open | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时 | boolean | - | 4.23.0 |
|
|
1017
|
+
| placement | 设置 Tooltip 展示位置。参考 | string | - | 4.23.0 |
|
|
1018
|
+
| getPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
|
|
1019
|
+
| formatter | Slider 会把当前值传给 | value => ReactNode \| null | IDENTITY | 4.23.0 |
|
|
1020
|
+
|
|
1021
|
+
|
|
1022
|
+
## 方法
|
|
1023
|
+
|
|
1024
|
+
| 名称 | 描述 | 版本 |
|
|
1025
|
+
|--------|--------|--------|
|
|
1026
|
+
| blur() | 移除焦点 | |
|
|
1027
|
+
| focus() | 获取焦点 | |
|
|
1030
1028
|
|
|
1031
1029
|
|
|
1032
|
-
|
|
1033
|
-
|
|
1030
|
+
|
|
1031
|
+
|
|
1032
|
+
<DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。">
|
|
1033
|
+
## API
|
|
1034
1034
|
|
|
1035
1035
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1036
1036
|
|--------|--------|--------|--------|
|
|
1037
|
-
|
|
|
1038
|
-
| ghost | 按钮背景色类型 | boolean | true |
|
|
1039
|
-
| gap | 间距 | number | 12 px |
|
|
1037
|
+
| texture | 是否显示纹理 | boolean | false |
|
|
1040
1038
|
|
|
1041
1039
|
|
|
1040
|
+
|
|
1041
|
+
|
|
1042
|
+
|
|
1043
|
+
|
|
1044
|
+
<DemoTitle title="Radio" desc="用于在多个备选项中选中单个状态。">
|
|
1045
|
+
#### API
|
|
1046
|
+
|
|
1042
1047
|
<AntdApiRef url="https://ant.design/components/radio-cn/#api"></AntdApiRef>
|
|
1043
1048
|
|
|
1044
1049
|
|
|
@@ -1104,18 +1109,6 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1104
1109
|
|
|
1105
1110
|
|
|
1106
1111
|
|
|
1107
|
-
<DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。">
|
|
1108
|
-
## API
|
|
1109
|
-
|
|
1110
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1111
|
-
|--------|--------|--------|--------|
|
|
1112
|
-
| texture | 是否显示纹理 | boolean | false |
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
1112
|
<DemoTitle title="MdEditor" desc="提示词编辑器，可以高亮 Markdown 的语法，支持自定义槽位变量的插入">
|
|
1120
1113
|
#### API
|
|
1121
1114
|
|
|
@@ -1133,9 +1126,16 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1133
1126
|
|
|
1134
1127
|
|
|
1135
1128
|
|
|
1136
|
-
<DemoTitle title="
|
|
1129
|
+
<DemoTitle title="RadioButton" desc="用于在多个备选项中选中单个状态。">
|
|
1137
1130
|
#### API
|
|
1138
1131
|
|
|
1132
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1133
|
+
|--------|--------|--------|--------|
|
|
1134
|
+
| bordered | 边框 | boolean | false |
|
|
1135
|
+
| ghost | 按钮背景色类型 | boolean | true |
|
|
1136
|
+
| gap | 间距 | number | 12 px |
|
|
1137
|
+
|
|
1138
|
+
|
|
1139
1139
|
<AntdApiRef url="https://ant.design/components/radio-cn/#api"></AntdApiRef>
|
|
1140
1140
|
|
|
1141
1141
|
|
|
@@ -1253,110 +1253,6 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1253
1253
|
|
|
1254
1254
|
|
|
1255
1255
|
|
|
1256
|
-
<DemoTitle title="Pagination" desc="分页器用于分隔长列表，每次只加载一个页面。">
|
|
1257
|
-
## API
|
|
1258
|
-
|
|
1259
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1260
|
-
|--------|--------|--------|--------|
|
|
1261
|
-
| hideSwitchButton | 是否展示上一页/下一页的切换按钮 | boolean | false |
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
<AntdApiRef url="https://ant.design/components/pagination-cn/#api"></AntdApiRef>
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
## antd API
|
|
1268
|
-
|
|
1269
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
```jsx
|
|
1273
|
-
<Pagination onChange={onChange} total={50} />
|
|
1274
|
-
```
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1278
|
-
|--------|--------|--------|--------|--------|
|
|
1279
|
-
| align | 对齐方式 | start \| center \| end | - | 5.19.0 |
|
|
1280
|
-
| current | 当前页数 | number | - | |
|
|
1281
|
-
| defaultCurrent | 默认的当前页数 | number | 1 | |
|
|
1282
|
-
| defaultPageSize | 默认的每页条数 | number | 10 | |
|
|
1283
|
-
| disabled | 禁用分页 | boolean | - | |
|
|
1284
|
-
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | |
|
|
1285
|
-
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | |
|
|
1286
|
-
| pageSize | 每页条数 | number | - | |
|
|
1287
|
-
| pageSizeOptions | 指定每页可以显示多少条 | number[] | [ | |
|
|
1288
|
-
| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | |
|
|
1289
|
-
| showLessItems | 是否显示较少页面内容 | boolean | false | |
|
|
1290
|
-
| showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false | |
|
|
1291
|
-
| showSizeChanger | 是否展示 | boolean \| | - | SelectProps: 5.21.0 |
|
|
1292
|
-
| showTitle | 是否显示原生 tooltip 页码提示 | boolean | true | |
|
|
1293
|
-
| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | |
|
|
1294
|
-
| simple | 当添加该属性时，显示为简单分页 | boolean \| { readOnly?: boolean } | - | |
|
|
1295
|
-
| size | 当为 | default | default | |
|
|
1296
|
-
| total | 数据总数 | number | 0 | |
|
|
1297
|
-
| onChange | 页码或 | function(page, pageSize) | - | |
|
|
1298
|
-
| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | |
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
<DemoTitle title="Popconfirm" desc="点击元素，弹出气泡式的确认框。">
|
|
1304
|
-
#### API
|
|
1305
|
-
|
|
1306
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1307
|
-
|--------|--------|--------|--------|
|
|
1308
|
-
| type | 类型 | 'info' \| 'warning' \| 'error' \| 'success' \| 'confirm' | 'confirm' |
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
<AntdApiRef url="https://ant.design/components/popconfirm-cn/#api"></AntdApiRef>
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
## antd API
|
|
1315
|
-
|
|
1316
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1317
|
-
|
|
1318
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1319
|
-
|--------|--------|--------|--------|--------|
|
|
1320
|
-
| cancelButtonProps | cancel 按钮 props | | - | |
|
|
1321
|
-
| cancelText | 取消按钮文字 | string | 取消 | |
|
|
1322
|
-
| disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false | |
|
|
1323
|
-
| icon | 自定义弹出气泡 Icon 图标 | ReactNode | | |
|
|
1324
|
-
| okButtonProps | ok 按钮 props | | - | |
|
|
1325
|
-
| okText | 确认按钮文字 | string | 确定 | |
|
|
1326
|
-
| okType | 确认按钮类型 | string | primary | |
|
|
1327
|
-
| showCancel | 是否显示取消按钮 | boolean | true | 4.18.0 |
|
|
1328
|
-
| title | 确认框标题 | ReactNode \| () => ReactNode | - | |
|
|
1329
|
-
| description | 确认内容的详细描述 | ReactNode \| () => ReactNode | - | 5.1.0 |
|
|
1330
|
-
| onCancel | 点击取消的回调 | function(e) | - | |
|
|
1331
|
-
| onConfirm | 点击确认的回调 | function(e) | - | |
|
|
1332
|
-
| onPopupClick | 弹出气泡点击事件 | function(e) | - | 5.5.0 |
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
<!-- 共同的 API -->
|
|
1336
|
-
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
1337
|
-
|
|
1338
|
-
<!-- prettier-ignore -->
|
|
1339
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1340
|
-
|--------|--------|--------|--------|--------|
|
|
1341
|
-
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
1342
|
-
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
1343
|
-
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
1344
|
-
| color | 背景颜色 | string | - | 4.3.0 |
|
|
1345
|
-
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
1346
|
-
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
1347
|
-
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
1348
|
-
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
1349
|
-
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
1350
|
-
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
1351
|
-
| placement | 气泡框位置，可选 | string | top | |
|
|
1352
|
-
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
1353
|
-
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
1354
|
-
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
1355
|
-
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
1256
|
<DemoTitle title="Popover" desc="点击/鼠标移入元素，弹出气泡式的卡片浮层">
|
|
1361
1257
|
#### API
|
|
1362
1258
|
|
|
@@ -1401,98 +1297,106 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1401
1297
|
|
|
1402
1298
|
|
|
1403
1299
|
|
|
1404
|
-
<DemoTitle title="
|
|
1300
|
+
<DemoTitle title="Popconfirm" desc="点击元素，弹出气泡式的确认框。">
|
|
1405
1301
|
#### API
|
|
1406
1302
|
|
|
1407
|
-
|
|
1303
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1304
|
+
|--------|--------|--------|--------|
|
|
1305
|
+
| type | 类型 | 'info' \| 'warning' \| 'error' \| 'success' \| 'confirm' | 'confirm' |
|
|
1306
|
+
|
|
1307
|
+
|
|
1308
|
+
<AntdApiRef url="https://ant.design/components/popconfirm-cn/#api"></AntdApiRef>
|
|
1408
1309
|
|
|
1409
1310
|
|
|
1410
1311
|
## antd API
|
|
1411
1312
|
|
|
1412
1313
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1413
1314
|
|
|
1315
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1316
|
+
|--------|--------|--------|--------|--------|
|
|
1317
|
+
| cancelButtonProps | cancel 按钮 props | | - | |
|
|
1318
|
+
| cancelText | 取消按钮文字 | string | 取消 | |
|
|
1319
|
+
| disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false | |
|
|
1320
|
+
| icon | 自定义弹出气泡 Icon 图标 | ReactNode | | |
|
|
1321
|
+
| okButtonProps | ok 按钮 props | | - | |
|
|
1322
|
+
| okText | 确认按钮文字 | string | 确定 | |
|
|
1323
|
+
| okType | 确认按钮类型 | string | primary | |
|
|
1324
|
+
| showCancel | 是否显示取消按钮 | boolean | true | 4.18.0 |
|
|
1325
|
+
| title | 确认框标题 | ReactNode \| () => ReactNode | - | |
|
|
1326
|
+
| description | 确认内容的详细描述 | ReactNode \| () => ReactNode | - | 5.1.0 |
|
|
1327
|
+
| onCancel | 点击取消的回调 | function(e) | - | |
|
|
1328
|
+
| onConfirm | 点击确认的回调 | function(e) | - | |
|
|
1329
|
+
| onPopupClick | 弹出气泡点击事件 | function(e) | - | 5.5.0 |
|
|
1414
1330
|
|
|
1415
|
-
- `notification.success(config)`
|
|
1416
|
-
- `notification.error(config)`
|
|
1417
|
-
- `notification.info(config)`
|
|
1418
|
-
- `notification.warning(config)`
|
|
1419
|
-
- `notification.open(config)`
|
|
1420
|
-
- `notification.destroy(key?: String)`
|
|
1421
|
-
|
|
1422
|
-
config 参数如下：
|
|
1423
1331
|
|
|
1332
|
+
<!-- 共同的 API -->
|
|
1333
|
+
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
1334
|
+
|
|
1335
|
+
<!-- prettier-ignore -->
|
|
1424
1336
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1425
1337
|
|--------|--------|--------|--------|--------|
|
|
1426
|
-
|
|
|
1427
|
-
|
|
|
1428
|
-
|
|
|
1429
|
-
|
|
|
1430
|
-
|
|
|
1431
|
-
|
|
|
1432
|
-
|
|
|
1433
|
-
|
|
|
1434
|
-
|
|
|
1435
|
-
|
|
|
1436
|
-
| placement |
|
|
1437
|
-
|
|
|
1438
|
-
|
|
|
1439
|
-
|
|
|
1440
|
-
|
|
|
1441
|
-
| props | 透传至通知 | Object | - | - |
|
|
1338
|
+
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
1339
|
+
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
1340
|
+
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
1341
|
+
| color | 背景颜色 | string | - | 4.3.0 |
|
|
1342
|
+
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
1343
|
+
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
1344
|
+
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
1345
|
+
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
1346
|
+
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
1347
|
+
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
1348
|
+
| placement | 气泡框位置，可选 | string | top | |
|
|
1349
|
+
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
1350
|
+
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
1351
|
+
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
1352
|
+
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
1442
1353
|
|
|
1443
1354
|
|
|
1444
1355
|
|
|
1445
|
-
- `notification.useNotification(config)`
|
|
1446
1356
|
|
|
1447
|
-
|
|
1357
|
+
<DemoTitle title="Pagination" desc="分页器用于分隔长列表，每次只加载一个页面。">
|
|
1358
|
+
## API
|
|
1448
1359
|
|
|
1449
|
-
|
|
|
1450
|
-
|
|
1451
|
-
|
|
|
1452
|
-
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1453
|
-
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body | |
|
|
1454
|
-
| placement | 弹出位置，可选 | string | topRight | |
|
|
1455
|
-
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1456
|
-
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1457
|
-
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1458
|
-
| stack | 堆叠模式，超过阈值时会将所有消息收起 | boolean \| | { threshold: 3 } | 5.10.0 |
|
|
1459
|
-
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | |
|
|
1460
|
-
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
|
|
1360
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1361
|
+
|--------|--------|--------|--------|
|
|
1362
|
+
| hideSwitchButton | 是否展示上一页/下一页的切换按钮 | boolean | false |
|
|
1461
1363
|
|
|
1462
1364
|
|
|
1463
|
-
|
|
1365
|
+
<AntdApiRef url="https://ant.design/components/pagination-cn/#api"></AntdApiRef>
|
|
1464
1366
|
|
|
1465
|
-
还提供了一个全局配置方法，在调用前提前配置，全局一次生效。
|
|
1466
1367
|
|
|
1467
|
-
|
|
1368
|
+
## antd API
|
|
1468
1369
|
|
|
1469
|
-
|
|
1370
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1470
1371
|
|
|
1471
1372
|
|
|
1472
|
-
```
|
|
1473
|
-
|
|
1474
|
-
placement: 'bottomRight',
|
|
1475
|
-
bottom: 50,
|
|
1476
|
-
duration: 3,
|
|
1477
|
-
rtl: true,
|
|
1478
|
-
});
|
|
1373
|
+
```jsx
|
|
1374
|
+
<Pagination onChange={onChange} total={50} />
|
|
1479
1375
|
```
|
|
1480
1376
|
|
|
1481
1377
|
|
|
1482
|
-
#### notification.config
|
|
1483
|
-
|
|
1484
1378
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1485
1379
|
|--------|--------|--------|--------|--------|
|
|
1486
|
-
|
|
|
1487
|
-
|
|
|
1488
|
-
|
|
|
1489
|
-
|
|
|
1490
|
-
|
|
|
1491
|
-
|
|
|
1492
|
-
|
|
|
1493
|
-
|
|
|
1494
|
-
|
|
|
1495
|
-
|
|
|
1380
|
+
| align | 对齐方式 | start \| center \| end | - | 5.19.0 |
|
|
1381
|
+
| current | 当前页数 | number | - | |
|
|
1382
|
+
| defaultCurrent | 默认的当前页数 | number | 1 | |
|
|
1383
|
+
| defaultPageSize | 默认的每页条数 | number | 10 | |
|
|
1384
|
+
| disabled | 禁用分页 | boolean | - | |
|
|
1385
|
+
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | |
|
|
1386
|
+
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | |
|
|
1387
|
+
| pageSize | 每页条数 | number | - | |
|
|
1388
|
+
| pageSizeOptions | 指定每页可以显示多少条 | number[] | [ | |
|
|
1389
|
+
| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | |
|
|
1390
|
+
| showLessItems | 是否显示较少页面内容 | boolean | false | |
|
|
1391
|
+
| showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false | |
|
|
1392
|
+
| showSizeChanger | 是否展示 | boolean \| | - | SelectProps: 5.21.0 |
|
|
1393
|
+
| showTitle | 是否显示原生 tooltip 页码提示 | boolean | true | |
|
|
1394
|
+
| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | |
|
|
1395
|
+
| simple | 当添加该属性时，显示为简单分页 | boolean \| { readOnly?: boolean } | - | |
|
|
1396
|
+
| size | 当为 | default | default | |
|
|
1397
|
+
| total | 数据总数 | number | 0 | |
|
|
1398
|
+
| onChange | 页码或 | function(page, pageSize) | - | |
|
|
1399
|
+
| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | |
|
|
1496
1400
|
|
|
1497
1401
|
|
|
1498
1402
|
|
|
@@ -1667,6 +1571,102 @@ const confirmed = await modal.confirm({ ... });
|
|
|
1667
1571
|
|
|
1668
1572
|
|
|
1669
1573
|
|
|
1574
|
+
<DemoTitle title="Notification" desc="用于指示任务的完成进度">
|
|
1575
|
+
#### API
|
|
1576
|
+
|
|
1577
|
+
<AntdApiRef url="https://ant.design/components/notification-cn/#api"></AntdApiRef>
|
|
1578
|
+
|
|
1579
|
+
|
|
1580
|
+
## antd API
|
|
1581
|
+
|
|
1582
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1583
|
+
|
|
1584
|
+
|
|
1585
|
+
- `notification.success(config)`
|
|
1586
|
+
- `notification.error(config)`
|
|
1587
|
+
- `notification.info(config)`
|
|
1588
|
+
- `notification.warning(config)`
|
|
1589
|
+
- `notification.open(config)`
|
|
1590
|
+
- `notification.destroy(key?: String)`
|
|
1591
|
+
|
|
1592
|
+
config 参数如下：
|
|
1593
|
+
|
|
1594
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1595
|
+
|--------|--------|--------|--------|--------|
|
|
1596
|
+
| actions | 自定义按钮组 | ReactNode | - | 5.24.0 |
|
|
1597
|
+
| className | 自定义 CSS class | string | - | - |
|
|
1598
|
+
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1599
|
+
| description | 通知提醒内容，必选 | ReactNode | - | - |
|
|
1600
|
+
| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 | - |
|
|
1601
|
+
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1602
|
+
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1603
|
+
| icon | 自定义图标 | ReactNode | - | - |
|
|
1604
|
+
| key | 当前通知唯一标志 | string | - | - |
|
|
1605
|
+
| message | 通知提醒标题，必选 | ReactNode | - | - |
|
|
1606
|
+
| placement | 弹出位置，可选 | string | topRight | - |
|
|
1607
|
+
| style | 自定义内联样式 | | - | - |
|
|
1608
|
+
| role | 供屏幕阅读器识别的通知内容语义，默认为 | alert \| status | alert | 5.6.0 |
|
|
1609
|
+
| onClick | 点击通知时触发的回调函数 | function | - | - |
|
|
1610
|
+
| onClose | 当通知关闭时触发 | function | - | - |
|
|
1611
|
+
| props | 透传至通知 | Object | - | - |
|
|
1612
|
+
|
|
1613
|
+
|
|
1614
|
+
|
|
1615
|
+
- `notification.useNotification(config)`
|
|
1616
|
+
|
|
1617
|
+
config 参数如下：
|
|
1618
|
+
|
|
1619
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1620
|
+
|--------|--------|--------|--------|--------|
|
|
1621
|
+
| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 | |
|
|
1622
|
+
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1623
|
+
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body | |
|
|
1624
|
+
| placement | 弹出位置，可选 | string | topRight | |
|
|
1625
|
+
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1626
|
+
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1627
|
+
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1628
|
+
| stack | 堆叠模式，超过阈值时会将所有消息收起 | boolean \| | { threshold: 3 } | 5.10.0 |
|
|
1629
|
+
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | |
|
|
1630
|
+
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
|
|
1631
|
+
|
|
1632
|
+
|
|
1633
|
+
### 全局配置
|
|
1634
|
+
|
|
1635
|
+
还提供了一个全局配置方法，在调用前提前配置，全局一次生效。
|
|
1636
|
+
|
|
1637
|
+
`notification.config(options)`
|
|
1638
|
+
|
|
1639
|
+
当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)当你想单独使用，可通过如下设置开启 RTL 模式。
|
|
1640
|
+
|
|
1641
|
+
|
|
1642
|
+
```js
|
|
1643
|
+
notification.config({
|
|
1644
|
+
placement: 'bottomRight',
|
|
1645
|
+
bottom: 50,
|
|
1646
|
+
duration: 3,
|
|
1647
|
+
rtl: true,
|
|
1648
|
+
});
|
|
1649
|
+
```
|
|
1650
|
+
|
|
1651
|
+
|
|
1652
|
+
#### notification.config
|
|
1653
|
+
|
|
1654
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1655
|
+
|--------|--------|--------|--------|--------|
|
|
1656
|
+
| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 | |
|
|
1657
|
+
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1658
|
+
| duration | 默认自动关闭延时，单位秒 | number | 4.5 | |
|
|
1659
|
+
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1660
|
+
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1661
|
+
| getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLNode | () => document.body | |
|
|
1662
|
+
| placement | 弹出位置，可选 | string | topRight | |
|
|
1663
|
+
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1664
|
+
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | |
|
|
1665
|
+
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
|
|
1666
|
+
|
|
1667
|
+
|
|
1668
|
+
|
|
1669
|
+
|
|
1670
1670
|
<DemoTitle title="Message" desc="一条简洁且临时显示的消息，为操作提供全局反馈">
|
|
1671
1671
|
#### API
|
|
1672
1672
|
|
|
@@ -1762,60 +1762,7 @@ message.config({
|
|
|
1762
1762
|
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | |
|
|
1763
1763
|
| prefixCls | 消息节点的 className 前缀 | string | ant-message | 4.5.0 |
|
|
1764
1764
|
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1765
|
-
| top | 消息距离顶部的位置 | string \| number | 8 | |
|
|
1766
|
-
|
|
1767
|
-
|
|
1768
|
-
|
|
1769
|
-
|
|
1770
|
-
<DemoTitle title="InputNumber" desc="通过鼠标或键盘，输入范围内的数值。">
|
|
1771
|
-
#### API
|
|
1772
|
-
|
|
1773
|
-
<AntdApiRef url="https://ant.design/components/input-number-cn/#api"></AntdApiRef>
|
|
1774
|
-
|
|
1775
|
-
|
|
1776
|
-
## antd API
|
|
1777
|
-
|
|
1778
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1779
|
-
|
|
1780
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1781
|
-
|--------|--------|--------|--------|--------|
|
|
1782
|
-
| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | 4.17.0 |
|
|
1783
|
-
| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | 4.17.0 |
|
|
1784
|
-
| autoFocus | 自动获取焦点 | boolean | false | - |
|
|
1785
|
-
| changeOnBlur | 是否在失去焦点时，触发 | boolean | true | 5.11.0 |
|
|
1786
|
-
| changeOnWheel | 允许鼠标滚轮改变数值 | boolean | - | 5.14.0 |
|
|
1787
|
-
| controls | 是否显示增减按钮，也可设置自定义箭头图标 | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
|
|
1788
|
-
| decimalSeparator | 小数点 | string | - | - |
|
|
1789
|
-
| placeholder | 占位符 | string | - | |
|
|
1790
|
-
| defaultValue | 初始值 | number | - | - |
|
|
1791
|
-
| disabled | 禁用 | boolean | false | - |
|
|
1792
|
-
| formatter | 指定输入框展示值的格式 | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - | info: 4.17.0 |
|
|
1793
|
-
| keyboard | 是否启用键盘快捷行为 | boolean | true | 4.12.0 |
|
|
1794
|
-
| max | 最大值 | number | | - |
|
|
1795
|
-
| min | 最小值 | number | | - |
|
|
1796
|
-
| parser | 指定从 | function(string): number | - | - |
|
|
1797
|
-
| precision | 数值精度，配置 | number | - | - |
|
|
1798
|
-
| readOnly | 只读 | boolean | false | - |
|
|
1799
|
-
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
1800
|
-
| prefix | 带有前缀图标的 input | ReactNode | - | 4.17.0 |
|
|
1801
|
-
| suffix | 带有后缀图标的 input | ReactNode | - | 5.20.0 |
|
|
1802
|
-
| size | 输入框大小 | large | - | - |
|
|
1803
|
-
| step | 每次改变步数，可以为小数 | number \| string | 1 | - |
|
|
1804
|
-
| stringMode | 字符值模式，开启后支持高精度小数。同时 | boolean | false | 4.13.0 |
|
|
1805
|
-
| value | 当前值 | number | - | - |
|
|
1806
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
1807
|
-
| onChange | 变化回调 | function(value: number \| string \| null) | - | - |
|
|
1808
|
-
| onPressEnter | 按下回车的回调 | function(e) | - | - |
|
|
1809
|
-
| onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 |
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
## Ref
|
|
1813
|
-
|
|
1814
|
-
| 名称 | 说明 | 参数 | 版本 |
|
|
1815
|
-
|--------|--------|--------|--------|
|
|
1816
|
-
| blur() | 移除焦点 | - | |
|
|
1817
|
-
| focus() | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | cursor - 5.22.0 |
|
|
1818
|
-
| nativeElement | 获取原生 DOM 元素 | - | 5.17.3 |
|
|
1765
|
+
| top | 消息距离顶部的位置 | string \| number | 8 | |
|
|
1819
1766
|
|
|
1820
1767
|
|
|
1821
1768
|
|
|
@@ -2122,6 +2069,105 @@ type TransformAction =
|
|
|
2122
2069
|
|
|
2123
2070
|
|
|
2124
2071
|
|
|
2072
|
+
<DemoTitle title="InputNumber" desc="通过鼠标或键盘，输入范围内的数值。">
|
|
2073
|
+
#### API
|
|
2074
|
+
|
|
2075
|
+
<AntdApiRef url="https://ant.design/components/input-number-cn/#api"></AntdApiRef>
|
|
2076
|
+
|
|
2077
|
+
|
|
2078
|
+
## antd API
|
|
2079
|
+
|
|
2080
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2081
|
+
|
|
2082
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2083
|
+
|--------|--------|--------|--------|--------|
|
|
2084
|
+
| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | 4.17.0 |
|
|
2085
|
+
| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | 4.17.0 |
|
|
2086
|
+
| autoFocus | 自动获取焦点 | boolean | false | - |
|
|
2087
|
+
| changeOnBlur | 是否在失去焦点时，触发 | boolean | true | 5.11.0 |
|
|
2088
|
+
| changeOnWheel | 允许鼠标滚轮改变数值 | boolean | - | 5.14.0 |
|
|
2089
|
+
| controls | 是否显示增减按钮，也可设置自定义箭头图标 | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
|
|
2090
|
+
| decimalSeparator | 小数点 | string | - | - |
|
|
2091
|
+
| placeholder | 占位符 | string | - | |
|
|
2092
|
+
| defaultValue | 初始值 | number | - | - |
|
|
2093
|
+
| disabled | 禁用 | boolean | false | - |
|
|
2094
|
+
| formatter | 指定输入框展示值的格式 | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - | info: 4.17.0 |
|
|
2095
|
+
| keyboard | 是否启用键盘快捷行为 | boolean | true | 4.12.0 |
|
|
2096
|
+
| max | 最大值 | number | | - |
|
|
2097
|
+
| min | 最小值 | number | | - |
|
|
2098
|
+
| parser | 指定从 | function(string): number | - | - |
|
|
2099
|
+
| precision | 数值精度，配置 | number | - | - |
|
|
2100
|
+
| readOnly | 只读 | boolean | false | - |
|
|
2101
|
+
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
2102
|
+
| prefix | 带有前缀图标的 input | ReactNode | - | 4.17.0 |
|
|
2103
|
+
| suffix | 带有后缀图标的 input | ReactNode | - | 5.20.0 |
|
|
2104
|
+
| size | 输入框大小 | large | - | - |
|
|
2105
|
+
| step | 每次改变步数，可以为小数 | number \| string | 1 | - |
|
|
2106
|
+
| stringMode | 字符值模式，开启后支持高精度小数。同时 | boolean | false | 4.13.0 |
|
|
2107
|
+
| value | 当前值 | number | - | - |
|
|
2108
|
+
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
2109
|
+
| onChange | 变化回调 | function(value: number \| string \| null) | - | - |
|
|
2110
|
+
| onPressEnter | 按下回车的回调 | function(e) | - | - |
|
|
2111
|
+
| onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 |
|
|
2112
|
+
|
|
2113
|
+
|
|
2114
|
+
## Ref
|
|
2115
|
+
|
|
2116
|
+
| 名称 | 说明 | 参数 | 版本 |
|
|
2117
|
+
|--------|--------|--------|--------|
|
|
2118
|
+
| blur() | 移除焦点 | - | |
|
|
2119
|
+
| focus() | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | cursor - 5.22.0 |
|
|
2120
|
+
| nativeElement | 获取原生 DOM 元素 | - | 5.17.3 |
|
|
2121
|
+
|
|
2122
|
+
|
|
2123
|
+
|
|
2124
|
+
|
|
2125
|
+
<DemoTitle title="IconButton" desc="以图标为核心的轻量按钮组件，用于触发操作。">
|
|
2126
|
+
#### API
|
|
2127
|
+
|
|
2128
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2129
|
+
|--------|--------|--------|--------|
|
|
2130
|
+
| icon | icon | ReactNode \| string | |
|
|
2131
|
+
| iconType | 百炼图标iconfont的key，依赖百炼的iconFont，例如bl-icon-add | string | |
|
|
2132
|
+
| bordered | 边框 | boolean | true |
|
|
2133
|
+
| shape | 形状 | 'default' \| 'circle' | 'default' |
|
|
2134
|
+
|
|
2135
|
+
|
|
2136
|
+
## antd API
|
|
2137
|
+
|
|
2138
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2139
|
+
|
|
2140
|
+
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
2141
|
+
|
|
2142
|
+
按钮的属性说明如下：
|
|
2143
|
+
|
|
2144
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
2145
|
+
|--------|--------|--------|--------|--------|
|
|
2146
|
+
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
2147
|
+
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
2148
|
+
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
2149
|
+
| color | 设置按钮的颜色 | default | - | default |
|
|
2150
|
+
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
2151
|
+
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
2152
|
+
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
2153
|
+
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2154
|
+
| htmlType | 设置 | submit | button | |
|
|
2155
|
+
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
2156
|
+
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
2157
|
+
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
2158
|
+
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
2159
|
+
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
2160
|
+
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
2161
|
+
|
|
2162
|
+
|
|
2163
|
+
支持原生 button 的其他所有属性。
|
|
2164
|
+
|
|
2165
|
+
### PresetColors
|
|
2166
|
+
|
|
2167
|
+
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
2168
|
+
|
|
2169
|
+
|
|
2170
|
+
|
|
2125
2171
|
<DemoTitle title="Form" desc="高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。">
|
|
2126
2172
|
#### API
|
|
2127
2173
|
|
|
@@ -2661,166 +2707,23 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
|
|
|
2661
2707
|
| len | string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度 | number | |
|
|
2662
2708
|
| max | 必须设置 | number | |
|
|
2663
2709
|
| message | 错误信息，不设置时会通过 | string \| ReactElement | |
|
|
2664
|
-
| min | 必须设置 | number | |
|
|
2665
|
-
| pattern | 正则表达式匹配 | RegExp | |
|
|
2666
|
-
| required | 是否为必选字段 | boolean | |
|
|
2667
|
-
| transform | 将字段值转换成目标值后进行校验 | (value) => any | |
|
|
2668
|
-
| type | 类型，常见有 | string | |
|
|
2669
|
-
| validateTrigger | 设置触发验证时机，必须是 Form.Item 的 | string \| string[] | |
|
|
2670
|
-
| validator | 自定义校验，接收 Promise 作为返回值。 | ( | |
|
|
2671
|
-
| warningOnly | 仅警告，不阻塞表单提交 | boolean | 4.17.0 |
|
|
2672
|
-
| whitespace | 如果字段仅包含空格则校验不通过，只在 | boolean | |
|
|
2673
|
-
|
|
2674
|
-
|
|
2675
|
-
### WatchOptions
|
|
2676
|
-
|
|
2677
|
-
| 名称 | 说明 | 类型 | 默认值 | 版本 |
|
|
2678
|
-
|--------|--------|--------|--------|--------|
|
|
2679
|
-
| form | 指定 Form 实例 | FormInstance | 当前 context 中的 Form | 5.4.0 |
|
|
2680
|
-
| preserve | 是否监视没有对应的 | boolean | false | 5.4.0 |
|
|
2681
|
-
|
|
2682
|
-
|
|
2683
|
-
|
|
2684
|
-
|
|
2685
|
-
<DemoTitle title="IconButton" desc="以图标为核心的轻量按钮组件，用于触发操作。">
|
|
2686
|
-
#### API
|
|
2687
|
-
|
|
2688
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2689
|
-
|--------|--------|--------|--------|
|
|
2690
|
-
| icon | icon | ReactNode \| string | |
|
|
2691
|
-
| iconType | 百炼图标iconfont的key，依赖百炼的iconFont，例如bl-icon-add | string | |
|
|
2692
|
-
| bordered | 边框 | boolean | true |
|
|
2693
|
-
| shape | 形状 | 'default' \| 'circle' | 'default' |
|
|
2694
|
-
|
|
2695
|
-
|
|
2696
|
-
## antd API
|
|
2697
|
-
|
|
2698
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2699
|
-
|
|
2700
|
-
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
2701
|
-
|
|
2702
|
-
按钮的属性说明如下：
|
|
2703
|
-
|
|
2704
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
2705
|
-
|--------|--------|--------|--------|--------|
|
|
2706
|
-
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
2707
|
-
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
2708
|
-
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
2709
|
-
| color | 设置按钮的颜色 | default | - | default |
|
|
2710
|
-
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
2711
|
-
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
2712
|
-
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
2713
|
-
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2714
|
-
| htmlType | 设置 | submit | button | |
|
|
2715
|
-
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
2716
|
-
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
2717
|
-
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
2718
|
-
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
2719
|
-
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
2720
|
-
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
2721
|
-
|
|
2722
|
-
|
|
2723
|
-
支持原生 button 的其他所有属性。
|
|
2724
|
-
|
|
2725
|
-
### PresetColors
|
|
2726
|
-
|
|
2727
|
-
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
2728
|
-
|
|
2729
|
-
|
|
2730
|
-
|
|
2731
|
-
<DemoTitle title="FloatButton" desc="用于网站上的全局功能；无论浏览到何处都可以看见的按钮。">
|
|
2732
|
-
#### API
|
|
2733
|
-
|
|
2734
|
-
<AntdApiRef url="https://ant.design/components/float-button-cn/#api"></AntdApiRef>
|
|
2735
|
-
|
|
2736
|
-
|
|
2737
|
-
## antd API
|
|
2738
|
-
|
|
2739
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2740
|
-
|
|
2741
|
-
自 `antd@5.0.0` 版本开始提供该组件。
|
|
2742
|
-
|
|
2743
|
-
### 共同的 API
|
|
2744
|
-
|
|
2745
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2746
|
-
|--------|--------|--------|--------|--------|
|
|
2747
|
-
| icon | 自定义图标 | ReactNode | - | |
|
|
2748
|
-
| description | 文字及其它内容 | ReactNode | - | |
|
|
2749
|
-
| tooltip | 气泡卡片的内容 | ReactNode \| | - | TooltipProps: 5.25.0 |
|
|
2750
|
-
| type | 设置按钮类型 | default | default | |
|
|
2751
|
-
| shape | 设置按钮形状 | circle | circle | |
|
|
2752
|
-
| onClick | 点击按钮时的回调 | (event) => void | - | |
|
|
2753
|
-
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2754
|
-
| target | 相当于 a 标签的 target 属性，href 存在时生效 | string | - | |
|
|
2755
|
-
| htmlType | 设置 | submit | button | 5.21.0 |
|
|
2756
|
-
| badge | 带徽标数字的悬浮按钮（不支持 | | - | 5.4.0 |
|
|
2757
|
-
|
|
2758
|
-
|
|
2759
|
-
### FloatButton.Group
|
|
2760
|
-
|
|
2761
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2762
|
-
|--------|--------|--------|--------|--------|
|
|
2763
|
-
| shape | 设置包含的 FloatButton 按钮形状 | circle | circle | |
|
|
2764
|
-
| trigger | 触发方式（有触发方式为菜单模式） | click | - | |
|
|
2765
|
-
| open | 受控展开，需配合 trigger 一起使用 | boolean | - | |
|
|
2766
|
-
| closeIcon | 自定义关闭按钮 | React.ReactNode | | |
|
|
2767
|
-
| placement | 自定义菜单弹出位置 | top | top | 5.21.0 |
|
|
2768
|
-
| onOpenChange | 展开收起时的回调，需配合 trigger 一起使用 | (open: boolean) => void | - | |
|
|
2769
|
-
| onClick | 点击按钮时的回调（仅在菜单模式中有效） | (event) => void | - | 5.3.0 |
|
|
2770
|
-
|
|
2771
|
-
|
|
2772
|
-
### FloatButton.BackTop
|
|
2773
|
-
|
|
2774
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2775
|
-
|--------|--------|--------|--------|--------|
|
|
2776
|
-
| duration | 回到顶部所需时间（ms） | number | 450 | |
|
|
2777
|
-
| target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window | |
|
|
2778
|
-
| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |
|
|
2779
|
-
| onClick | 点击按钮的回调函数 | () => void | - | |
|
|
2780
|
-
|
|
2781
|
-
|
|
2782
|
-
|
|
2783
|
-
|
|
2784
|
-
<DemoTitle title="Empty" desc="用于空状态的占位图形展示。">
|
|
2785
|
-
## API
|
|
2786
|
-
|
|
2787
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2788
|
-
|--------|--------|--------|--------|
|
|
2789
|
-
| type | 空状态类型 | \| 'noData'
|
|
2790
|
-
\| 'networkError'
|
|
2791
|
-
\| '404'
|
|
2792
|
-
\| 'arrears'
|
|
2793
|
-
\| 'desktopOnly'
|
|
2794
|
-
\| 'noAudio'
|
|
2795
|
-
\| 'noImage'
|
|
2796
|
-
\| 'noVideo'
|
|
2797
|
-
\| 'noAccess'
|
|
2798
|
-
\| 'error'
|
|
2799
|
-
\| 'noChat'
|
|
2800
|
-
\| 'noModel'
|
|
2801
|
-
\| 'noApp'
|
|
2802
|
-
\| 'success'
|
|
2803
|
-
\| 'failed'
|
|
2804
|
-
\| 'inProgress'
|
|
2805
|
-
\| 'stayTuned' | 'noData' |
|
|
2806
|
-
| texture | 是否显示纹理 | boolean | true |
|
|
2807
|
-
| image | 图片地址 | string | 默认是no data的图片 |
|
|
2808
|
-
| imageStyle | 图片样式 | React.CSSProperties | |
|
|
2809
|
-
| title | 标题内容 | React.ReactNode | |
|
|
2810
|
-
| description | 自定义描述内容 | React.ReactNode | |
|
|
2811
|
-
| onOk | ok按钮的点击事件 | (e: React.MouseEvent) => void | |
|
|
2812
|
-
| okText | ok按钮的文本 | React.ReactNode | |
|
|
2813
|
-
| okType | ok按钮的类型 | SparkButtonProps['type'] | 'primary' |
|
|
2814
|
-
| okButtonProps | ok按钮的props | SparkButtonProps | |
|
|
2815
|
-
| children | 自定义空状态的内容 | React.ReactNode | |
|
|
2816
|
-
| className | 自定义空状态的类名 | string | |
|
|
2817
|
-
| style | 自定义空状态的样式 | React.CSSProperties | |
|
|
2818
|
-
| size | 自定义空状态的大小 | React.CSSProperties['width'] | |
|
|
2819
|
-
| autoFit | 是否自适应容器宽度，当容器宽度小于 size 时自动缩放 | boolean | false |
|
|
2710
|
+
| min | 必须设置 | number | |
|
|
2711
|
+
| pattern | 正则表达式匹配 | RegExp | |
|
|
2712
|
+
| required | 是否为必选字段 | boolean | |
|
|
2713
|
+
| transform | 将字段值转换成目标值后进行校验 | (value) => any | |
|
|
2714
|
+
| type | 类型，常见有 | string | |
|
|
2715
|
+
| validateTrigger | 设置触发验证时机，必须是 Form.Item 的 | string \| string[] | |
|
|
2716
|
+
| validator | 自定义校验，接收 Promise 作为返回值。 | ( | |
|
|
2717
|
+
| warningOnly | 仅警告，不阻塞表单提交 | boolean | 4.17.0 |
|
|
2718
|
+
| whitespace | 如果字段仅包含空格则校验不通过，只在 | boolean | |
|
|
2820
2719
|
|
|
2821
2720
|
|
|
2822
|
-
|
|
2721
|
+
### WatchOptions
|
|
2823
2722
|
|
|
2723
|
+
| 名称 | 说明 | 类型 | 默认值 | 版本 |
|
|
2724
|
+
|--------|--------|--------|--------|--------|
|
|
2725
|
+
| form | 指定 Form 实例 | FormInstance | 当前 context 中的 Form | 5.4.0 |
|
|
2726
|
+
| preserve | 是否监视没有对应的 | boolean | false | 5.4.0 |
|
|
2824
2727
|
|
|
2825
2728
|
|
|
2826
2729
|
|
|
@@ -2976,41 +2879,100 @@ const dividerItem = {
|
|
|
2976
2879
|
|
|
2977
2880
|
|
|
2978
2881
|
|
|
2979
|
-
<DemoTitle title="
|
|
2882
|
+
<DemoTitle title="Empty" desc="用于空状态的占位图形展示。">
|
|
2883
|
+
## API
|
|
2884
|
+
|
|
2885
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2886
|
+
|--------|--------|--------|--------|
|
|
2887
|
+
| type | 空状态类型 | \| 'noData'
|
|
2888
|
+
\| 'networkError'
|
|
2889
|
+
\| '404'
|
|
2890
|
+
\| 'arrears'
|
|
2891
|
+
\| 'desktopOnly'
|
|
2892
|
+
\| 'noAudio'
|
|
2893
|
+
\| 'noImage'
|
|
2894
|
+
\| 'noVideo'
|
|
2895
|
+
\| 'noAccess'
|
|
2896
|
+
\| 'error'
|
|
2897
|
+
\| 'noChat'
|
|
2898
|
+
\| 'noModel'
|
|
2899
|
+
\| 'noApp'
|
|
2900
|
+
\| 'success'
|
|
2901
|
+
\| 'failed'
|
|
2902
|
+
\| 'inProgress'
|
|
2903
|
+
\| 'stayTuned' | 'noData' |
|
|
2904
|
+
| texture | 是否显示纹理 | boolean | true |
|
|
2905
|
+
| image | 图片地址 | string | 默认是no data的图片 |
|
|
2906
|
+
| imageStyle | 图片样式 | React.CSSProperties | |
|
|
2907
|
+
| title | 标题内容 | React.ReactNode | |
|
|
2908
|
+
| description | 自定义描述内容 | React.ReactNode | |
|
|
2909
|
+
| onOk | ok按钮的点击事件 | (e: React.MouseEvent) => void | |
|
|
2910
|
+
| okText | ok按钮的文本 | React.ReactNode | |
|
|
2911
|
+
| okType | ok按钮的类型 | SparkButtonProps['type'] | 'primary' |
|
|
2912
|
+
| okButtonProps | ok按钮的props | SparkButtonProps | |
|
|
2913
|
+
| children | 自定义空状态的内容 | React.ReactNode | |
|
|
2914
|
+
| className | 自定义空状态的类名 | string | |
|
|
2915
|
+
| style | 自定义空状态的样式 | React.CSSProperties | |
|
|
2916
|
+
| size | 自定义空状态的大小 | React.CSSProperties['width'] | |
|
|
2917
|
+
| autoFit | 是否自适应容器宽度，当容器宽度小于 size 时自动缩放 | boolean | false |
|
|
2918
|
+
|
|
2919
|
+
|
|
2920
|
+
<AntdApiRef url="https://ant.design/components/empty-cn/#api"></AntdApiRef>
|
|
2921
|
+
|
|
2922
|
+
|
|
2923
|
+
|
|
2924
|
+
|
|
2925
|
+
|
|
2926
|
+
<DemoTitle title="FloatButton" desc="用于网站上的全局功能；无论浏览到何处都可以看见的按钮。">
|
|
2980
2927
|
#### API
|
|
2981
2928
|
|
|
2982
|
-
<AntdApiRef url="https://ant.design/components/
|
|
2929
|
+
<AntdApiRef url="https://ant.design/components/float-button-cn/#api"></AntdApiRef>
|
|
2983
2930
|
|
|
2984
2931
|
|
|
2985
2932
|
## antd API
|
|
2986
2933
|
|
|
2987
2934
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2988
2935
|
|
|
2989
|
-
|
|
2936
|
+
自 `antd@5.0.0` 版本开始提供该组件。
|
|
2937
|
+
|
|
2938
|
+
### 共同的 API
|
|
2990
2939
|
|
|
2991
2940
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2992
2941
|
|--------|--------|--------|--------|--------|
|
|
2993
|
-
|
|
|
2994
|
-
|
|
|
2995
|
-
|
|
|
2996
|
-
|
|
|
2997
|
-
|
|
|
2998
|
-
|
|
|
2999
|
-
|
|
|
3000
|
-
|
|
|
3001
|
-
|
|
|
3002
|
-
|
|
|
2942
|
+
| icon | 自定义图标 | ReactNode | - | |
|
|
2943
|
+
| description | 文字及其它内容 | ReactNode | - | |
|
|
2944
|
+
| tooltip | 气泡卡片的内容 | ReactNode \| | - | TooltipProps: 5.25.0 |
|
|
2945
|
+
| type | 设置按钮类型 | default | default | |
|
|
2946
|
+
| shape | 设置按钮形状 | circle | circle | |
|
|
2947
|
+
| onClick | 点击按钮时的回调 | (event) => void | - | |
|
|
2948
|
+
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2949
|
+
| target | 相当于 a 标签的 target 属性，href 存在时生效 | string | - | |
|
|
2950
|
+
| htmlType | 设置 | submit | button | 5.21.0 |
|
|
2951
|
+
| badge | 带徽标数字的悬浮按钮（不支持 | | - | 5.4.0 |
|
|
3003
2952
|
|
|
3004
2953
|
|
|
3005
|
-
###
|
|
2954
|
+
### FloatButton.Group
|
|
3006
2955
|
|
|
3007
2956
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3008
2957
|
|--------|--------|--------|--------|--------|
|
|
3009
|
-
|
|
|
3010
|
-
|
|
|
2958
|
+
| shape | 设置包含的 FloatButton 按钮形状 | circle | circle | |
|
|
2959
|
+
| trigger | 触发方式（有触发方式为菜单模式） | click | - | |
|
|
2960
|
+
| open | 受控展开，需配合 trigger 一起使用 | boolean | - | |
|
|
2961
|
+
| closeIcon | 自定义关闭按钮 | React.ReactNode | | |
|
|
2962
|
+
| placement | 自定义菜单弹出位置 | top | top | 5.21.0 |
|
|
2963
|
+
| onOpenChange | 展开收起时的回调，需配合 trigger 一起使用 | (open: boolean) => void | - | |
|
|
2964
|
+
| onClick | 点击按钮时的回调（仅在菜单模式中有效） | (event) => void | - | 5.3.0 |
|
|
3011
2965
|
|
|
3012
2966
|
|
|
3013
|
-
|
|
2967
|
+
### FloatButton.BackTop
|
|
2968
|
+
|
|
2969
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2970
|
+
|--------|--------|--------|--------|--------|
|
|
2971
|
+
| duration | 回到顶部所需时间（ms） | number | 450 | |
|
|
2972
|
+
| target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window | |
|
|
2973
|
+
| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |
|
|
2974
|
+
| onClick | 点击按钮的回调函数 | () => void | - | |
|
|
2975
|
+
|
|
3014
2976
|
|
|
3015
2977
|
|
|
3016
2978
|
|
|
@@ -3078,6 +3040,44 @@ v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v
|
|
|
3078
3040
|
|
|
3079
3041
|
|
|
3080
3042
|
|
|
3043
|
+
<DemoTitle title="Descriptions" desc="展示多个只读字段的组合">
|
|
3044
|
+
#### API
|
|
3045
|
+
|
|
3046
|
+
<AntdApiRef url="https://ant.design/components/descriptions-cn/#api"></AntdApiRef>
|
|
3047
|
+
|
|
3048
|
+
|
|
3049
|
+
## antd API
|
|
3050
|
+
|
|
3051
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3052
|
+
|
|
3053
|
+
### Descriptions
|
|
3054
|
+
|
|
3055
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3056
|
+
|--------|--------|--------|--------|--------|
|
|
3057
|
+
| bordered | 是否展示边框 | boolean | false | |
|
|
3058
|
+
| colon | 配置 | boolean | true | |
|
|
3059
|
+
| column | 一行的 | number \| | 3 | |
|
|
3060
|
+
| extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 |
|
|
3061
|
+
| items | 描述列表项内容 | | - | 5.8.0 |
|
|
3062
|
+
| layout | 描述布局 | horizontal | horizontal | |
|
|
3063
|
+
| size | 设置列表的大小。可以设置为 | default | - | |
|
|
3064
|
+
| title | 描述列表的标题，显示在最顶部 | ReactNode | - | |
|
|
3065
|
+
| classNames | 语义化结构 class | | - | 5.23.0 |
|
|
3066
|
+
| styles | 语义化结构 style | | - | 5.23.0 |
|
|
3067
|
+
|
|
3068
|
+
|
|
3069
|
+
### DescriptionItem
|
|
3070
|
+
|
|
3071
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3072
|
+
|--------|--------|--------|--------|--------|
|
|
3073
|
+
| label | 内容的描述 | ReactNode | - | |
|
|
3074
|
+
| span | 包含列的数量（ | number\| | 1 | screens: 5.9.0 |
|
|
3075
|
+
|
|
3076
|
+
|
|
3077
|
+
span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
|
|
3078
|
+
|
|
3079
|
+
|
|
3080
|
+
|
|
3081
3081
|
<DemoTitle title="CollapsePanel" desc="折叠面板">
|
|
3082
3082
|
#### API
|
|
3083
3083
|
|
|
@@ -3578,6 +3578,61 @@ interface Option {
|
|
|
3578
3578
|
|
|
3579
3579
|
|
|
3580
3580
|
|
|
3581
|
+
<DemoTitle title="Button" desc="按钮用于开始一个即时操作。">
|
|
3582
|
+
#### API
|
|
3583
|
+
|
|
3584
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3585
|
+
|--------|--------|--------|--------|
|
|
3586
|
+
| size | 按钮大小 | 'small' \| 'middle' \| 'large' | 'middle' |
|
|
3587
|
+
| type | 类型 | \| 'primary'
|
|
3588
|
+
\| 'dashed'
|
|
3589
|
+
\| 'link'
|
|
3590
|
+
\| 'text'
|
|
3591
|
+
\| 'default'
|
|
3592
|
+
\| 'primaryLess'
|
|
3593
|
+
\| 'textCompact' | 'deafult' |
|
|
3594
|
+
| tooltipContent | hover上去tooltip的内容 | string \| ReactNode | |
|
|
3595
|
+
| iconType | 百炼图标iconfont的key，依赖ConfigProvider传入的iconfont，例如bl-icon-add | string | |
|
|
3596
|
+
| iconSize | 图标大小 | SparkIconFontProps['size'] | |
|
|
3597
|
+
|
|
3598
|
+
<AntdApiRef url="https://ant.design/components/button-cn/#api"></AntdApiRef>
|
|
3599
|
+
|
|
3600
|
+
|
|
3601
|
+
## antd API
|
|
3602
|
+
|
|
3603
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3604
|
+
|
|
3605
|
+
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
3606
|
+
|
|
3607
|
+
按钮的属性说明如下：
|
|
3608
|
+
|
|
3609
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
3610
|
+
|--------|--------|--------|--------|--------|
|
|
3611
|
+
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
3612
|
+
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
3613
|
+
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
3614
|
+
| color | 设置按钮的颜色 | default | - | default |
|
|
3615
|
+
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
3616
|
+
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
3617
|
+
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
3618
|
+
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
3619
|
+
| htmlType | 设置 | submit | button | |
|
|
3620
|
+
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
3621
|
+
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
3622
|
+
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
3623
|
+
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
3624
|
+
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
3625
|
+
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
3626
|
+
|
|
3627
|
+
|
|
3628
|
+
支持原生 button 的其他所有属性。
|
|
3629
|
+
|
|
3630
|
+
### PresetColors
|
|
3631
|
+
|
|
3632
|
+
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
3633
|
+
|
|
3634
|
+
|
|
3635
|
+
|
|
3581
3636
|
<DemoTitle title="Breadcrumb" desc="显示当前页面在系统层级结构中的位置，并能向上返回。">
|
|
3582
3637
|
#### API
|
|
3583
3638
|
|
|
@@ -3697,61 +3752,6 @@ return <Breadcrumb itemRender={itemRender} items={items} />;
|
|
|
3697
3752
|
|
|
3698
3753
|
|
|
3699
3754
|
|
|
3700
|
-
<DemoTitle title="Button" desc="按钮用于开始一个即时操作。">
|
|
3701
|
-
#### API
|
|
3702
|
-
|
|
3703
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3704
|
-
|--------|--------|--------|--------|
|
|
3705
|
-
| size | 按钮大小 | 'small' \| 'middle' \| 'large' | 'middle' |
|
|
3706
|
-
| type | 类型 | \| 'primary'
|
|
3707
|
-
\| 'dashed'
|
|
3708
|
-
\| 'link'
|
|
3709
|
-
\| 'text'
|
|
3710
|
-
\| 'default'
|
|
3711
|
-
\| 'primaryLess'
|
|
3712
|
-
\| 'textCompact' | 'deafult' |
|
|
3713
|
-
| tooltipContent | hover上去tooltip的内容 | string \| ReactNode | |
|
|
3714
|
-
| iconType | 百炼图标iconfont的key，依赖ConfigProvider传入的iconfont，例如bl-icon-add | string | |
|
|
3715
|
-
| iconSize | 图标大小 | SparkIconFontProps['size'] | |
|
|
3716
|
-
|
|
3717
|
-
<AntdApiRef url="https://ant.design/components/button-cn/#api"></AntdApiRef>
|
|
3718
|
-
|
|
3719
|
-
|
|
3720
|
-
## antd API
|
|
3721
|
-
|
|
3722
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3723
|
-
|
|
3724
|
-
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
3725
|
-
|
|
3726
|
-
按钮的属性说明如下：
|
|
3727
|
-
|
|
3728
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
3729
|
-
|--------|--------|--------|--------|--------|
|
|
3730
|
-
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
3731
|
-
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
3732
|
-
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
3733
|
-
| color | 设置按钮的颜色 | default | - | default |
|
|
3734
|
-
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
3735
|
-
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
3736
|
-
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
3737
|
-
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
3738
|
-
| htmlType | 设置 | submit | button | |
|
|
3739
|
-
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
3740
|
-
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
3741
|
-
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
3742
|
-
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
3743
|
-
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
3744
|
-
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
3745
|
-
|
|
3746
|
-
|
|
3747
|
-
支持原生 button 的其他所有属性。
|
|
3748
|
-
|
|
3749
|
-
### PresetColors
|
|
3750
|
-
|
|
3751
|
-
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
3752
|
-
|
|
3753
|
-
|
|
3754
|
-
|
|
3755
3755
|
<DemoTitle title="Avatar" desc="用来代表用户或事物，支持图片、图标或字符展示。">
|
|
3756
3756
|
#### API
|
|
3757
3757
|
|