@agentscope-ai/design 1.0.26-beta.1769162388973 → 1.0.26
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/Audio/Control.style.js +1 -1
- package/lib/index.d.ts +8 -9
- package/lib/index.js +6 -7
- package/llms/all.llms.txt +1695 -1122
- package/llms/docs/changelog/index.zh-CN.llms.txt +0 -9
- package/llms/docs/guide/iconLibrary.zh-CN.llms.txt +150 -0
- package/llms/docs/icons/sparkIcons.zh-CN.llms.txt +25 -0
- package/llms/index.llms.txt +24 -20
- package/package.json +1 -1
- package/lib/components/commonComponents/MediaPreview/demo/demo1.d.ts +0 -1
- package/lib/components/commonComponents/MediaPreview/demo/demo1.js +0 -44
- package/lib/components/commonComponents/MediaPreview/index.d.ts +0 -23
- package/lib/components/commonComponents/MediaPreview/index.js +0 -352
- package/lib/components/commonComponents/MediaPreview/index.style.d.ts +0 -1
- package/lib/components/commonComponents/MediaPreview/index.style.js +0 -54
- package/llms/components/commonComponents/MediaPreview/index.zh-CN.llms.txt +0 -21
package/llms/all.llms.txt
CHANGED
|
@@ -1,5 +1,18 @@
|
|
|
1
1
|
|
|
2
2
|
|
|
3
|
+
<DemoTitle title="Video" desc="视频展示">
|
|
4
|
+
#### API
|
|
5
|
+
|
|
6
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
7
|
+
|--------|--------|--------|--------|
|
|
8
|
+
| mouseEnterAutoPlay | 鼠标进入时是否自动播放 | boolean | false |
|
|
9
|
+
| children | video内部设置了按钮在暗色背景下的样式，如果有一些操作按钮想继承这个样式可以在这里传入 | React.ReactNode | |
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
3
16
|
<DemoTitle title="Upload" desc="文件选择上传和拖拽上传控件。">
|
|
4
17
|
#### API
|
|
5
18
|
|
|
@@ -143,169 +156,298 @@
|
|
|
143
156
|
|
|
144
157
|
|
|
145
158
|
|
|
146
|
-
<DemoTitle title="
|
|
147
|
-
#### API
|
|
148
|
-
|
|
149
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
150
|
-
|--------|--------|--------|--------|
|
|
151
|
-
| mouseEnterAutoPlay | 鼠标进入时是否自动播放 | boolean | false |
|
|
152
|
-
| children | video内部设置了按钮在暗色背景下的样式，如果有一些操作按钮想继承这个样式可以在这里传入 | React.ReactNode | |
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
<DemoTitle title="TimePicker" desc="输入或选择时间的控件。">
|
|
159
|
+
<DemoTitle title="Table" desc="展示行列数据。">
|
|
160
160
|
#### API
|
|
161
161
|
|
|
162
|
-
<AntdApiRef url="https://ant.design/components/
|
|
162
|
+
<AntdApiRef url="https://ant.design/components/table-cn/#api"></AntdApiRef>
|
|
163
163
|
|
|
164
164
|
|
|
165
165
|
## antd API
|
|
166
166
|
|
|
167
|
-
|
|
168
|
-
|
|
169
167
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
170
168
|
|
|
171
|
-
|
|
172
|
-
```jsx
|
|
173
|
-
import dayjs from 'dayjs';
|
|
174
|
-
import customParseFormat from 'dayjs/plugin/customParseFormat'
|
|
175
|
-
|
|
176
|
-
dayjs.extend(customParseFormat)
|
|
177
|
-
<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
|
|
178
|
-
```
|
|
179
|
-
|
|
169
|
+
### Table
|
|
180
170
|
|
|
181
171
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
182
172
|
|--------|--------|--------|--------|--------|
|
|
183
|
-
|
|
|
184
|
-
|
|
|
185
|
-
|
|
|
186
|
-
|
|
|
187
|
-
|
|
|
188
|
-
|
|
|
189
|
-
|
|
|
190
|
-
|
|
|
191
|
-
|
|
|
192
|
-
|
|
|
193
|
-
|
|
|
194
|
-
|
|
|
195
|
-
|
|
|
196
|
-
|
|
|
197
|
-
|
|
|
198
|
-
|
|
|
199
|
-
|
|
|
200
|
-
|
|
|
201
|
-
|
|
|
202
|
-
|
|
|
203
|
-
|
|
|
204
|
-
|
|
|
205
|
-
|
|
|
206
|
-
|
|
|
207
|
-
|
|
|
208
|
-
|
|
|
209
|
-
|
|
|
210
|
-
|
|
|
211
|
-
| value | 当前时间 | | - | |
|
|
212
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
213
|
-
| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - | |
|
|
214
|
-
| onChange | 时间发生变化的回调 | function(time: dayjs, timeString: string): void | - | |
|
|
215
|
-
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - | |
|
|
173
|
+
| bordered | 是否展示外边框和列边框 | boolean | false | |
|
|
174
|
+
| columns | 表格列的配置描述，具体项见下表 | | - | |
|
|
175
|
+
| components | 覆盖默认的 table 元素 | | - | |
|
|
176
|
+
| dataSource | 数据数组 | object[] | - | |
|
|
177
|
+
| expandable | 配置展开属性 | | - | |
|
|
178
|
+
| footer | 表格尾部 | function(currentPageData) | - | |
|
|
179
|
+
| getPopupContainer | 设置表格内各类浮层的渲染节点，如筛选菜单 | (triggerNode) => HTMLElement | () => TableHtmlElement | |
|
|
180
|
+
| loading | 页面是否加载中 | boolean \| | false | |
|
|
181
|
+
| locale | 默认文案设置，目前包括排序、过滤、空数据文案 | object | | |
|
|
182
|
+
| pagination | 分页器，参考 | object \| | - | |
|
|
183
|
+
| rowClassName | 表格行的类名 | function(record, index): string | - | |
|
|
184
|
+
| rowKey | 表格行 key 的取值，可以是字符串或一个函数 | string \| function(record): string | key | |
|
|
185
|
+
| rowSelection | 表格行是否可选择， | object | - | |
|
|
186
|
+
| rowHoverable | 表格行是否开启 hover 交互 | boolean | true | 5.16.0 |
|
|
187
|
+
| scroll | 表格是否可滚动，也可以指定滚动区域的宽、高， | object | - | |
|
|
188
|
+
| showHeader | 是否显示表头 | boolean | true | |
|
|
189
|
+
| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示。当参数类型为对象时，将被设置为 Tooltip 的属性 | boolean \| | { target: 'full-header' } | 5.16.0 |
|
|
190
|
+
| size | 表格大小 | large | large | |
|
|
191
|
+
| sortDirections | 支持的排序方式，取值为 | Array | [ | |
|
|
192
|
+
| sticky | 设置粘性头部和滚动条 | boolean \| | - | 4.6.0 (getContainer: 4.7.0) |
|
|
193
|
+
| summary | 总结栏 | (currentData) => ReactNode | - | |
|
|
194
|
+
| tableLayout | 表格元素的 | - \| | 无 | |
|
|
195
|
+
| title | 表格标题 | function(currentPageData) | - | |
|
|
196
|
+
| virtual | 支持虚拟列表 | boolean | - | 5.9.0 |
|
|
197
|
+
| onChange | 分页、排序、筛选变化时触发 | function(pagination, filters, sorter, extra: { currentDataSource: [], action: | - | |
|
|
198
|
+
| onHeaderRow | 设置头部行属性 | function(columns, index) | - | |
|
|
199
|
+
| onRow | 设置行属性 | function(record, index) | - | |
|
|
200
|
+
| onScroll | 表单内容滚动时触发（虚拟滚动下只有垂直滚动会触发事件） | function(event) | - | 5.16.0 |
|
|
216
201
|
|
|
217
202
|
|
|
218
|
-
|
|
203
|
+
### Table ref
|
|
219
204
|
|
|
205
|
+
| 参数 | 说明 | 类型 | 版本 |
|
|
206
|
+
|--------|--------|--------|--------|
|
|
207
|
+
| nativeElement | 最外层 div 元素 | HTMLDivElement | 5.11.0 |
|
|
208
|
+
| scrollTo | 滚动到目标位置（设置 | (config: { index?: number, key?: React.Key, top?: number }) => void | 5.11.0 |
|
|
220
209
|
|
|
221
|
-
```typescript
|
|
222
|
-
type DisabledTime = (now: Dayjs) => {
|
|
223
|
-
disabledHours?: () => number[];
|
|
224
|
-
disabledMinutes?: (selectedHour: number) => number[];
|
|
225
|
-
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
226
|
-
disabledMilliseconds?: (
|
|
227
|
-
selectedHour: number,
|
|
228
|
-
selectedMinute: number,
|
|
229
|
-
selectedSecond: number,
|
|
230
|
-
) => number[];
|
|
231
|
-
};
|
|
232
|
-
```
|
|
233
210
|
|
|
211
|
+
#### onRow 用法
|
|
234
212
|
|
|
235
|
-
|
|
213
|
+
适用于 `onRow` `onHeaderRow` `onCell` `onHeaderCell`。
|
|
236
214
|
|
|
237
|
-
## 方法
|
|
238
215
|
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
216
|
+
```jsx
|
|
217
|
+
<Table
|
|
218
|
+
onRow={(record) => {
|
|
219
|
+
return {
|
|
220
|
+
onClick: (event) => {}, // 点击行
|
|
221
|
+
onDoubleClick: (event) => {},
|
|
222
|
+
onContextMenu: (event) => {},
|
|
223
|
+
onMouseEnter: (event) => {}, // 鼠标移入行
|
|
224
|
+
onMouseLeave: (event) => {},
|
|
225
|
+
};
|
|
226
|
+
}}
|
|
227
|
+
onHeaderRow={(columns, index) => {
|
|
228
|
+
return {
|
|
229
|
+
onClick: () => {}, // 点击表头行
|
|
230
|
+
};
|
|
231
|
+
}}
|
|
232
|
+
/>
|
|
233
|
+
```
|
|
243
234
|
|
|
244
235
|
|
|
245
|
-
|
|
236
|
+
### Column
|
|
246
237
|
|
|
247
|
-
|
|
238
|
+
列描述数据对象，是 columns 中的一项，Column 使用相同的 API。
|
|
248
239
|
|
|
249
240
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
250
241
|
|--------|--------|--------|--------|--------|
|
|
251
|
-
|
|
|
252
|
-
|
|
|
253
|
-
|
|
254
|
-
|
|
255
|
-
|
|
242
|
+
| align | 设置列的对齐方式 | left | left | |
|
|
243
|
+
| className | 列样式类名 | string | - | |
|
|
244
|
+
| colSpan | 表头列合并，设置为 0 时，不渲染 | number | - | |
|
|
245
|
+
| dataIndex | 列数据在数据项中对应的路径，支持通过数组查询嵌套路径 | string \| string[] | - | |
|
|
246
|
+
| defaultFilteredValue | 默认筛选值 | string[] | - | |
|
|
247
|
+
| filterResetToDefaultFilteredValue | 点击重置按钮的时候，是否恢复默认筛选值 | boolean | false | |
|
|
248
|
+
| defaultSortOrder | 默认排序顺序 | ascend | - | |
|
|
249
|
+
| ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。 | boolean \| { showTitle?: boolean } | false | showTitle: 4.3.0 |
|
|
250
|
+
| filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | ReactNode \| (props: | - | |
|
|
251
|
+
| filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false | |
|
|
252
|
+
| filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string[] | - | |
|
|
253
|
+
| filterIcon | 自定义 filter 图标。 | ReactNode \| (filtered: boolean) => ReactNode | false | |
|
|
254
|
+
| filterOnClose | 是否在筛选菜单关闭时触发筛选 | boolean | true | 5.15.0 |
|
|
255
|
+
| filterMultiple | 是否多选 | boolean | true | |
|
|
256
|
+
| filterMode | 指定筛选菜单的用户界面 | 'menu' \| 'tree' | 'menu' | 4.17.0 |
|
|
257
|
+
| filterSearch | 筛选菜单项是否可搜索 | boolean \| function(input, record):boolean | false | boolean:4.17.0 function:4.19.0 |
|
|
258
|
+
| filters | 表头的筛选菜单项 | object[] | - | |
|
|
259
|
+
| filterDropdownProps | 自定义下拉属性，在 | | - | 5.22.0 |
|
|
260
|
+
| fixed | （IE 下无效）列是否固定，可选 | boolean \| string | false | |
|
|
261
|
+
| key | React 需要的 key，如果已经设置了唯一的 | string | - | |
|
|
262
|
+
| render | 生成复杂数据的渲染函数，参数分别为当前单元格的值，当前行数据，行索引 | function(value, record, index) {} | - | |
|
|
263
|
+
| responsive | 响应式 breakpoint 配置列表。未设置则始终可见。 | | - | 4.2.0 |
|
|
264
|
+
| rowScope | 设置列范围 | row | - | 5.1.0 |
|
|
265
|
+
| shouldCellUpdate | 自定义单元格渲染时机 | (record, prevRecord) => boolean | - | 4.3.0 |
|
|
266
|
+
| showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中 | boolean \| | { target: 'full-header' } | 5.16.0 |
|
|
267
|
+
| sortDirections | 支持的排序方式，覆盖 | Array | [ | |
|
|
268
|
+
| sorter | 排序函数，本地排序使用一个函数(参考 | function \| boolean \| { compare: function, multiple: number } | - | |
|
|
269
|
+
| sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 | ascend | - | |
|
|
270
|
+
| sortIcon | 自定义 sort 图标 | (props: { sortOrder }) => ReactNode | - | 5.6.0 |
|
|
271
|
+
| title | 列头显示文字（函数用法 | ReactNode \| ({ sortOrder, sortColumn, filters }) => ReactNode | - | |
|
|
272
|
+
| width | 列宽度（ | string \| number | - | |
|
|
273
|
+
| minWidth | 最小列宽度，只在 | number | - | 5.21.0 |
|
|
274
|
+
| hidden | 隐藏列 | boolean | false | 5.13.0 |
|
|
275
|
+
| onCell | 设置单元格属性 | function(record, rowIndex) | - | |
|
|
276
|
+
| onFilter | 本地模式下，确定筛选的运行函数 | function | - | |
|
|
277
|
+
| onHeaderCell | 设置头部单元格属性 | function(column) | - | |
|
|
256
278
|
|
|
257
279
|
|
|
258
|
-
|
|
259
|
-
type RangeDisabledTime = (
|
|
260
|
-
now: Dayjs,
|
|
261
|
-
type = 'start' | 'end',
|
|
262
|
-
) => {
|
|
263
|
-
disabledHours?: () => number[];
|
|
264
|
-
disabledMinutes?: (selectedHour: number) => number[];
|
|
265
|
-
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
266
|
-
};
|
|
267
|
-
```
|
|
280
|
+
### ColumnGroup
|
|
268
281
|
|
|
282
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
283
|
+
|--------|--------|--------|--------|
|
|
284
|
+
| title | 列头显示文字 | ReactNode | - |
|
|
269
285
|
|
|
270
286
|
|
|
287
|
+
### pagination
|
|
271
288
|
|
|
272
|
-
|
|
273
|
-
#### API
|
|
289
|
+
分页的配置项。
|
|
274
290
|
|
|
275
|
-
|
|
|
291
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
276
292
|
|--------|--------|--------|--------|
|
|
277
|
-
|
|
|
278
|
-
| color | 标签色 | SparkTagColors \| string | 'purple' |
|
|
279
|
-
|
|
280
|
-
<AntdApiRef url="https://ant.design/components/tag-cn/#api"></AntdApiRef>
|
|
293
|
+
| position | 指定分页显示的位置， 取值为 | Array | [ |
|
|
281
294
|
|
|
282
295
|
|
|
283
|
-
|
|
296
|
+
更多配置项，请查看 [`Pagination`](/components/pagination-cn)。
|
|
284
297
|
|
|
285
|
-
|
|
298
|
+
### expandable
|
|
286
299
|
|
|
287
|
-
|
|
300
|
+
展开功能的配置。
|
|
288
301
|
|
|
289
302
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
290
303
|
|--------|--------|--------|--------|--------|
|
|
291
|
-
|
|
|
292
|
-
|
|
|
293
|
-
|
|
|
294
|
-
|
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
|
|
299
|
-
|
|
|
300
|
-
|
|
301
|
-
|
|
|
302
|
-
|
|
|
303
|
-
|
|
304
|
+
| childrenColumnName | 指定树形结构的列名 | string | children | |
|
|
305
|
+
| columnTitle | 自定义展开列表头 | ReactNode | - | 4.23.0 |
|
|
306
|
+
| columnWidth | 自定义展开列宽度 | string \| number | - | |
|
|
307
|
+
| defaultExpandAllRows | 初始时，是否展开所有行 | boolean | false | |
|
|
308
|
+
| defaultExpandedRowKeys | 默认展开的行 | string[] | - | |
|
|
309
|
+
| expandedRowClassName | 展开行的 className | string \| (record, index, indent) => string | - | string: 5.22.0 |
|
|
310
|
+
| expandedRowKeys | 展开的行，控制属性 | string[] | - | |
|
|
311
|
+
| expandedRowRender | 额外的展开行 | function(record, index, indent, expanded): ReactNode | - | |
|
|
312
|
+
| expandIcon | 自定义展开图标，参考 | function(props): ReactNode | - | |
|
|
313
|
+
| expandRowByClick | 通过点击行来展开子行 | boolean | false | |
|
|
314
|
+
| fixed | 控制展开图标是否固定，可选 | boolean \| string | false | 4.16.0 |
|
|
315
|
+
| indentSize | 展示树形数据时，每层缩进的宽度，以 px 为单位 | number | 15 | |
|
|
316
|
+
| rowExpandable | 设置是否允许行展开（ | (record) => boolean | - | |
|
|
317
|
+
| showExpandColumn | 是否显示展开图标列 | boolean | true | 4.18.0 |
|
|
318
|
+
| onExpand | 点击展开图标时触发 | function(expanded, record) | - | |
|
|
319
|
+
| onExpandedRowsChange | 展开的行变化时触发 | function(expandedRows) | - | |
|
|
304
320
|
|
|
305
321
|
|
|
322
|
+
### rowSelection
|
|
306
323
|
|
|
307
|
-
|
|
308
|
-
|
|
324
|
+
选择功能的配置。
|
|
325
|
+
|
|
326
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
327
|
+
|--------|--------|--------|--------|--------|
|
|
328
|
+
| align | 设置选择列的对齐方式 | left | left | 5.25.0 |
|
|
329
|
+
| checkStrictly | checkable 状态下节点选择完全受控（父子数据选中状态不再关联） | boolean | true | 4.4.0 |
|
|
330
|
+
| columnTitle | 自定义列表选择框标题 | ReactNode \| (originalNode: ReactNode) => ReactNode | - | |
|
|
331
|
+
| columnWidth | 自定义列表选择框宽度 | string \| number | 32px | |
|
|
332
|
+
| fixed | 把选择框列固定在左边 | boolean | - | |
|
|
333
|
+
| getCheckboxProps | 选择框的默认属性配置 | function(record) | - | |
|
|
334
|
+
| hideSelectAll | 隐藏全选勾选框与自定义选择项 | boolean | false | 4.3.0 |
|
|
335
|
+
| preserveSelectedRowKeys | 当数据被删除时仍然保留选项的 | boolean | - | 4.4.0 |
|
|
336
|
+
| renderCell | 渲染勾选框，用法与 Column 的 | function(checked, record, index, originNode) {} | - | 4.1.0 |
|
|
337
|
+
| selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | string[] \| number[] | [] | |
|
|
338
|
+
| defaultSelectedRowKeys | 默认选中项的 key 数组 | string[] \| number[] | [] | |
|
|
339
|
+
| selections | 自定义选择项 | object[] \| boolean | true | |
|
|
340
|
+
| type | 多选/单选 | checkbox | checkbox | |
|
|
341
|
+
| onCell | 设置单元格属性，用法与 Column 的 | function(record, rowIndex) | - | 5.5.0 |
|
|
342
|
+
| onChange | 选中项发生变化时的回调 | function(selectedRowKeys, selectedRows, info: { type }) | - | info.type |
|
|
343
|
+
| onSelect | 用户手动选择/取消选择某行的回调 | function(record, selected, selectedRows, nativeEvent) | - | |
|
|
344
|
+
| onSelectAll | 用户手动选择/取消选择所有行的回调 | function(selected, selectedRows, changeRows) | - | |
|
|
345
|
+
| onSelectInvert | 用户手动选择反选的回调 | function(selectedRowKeys) | - | |
|
|
346
|
+
| onSelectNone | 用户清空选择的回调 | function() | - | |
|
|
347
|
+
| onSelectMultiple | 用户使用键盘 shift 选择多行的回调 | function(selected, selectedRows, changeRows) | - | |
|
|
348
|
+
|
|
349
|
+
|
|
350
|
+
### scroll
|
|
351
|
+
|
|
352
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
353
|
+
|--------|--------|--------|--------|
|
|
354
|
+
| scrollToFirstRowOnChange | 当分页、排序、筛选变化后是否滚动到表格顶部 | boolean | - |
|
|
355
|
+
| x | 设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比， | string \| number \| true | - |
|
|
356
|
+
| y | 设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值 | string \| number | - |
|
|
357
|
+
|
|
358
|
+
|
|
359
|
+
### selection
|
|
360
|
+
|
|
361
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
362
|
+
|--------|--------|--------|--------|
|
|
363
|
+
| key | React 需要的 key，建议设置 | string | - |
|
|
364
|
+
| text | 选择项显示的文字 | ReactNode | - |
|
|
365
|
+
| onSelect | 选择项点击回调 | function(changeableRowKeys) | - |
|
|
366
|
+
|
|
367
|
+
|
|
368
|
+
## 在 TypeScript 中使用
|
|
369
|
+
|
|
370
|
+
|
|
371
|
+
```tsx
|
|
372
|
+
import React from 'react';
|
|
373
|
+
import { Table } from 'antd';
|
|
374
|
+
import type { TableColumnsType } from 'antd';
|
|
375
|
+
|
|
376
|
+
interface User {
|
|
377
|
+
key: number;
|
|
378
|
+
name: string;
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
const columns: TableColumnsType<User> = [
|
|
382
|
+
{
|
|
383
|
+
key: 'name',
|
|
384
|
+
title: 'Name',
|
|
385
|
+
dataIndex: 'name',
|
|
386
|
+
},
|
|
387
|
+
];
|
|
388
|
+
|
|
389
|
+
const data: User[] = [
|
|
390
|
+
{
|
|
391
|
+
key: 0,
|
|
392
|
+
name: 'Jack',
|
|
393
|
+
},
|
|
394
|
+
];
|
|
395
|
+
|
|
396
|
+
const Demo: React.FC = () => (
|
|
397
|
+
<>
|
|
398
|
+
<Table<User> columns={columns} dataSource={data} />
|
|
399
|
+
{/* 使用 JSX 风格的 API */}
|
|
400
|
+
<Table<User> dataSource={data}>
|
|
401
|
+
<Table.Column<User> key="name" title="Name" dataIndex="name" />
|
|
402
|
+
</Table>
|
|
403
|
+
</>
|
|
404
|
+
);
|
|
405
|
+
|
|
406
|
+
export default Demo;
|
|
407
|
+
```
|
|
408
|
+
|
|
409
|
+
|
|
410
|
+
TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/serene-platform-0jo5t)。
|
|
411
|
+
|
|
412
|
+
|
|
413
|
+
|
|
414
|
+
<DemoTitle title="Tag" desc="进行标记和分类的小标签">
|
|
415
|
+
#### API
|
|
416
|
+
|
|
417
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
418
|
+
|--------|--------|--------|--------|
|
|
419
|
+
| size | 尺寸 | 'small' \| 'middle' | 'middle' |
|
|
420
|
+
| color | 标签色 | SparkTagColors \| string | 'purple' |
|
|
421
|
+
|
|
422
|
+
<AntdApiRef url="https://ant.design/components/tag-cn/#api"></AntdApiRef>
|
|
423
|
+
|
|
424
|
+
|
|
425
|
+
## antd API
|
|
426
|
+
|
|
427
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
428
|
+
|
|
429
|
+
### Tag
|
|
430
|
+
|
|
431
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
432
|
+
|--------|--------|--------|--------|--------|
|
|
433
|
+
| closeIcon | 自定义关闭按钮。5.7.0：设置为 | ReactNode | false | 4.4.0 |
|
|
434
|
+
| icon | 设置图标 | ReactNode | - | |
|
|
435
|
+
| bordered | 是否有边框 | boolean | true | 5.4.0 |
|
|
436
|
+
| onClose | 关闭时的回调（可通过 | (e: React.MouseEvent) => void | - | |
|
|
437
|
+
|
|
438
|
+
|
|
439
|
+
### Tag.CheckableTag
|
|
440
|
+
|
|
441
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
442
|
+
|--------|--------|--------|--------|
|
|
443
|
+
| checked | 设置标签的选中状态 | boolean | false |
|
|
444
|
+
| onChange | 点击标签时触发的回调 | (checked) => void | - |
|
|
445
|
+
|
|
446
|
+
|
|
447
|
+
|
|
448
|
+
|
|
449
|
+
<DemoTitle title="Tabs" desc="用户可以通过点击不同的标签在同一页面中查看不同的内容区域。">
|
|
450
|
+
#### API
|
|
309
451
|
|
|
310
452
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
311
453
|
|--------|--------|--------|--------|
|
|
@@ -415,259 +557,117 @@ type RangeDisabledTime = (
|
|
|
415
557
|
|
|
416
558
|
|
|
417
559
|
|
|
418
|
-
<DemoTitle title="
|
|
560
|
+
<DemoTitle title="TimePicker" desc="输入或选择时间的控件。">
|
|
419
561
|
#### API
|
|
420
562
|
|
|
421
|
-
<AntdApiRef url="https://ant.design/components/
|
|
563
|
+
<AntdApiRef url="https://ant.design/components/time-picker-cn/#api"></AntdApiRef>
|
|
422
564
|
|
|
423
565
|
|
|
424
566
|
## antd API
|
|
425
567
|
|
|
568
|
+
|
|
569
|
+
|
|
426
570
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
427
571
|
|
|
428
|
-
|
|
572
|
+
|
|
573
|
+
```jsx
|
|
574
|
+
import dayjs from 'dayjs';
|
|
575
|
+
import customParseFormat from 'dayjs/plugin/customParseFormat'
|
|
576
|
+
|
|
577
|
+
dayjs.extend(customParseFormat)
|
|
578
|
+
<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
|
|
579
|
+
```
|
|
580
|
+
|
|
429
581
|
|
|
430
582
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
431
583
|
|--------|--------|--------|--------|--------|
|
|
432
|
-
|
|
|
433
|
-
|
|
|
434
|
-
|
|
|
435
|
-
|
|
|
436
|
-
|
|
|
437
|
-
|
|
|
438
|
-
|
|
|
439
|
-
|
|
|
440
|
-
|
|
|
441
|
-
|
|
|
442
|
-
|
|
|
443
|
-
|
|
|
444
|
-
|
|
|
445
|
-
|
|
|
446
|
-
|
|
|
447
|
-
|
|
|
448
|
-
|
|
|
449
|
-
|
|
|
450
|
-
|
|
|
451
|
-
|
|
|
452
|
-
|
|
|
453
|
-
|
|
|
454
|
-
|
|
|
455
|
-
|
|
|
456
|
-
|
|
|
457
|
-
|
|
|
458
|
-
|
|
|
459
|
-
|
|
|
584
|
+
| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
|
|
585
|
+
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
586
|
+
| cellRender | 自定义单元格的内容 | (current: number, info: { originNode: React.ReactNode, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
|
|
587
|
+
| changeOnScroll | 在滚动时改变选择值 | boolean | false | 5.14.0 |
|
|
588
|
+
| className | 选择器类名 | string | - | |
|
|
589
|
+
| defaultValue | 默认时间 | | - | |
|
|
590
|
+
| disabled | 禁用全部操作 | boolean | false | |
|
|
591
|
+
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
592
|
+
| format | 展示的时间格式 | string | HH:mm:ss | |
|
|
593
|
+
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | |
|
|
594
|
+
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | |
|
|
595
|
+
| hourStep | 小时选项间隔 | number | 1 | |
|
|
596
|
+
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
|
|
597
|
+
| minuteStep | 分钟选项间隔 | number | 1 | |
|
|
598
|
+
| needConfirm | 是否需要确认按钮，为 | boolean | - | 5.14.0 |
|
|
599
|
+
| open | 面板是否打开 | boolean | false | |
|
|
600
|
+
| placeholder | 没有值的时候显示的内容 | string \| [string, string] | 请选择时间 | |
|
|
601
|
+
| placement | 选择框弹出的位置 | bottomLeft | bottomLeft | |
|
|
602
|
+
| popupClassName | 弹出层类名 | string | - | |
|
|
603
|
+
| popupStyle | 弹出层样式对象 | object | - | |
|
|
604
|
+
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
|
|
605
|
+
| renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - | |
|
|
606
|
+
| secondStep | 秒选项间隔 | number | 1 | |
|
|
607
|
+
| showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
|
|
608
|
+
| size | 输入框大小， | large | - | |
|
|
609
|
+
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
610
|
+
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
|
611
|
+
| use12Hours | 使用 12 小时制，为 true 时 | boolean | false | |
|
|
612
|
+
| value | 当前时间 | | - | |
|
|
613
|
+
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
614
|
+
| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - | |
|
|
615
|
+
| onChange | 时间发生变化的回调 | function(time: dayjs, timeString: string): void | - | |
|
|
616
|
+
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - | |
|
|
460
617
|
|
|
461
618
|
|
|
462
|
-
|
|
619
|
+
#### DisabledTime
|
|
463
620
|
|
|
464
|
-
| 参数 | 说明 | 类型 | 版本 |
|
|
465
|
-
|--------|--------|--------|--------|
|
|
466
|
-
| nativeElement | 最外层 div 元素 | HTMLDivElement | 5.11.0 |
|
|
467
|
-
| scrollTo | 滚动到目标位置（设置 | (config: { index?: number, key?: React.Key, top?: number }) => void | 5.11.0 |
|
|
468
621
|
|
|
622
|
+
```typescript
|
|
623
|
+
type DisabledTime = (now: Dayjs) => {
|
|
624
|
+
disabledHours?: () => number[];
|
|
625
|
+
disabledMinutes?: (selectedHour: number) => number[];
|
|
626
|
+
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
627
|
+
disabledMilliseconds?: (
|
|
628
|
+
selectedHour: number,
|
|
629
|
+
selectedMinute: number,
|
|
630
|
+
selectedSecond: number,
|
|
631
|
+
) => number[];
|
|
632
|
+
};
|
|
633
|
+
```
|
|
469
634
|
|
|
470
|
-
#### onRow 用法
|
|
471
635
|
|
|
472
|
-
|
|
636
|
+
注意：`disabledMilliseconds` 为 `5.14.0` 新增。
|
|
473
637
|
|
|
638
|
+
## 方法
|
|
474
639
|
|
|
475
|
-
|
|
476
|
-
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
onClick: (event) => {}, // 点击行
|
|
480
|
-
onDoubleClick: (event) => {},
|
|
481
|
-
onContextMenu: (event) => {},
|
|
482
|
-
onMouseEnter: (event) => {}, // 鼠标移入行
|
|
483
|
-
onMouseLeave: (event) => {},
|
|
484
|
-
};
|
|
485
|
-
}}
|
|
486
|
-
onHeaderRow={(columns, index) => {
|
|
487
|
-
return {
|
|
488
|
-
onClick: () => {}, // 点击表头行
|
|
489
|
-
};
|
|
490
|
-
}}
|
|
491
|
-
/>
|
|
492
|
-
```
|
|
640
|
+
| 名称 | 描述 | 版本 |
|
|
641
|
+
|--------|--------|--------|
|
|
642
|
+
| blur() | 移除焦点 | |
|
|
643
|
+
| focus() | 获取焦点 | |
|
|
493
644
|
|
|
494
645
|
|
|
495
|
-
|
|
646
|
+
## RangePicker
|
|
496
647
|
|
|
497
|
-
|
|
648
|
+
属性与 DatePicker 的 [RangePicker](/components/date-picker-cn#rangepicker) 相同。还包含以下属性：
|
|
498
649
|
|
|
499
650
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
500
651
|
|--------|--------|--------|--------|--------|
|
|
501
|
-
|
|
|
502
|
-
|
|
|
503
|
-
| colSpan | 表头列合并，设置为 0 时，不渲染 | number | - | |
|
|
504
|
-
| dataIndex | 列数据在数据项中对应的路径，支持通过数组查询嵌套路径 | string \| string[] | - | |
|
|
505
|
-
| defaultFilteredValue | 默认筛选值 | string[] | - | |
|
|
506
|
-
| filterResetToDefaultFilteredValue | 点击重置按钮的时候，是否恢复默认筛选值 | boolean | false | |
|
|
507
|
-
| defaultSortOrder | 默认排序顺序 | ascend | - | |
|
|
508
|
-
| ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。 | boolean \| { showTitle?: boolean } | false | showTitle: 4.3.0 |
|
|
509
|
-
| filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | ReactNode \| (props: | - | |
|
|
510
|
-
| filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false | |
|
|
511
|
-
| filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string[] | - | |
|
|
512
|
-
| filterIcon | 自定义 filter 图标。 | ReactNode \| (filtered: boolean) => ReactNode | false | |
|
|
513
|
-
| filterOnClose | 是否在筛选菜单关闭时触发筛选 | boolean | true | 5.15.0 |
|
|
514
|
-
| filterMultiple | 是否多选 | boolean | true | |
|
|
515
|
-
| filterMode | 指定筛选菜单的用户界面 | 'menu' \| 'tree' | 'menu' | 4.17.0 |
|
|
516
|
-
| filterSearch | 筛选菜单项是否可搜索 | boolean \| function(input, record):boolean | false | boolean:4.17.0 function:4.19.0 |
|
|
517
|
-
| filters | 表头的筛选菜单项 | object[] | - | |
|
|
518
|
-
| filterDropdownProps | 自定义下拉属性，在 | | - | 5.22.0 |
|
|
519
|
-
| fixed | （IE 下无效）列是否固定，可选 | boolean \| string | false | |
|
|
520
|
-
| key | React 需要的 key，如果已经设置了唯一的 | string | - | |
|
|
521
|
-
| render | 生成复杂数据的渲染函数，参数分别为当前单元格的值，当前行数据，行索引 | function(value, record, index) {} | - | |
|
|
522
|
-
| responsive | 响应式 breakpoint 配置列表。未设置则始终可见。 | | - | 4.2.0 |
|
|
523
|
-
| rowScope | 设置列范围 | row | - | 5.1.0 |
|
|
524
|
-
| shouldCellUpdate | 自定义单元格渲染时机 | (record, prevRecord) => boolean | - | 4.3.0 |
|
|
525
|
-
| showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中 | boolean \| | { target: 'full-header' } | 5.16.0 |
|
|
526
|
-
| sortDirections | 支持的排序方式，覆盖 | Array | [ | |
|
|
527
|
-
| sorter | 排序函数，本地排序使用一个函数(参考 | function \| boolean \| { compare: function, multiple: number } | - | |
|
|
528
|
-
| sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 | ascend | - | |
|
|
529
|
-
| sortIcon | 自定义 sort 图标 | (props: { sortOrder }) => ReactNode | - | 5.6.0 |
|
|
530
|
-
| title | 列头显示文字（函数用法 | ReactNode \| ({ sortOrder, sortColumn, filters }) => ReactNode | - | |
|
|
531
|
-
| width | 列宽度（ | string \| number | - | |
|
|
532
|
-
| minWidth | 最小列宽度，只在 | number | - | 5.21.0 |
|
|
533
|
-
| hidden | 隐藏列 | boolean | false | 5.13.0 |
|
|
534
|
-
| onCell | 设置单元格属性 | function(record, rowIndex) | - | |
|
|
535
|
-
| onFilter | 本地模式下，确定筛选的运行函数 | function | - | |
|
|
536
|
-
| onHeaderCell | 设置头部单元格属性 | function(column) | - | |
|
|
537
|
-
|
|
538
|
-
|
|
539
|
-
### ColumnGroup
|
|
540
|
-
|
|
541
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
542
|
-
|--------|--------|--------|--------|
|
|
543
|
-
| title | 列头显示文字 | ReactNode | - |
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
### pagination
|
|
547
|
-
|
|
548
|
-
分页的配置项。
|
|
549
|
-
|
|
550
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
551
|
-
|--------|--------|--------|--------|
|
|
552
|
-
| position | 指定分页显示的位置， 取值为 | Array | [ |
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
更多配置项，请查看 [`Pagination`](/components/pagination-cn)。
|
|
556
|
-
|
|
557
|
-
### expandable
|
|
558
|
-
|
|
559
|
-
展开功能的配置。
|
|
560
|
-
|
|
561
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
562
|
-
|--------|--------|--------|--------|--------|
|
|
563
|
-
| childrenColumnName | 指定树形结构的列名 | string | children | |
|
|
564
|
-
| columnTitle | 自定义展开列表头 | ReactNode | - | 4.23.0 |
|
|
565
|
-
| columnWidth | 自定义展开列宽度 | string \| number | - | |
|
|
566
|
-
| defaultExpandAllRows | 初始时，是否展开所有行 | boolean | false | |
|
|
567
|
-
| defaultExpandedRowKeys | 默认展开的行 | string[] | - | |
|
|
568
|
-
| expandedRowClassName | 展开行的 className | string \| (record, index, indent) => string | - | string: 5.22.0 |
|
|
569
|
-
| expandedRowKeys | 展开的行，控制属性 | string[] | - | |
|
|
570
|
-
| expandedRowRender | 额外的展开行 | function(record, index, indent, expanded): ReactNode | - | |
|
|
571
|
-
| expandIcon | 自定义展开图标，参考 | function(props): ReactNode | - | |
|
|
572
|
-
| expandRowByClick | 通过点击行来展开子行 | boolean | false | |
|
|
573
|
-
| fixed | 控制展开图标是否固定，可选 | boolean \| string | false | 4.16.0 |
|
|
574
|
-
| indentSize | 展示树形数据时，每层缩进的宽度，以 px 为单位 | number | 15 | |
|
|
575
|
-
| rowExpandable | 设置是否允许行展开（ | (record) => boolean | - | |
|
|
576
|
-
| showExpandColumn | 是否显示展开图标列 | boolean | true | 4.18.0 |
|
|
577
|
-
| onExpand | 点击展开图标时触发 | function(expanded, record) | - | |
|
|
578
|
-
| onExpandedRowsChange | 展开的行变化时触发 | function(expandedRows) | - | |
|
|
579
|
-
|
|
580
|
-
|
|
581
|
-
### rowSelection
|
|
582
|
-
|
|
583
|
-
选择功能的配置。
|
|
584
|
-
|
|
585
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
586
|
-
|--------|--------|--------|--------|--------|
|
|
587
|
-
| align | 设置选择列的对齐方式 | left | left | 5.25.0 |
|
|
588
|
-
| checkStrictly | checkable 状态下节点选择完全受控（父子数据选中状态不再关联） | boolean | true | 4.4.0 |
|
|
589
|
-
| columnTitle | 自定义列表选择框标题 | ReactNode \| (originalNode: ReactNode) => ReactNode | - | |
|
|
590
|
-
| columnWidth | 自定义列表选择框宽度 | string \| number | 32px | |
|
|
591
|
-
| fixed | 把选择框列固定在左边 | boolean | - | |
|
|
592
|
-
| getCheckboxProps | 选择框的默认属性配置 | function(record) | - | |
|
|
593
|
-
| hideSelectAll | 隐藏全选勾选框与自定义选择项 | boolean | false | 4.3.0 |
|
|
594
|
-
| preserveSelectedRowKeys | 当数据被删除时仍然保留选项的 | boolean | - | 4.4.0 |
|
|
595
|
-
| renderCell | 渲染勾选框，用法与 Column 的 | function(checked, record, index, originNode) {} | - | 4.1.0 |
|
|
596
|
-
| selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | string[] \| number[] | [] | |
|
|
597
|
-
| defaultSelectedRowKeys | 默认选中项的 key 数组 | string[] \| number[] | [] | |
|
|
598
|
-
| selections | 自定义选择项 | object[] \| boolean | true | |
|
|
599
|
-
| type | 多选/单选 | checkbox | checkbox | |
|
|
600
|
-
| onCell | 设置单元格属性，用法与 Column 的 | function(record, rowIndex) | - | 5.5.0 |
|
|
601
|
-
| onChange | 选中项发生变化时的回调 | function(selectedRowKeys, selectedRows, info: { type }) | - | info.type |
|
|
602
|
-
| onSelect | 用户手动选择/取消选择某行的回调 | function(record, selected, selectedRows, nativeEvent) | - | |
|
|
603
|
-
| onSelectAll | 用户手动选择/取消选择所有行的回调 | function(selected, selectedRows, changeRows) | - | |
|
|
604
|
-
| onSelectInvert | 用户手动选择反选的回调 | function(selectedRowKeys) | - | |
|
|
605
|
-
| onSelectNone | 用户清空选择的回调 | function() | - | |
|
|
606
|
-
| onSelectMultiple | 用户使用键盘 shift 选择多行的回调 | function(selected, selectedRows, changeRows) | - | |
|
|
607
|
-
|
|
608
|
-
|
|
609
|
-
### scroll
|
|
610
|
-
|
|
611
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
612
|
-
|--------|--------|--------|--------|
|
|
613
|
-
| scrollToFirstRowOnChange | 当分页、排序、筛选变化后是否滚动到表格顶部 | boolean | - |
|
|
614
|
-
| x | 设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比， | string \| number \| true | - |
|
|
615
|
-
| y | 设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值 | string \| number | - |
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
### selection
|
|
619
|
-
|
|
620
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
621
|
-
|--------|--------|--------|--------|
|
|
622
|
-
| key | React 需要的 key，建议设置 | string | - |
|
|
623
|
-
| text | 选择项显示的文字 | ReactNode | - |
|
|
624
|
-
| onSelect | 选择项点击回调 | function(changeableRowKeys) | - |
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
## 在 TypeScript 中使用
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
```tsx
|
|
631
|
-
import React from 'react';
|
|
632
|
-
import { Table } from 'antd';
|
|
633
|
-
import type { TableColumnsType } from 'antd';
|
|
634
|
-
|
|
635
|
-
interface User {
|
|
636
|
-
key: number;
|
|
637
|
-
name: string;
|
|
638
|
-
}
|
|
652
|
+
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
653
|
+
| order | 始末时间是否自动排序 | boolean | true | 4.1.0 |
|
|
639
654
|
|
|
640
|
-
const columns: TableColumnsType<User> = [
|
|
641
|
-
{
|
|
642
|
-
key: 'name',
|
|
643
|
-
title: 'Name',
|
|
644
|
-
dataIndex: 'name',
|
|
645
|
-
},
|
|
646
|
-
];
|
|
647
655
|
|
|
648
|
-
|
|
649
|
-
{
|
|
650
|
-
key: 0,
|
|
651
|
-
name: 'Jack',
|
|
652
|
-
},
|
|
653
|
-
];
|
|
656
|
+
### RangeDisabledTime
|
|
654
657
|
|
|
655
|
-
const Demo: React.FC = () => (
|
|
656
|
-
<>
|
|
657
|
-
<Table<User> columns={columns} dataSource={data} />
|
|
658
|
-
{/* 使用 JSX 风格的 API */}
|
|
659
|
-
<Table<User> dataSource={data}>
|
|
660
|
-
<Table.Column<User> key="name" title="Name" dataIndex="name" />
|
|
661
|
-
</Table>
|
|
662
|
-
</>
|
|
663
|
-
);
|
|
664
658
|
|
|
665
|
-
|
|
659
|
+
```typescript
|
|
660
|
+
type RangeDisabledTime = (
|
|
661
|
+
now: Dayjs,
|
|
662
|
+
type = 'start' | 'end',
|
|
663
|
+
) => {
|
|
664
|
+
disabledHours?: () => number[];
|
|
665
|
+
disabledMinutes?: (selectedHour: number) => number[];
|
|
666
|
+
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
667
|
+
};
|
|
666
668
|
```
|
|
667
669
|
|
|
668
670
|
|
|
669
|
-
TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/serene-platform-0jo5t)。
|
|
670
|
-
|
|
671
671
|
|
|
672
672
|
|
|
673
673
|
<DemoTitle title="Steps" desc="引导用户按照流程完成任务的导航条。">
|
|
@@ -729,23 +729,6 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
729
729
|
|
|
730
730
|
|
|
731
731
|
|
|
732
|
-
<DemoTitle title="Spinner" desc="指示页面或区块的加载中状态">
|
|
733
|
-
#### API
|
|
734
|
-
|
|
735
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
736
|
-
|--------|--------|--------|--------|
|
|
737
|
-
| tip | indicator下方的tip | React.ReactNode | - |
|
|
738
|
-
| indicator | 自定义indicator，用于展示progress的百分比和加载文案 | React.ReactNode | - |
|
|
739
|
-
| children | 被spinner包裹的子元素 | React.ReactNode | - |
|
|
740
|
-
| style | spinner最外层的样式 | React.CSSProperties | - |
|
|
741
|
-
| className | spinner的类名 | string | - |
|
|
742
|
-
| percent | 进度条的百分比 | number | - |
|
|
743
|
-
| spinning | 是否为加载中状态 | boolean | false |
|
|
744
|
-
| showProgress | 是否显示进度条，如果为true，不需要手动在children中添加Progress组件 | boolean | false |
|
|
745
|
-
|
|
746
|
-
|
|
747
|
-
|
|
748
|
-
|
|
749
732
|
<DemoTitle title="Statistic" desc="展示统计数值">
|
|
750
733
|
#### API
|
|
751
734
|
|
|
@@ -806,6 +789,23 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
806
789
|
|
|
807
790
|
|
|
808
791
|
|
|
792
|
+
<DemoTitle title="Spinner" desc="指示页面或区块的加载中状态">
|
|
793
|
+
#### API
|
|
794
|
+
|
|
795
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
796
|
+
|--------|--------|--------|--------|
|
|
797
|
+
| tip | indicator下方的tip | React.ReactNode | - |
|
|
798
|
+
| indicator | 自定义indicator，用于展示progress的百分比和加载文案 | React.ReactNode | - |
|
|
799
|
+
| children | 被spinner包裹的子元素 | React.ReactNode | - |
|
|
800
|
+
| style | spinner最外层的样式 | React.CSSProperties | - |
|
|
801
|
+
| className | spinner的类名 | string | - |
|
|
802
|
+
| percent | 进度条的百分比 | number | - |
|
|
803
|
+
| spinning | 是否为加载中状态 | boolean | false |
|
|
804
|
+
| showProgress | 是否显示进度条，如果为true，不需要手动在children中添加Progress组件 | boolean | false |
|
|
805
|
+
|
|
806
|
+
|
|
807
|
+
|
|
808
|
+
|
|
809
809
|
<DemoTitle title="Slider" desc="滑动型输入器，展示当前值和可选范围。">
|
|
810
810
|
#### API
|
|
811
811
|
|
|
@@ -931,36 +931,111 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
931
931
|
|
|
932
932
|
|
|
933
933
|
|
|
934
|
-
<DemoTitle title="
|
|
934
|
+
<DemoTitle title="RadioButton" desc="用于在多个备选项中选中单个状态。">
|
|
935
|
+
#### API
|
|
936
|
+
|
|
937
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
938
|
+
|--------|--------|--------|--------|
|
|
939
|
+
| bordered | 边框 | boolean | false |
|
|
940
|
+
| ghost | 按钮背景色类型 | boolean | true |
|
|
941
|
+
| gap | 间距 | number | 12 px |
|
|
942
|
+
|
|
943
|
+
|
|
944
|
+
<AntdApiRef url="https://ant.design/components/radio-cn/#api"></AntdApiRef>
|
|
945
|
+
|
|
946
|
+
|
|
935
947
|
## antd API
|
|
936
948
|
|
|
937
949
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
938
950
|
|
|
939
|
-
###
|
|
951
|
+
### Radio/Radio.Button
|
|
952
|
+
|
|
953
|
+
<!-- prettier-ignore -->
|
|
954
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
955
|
+
|--------|--------|--------|--------|
|
|
956
|
+
| autoFocus | 自动获取焦点 | boolean | false |
|
|
957
|
+
| checked | 指定当前是否选中 | boolean | false |
|
|
958
|
+
| defaultChecked | 初始是否选中 | boolean | false |
|
|
959
|
+
| disabled | 禁用 Radio | boolean | false |
|
|
960
|
+
| value | 根据 value 进行比较，判断是否选中 | any | - |
|
|
961
|
+
|
|
962
|
+
|
|
963
|
+
### Radio.Group
|
|
940
964
|
|
|
965
|
+
单选框组合，用于包裹一组 `Radio`。
|
|
966
|
+
|
|
967
|
+
<!-- prettier-ignore -->
|
|
941
968
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
942
969
|
|--------|--------|--------|--------|--------|
|
|
943
|
-
|
|
|
944
|
-
|
|
|
945
|
-
|
|
|
946
|
-
|
|
|
947
|
-
|
|
|
948
|
-
|
|
|
949
|
-
|
|
|
950
|
-
|
|
|
951
|
-
|
|
|
952
|
-
|
|
|
953
|
-
|
|
954
|
-
|
|
955
|
-
|
|
956
|
-
|
|
957
|
-
|
|
|
958
|
-
|
|
959
|
-
|
|
|
960
|
-
|
|
|
961
|
-
|
|
|
962
|
-
|
|
|
963
|
-
|
|
|
970
|
+
| buttonStyle | RadioButton 的风格样式，目前有描边和填色两种风格 | outline | outline | | |
|
|
971
|
+
| defaultValue | 默认选中的值 | any | - | | |
|
|
972
|
+
| disabled | 禁选所有子单选器 | boolean | false | | |
|
|
973
|
+
| name | RadioGroup 下所有 | string | - | | |
|
|
974
|
+
| options | 以配置形式设置子元素 | string[] \| number[] \| Array< | - | | |
|
|
975
|
+
| optionType | 用于设置 Radio | default | default | 4.4.0 | |
|
|
976
|
+
| size | 大小，只对按钮样式生效 | large | - | | |
|
|
977
|
+
| value | 用于设置当前选中的值 | any | - | | |
|
|
978
|
+
| block | 将 RadioGroup 宽度调整为其父宽度的选项 | boolean | false | 5.21.0 | |
|
|
979
|
+
| onChange | 选项变化时的回调函数 | function(e:Event) | - | | |
|
|
980
|
+
|
|
981
|
+
|
|
982
|
+
### CheckboxOptionType
|
|
983
|
+
|
|
984
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
985
|
+
|--------|--------|--------|--------|--------|
|
|
986
|
+
| label | 用于作为 Radio 选项展示的文本 | string | - | 4.4.0 |
|
|
987
|
+
| value | 关联 Radio 选项的值 | string | - | 4.4.0 |
|
|
988
|
+
| style | 应用到 Radio 选项的 style | React.CSSProperties | - | 4.4.0 |
|
|
989
|
+
| className | Radio 选项的类名 | string | - | 5.25.0 |
|
|
990
|
+
| disabled | 指定 Radio 选项是否要禁用 | boolean | false | 4.4.0 |
|
|
991
|
+
| title | 添加 Title 属性值 | string | - | 4.4.0 |
|
|
992
|
+
| id | 添加 Radio Id 属性值 | string | - | 4.4.0 |
|
|
993
|
+
| onChange | 当 Radio Group 的值发送改变时触发 | (e: CheckboxChangeEvent) => void; | - | 4.4.0 |
|
|
994
|
+
| required | 指定 Radio 选项是否必填 | boolean | false | 4.4.0 |
|
|
995
|
+
|
|
996
|
+
|
|
997
|
+
## 方法
|
|
998
|
+
|
|
999
|
+
### Radio
|
|
1000
|
+
|
|
1001
|
+
| 名称 | 描述 |
|
|
1002
|
+
|--------|--------|
|
|
1003
|
+
| blur() | 移除焦点 |
|
|
1004
|
+
| focus() | 获取焦点 |
|
|
1005
|
+
|
|
1006
|
+
|
|
1007
|
+
|
|
1008
|
+
|
|
1009
|
+
<DemoTitle title="Select" desc="下拉选择器">
|
|
1010
|
+
## antd API
|
|
1011
|
+
|
|
1012
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1013
|
+
|
|
1014
|
+
### Select props
|
|
1015
|
+
|
|
1016
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1017
|
+
|--------|--------|--------|--------|--------|
|
|
1018
|
+
| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | false | 5.8.0: 支持对象类型 |
|
|
1019
|
+
| autoClearSearchValue | 是否在选中项后清空搜索框，只在 | boolean | true | |
|
|
1020
|
+
| autoFocus | 默认获取焦点 | boolean | false | |
|
|
1021
|
+
| classNames | 语义化结构 class | | - | 5.25.0 |
|
|
1022
|
+
| defaultActiveFirstOption | 是否默认高亮第一个选项 | boolean | true | |
|
|
1023
|
+
| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |
|
|
1024
|
+
| defaultValue | 指定默认选中的条目 | string \| string[] \| | - | |
|
|
1025
|
+
| disabled | 是否禁用 | boolean | false | |
|
|
1026
|
+
| popupMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 | boolean \| number | true | 5.5.0 |
|
|
1027
|
+
| popupRender | 自定义下拉框内容 | (originNode: ReactNode) => ReactNode | - | |
|
|
1028
|
+
| fieldNames | 自定义节点 label、value、options、groupLabel 的字段 | object | { label: | 4.17.0（ |
|
|
1029
|
+
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 | boolean \| function(inputValue, option) | true | |
|
|
1030
|
+
| filterSort | 搜索时对筛选结果项的排序函数, 类似 | (optionA: Option, optionB: Option, info: { searchValue: string }) => number | - | searchValue |
|
|
1031
|
+
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | function(triggerNode) | () => document.body | |
|
|
1032
|
+
| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 | boolean | false | |
|
|
1033
|
+
| listHeight | 设置弹窗滚动高度 | number | 256 | |
|
|
1034
|
+
| loading | 加载中状态 | boolean | false | |
|
|
1035
|
+
| maxCount | 指定可选中的最多 items 数量，仅在 | number | - | 5.13.0 |
|
|
1036
|
+
| maxTagCount | 最多显示多少个 tag，响应式模式会对性能产生损耗 | number \| | - | responsive: 4.10 |
|
|
1037
|
+
| maxTagPlaceholder | 隐藏 tag 时显示的内容 | ReactNode \| function(omittedValues) | - | |
|
|
1038
|
+
| maxTagTextLength | 最大显示的 tag 文本长度 | number | - | |
|
|
964
1039
|
| menuItemSelectedIcon | 自定义多选时当前选中的条目图标 | ReactNode | - | |
|
|
965
1040
|
| mode | 设置 Select 的模式为多选或标签 | multiple | - | |
|
|
966
1041
|
| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | Not Found | |
|
|
@@ -1029,89 +1104,66 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1029
1104
|
|
|
1030
1105
|
|
|
1031
1106
|
|
|
1032
|
-
<DemoTitle title="
|
|
1033
|
-
|
|
1107
|
+
<DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。">
|
|
1108
|
+
## API
|
|
1034
1109
|
|
|
1035
1110
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1036
1111
|
|--------|--------|--------|--------|
|
|
1037
|
-
|
|
|
1038
|
-
| ghost | 按钮背景色类型 | boolean | true |
|
|
1039
|
-
| gap | 间距 | number | 12 px |
|
|
1040
|
-
|
|
1041
|
-
|
|
1042
|
-
<AntdApiRef url="https://ant.design/components/radio-cn/#api"></AntdApiRef>
|
|
1112
|
+
| texture | 是否显示纹理 | boolean | false |
|
|
1043
1113
|
|
|
1044
1114
|
|
|
1045
|
-
## antd API
|
|
1046
1115
|
|
|
1047
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1048
1116
|
|
|
1049
|
-
### Radio/Radio.Button
|
|
1050
1117
|
|
|
1051
|
-
<!-- prettier-ignore -->
|
|
1052
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
1053
|
-
|--------|--------|--------|--------|
|
|
1054
|
-
| autoFocus | 自动获取焦点 | boolean | false |
|
|
1055
|
-
| checked | 指定当前是否选中 | boolean | false |
|
|
1056
|
-
| defaultChecked | 初始是否选中 | boolean | false |
|
|
1057
|
-
| disabled | 禁用 Radio | boolean | false |
|
|
1058
|
-
| value | 根据 value 进行比较，判断是否选中 | any | - |
|
|
1059
1118
|
|
|
1119
|
+
<DemoTitle title="Progress" desc="用于指示任务的完成进度">
|
|
1120
|
+
## antd API
|
|
1060
1121
|
|
|
1061
|
-
|
|
1122
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1062
1123
|
|
|
1063
|
-
|
|
1124
|
+
各类型共用的属性。
|
|
1064
1125
|
|
|
1065
|
-
|
|
1066
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1126
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1067
1127
|
|--------|--------|--------|--------|--------|
|
|
1068
|
-
|
|
|
1069
|
-
|
|
|
1070
|
-
|
|
|
1071
|
-
|
|
|
1072
|
-
|
|
|
1073
|
-
|
|
|
1074
|
-
|
|
|
1075
|
-
|
|
|
1076
|
-
|
|
|
1077
|
-
|
|
|
1128
|
+
| format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent + | - |
|
|
1129
|
+
| percent | 百分比 | number | 0 | - |
|
|
1130
|
+
| showInfo | 是否显示进度数值或状态图标 | boolean | true | - |
|
|
1131
|
+
| status | 状态，可选： | string | - | - |
|
|
1132
|
+
| strokeColor | 进度条的色彩 | string | - | - |
|
|
1133
|
+
| strokeLinecap | 进度条的样式 | round | round | - |
|
|
1134
|
+
| success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - | - |
|
|
1135
|
+
| trailColor | 未完成的分段的颜色 | string | - | - |
|
|
1136
|
+
| type | 类型，可选 | string | line | - |
|
|
1137
|
+
| size | 进度条的尺寸 | number \| [number \| string, number] \| { width: number, height: number } \| "small" \| "default" | "default" | 5.3.0, Object: 5.18.0 |
|
|
1078
1138
|
|
|
1079
1139
|
|
|
1080
|
-
###
|
|
1140
|
+
### `type="line"`
|
|
1081
1141
|
|
|
1082
1142
|
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1083
1143
|
|--------|--------|--------|--------|--------|
|
|
1084
|
-
|
|
|
1085
|
-
|
|
|
1086
|
-
|
|
|
1087
|
-
|
|
|
1088
|
-
| disabled | 指定 Radio 选项是否要禁用 | boolean | false | 4.4.0 |
|
|
1089
|
-
| title | 添加 Title 属性值 | string | - | 4.4.0 |
|
|
1090
|
-
| id | 添加 Radio Id 属性值 | string | - | 4.4.0 |
|
|
1091
|
-
| onChange | 当 Radio Group 的值发送改变时触发 | (e: CheckboxChangeEvent) => void; | - | 4.4.0 |
|
|
1092
|
-
| required | 指定 Radio 选项是否必填 | boolean | false | 4.4.0 |
|
|
1093
|
-
|
|
1094
|
-
|
|
1095
|
-
## 方法
|
|
1096
|
-
|
|
1097
|
-
### Radio
|
|
1098
|
-
|
|
1099
|
-
| 名称 | 描述 |
|
|
1100
|
-
|--------|--------|
|
|
1101
|
-
| blur() | 移除焦点 |
|
|
1102
|
-
| focus() | 获取焦点 |
|
|
1103
|
-
|
|
1144
|
+
| steps | 进度条总共步数 | number | - | - |
|
|
1145
|
+
| rounding | 用于四舍五入数值的函数 | (step: number) => number | Math.round | 5.24.0 |
|
|
1146
|
+
| strokeColor | 进度条的色彩，传入 object 时为渐变。当有 | string \| string[] \| { from: string; to: string; direction: string } | - | 4.21.0: |
|
|
1147
|
+
| percentPosition | 进度数值位置，传入对象， | { align: string; type: string } | { align: "end", type: "outer" } | 5.18.0 |
|
|
1104
1148
|
|
|
1105
1149
|
|
|
1150
|
+
### `type="circle"`
|
|
1106
1151
|
|
|
1107
|
-
|
|
1108
|
-
|
|
1152
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1153
|
+
|--------|--------|--------|--------|--------|
|
|
1154
|
+
| steps | 进度条总共步数，传入 object 时，count 指步数，gap 指间隔大小。传 number 类型时，gap 默认为 2。 | number \| { count: number, gap: number } | - | 5.16.0 |
|
|
1155
|
+
| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| { number%: string } | - | - |
|
|
1156
|
+
| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |
|
|
1109
1157
|
|
|
1110
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1111
|
-
|--------|--------|--------|--------|
|
|
1112
|
-
| texture | 是否显示纹理 | boolean | false |
|
|
1113
1158
|
|
|
1159
|
+
### `type="dashboard"`
|
|
1114
1160
|
|
|
1161
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1162
|
+
|--------|--------|--------|--------|--------|
|
|
1163
|
+
| steps | 进度条总共步数，传入 object 时，count 指步数，gap 指间隔大小。传 number 类型时，gap 默认为 2。 | number \| { count: number, gap: number } | - | 5.16.0 |
|
|
1164
|
+
| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 295 | number | 75 | - |
|
|
1165
|
+
| gapPosition | 仪表盘进度条缺口位置 | top | bottom | - |
|
|
1166
|
+
| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |
|
|
1115
1167
|
|
|
1116
1168
|
|
|
1117
1169
|
|
|
@@ -1184,54 +1236,19 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1184
1236
|
|
|
1185
1237
|
|
|
1186
1238
|
|
|
1187
|
-
<DemoTitle title="
|
|
1188
|
-
|
|
1189
|
-
|
|
1190
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1191
|
-
|
|
1192
|
-
各类型共用的属性。
|
|
1193
|
-
|
|
1194
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1195
|
-
|--------|--------|--------|--------|--------|
|
|
1196
|
-
| format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent + | - |
|
|
1197
|
-
| percent | 百分比 | number | 0 | - |
|
|
1198
|
-
| showInfo | 是否显示进度数值或状态图标 | boolean | true | - |
|
|
1199
|
-
| status | 状态，可选： | string | - | - |
|
|
1200
|
-
| strokeColor | 进度条的色彩 | string | - | - |
|
|
1201
|
-
| strokeLinecap | 进度条的样式 | round | round | - |
|
|
1202
|
-
| success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - | - |
|
|
1203
|
-
| trailColor | 未完成的分段的颜色 | string | - | - |
|
|
1204
|
-
| type | 类型，可选 | string | line | - |
|
|
1205
|
-
| size | 进度条的尺寸 | number \| [number \| string, number] \| { width: number, height: number } \| "small" \| "default" | "default" | 5.3.0, Object: 5.18.0 |
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
### `type="line"`
|
|
1209
|
-
|
|
1210
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1211
|
-
|--------|--------|--------|--------|--------|
|
|
1212
|
-
| steps | 进度条总共步数 | number | - | - |
|
|
1213
|
-
| rounding | 用于四舍五入数值的函数 | (step: number) => number | Math.round | 5.24.0 |
|
|
1214
|
-
| strokeColor | 进度条的色彩，传入 object 时为渐变。当有 | string \| string[] \| { from: string; to: string; direction: string } | - | 4.21.0: |
|
|
1215
|
-
| percentPosition | 进度数值位置，传入对象， | { align: string; type: string } | { align: "end", type: "outer" } | 5.18.0 |
|
|
1216
|
-
|
|
1217
|
-
|
|
1218
|
-
### `type="circle"`
|
|
1219
|
-
|
|
1220
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1221
|
-
|--------|--------|--------|--------|--------|
|
|
1222
|
-
| steps | 进度条总共步数，传入 object 时，count 指步数，gap 指间隔大小。传 number 类型时，gap 默认为 2。 | number \| { count: number, gap: number } | - | 5.16.0 |
|
|
1223
|
-
| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| { number%: string } | - | - |
|
|
1224
|
-
| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |
|
|
1225
|
-
|
|
1226
|
-
|
|
1227
|
-
### `type="dashboard"`
|
|
1239
|
+
<DemoTitle title="MdEditor" desc="提示词编辑器，可以高亮 Markdown 的语法，支持自定义槽位变量的插入">
|
|
1240
|
+
#### API
|
|
1228
1241
|
|
|
1229
|
-
|
|
|
1230
|
-
|
|
1231
|
-
|
|
|
1232
|
-
|
|
|
1233
|
-
|
|
|
1234
|
-
|
|
|
1242
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1243
|
+
|--------|--------|--------|--------|
|
|
1244
|
+
| maxLength | 可以输入内容的最大长度 | number | |
|
|
1245
|
+
| value | 输入的内容 | string | (必填) |
|
|
1246
|
+
| className | 输入内容的类名 | string | |
|
|
1247
|
+
| onChange | 输入内容的回调 | (value: string) => void | |
|
|
1248
|
+
| variables | 可以插入的变量列表 | Array | |
|
|
1249
|
+
| onCreate | 新增变量的触发回调 | () => void | |
|
|
1250
|
+
| createBtnText | 新增变量的按钮文本 | string | |
|
|
1251
|
+
| tipsText | 提示文本，传入 false 时隐藏提示 | string \| React.ReactNode \| false | |
|
|
1235
1252
|
|
|
1236
1253
|
|
|
1237
1254
|
|
|
@@ -1337,40 +1354,183 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1337
1354
|
|
|
1338
1355
|
|
|
1339
1356
|
|
|
1340
|
-
<DemoTitle title="
|
|
1341
|
-
|
|
1357
|
+
<DemoTitle title="Pagination" desc="分页器用于分隔长列表，每次只加载一个页面。">
|
|
1358
|
+
## API
|
|
1342
1359
|
|
|
1343
1360
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1344
1361
|
|--------|--------|--------|--------|
|
|
1345
|
-
|
|
|
1346
|
-
| showDivider | 是否显示分割线 | boolean | true |
|
|
1362
|
+
| hideSwitchButton | 是否展示上一页/下一页的切换按钮 | boolean | false |
|
|
1347
1363
|
|
|
1348
|
-
|
|
1364
|
+
|
|
1365
|
+
<AntdApiRef url="https://ant.design/components/pagination-cn/#api"></AntdApiRef>
|
|
1349
1366
|
|
|
1350
1367
|
|
|
1351
1368
|
## antd API
|
|
1352
1369
|
|
|
1353
1370
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1354
1371
|
|
|
1372
|
+
|
|
1373
|
+
```jsx
|
|
1374
|
+
<Pagination onChange={onChange} total={50} />
|
|
1375
|
+
```
|
|
1376
|
+
|
|
1377
|
+
|
|
1355
1378
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1356
1379
|
|--------|--------|--------|--------|--------|
|
|
1357
|
-
|
|
|
1358
|
-
|
|
|
1359
|
-
|
|
|
1360
|
-
|
|
|
1361
|
-
|
|
|
1362
|
-
|
|
|
1363
|
-
|
|
|
1364
|
-
|
|
|
1365
|
-
|
|
|
1366
|
-
|
|
|
1367
|
-
|
|
|
1368
|
-
|
|
|
1369
|
-
|
|
|
1370
|
-
|
|
|
1371
|
-
|
|
|
1372
|
-
|
|
|
1373
|
-
|
|
|
1380
|
+
| align | 对齐方式 | start \| center \| end | - | 5.19.0 |
|
|
1381
|
+
| current | 当前页数 | number | - | |
|
|
1382
|
+
| defaultCurrent | 默认的当前页数 | number | 1 | |
|
|
1383
|
+
| defaultPageSize | 默认的每页条数 | number | 10 | |
|
|
1384
|
+
| disabled | 禁用分页 | boolean | - | |
|
|
1385
|
+
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | |
|
|
1386
|
+
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | |
|
|
1387
|
+
| pageSize | 每页条数 | number | - | |
|
|
1388
|
+
| pageSizeOptions | 指定每页可以显示多少条 | number[] | [ | |
|
|
1389
|
+
| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | |
|
|
1390
|
+
| showLessItems | 是否显示较少页面内容 | boolean | false | |
|
|
1391
|
+
| showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false | |
|
|
1392
|
+
| showSizeChanger | 是否展示 | boolean \| | - | SelectProps: 5.21.0 |
|
|
1393
|
+
| showTitle | 是否显示原生 tooltip 页码提示 | boolean | true | |
|
|
1394
|
+
| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | |
|
|
1395
|
+
| simple | 当添加该属性时，显示为简单分页 | boolean \| { readOnly?: boolean } | - | |
|
|
1396
|
+
| size | 当为 | default | default | |
|
|
1397
|
+
| total | 数据总数 | number | 0 | |
|
|
1398
|
+
| onChange | 页码或 | function(page, pageSize) | - | |
|
|
1399
|
+
| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | |
|
|
1400
|
+
|
|
1401
|
+
|
|
1402
|
+
|
|
1403
|
+
|
|
1404
|
+
<DemoTitle title="Notification" desc="用于指示任务的完成进度">
|
|
1405
|
+
#### API
|
|
1406
|
+
|
|
1407
|
+
<AntdApiRef url="https://ant.design/components/notification-cn/#api"></AntdApiRef>
|
|
1408
|
+
|
|
1409
|
+
|
|
1410
|
+
## antd API
|
|
1411
|
+
|
|
1412
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1413
|
+
|
|
1414
|
+
|
|
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
|
+
|
|
1424
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1425
|
+
|--------|--------|--------|--------|--------|
|
|
1426
|
+
| actions | 自定义按钮组 | ReactNode | - | 5.24.0 |
|
|
1427
|
+
| className | 自定义 CSS class | string | - | - |
|
|
1428
|
+
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1429
|
+
| description | 通知提醒内容，必选 | ReactNode | - | - |
|
|
1430
|
+
| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 | - |
|
|
1431
|
+
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1432
|
+
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1433
|
+
| icon | 自定义图标 | ReactNode | - | - |
|
|
1434
|
+
| key | 当前通知唯一标志 | string | - | - |
|
|
1435
|
+
| message | 通知提醒标题，必选 | ReactNode | - | - |
|
|
1436
|
+
| placement | 弹出位置，可选 | string | topRight | - |
|
|
1437
|
+
| style | 自定义内联样式 | | - | - |
|
|
1438
|
+
| role | 供屏幕阅读器识别的通知内容语义，默认为 | alert \| status | alert | 5.6.0 |
|
|
1439
|
+
| onClick | 点击通知时触发的回调函数 | function | - | - |
|
|
1440
|
+
| onClose | 当通知关闭时触发 | function | - | - |
|
|
1441
|
+
| props | 透传至通知 | Object | - | - |
|
|
1442
|
+
|
|
1443
|
+
|
|
1444
|
+
|
|
1445
|
+
- `notification.useNotification(config)`
|
|
1446
|
+
|
|
1447
|
+
config 参数如下：
|
|
1448
|
+
|
|
1449
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1450
|
+
|--------|--------|--------|--------|--------|
|
|
1451
|
+
| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 | |
|
|
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 |
|
|
1461
|
+
|
|
1462
|
+
|
|
1463
|
+
### 全局配置
|
|
1464
|
+
|
|
1465
|
+
还提供了一个全局配置方法，在调用前提前配置，全局一次生效。
|
|
1466
|
+
|
|
1467
|
+
`notification.config(options)`
|
|
1468
|
+
|
|
1469
|
+
当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)当你想单独使用，可通过如下设置开启 RTL 模式。
|
|
1470
|
+
|
|
1471
|
+
|
|
1472
|
+
```js
|
|
1473
|
+
notification.config({
|
|
1474
|
+
placement: 'bottomRight',
|
|
1475
|
+
bottom: 50,
|
|
1476
|
+
duration: 3,
|
|
1477
|
+
rtl: true,
|
|
1478
|
+
});
|
|
1479
|
+
```
|
|
1480
|
+
|
|
1481
|
+
|
|
1482
|
+
#### notification.config
|
|
1483
|
+
|
|
1484
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1485
|
+
|--------|--------|--------|--------|--------|
|
|
1486
|
+
| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 | |
|
|
1487
|
+
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1488
|
+
| duration | 默认自动关闭延时，单位秒 | number | 4.5 | |
|
|
1489
|
+
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1490
|
+
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1491
|
+
| getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLNode | () => document.body | |
|
|
1492
|
+
| placement | 弹出位置，可选 | string | topRight | |
|
|
1493
|
+
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1494
|
+
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | |
|
|
1495
|
+
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
|
|
1496
|
+
|
|
1497
|
+
|
|
1498
|
+
|
|
1499
|
+
|
|
1500
|
+
<DemoTitle title="Modal" desc="用于叠加当前页面上的对话框窗口，提供标题、内容区、操作区。">
|
|
1501
|
+
#### API
|
|
1502
|
+
|
|
1503
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1504
|
+
|--------|--------|--------|--------|
|
|
1505
|
+
| info | 底部额外内容 | string \| React.ReactNode | |
|
|
1506
|
+
| showDivider | 是否显示分割线 | boolean | true |
|
|
1507
|
+
|
|
1508
|
+
<AntdApiRef url="https://ant.design/components/modal-cn/#api"></AntdApiRef>
|
|
1509
|
+
|
|
1510
|
+
|
|
1511
|
+
## antd API
|
|
1512
|
+
|
|
1513
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1514
|
+
|
|
1515
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1516
|
+
|--------|--------|--------|--------|--------|
|
|
1517
|
+
| afterClose | Modal 完全关闭后的回调 | function | - | |
|
|
1518
|
+
| classNames | 配置弹窗内置模块的 className | | - | |
|
|
1519
|
+
| styles | 配置弹窗内置模块的 style | | - | 5.10.0 |
|
|
1520
|
+
| cancelButtonProps | cancel 按钮 props | | - | |
|
|
1521
|
+
| cancelText | 取消按钮文字 | ReactNode | 取消 | |
|
|
1522
|
+
| centered | 垂直居中展示 Modal | boolean | false | |
|
|
1523
|
+
| closable | 是否显示右上角的关闭按钮 | boolean \| { closeIcon?: React.ReactNode; disabled?: boolean; } | true | |
|
|
1524
|
+
| closeIcon | 自定义关闭图标。5.7.0：设置为 | ReactNode | | |
|
|
1525
|
+
| confirmLoading | 确定按钮 loading | boolean | false | |
|
|
1526
|
+
| destroyOnHidden | 关闭时销毁 Modal 里的子元素 | boolean | false | 5.25.0 |
|
|
1527
|
+
| focusTriggerAfterClose | 对话框关闭后是否需要聚焦触发元素 | boolean | true | 4.9.0 |
|
|
1528
|
+
| footer | 底部内容，当不需要默认底部按钮时，可以设为 | ReactNode \| (originNode: ReactNode, extra: { OkBtn: React.FC, CancelBtn: React.FC }) => ReactNode | (确定取消按钮) | renderFunction: 5.9.0 |
|
|
1529
|
+
| forceRender | 强制渲染 Modal | boolean | false | |
|
|
1530
|
+
| getContainer | 指定 Modal 挂载的节点，但依旧为全屏展示， | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body | |
|
|
1531
|
+
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
|
|
1532
|
+
| mask | 是否展示遮罩 | boolean | true | |
|
|
1533
|
+
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
|
|
1374
1534
|
| modalRender | 自定义渲染对话框 | (node: ReactNode) => ReactNode | - | 4.7.0 |
|
|
1375
1535
|
| okButtonProps | ok 按钮 props | | - | |
|
|
1376
1536
|
| okText | 确认按钮文字 | ReactNode | 确定 | |
|
|
@@ -1507,29 +1667,6 @@ const confirmed = await modal.confirm({ ... });
|
|
|
1507
1667
|
|
|
1508
1668
|
|
|
1509
1669
|
|
|
1510
|
-
<DemoTitle title="MediaPreview" desc="用于预览图片和视频的弹窗组件">
|
|
1511
|
-
#### API
|
|
1512
|
-
|
|
1513
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
1514
|
-
|--------|--------|--------|--------|
|
|
1515
|
-
| visible | 是否显示预览 | boolean | false |
|
|
1516
|
-
| mediaList | 媒体列表 | MediaItem[] | [] |
|
|
1517
|
-
| currentIndex | 当前选中的索引 | number | 0 |
|
|
1518
|
-
| onClose | 关闭回调 | () => void | - |
|
|
1519
|
-
| className | 自定义样式类名 | string | - |
|
|
1520
|
-
|
|
1521
|
-
|
|
1522
|
-
#### MediaItem
|
|
1523
|
-
|
|
1524
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
1525
|
-
|--------|--------|--------|--------|
|
|
1526
|
-
| type | 媒体类型 | 'image' \| 'video' | - |
|
|
1527
|
-
| src | 媒体资源地址 | string | - |
|
|
1528
|
-
| alt | 媒体替代文本 | string | - |
|
|
1529
|
-
|
|
1530
|
-
|
|
1531
|
-
|
|
1532
|
-
|
|
1533
1670
|
<DemoTitle title="Message" desc="一条简洁且临时显示的消息，为操作提供全局反馈">
|
|
1534
1671
|
#### API
|
|
1535
1672
|
|
|
@@ -1630,230 +1767,70 @@ message.config({
|
|
|
1630
1767
|
|
|
1631
1768
|
|
|
1632
1769
|
|
|
1633
|
-
<DemoTitle title="
|
|
1634
|
-
|
|
1635
|
-
|
|
1636
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1637
|
-
|--------|--------|--------|--------|
|
|
1638
|
-
| hideSwitchButton | 是否展示上一页/下一页的切换按钮 | boolean | false |
|
|
1639
|
-
|
|
1770
|
+
<DemoTitle title="InputNumber" desc="通过鼠标或键盘，输入范围内的数值。">
|
|
1771
|
+
#### API
|
|
1640
1772
|
|
|
1641
|
-
<AntdApiRef url="https://ant.design/components/
|
|
1773
|
+
<AntdApiRef url="https://ant.design/components/input-number-cn/#api"></AntdApiRef>
|
|
1642
1774
|
|
|
1643
1775
|
|
|
1644
1776
|
## antd API
|
|
1645
1777
|
|
|
1646
1778
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1647
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 |
|
|
1648
1810
|
|
|
1649
|
-
```jsx
|
|
1650
|
-
<Pagination onChange={onChange} total={50} />
|
|
1651
|
-
```
|
|
1652
1811
|
|
|
1812
|
+
## Ref
|
|
1653
1813
|
|
|
1654
|
-
|
|
|
1655
|
-
|
|
1656
|
-
|
|
|
1657
|
-
|
|
|
1658
|
-
|
|
|
1659
|
-
| defaultPageSize | 默认的每页条数 | number | 10 | |
|
|
1660
|
-
| disabled | 禁用分页 | boolean | - | |
|
|
1661
|
-
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | |
|
|
1662
|
-
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | |
|
|
1663
|
-
| pageSize | 每页条数 | number | - | |
|
|
1664
|
-
| pageSizeOptions | 指定每页可以显示多少条 | number[] | [ | |
|
|
1665
|
-
| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | |
|
|
1666
|
-
| showLessItems | 是否显示较少页面内容 | boolean | false | |
|
|
1667
|
-
| showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false | |
|
|
1668
|
-
| showSizeChanger | 是否展示 | boolean \| | - | SelectProps: 5.21.0 |
|
|
1669
|
-
| showTitle | 是否显示原生 tooltip 页码提示 | boolean | true | |
|
|
1670
|
-
| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | |
|
|
1671
|
-
| simple | 当添加该属性时，显示为简单分页 | boolean \| { readOnly?: boolean } | - | |
|
|
1672
|
-
| size | 当为 | default | default | |
|
|
1673
|
-
| total | 数据总数 | number | 0 | |
|
|
1674
|
-
| onChange | 页码或 | function(page, pageSize) | - | |
|
|
1675
|
-
| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | |
|
|
1814
|
+
| 名称 | 说明 | 参数 | 版本 |
|
|
1815
|
+
|--------|--------|--------|--------|
|
|
1816
|
+
| blur() | 移除焦点 | - | |
|
|
1817
|
+
| focus() | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | cursor - 5.22.0 |
|
|
1818
|
+
| nativeElement | 获取原生 DOM 元素 | - | 5.17.3 |
|
|
1676
1819
|
|
|
1677
1820
|
|
|
1678
1821
|
|
|
1679
1822
|
|
|
1680
|
-
<DemoTitle title="
|
|
1823
|
+
<DemoTitle title="Image" desc="可预览的图片">
|
|
1681
1824
|
#### API
|
|
1682
1825
|
|
|
1683
|
-
<AntdApiRef url="https://ant.design/components/
|
|
1826
|
+
<AntdApiRef url="https://ant.design/components/image-cn/#api"></AntdApiRef>
|
|
1684
1827
|
|
|
1685
1828
|
|
|
1686
1829
|
## antd API
|
|
1687
1830
|
|
|
1688
1831
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1689
1832
|
|
|
1690
|
-
|
|
1691
|
-
- `notification.success(config)`
|
|
1692
|
-
- `notification.error(config)`
|
|
1693
|
-
- `notification.info(config)`
|
|
1694
|
-
- `notification.warning(config)`
|
|
1695
|
-
- `notification.open(config)`
|
|
1696
|
-
- `notification.destroy(key?: String)`
|
|
1697
|
-
|
|
1698
|
-
config 参数如下：
|
|
1699
|
-
|
|
1700
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1701
|
-
|--------|--------|--------|--------|--------|
|
|
1702
|
-
| actions | 自定义按钮组 | ReactNode | - | 5.24.0 |
|
|
1703
|
-
| className | 自定义 CSS class | string | - | - |
|
|
1704
|
-
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1705
|
-
| description | 通知提醒内容，必选 | ReactNode | - | - |
|
|
1706
|
-
| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 | - |
|
|
1707
|
-
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1708
|
-
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1709
|
-
| icon | 自定义图标 | ReactNode | - | - |
|
|
1710
|
-
| key | 当前通知唯一标志 | string | - | - |
|
|
1711
|
-
| message | 通知提醒标题，必选 | ReactNode | - | - |
|
|
1712
|
-
| placement | 弹出位置，可选 | string | topRight | - |
|
|
1713
|
-
| style | 自定义内联样式 | | - | - |
|
|
1714
|
-
| role | 供屏幕阅读器识别的通知内容语义，默认为 | alert \| status | alert | 5.6.0 |
|
|
1715
|
-
| onClick | 点击通知时触发的回调函数 | function | - | - |
|
|
1716
|
-
| onClose | 当通知关闭时触发 | function | - | - |
|
|
1717
|
-
| props | 透传至通知 | Object | - | - |
|
|
1718
|
-
|
|
1719
|
-
|
|
1720
|
-
|
|
1721
|
-
- `notification.useNotification(config)`
|
|
1722
|
-
|
|
1723
|
-
config 参数如下：
|
|
1724
|
-
|
|
1725
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1726
|
-
|--------|--------|--------|--------|--------|
|
|
1727
|
-
| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 | |
|
|
1728
|
-
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1729
|
-
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body | |
|
|
1730
|
-
| placement | 弹出位置，可选 | string | topRight | |
|
|
1731
|
-
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1732
|
-
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1733
|
-
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1734
|
-
| stack | 堆叠模式，超过阈值时会将所有消息收起 | boolean \| | { threshold: 3 } | 5.10.0 |
|
|
1735
|
-
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | |
|
|
1736
|
-
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
|
|
1737
|
-
|
|
1738
|
-
|
|
1739
|
-
### 全局配置
|
|
1740
|
-
|
|
1741
|
-
还提供了一个全局配置方法，在调用前提前配置，全局一次生效。
|
|
1742
|
-
|
|
1743
|
-
`notification.config(options)`
|
|
1744
|
-
|
|
1745
|
-
当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)当你想单独使用，可通过如下设置开启 RTL 模式。
|
|
1746
|
-
|
|
1747
|
-
|
|
1748
|
-
```js
|
|
1749
|
-
notification.config({
|
|
1750
|
-
placement: 'bottomRight',
|
|
1751
|
-
bottom: 50,
|
|
1752
|
-
duration: 3,
|
|
1753
|
-
rtl: true,
|
|
1754
|
-
});
|
|
1755
|
-
```
|
|
1756
|
-
|
|
1757
|
-
|
|
1758
|
-
#### notification.config
|
|
1759
|
-
|
|
1760
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1761
|
-
|--------|--------|--------|--------|--------|
|
|
1762
|
-
| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 | |
|
|
1763
|
-
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1764
|
-
| duration | 默认自动关闭延时，单位秒 | number | 4.5 | |
|
|
1765
|
-
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1766
|
-
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1767
|
-
| getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLNode | () => document.body | |
|
|
1768
|
-
| placement | 弹出位置，可选 | string | topRight | |
|
|
1769
|
-
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1770
|
-
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | |
|
|
1771
|
-
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
|
|
1772
|
-
|
|
1773
|
-
|
|
1774
|
-
|
|
1775
|
-
|
|
1776
|
-
<DemoTitle title="InputNumber" desc="通过鼠标或键盘，输入范围内的数值。">
|
|
1777
|
-
#### API
|
|
1778
|
-
|
|
1779
|
-
<AntdApiRef url="https://ant.design/components/input-number-cn/#api"></AntdApiRef>
|
|
1780
|
-
|
|
1781
|
-
|
|
1782
|
-
## antd API
|
|
1783
|
-
|
|
1784
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1785
|
-
|
|
1786
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1787
|
-
|--------|--------|--------|--------|--------|
|
|
1788
|
-
| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | 4.17.0 |
|
|
1789
|
-
| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | 4.17.0 |
|
|
1790
|
-
| autoFocus | 自动获取焦点 | boolean | false | - |
|
|
1791
|
-
| changeOnBlur | 是否在失去焦点时，触发 | boolean | true | 5.11.0 |
|
|
1792
|
-
| changeOnWheel | 允许鼠标滚轮改变数值 | boolean | - | 5.14.0 |
|
|
1793
|
-
| controls | 是否显示增减按钮，也可设置自定义箭头图标 | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
|
|
1794
|
-
| decimalSeparator | 小数点 | string | - | - |
|
|
1795
|
-
| placeholder | 占位符 | string | - | |
|
|
1796
|
-
| defaultValue | 初始值 | number | - | - |
|
|
1797
|
-
| disabled | 禁用 | boolean | false | - |
|
|
1798
|
-
| formatter | 指定输入框展示值的格式 | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - | info: 4.17.0 |
|
|
1799
|
-
| keyboard | 是否启用键盘快捷行为 | boolean | true | 4.12.0 |
|
|
1800
|
-
| max | 最大值 | number | | - |
|
|
1801
|
-
| min | 最小值 | number | | - |
|
|
1802
|
-
| parser | 指定从 | function(string): number | - | - |
|
|
1803
|
-
| precision | 数值精度，配置 | number | - | - |
|
|
1804
|
-
| readOnly | 只读 | boolean | false | - |
|
|
1805
|
-
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
1806
|
-
| prefix | 带有前缀图标的 input | ReactNode | - | 4.17.0 |
|
|
1807
|
-
| suffix | 带有后缀图标的 input | ReactNode | - | 5.20.0 |
|
|
1808
|
-
| size | 输入框大小 | large | - | - |
|
|
1809
|
-
| step | 每次改变步数，可以为小数 | number \| string | 1 | - |
|
|
1810
|
-
| stringMode | 字符值模式，开启后支持高精度小数。同时 | boolean | false | 4.13.0 |
|
|
1811
|
-
| value | 当前值 | number | - | - |
|
|
1812
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
1813
|
-
| onChange | 变化回调 | function(value: number \| string \| null) | - | - |
|
|
1814
|
-
| onPressEnter | 按下回车的回调 | function(e) | - | - |
|
|
1815
|
-
| onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 |
|
|
1816
|
-
|
|
1817
|
-
|
|
1818
|
-
## Ref
|
|
1819
|
-
|
|
1820
|
-
| 名称 | 说明 | 参数 | 版本 |
|
|
1821
|
-
|--------|--------|--------|--------|
|
|
1822
|
-
| blur() | 移除焦点 | - | |
|
|
1823
|
-
| focus() | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | cursor - 5.22.0 |
|
|
1824
|
-
| nativeElement | 获取原生 DOM 元素 | - | 5.17.3 |
|
|
1825
|
-
|
|
1826
|
-
|
|
1827
|
-
|
|
1828
|
-
|
|
1829
|
-
<DemoTitle title="MdEditor" desc="提示词编辑器，可以高亮 Markdown 的语法，支持自定义槽位变量的插入">
|
|
1830
|
-
#### API
|
|
1831
|
-
|
|
1832
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1833
|
-
|--------|--------|--------|--------|
|
|
1834
|
-
| maxLength | 可以输入内容的最大长度 | number | |
|
|
1835
|
-
| value | 输入的内容 | string | (必填) |
|
|
1836
|
-
| className | 输入内容的类名 | string | |
|
|
1837
|
-
| onChange | 输入内容的回调 | (value: string) => void | |
|
|
1838
|
-
| variables | 可以插入的变量列表 | Array | |
|
|
1839
|
-
| onCreate | 新增变量的触发回调 | () => void | |
|
|
1840
|
-
| createBtnText | 新增变量的按钮文本 | string | |
|
|
1841
|
-
| tipsText | 提示文本，传入 false 时隐藏提示 | string \| React.ReactNode \| false | |
|
|
1842
|
-
|
|
1843
|
-
|
|
1844
|
-
|
|
1845
|
-
|
|
1846
|
-
<DemoTitle title="Image" desc="可预览的图片">
|
|
1847
|
-
#### API
|
|
1848
|
-
|
|
1849
|
-
<AntdApiRef url="https://ant.design/components/image-cn/#api"></AntdApiRef>
|
|
1850
|
-
|
|
1851
|
-
|
|
1852
|
-
## antd API
|
|
1853
|
-
|
|
1854
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1855
|
-
|
|
1856
|
-
### Image
|
|
1833
|
+
### Image
|
|
1857
1834
|
|
|
1858
1835
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1859
1836
|
|--------|--------|--------|--------|--------|
|
|
@@ -2010,52 +1987,6 @@ type TransformAction =
|
|
|
2010
1987
|
|
|
2011
1988
|
|
|
2012
1989
|
|
|
2013
|
-
<DemoTitle title="IconButton" desc="以图标为核心的轻量按钮组件，用于触发操作。">
|
|
2014
|
-
#### API
|
|
2015
|
-
|
|
2016
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2017
|
-
|--------|--------|--------|--------|
|
|
2018
|
-
| icon | icon | ReactNode \| string | |
|
|
2019
|
-
| iconType | 百炼图标iconfont的key，依赖百炼的iconFont，例如bl-icon-add | string | |
|
|
2020
|
-
| bordered | 边框 | boolean | true |
|
|
2021
|
-
| shape | 形状 | 'default' \| 'circle' | 'default' |
|
|
2022
|
-
|
|
2023
|
-
|
|
2024
|
-
## antd API
|
|
2025
|
-
|
|
2026
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2027
|
-
|
|
2028
|
-
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
2029
|
-
|
|
2030
|
-
按钮的属性说明如下：
|
|
2031
|
-
|
|
2032
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
2033
|
-
|--------|--------|--------|--------|--------|
|
|
2034
|
-
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
2035
|
-
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
2036
|
-
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
2037
|
-
| color | 设置按钮的颜色 | default | - | default |
|
|
2038
|
-
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
2039
|
-
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
2040
|
-
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
2041
|
-
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2042
|
-
| htmlType | 设置 | submit | button | |
|
|
2043
|
-
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
2044
|
-
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
2045
|
-
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
2046
|
-
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
2047
|
-
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
2048
|
-
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
2049
|
-
|
|
2050
|
-
|
|
2051
|
-
支持原生 button 的其他所有属性。
|
|
2052
|
-
|
|
2053
|
-
### PresetColors
|
|
2054
|
-
|
|
2055
|
-
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
2056
|
-
|
|
2057
|
-
|
|
2058
|
-
|
|
2059
1990
|
<DemoTitle title="Input" desc="通过鼠标或键盘输入内容，为表单提供输入字段的基础容器。。">
|
|
2060
1991
|
#### API
|
|
2061
1992
|
|
|
@@ -2191,6 +2122,52 @@ interface CountConfig {
|
|
|
2191
2122
|
|
|
2192
2123
|
|
|
2193
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
|
+
|
|
2194
2171
|
<DemoTitle title="Form" desc="高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。">
|
|
2195
2172
|
#### API
|
|
2196
2173
|
|
|
@@ -2751,32 +2728,55 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
|
|
|
2751
2728
|
|
|
2752
2729
|
|
|
2753
2730
|
|
|
2754
|
-
<DemoTitle title="
|
|
2731
|
+
<DemoTitle title="FloatButton" desc="用于网站上的全局功能；无论浏览到何处都可以看见的按钮。">
|
|
2755
2732
|
#### API
|
|
2756
2733
|
|
|
2757
|
-
|
|
2734
|
+
<AntdApiRef url="https://ant.design/components/float-button-cn/#api"></AntdApiRef>
|
|
2758
2735
|
|
|
2759
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2760
|
-
|--------|--------|--------|--------|
|
|
2761
|
-
| src | | string | |
|
|
2762
|
-
| image | | string | |
|
|
2763
|
-
| type | | string | (必填) |
|
|
2764
|
-
| size | | number | |
|
|
2765
|
-
| style | | React.CSSProperties | |
|
|
2766
2736
|
|
|
2737
|
+
## antd API
|
|
2767
2738
|
|
|
2768
|
-
|
|
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 |
|
|
2769
2757
|
|
|
2770
|
-
|
|
2771
|
-
|
|
2772
|
-
|
|
2773
|
-
|
|
|
2774
|
-
|
|
2775
|
-
|
|
|
2776
|
-
|
|
|
2777
|
-
|
|
|
2778
|
-
|
|
|
2779
|
-
|
|
|
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
2780
|
|
|
2781
2781
|
|
|
2782
2782
|
|
|
@@ -2976,280 +2976,122 @@ const dividerItem = {
|
|
|
2976
2976
|
|
|
2977
2977
|
|
|
2978
2978
|
|
|
2979
|
-
<DemoTitle title="
|
|
2979
|
+
<DemoTitle title="Descriptions" desc="展示多个只读字段的组合">
|
|
2980
2980
|
#### API
|
|
2981
2981
|
|
|
2982
|
-
<AntdApiRef url="https://ant.design/components/
|
|
2982
|
+
<AntdApiRef url="https://ant.design/components/descriptions-cn/#api"></AntdApiRef>
|
|
2983
2983
|
|
|
2984
2984
|
|
|
2985
2985
|
## antd API
|
|
2986
2986
|
|
|
2987
2987
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2988
2988
|
|
|
2989
|
-
|
|
2990
|
-
|
|
2991
|
-
### 共同的 API
|
|
2989
|
+
### Descriptions
|
|
2992
2990
|
|
|
2993
2991
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2994
2992
|
|--------|--------|--------|--------|--------|
|
|
2995
|
-
|
|
|
2996
|
-
|
|
|
2997
|
-
|
|
|
2998
|
-
|
|
|
2999
|
-
|
|
|
3000
|
-
|
|
|
3001
|
-
|
|
|
3002
|
-
|
|
|
3003
|
-
|
|
|
3004
|
-
|
|
|
2993
|
+
| bordered | 是否展示边框 | boolean | false | |
|
|
2994
|
+
| colon | 配置 | boolean | true | |
|
|
2995
|
+
| column | 一行的 | number \| | 3 | |
|
|
2996
|
+
| extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 |
|
|
2997
|
+
| items | 描述列表项内容 | | - | 5.8.0 |
|
|
2998
|
+
| layout | 描述布局 | horizontal | horizontal | |
|
|
2999
|
+
| size | 设置列表的大小。可以设置为 | default | - | |
|
|
3000
|
+
| title | 描述列表的标题，显示在最顶部 | ReactNode | - | |
|
|
3001
|
+
| classNames | 语义化结构 class | | - | 5.23.0 |
|
|
3002
|
+
| styles | 语义化结构 style | | - | 5.23.0 |
|
|
3005
3003
|
|
|
3006
3004
|
|
|
3007
|
-
###
|
|
3005
|
+
### DescriptionItem
|
|
3008
3006
|
|
|
3009
3007
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3010
3008
|
|--------|--------|--------|--------|--------|
|
|
3011
|
-
|
|
|
3012
|
-
|
|
|
3013
|
-
| open | 受控展开，需配合 trigger 一起使用 | boolean | - | |
|
|
3014
|
-
| closeIcon | 自定义关闭按钮 | React.ReactNode | | |
|
|
3015
|
-
| placement | 自定义菜单弹出位置 | top | top | 5.21.0 |
|
|
3016
|
-
| onOpenChange | 展开收起时的回调，需配合 trigger 一起使用 | (open: boolean) => void | - | |
|
|
3017
|
-
| onClick | 点击按钮时的回调（仅在菜单模式中有效） | (event) => void | - | 5.3.0 |
|
|
3018
|
-
|
|
3019
|
-
|
|
3020
|
-
### FloatButton.BackTop
|
|
3009
|
+
| label | 内容的描述 | ReactNode | - | |
|
|
3010
|
+
| span | 包含列的数量（ | number\| | 1 | screens: 5.9.0 |
|
|
3021
3011
|
|
|
3022
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3023
|
-
|--------|--------|--------|--------|--------|
|
|
3024
|
-
| duration | 回到顶部所需时间（ms） | number | 450 | |
|
|
3025
|
-
| target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window | |
|
|
3026
|
-
| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |
|
|
3027
|
-
| onClick | 点击按钮的回调函数 | () => void | - | |
|
|
3028
3012
|
|
|
3013
|
+
span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
|
|
3029
3014
|
|
|
3030
3015
|
|
|
3031
3016
|
|
|
3032
|
-
<DemoTitle title="
|
|
3017
|
+
<DemoTitle title="FileIcon" desc="用于展示不同文件类型的图标，也可通过 FileCard 展示文件信息。">
|
|
3033
3018
|
#### API
|
|
3034
3019
|
|
|
3035
|
-
|
|
3036
|
-
|--------|--------|--------|--------|
|
|
3037
|
-
| showDivider | 是否显示分割线 | boolean | true |
|
|
3038
|
-
|
|
3039
|
-
##### Drawer.Confirm - 带按钮的抽屉
|
|
3020
|
+
##### FileIcon Props
|
|
3040
3021
|
|
|
3041
3022
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3042
3023
|
|--------|--------|--------|--------|
|
|
3043
|
-
|
|
|
3044
|
-
|
|
|
3045
|
-
|
|
|
3046
|
-
|
|
|
3047
|
-
|
|
|
3048
|
-
| cancelText | 取消按钮文字 | string | |
|
|
3049
|
-
| cancelButtonProps | 取消按钮属性 | ButtonProps | |
|
|
3050
|
-
| info | 底部额外内容 | React.ReactNode | |
|
|
3051
|
-
|
|
3052
|
-
<AntdApiRef url="https://ant.design/components/drawer-cn/#api"></AntdApiRef>
|
|
3053
|
-
|
|
3024
|
+
| src | | string | |
|
|
3025
|
+
| image | | string | |
|
|
3026
|
+
| type | | string | (必填) |
|
|
3027
|
+
| size | | number | |
|
|
3028
|
+
| style | | React.CSSProperties | |
|
|
3054
3029
|
|
|
3055
|
-
## antd API
|
|
3056
3030
|
|
|
3057
|
-
|
|
3031
|
+
##### FileCard Props
|
|
3058
3032
|
|
|
3059
|
-
|
|
3060
|
-
|
|
3061
|
-
|
|
3062
|
-
|
|
3063
|
-
|
|
|
3064
|
-
|
|
3065
|
-
|
|
|
3066
|
-
|
|
|
3067
|
-
|
|
|
3068
|
-
|
|
|
3069
|
-
| closeIcon | 自定义关闭图标。5.7.0：设置为 | ReactNode | | |
|
|
3070
|
-
| destroyOnHidden | 关闭时销毁 Drawer 里的子元素 | boolean | false | 5.25.0 |
|
|
3071
|
-
| extra | 抽屉右上角的操作区域 | ReactNode | - | 4.17.0 |
|
|
3072
|
-
| footer | 抽屉的页脚 | ReactNode | - | |
|
|
3073
|
-
| forceRender | 预渲染 Drawer 内元素 | boolean | false | |
|
|
3074
|
-
| getContainer | 指定 Drawer 挂载的节点， | HTMLElement \| () => HTMLElement \| Selectors \| false | body | |
|
|
3075
|
-
| height | 高度，在 | string \| number | 378 | |
|
|
3076
|
-
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
|
|
3077
|
-
| mask | 是否展示遮罩 | boolean | true | |
|
|
3078
|
-
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
|
|
3079
|
-
| placement | 抽屉的方向 | top | right | |
|
|
3080
|
-
| push | 用于设置多层 Drawer 的推动行为 | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
|
|
3081
|
-
| rootStyle | 可用于设置 Drawer 最外层容器的样式，和 | CSSProperties | - | |
|
|
3082
|
-
| size | 预设抽屉宽度（或高度），default | 'default' \| 'large' | 'default' | 4.17.0 |
|
|
3083
|
-
| style | 设计 Drawer 容器样式，如果你只需要设置内容部分请使用 | CSSProperties | - | |
|
|
3084
|
-
| styles | 语义化结构 style | | - | 5.10.0 |
|
|
3085
|
-
| title | 标题 | ReactNode | - | |
|
|
3086
|
-
| loading | 显示骨架屏 | boolean | false | 5.17.0 |
|
|
3087
|
-
| open | Drawer 是否可见 | boolean | - |
|
|
3088
|
-
| width | 宽度 | string \| number | 378 | |
|
|
3089
|
-
| zIndex | 设置 Drawer 的 | number | 1000 | |
|
|
3090
|
-
| onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - | |
|
|
3091
|
-
| drawerRender | 自定义渲染抽屉 | (node: ReactNode) => ReactNode | - | 5.18.0 |
|
|
3033
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3034
|
+
|--------|--------|--------|--------|
|
|
3035
|
+
| iconSize | | number | |
|
|
3036
|
+
| src | | string | |
|
|
3037
|
+
| type | | string | (必填) |
|
|
3038
|
+
| name | | string | (必填) |
|
|
3039
|
+
| desc | | string | |
|
|
3040
|
+
| size | | number | |
|
|
3041
|
+
| width | | React.CSSProperties['width'] | |
|
|
3042
|
+
| children | | React.ReactNode | |
|
|
3092
3043
|
|
|
3093
3044
|
|
|
3094
3045
|
|
|
3095
3046
|
|
|
3096
|
-
<DemoTitle title="
|
|
3047
|
+
<DemoTitle title="DatePicker" desc="输入或选择时间的控件。">
|
|
3097
3048
|
#### API
|
|
3098
3049
|
|
|
3099
|
-
|
|
3100
|
-
|--------|--------|--------|--------|
|
|
3101
|
-
| collapsedHeight | 收起状态下显示的内容高度 | number | 0 |
|
|
3102
|
-
| expandedHeight | 展开状态下的内容高度，设置后内容超出时可滚动，不设置则自适应内容高度 | number | 300 |
|
|
3103
|
-
| title | 面板标题 | string \| React.ReactNode | "" |
|
|
3104
|
-
| expandOnPanelClick | 是否允许点击整个面板进行展开 | boolean | false |
|
|
3105
|
-
| extra | 面板右侧内容 | React.ReactNode | |
|
|
3106
|
-
| children | 面板内容 | React.ReactNode | |
|
|
3107
|
-
| defaultExpanded | 是否默认展开 | boolean | false |
|
|
3108
|
-
| classNames | 语义化的classNames | Partial> | |
|
|
3109
|
-
| styles | 语义化的styles | Partial<
|
|
3110
|
-
Record
|
|
3111
|
-
> | |
|
|
3112
|
-
|
|
3050
|
+
<AntdApiRef url="https://ant.design/components/date-picker-cn/#api"></AntdApiRef>
|
|
3113
3051
|
|
|
3114
3052
|
|
|
3115
3053
|
## antd API
|
|
3116
3054
|
|
|
3117
3055
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3118
3056
|
|
|
3119
|
-
|
|
3057
|
+
日期类组件包括以下五种形式。
|
|
3120
3058
|
|
|
3121
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3122
|
-
|--------|--------|--------|--------|--------|
|
|
3123
|
-
| accordion | 手风琴模式 | boolean | false | |
|
|
3124
|
-
| activeKey | 当前激活 tab 面板的 key | string[] \| string | | |
|
|
3125
|
-
| bordered | 带边框风格的折叠面板 | boolean | true | |
|
|
3126
|
-
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 |
|
|
3127
|
-
| defaultActiveKey | 初始化选中面板的 key | string[] \| string | - | |
|
|
3128
|
-
| destroyOnHidden | 销毁折叠隐藏的面板 | boolean | false | 5.25.0 |
|
|
3129
|
-
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
|
|
3130
|
-
| expandIconPosition | 设置图标位置 | start | - | 4.21.0 |
|
|
3131
|
-
| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
|
|
3132
|
-
| size | 设置折叠面板大小 | large | middle | 5.2.0 |
|
|
3133
|
-
| onChange | 切换面板的回调 | function | - | |
|
|
3134
|
-
| items | 折叠项目内容 | | - | 5.6.0 |
|
|
3135
3059
|
|
|
3060
|
+
- DatePicker
|
|
3061
|
+
- DatePicker[picker="month"]
|
|
3062
|
+
- DatePicker[picker="week"]
|
|
3063
|
+
- DatePicker[picker="year"]
|
|
3064
|
+
- DatePicker[picker="quarter"] (4.1.0 新增)
|
|
3065
|
+
- RangePicker
|
|
3136
3066
|
|
|
3137
|
-
###
|
|
3067
|
+
### 国际化配置
|
|
3138
3068
|
|
|
3139
|
-
|
|
3140
|
-
|--------|--------|--------|--------|--------|
|
|
3141
|
-
| classNames | 语义化结构 className | | - | 5.21.0 |
|
|
3142
|
-
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | |
|
|
3143
|
-
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3144
|
-
| key | 对应 activeKey | string \| number | - | |
|
|
3145
|
-
| label | 面板标题 | ReactNode | - | - |
|
|
3146
|
-
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3147
|
-
| styles | 语义化结构 style | | - | 5.21.0 |
|
|
3069
|
+
默认配置为 en-US，如果你需要设置其他语言，推荐在入口处使用我们提供的国际化组件，详见：[ConfigProvider 国际化](https://ant.design/components/config-provider-cn/)。
|
|
3148
3070
|
|
|
3071
|
+
如有特殊需求（仅修改单一组件的语言），请使用 locale 参数，参考：[默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)。
|
|
3149
3072
|
|
|
3150
|
-
### Collapse.Panel
|
|
3151
3073
|
|
|
3152
|
-
|
|
3153
|
-
|
|
3154
|
-
|
|
3155
|
-
|
|
3156
|
-
|
|
3157
|
-
|--------|--------|--------|--------|--------|
|
|
3158
|
-
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 (icon: 4.24.0) |
|
|
3159
|
-
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3160
|
-
| header | 面板标题 | ReactNode | - | |
|
|
3161
|
-
| key | 对应 activeKey | string \| number | - | |
|
|
3162
|
-
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3074
|
+
```jsx
|
|
3075
|
+
// 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
|
|
3076
|
+
// 确保还导入相关的 dayjs 文件，否则所有文本的区域设置都不会更改（例如范围选择器月份）
|
|
3077
|
+
import locale from 'antd/locale/zh_CN';
|
|
3078
|
+
import dayjs from 'dayjs';
|
|
3163
3079
|
|
|
3080
|
+
import 'dayjs/locale/zh-cn';
|
|
3164
3081
|
|
|
3082
|
+
dayjs.locale('zh-cn');
|
|
3165
3083
|
|
|
3084
|
+
<ConfigProvider locale={locale}>
|
|
3085
|
+
<DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} />
|
|
3086
|
+
</ConfigProvider>;
|
|
3087
|
+
```
|
|
3166
3088
|
|
|
3167
|
-
<DemoTitle title="Descriptions" desc="展示多个只读字段的组合">
|
|
3168
|
-
#### API
|
|
3169
3089
|
|
|
3170
|
-
|
|
3171
|
-
|
|
3172
|
-
|
|
3173
|
-
|
|
3174
|
-
|
|
3175
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3176
|
-
|
|
3177
|
-
### Descriptions
|
|
3178
|
-
|
|
3179
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3180
|
-
|--------|--------|--------|--------|--------|
|
|
3181
|
-
| bordered | 是否展示边框 | boolean | false | |
|
|
3182
|
-
| colon | 配置 | boolean | true | |
|
|
3183
|
-
| column | 一行的 | number \| | 3 | |
|
|
3184
|
-
| extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 |
|
|
3185
|
-
| items | 描述列表项内容 | | - | 5.8.0 |
|
|
3186
|
-
| layout | 描述布局 | horizontal | horizontal | |
|
|
3187
|
-
| size | 设置列表的大小。可以设置为 | default | - | |
|
|
3188
|
-
| title | 描述列表的标题，显示在最顶部 | ReactNode | - | |
|
|
3189
|
-
| classNames | 语义化结构 class | | - | 5.23.0 |
|
|
3190
|
-
| styles | 语义化结构 style | | - | 5.23.0 |
|
|
3191
|
-
|
|
3192
|
-
|
|
3193
|
-
### DescriptionItem
|
|
3194
|
-
|
|
3195
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3196
|
-
|--------|--------|--------|--------|--------|
|
|
3197
|
-
| label | 内容的描述 | ReactNode | - | |
|
|
3198
|
-
| span | 包含列的数量（ | number\| | 1 | screens: 5.9.0 |
|
|
3199
|
-
|
|
3200
|
-
|
|
3201
|
-
span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
|
|
3202
|
-
|
|
3203
|
-
|
|
3204
|
-
|
|
3205
|
-
<DemoTitle title="DatePicker" desc="输入或选择时间的控件。">
|
|
3206
|
-
#### API
|
|
3207
|
-
|
|
3208
|
-
<AntdApiRef url="https://ant.design/components/date-picker-cn/#api"></AntdApiRef>
|
|
3209
|
-
|
|
3210
|
-
|
|
3211
|
-
## antd API
|
|
3212
|
-
|
|
3213
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3214
|
-
|
|
3215
|
-
日期类组件包括以下五种形式。
|
|
3216
|
-
|
|
3217
|
-
|
|
3218
|
-
- DatePicker
|
|
3219
|
-
- DatePicker[picker="month"]
|
|
3220
|
-
- DatePicker[picker="week"]
|
|
3221
|
-
- DatePicker[picker="year"]
|
|
3222
|
-
- DatePicker[picker="quarter"] (4.1.0 新增)
|
|
3223
|
-
- RangePicker
|
|
3224
|
-
|
|
3225
|
-
### 国际化配置
|
|
3226
|
-
|
|
3227
|
-
默认配置为 en-US，如果你需要设置其他语言，推荐在入口处使用我们提供的国际化组件，详见：[ConfigProvider 国际化](https://ant.design/components/config-provider-cn/)。
|
|
3228
|
-
|
|
3229
|
-
如有特殊需求（仅修改单一组件的语言），请使用 locale 参数，参考：[默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)。
|
|
3230
|
-
|
|
3231
|
-
|
|
3232
|
-
```jsx
|
|
3233
|
-
// 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
|
|
3234
|
-
// 确保还导入相关的 dayjs 文件，否则所有文本的区域设置都不会更改（例如范围选择器月份）
|
|
3235
|
-
import locale from 'antd/locale/zh_CN';
|
|
3236
|
-
import dayjs from 'dayjs';
|
|
3237
|
-
|
|
3238
|
-
import 'dayjs/locale/zh-cn';
|
|
3239
|
-
|
|
3240
|
-
dayjs.locale('zh-cn');
|
|
3241
|
-
|
|
3242
|
-
<ConfigProvider locale={locale}>
|
|
3243
|
-
<DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} />
|
|
3244
|
-
</ConfigProvider>;
|
|
3245
|
-
```
|
|
3246
|
-
|
|
3247
|
-
|
|
3248
|
-
<!-- prettier-ignore -->
|
|
3249
|
-
<Container type="warning">
|
|
3250
|
-
在搭配 Next.js 的 App Router 使用时，注意在引入 dayjs 的 locale 文件时加上 `'use client'`。这是由于 Ant Design 的组件都是客户端组件，在 RSC 中引入 dayjs 的 locale 文件将不会在客户端生效。
|
|
3251
|
-
</Container>
|
|
3252
|
-
### 共同的 API
|
|
3090
|
+
<!-- prettier-ignore -->
|
|
3091
|
+
<Container type="warning">
|
|
3092
|
+
在搭配 Next.js 的 App Router 使用时，注意在引入 dayjs 的 locale 文件时加上 `'use client'`。这是由于 Ant Design 的组件都是客户端组件，在 RSC 中引入 dayjs 的 locale 文件将不会在客户端生效。
|
|
3093
|
+
</Container>
|
|
3094
|
+
### 共同的 API
|
|
3253
3095
|
|
|
3254
3096
|
以下 API 为 DatePicker、 RangePicker 共享的 API。
|
|
3255
3097
|
|
|
@@ -3424,10 +3266,87 @@ export type FormatType =
|
|
|
3424
3266
|
|
|
3425
3267
|
|
|
3426
3268
|
|
|
3427
|
-
<DemoTitle title="
|
|
3269
|
+
<DemoTitle title="Drawer" desc="从页面一侧滑入的操作面板，用于承载临时界面内容。">
|
|
3428
3270
|
#### API
|
|
3429
3271
|
|
|
3430
|
-
|
|
3272
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3273
|
+
|--------|--------|--------|--------|
|
|
3274
|
+
| showDivider | 是否显示分割线 | boolean | true |
|
|
3275
|
+
|
|
3276
|
+
##### Drawer.Confirm - 带按钮的抽屉
|
|
3277
|
+
|
|
3278
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3279
|
+
|--------|--------|--------|--------|
|
|
3280
|
+
| footer | 自定义底部内容 | React.ReactNode | |
|
|
3281
|
+
| onOk | 点击确定回调 | () => void | |
|
|
3282
|
+
| okText | 确认按钮文字 | string | |
|
|
3283
|
+
| okButtonProps | 确认按钮属性 | ButtonProps | |
|
|
3284
|
+
| onCancel | 点击取消回调 | () => void | |
|
|
3285
|
+
| cancelText | 取消按钮文字 | string | |
|
|
3286
|
+
| cancelButtonProps | 取消按钮属性 | ButtonProps | |
|
|
3287
|
+
| info | 底部额外内容 | React.ReactNode | |
|
|
3288
|
+
|
|
3289
|
+
<AntdApiRef url="https://ant.design/components/drawer-cn/#api"></AntdApiRef>
|
|
3290
|
+
|
|
3291
|
+
|
|
3292
|
+
## antd API
|
|
3293
|
+
|
|
3294
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3295
|
+
|
|
3296
|
+
<!-- prettier-ignore -->
|
|
3297
|
+
<Container type="warning" title="注意">
|
|
3298
|
+
v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v4 `className` 与 `style` 改至配置 Drawer 窗体样式以和 Modal 对齐。
|
|
3299
|
+
</Container>
|
|
3300
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3301
|
+
|--------|--------|--------|--------|--------|
|
|
3302
|
+
| autoFocus | 抽屉展开后是否将焦点切换至其 DOM 节点 | boolean | true | 4.17.0 |
|
|
3303
|
+
| afterOpenChange | 切换抽屉时动画结束后的回调 | function(open) | - | |
|
|
3304
|
+
| className | Drawer 容器外层 className 设置，如果需要设置最外层，请使用 rootClassName | string | - | |
|
|
3305
|
+
| classNames | 语义化结构 className | | - | 5.10.0 |
|
|
3306
|
+
| closeIcon | 自定义关闭图标。5.7.0：设置为 | ReactNode | | |
|
|
3307
|
+
| destroyOnHidden | 关闭时销毁 Drawer 里的子元素 | boolean | false | 5.25.0 |
|
|
3308
|
+
| extra | 抽屉右上角的操作区域 | ReactNode | - | 4.17.0 |
|
|
3309
|
+
| footer | 抽屉的页脚 | ReactNode | - | |
|
|
3310
|
+
| forceRender | 预渲染 Drawer 内元素 | boolean | false | |
|
|
3311
|
+
| getContainer | 指定 Drawer 挂载的节点， | HTMLElement \| () => HTMLElement \| Selectors \| false | body | |
|
|
3312
|
+
| height | 高度，在 | string \| number | 378 | |
|
|
3313
|
+
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
|
|
3314
|
+
| mask | 是否展示遮罩 | boolean | true | |
|
|
3315
|
+
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
|
|
3316
|
+
| placement | 抽屉的方向 | top | right | |
|
|
3317
|
+
| push | 用于设置多层 Drawer 的推动行为 | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
|
|
3318
|
+
| rootStyle | 可用于设置 Drawer 最外层容器的样式，和 | CSSProperties | - | |
|
|
3319
|
+
| size | 预设抽屉宽度（或高度），default | 'default' \| 'large' | 'default' | 4.17.0 |
|
|
3320
|
+
| style | 设计 Drawer 容器样式，如果你只需要设置内容部分请使用 | CSSProperties | - | |
|
|
3321
|
+
| styles | 语义化结构 style | | - | 5.10.0 |
|
|
3322
|
+
| title | 标题 | ReactNode | - | |
|
|
3323
|
+
| loading | 显示骨架屏 | boolean | false | 5.17.0 |
|
|
3324
|
+
| open | Drawer 是否可见 | boolean | - |
|
|
3325
|
+
| width | 宽度 | string \| number | 378 | |
|
|
3326
|
+
| zIndex | 设置 Drawer 的 | number | 1000 | |
|
|
3327
|
+
| onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - | |
|
|
3328
|
+
| drawerRender | 自定义渲染抽屉 | (node: ReactNode) => ReactNode | - | 5.18.0 |
|
|
3329
|
+
|
|
3330
|
+
|
|
3331
|
+
|
|
3332
|
+
|
|
3333
|
+
<DemoTitle title="CollapsePanel" desc="折叠面板">
|
|
3334
|
+
#### API
|
|
3335
|
+
|
|
3336
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3337
|
+
|--------|--------|--------|--------|
|
|
3338
|
+
| collapsedHeight | 收起状态下显示的内容高度 | number | 0 |
|
|
3339
|
+
| expandedHeight | 展开状态下的内容高度，设置后内容超出时可滚动，不设置则自适应内容高度 | number | 300 |
|
|
3340
|
+
| title | 面板标题 | string \| React.ReactNode | "" |
|
|
3341
|
+
| expandOnPanelClick | 是否允许点击整个面板进行展开 | boolean | false |
|
|
3342
|
+
| extra | 面板右侧内容 | React.ReactNode | |
|
|
3343
|
+
| children | 面板内容 | React.ReactNode | |
|
|
3344
|
+
| defaultExpanded | 是否默认展开 | boolean | false |
|
|
3345
|
+
| classNames | 语义化的classNames | Partial> | |
|
|
3346
|
+
| styles | 语义化的styles | Partial<
|
|
3347
|
+
Record
|
|
3348
|
+
> | |
|
|
3349
|
+
|
|
3431
3350
|
|
|
3432
3351
|
|
|
3433
3352
|
## antd API
|
|
@@ -3482,84 +3401,6 @@ export type FormatType =
|
|
|
3482
3401
|
|
|
3483
3402
|
|
|
3484
3403
|
|
|
3485
|
-
<DemoTitle title="CodeBlock" desc="代码块">
|
|
3486
|
-
#### API
|
|
3487
|
-
|
|
3488
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3489
|
-
|--------|--------|--------|--------|
|
|
3490
|
-
| language | 语言 | string \| string[] | (必填) |
|
|
3491
|
-
| value | 值 | string | |
|
|
3492
|
-
| className | 类名 | string | |
|
|
3493
|
-
| theme | 主题 | 'dark' \| 'light' | |
|
|
3494
|
-
| readOnly | 只读 | boolean | |
|
|
3495
|
-
| onChange | | (value?: string) => void | |
|
|
3496
|
-
|
|
3497
|
-
|
|
3498
|
-
|
|
3499
|
-
|
|
3500
|
-
<DemoTitle title="Card" desc="通用卡片容器">
|
|
3501
|
-
#### API
|
|
3502
|
-
|
|
3503
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3504
|
-
|--------|--------|--------|--------|
|
|
3505
|
-
| info | 副标题 | ReactNode | |
|
|
3506
|
-
|
|
3507
|
-
<AntdApiRef url="https://ant.design/components/card-cn/#api"></AntdApiRef>
|
|
3508
|
-
|
|
3509
|
-
|
|
3510
|
-
## antd API
|
|
3511
|
-
|
|
3512
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3513
|
-
|
|
3514
|
-
|
|
3515
|
-
```jsx
|
|
3516
|
-
<Card title="卡片标题">卡片内容</Card>
|
|
3517
|
-
```
|
|
3518
|
-
|
|
3519
|
-
|
|
3520
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3521
|
-
|--------|--------|--------|--------|--------|
|
|
3522
|
-
| actions | 卡片操作组，位置在卡片底部 | Array | - | |
|
|
3523
|
-
| activeTabKey | 当前激活页签的 key | string | - | |
|
|
3524
|
-
| variant | 形态变体 | outlined | outlined | 5.24.0 |
|
|
3525
|
-
| cover | 卡片封面 | ReactNode | - | |
|
|
3526
|
-
| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | 第一个页签的 key | |
|
|
3527
|
-
| extra | 卡片右上角的操作区域 | ReactNode | - | |
|
|
3528
|
-
| hoverable | 鼠标移过时可浮起 | boolean | false | |
|
|
3529
|
-
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false | |
|
|
3530
|
-
| size | card 的尺寸 | default | default | |
|
|
3531
|
-
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | |
|
|
3532
|
-
| tabList | 页签标题列表 | | - | |
|
|
3533
|
-
| tabProps | | - | - | |
|
|
3534
|
-
| title | 卡片标题 | ReactNode | - | |
|
|
3535
|
-
| type | 卡片类型，可设置为 | string | - | |
|
|
3536
|
-
| classNames | 配置卡片内置模块的 className | | - | 5.14.0 |
|
|
3537
|
-
| styles | 配置卡片内置模块的 style | | - | 5.14.0 |
|
|
3538
|
-
| onTabChange | 页签切换的回调 | (key) => void | - | |
|
|
3539
|
-
|
|
3540
|
-
|
|
3541
|
-
### Card.Grid
|
|
3542
|
-
|
|
3543
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3544
|
-
|--------|--------|--------|--------|--------|
|
|
3545
|
-
| className | 网格容器类名 | string | - | |
|
|
3546
|
-
| hoverable | 鼠标移过时可浮起 | boolean | true | |
|
|
3547
|
-
| style | 定义网格容器类名的样式 | CSSProperties | - | |
|
|
3548
|
-
|
|
3549
|
-
|
|
3550
|
-
### Card.Meta
|
|
3551
|
-
|
|
3552
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3553
|
-
|--------|--------|--------|--------|--------|
|
|
3554
|
-
| avatar | 头像/图标 | ReactNode | - | |
|
|
3555
|
-
| className | 容器类名 | string | - | |
|
|
3556
|
-
| description | 描述内容 | ReactNode | - | |
|
|
3557
|
-
| style | 定义容器类名的样式 | CSSProperties | - | |
|
|
3558
|
-
| title | 标题内容 | ReactNode | - | |
|
|
3559
|
-
|
|
3560
|
-
|
|
3561
|
-
|
|
3562
|
-
|
|
3563
3404
|
<DemoTitle title="Checkbox" desc="收集用户的多项选择。">
|
|
3564
3405
|
#### API
|
|
3565
3406
|
|
|
@@ -3631,41 +3472,75 @@ interface Option {
|
|
|
3631
3472
|
|
|
3632
3473
|
|
|
3633
3474
|
|
|
3634
|
-
<DemoTitle title="
|
|
3475
|
+
<DemoTitle title="CodeBlock" desc="代码块">
|
|
3635
3476
|
#### API
|
|
3636
3477
|
|
|
3637
|
-
|
|
3638
|
-
|
|
3478
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3479
|
+
|--------|--------|--------|--------|
|
|
3480
|
+
| language | 语言 | string \| string[] | (必填) |
|
|
3481
|
+
| value | 值 | string | |
|
|
3482
|
+
| className | 类名 | string | |
|
|
3483
|
+
| theme | 主题 | 'dark' \| 'light' | |
|
|
3484
|
+
| readOnly | 只读 | boolean | |
|
|
3485
|
+
| onChange | | (value?: string) => void | |
|
|
3639
3486
|
|
|
3640
|
-
## antd API
|
|
3641
3487
|
|
|
3642
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3643
3488
|
|
|
3644
|
-
|
|
3489
|
+
|
|
3490
|
+
<DemoTitle title="Collapse" desc="可以折叠/展开的内容区域">
|
|
3491
|
+
#### API
|
|
3492
|
+
|
|
3493
|
+
<AntdApiRef url="https://ant.design/components/collapse-cn/#api"></AntdApiRef>
|
|
3494
|
+
|
|
3495
|
+
|
|
3496
|
+
## antd API
|
|
3497
|
+
|
|
3498
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3499
|
+
|
|
3500
|
+
### Collapse
|
|
3645
3501
|
|
|
3646
3502
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3647
3503
|
|--------|--------|--------|--------|--------|
|
|
3648
|
-
|
|
|
3649
|
-
|
|
|
3650
|
-
|
|
|
3651
|
-
|
|
|
3652
|
-
|
|
|
3653
|
-
|
|
|
3654
|
-
|
|
|
3655
|
-
|
|
|
3656
|
-
|
|
|
3657
|
-
|
|
|
3504
|
+
| accordion | 手风琴模式 | boolean | false | |
|
|
3505
|
+
| activeKey | 当前激活 tab 面板的 key | string[] \| string | | |
|
|
3506
|
+
| bordered | 带边框风格的折叠面板 | boolean | true | |
|
|
3507
|
+
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 |
|
|
3508
|
+
| defaultActiveKey | 初始化选中面板的 key | string[] \| string | - | |
|
|
3509
|
+
| destroyOnHidden | 销毁折叠隐藏的面板 | boolean | false | 5.25.0 |
|
|
3510
|
+
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
|
|
3511
|
+
| expandIconPosition | 设置图标位置 | start | - | 4.21.0 |
|
|
3512
|
+
| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
|
|
3513
|
+
| size | 设置折叠面板大小 | large | middle | 5.2.0 |
|
|
3514
|
+
| onChange | 切换面板的回调 | function | - | |
|
|
3515
|
+
| items | 折叠项目内容 | | - | 5.6.0 |
|
|
3658
3516
|
|
|
3659
3517
|
|
|
3660
|
-
|
|
3518
|
+
### ItemType
|
|
3661
3519
|
|
|
3662
|
-
|
|
3520
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3521
|
+
|--------|--------|--------|--------|--------|
|
|
3522
|
+
| classNames | 语义化结构 className | | - | 5.21.0 |
|
|
3523
|
+
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | |
|
|
3524
|
+
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3525
|
+
| key | 对应 activeKey | string \| number | - | |
|
|
3526
|
+
| label | 面板标题 | ReactNode | - | - |
|
|
3527
|
+
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3528
|
+
| styles | 语义化结构 style | | - | 5.21.0 |
|
|
3529
|
+
|
|
3530
|
+
|
|
3531
|
+
### Collapse.Panel
|
|
3663
3532
|
|
|
3533
|
+
<!-- prettier-ignore -->
|
|
3534
|
+
<Container type="warning" title="已废弃">
|
|
3535
|
+
版本 >= 5.6.0 时请使用 items 方式配置面板。
|
|
3536
|
+
</Container>
|
|
3664
3537
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3665
3538
|
|--------|--------|--------|--------|--------|
|
|
3666
|
-
|
|
|
3667
|
-
|
|
|
3668
|
-
|
|
|
3539
|
+
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 (icon: 4.24.0) |
|
|
3540
|
+
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3541
|
+
| header | 面板标题 | ReactNode | - | |
|
|
3542
|
+
| key | 对应 activeKey | string \| number | - | |
|
|
3543
|
+
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3669
3544
|
|
|
3670
3545
|
|
|
3671
3546
|
|
|
@@ -3844,8 +3719,706 @@ return <Breadcrumb itemRender={itemRender} items={items} />;
|
|
|
3844
3719
|
|
|
3845
3720
|
|
|
3846
3721
|
|
|
3722
|
+
<DemoTitle title="Card" desc="通用卡片容器">
|
|
3723
|
+
#### API
|
|
3724
|
+
|
|
3725
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3726
|
+
|--------|--------|--------|--------|
|
|
3727
|
+
| info | 副标题 | ReactNode | |
|
|
3728
|
+
|
|
3729
|
+
<AntdApiRef url="https://ant.design/components/card-cn/#api"></AntdApiRef>
|
|
3730
|
+
|
|
3731
|
+
|
|
3732
|
+
## antd API
|
|
3733
|
+
|
|
3734
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3735
|
+
|
|
3736
|
+
|
|
3737
|
+
```jsx
|
|
3738
|
+
<Card title="卡片标题">卡片内容</Card>
|
|
3739
|
+
```
|
|
3740
|
+
|
|
3741
|
+
|
|
3742
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3743
|
+
|--------|--------|--------|--------|--------|
|
|
3744
|
+
| actions | 卡片操作组，位置在卡片底部 | Array | - | |
|
|
3745
|
+
| activeTabKey | 当前激活页签的 key | string | - | |
|
|
3746
|
+
| variant | 形态变体 | outlined | outlined | 5.24.0 |
|
|
3747
|
+
| cover | 卡片封面 | ReactNode | - | |
|
|
3748
|
+
| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | 第一个页签的 key | |
|
|
3749
|
+
| extra | 卡片右上角的操作区域 | ReactNode | - | |
|
|
3750
|
+
| hoverable | 鼠标移过时可浮起 | boolean | false | |
|
|
3751
|
+
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false | |
|
|
3752
|
+
| size | card 的尺寸 | default | default | |
|
|
3753
|
+
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | |
|
|
3754
|
+
| tabList | 页签标题列表 | | - | |
|
|
3755
|
+
| tabProps | | - | - | |
|
|
3756
|
+
| title | 卡片标题 | ReactNode | - | |
|
|
3757
|
+
| type | 卡片类型，可设置为 | string | - | |
|
|
3758
|
+
| classNames | 配置卡片内置模块的 className | | - | 5.14.0 |
|
|
3759
|
+
| styles | 配置卡片内置模块的 style | | - | 5.14.0 |
|
|
3760
|
+
| onTabChange | 页签切换的回调 | (key) => void | - | |
|
|
3761
|
+
|
|
3762
|
+
|
|
3763
|
+
### Card.Grid
|
|
3764
|
+
|
|
3765
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3766
|
+
|--------|--------|--------|--------|--------|
|
|
3767
|
+
| className | 网格容器类名 | string | - | |
|
|
3768
|
+
| hoverable | 鼠标移过时可浮起 | boolean | true | |
|
|
3769
|
+
| style | 定义网格容器类名的样式 | CSSProperties | - | |
|
|
3770
|
+
|
|
3771
|
+
|
|
3772
|
+
### Card.Meta
|
|
3773
|
+
|
|
3774
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3775
|
+
|--------|--------|--------|--------|--------|
|
|
3776
|
+
| avatar | 头像/图标 | ReactNode | - | |
|
|
3777
|
+
| className | 容器类名 | string | - | |
|
|
3778
|
+
| description | 描述内容 | ReactNode | - | |
|
|
3779
|
+
| style | 定义容器类名的样式 | CSSProperties | - | |
|
|
3780
|
+
| title | 标题内容 | ReactNode | - | |
|
|
3781
|
+
|
|
3782
|
+
|
|
3783
|
+
|
|
3784
|
+
|
|
3785
|
+
<DemoTitle title="Avatar" desc="用来代表用户或事物，支持图片、图标或字符展示。">
|
|
3786
|
+
#### API
|
|
3787
|
+
|
|
3788
|
+
<AntdApiRef url="https://ant.design/components/avatar-cn/#api"></AntdApiRef>
|
|
3789
|
+
|
|
3790
|
+
|
|
3791
|
+
## antd API
|
|
3792
|
+
|
|
3793
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3794
|
+
|
|
3795
|
+
### Avatar
|
|
3796
|
+
|
|
3797
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3798
|
+
|--------|--------|--------|--------|--------|
|
|
3799
|
+
| alt | 图像无法显示时的替代文本 | string | - | |
|
|
3800
|
+
| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 |
|
|
3801
|
+
| icon | 设置头像的自定义图标 | ReactNode | - | |
|
|
3802
|
+
| shape | 指定头像的形状 | circle | circle | |
|
|
3803
|
+
| size | 设置头像的大小 | number \| | default | 4.7.0 |
|
|
3804
|
+
| src | 图片类头像的资源地址或者图片元素 | string \| ReactNode | - | ReactNode: 4.8.0 |
|
|
3805
|
+
| srcSet | 设置图片类头像响应式资源地址 | string | - | |
|
|
3806
|
+
| draggable | 图片是否允许拖动 | boolean \| | true | |
|
|
3807
|
+
| crossOrigin | CORS 属性设置 | 'anonymous' | - | 4.17.0 |
|
|
3808
|
+
| onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - | |
|
|
3809
|
+
|
|
3810
|
+
|
|
3811
|
+
Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fallback 行为，优先级为 `icon` > `children`
|
|
3812
|
+
|
|
3813
|
+
### Avatar.Group <Badge>4.5.0+</Badge>
|
|
3814
|
+
|
|
3815
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3816
|
+
|--------|--------|--------|--------|--------|
|
|
3817
|
+
| max | 设置最多显示相关配置， | { count?: number; style?: CSSProperties; popover?: PopoverProps } | - | 5.18.0 |
|
|
3818
|
+
| size | 设置头像的大小 | number \| | default | 4.8.0 |
|
|
3819
|
+
| shape | 设置头像的形状 | circle | circle | 5.8.0 |
|
|
3820
|
+
|
|
3821
|
+
|
|
3822
|
+
|
|
3823
|
+
|
|
3847
3824
|
<DemoTitle title="Audio" desc="音频展示">
|
|
3848
3825
|
#### API
|
|
3849
3826
|
|
|
3850
3827
|
ApiParser解析结果为空
|
|
3851
3828
|
|
|
3829
|
+
|
|
3830
|
+
|
|
3831
|
+
|
|
3832
|
+
|
|
3833
|
+
<DemoTitle title="Anchor" desc="用于跳转到页面指定位置。">
|
|
3834
|
+
#### API
|
|
3835
|
+
|
|
3836
|
+
<AntdApiRef url="https://ant.design/components/anchor-cn/#api"></AntdApiRef>
|
|
3837
|
+
|
|
3838
|
+
|
|
3839
|
+
## antd API
|
|
3840
|
+
|
|
3841
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3842
|
+
|
|
3843
|
+
### Anchor Props
|
|
3844
|
+
|
|
3845
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3846
|
+
|--------|--------|--------|--------|--------|
|
|
3847
|
+
| affix | 固定模式 | boolean \| Omit | true | object: 5.19.0 |
|
|
3848
|
+
| bounds | 锚点区域边界 | number | 5 | |
|
|
3849
|
+
| getContainer | 指定滚动的容器 | () => HTMLElement | () => window | |
|
|
3850
|
+
| getCurrentAnchor | 自定义高亮的锚点 | (activeLink: string) => string | - | |
|
|
3851
|
+
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
|
|
3852
|
+
| showInkInFixed | affix={false} | boolean | false | |
|
|
3853
|
+
| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同， | number | - | |
|
|
3854
|
+
| onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - | |
|
|
3855
|
+
| onClick | click | (e: MouseEvent, link: object) => void | - | |
|
|
3856
|
+
| items | 数据化配置选项内容，支持通过 children 嵌套 | { key, href, title, target, children }[] | - | 5.1.0 |
|
|
3857
|
+
| direction | 设置导航方向 | vertical | vertical | 5.2.0 |
|
|
3858
|
+
| replace | 替换浏览器历史记录中项目的 href 而不是推送它 | boolean | false | 5.7.0 |
|
|
3859
|
+
|
|
3860
|
+
|
|
3861
|
+
### AnchorItem
|
|
3862
|
+
|
|
3863
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3864
|
+
|--------|--------|--------|--------|--------|
|
|
3865
|
+
| key | 唯一标志 | string \| number | - | |
|
|
3866
|
+
| href | 锚点链接 | string | - | |
|
|
3867
|
+
| target | 该属性指定在何处显示链接的资源 | string | - | |
|
|
3868
|
+
| title | 文字内容 | ReactNode | - | |
|
|
3869
|
+
| children | 嵌套的 Anchor Link， | | - | |
|
|
3870
|
+
| replace | 替换浏览器历史记录中的项目 href 而不是推送它 | boolean | false | 5.7.0 |
|
|
3871
|
+
|
|
3872
|
+
|
|
3873
|
+
### Link Props
|
|
3874
|
+
|
|
3875
|
+
建议使用 items 形式。
|
|
3876
|
+
|
|
3877
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3878
|
+
|--------|--------|--------|--------|--------|
|
|
3879
|
+
| href | 锚点链接 | string | - | |
|
|
3880
|
+
| target | 该属性指定在何处显示链接的资源 | string | - | |
|
|
3881
|
+
| title | 文字内容 | ReactNode | - | |
|
|
3882
|
+
|
|
3883
|
+
|
|
3884
|
+
|
|
3885
|
+
|
|
3886
|
+
<DemoTitle title="AlertDialog" desc="一种在界面中弹出的对话框，用来向用户传达重要信息，并引导其进行确认或取消等操作。">
|
|
3887
|
+
#### API
|
|
3888
|
+
|
|
3889
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3890
|
+
|--------|--------|--------|--------|
|
|
3891
|
+
| type | 类型 | 'success' \| 'info' \| 'warning' \| 'error' \| 'confirm' | info |
|
|
3892
|
+
| danger | 确认按钮是否带有danger属性 | boolean | false |
|
|
3893
|
+
| content | 内容 | React.ReactNode | - |
|
|
3894
|
+
| onClose | 关闭时触发的回调函数 | (e: SyntheticEvent) => any | - |
|
|
3895
|
+
|
|
3896
|
+
|
|
3897
|
+
本组件完全兼容 Antd Design 的 Modal 组件，详情可访问[https://ant.design/components/modal-cn/#api](https://ant.design/components/modal-cn/#api)
|
|
3898
|
+
|
|
3899
|
+
|
|
3900
|
+
## antd API
|
|
3901
|
+
|
|
3902
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3903
|
+
|
|
3904
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3905
|
+
|--------|--------|--------|--------|--------|
|
|
3906
|
+
| afterClose | Modal 完全关闭后的回调 | function | - | |
|
|
3907
|
+
| classNames | 配置弹窗内置模块的 className | | - | |
|
|
3908
|
+
| styles | 配置弹窗内置模块的 style | | - | 5.10.0 |
|
|
3909
|
+
| cancelButtonProps | cancel 按钮 props | | - | |
|
|
3910
|
+
| cancelText | 取消按钮文字 | ReactNode | 取消 | |
|
|
3911
|
+
| centered | 垂直居中展示 Modal | boolean | false | |
|
|
3912
|
+
| closable | 是否显示右上角的关闭按钮 | boolean \| { closeIcon?: React.ReactNode; disabled?: boolean; } | true | |
|
|
3913
|
+
| closeIcon | 自定义关闭图标。5.7.0：设置为 | ReactNode | | |
|
|
3914
|
+
| confirmLoading | 确定按钮 loading | boolean | false | |
|
|
3915
|
+
| destroyOnHidden | 关闭时销毁 Modal 里的子元素 | boolean | false | 5.25.0 |
|
|
3916
|
+
| focusTriggerAfterClose | 对话框关闭后是否需要聚焦触发元素 | boolean | true | 4.9.0 |
|
|
3917
|
+
| footer | 底部内容，当不需要默认底部按钮时，可以设为 | ReactNode \| (originNode: ReactNode, extra: { OkBtn: React.FC, CancelBtn: React.FC }) => ReactNode | (确定取消按钮) | renderFunction: 5.9.0 |
|
|
3918
|
+
| forceRender | 强制渲染 Modal | boolean | false | |
|
|
3919
|
+
| getContainer | 指定 Modal 挂载的节点，但依旧为全屏展示， | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body | |
|
|
3920
|
+
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
|
|
3921
|
+
| mask | 是否展示遮罩 | boolean | true | |
|
|
3922
|
+
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
|
|
3923
|
+
| modalRender | 自定义渲染对话框 | (node: ReactNode) => ReactNode | - | 4.7.0 |
|
|
3924
|
+
| okButtonProps | ok 按钮 props | | - | |
|
|
3925
|
+
| okText | 确认按钮文字 | ReactNode | 确定 | |
|
|
3926
|
+
| okType | 确认按钮类型 | string | primary | |
|
|
3927
|
+
| style | 可用于设置浮层的样式，调整浮层位置等 | CSSProperties | - | |
|
|
3928
|
+
| loading | 显示骨架屏 | boolean | | 5.18.0 |
|
|
3929
|
+
| title | 标题 | ReactNode | - | |
|
|
3930
|
+
| open | 对话框是否可见 | boolean | - | |
|
|
3931
|
+
| width | 宽度 | string \| number \| | 520 | Breakpoint: 5.23.0 |
|
|
3932
|
+
| wrapClassName | 对话框外层容器的类名 | string | - | |
|
|
3933
|
+
| zIndex | 设置 Modal 的 | number | 1000 | |
|
|
3934
|
+
| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | - | |
|
|
3935
|
+
| onOk | 点击确定回调 | function(e) | - | |
|
|
3936
|
+
| afterOpenChange | 打开和关闭 Modal 时动画结束后的回调 | (open: boolean) => void | - | 5.4.0 |
|
|
3937
|
+
|
|
3938
|
+
|
|
3939
|
+
#### 注意
|
|
3940
|
+
|
|
3941
|
+
|
|
3942
|
+
- `<Modal />` 默认关闭后状态不会自动清空，如果希望每次打开都是新内容，请设置 `destroyOnHidden`。
|
|
3943
|
+
- `<Modal />` 和 Form 一起配合使用时，设置 `destroyOnHidden` 也不会在 Modal 关闭时销毁表单字段数据，需要设置 `<Form preserve={false} />`。
|
|
3944
|
+
- `Modal.method()` RTL 模式仅支持 hooks 用法。
|
|
3945
|
+
|
|
3946
|
+
### Modal.method()
|
|
3947
|
+
|
|
3948
|
+
包括：
|
|
3949
|
+
|
|
3950
|
+
|
|
3951
|
+
- `Modal.info`
|
|
3952
|
+
- `Modal.success`
|
|
3953
|
+
- `Modal.error`
|
|
3954
|
+
- `Modal.warning`
|
|
3955
|
+
- `Modal.confirm`
|
|
3956
|
+
|
|
3957
|
+
以上均为一个函数，参数为 object，具体属性如下：
|
|
3958
|
+
|
|
3959
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3960
|
+
|--------|--------|--------|--------|--------|
|
|
3961
|
+
| afterClose | Modal 完全关闭后的回调 | function | - | 4.9.0 |
|
|
3962
|
+
| autoFocusButton | 指定自动获得焦点的按钮 | null \| | ok | |
|
|
3963
|
+
| cancelButtonProps | cancel 按钮 props | | - | |
|
|
3964
|
+
| cancelText | 设置 Modal.confirm 取消按钮文字 | string | 取消 | |
|
|
3965
|
+
| centered | 垂直居中展示 Modal | boolean | false | |
|
|
3966
|
+
| className | 容器类名 | string | - | |
|
|
3967
|
+
| closable | 是否显示右上角的关闭按钮 | boolean | false | 4.9.0 |
|
|
3968
|
+
| closeIcon | 自定义关闭图标 | ReactNode | undefined | 4.9.0 |
|
|
3969
|
+
| content | 内容 | ReactNode | - | |
|
|
3970
|
+
| footer | 底部内容，当不需要默认底部按钮时，可以设为 | ReactNode \| (originNode: ReactNode, extra: { OkBtn: React.FC, CancelBtn: React.FC }) => ReactNode | - | renderFunction: 5.9.0 |
|
|
3971
|
+
| getContainer | 指定 Modal 挂载的 HTML 节点，false 为挂载在当前 dom | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body | |
|
|
3972
|
+
| icon | 自定义图标 | ReactNode | | |
|
|
3973
|
+
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
|
|
3974
|
+
| mask | 是否展示遮罩 | boolean | true | |
|
|
3975
|
+
| maskClosable | 点击蒙层是否允许关闭 | boolean | false | |
|
|
3976
|
+
| okButtonProps | ok 按钮 props | | - | |
|
|
3977
|
+
| okText | 确认按钮文字 | string | 确定 | |
|
|
3978
|
+
| okType | 确认按钮类型 | string | primary | |
|
|
3979
|
+
| style | 可用于设置浮层的样式，调整浮层位置等 | CSSProperties | - | |
|
|
3980
|
+
| title | 标题 | ReactNode | - | |
|
|
3981
|
+
| width | 宽度 | string \| number | 416 | |
|
|
3982
|
+
| wrapClassName | 对话框外层容器的类名 | string | - | 4.18.0 |
|
|
3983
|
+
| zIndex | 设置 Modal 的 | number | 1000 | |
|
|
3984
|
+
| onCancel | 点击取消回调，参数为关闭函数，若返回 promise 时 resolve 为正常关闭, reject 为不关闭 | function(close) | - | |
|
|
3985
|
+
| onOk | 点击确定回调，参数为关闭函数，若返回 promise 时 resolve 为正常关闭, reject 为不关闭 | function(close) | - | |
|
|
3986
|
+
|
|
3987
|
+
|
|
3988
|
+
以上函数调用后，会返回一个引用，可以通过该引用更新和关闭弹窗。
|
|
3989
|
+
|
|
3990
|
+
|
|
3991
|
+
```jsx
|
|
3992
|
+
const modal = Modal.info();
|
|
3993
|
+
|
|
3994
|
+
modal.update({
|
|
3995
|
+
title: '修改的标题',
|
|
3996
|
+
content: '修改的内容',
|
|
3997
|
+
});
|
|
3998
|
+
|
|
3999
|
+
// 在 4.8.0 或更高版本中，可以通过传入函数的方式更新弹窗
|
|
4000
|
+
modal.update((prevConfig) => ({
|
|
4001
|
+
...prevConfig,
|
|
4002
|
+
title: `${prevConfig.title}（新）`,
|
|
4003
|
+
}));
|
|
4004
|
+
|
|
4005
|
+
modal.destroy();
|
|
4006
|
+
```
|
|
4007
|
+
|
|
4008
|
+
|
|
4009
|
+
|
|
4010
|
+
- `Modal.destroyAll`
|
|
4011
|
+
|
|
4012
|
+
使用 `Modal.destroyAll()` 可以销毁弹出的确认窗（即上述的 `Modal.info`、`Modal.success`、`Modal.error`、`Modal.warning`、`Modal.confirm`）。通常用于路由监听当中，处理路由前进、后退不能销毁确认对话框的问题，而不用各处去使用实例的返回值进行关闭（`modal.destroy()` 适用于主动关闭，而不是路由这样被动关闭）
|
|
4013
|
+
|
|
4014
|
+
|
|
4015
|
+
```jsx
|
|
4016
|
+
import { browserHistory } from 'react-router';
|
|
4017
|
+
|
|
4018
|
+
// router change
|
|
4019
|
+
browserHistory.listen(() => {
|
|
4020
|
+
Modal.destroyAll();
|
|
4021
|
+
});
|
|
4022
|
+
```
|
|
4023
|
+
|
|
4024
|
+
|
|
4025
|
+
### Modal.useModal()
|
|
4026
|
+
|
|
4027
|
+
当你需要使用 Context 时，可以通过 `Modal.useModal` 创建一个 `contextHolder` 插入子节点中。通过 hooks 创建的临时 Modal 将会得到 `contextHolder` 所在位置的所有上下文。创建的 `modal` 对象拥有与 [`Modal.method`](#modalmethod) 相同的创建通知方法。
|
|
4028
|
+
|
|
4029
|
+
|
|
4030
|
+
```jsx
|
|
4031
|
+
const [modal, contextHolder] = Modal.useModal();
|
|
4032
|
+
|
|
4033
|
+
React.useEffect(() => {
|
|
4034
|
+
modal.confirm({
|
|
4035
|
+
// ...
|
|
4036
|
+
});
|
|
4037
|
+
}, []);
|
|
4038
|
+
|
|
4039
|
+
return <div>{contextHolder}</div>;
|
|
4040
|
+
```
|
|
4041
|
+
|
|
4042
|
+
|
|
4043
|
+
`modal.confirm` 返回方法：
|
|
4044
|
+
|
|
4045
|
+
|
|
4046
|
+
- `destroy`：销毁当前窗口
|
|
4047
|
+
- `update`：更新当前窗口
|
|
4048
|
+
- `then`：Promise 链式调用，支持 `await` 操作。该方法为 Hooks 仅有
|
|
4049
|
+
|
|
4050
|
+
|
|
4051
|
+
```tsx
|
|
4052
|
+
//点击 `onOk` 时返回 `true`，点击 `onCancel` 时返回 `false`
|
|
4053
|
+
const confirmed = await modal.confirm({ ... });
|
|
4054
|
+
```
|
|
4055
|
+
|
|
4056
|
+
|
|
4057
|
+
|
|
4058
|
+
|
|
4059
|
+
<DemoTitle title="Alert" desc="向用户突出显示的重要提示信息。">
|
|
4060
|
+
#### API
|
|
4061
|
+
|
|
4062
|
+
<AntdApiRef url="https://ant.design/components/alert-cn/#api"></AntdApiRef>
|
|
4063
|
+
|
|
4064
|
+
|
|
4065
|
+
## antd API
|
|
4066
|
+
|
|
4067
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
4068
|
+
|
|
4069
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
4070
|
+
|--------|--------|--------|--------|--------|
|
|
4071
|
+
| action | 自定义操作项 | ReactNode | - | 4.9.0 |
|
|
4072
|
+
| afterClose | 关闭动画结束后触发的回调函数 | () => void | - | |
|
|
4073
|
+
| banner | 是否用作顶部公告 | boolean | false | |
|
|
4074
|
+
| closable | 可关闭配置，>=5.15.0: 支持 | boolean \| ({ closeIcon?: React.ReactNode } & React.AriaAttributes) | false | |
|
|
4075
|
+
| description | 警告提示的辅助性文字介绍 | ReactNode | - | |
|
|
4076
|
+
| icon | 自定义图标， | ReactNode | - | |
|
|
4077
|
+
| message | 警告提示内容 | ReactNode | - | |
|
|
4078
|
+
| showIcon | 是否显示辅助图标 | boolean | false， | |
|
|
4079
|
+
| type | 指定警告提示的样式，有四种选择 | string | info | |
|
|
4080
|
+
| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | - | |
|
|
4081
|
+
|
|
4082
|
+
|
|
4083
|
+
### Alert.ErrorBoundary
|
|
4084
|
+
|
|
4085
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
4086
|
+
|--------|--------|--------|--------|--------|
|
|
4087
|
+
| description | 自定义错误内容，如果未指定会展示报错堆栈 | ReactNode | {{ error stack }} | |
|
|
4088
|
+
| message | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }} | |
|
|
4089
|
+
|
|
4090
|
+
|
|
4091
|
+
|
|
4092
|
+
|
|
4093
|
+
# 使用
|
|
4094
|
+
|
|
4095
|
+
|
|
4096
|
+
|
|
4097
|
+
```tsx
|
|
4098
|
+
import { SparkLoadingLine } from '@agentscope-ai/icons';
|
|
4099
|
+
|
|
4100
|
+
export default () => {
|
|
4101
|
+
return (
|
|
4102
|
+
<SparkLoadingLine
|
|
4103
|
+
className="your-class-name"
|
|
4104
|
+
style={{ color: 'var(--sps-color-primary)' }}
|
|
4105
|
+
spin
|
|
4106
|
+
size={48}
|
|
4107
|
+
/>
|
|
4108
|
+
);
|
|
4109
|
+
};
|
|
4110
|
+
|
|
4111
|
+
```
|
|
4112
|
+
|
|
4113
|
+
基本用法
|
|
4114
|
+
|
|
4115
|
+
访问 [Icon Library](https://sparkdesign.agentscope.io/#/resources/icons) 查看全部 Icon
|
|
4116
|
+
|
|
4117
|
+
|
|
4118
|
+
|
|
4119
|
+
# Icon Library
|
|
4120
|
+
|
|
4121
|
+
|
|
4122
|
+
|
|
4123
|
+
```tsx
|
|
4124
|
+
import React, { useEffect, useMemo, useState } from 'react';
|
|
4125
|
+
import * as SparkIcons from '@agentscope-ai/icons';
|
|
4126
|
+
import { Input, Radio, message, copy } from '@agentscope-ai/design';
|
|
4127
|
+
import { createStyles } from 'antd-style';
|
|
4128
|
+
import { useLocale } from 'dumi';
|
|
4129
|
+
import { SparkSearchLine } from '@agentscope-ai/icons';
|
|
4130
|
+
import { categorizeIcon, ICON_CATEGORIES } from './iconCategories';
|
|
4131
|
+
import $i18n from '@/i18n';
|
|
4132
|
+
|
|
4133
|
+
/**
|
|
4134
|
+
* Icons Library
|
|
4135
|
+
* - 自动枚举并展示 @agentscope-ai/icons 的全部导出图标
|
|
4136
|
+
* - 支持搜索、点击复制
|
|
4137
|
+
*/
|
|
4138
|
+
|
|
4139
|
+
interface IconItem {
|
|
4140
|
+
/** 图标导出名称 */
|
|
4141
|
+
name: string;
|
|
4142
|
+
/** 图标 React 组件 */
|
|
4143
|
+
Icon: React.ComponentType<any>;
|
|
4144
|
+
/** 图标分类 */
|
|
4145
|
+
category: string;
|
|
4146
|
+
}
|
|
4147
|
+
|
|
4148
|
+
type CopyMode = 'name' | 'import' | 'jsx';
|
|
4149
|
+
|
|
4150
|
+
const useStyles = createStyles(() => ({
|
|
4151
|
+
container: {
|
|
4152
|
+
position: 'relative',
|
|
4153
|
+
padding: 16,
|
|
4154
|
+
paddingTop: 72,
|
|
4155
|
+
},
|
|
4156
|
+
toolbar: {
|
|
4157
|
+
position: 'fixed',
|
|
4158
|
+
width: '100%',
|
|
4159
|
+
padding: '16px',
|
|
4160
|
+
top: 0,
|
|
4161
|
+
left: 0,
|
|
4162
|
+
display: 'flex',
|
|
4163
|
+
gap: 12,
|
|
4164
|
+
alignItems: 'center',
|
|
4165
|
+
justifyContent: 'space-between',
|
|
4166
|
+
flexWrap: 'wrap',
|
|
4167
|
+
background: 'var(--sps-color-bg-base)',
|
|
4168
|
+
borderBottom: '1px solid var(--sps-color-border-secondary)',
|
|
4169
|
+
marginBottom: '16px',
|
|
4170
|
+
},
|
|
4171
|
+
toolbarLeft: {
|
|
4172
|
+
display: 'flex',
|
|
4173
|
+
gap: 12,
|
|
4174
|
+
alignItems: 'center',
|
|
4175
|
+
},
|
|
4176
|
+
toolbarRight: {
|
|
4177
|
+
display: 'flex',
|
|
4178
|
+
gap: 12,
|
|
4179
|
+
alignItems: 'center',
|
|
4180
|
+
justifyContent: 'flex-end',
|
|
4181
|
+
flexWrap: 'wrap',
|
|
4182
|
+
},
|
|
4183
|
+
search: {
|
|
4184
|
+
maxWidth: 300,
|
|
4185
|
+
},
|
|
4186
|
+
count: {
|
|
4187
|
+
color: 'var(--sps-color-text-tertiary)',
|
|
4188
|
+
fontSize: 12,
|
|
4189
|
+
},
|
|
4190
|
+
groups: {
|
|
4191
|
+
marginTop: 16,
|
|
4192
|
+
display: 'flex',
|
|
4193
|
+
flexDirection: 'column',
|
|
4194
|
+
gap: 24,
|
|
4195
|
+
},
|
|
4196
|
+
groupTitle: {
|
|
4197
|
+
fontSize: 14,
|
|
4198
|
+
fontWeight: 600,
|
|
4199
|
+
color: 'var(--sps-color-text-base)',
|
|
4200
|
+
marginBottom: 12,
|
|
4201
|
+
},
|
|
4202
|
+
groupCount: {
|
|
4203
|
+
marginLeft: 8,
|
|
4204
|
+
fontSize: 12,
|
|
4205
|
+
fontWeight: 400,
|
|
4206
|
+
color: 'var(--sps-color-text-tertiary)',
|
|
4207
|
+
},
|
|
4208
|
+
grid: {
|
|
4209
|
+
display: 'grid',
|
|
4210
|
+
gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
|
|
4211
|
+
gap: 12,
|
|
4212
|
+
},
|
|
4213
|
+
card: {
|
|
4214
|
+
padding: 12,
|
|
4215
|
+
borderRadius: 8,
|
|
4216
|
+
cursor: 'pointer',
|
|
4217
|
+
border: '1px solid var(--sps-color-border-secondary)',
|
|
4218
|
+
background: 'var(--sps-color-bg-base)',
|
|
4219
|
+
},
|
|
4220
|
+
iconWrap: {
|
|
4221
|
+
width: 48,
|
|
4222
|
+
height: 48,
|
|
4223
|
+
display: 'flex',
|
|
4224
|
+
alignItems: 'center',
|
|
4225
|
+
justifyContent: 'center',
|
|
4226
|
+
},
|
|
4227
|
+
name: {
|
|
4228
|
+
marginTop: 8,
|
|
4229
|
+
fontSize: 12,
|
|
4230
|
+
lineHeight: '16px',
|
|
4231
|
+
color: 'var(--sps-color-text-tertiary)',
|
|
4232
|
+
overflow: 'hidden',
|
|
4233
|
+
textOverflow: 'ellipsis',
|
|
4234
|
+
whiteSpace: 'nowrap',
|
|
4235
|
+
width: '100%',
|
|
4236
|
+
fontFamily:
|
|
4237
|
+
'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
|
|
4238
|
+
},
|
|
4239
|
+
}));
|
|
4240
|
+
|
|
4241
|
+
export default function IconLibrary() {
|
|
4242
|
+
const { styles } = useStyles();
|
|
4243
|
+
const locale = useLocale();
|
|
4244
|
+
const [keyword, setKeyword] = useState<string>('');
|
|
4245
|
+
const [copyMode, setCopyMode] = useState<CopyMode>('name');
|
|
4246
|
+
|
|
4247
|
+
useEffect(() => {
|
|
4248
|
+
// 同步 dumi 站点语言到 $i18n（$i18n 识别 zh-cn / en）
|
|
4249
|
+
$i18n.updateLocale(locale.id === 'zh-CN' ? 'zh-cn' : 'en');
|
|
4250
|
+
}, [locale.id]);
|
|
4251
|
+
|
|
4252
|
+
const excludedIcons = useMemo(
|
|
4253
|
+
() =>
|
|
4254
|
+
new Set([
|
|
4255
|
+
'SparkDelete01LineCopy',
|
|
4256
|
+
'SparkA2d2dFill',
|
|
4257
|
+
'SparkA3d3dFill',
|
|
4258
|
+
'SparkBoldLine1',
|
|
4259
|
+
'SparkShanguangdengweikaiqiFlashlightOffLine',
|
|
4260
|
+
'SparkZhinengshengchengAiGenerateLine',
|
|
4261
|
+
'SparkQqkongjianQzoneFill',
|
|
4262
|
+
'SparkAccountManagementFill',
|
|
4263
|
+
]),
|
|
4264
|
+
[],
|
|
4265
|
+
);
|
|
4266
|
+
|
|
4267
|
+
const allIcons = useMemo<IconItem[]>(() => {
|
|
4268
|
+
return Object.entries(SparkIcons)
|
|
4269
|
+
.filter(([name, Icon]) => {
|
|
4270
|
+
if (!name.startsWith('Spark')) return false;
|
|
4271
|
+
if (excludedIcons.has(name)) return false;
|
|
4272
|
+
return typeof Icon === 'function';
|
|
4273
|
+
})
|
|
4274
|
+
.map(([name, Icon]) => ({
|
|
4275
|
+
name,
|
|
4276
|
+
Icon: Icon as React.ComponentType<any>,
|
|
4277
|
+
category: categorizeIcon(name),
|
|
4278
|
+
}))
|
|
4279
|
+
.sort((a, b) => a.name.localeCompare(b.name));
|
|
4280
|
+
}, [excludedIcons]);
|
|
4281
|
+
|
|
4282
|
+
const filteredIcons = useMemo<IconItem[]>(() => {
|
|
4283
|
+
const q = keyword.trim().toLowerCase();
|
|
4284
|
+
if (!q) return allIcons;
|
|
4285
|
+
return allIcons.filter((item) => item.name.toLowerCase().includes(q));
|
|
4286
|
+
}, [allIcons, keyword]);
|
|
4287
|
+
|
|
4288
|
+
const groupedIcons = useMemo<Record<string, IconItem[]>>(() => {
|
|
4289
|
+
return filteredIcons.reduce<Record<string, IconItem[]>>((acc, icon) => {
|
|
4290
|
+
const key = icon.category;
|
|
4291
|
+
if (!acc[key]) acc[key] = [];
|
|
4292
|
+
acc[key].push(icon);
|
|
4293
|
+
return acc;
|
|
4294
|
+
}, {});
|
|
4295
|
+
}, [filteredIcons]);
|
|
4296
|
+
|
|
4297
|
+
const orderedCategories = useMemo<string[]>(() => {
|
|
4298
|
+
const configOrder = Object.keys(ICON_CATEGORIES);
|
|
4299
|
+
const existing = new Set(Object.keys(groupedIcons));
|
|
4300
|
+
const ordered = configOrder.filter((k) => existing.has(k));
|
|
4301
|
+
const rest = Object.keys(groupedIcons)
|
|
4302
|
+
.filter((k) => !configOrder.includes(k))
|
|
4303
|
+
.sort((a, b) => a.localeCompare(b));
|
|
4304
|
+
return [...ordered, ...rest];
|
|
4305
|
+
}, [groupedIcons]);
|
|
4306
|
+
|
|
4307
|
+
const handleCopy = (item: IconItem) => {
|
|
4308
|
+
let text = item.name;
|
|
4309
|
+
if (copyMode === 'import') {
|
|
4310
|
+
text = `import { ${item.name} } from '@agentscope-ai/icons';`;
|
|
4311
|
+
}
|
|
4312
|
+
if (copyMode === 'jsx') {
|
|
4313
|
+
text = `<${item.name} style={{ fontSize: 24 }} />`;
|
|
4314
|
+
}
|
|
4315
|
+
|
|
4316
|
+
copy(text);
|
|
4317
|
+
message.success(
|
|
4318
|
+
$i18n.get({
|
|
4319
|
+
id: 'docs.icons.IconLibrary.CopySuccess',
|
|
4320
|
+
dm: '已复制',
|
|
4321
|
+
}),
|
|
4322
|
+
);
|
|
4323
|
+
};
|
|
4324
|
+
|
|
4325
|
+
return (
|
|
4326
|
+
<div className={styles.container}>
|
|
4327
|
+
<div className={styles.toolbar}>
|
|
4328
|
+
<div className={styles.toolbarLeft}>
|
|
4329
|
+
<Input
|
|
4330
|
+
placeholder={$i18n.get({
|
|
4331
|
+
id: 'docs.icons.IconLibrary.SearchPlaceholder',
|
|
4332
|
+
dm: '搜索图标（按导出名）',
|
|
4333
|
+
})}
|
|
4334
|
+
value={keyword}
|
|
4335
|
+
onChange={(e) => setKeyword((e?.target as any)?.value || '')}
|
|
4336
|
+
className={styles.search}
|
|
4337
|
+
prefix={<SparkSearchLine style={{ fontSize: 16 }} />}
|
|
4338
|
+
allowClear
|
|
4339
|
+
/>
|
|
4340
|
+
</div>
|
|
4341
|
+
|
|
4342
|
+
<div className={styles.toolbarRight}>
|
|
4343
|
+
<div className={styles.count}>
|
|
4344
|
+
{$i18n.get(
|
|
4345
|
+
{
|
|
4346
|
+
id: 'docs.icons.IconLibrary.TotalCount',
|
|
4347
|
+
dm: '共 {count} 个',
|
|
4348
|
+
},
|
|
4349
|
+
{ count: String(filteredIcons.length) },
|
|
4350
|
+
)}
|
|
4351
|
+
</div>
|
|
4352
|
+
<Radio.Group
|
|
4353
|
+
value={copyMode}
|
|
4354
|
+
onChange={(e) => setCopyMode(e.target.value)}
|
|
4355
|
+
optionType="button"
|
|
4356
|
+
buttonStyle="solid"
|
|
4357
|
+
options={[
|
|
4358
|
+
{
|
|
4359
|
+
label: $i18n.get({
|
|
4360
|
+
id: 'docs.icons.IconLibrary.CopyName',
|
|
4361
|
+
dm: '复制名称',
|
|
4362
|
+
}),
|
|
4363
|
+
value: 'name',
|
|
4364
|
+
},
|
|
4365
|
+
{
|
|
4366
|
+
label: $i18n.get({
|
|
4367
|
+
id: 'docs.icons.IconLibrary.CopyImport',
|
|
4368
|
+
dm: '复制 import',
|
|
4369
|
+
}),
|
|
4370
|
+
value: 'import',
|
|
4371
|
+
},
|
|
4372
|
+
{
|
|
4373
|
+
label: $i18n.get({
|
|
4374
|
+
id: 'docs.icons.IconLibrary.CopyJSX',
|
|
4375
|
+
dm: '复制 JSX',
|
|
4376
|
+
}),
|
|
4377
|
+
value: 'jsx',
|
|
4378
|
+
},
|
|
4379
|
+
]}
|
|
4380
|
+
/>
|
|
4381
|
+
</div>
|
|
4382
|
+
</div>
|
|
4383
|
+
|
|
4384
|
+
<div className={styles.groups}>
|
|
4385
|
+
{orderedCategories.map((category) => {
|
|
4386
|
+
const list = groupedIcons[category] || [];
|
|
4387
|
+
return (
|
|
4388
|
+
<div key={category}>
|
|
4389
|
+
<div className={styles.groupTitle}>
|
|
4390
|
+
{category}
|
|
4391
|
+
<span className={styles.groupCount}>({list.length})</span>
|
|
4392
|
+
</div>
|
|
4393
|
+
|
|
4394
|
+
<div className={styles.grid}>
|
|
4395
|
+
{list.map((item) => {
|
|
4396
|
+
const Icon = item.Icon;
|
|
4397
|
+
return (
|
|
4398
|
+
<div
|
|
4399
|
+
key={item.name}
|
|
4400
|
+
className={styles.card}
|
|
4401
|
+
onClick={() => handleCopy(item)}
|
|
4402
|
+
>
|
|
4403
|
+
<div className={styles.iconWrap}>
|
|
4404
|
+
<Icon style={{ fontSize: 24 }} />
|
|
4405
|
+
</div>
|
|
4406
|
+
<div className={styles.name} title={item.name}>
|
|
4407
|
+
{item.name}
|
|
4408
|
+
</div>
|
|
4409
|
+
</div>
|
|
4410
|
+
);
|
|
4411
|
+
})}
|
|
4412
|
+
</div>
|
|
4413
|
+
</div>
|
|
4414
|
+
);
|
|
4415
|
+
})}
|
|
4416
|
+
</div>
|
|
4417
|
+
</div>
|
|
4418
|
+
);
|
|
4419
|
+
}
|
|
4420
|
+
|
|
4421
|
+
|
|
4422
|
+
```
|
|
4423
|
+
|
|
4424
|
+
查看全部图标
|