@agentscope-ai/design 1.0.26-beta.1767835933900 → 1.0.26-beta.1767840384443
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/antd/styles/button.style.js +3 -1
- package/lib/components/commonComponents/Button/demo/demo1.js +4 -0
- package/lib/components/commonComponents/CodeBlock/index.d.ts +2 -2
- package/lib/components/commonComponents/CodeBlock/index.js +1 -1
- package/lib/components/commonComponents/Tabs/index.js +40 -22
- package/llms/all.llms.txt +1020 -1019
- package/llms/components/commonComponents/CodeBlock/index.zh-CN.llms.txt +2 -2
- package/llms/components/commonComponents/Empty/index.zh-CN.llms.txt +1 -0
- package/llms/docs/guide/musicLofiGenerator.zh-CN.llms.txt +12 -0
- package/llms/index.llms.txt +20 -20
- package/package.json +1 -1
package/llms/all.llms.txt
CHANGED
|
@@ -1,18 +1,5 @@
|
|
|
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
|
-
|
|
16
3
|
<DemoTitle title="Upload" desc="文件选择上传和拖拽上传控件。">
|
|
17
4
|
#### API
|
|
18
5
|
|
|
@@ -109,115 +96,50 @@
|
|
|
109
96
|
|
|
110
97
|
|
|
111
98
|
|
|
112
|
-
<DemoTitle title="
|
|
99
|
+
<DemoTitle title="Video" desc="视频展示">
|
|
113
100
|
#### API
|
|
114
101
|
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
102
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
103
|
+
|--------|--------|--------|--------|
|
|
104
|
+
| mouseEnterAutoPlay | 鼠标进入时是否自动播放 | boolean | false |
|
|
105
|
+
| children | video内部设置了按钮在暗色背景下的样式，如果有一些操作按钮想继承这个样式可以在这里传入 | React.ReactNode | |
|
|
121
106
|
|
|
122
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
123
107
|
|
|
124
108
|
|
|
125
|
-
```jsx
|
|
126
|
-
import dayjs from 'dayjs';
|
|
127
|
-
import customParseFormat from 'dayjs/plugin/customParseFormat'
|
|
128
109
|
|
|
129
|
-
dayjs.extend(customParseFormat)
|
|
130
|
-
<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
|
|
131
|
-
```
|
|
132
110
|
|
|
133
111
|
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
|
|
137
|
-
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
138
|
-
| cellRender | 自定义单元格的内容 | (current: number, info: { originNode: React.ReactNode, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
|
|
139
|
-
| changeOnScroll | 在滚动时改变选择值 | boolean | false | 5.14.0 |
|
|
140
|
-
| className | 选择器类名 | string | - | |
|
|
141
|
-
| defaultValue | 默认时间 | | - | |
|
|
142
|
-
| disabled | 禁用全部操作 | boolean | false | |
|
|
143
|
-
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
144
|
-
| format | 展示的时间格式 | string | HH:mm:ss | |
|
|
145
|
-
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | |
|
|
146
|
-
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | |
|
|
147
|
-
| hourStep | 小时选项间隔 | number | 1 | |
|
|
148
|
-
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
|
|
149
|
-
| minuteStep | 分钟选项间隔 | number | 1 | |
|
|
150
|
-
| needConfirm | 是否需要确认按钮，为 | boolean | - | 5.14.0 |
|
|
151
|
-
| open | 面板是否打开 | boolean | false | |
|
|
152
|
-
| placeholder | 没有值的时候显示的内容 | string \| [string, string] | 请选择时间 | |
|
|
153
|
-
| placement | 选择框弹出的位置 | bottomLeft | bottomLeft | |
|
|
154
|
-
| popupClassName | 弹出层类名 | string | - | |
|
|
155
|
-
| popupStyle | 弹出层样式对象 | object | - | |
|
|
156
|
-
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
|
|
157
|
-
| renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - | |
|
|
158
|
-
| secondStep | 秒选项间隔 | number | 1 | |
|
|
159
|
-
| showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
|
|
160
|
-
| size | 输入框大小， | large | - | |
|
|
161
|
-
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
162
|
-
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
|
163
|
-
| use12Hours | 使用 12 小时制，为 true 时 | boolean | false | |
|
|
164
|
-
| value | 当前时间 | | - | |
|
|
165
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
166
|
-
| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - | |
|
|
167
|
-
| onChange | 时间发生变化的回调 | function(time: dayjs, timeString: string): void | - | |
|
|
168
|
-
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - | |
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
#### DisabledTime
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
```typescript
|
|
175
|
-
type DisabledTime = (now: Dayjs) => {
|
|
176
|
-
disabledHours?: () => number[];
|
|
177
|
-
disabledMinutes?: (selectedHour: number) => number[];
|
|
178
|
-
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
179
|
-
disabledMilliseconds?: (
|
|
180
|
-
selectedHour: number,
|
|
181
|
-
selectedMinute: number,
|
|
182
|
-
selectedSecond: number,
|
|
183
|
-
) => number[];
|
|
184
|
-
};
|
|
185
|
-
```
|
|
186
|
-
|
|
112
|
+
<DemoTitle title="Tag" desc="进行标记和分类的小标签">
|
|
113
|
+
#### API
|
|
187
114
|
|
|
188
|
-
|
|
115
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
116
|
+
|--------|--------|--------|--------|
|
|
117
|
+
| size | 尺寸 | 'small' \| 'middle' | 'middle' |
|
|
118
|
+
| color | 标签色 | SparkTagColors \| string | 'purple' |
|
|
189
119
|
|
|
190
|
-
|
|
120
|
+
<AntdApiRef url="https://ant.design/components/tag-cn/#api"></AntdApiRef>
|
|
191
121
|
|
|
192
|
-
| 名称 | 描述 | 版本 |
|
|
193
|
-
|--------|--------|--------|
|
|
194
|
-
| blur() | 移除焦点 | |
|
|
195
|
-
| focus() | 获取焦点 | |
|
|
196
122
|
|
|
123
|
+
## antd API
|
|
197
124
|
|
|
198
|
-
|
|
125
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
199
126
|
|
|
200
|
-
|
|
127
|
+
### Tag
|
|
201
128
|
|
|
202
129
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
203
130
|
|--------|--------|--------|--------|--------|
|
|
204
|
-
|
|
|
205
|
-
|
|
|
131
|
+
| closeIcon | 自定义关闭按钮。5.7.0：设置为 | ReactNode | false | 4.4.0 |
|
|
132
|
+
| icon | 设置图标 | ReactNode | - | |
|
|
133
|
+
| bordered | 是否有边框 | boolean | true | 5.4.0 |
|
|
134
|
+
| onClose | 关闭时的回调（可通过 | (e: React.MouseEvent) => void | - | |
|
|
206
135
|
|
|
207
136
|
|
|
208
|
-
###
|
|
209
|
-
|
|
137
|
+
### Tag.CheckableTag
|
|
210
138
|
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
) => {
|
|
216
|
-
disabledHours?: () => number[];
|
|
217
|
-
disabledMinutes?: (selectedHour: number) => number[];
|
|
218
|
-
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
219
|
-
};
|
|
220
|
-
```
|
|
139
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
140
|
+
|--------|--------|--------|--------|
|
|
141
|
+
| checked | 设置标签的选中状态 | boolean | false |
|
|
142
|
+
| onChange | 点击标签时触发的回调 | (checked) => void | - |
|
|
221
143
|
|
|
222
144
|
|
|
223
145
|
|
|
@@ -269,152 +191,6 @@ type RangeDisabledTime = (
|
|
|
269
191
|
|
|
270
192
|
|
|
271
193
|
|
|
272
|
-
<DemoTitle title="Tag" desc="进行标记和分类的小标签">
|
|
273
|
-
#### API
|
|
274
|
-
|
|
275
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
276
|
-
|--------|--------|--------|--------|
|
|
277
|
-
| size | 尺寸 | 'small' \| 'middle' | 'middle' |
|
|
278
|
-
| color | 标签色 | SparkTagColors \| string | 'purple' |
|
|
279
|
-
|
|
280
|
-
<AntdApiRef url="https://ant.design/components/tag-cn/#api"></AntdApiRef>
|
|
281
|
-
|
|
282
|
-
|
|
283
|
-
## antd API
|
|
284
|
-
|
|
285
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
286
|
-
|
|
287
|
-
### Tag
|
|
288
|
-
|
|
289
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
290
|
-
|--------|--------|--------|--------|--------|
|
|
291
|
-
| closeIcon | 自定义关闭按钮。5.7.0：设置为 | ReactNode | false | 4.4.0 |
|
|
292
|
-
| icon | 设置图标 | ReactNode | - | |
|
|
293
|
-
| bordered | 是否有边框 | boolean | true | 5.4.0 |
|
|
294
|
-
| onClose | 关闭时的回调（可通过 | (e: React.MouseEvent) => void | - | |
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
### Tag.CheckableTag
|
|
298
|
-
|
|
299
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
300
|
-
|--------|--------|--------|--------|
|
|
301
|
-
| checked | 设置标签的选中状态 | boolean | false |
|
|
302
|
-
| onChange | 点击标签时触发的回调 | (checked) => void | - |
|
|
303
|
-
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
|
|
307
|
-
<DemoTitle title="Tabs" desc="用户可以通过点击不同的标签在同一页面中查看不同的内容区域。">
|
|
308
|
-
#### API
|
|
309
|
-
|
|
310
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
311
|
-
|--------|--------|--------|--------|
|
|
312
|
-
| type | 类型 | 'line' \| 'card' \| 'editable-card' \| 'segmented' | true |
|
|
313
|
-
|
|
314
|
-
|
|
315
|
-
<AntdApiRef url="https://ant.design/components/tabs-cn/#api"></AntdApiRef>
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
## antd API
|
|
319
|
-
|
|
320
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
321
|
-
|
|
322
|
-
### Tabs
|
|
323
|
-
|
|
324
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
325
|
-
|--------|--------|--------|--------|--------|
|
|
326
|
-
| activeKey | 当前激活 tab 面板的 key | string | - | |
|
|
327
|
-
| addIcon | 自定义添加按钮，设置 | ReactNode | | 4.4.0 |
|
|
328
|
-
| animated | 是否使用动画切换 Tabs | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | |
|
|
329
|
-
| centered | 标签居中展示 | boolean | false | 4.4.0 |
|
|
330
|
-
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板的 key | |
|
|
331
|
-
| hideAdd | 是否隐藏加号图标，在 | boolean | false | |
|
|
332
|
-
| indicator | 自定义指示条的长度和对齐方式 | { size?: number \| (origin: number) => number; align: | - | 5.13.0 |
|
|
333
|
-
| items | 配置选项卡内容 | | [] | 4.23.0 |
|
|
334
|
-
| more | 自定义折叠菜单属性 | | { icon: | |
|
|
335
|
-
| removeIcon | 自定义删除按钮，设置 | ReactNode | | 5.15.0 |
|
|
336
|
-
| popupClassName | 更多菜单的 | string | - | 4.21.0 |
|
|
337
|
-
| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
|
|
338
|
-
| size | 大小，提供 | string | middle | |
|
|
339
|
-
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
|
|
340
|
-
| tabBarGutter | tabs 之间的间隙 | number | - | |
|
|
341
|
-
| tabBarStyle | tab bar 的样式对象 | CSSProperties | - | |
|
|
342
|
-
| tabPosition | 页签位置，可选值有 | string | top | |
|
|
343
|
-
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
344
|
-
| onChange | 切换面板的回调 | (activeKey: string) => void | - | |
|
|
345
|
-
| onEdit | 新增和删除页签的回调，在 | (action === 'add' ? event : targetKey, action) => void | - | |
|
|
346
|
-
| onTabClick | tab 被点击的回调 | (key: string, event: MouseEvent) => void | - | |
|
|
347
|
-
| onTabScroll | tab 滚动时触发 | ({ direction: | - | 4.3.0 |
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
更多属性查看 [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
|
|
351
|
-
|
|
352
|
-
### TabItemType
|
|
353
|
-
|
|
354
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
355
|
-
|--------|--------|--------|--------|--------|
|
|
356
|
-
| closeIcon | 自定义关闭图标，在 | ReactNode | - | |
|
|
357
|
-
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
358
|
-
| disabled | 禁用某一项 | boolean | false | |
|
|
359
|
-
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
|
|
360
|
-
| key | 对应 activeKey | string | - | |
|
|
361
|
-
| label | 选项卡头显示文字 | ReactNode | - | |
|
|
362
|
-
| icon | 选项卡头显示图标 | ReactNode | - | 5.12.0 |
|
|
363
|
-
| children | 选项卡头显示内容 | ReactNode | - | |
|
|
364
|
-
| closable | 是否显示选项卡的关闭按钮，在 | boolean | true | |
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
### MoreProps
|
|
368
|
-
|
|
369
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
370
|
-
|--------|--------|--------|--------|--------|
|
|
371
|
-
| icon | 自定义折叠图标 | ReactNode | - | |
|
|
372
|
-
| | | | | |
|
|
373
|
-
|
|
374
|
-
|
|
375
|
-
|
|
376
|
-
|
|
377
|
-
<DemoTitle title="Switch" desc="使用开关切换两种状态之间。">
|
|
378
|
-
#### API
|
|
379
|
-
|
|
380
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
381
|
-
|--------|--------|--------|--------|
|
|
382
|
-
| label | Switch后的内容 | ReactNode | |
|
|
383
|
-
|
|
384
|
-
<AntdApiRef url="https://ant.design/components/switch-cn/#api"></AntdApiRef>
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
## antd API
|
|
388
|
-
|
|
389
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
390
|
-
|
|
391
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
392
|
-
|--------|--------|--------|--------|--------|
|
|
393
|
-
| autoFocus | 组件自动获取焦点 | boolean | false | |
|
|
394
|
-
| checked | 指定当前是否选中 | boolean | false | |
|
|
395
|
-
| checkedChildren | 选中时的内容 | ReactNode | - | |
|
|
396
|
-
| className | Switch 器类名 | string | - | |
|
|
397
|
-
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
398
|
-
| defaultValue | defaultChecked | boolean | - | 5.12.0 |
|
|
399
|
-
| disabled | 是否禁用 | boolean | false | |
|
|
400
|
-
| loading | 加载中的开关 | boolean | false | |
|
|
401
|
-
| size | 开关大小，可选值： | string | default | |
|
|
402
|
-
| unCheckedChildren | 非选中时的内容 | ReactNode | - | |
|
|
403
|
-
| value | checked | boolean | - | 5.12.0 |
|
|
404
|
-
| onChange | 变化时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
405
|
-
| onClick | 点击时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
## 方法
|
|
409
|
-
|
|
410
|
-
| 名称 | 描述 |
|
|
411
|
-
|--------|--------|
|
|
412
|
-
| blur() | 移除焦点 |
|
|
413
|
-
| focus() | 获取焦点 |
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
194
|
<DemoTitle title="Table" desc="展示行列数据。">
|
|
419
195
|
#### API
|
|
420
196
|
|
|
@@ -606,67 +382,291 @@ type RangeDisabledTime = (
|
|
|
606
382
|
| onSelectMultiple | 用户使用键盘 shift 选择多行的回调 | function(selected, selectedRows, changeRows) | - | |
|
|
607
383
|
|
|
608
384
|
|
|
609
|
-
### scroll
|
|
385
|
+
### scroll
|
|
386
|
+
|
|
387
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
388
|
+
|--------|--------|--------|--------|
|
|
389
|
+
| scrollToFirstRowOnChange | 当分页、排序、筛选变化后是否滚动到表格顶部 | boolean | - |
|
|
390
|
+
| x | 设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比， | string \| number \| true | - |
|
|
391
|
+
| y | 设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值 | string \| number | - |
|
|
392
|
+
|
|
393
|
+
|
|
394
|
+
### selection
|
|
395
|
+
|
|
396
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
397
|
+
|--------|--------|--------|--------|
|
|
398
|
+
| key | React 需要的 key，建议设置 | string | - |
|
|
399
|
+
| text | 选择项显示的文字 | ReactNode | - |
|
|
400
|
+
| onSelect | 选择项点击回调 | function(changeableRowKeys) | - |
|
|
401
|
+
|
|
402
|
+
|
|
403
|
+
## 在 TypeScript 中使用
|
|
404
|
+
|
|
405
|
+
|
|
406
|
+
```tsx
|
|
407
|
+
import React from 'react';
|
|
408
|
+
import { Table } from 'antd';
|
|
409
|
+
import type { TableColumnsType } from 'antd';
|
|
410
|
+
|
|
411
|
+
interface User {
|
|
412
|
+
key: number;
|
|
413
|
+
name: string;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
const columns: TableColumnsType<User> = [
|
|
417
|
+
{
|
|
418
|
+
key: 'name',
|
|
419
|
+
title: 'Name',
|
|
420
|
+
dataIndex: 'name',
|
|
421
|
+
},
|
|
422
|
+
];
|
|
423
|
+
|
|
424
|
+
const data: User[] = [
|
|
425
|
+
{
|
|
426
|
+
key: 0,
|
|
427
|
+
name: 'Jack',
|
|
428
|
+
},
|
|
429
|
+
];
|
|
430
|
+
|
|
431
|
+
const Demo: React.FC = () => (
|
|
432
|
+
<>
|
|
433
|
+
<Table<User> columns={columns} dataSource={data} />
|
|
434
|
+
{/* 使用 JSX 风格的 API */}
|
|
435
|
+
<Table<User> dataSource={data}>
|
|
436
|
+
<Table.Column<User> key="name" title="Name" dataIndex="name" />
|
|
437
|
+
</Table>
|
|
438
|
+
</>
|
|
439
|
+
);
|
|
440
|
+
|
|
441
|
+
export default Demo;
|
|
442
|
+
```
|
|
443
|
+
|
|
444
|
+
|
|
445
|
+
TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/serene-platform-0jo5t)。
|
|
446
|
+
|
|
447
|
+
|
|
448
|
+
|
|
449
|
+
<DemoTitle title="Tabs" desc="用户可以通过点击不同的标签在同一页面中查看不同的内容区域。">
|
|
450
|
+
#### API
|
|
451
|
+
|
|
452
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
453
|
+
|--------|--------|--------|--------|
|
|
454
|
+
| type | 类型 | 'line' \| 'card' \| 'editable-card' \| 'segmented' | true |
|
|
455
|
+
|
|
456
|
+
|
|
457
|
+
<AntdApiRef url="https://ant.design/components/tabs-cn/#api"></AntdApiRef>
|
|
458
|
+
|
|
459
|
+
|
|
460
|
+
## antd API
|
|
461
|
+
|
|
462
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
463
|
+
|
|
464
|
+
### Tabs
|
|
465
|
+
|
|
466
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
467
|
+
|--------|--------|--------|--------|--------|
|
|
468
|
+
| activeKey | 当前激活 tab 面板的 key | string | - | |
|
|
469
|
+
| addIcon | 自定义添加按钮，设置 | ReactNode | | 4.4.0 |
|
|
470
|
+
| animated | 是否使用动画切换 Tabs | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | |
|
|
471
|
+
| centered | 标签居中展示 | boolean | false | 4.4.0 |
|
|
472
|
+
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板的 key | |
|
|
473
|
+
| hideAdd | 是否隐藏加号图标，在 | boolean | false | |
|
|
474
|
+
| indicator | 自定义指示条的长度和对齐方式 | { size?: number \| (origin: number) => number; align: | - | 5.13.0 |
|
|
475
|
+
| items | 配置选项卡内容 | | [] | 4.23.0 |
|
|
476
|
+
| more | 自定义折叠菜单属性 | | { icon: | |
|
|
477
|
+
| removeIcon | 自定义删除按钮，设置 | ReactNode | | 5.15.0 |
|
|
478
|
+
| popupClassName | 更多菜单的 | string | - | 4.21.0 |
|
|
479
|
+
| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
|
|
480
|
+
| size | 大小，提供 | string | middle | |
|
|
481
|
+
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
|
|
482
|
+
| tabBarGutter | tabs 之间的间隙 | number | - | |
|
|
483
|
+
| tabBarStyle | tab bar 的样式对象 | CSSProperties | - | |
|
|
484
|
+
| tabPosition | 页签位置，可选值有 | string | top | |
|
|
485
|
+
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
486
|
+
| onChange | 切换面板的回调 | (activeKey: string) => void | - | |
|
|
487
|
+
| onEdit | 新增和删除页签的回调，在 | (action === 'add' ? event : targetKey, action) => void | - | |
|
|
488
|
+
| onTabClick | tab 被点击的回调 | (key: string, event: MouseEvent) => void | - | |
|
|
489
|
+
| onTabScroll | tab 滚动时触发 | ({ direction: | - | 4.3.0 |
|
|
490
|
+
|
|
491
|
+
|
|
492
|
+
更多属性查看 [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
|
|
493
|
+
|
|
494
|
+
### TabItemType
|
|
495
|
+
|
|
496
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
497
|
+
|--------|--------|--------|--------|--------|
|
|
498
|
+
| closeIcon | 自定义关闭图标，在 | ReactNode | - | |
|
|
499
|
+
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
500
|
+
| disabled | 禁用某一项 | boolean | false | |
|
|
501
|
+
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
|
|
502
|
+
| key | 对应 activeKey | string | - | |
|
|
503
|
+
| label | 选项卡头显示文字 | ReactNode | - | |
|
|
504
|
+
| icon | 选项卡头显示图标 | ReactNode | - | 5.12.0 |
|
|
505
|
+
| children | 选项卡头显示内容 | ReactNode | - | |
|
|
506
|
+
| closable | 是否显示选项卡的关闭按钮，在 | boolean | true | |
|
|
507
|
+
|
|
508
|
+
|
|
509
|
+
### MoreProps
|
|
510
|
+
|
|
511
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
512
|
+
|--------|--------|--------|--------|--------|
|
|
513
|
+
| icon | 自定义折叠图标 | ReactNode | - | |
|
|
514
|
+
| | | | | |
|
|
515
|
+
|
|
516
|
+
|
|
517
|
+
|
|
518
|
+
|
|
519
|
+
<DemoTitle title="TimePicker" desc="输入或选择时间的控件。">
|
|
520
|
+
#### API
|
|
521
|
+
|
|
522
|
+
<AntdApiRef url="https://ant.design/components/time-picker-cn/#api"></AntdApiRef>
|
|
523
|
+
|
|
524
|
+
|
|
525
|
+
## antd API
|
|
526
|
+
|
|
527
|
+
|
|
528
|
+
|
|
529
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
530
|
+
|
|
531
|
+
|
|
532
|
+
```jsx
|
|
533
|
+
import dayjs from 'dayjs';
|
|
534
|
+
import customParseFormat from 'dayjs/plugin/customParseFormat'
|
|
535
|
+
|
|
536
|
+
dayjs.extend(customParseFormat)
|
|
537
|
+
<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
|
|
538
|
+
```
|
|
539
|
+
|
|
540
|
+
|
|
541
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
542
|
+
|--------|--------|--------|--------|--------|
|
|
543
|
+
| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
|
|
544
|
+
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
545
|
+
| cellRender | 自定义单元格的内容 | (current: number, info: { originNode: React.ReactNode, today: dayjs, range?: 'start' \| 'end', subType: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
|
|
546
|
+
| changeOnScroll | 在滚动时改变选择值 | boolean | false | 5.14.0 |
|
|
547
|
+
| className | 选择器类名 | string | - | |
|
|
548
|
+
| defaultValue | 默认时间 | | - | |
|
|
549
|
+
| disabled | 禁用全部操作 | boolean | false | |
|
|
550
|
+
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
551
|
+
| format | 展示的时间格式 | string | HH:mm:ss | |
|
|
552
|
+
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | |
|
|
553
|
+
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | |
|
|
554
|
+
| hourStep | 小时选项间隔 | number | 1 | |
|
|
555
|
+
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
|
|
556
|
+
| minuteStep | 分钟选项间隔 | number | 1 | |
|
|
557
|
+
| needConfirm | 是否需要确认按钮，为 | boolean | - | 5.14.0 |
|
|
558
|
+
| open | 面板是否打开 | boolean | false | |
|
|
559
|
+
| placeholder | 没有值的时候显示的内容 | string \| [string, string] | 请选择时间 | |
|
|
560
|
+
| placement | 选择框弹出的位置 | bottomLeft | bottomLeft | |
|
|
561
|
+
| popupClassName | 弹出层类名 | string | - | |
|
|
562
|
+
| popupStyle | 弹出层样式对象 | object | - | |
|
|
563
|
+
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
|
|
564
|
+
| renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - | |
|
|
565
|
+
| secondStep | 秒选项间隔 | number | 1 | |
|
|
566
|
+
| showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
|
|
567
|
+
| size | 输入框大小， | large | - | |
|
|
568
|
+
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
569
|
+
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
|
570
|
+
| use12Hours | 使用 12 小时制，为 true 时 | boolean | false | |
|
|
571
|
+
| value | 当前时间 | | - | |
|
|
572
|
+
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
573
|
+
| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - | |
|
|
574
|
+
| onChange | 时间发生变化的回调 | function(time: dayjs, timeString: string): void | - | |
|
|
575
|
+
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - | |
|
|
576
|
+
|
|
577
|
+
|
|
578
|
+
#### DisabledTime
|
|
579
|
+
|
|
580
|
+
|
|
581
|
+
```typescript
|
|
582
|
+
type DisabledTime = (now: Dayjs) => {
|
|
583
|
+
disabledHours?: () => number[];
|
|
584
|
+
disabledMinutes?: (selectedHour: number) => number[];
|
|
585
|
+
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
586
|
+
disabledMilliseconds?: (
|
|
587
|
+
selectedHour: number,
|
|
588
|
+
selectedMinute: number,
|
|
589
|
+
selectedSecond: number,
|
|
590
|
+
) => number[];
|
|
591
|
+
};
|
|
592
|
+
```
|
|
593
|
+
|
|
594
|
+
|
|
595
|
+
注意：`disabledMilliseconds` 为 `5.14.0` 新增。
|
|
596
|
+
|
|
597
|
+
## 方法
|
|
598
|
+
|
|
599
|
+
| 名称 | 描述 | 版本 |
|
|
600
|
+
|--------|--------|--------|
|
|
601
|
+
| blur() | 移除焦点 | |
|
|
602
|
+
| focus() | 获取焦点 | |
|
|
603
|
+
|
|
604
|
+
|
|
605
|
+
## RangePicker
|
|
606
|
+
|
|
607
|
+
属性与 DatePicker 的 [RangePicker](/components/date-picker-cn#rangepicker) 相同。还包含以下属性：
|
|
608
|
+
|
|
609
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
610
|
+
|--------|--------|--------|--------|--------|
|
|
611
|
+
| disabledTime | 不可选择的时间 | | - | 4.19.0 |
|
|
612
|
+
| order | 始末时间是否自动排序 | boolean | true | 4.1.0 |
|
|
613
|
+
|
|
614
|
+
|
|
615
|
+
### RangeDisabledTime
|
|
610
616
|
|
|
611
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
612
|
-
|--------|--------|--------|--------|
|
|
613
|
-
| scrollToFirstRowOnChange | 当分页、排序、筛选变化后是否滚动到表格顶部 | boolean | - |
|
|
614
|
-
| x | 设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比， | string \| number \| true | - |
|
|
615
|
-
| y | 设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值 | string \| number | - |
|
|
616
617
|
|
|
618
|
+
```typescript
|
|
619
|
+
type RangeDisabledTime = (
|
|
620
|
+
now: Dayjs,
|
|
621
|
+
type = 'start' | 'end',
|
|
622
|
+
) => {
|
|
623
|
+
disabledHours?: () => number[];
|
|
624
|
+
disabledMinutes?: (selectedHour: number) => number[];
|
|
625
|
+
disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
|
|
626
|
+
};
|
|
627
|
+
```
|
|
617
628
|
|
|
618
|
-
### selection
|
|
619
629
|
|
|
620
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
621
|
-
|--------|--------|--------|--------|
|
|
622
|
-
| key | React 需要的 key，建议设置 | string | - |
|
|
623
|
-
| text | 选择项显示的文字 | ReactNode | - |
|
|
624
|
-
| onSelect | 选择项点击回调 | function(changeableRowKeys) | - |
|
|
625
630
|
|
|
626
631
|
|
|
627
|
-
|
|
632
|
+
<DemoTitle title="Switch" desc="使用开关切换两种状态之间。">
|
|
633
|
+
#### API
|
|
628
634
|
|
|
635
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
636
|
+
|--------|--------|--------|--------|
|
|
637
|
+
| label | Switch后的内容 | ReactNode | |
|
|
629
638
|
|
|
630
|
-
|
|
631
|
-
import React from 'react';
|
|
632
|
-
import { Table } from 'antd';
|
|
633
|
-
import type { TableColumnsType } from 'antd';
|
|
639
|
+
<AntdApiRef url="https://ant.design/components/switch-cn/#api"></AntdApiRef>
|
|
634
640
|
|
|
635
|
-
interface User {
|
|
636
|
-
key: number;
|
|
637
|
-
name: string;
|
|
638
|
-
}
|
|
639
641
|
|
|
640
|
-
|
|
641
|
-
{
|
|
642
|
-
key: 'name',
|
|
643
|
-
title: 'Name',
|
|
644
|
-
dataIndex: 'name',
|
|
645
|
-
},
|
|
646
|
-
];
|
|
642
|
+
## antd API
|
|
647
643
|
|
|
648
|
-
|
|
649
|
-
{
|
|
650
|
-
key: 0,
|
|
651
|
-
name: 'Jack',
|
|
652
|
-
},
|
|
653
|
-
];
|
|
644
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
654
645
|
|
|
655
|
-
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
|
|
660
|
-
|
|
661
|
-
|
|
662
|
-
|
|
663
|
-
|
|
646
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
647
|
+
|--------|--------|--------|--------|--------|
|
|
648
|
+
| autoFocus | 组件自动获取焦点 | boolean | false | |
|
|
649
|
+
| checked | 指定当前是否选中 | boolean | false | |
|
|
650
|
+
| checkedChildren | 选中时的内容 | ReactNode | - | |
|
|
651
|
+
| className | Switch 器类名 | string | - | |
|
|
652
|
+
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
653
|
+
| defaultValue | defaultChecked | boolean | - | 5.12.0 |
|
|
654
|
+
| disabled | 是否禁用 | boolean | false | |
|
|
655
|
+
| loading | 加载中的开关 | boolean | false | |
|
|
656
|
+
| size | 开关大小，可选值： | string | default | |
|
|
657
|
+
| unCheckedChildren | 非选中时的内容 | ReactNode | - | |
|
|
658
|
+
| value | checked | boolean | - | 5.12.0 |
|
|
659
|
+
| onChange | 变化时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
660
|
+
| onClick | 点击时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
664
661
|
|
|
665
|
-
export default Demo;
|
|
666
|
-
```
|
|
667
662
|
|
|
663
|
+
## 方法
|
|
664
|
+
|
|
665
|
+
| 名称 | 描述 |
|
|
666
|
+
|--------|--------|
|
|
667
|
+
| blur() | 移除焦点 |
|
|
668
|
+
| focus() | 获取焦点 |
|
|
668
669
|
|
|
669
|
-
TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/serene-platform-0jo5t)。
|
|
670
670
|
|
|
671
671
|
|
|
672
672
|
|
|
@@ -867,82 +867,6 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
867
867
|
|
|
868
868
|
|
|
869
869
|
|
|
870
|
-
<DemoTitle title="Slider" desc="滑动型输入器，展示当前值和可选范围。">
|
|
871
|
-
#### API
|
|
872
|
-
|
|
873
|
-
<AntdApiRef url="https://ant.design/components/slider-cn/#api"></AntdApiRef>
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
## antd API
|
|
877
|
-
|
|
878
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
879
|
-
|
|
880
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
881
|
-
|--------|--------|--------|--------|--------|
|
|
882
|
-
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
883
|
-
| classNames | 语义化结构 className | | - | 5.10.0 |
|
|
884
|
-
| defaultValue | 设置初始取值。当 | number \| [number, number] | 0 \| [0, 0] | |
|
|
885
|
-
| disabled | 值为 true 时，滑块为禁用状态 | boolean | false | |
|
|
886
|
-
| keyboard | 支持使用键盘操作 handler | boolean | true | 5.2.0+ |
|
|
887
|
-
| dots | 是否只能拖拽到刻度上 | boolean | false | |
|
|
888
|
-
| included | marks | boolean | true | |
|
|
889
|
-
| marks | 刻度标记，key 的类型必须为 | object | { number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } } | |
|
|
890
|
-
| max | 最大值 | number | 100 | |
|
|
891
|
-
| min | 最小值 | number | 0 | |
|
|
892
|
-
| range | 双滑块模式 | boolean \| | false | |
|
|
893
|
-
| reverse | 反向坐标轴 | boolean | false | |
|
|
894
|
-
| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 | number \| null | 1 | |
|
|
895
|
-
| styles | 语义化结构 styles | | - | 5.10.0 |
|
|
896
|
-
| tooltip | 设置 Tooltip 相关属性 | | - | 4.23.0 |
|
|
897
|
-
| value | 设置当前取值。当 | number \| [number, number] | - | |
|
|
898
|
-
| vertical | 值为 true 时，Slider 为垂直方向 | boolean | false | |
|
|
899
|
-
| onChangeComplete | 与 | (value) => void | - | |
|
|
900
|
-
| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | (value) => void | - | |
|
|
901
|
-
|
|
902
|
-
|
|
903
|
-
### range
|
|
904
|
-
|
|
905
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
906
|
-
|--------|--------|--------|--------|--------|
|
|
907
|
-
| draggableTrack | 范围刻度是否可被拖拽 | boolean | false | |
|
|
908
|
-
| editable | 启动动态增减节点，不能和 | boolean | false | 5.20.0 |
|
|
909
|
-
| minCount | 配置 | number | 0 | 5.20.0 |
|
|
910
|
-
| maxCount | 配置 | number | - | 5.20.0 |
|
|
911
|
-
|
|
912
|
-
|
|
913
|
-
### tooltip
|
|
914
|
-
|
|
915
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
916
|
-
|--------|--------|--------|--------|--------|
|
|
917
|
-
| autoAdjustOverflow | 是否自动调整弹出位置 | boolean | true | 5.8.0 |
|
|
918
|
-
| open | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时 | boolean | - | 4.23.0 |
|
|
919
|
-
| placement | 设置 Tooltip 展示位置。参考 | string | - | 4.23.0 |
|
|
920
|
-
| getPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
|
|
921
|
-
| formatter | Slider 会把当前值传给 | value => ReactNode \| null | IDENTITY | 4.23.0 |
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
## 方法
|
|
925
|
-
|
|
926
|
-
| 名称 | 描述 | 版本 |
|
|
927
|
-
|--------|--------|--------|
|
|
928
|
-
| blur() | 移除焦点 | |
|
|
929
|
-
| focus() | 获取焦点 | |
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
|
-
<DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。">
|
|
935
|
-
## API
|
|
936
|
-
|
|
937
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
938
|
-
|--------|--------|--------|--------|
|
|
939
|
-
| texture | 是否显示纹理 | boolean | false |
|
|
940
|
-
|
|
941
|
-
|
|
942
|
-
|
|
943
|
-
|
|
944
|
-
|
|
945
|
-
|
|
946
870
|
<DemoTitle title="Select" desc="下拉选择器">
|
|
947
871
|
## antd API
|
|
948
872
|
|
|
@@ -1041,16 +965,85 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1041
965
|
|
|
1042
966
|
|
|
1043
967
|
|
|
1044
|
-
<DemoTitle title="
|
|
968
|
+
<DemoTitle title="Slider" desc="滑动型输入器，展示当前值和可选范围。">
|
|
1045
969
|
#### API
|
|
1046
970
|
|
|
971
|
+
<AntdApiRef url="https://ant.design/components/slider-cn/#api"></AntdApiRef>
|
|
972
|
+
|
|
973
|
+
|
|
974
|
+
## antd API
|
|
975
|
+
|
|
976
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
977
|
+
|
|
978
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
979
|
+
|--------|--------|--------|--------|--------|
|
|
980
|
+
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
981
|
+
| classNames | 语义化结构 className | | - | 5.10.0 |
|
|
982
|
+
| defaultValue | 设置初始取值。当 | number \| [number, number] | 0 \| [0, 0] | |
|
|
983
|
+
| disabled | 值为 true 时，滑块为禁用状态 | boolean | false | |
|
|
984
|
+
| keyboard | 支持使用键盘操作 handler | boolean | true | 5.2.0+ |
|
|
985
|
+
| dots | 是否只能拖拽到刻度上 | boolean | false | |
|
|
986
|
+
| included | marks | boolean | true | |
|
|
987
|
+
| marks | 刻度标记，key 的类型必须为 | object | { number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } } | |
|
|
988
|
+
| max | 最大值 | number | 100 | |
|
|
989
|
+
| min | 最小值 | number | 0 | |
|
|
990
|
+
| range | 双滑块模式 | boolean \| | false | |
|
|
991
|
+
| reverse | 反向坐标轴 | boolean | false | |
|
|
992
|
+
| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 | number \| null | 1 | |
|
|
993
|
+
| styles | 语义化结构 styles | | - | 5.10.0 |
|
|
994
|
+
| tooltip | 设置 Tooltip 相关属性 | | - | 4.23.0 |
|
|
995
|
+
| value | 设置当前取值。当 | number \| [number, number] | - | |
|
|
996
|
+
| vertical | 值为 true 时，Slider 为垂直方向 | boolean | false | |
|
|
997
|
+
| onChangeComplete | 与 | (value) => void | - | |
|
|
998
|
+
| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | (value) => void | - | |
|
|
999
|
+
|
|
1000
|
+
|
|
1001
|
+
### range
|
|
1002
|
+
|
|
1003
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1004
|
+
|--------|--------|--------|--------|--------|
|
|
1005
|
+
| draggableTrack | 范围刻度是否可被拖拽 | boolean | false | |
|
|
1006
|
+
| editable | 启动动态增减节点，不能和 | boolean | false | 5.20.0 |
|
|
1007
|
+
| minCount | 配置 | number | 0 | 5.20.0 |
|
|
1008
|
+
| maxCount | 配置 | number | - | 5.20.0 |
|
|
1009
|
+
|
|
1010
|
+
|
|
1011
|
+
### tooltip
|
|
1012
|
+
|
|
1013
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1014
|
+
|--------|--------|--------|--------|--------|
|
|
1015
|
+
| autoAdjustOverflow | 是否自动调整弹出位置 | boolean | true | 5.8.0 |
|
|
1016
|
+
| open | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时 | boolean | - | 4.23.0 |
|
|
1017
|
+
| placement | 设置 Tooltip 展示位置。参考 | string | - | 4.23.0 |
|
|
1018
|
+
| getPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
|
|
1019
|
+
| formatter | Slider 会把当前值传给 | value => ReactNode \| null | IDENTITY | 4.23.0 |
|
|
1020
|
+
|
|
1021
|
+
|
|
1022
|
+
## 方法
|
|
1023
|
+
|
|
1024
|
+
| 名称 | 描述 | 版本 |
|
|
1025
|
+
|--------|--------|--------|
|
|
1026
|
+
| blur() | 移除焦点 | |
|
|
1027
|
+
| focus() | 获取焦点 | |
|
|
1028
|
+
|
|
1029
|
+
|
|
1030
|
+
|
|
1031
|
+
|
|
1032
|
+
<DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。">
|
|
1033
|
+
## API
|
|
1034
|
+
|
|
1047
1035
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1048
1036
|
|--------|--------|--------|--------|
|
|
1049
|
-
|
|
|
1050
|
-
|
|
1051
|
-
|
|
1037
|
+
| texture | 是否显示纹理 | boolean | false |
|
|
1038
|
+
|
|
1039
|
+
|
|
1040
|
+
|
|
1041
|
+
|
|
1052
1042
|
|
|
1053
1043
|
|
|
1044
|
+
<DemoTitle title="Radio" desc="用于在多个备选项中选中单个状态。">
|
|
1045
|
+
#### API
|
|
1046
|
+
|
|
1054
1047
|
<AntdApiRef url="https://ant.design/components/radio-cn/#api"></AntdApiRef>
|
|
1055
1048
|
|
|
1056
1049
|
|
|
@@ -1116,9 +1109,33 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1116
1109
|
|
|
1117
1110
|
|
|
1118
1111
|
|
|
1119
|
-
<DemoTitle title="
|
|
1112
|
+
<DemoTitle title="MdEditor" desc="提示词编辑器，可以高亮 Markdown 的语法，支持自定义槽位变量的插入">
|
|
1113
|
+
#### API
|
|
1114
|
+
|
|
1115
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1116
|
+
|--------|--------|--------|--------|
|
|
1117
|
+
| maxLength | 可以输入内容的最大长度 | number | |
|
|
1118
|
+
| value | 输入的内容 | string | (必填) |
|
|
1119
|
+
| className | 输入内容的类名 | string | |
|
|
1120
|
+
| onChange | 输入内容的回调 | (value: string) => void | |
|
|
1121
|
+
| variables | 可以插入的变量列表 | Array | |
|
|
1122
|
+
| onCreate | 新增变量的触发回调 | () => void | |
|
|
1123
|
+
| createBtnText | 新增变量的按钮文本 | string | |
|
|
1124
|
+
| tipsText | 提示文本，传入 false 时隐藏提示 | string \| React.ReactNode \| false | |
|
|
1125
|
+
|
|
1126
|
+
|
|
1127
|
+
|
|
1128
|
+
|
|
1129
|
+
<DemoTitle title="RadioButton" desc="用于在多个备选项中选中单个状态。">
|
|
1120
1130
|
#### API
|
|
1121
1131
|
|
|
1132
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1133
|
+
|--------|--------|--------|--------|
|
|
1134
|
+
| bordered | 边框 | boolean | false |
|
|
1135
|
+
| ghost | 按钮背景色类型 | boolean | true |
|
|
1136
|
+
| gap | 间距 | number | 12 px |
|
|
1137
|
+
|
|
1138
|
+
|
|
1122
1139
|
<AntdApiRef url="https://ant.design/components/radio-cn/#api"></AntdApiRef>
|
|
1123
1140
|
|
|
1124
1141
|
|
|
@@ -1236,15 +1253,10 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1236
1253
|
|
|
1237
1254
|
|
|
1238
1255
|
|
|
1239
|
-
<DemoTitle title="
|
|
1256
|
+
<DemoTitle title="Popover" desc="点击/鼠标移入元素，弹出气泡式的卡片浮层">
|
|
1240
1257
|
#### API
|
|
1241
1258
|
|
|
1242
|
-
|
|
1243
|
-
|--------|--------|--------|--------|
|
|
1244
|
-
| type | 类型 | 'info' \| 'warning' \| 'error' \| 'success' \| 'confirm' | 'confirm' |
|
|
1245
|
-
|
|
1246
|
-
|
|
1247
|
-
<AntdApiRef url="https://ant.design/components/popconfirm-cn/#api"></AntdApiRef>
|
|
1259
|
+
<AntdApiRef url="https://ant.design/components/popover-cn/#api"></AntdApiRef>
|
|
1248
1260
|
|
|
1249
1261
|
|
|
1250
1262
|
## antd API
|
|
@@ -1253,19 +1265,8 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1253
1265
|
|
|
1254
1266
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1255
1267
|
|--------|--------|--------|--------|--------|
|
|
1256
|
-
|
|
|
1257
|
-
|
|
|
1258
|
-
| disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false | |
|
|
1259
|
-
| icon | 自定义弹出气泡 Icon 图标 | ReactNode | | |
|
|
1260
|
-
| okButtonProps | ok 按钮 props | | - | |
|
|
1261
|
-
| okText | 确认按钮文字 | string | 确定 | |
|
|
1262
|
-
| okType | 确认按钮类型 | string | primary | |
|
|
1263
|
-
| showCancel | 是否显示取消按钮 | boolean | true | 4.18.0 |
|
|
1264
|
-
| title | 确认框标题 | ReactNode \| () => ReactNode | - | |
|
|
1265
|
-
| description | 确认内容的详细描述 | ReactNode \| () => ReactNode | - | 5.1.0 |
|
|
1266
|
-
| onCancel | 点击取消的回调 | function(e) | - | |
|
|
1267
|
-
| onConfirm | 点击确认的回调 | function(e) | - | |
|
|
1268
|
-
| onPopupClick | 弹出气泡点击事件 | function(e) | - | 5.5.0 |
|
|
1268
|
+
| content | 卡片内容 | ReactNode \| () => ReactNode | - | |
|
|
1269
|
+
| title | 卡片标题 | ReactNode \| () => ReactNode | - | |
|
|
1269
1270
|
|
|
1270
1271
|
|
|
1271
1272
|
<!-- 共同的 API -->
|
|
@@ -1290,126 +1291,21 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1290
1291
|
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
1291
1292
|
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
1292
1293
|
|
|
1294
|
+
## 注意
|
|
1293
1295
|
|
|
1294
|
-
|
|
1295
|
-
|
|
1296
|
-
<DemoTitle title="Notification" desc="用于指示任务的完成进度">
|
|
1297
|
-
#### API
|
|
1298
|
-
|
|
1299
|
-
<AntdApiRef url="https://ant.design/components/notification-cn/#api"></AntdApiRef>
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
## antd API
|
|
1303
|
-
|
|
1304
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
- `notification.success(config)`
|
|
1308
|
-
- `notification.error(config)`
|
|
1309
|
-
- `notification.info(config)`
|
|
1310
|
-
- `notification.warning(config)`
|
|
1311
|
-
- `notification.open(config)`
|
|
1312
|
-
- `notification.destroy(key?: String)`
|
|
1313
|
-
|
|
1314
|
-
config 参数如下：
|
|
1315
|
-
|
|
1316
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1317
|
-
|--------|--------|--------|--------|--------|
|
|
1318
|
-
| actions | 自定义按钮组 | ReactNode | - | 5.24.0 |
|
|
1319
|
-
| className | 自定义 CSS class | string | - | - |
|
|
1320
|
-
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1321
|
-
| description | 通知提醒内容，必选 | ReactNode | - | - |
|
|
1322
|
-
| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 | - |
|
|
1323
|
-
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1324
|
-
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1325
|
-
| icon | 自定义图标 | ReactNode | - | - |
|
|
1326
|
-
| key | 当前通知唯一标志 | string | - | - |
|
|
1327
|
-
| message | 通知提醒标题，必选 | ReactNode | - | - |
|
|
1328
|
-
| placement | 弹出位置，可选 | string | topRight | - |
|
|
1329
|
-
| style | 自定义内联样式 | | - | - |
|
|
1330
|
-
| role | 供屏幕阅读器识别的通知内容语义，默认为 | alert \| status | alert | 5.6.0 |
|
|
1331
|
-
| onClick | 点击通知时触发的回调函数 | function | - | - |
|
|
1332
|
-
| onClose | 当通知关闭时触发 | function | - | - |
|
|
1333
|
-
| props | 透传至通知 | Object | - | - |
|
|
1334
|
-
|
|
1335
|
-
|
|
1336
|
-
|
|
1337
|
-
- `notification.useNotification(config)`
|
|
1338
|
-
|
|
1339
|
-
config 参数如下：
|
|
1340
|
-
|
|
1341
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1342
|
-
|--------|--------|--------|--------|--------|
|
|
1343
|
-
| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 | |
|
|
1344
|
-
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1345
|
-
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body | |
|
|
1346
|
-
| placement | 弹出位置，可选 | string | topRight | |
|
|
1347
|
-
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1348
|
-
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1349
|
-
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1350
|
-
| stack | 堆叠模式，超过阈值时会将所有消息收起 | boolean \| | { threshold: 3 } | 5.10.0 |
|
|
1351
|
-
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | |
|
|
1352
|
-
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
### 全局配置
|
|
1356
|
-
|
|
1357
|
-
还提供了一个全局配置方法，在调用前提前配置，全局一次生效。
|
|
1358
|
-
|
|
1359
|
-
`notification.config(options)`
|
|
1360
|
-
|
|
1361
|
-
当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)当你想单独使用，可通过如下设置开启 RTL 模式。
|
|
1362
|
-
|
|
1363
|
-
|
|
1364
|
-
```js
|
|
1365
|
-
notification.config({
|
|
1366
|
-
placement: 'bottomRight',
|
|
1367
|
-
bottom: 50,
|
|
1368
|
-
duration: 3,
|
|
1369
|
-
rtl: true,
|
|
1370
|
-
});
|
|
1371
|
-
```
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
#### notification.config
|
|
1375
|
-
|
|
1376
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1377
|
-
|--------|--------|--------|--------|--------|
|
|
1378
|
-
| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 | |
|
|
1379
|
-
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1380
|
-
| duration | 默认自动关闭延时，单位秒 | number | 4.5 | |
|
|
1381
|
-
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1382
|
-
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1383
|
-
| getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLNode | () => document.body | |
|
|
1384
|
-
| placement | 弹出位置，可选 | string | topRight | |
|
|
1385
|
-
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1386
|
-
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | |
|
|
1387
|
-
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
|
|
1388
|
-
|
|
1296
|
+
请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
|
|
1389
1297
|
|
|
1390
1298
|
|
|
1391
1299
|
|
|
1392
|
-
<DemoTitle title="
|
|
1300
|
+
<DemoTitle title="Popconfirm" desc="点击元素，弹出气泡式的确认框。">
|
|
1393
1301
|
#### API
|
|
1394
1302
|
|
|
1395
1303
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1396
1304
|
|--------|--------|--------|--------|
|
|
1397
|
-
|
|
|
1398
|
-
| value | 输入的内容 | string | (必填) |
|
|
1399
|
-
| className | 输入内容的类名 | string | |
|
|
1400
|
-
| onChange | 输入内容的回调 | (value: string) => void | |
|
|
1401
|
-
| variables | 可以插入的变量列表 | Array | |
|
|
1402
|
-
| onCreate | 新增变量的触发回调 | () => void | |
|
|
1403
|
-
| createBtnText | 新增变量的按钮文本 | string | |
|
|
1404
|
-
| tipsText | 提示文本，传入 false 时隐藏提示 | string \| React.ReactNode \| false | |
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
|
|
1305
|
+
| type | 类型 | 'info' \| 'warning' \| 'error' \| 'success' \| 'confirm' | 'confirm' |
|
|
1408
1306
|
|
|
1409
|
-
<DemoTitle title="Popover" desc="点击/鼠标移入元素，弹出气泡式的卡片浮层">
|
|
1410
|
-
#### API
|
|
1411
1307
|
|
|
1412
|
-
<AntdApiRef url="https://ant.design/components/
|
|
1308
|
+
<AntdApiRef url="https://ant.design/components/popconfirm-cn/#api"></AntdApiRef>
|
|
1413
1309
|
|
|
1414
1310
|
|
|
1415
1311
|
## antd API
|
|
@@ -1418,8 +1314,19 @@ notification.config({
|
|
|
1418
1314
|
|
|
1419
1315
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1420
1316
|
|--------|--------|--------|--------|--------|
|
|
1421
|
-
|
|
|
1422
|
-
|
|
|
1317
|
+
| cancelButtonProps | cancel 按钮 props | | - | |
|
|
1318
|
+
| cancelText | 取消按钮文字 | string | 取消 | |
|
|
1319
|
+
| disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false | |
|
|
1320
|
+
| icon | 自定义弹出气泡 Icon 图标 | ReactNode | | |
|
|
1321
|
+
| okButtonProps | ok 按钮 props | | - | |
|
|
1322
|
+
| okText | 确认按钮文字 | string | 确定 | |
|
|
1323
|
+
| okType | 确认按钮类型 | string | primary | |
|
|
1324
|
+
| showCancel | 是否显示取消按钮 | boolean | true | 4.18.0 |
|
|
1325
|
+
| title | 确认框标题 | ReactNode \| () => ReactNode | - | |
|
|
1326
|
+
| description | 确认内容的详细描述 | ReactNode \| () => ReactNode | - | 5.1.0 |
|
|
1327
|
+
| onCancel | 点击取消的回调 | function(e) | - | |
|
|
1328
|
+
| onConfirm | 点击确认的回调 | function(e) | - | |
|
|
1329
|
+
| onPopupClick | 弹出气泡点击事件 | function(e) | - | 5.5.0 |
|
|
1423
1330
|
|
|
1424
1331
|
|
|
1425
1332
|
<!-- 共同的 API -->
|
|
@@ -1444,9 +1351,53 @@ notification.config({
|
|
|
1444
1351
|
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
1445
1352
|
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
1446
1353
|
|
|
1447
|
-
## 注意
|
|
1448
1354
|
|
|
1449
|
-
|
|
1355
|
+
|
|
1356
|
+
|
|
1357
|
+
<DemoTitle title="Pagination" desc="分页器用于分隔长列表，每次只加载一个页面。">
|
|
1358
|
+
## API
|
|
1359
|
+
|
|
1360
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1361
|
+
|--------|--------|--------|--------|
|
|
1362
|
+
| hideSwitchButton | 是否展示上一页/下一页的切换按钮 | boolean | false |
|
|
1363
|
+
|
|
1364
|
+
|
|
1365
|
+
<AntdApiRef url="https://ant.design/components/pagination-cn/#api"></AntdApiRef>
|
|
1366
|
+
|
|
1367
|
+
|
|
1368
|
+
## antd API
|
|
1369
|
+
|
|
1370
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1371
|
+
|
|
1372
|
+
|
|
1373
|
+
```jsx
|
|
1374
|
+
<Pagination onChange={onChange} total={50} />
|
|
1375
|
+
```
|
|
1376
|
+
|
|
1377
|
+
|
|
1378
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1379
|
+
|--------|--------|--------|--------|--------|
|
|
1380
|
+
| align | 对齐方式 | start \| center \| end | - | 5.19.0 |
|
|
1381
|
+
| current | 当前页数 | number | - | |
|
|
1382
|
+
| defaultCurrent | 默认的当前页数 | number | 1 | |
|
|
1383
|
+
| defaultPageSize | 默认的每页条数 | number | 10 | |
|
|
1384
|
+
| disabled | 禁用分页 | boolean | - | |
|
|
1385
|
+
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | |
|
|
1386
|
+
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | |
|
|
1387
|
+
| pageSize | 每页条数 | number | - | |
|
|
1388
|
+
| pageSizeOptions | 指定每页可以显示多少条 | number[] | [ | |
|
|
1389
|
+
| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | |
|
|
1390
|
+
| showLessItems | 是否显示较少页面内容 | boolean | false | |
|
|
1391
|
+
| showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false | |
|
|
1392
|
+
| showSizeChanger | 是否展示 | boolean \| | - | SelectProps: 5.21.0 |
|
|
1393
|
+
| showTitle | 是否显示原生 tooltip 页码提示 | boolean | true | |
|
|
1394
|
+
| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | |
|
|
1395
|
+
| simple | 当添加该属性时，显示为简单分页 | boolean \| { readOnly?: boolean } | - | |
|
|
1396
|
+
| size | 当为 | default | default | |
|
|
1397
|
+
| total | 数据总数 | number | 0 | |
|
|
1398
|
+
| onChange | 页码或 | function(page, pageSize) | - | |
|
|
1399
|
+
| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | |
|
|
1400
|
+
|
|
1450
1401
|
|
|
1451
1402
|
|
|
1452
1403
|
|
|
@@ -1620,49 +1571,98 @@ const confirmed = await modal.confirm({ ... });
|
|
|
1620
1571
|
|
|
1621
1572
|
|
|
1622
1573
|
|
|
1623
|
-
<DemoTitle title="
|
|
1624
|
-
|
|
1574
|
+
<DemoTitle title="Notification" desc="用于指示任务的完成进度">
|
|
1575
|
+
#### API
|
|
1576
|
+
|
|
1577
|
+
<AntdApiRef url="https://ant.design/components/notification-cn/#api"></AntdApiRef>
|
|
1578
|
+
|
|
1579
|
+
|
|
1580
|
+
## antd API
|
|
1581
|
+
|
|
1582
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1583
|
+
|
|
1584
|
+
|
|
1585
|
+
- `notification.success(config)`
|
|
1586
|
+
- `notification.error(config)`
|
|
1587
|
+
- `notification.info(config)`
|
|
1588
|
+
- `notification.warning(config)`
|
|
1589
|
+
- `notification.open(config)`
|
|
1590
|
+
- `notification.destroy(key?: String)`
|
|
1591
|
+
|
|
1592
|
+
config 参数如下：
|
|
1593
|
+
|
|
1594
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1595
|
+
|--------|--------|--------|--------|--------|
|
|
1596
|
+
| actions | 自定义按钮组 | ReactNode | - | 5.24.0 |
|
|
1597
|
+
| className | 自定义 CSS class | string | - | - |
|
|
1598
|
+
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1599
|
+
| description | 通知提醒内容，必选 | ReactNode | - | - |
|
|
1600
|
+
| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 | - |
|
|
1601
|
+
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1602
|
+
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1603
|
+
| icon | 自定义图标 | ReactNode | - | - |
|
|
1604
|
+
| key | 当前通知唯一标志 | string | - | - |
|
|
1605
|
+
| message | 通知提醒标题，必选 | ReactNode | - | - |
|
|
1606
|
+
| placement | 弹出位置，可选 | string | topRight | - |
|
|
1607
|
+
| style | 自定义内联样式 | | - | - |
|
|
1608
|
+
| role | 供屏幕阅读器识别的通知内容语义，默认为 | alert \| status | alert | 5.6.0 |
|
|
1609
|
+
| onClick | 点击通知时触发的回调函数 | function | - | - |
|
|
1610
|
+
| onClose | 当通知关闭时触发 | function | - | - |
|
|
1611
|
+
| props | 透传至通知 | Object | - | - |
|
|
1612
|
+
|
|
1613
|
+
|
|
1614
|
+
|
|
1615
|
+
- `notification.useNotification(config)`
|
|
1616
|
+
|
|
1617
|
+
config 参数如下：
|
|
1625
1618
|
|
|
1626
|
-
|
|
|
1627
|
-
|
|
1628
|
-
|
|
|
1619
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1620
|
+
|--------|--------|--------|--------|--------|
|
|
1621
|
+
| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 | |
|
|
1622
|
+
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1623
|
+
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body | |
|
|
1624
|
+
| placement | 弹出位置，可选 | string | topRight | |
|
|
1625
|
+
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1626
|
+
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1627
|
+
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1628
|
+
| stack | 堆叠模式，超过阈值时会将所有消息收起 | boolean \| | { threshold: 3 } | 5.10.0 |
|
|
1629
|
+
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | |
|
|
1630
|
+
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
|
|
1629
1631
|
|
|
1630
1632
|
|
|
1631
|
-
|
|
1633
|
+
### 全局配置
|
|
1632
1634
|
|
|
1635
|
+
还提供了一个全局配置方法，在调用前提前配置，全局一次生效。
|
|
1633
1636
|
|
|
1634
|
-
|
|
1637
|
+
`notification.config(options)`
|
|
1635
1638
|
|
|
1636
|
-
|
|
1639
|
+
当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)当你想单独使用，可通过如下设置开启 RTL 模式。
|
|
1637
1640
|
|
|
1638
1641
|
|
|
1639
|
-
```
|
|
1640
|
-
|
|
1642
|
+
```js
|
|
1643
|
+
notification.config({
|
|
1644
|
+
placement: 'bottomRight',
|
|
1645
|
+
bottom: 50,
|
|
1646
|
+
duration: 3,
|
|
1647
|
+
rtl: true,
|
|
1648
|
+
});
|
|
1641
1649
|
```
|
|
1642
1650
|
|
|
1643
1651
|
|
|
1652
|
+
#### notification.config
|
|
1653
|
+
|
|
1644
1654
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1645
1655
|
|--------|--------|--------|--------|--------|
|
|
1646
|
-
|
|
|
1647
|
-
|
|
|
1648
|
-
|
|
|
1649
|
-
|
|
|
1650
|
-
|
|
|
1651
|
-
|
|
|
1652
|
-
|
|
|
1653
|
-
|
|
|
1654
|
-
|
|
|
1655
|
-
|
|
|
1656
|
-
| showLessItems | 是否显示较少页面内容 | boolean | false | |
|
|
1657
|
-
| showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false | |
|
|
1658
|
-
| showSizeChanger | 是否展示 | boolean \| | - | SelectProps: 5.21.0 |
|
|
1659
|
-
| showTitle | 是否显示原生 tooltip 页码提示 | boolean | true | |
|
|
1660
|
-
| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | |
|
|
1661
|
-
| simple | 当添加该属性时，显示为简单分页 | boolean \| { readOnly?: boolean } | - | |
|
|
1662
|
-
| size | 当为 | default | default | |
|
|
1663
|
-
| total | 数据总数 | number | 0 | |
|
|
1664
|
-
| onChange | 页码或 | function(page, pageSize) | - | |
|
|
1665
|
-
| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | |
|
|
1656
|
+
| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 | |
|
|
1657
|
+
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1658
|
+
| duration | 默认自动关闭延时，单位秒 | number | 4.5 | |
|
|
1659
|
+
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1660
|
+
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1661
|
+
| getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLNode | () => document.body | |
|
|
1662
|
+
| placement | 弹出位置，可选 | string | topRight | |
|
|
1663
|
+
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1664
|
+
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | |
|
|
1665
|
+
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
|
|
1666
1666
|
|
|
1667
1667
|
|
|
1668
1668
|
|
|
@@ -1902,59 +1902,6 @@ interface CountConfig {
|
|
|
1902
1902
|
|
|
1903
1903
|
|
|
1904
1904
|
|
|
1905
|
-
<DemoTitle title="InputNumber" desc="通过鼠标或键盘，输入范围内的数值。">
|
|
1906
|
-
#### API
|
|
1907
|
-
|
|
1908
|
-
<AntdApiRef url="https://ant.design/components/input-number-cn/#api"></AntdApiRef>
|
|
1909
|
-
|
|
1910
|
-
|
|
1911
|
-
## antd API
|
|
1912
|
-
|
|
1913
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1914
|
-
|
|
1915
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1916
|
-
|--------|--------|--------|--------|--------|
|
|
1917
|
-
| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | 4.17.0 |
|
|
1918
|
-
| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | 4.17.0 |
|
|
1919
|
-
| autoFocus | 自动获取焦点 | boolean | false | - |
|
|
1920
|
-
| changeOnBlur | 是否在失去焦点时，触发 | boolean | true | 5.11.0 |
|
|
1921
|
-
| changeOnWheel | 允许鼠标滚轮改变数值 | boolean | - | 5.14.0 |
|
|
1922
|
-
| controls | 是否显示增减按钮，也可设置自定义箭头图标 | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
|
|
1923
|
-
| decimalSeparator | 小数点 | string | - | - |
|
|
1924
|
-
| placeholder | 占位符 | string | - | |
|
|
1925
|
-
| defaultValue | 初始值 | number | - | - |
|
|
1926
|
-
| disabled | 禁用 | boolean | false | - |
|
|
1927
|
-
| formatter | 指定输入框展示值的格式 | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - | info: 4.17.0 |
|
|
1928
|
-
| keyboard | 是否启用键盘快捷行为 | boolean | true | 4.12.0 |
|
|
1929
|
-
| max | 最大值 | number | | - |
|
|
1930
|
-
| min | 最小值 | number | | - |
|
|
1931
|
-
| parser | 指定从 | function(string): number | - | - |
|
|
1932
|
-
| precision | 数值精度，配置 | number | - | - |
|
|
1933
|
-
| readOnly | 只读 | boolean | false | - |
|
|
1934
|
-
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
1935
|
-
| prefix | 带有前缀图标的 input | ReactNode | - | 4.17.0 |
|
|
1936
|
-
| suffix | 带有后缀图标的 input | ReactNode | - | 5.20.0 |
|
|
1937
|
-
| size | 输入框大小 | large | - | - |
|
|
1938
|
-
| step | 每次改变步数，可以为小数 | number \| string | 1 | - |
|
|
1939
|
-
| stringMode | 字符值模式，开启后支持高精度小数。同时 | boolean | false | 4.13.0 |
|
|
1940
|
-
| value | 当前值 | number | - | - |
|
|
1941
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
1942
|
-
| onChange | 变化回调 | function(value: number \| string \| null) | - | - |
|
|
1943
|
-
| onPressEnter | 按下回车的回调 | function(e) | - | - |
|
|
1944
|
-
| onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 |
|
|
1945
|
-
|
|
1946
|
-
|
|
1947
|
-
## Ref
|
|
1948
|
-
|
|
1949
|
-
| 名称 | 说明 | 参数 | 版本 |
|
|
1950
|
-
|--------|--------|--------|--------|
|
|
1951
|
-
| blur() | 移除焦点 | - | |
|
|
1952
|
-
| focus() | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | cursor - 5.22.0 |
|
|
1953
|
-
| nativeElement | 获取原生 DOM 元素 | - | 5.17.3 |
|
|
1954
|
-
|
|
1955
|
-
|
|
1956
|
-
|
|
1957
|
-
|
|
1958
1905
|
<DemoTitle title="Image" desc="可预览的图片">
|
|
1959
1906
|
#### API
|
|
1960
1907
|
|
|
@@ -2122,6 +2069,59 @@ type TransformAction =
|
|
|
2122
2069
|
|
|
2123
2070
|
|
|
2124
2071
|
|
|
2072
|
+
<DemoTitle title="InputNumber" desc="通过鼠标或键盘，输入范围内的数值。">
|
|
2073
|
+
#### API
|
|
2074
|
+
|
|
2075
|
+
<AntdApiRef url="https://ant.design/components/input-number-cn/#api"></AntdApiRef>
|
|
2076
|
+
|
|
2077
|
+
|
|
2078
|
+
## antd API
|
|
2079
|
+
|
|
2080
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2081
|
+
|
|
2082
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2083
|
+
|--------|--------|--------|--------|--------|
|
|
2084
|
+
| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | 4.17.0 |
|
|
2085
|
+
| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | 4.17.0 |
|
|
2086
|
+
| autoFocus | 自动获取焦点 | boolean | false | - |
|
|
2087
|
+
| changeOnBlur | 是否在失去焦点时，触发 | boolean | true | 5.11.0 |
|
|
2088
|
+
| changeOnWheel | 允许鼠标滚轮改变数值 | boolean | - | 5.14.0 |
|
|
2089
|
+
| controls | 是否显示增减按钮，也可设置自定义箭头图标 | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
|
|
2090
|
+
| decimalSeparator | 小数点 | string | - | - |
|
|
2091
|
+
| placeholder | 占位符 | string | - | |
|
|
2092
|
+
| defaultValue | 初始值 | number | - | - |
|
|
2093
|
+
| disabled | 禁用 | boolean | false | - |
|
|
2094
|
+
| formatter | 指定输入框展示值的格式 | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - | info: 4.17.0 |
|
|
2095
|
+
| keyboard | 是否启用键盘快捷行为 | boolean | true | 4.12.0 |
|
|
2096
|
+
| max | 最大值 | number | | - |
|
|
2097
|
+
| min | 最小值 | number | | - |
|
|
2098
|
+
| parser | 指定从 | function(string): number | - | - |
|
|
2099
|
+
| precision | 数值精度，配置 | number | - | - |
|
|
2100
|
+
| readOnly | 只读 | boolean | false | - |
|
|
2101
|
+
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
2102
|
+
| prefix | 带有前缀图标的 input | ReactNode | - | 4.17.0 |
|
|
2103
|
+
| suffix | 带有后缀图标的 input | ReactNode | - | 5.20.0 |
|
|
2104
|
+
| size | 输入框大小 | large | - | - |
|
|
2105
|
+
| step | 每次改变步数，可以为小数 | number \| string | 1 | - |
|
|
2106
|
+
| stringMode | 字符值模式，开启后支持高精度小数。同时 | boolean | false | 4.13.0 |
|
|
2107
|
+
| value | 当前值 | number | - | - |
|
|
2108
|
+
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
2109
|
+
| onChange | 变化回调 | function(value: number \| string \| null) | - | - |
|
|
2110
|
+
| onPressEnter | 按下回车的回调 | function(e) | - | - |
|
|
2111
|
+
| onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 |
|
|
2112
|
+
|
|
2113
|
+
|
|
2114
|
+
## Ref
|
|
2115
|
+
|
|
2116
|
+
| 名称 | 说明 | 参数 | 版本 |
|
|
2117
|
+
|--------|--------|--------|--------|
|
|
2118
|
+
| blur() | 移除焦点 | - | |
|
|
2119
|
+
| focus() | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | cursor - 5.22.0 |
|
|
2120
|
+
| nativeElement | 获取原生 DOM 元素 | - | 5.17.3 |
|
|
2121
|
+
|
|
2122
|
+
|
|
2123
|
+
|
|
2124
|
+
|
|
2125
2125
|
<DemoTitle title="IconButton" desc="以图标为核心的轻量按钮组件，用于触发操作。">
|
|
2126
2126
|
#### API
|
|
2127
2127
|
|
|
@@ -2168,59 +2168,6 @@ type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' |
|
|
|
2168
2168
|
|
|
2169
2169
|
|
|
2170
2170
|
|
|
2171
|
-
<DemoTitle title="FloatButton" desc="用于网站上的全局功能；无论浏览到何处都可以看见的按钮。">
|
|
2172
|
-
#### API
|
|
2173
|
-
|
|
2174
|
-
<AntdApiRef url="https://ant.design/components/float-button-cn/#api"></AntdApiRef>
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
## antd API
|
|
2178
|
-
|
|
2179
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2180
|
-
|
|
2181
|
-
自 `antd@5.0.0` 版本开始提供该组件。
|
|
2182
|
-
|
|
2183
|
-
### 共同的 API
|
|
2184
|
-
|
|
2185
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2186
|
-
|--------|--------|--------|--------|--------|
|
|
2187
|
-
| icon | 自定义图标 | ReactNode | - | |
|
|
2188
|
-
| description | 文字及其它内容 | ReactNode | - | |
|
|
2189
|
-
| tooltip | 气泡卡片的内容 | ReactNode \| | - | TooltipProps: 5.25.0 |
|
|
2190
|
-
| type | 设置按钮类型 | default | default | |
|
|
2191
|
-
| shape | 设置按钮形状 | circle | circle | |
|
|
2192
|
-
| onClick | 点击按钮时的回调 | (event) => void | - | |
|
|
2193
|
-
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2194
|
-
| target | 相当于 a 标签的 target 属性，href 存在时生效 | string | - | |
|
|
2195
|
-
| htmlType | 设置 | submit | button | 5.21.0 |
|
|
2196
|
-
| badge | 带徽标数字的悬浮按钮（不支持 | | - | 5.4.0 |
|
|
2197
|
-
|
|
2198
|
-
|
|
2199
|
-
### FloatButton.Group
|
|
2200
|
-
|
|
2201
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2202
|
-
|--------|--------|--------|--------|--------|
|
|
2203
|
-
| shape | 设置包含的 FloatButton 按钮形状 | circle | circle | |
|
|
2204
|
-
| trigger | 触发方式（有触发方式为菜单模式） | click | - | |
|
|
2205
|
-
| open | 受控展开，需配合 trigger 一起使用 | boolean | - | |
|
|
2206
|
-
| closeIcon | 自定义关闭按钮 | React.ReactNode | | |
|
|
2207
|
-
| placement | 自定义菜单弹出位置 | top | top | 5.21.0 |
|
|
2208
|
-
| onOpenChange | 展开收起时的回调，需配合 trigger 一起使用 | (open: boolean) => void | - | |
|
|
2209
|
-
| onClick | 点击按钮时的回调（仅在菜单模式中有效） | (event) => void | - | 5.3.0 |
|
|
2210
|
-
|
|
2211
|
-
|
|
2212
|
-
### FloatButton.BackTop
|
|
2213
|
-
|
|
2214
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2215
|
-
|--------|--------|--------|--------|--------|
|
|
2216
|
-
| duration | 回到顶部所需时间（ms） | number | 450 | |
|
|
2217
|
-
| target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window | |
|
|
2218
|
-
| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |
|
|
2219
|
-
| onClick | 点击按钮的回调函数 | () => void | - | |
|
|
2220
|
-
|
|
2221
|
-
|
|
2222
|
-
|
|
2223
|
-
|
|
2224
2171
|
<DemoTitle title="Form" desc="高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。">
|
|
2225
2172
|
#### API
|
|
2226
2173
|
|
|
@@ -2947,6 +2894,7 @@ const dividerItem = {
|
|
|
2947
2894
|
\| 'noVideo'
|
|
2948
2895
|
\| 'noAccess'
|
|
2949
2896
|
\| 'error'
|
|
2897
|
+
\| 'noChat'
|
|
2950
2898
|
\| 'noModel'
|
|
2951
2899
|
\| 'noApp'
|
|
2952
2900
|
\| 'success'
|
|
@@ -2969,8 +2917,61 @@ const dividerItem = {
|
|
|
2969
2917
|
| autoFit | 是否自适应容器宽度，当容器宽度小于 size 时自动缩放 | boolean | false |
|
|
2970
2918
|
|
|
2971
2919
|
|
|
2972
|
-
<AntdApiRef url="https://ant.design/components/empty-cn/#api"></AntdApiRef>
|
|
2920
|
+
<AntdApiRef url="https://ant.design/components/empty-cn/#api"></AntdApiRef>
|
|
2921
|
+
|
|
2922
|
+
|
|
2923
|
+
|
|
2924
|
+
|
|
2925
|
+
|
|
2926
|
+
<DemoTitle title="FloatButton" desc="用于网站上的全局功能；无论浏览到何处都可以看见的按钮。">
|
|
2927
|
+
#### API
|
|
2928
|
+
|
|
2929
|
+
<AntdApiRef url="https://ant.design/components/float-button-cn/#api"></AntdApiRef>
|
|
2930
|
+
|
|
2931
|
+
|
|
2932
|
+
## antd API
|
|
2933
|
+
|
|
2934
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2935
|
+
|
|
2936
|
+
自 `antd@5.0.0` 版本开始提供该组件。
|
|
2937
|
+
|
|
2938
|
+
### 共同的 API
|
|
2939
|
+
|
|
2940
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2941
|
+
|--------|--------|--------|--------|--------|
|
|
2942
|
+
| icon | 自定义图标 | ReactNode | - | |
|
|
2943
|
+
| description | 文字及其它内容 | ReactNode | - | |
|
|
2944
|
+
| tooltip | 气泡卡片的内容 | ReactNode \| | - | TooltipProps: 5.25.0 |
|
|
2945
|
+
| type | 设置按钮类型 | default | default | |
|
|
2946
|
+
| shape | 设置按钮形状 | circle | circle | |
|
|
2947
|
+
| onClick | 点击按钮时的回调 | (event) => void | - | |
|
|
2948
|
+
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2949
|
+
| target | 相当于 a 标签的 target 属性，href 存在时生效 | string | - | |
|
|
2950
|
+
| htmlType | 设置 | submit | button | 5.21.0 |
|
|
2951
|
+
| badge | 带徽标数字的悬浮按钮（不支持 | | - | 5.4.0 |
|
|
2952
|
+
|
|
2953
|
+
|
|
2954
|
+
### FloatButton.Group
|
|
2955
|
+
|
|
2956
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2957
|
+
|--------|--------|--------|--------|--------|
|
|
2958
|
+
| shape | 设置包含的 FloatButton 按钮形状 | circle | circle | |
|
|
2959
|
+
| trigger | 触发方式（有触发方式为菜单模式） | click | - | |
|
|
2960
|
+
| open | 受控展开，需配合 trigger 一起使用 | boolean | - | |
|
|
2961
|
+
| closeIcon | 自定义关闭按钮 | React.ReactNode | | |
|
|
2962
|
+
| placement | 自定义菜单弹出位置 | top | top | 5.21.0 |
|
|
2963
|
+
| onOpenChange | 展开收起时的回调，需配合 trigger 一起使用 | (open: boolean) => void | - | |
|
|
2964
|
+
| onClick | 点击按钮时的回调（仅在菜单模式中有效） | (event) => void | - | 5.3.0 |
|
|
2965
|
+
|
|
2966
|
+
|
|
2967
|
+
### FloatButton.BackTop
|
|
2973
2968
|
|
|
2969
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2970
|
+
|--------|--------|--------|--------|--------|
|
|
2971
|
+
| duration | 回到顶部所需时间（ms） | number | 450 | |
|
|
2972
|
+
| target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window | |
|
|
2973
|
+
| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |
|
|
2974
|
+
| onClick | 点击按钮的回调函数 | () => void | - | |
|
|
2974
2975
|
|
|
2975
2976
|
|
|
2976
2977
|
|
|
@@ -3077,6 +3078,77 @@ span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem
|
|
|
3077
3078
|
|
|
3078
3079
|
|
|
3079
3080
|
|
|
3081
|
+
<DemoTitle title="CollapsePanel" desc="折叠面板">
|
|
3082
|
+
#### API
|
|
3083
|
+
|
|
3084
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3085
|
+
|--------|--------|--------|--------|
|
|
3086
|
+
| collapsedHeight | 收起状态下显示的内容高度 | number | 0 |
|
|
3087
|
+
| expandedHeight | 展开状态下的内容高度，设置后内容超出时可滚动，不设置则自适应内容高度 | number | 300 |
|
|
3088
|
+
| title | 面板标题 | string \| React.ReactNode | "" |
|
|
3089
|
+
| expandOnPanelClick | 是否允许点击整个面板进行展开 | boolean | false |
|
|
3090
|
+
| extra | 面板右侧内容 | React.ReactNode | |
|
|
3091
|
+
| children | 面板内容 | React.ReactNode | |
|
|
3092
|
+
| defaultExpanded | 是否默认展开 | boolean | false |
|
|
3093
|
+
| classNames | 语义化的classNames | Partial> | |
|
|
3094
|
+
| styles | 语义化的styles | Partial<
|
|
3095
|
+
Record
|
|
3096
|
+
> | |
|
|
3097
|
+
|
|
3098
|
+
|
|
3099
|
+
|
|
3100
|
+
## antd API
|
|
3101
|
+
|
|
3102
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3103
|
+
|
|
3104
|
+
### Collapse
|
|
3105
|
+
|
|
3106
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3107
|
+
|--------|--------|--------|--------|--------|
|
|
3108
|
+
| accordion | 手风琴模式 | boolean | false | |
|
|
3109
|
+
| activeKey | 当前激活 tab 面板的 key | string[] \| string | | |
|
|
3110
|
+
| bordered | 带边框风格的折叠面板 | boolean | true | |
|
|
3111
|
+
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 |
|
|
3112
|
+
| defaultActiveKey | 初始化选中面板的 key | string[] \| string | - | |
|
|
3113
|
+
| destroyOnHidden | 销毁折叠隐藏的面板 | boolean | false | 5.25.0 |
|
|
3114
|
+
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
|
|
3115
|
+
| expandIconPosition | 设置图标位置 | start | - | 4.21.0 |
|
|
3116
|
+
| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
|
|
3117
|
+
| size | 设置折叠面板大小 | large | middle | 5.2.0 |
|
|
3118
|
+
| onChange | 切换面板的回调 | function | - | |
|
|
3119
|
+
| items | 折叠项目内容 | | - | 5.6.0 |
|
|
3120
|
+
|
|
3121
|
+
|
|
3122
|
+
### ItemType
|
|
3123
|
+
|
|
3124
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3125
|
+
|--------|--------|--------|--------|--------|
|
|
3126
|
+
| classNames | 语义化结构 className | | - | 5.21.0 |
|
|
3127
|
+
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | |
|
|
3128
|
+
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3129
|
+
| key | 对应 activeKey | string \| number | - | |
|
|
3130
|
+
| label | 面板标题 | ReactNode | - | - |
|
|
3131
|
+
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3132
|
+
| styles | 语义化结构 style | | - | 5.21.0 |
|
|
3133
|
+
|
|
3134
|
+
|
|
3135
|
+
### Collapse.Panel
|
|
3136
|
+
|
|
3137
|
+
<!-- prettier-ignore -->
|
|
3138
|
+
<Container type="warning" title="已废弃">
|
|
3139
|
+
版本 >= 5.6.0 时请使用 items 方式配置面板。
|
|
3140
|
+
</Container>
|
|
3141
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3142
|
+
|--------|--------|--------|--------|--------|
|
|
3143
|
+
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 (icon: 4.24.0) |
|
|
3144
|
+
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3145
|
+
| header | 面板标题 | ReactNode | - | |
|
|
3146
|
+
| key | 对应 activeKey | string \| number | - | |
|
|
3147
|
+
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3148
|
+
|
|
3149
|
+
|
|
3150
|
+
|
|
3151
|
+
|
|
3080
3152
|
<DemoTitle title="DatePicker" desc="输入或选择时间的控件。">
|
|
3081
3153
|
#### API
|
|
3082
3154
|
|
|
@@ -3299,159 +3371,17 @@ export type FormatType =
|
|
|
3299
3371
|
|
|
3300
3372
|
|
|
3301
3373
|
|
|
3302
|
-
<DemoTitle title="CollapsePanel" desc="折叠面板">
|
|
3303
|
-
#### API
|
|
3304
|
-
|
|
3305
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3306
|
-
|--------|--------|--------|--------|
|
|
3307
|
-
| collapsedHeight | 收起状态下显示的内容高度 | number | 0 |
|
|
3308
|
-
| expandedHeight | 展开状态下的内容高度，设置后内容超出时可滚动，不设置则自适应内容高度 | number | 300 |
|
|
3309
|
-
| title | 面板标题 | string \| React.ReactNode | "" |
|
|
3310
|
-
| expandOnPanelClick | 是否允许点击整个面板进行展开 | boolean | false |
|
|
3311
|
-
| extra | 面板右侧内容 | React.ReactNode | |
|
|
3312
|
-
| children | 面板内容 | React.ReactNode | |
|
|
3313
|
-
| defaultExpanded | 是否默认展开 | boolean | false |
|
|
3314
|
-
| classNames | 语义化的classNames | Partial> | |
|
|
3315
|
-
| styles | 语义化的styles | Partial<
|
|
3316
|
-
Record
|
|
3317
|
-
> | |
|
|
3318
|
-
|
|
3319
|
-
|
|
3320
|
-
|
|
3321
|
-
## antd API
|
|
3322
|
-
|
|
3323
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3324
|
-
|
|
3325
|
-
### Collapse
|
|
3326
|
-
|
|
3327
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3328
|
-
|--------|--------|--------|--------|--------|
|
|
3329
|
-
| accordion | 手风琴模式 | boolean | false | |
|
|
3330
|
-
| activeKey | 当前激活 tab 面板的 key | string[] \| string | | |
|
|
3331
|
-
| bordered | 带边框风格的折叠面板 | boolean | true | |
|
|
3332
|
-
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 |
|
|
3333
|
-
| defaultActiveKey | 初始化选中面板的 key | string[] \| string | - | |
|
|
3334
|
-
| destroyOnHidden | 销毁折叠隐藏的面板 | boolean | false | 5.25.0 |
|
|
3335
|
-
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
|
|
3336
|
-
| expandIconPosition | 设置图标位置 | start | - | 4.21.0 |
|
|
3337
|
-
| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
|
|
3338
|
-
| size | 设置折叠面板大小 | large | middle | 5.2.0 |
|
|
3339
|
-
| onChange | 切换面板的回调 | function | - | |
|
|
3340
|
-
| items | 折叠项目内容 | | - | 5.6.0 |
|
|
3341
|
-
|
|
3342
|
-
|
|
3343
|
-
### ItemType
|
|
3344
|
-
|
|
3345
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3346
|
-
|--------|--------|--------|--------|--------|
|
|
3347
|
-
| classNames | 语义化结构 className | | - | 5.21.0 |
|
|
3348
|
-
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | |
|
|
3349
|
-
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3350
|
-
| key | 对应 activeKey | string \| number | - | |
|
|
3351
|
-
| label | 面板标题 | ReactNode | - | - |
|
|
3352
|
-
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3353
|
-
| styles | 语义化结构 style | | - | 5.21.0 |
|
|
3354
|
-
|
|
3355
|
-
|
|
3356
|
-
### Collapse.Panel
|
|
3357
|
-
|
|
3358
|
-
<!-- prettier-ignore -->
|
|
3359
|
-
<Container type="warning" title="已废弃">
|
|
3360
|
-
版本 >= 5.6.0 时请使用 items 方式配置面板。
|
|
3361
|
-
</Container>
|
|
3362
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3363
|
-
|--------|--------|--------|--------|--------|
|
|
3364
|
-
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 (icon: 4.24.0) |
|
|
3365
|
-
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3366
|
-
| header | 面板标题 | ReactNode | - | |
|
|
3367
|
-
| key | 对应 activeKey | string \| number | - | |
|
|
3368
|
-
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3369
|
-
|
|
3370
|
-
|
|
3371
|
-
|
|
3372
|
-
|
|
3373
3374
|
<DemoTitle title="CodeBlock" desc="代码块">
|
|
3374
3375
|
#### API
|
|
3375
3376
|
|
|
3376
3377
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3377
3378
|
|--------|--------|--------|--------|
|
|
3378
3379
|
| language | 语言 | string \| string[] | (必填) |
|
|
3379
|
-
| value | 值 | string |
|
|
3380
|
+
| value | 值 | string | |
|
|
3380
3381
|
| className | 类名 | string | |
|
|
3381
3382
|
| theme | 主题 | 'dark' \| 'light' | |
|
|
3382
3383
|
| readOnly | 只读 | boolean | |
|
|
3383
|
-
| onChange | | (value
|
|
3384
|
-
|
|
3385
|
-
|
|
3386
|
-
|
|
3387
|
-
|
|
3388
|
-
<DemoTitle title="Checkbox" desc="收集用户的多项选择。">
|
|
3389
|
-
#### API
|
|
3390
|
-
|
|
3391
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3392
|
-
|--------|--------|--------|--------|
|
|
3393
|
-
| description | 描述文本 | string | |
|
|
3394
|
-
| descriptionClassName | 描述文本的样式类名 | string | |
|
|
3395
|
-
| descriptionStyle | 描述文本的内联样式 | React.CSSProperties | |
|
|
3396
|
-
|
|
3397
|
-
|
|
3398
|
-
<AntdApiRef url="https://ant.design/components/checkbox-cn/#api"></AntdApiRef>
|
|
3399
|
-
|
|
3400
|
-
|
|
3401
|
-
## antd API
|
|
3402
|
-
|
|
3403
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3404
|
-
|
|
3405
|
-
#### Checkbox
|
|
3406
|
-
|
|
3407
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3408
|
-
|--------|--------|--------|--------|--------|
|
|
3409
|
-
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
3410
|
-
| checked | 指定当前是否选中 | boolean | false | |
|
|
3411
|
-
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
3412
|
-
| disabled | 失效状态 | boolean | false | |
|
|
3413
|
-
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false | |
|
|
3414
|
-
| onChange | 变化时的回调函数 | (e: CheckboxChangeEvent) => void | - | |
|
|
3415
|
-
| onBlur | 失去焦点时的回调 | function() | - | |
|
|
3416
|
-
| onFocus | 获得焦点时的回调 | function() | - | |
|
|
3417
|
-
|
|
3418
|
-
|
|
3419
|
-
#### Checkbox.Group
|
|
3420
|
-
|
|
3421
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3422
|
-
|--------|--------|--------|--------|--------|
|
|
3423
|
-
| defaultValue | 默认选中的选项 | (string \| number)[] | [] | |
|
|
3424
|
-
| disabled | 整组失效 | boolean | false | |
|
|
3425
|
-
| name | CheckboxGroup 下所有 | string | - | |
|
|
3426
|
-
| options | 指定可选项 | string[] \| number[] \| Option[] | [] | |
|
|
3427
|
-
| value | 指定选中的选项 | (string \| number \| boolean)[] | [] | |
|
|
3428
|
-
| title | 选项的 title | string | - | |
|
|
3429
|
-
| className | 选项的类名 | string | - | 5.25.0 |
|
|
3430
|
-
| style | 选项的样式 | React.CSSProperties | - | |
|
|
3431
|
-
| onChange | 变化时的回调函数 | (checkedValue: T[]) => void | - | |
|
|
3432
|
-
|
|
3433
|
-
|
|
3434
|
-
##### Option
|
|
3435
|
-
|
|
3436
|
-
|
|
3437
|
-
```typescript
|
|
3438
|
-
interface Option {
|
|
3439
|
-
label: string;
|
|
3440
|
-
value: string;
|
|
3441
|
-
disabled?: boolean;
|
|
3442
|
-
}
|
|
3443
|
-
```
|
|
3444
|
-
|
|
3445
|
-
|
|
3446
|
-
### 方法
|
|
3447
|
-
|
|
3448
|
-
#### Checkbox
|
|
3449
|
-
|
|
3450
|
-
| 名称 | 描述 | 版本 |
|
|
3451
|
-
|--------|--------|--------|
|
|
3452
|
-
| blur() | 移除焦点 | |
|
|
3453
|
-
| focus() | 获取焦点 | |
|
|
3454
|
-
| nativeElement | 返回 Checkbox 的 DOM 节点 | 5.17.3 |
|
|
3384
|
+
| onChange | | (value?: string) => void | |
|
|
3455
3385
|
|
|
3456
3386
|
|
|
3457
3387
|
|
|
@@ -3514,58 +3444,74 @@ interface Option {
|
|
|
3514
3444
|
|
|
3515
3445
|
|
|
3516
3446
|
|
|
3517
|
-
<DemoTitle title="
|
|
3518
|
-
#### API
|
|
3519
|
-
|
|
3520
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3521
|
-
|--------|--------|--------|--------|
|
|
3522
|
-
|
|
|
3523
|
-
|
|
|
3524
|
-
|
|
3525
|
-
\| 'link'
|
|
3526
|
-
\| 'text'
|
|
3527
|
-
\| 'default'
|
|
3528
|
-
\| 'primaryLess'
|
|
3529
|
-
\| 'textCompact' | 'deafult' |
|
|
3530
|
-
| tooltipContent | hover上去tooltip的内容 | string \| ReactNode | |
|
|
3531
|
-
| iconType | 百炼图标iconfont的key，依赖ConfigProvider传入的iconfont，例如bl-icon-add | string | |
|
|
3532
|
-
| iconSize | 图标大小 | SparkIconFontProps['size'] | |
|
|
3447
|
+
<DemoTitle title="Checkbox" desc="收集用户的多项选择。">
|
|
3448
|
+
#### API
|
|
3449
|
+
|
|
3450
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3451
|
+
|--------|--------|--------|--------|
|
|
3452
|
+
| description | 描述文本 | string | |
|
|
3453
|
+
| descriptionClassName | 描述文本的样式类名 | string | |
|
|
3454
|
+
| descriptionStyle | 描述文本的内联样式 | React.CSSProperties | |
|
|
3533
3455
|
|
|
3534
|
-
|
|
3456
|
+
|
|
3457
|
+
<AntdApiRef url="https://ant.design/components/checkbox-cn/#api"></AntdApiRef>
|
|
3535
3458
|
|
|
3536
3459
|
|
|
3537
3460
|
## antd API
|
|
3538
3461
|
|
|
3539
3462
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3540
3463
|
|
|
3541
|
-
|
|
3464
|
+
#### Checkbox
|
|
3542
3465
|
|
|
3543
|
-
|
|
3466
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3467
|
+
|--------|--------|--------|--------|--------|
|
|
3468
|
+
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
3469
|
+
| checked | 指定当前是否选中 | boolean | false | |
|
|
3470
|
+
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
3471
|
+
| disabled | 失效状态 | boolean | false | |
|
|
3472
|
+
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false | |
|
|
3473
|
+
| onChange | 变化时的回调函数 | (e: CheckboxChangeEvent) => void | - | |
|
|
3474
|
+
| onBlur | 失去焦点时的回调 | function() | - | |
|
|
3475
|
+
| onFocus | 获得焦点时的回调 | function() | - | |
|
|
3544
3476
|
|
|
3545
|
-
|
|
3477
|
+
|
|
3478
|
+
#### Checkbox.Group
|
|
3479
|
+
|
|
3480
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3546
3481
|
|--------|--------|--------|--------|--------|
|
|
3547
|
-
|
|
|
3548
|
-
|
|
|
3549
|
-
|
|
|
3550
|
-
|
|
|
3551
|
-
|
|
|
3552
|
-
|
|
|
3553
|
-
|
|
|
3554
|
-
|
|
|
3555
|
-
|
|
|
3556
|
-
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
3557
|
-
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
3558
|
-
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
3559
|
-
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
3560
|
-
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
3561
|
-
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
3482
|
+
| defaultValue | 默认选中的选项 | (string \| number)[] | [] | |
|
|
3483
|
+
| disabled | 整组失效 | boolean | false | |
|
|
3484
|
+
| name | CheckboxGroup 下所有 | string | - | |
|
|
3485
|
+
| options | 指定可选项 | string[] \| number[] \| Option[] | [] | |
|
|
3486
|
+
| value | 指定选中的选项 | (string \| number \| boolean)[] | [] | |
|
|
3487
|
+
| title | 选项的 title | string | - | |
|
|
3488
|
+
| className | 选项的类名 | string | - | 5.25.0 |
|
|
3489
|
+
| style | 选项的样式 | React.CSSProperties | - | |
|
|
3490
|
+
| onChange | 变化时的回调函数 | (checkedValue: T[]) => void | - | |
|
|
3562
3491
|
|
|
3563
3492
|
|
|
3564
|
-
|
|
3493
|
+
##### Option
|
|
3565
3494
|
|
|
3566
|
-
### PresetColors
|
|
3567
3495
|
|
|
3568
|
-
|
|
3496
|
+
```typescript
|
|
3497
|
+
interface Option {
|
|
3498
|
+
label: string;
|
|
3499
|
+
value: string;
|
|
3500
|
+
disabled?: boolean;
|
|
3501
|
+
}
|
|
3502
|
+
```
|
|
3503
|
+
|
|
3504
|
+
|
|
3505
|
+
### 方法
|
|
3506
|
+
|
|
3507
|
+
#### Checkbox
|
|
3508
|
+
|
|
3509
|
+
| 名称 | 描述 | 版本 |
|
|
3510
|
+
|--------|--------|--------|
|
|
3511
|
+
| blur() | 移除焦点 | |
|
|
3512
|
+
| focus() | 获取焦点 | |
|
|
3513
|
+
| nativeElement | 返回 Checkbox 的 DOM 节点 | 5.17.3 |
|
|
3514
|
+
|
|
3569
3515
|
|
|
3570
3516
|
|
|
3571
3517
|
|
|
@@ -3632,6 +3578,61 @@ type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' |
|
|
|
3632
3578
|
|
|
3633
3579
|
|
|
3634
3580
|
|
|
3581
|
+
<DemoTitle title="Button" desc="按钮用于开始一个即时操作。">
|
|
3582
|
+
#### API
|
|
3583
|
+
|
|
3584
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3585
|
+
|--------|--------|--------|--------|
|
|
3586
|
+
| size | 按钮大小 | 'small' \| 'middle' \| 'large' | 'middle' |
|
|
3587
|
+
| type | 类型 | \| 'primary'
|
|
3588
|
+
\| 'dashed'
|
|
3589
|
+
\| 'link'
|
|
3590
|
+
\| 'text'
|
|
3591
|
+
\| 'default'
|
|
3592
|
+
\| 'primaryLess'
|
|
3593
|
+
\| 'textCompact' | 'deafult' |
|
|
3594
|
+
| tooltipContent | hover上去tooltip的内容 | string \| ReactNode | |
|
|
3595
|
+
| iconType | 百炼图标iconfont的key，依赖ConfigProvider传入的iconfont，例如bl-icon-add | string | |
|
|
3596
|
+
| iconSize | 图标大小 | SparkIconFontProps['size'] | |
|
|
3597
|
+
|
|
3598
|
+
<AntdApiRef url="https://ant.design/components/button-cn/#api"></AntdApiRef>
|
|
3599
|
+
|
|
3600
|
+
|
|
3601
|
+
## antd API
|
|
3602
|
+
|
|
3603
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3604
|
+
|
|
3605
|
+
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
3606
|
+
|
|
3607
|
+
按钮的属性说明如下：
|
|
3608
|
+
|
|
3609
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
3610
|
+
|--------|--------|--------|--------|--------|
|
|
3611
|
+
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
3612
|
+
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
3613
|
+
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
3614
|
+
| color | 设置按钮的颜色 | default | - | default |
|
|
3615
|
+
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
3616
|
+
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
3617
|
+
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
3618
|
+
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
3619
|
+
| htmlType | 设置 | submit | button | |
|
|
3620
|
+
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
3621
|
+
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
3622
|
+
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
3623
|
+
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
3624
|
+
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
3625
|
+
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
3626
|
+
|
|
3627
|
+
|
|
3628
|
+
支持原生 button 的其他所有属性。
|
|
3629
|
+
|
|
3630
|
+
### PresetColors
|
|
3631
|
+
|
|
3632
|
+
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
3633
|
+
|
|
3634
|
+
|
|
3635
|
+
|
|
3635
3636
|
<DemoTitle title="Breadcrumb" desc="显示当前页面在系统层级结构中的位置，并能向上返回。">
|
|
3636
3637
|
#### API
|
|
3637
3638
|
|
|
@@ -3790,6 +3791,15 @@ Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fa
|
|
|
3790
3791
|
|
|
3791
3792
|
|
|
3792
3793
|
|
|
3794
|
+
<DemoTitle title="Audio" desc="音频展示">
|
|
3795
|
+
#### API
|
|
3796
|
+
|
|
3797
|
+
ApiParser解析结果为空
|
|
3798
|
+
|
|
3799
|
+
|
|
3800
|
+
|
|
3801
|
+
|
|
3802
|
+
|
|
3793
3803
|
<DemoTitle title="Anchor" desc="用于跳转到页面指定位置。">
|
|
3794
3804
|
#### API
|
|
3795
3805
|
|
|
@@ -3843,49 +3853,6 @@ Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fa
|
|
|
3843
3853
|
|
|
3844
3854
|
|
|
3845
3855
|
|
|
3846
|
-
<DemoTitle title="Audio" desc="音频展示">
|
|
3847
|
-
#### API
|
|
3848
|
-
|
|
3849
|
-
ApiParser解析结果为空
|
|
3850
|
-
|
|
3851
|
-
|
|
3852
|
-
|
|
3853
|
-
|
|
3854
|
-
|
|
3855
|
-
<DemoTitle title="Alert" desc="向用户突出显示的重要提示信息。">
|
|
3856
|
-
#### API
|
|
3857
|
-
|
|
3858
|
-
<AntdApiRef url="https://ant.design/components/alert-cn/#api"></AntdApiRef>
|
|
3859
|
-
|
|
3860
|
-
|
|
3861
|
-
## antd API
|
|
3862
|
-
|
|
3863
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3864
|
-
|
|
3865
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3866
|
-
|--------|--------|--------|--------|--------|
|
|
3867
|
-
| action | 自定义操作项 | ReactNode | - | 4.9.0 |
|
|
3868
|
-
| afterClose | 关闭动画结束后触发的回调函数 | () => void | - | |
|
|
3869
|
-
| banner | 是否用作顶部公告 | boolean | false | |
|
|
3870
|
-
| closable | 可关闭配置，>=5.15.0: 支持 | boolean \| ({ closeIcon?: React.ReactNode } & React.AriaAttributes) | false | |
|
|
3871
|
-
| description | 警告提示的辅助性文字介绍 | ReactNode | - | |
|
|
3872
|
-
| icon | 自定义图标， | ReactNode | - | |
|
|
3873
|
-
| message | 警告提示内容 | ReactNode | - | |
|
|
3874
|
-
| showIcon | 是否显示辅助图标 | boolean | false， | |
|
|
3875
|
-
| type | 指定警告提示的样式，有四种选择 | string | info | |
|
|
3876
|
-
| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | - | |
|
|
3877
|
-
|
|
3878
|
-
|
|
3879
|
-
### Alert.ErrorBoundary
|
|
3880
|
-
|
|
3881
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3882
|
-
|--------|--------|--------|--------|--------|
|
|
3883
|
-
| description | 自定义错误内容，如果未指定会展示报错堆栈 | ReactNode | {{ error stack }} | |
|
|
3884
|
-
| message | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }} | |
|
|
3885
|
-
|
|
3886
|
-
|
|
3887
|
-
|
|
3888
|
-
|
|
3889
3856
|
<DemoTitle title="AlertDialog" desc="一种在界面中弹出的对话框，用来向用户传达重要信息，并引导其进行确认或取消等操作。">
|
|
3890
3857
|
#### API
|
|
3891
3858
|
|
|
@@ -4025,37 +3992,123 @@ browserHistory.listen(() => {
|
|
|
4025
3992
|
```
|
|
4026
3993
|
|
|
4027
3994
|
|
|
4028
|
-
### Modal.useModal()
|
|
3995
|
+
### Modal.useModal()
|
|
3996
|
+
|
|
3997
|
+
当你需要使用 Context 时，可以通过 `Modal.useModal` 创建一个 `contextHolder` 插入子节点中。通过 hooks 创建的临时 Modal 将会得到 `contextHolder` 所在位置的所有上下文。创建的 `modal` 对象拥有与 [`Modal.method`](#modalmethod) 相同的创建通知方法。
|
|
3998
|
+
|
|
3999
|
+
|
|
4000
|
+
```jsx
|
|
4001
|
+
const [modal, contextHolder] = Modal.useModal();
|
|
4002
|
+
|
|
4003
|
+
React.useEffect(() => {
|
|
4004
|
+
modal.confirm({
|
|
4005
|
+
// ...
|
|
4006
|
+
});
|
|
4007
|
+
}, []);
|
|
4008
|
+
|
|
4009
|
+
return <div>{contextHolder}</div>;
|
|
4010
|
+
```
|
|
4011
|
+
|
|
4012
|
+
|
|
4013
|
+
`modal.confirm` 返回方法：
|
|
4014
|
+
|
|
4015
|
+
|
|
4016
|
+
- `destroy`：销毁当前窗口
|
|
4017
|
+
- `update`：更新当前窗口
|
|
4018
|
+
- `then`：Promise 链式调用，支持 `await` 操作。该方法为 Hooks 仅有
|
|
4019
|
+
|
|
4020
|
+
|
|
4021
|
+
```tsx
|
|
4022
|
+
//点击 `onOk` 时返回 `true`，点击 `onCancel` 时返回 `false`
|
|
4023
|
+
const confirmed = await modal.confirm({ ... });
|
|
4024
|
+
```
|
|
4025
|
+
|
|
4026
|
+
|
|
4027
|
+
|
|
4028
|
+
|
|
4029
|
+
<DemoTitle title="Alert" desc="向用户突出显示的重要提示信息。">
|
|
4030
|
+
#### API
|
|
4031
|
+
|
|
4032
|
+
<AntdApiRef url="https://ant.design/components/alert-cn/#api"></AntdApiRef>
|
|
4033
|
+
|
|
4034
|
+
|
|
4035
|
+
## antd API
|
|
4036
|
+
|
|
4037
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
4038
|
+
|
|
4039
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
4040
|
+
|--------|--------|--------|--------|--------|
|
|
4041
|
+
| action | 自定义操作项 | ReactNode | - | 4.9.0 |
|
|
4042
|
+
| afterClose | 关闭动画结束后触发的回调函数 | () => void | - | |
|
|
4043
|
+
| banner | 是否用作顶部公告 | boolean | false | |
|
|
4044
|
+
| closable | 可关闭配置，>=5.15.0: 支持 | boolean \| ({ closeIcon?: React.ReactNode } & React.AriaAttributes) | false | |
|
|
4045
|
+
| description | 警告提示的辅助性文字介绍 | ReactNode | - | |
|
|
4046
|
+
| icon | 自定义图标， | ReactNode | - | |
|
|
4047
|
+
| message | 警告提示内容 | ReactNode | - | |
|
|
4048
|
+
| showIcon | 是否显示辅助图标 | boolean | false， | |
|
|
4049
|
+
| type | 指定警告提示的样式，有四种选择 | string | info | |
|
|
4050
|
+
| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | - | |
|
|
4051
|
+
|
|
4052
|
+
|
|
4053
|
+
### Alert.ErrorBoundary
|
|
4054
|
+
|
|
4055
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
4056
|
+
|--------|--------|--------|--------|--------|
|
|
4057
|
+
| description | 自定义错误内容，如果未指定会展示报错堆栈 | ReactNode | {{ error stack }} | |
|
|
4058
|
+
| message | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }} | |
|
|
4059
|
+
|
|
4060
|
+
|
|
4061
|
+
|
|
4062
|
+
|
|
4063
|
+
<div align="center"><a name="readme-top"></a>
|
|
4064
|
+
<img height="120" src="https://img.alicdn.com/imgextra/i1/O1CN01ipemFb1EzmZI9LiTe_!!6000000000423-55-tps-28-28.svg" style="border: none">
|
|
4065
|
+
<h1>Alibaba Cloud Spark Design</h1>
|
|
4066
|
+
</div>
|
|
4067
|
+
|
|
4068
|
+
# 概述
|
|
4069
|
+
|
|
4070
|
+
Alibaba Cloud Spark Design 是一个基于 Ant Design 的 React UI 组件库，包含丰富的基础组件和场景组件，专为构建优秀的 LLM 产品而设计。
|
|
4071
|
+
<br />
|
|
4072
|
+
<br />
|
|
4029
4073
|
|
|
4030
|
-
|
|
4074
|
+
## ✨ 特性
|
|
4031
4075
|
|
|
4032
4076
|
|
|
4033
|
-
|
|
4034
|
-
|
|
4077
|
+
- <img height="15" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"> 基于 Ant Design，兼容 Ant Design 生态系统。您可以无需修改代码即可切换到 Spark Design。
|
|
4078
|
+
- 🛡 使用 TypeScript 编写，具有可预测的静态类型。
|
|
4079
|
+
- 🧠 为 LLM 产品设计的各种场景组件。
|
|
4080
|
+
- 💡 与@agentscope-ai/chat 和 @agentscope-ai/flow 配合使用，构建企业级 LLM 应用。
|
|
4081
|
+
- 🎨 多种预设主题。
|
|
4082
|
+
- ☀️ 轻松切换明暗模式。
|
|
4035
4083
|
|
|
4036
|
-
|
|
4037
|
-
modal.confirm({
|
|
4038
|
-
// ...
|
|
4039
|
-
});
|
|
4040
|
-
}, []);
|
|
4084
|
+
## 📦 安装
|
|
4041
4085
|
|
|
4042
|
-
|
|
4086
|
+
|
|
4087
|
+
```bash
|
|
4088
|
+
npm install antd @agentscope-ai/icons @agentscope-ai/design --save
|
|
4043
4089
|
```
|
|
4044
4090
|
|
|
4045
4091
|
|
|
4046
|
-
|
|
4092
|
+
## Tree Shaking 支持
|
|
4047
4093
|
|
|
4094
|
+
@agentscope-ai/design 默认基于 ES 模块支持 tree shaking
|
|
4048
4095
|
|
|
4049
|
-
|
|
4050
|
-
- `update`：更新当前窗口
|
|
4051
|
-
- `then`：Promise 链式调用，支持 `await` 操作。该方法为 Hooks 仅有
|
|
4096
|
+
## TypeScript
|
|
4052
4097
|
|
|
4098
|
+
@agentscope-ai/chat 使用 TypeScript 编写并提供完整的定义文件。
|
|
4053
4099
|
|
|
4054
|
-
|
|
4055
|
-
|
|
4056
|
-
|
|
4057
|
-
```
|
|
4100
|
+
## 内置主题
|
|
4101
|
+
|
|
4102
|
+
我们提供四种内置主题：
|
|
4058
4103
|
|
|
4104
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
|
|
4105
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
|
|
4106
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
|
|
4107
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #676767;"></span> carbonDarkTheme（暗色模式）</div>
|
|
4108
|
+
|
|
4109
|
+
## 🏗️ 开源
|
|
4110
|
+
|
|
4111
|
+
[@agentscope-ai/design](https://www.npmjs.com/package/@agentscope-ai/design) 和 [@agentscope-ai/chat](https://www.npmjs.com/package/@agentscope-ai/chat) 正在积极推进开源，预计将在 2025 年底完成。目前，您可以通过 npm 访问我们的项目。
|
|
4059
4112
|
|
|
4060
4113
|
|
|
4061
4114
|
|
|
@@ -4192,96 +4245,20 @@ export default App;
|
|
|
4192
4245
|
|
|
4193
4246
|
|
|
4194
4247
|
|
|
4195
|
-
|
|
4196
|
-
<img height="120" src="https://img.alicdn.com/imgextra/i1/O1CN01ipemFb1EzmZI9LiTe_!!6000000000423-55-tps-28-28.svg" style="border: none">
|
|
4197
|
-
<h1>Alibaba Cloud Spark Design</h1>
|
|
4198
|
-
</div>
|
|
4199
|
-
|
|
4200
|
-
# 概述
|
|
4201
|
-
|
|
4202
|
-
Alibaba Cloud Spark Design 是一个基于 Ant Design 的 React UI 组件库，包含丰富的基础组件和场景组件，专为构建优秀的 LLM 产品而设计。
|
|
4203
|
-
<br />
|
|
4204
|
-
<br />
|
|
4205
|
-
|
|
4206
|
-
## ✨ 特性
|
|
4207
|
-
|
|
4208
|
-
|
|
4209
|
-
- <img height="15" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"> 基于 Ant Design，兼容 Ant Design 生态系统。您可以无需修改代码即可切换到 Spark Design。
|
|
4210
|
-
- 🛡 使用 TypeScript 编写，具有可预测的静态类型。
|
|
4211
|
-
- 🧠 为 LLM 产品设计的各种场景组件。
|
|
4212
|
-
- 💡 与@agentscope-ai/chat 和 @agentscope-ai/flow 配合使用，构建企业级 LLM 应用。
|
|
4213
|
-
- 🎨 多种预设主题。
|
|
4214
|
-
- ☀️ 轻松切换明暗模式。
|
|
4215
|
-
|
|
4216
|
-
## 📦 安装
|
|
4217
|
-
|
|
4218
|
-
|
|
4219
|
-
```bash
|
|
4220
|
-
npm install antd @agentscope-ai/icons @agentscope-ai/design --save
|
|
4221
|
-
```
|
|
4222
|
-
|
|
4223
|
-
|
|
4224
|
-
## Tree Shaking 支持
|
|
4225
|
-
|
|
4226
|
-
@agentscope-ai/design 默认基于 ES 模块支持 tree shaking
|
|
4227
|
-
|
|
4228
|
-
## TypeScript
|
|
4229
|
-
|
|
4230
|
-
@agentscope-ai/chat 使用 TypeScript 编写并提供完整的定义文件。
|
|
4231
|
-
|
|
4232
|
-
## 内置主题
|
|
4233
|
-
|
|
4234
|
-
我们提供四种内置主题：
|
|
4235
|
-
|
|
4236
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
|
|
4237
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
|
|
4238
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
|
|
4239
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #676767;"></span> carbonDarkTheme（暗色模式）</div>
|
|
4240
|
-
|
|
4241
|
-
## 🏗️ 开源
|
|
4242
|
-
|
|
4243
|
-
[@agentscope-ai/design](https://www.npmjs.com/package/@agentscope-ai/design) 和 [@agentscope-ai/chat](https://www.npmjs.com/package/@agentscope-ai/chat) 正在积极推进开源，预计将在 2025 年底完成。目前，您可以通过 npm 访问我们的项目。
|
|
4244
|
-
|
|
4245
|
-
|
|
4246
|
-
|
|
4247
|
-
# 使用
|
|
4248
|
-
|
|
4249
|
-
|
|
4250
|
-
|
|
4251
|
-
```tsx
|
|
4252
|
-
import { SparkLoadingLine } from '@agentscope-ai/icons';
|
|
4253
|
-
|
|
4254
|
-
export default () => {
|
|
4255
|
-
return (
|
|
4256
|
-
<SparkLoadingLine
|
|
4257
|
-
className="your-class-name"
|
|
4258
|
-
style={{ color: 'var(--sps-color-primary)' }}
|
|
4259
|
-
spin
|
|
4260
|
-
size={48}
|
|
4261
|
-
/>
|
|
4262
|
-
);
|
|
4263
|
-
};
|
|
4264
|
-
|
|
4265
|
-
```
|
|
4266
|
-
|
|
4267
|
-
基本用法
|
|
4268
|
-
|
|
4269
|
-
访问 [Icon Library](https://sparkdesign.agentscope.io/#/resources/icons) 查看全部 Icon
|
|
4270
|
-
|
|
4271
|
-
|
|
4272
|
-
|
|
4273
|
-
# 从零开始使用
|
|
4248
|
+
# 从 Antd 迁移
|
|
4274
4249
|
|
|
4275
4250
|
## 📦 安装
|
|
4276
4251
|
|
|
4277
4252
|
|
|
4278
4253
|
```bash
|
|
4279
|
-
$ npm install
|
|
4254
|
+
$ npm install @agentscope-ai/icons @agentscope-ai/design --save
|
|
4280
4255
|
```
|
|
4281
4256
|
|
|
4282
4257
|
|
|
4283
4258
|
## 🔨 使用
|
|
4284
4259
|
|
|
4260
|
+
从 @agentscope-ai/design 导出的所有同名组件在 API 方面都与 antd 的对应组件兼容，这意味着您无需学习如何使用它们。如果您想充分利用 Alibaba Cloud Spark Design 的新功能，可以尝试使用这些组件而不是 antd 的组件。
|
|
4261
|
+
|
|
4285
4262
|
|
|
4286
4263
|
```tsx
|
|
4287
4264
|
import {
|
|
@@ -4353,33 +4330,17 @@ export default App;
|
|
|
4353
4330
|
```
|
|
4354
4331
|
|
|
4355
4332
|
|
|
4356
|
-
|
|
4357
|
-
|
|
4358
|
-
# 从 Antd 迁移
|
|
4359
|
-
|
|
4360
|
-
## 📦 安装
|
|
4361
|
-
|
|
4362
|
-
|
|
4363
|
-
```bash
|
|
4364
|
-
$ npm install @agentscope-ai/icons @agentscope-ai/design --save
|
|
4365
|
-
```
|
|
4366
|
-
|
|
4367
|
-
|
|
4368
|
-
## 🔨 使用
|
|
4369
|
-
|
|
4370
|
-
从 @agentscope-ai/design 导出的所有同名组件在 API 方面都与 antd 的对应组件兼容，这意味着您无需学习如何使用它们。如果您想充分利用 Alibaba Cloud Spark Design 的新功能，可以尝试使用这些组件而不是 antd 的组件。
|
|
4333
|
+
如果您想继续使用 antd 的组件，那也没问题。您只需要将 antd 的 ConfigProvider 替换为 @agentscope-ai/design 的即可。
|
|
4371
4334
|
|
|
4372
4335
|
|
|
4373
4336
|
```tsx
|
|
4374
4337
|
import {
|
|
4375
|
-
Button,
|
|
4376
|
-
Image,
|
|
4377
4338
|
ConfigProvider,
|
|
4378
4339
|
purpleDarkTheme,
|
|
4379
4340
|
purpleTheme,
|
|
4380
4341
|
} from '@agentscope-ai/design';
|
|
4342
|
+
import { Button, Image, Flex } from 'antd';
|
|
4381
4343
|
import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
|
|
4382
|
-
import { Flex } from 'antd';
|
|
4383
4344
|
import zhCN from 'antd/locale/zh_CN';
|
|
4384
4345
|
import { useState } from 'react';
|
|
4385
4346
|
|
|
@@ -4440,17 +4401,87 @@ export default App;
|
|
|
4440
4401
|
```
|
|
4441
4402
|
|
|
4442
4403
|
|
|
4443
|
-
|
|
4404
|
+
|
|
4405
|
+
|
|
4406
|
+
# 使用
|
|
4407
|
+
|
|
4408
|
+
|
|
4409
|
+
|
|
4410
|
+
```tsx
|
|
4411
|
+
import { SparkLoadingLine } from '@agentscope-ai/icons';
|
|
4412
|
+
|
|
4413
|
+
export default () => {
|
|
4414
|
+
return (
|
|
4415
|
+
<SparkLoadingLine
|
|
4416
|
+
className="your-class-name"
|
|
4417
|
+
style={{ color: 'var(--sps-color-primary)' }}
|
|
4418
|
+
spin
|
|
4419
|
+
size={48}
|
|
4420
|
+
/>
|
|
4421
|
+
);
|
|
4422
|
+
};
|
|
4423
|
+
|
|
4424
|
+
```
|
|
4425
|
+
|
|
4426
|
+
基本用法
|
|
4427
|
+
|
|
4428
|
+
访问 [Icon Library](https://sparkdesign.agentscope.io/#/resources/icons) 查看全部 Icon
|
|
4429
|
+
|
|
4430
|
+
|
|
4431
|
+
|
|
4432
|
+
# Vibe 编程
|
|
4433
|
+
|
|
4434
|
+
## LLMs.txt
|
|
4435
|
+
|
|
4436
|
+
为了让 Cursor 和 Claude Code 等工具理解 Spark Design，我们支持 LLMs.txt 文件，使 Spark Design 的文档可供大型语言模型使用。
|
|
4437
|
+
|
|
4438
|
+
|
|
4439
|
+
- [index.llms.txt](https://g.alicdn.com/code/npm/@ali/agentscope-ai-design/4.7.2/docs-dist/llms/index.llms.txt)：主要的 LLMs.txt 索引文件
|
|
4440
|
+
- [all.llms.txt](https://g.alicdn.com/code/npm/@ali/agentscope-ai-design/4.7.2/docs-dist/llms/all.llms.txt)：Spark Design 的完整文档
|
|
4441
|
+
|
|
4442
|
+
在 Cursor 中使用 @Docs 功能将 LLMs.txt 文件包含在您的项目中。[了解更多](https://docs.cursor.com/en/context/@-symbols/@-docs)
|
|
4443
|
+
|
|
4444
|
+
## D2C
|
|
4445
|
+
|
|
4446
|
+
在前端使用 Alibaba Cloud Spark Design、设计稿使用 Spark Design 套件的前提下，通过 masterGo 视觉稿生成代码可以做到以下几点：
|
|
4447
|
+
|
|
4448
|
+
|
|
4449
|
+
- 准确识别 icon
|
|
4450
|
+
- 使用标准 css token
|
|
4451
|
+
- 无需测量间距、圆角等数据，AI 直接还原布局（90%以上概率准确生成）
|
|
4452
|
+
- 使用标准组件还原页面，大部分标准组件可一次性正确生成，无需二次调整
|
|
4453
|
+
|
|
4454
|
+
<div>
|
|
4455
|
+
<video style="width: 100%" controls src="https://cloud.video.taobao.com/vod/PrrYzvYJkoDlbJwoL8Ei1Bo_60LrKAROCojWxB_EAYs.mp4" />
|
|
4456
|
+
</div>
|
|
4457
|
+
|
|
4458
|
+
我们会在不久的将来开放 masterGo 的设计套件和 rules，帮助您高效率还原视觉稿
|
|
4459
|
+
|
|
4460
|
+
|
|
4461
|
+
|
|
4462
|
+
# 从零开始使用
|
|
4463
|
+
|
|
4464
|
+
## 📦 安装
|
|
4465
|
+
|
|
4466
|
+
|
|
4467
|
+
```bash
|
|
4468
|
+
$ npm install antd @agentscope-ai/icons @agentscope-ai/design --save
|
|
4469
|
+
```
|
|
4470
|
+
|
|
4471
|
+
|
|
4472
|
+
## 🔨 使用
|
|
4444
4473
|
|
|
4445
4474
|
|
|
4446
4475
|
```tsx
|
|
4447
4476
|
import {
|
|
4477
|
+
Button,
|
|
4478
|
+
Image,
|
|
4448
4479
|
ConfigProvider,
|
|
4449
4480
|
purpleDarkTheme,
|
|
4450
4481
|
purpleTheme,
|
|
4451
4482
|
} from '@agentscope-ai/design';
|
|
4452
|
-
import { Button, Image, Flex } from 'antd';
|
|
4453
4483
|
import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
|
|
4484
|
+
import { Flex } from 'antd';
|
|
4454
4485
|
import zhCN from 'antd/locale/zh_CN';
|
|
4455
4486
|
import { useState } from 'react';
|
|
4456
4487
|
|
|
@@ -4513,36 +4544,6 @@ export default App;
|
|
|
4513
4544
|
|
|
4514
4545
|
|
|
4515
4546
|
|
|
4516
|
-
# Vibe 编程
|
|
4517
|
-
|
|
4518
|
-
## LLMs.txt
|
|
4519
|
-
|
|
4520
|
-
为了让 Cursor 和 Claude Code 等工具理解 Spark Design，我们支持 LLMs.txt 文件，使 Spark Design 的文档可供大型语言模型使用。
|
|
4521
|
-
|
|
4522
|
-
|
|
4523
|
-
- [index.llms.txt](https://g.alicdn.com/code/npm/@ali/agentscope-ai-design/4.7.2/docs-dist/llms/index.llms.txt)：主要的 LLMs.txt 索引文件
|
|
4524
|
-
- [all.llms.txt](https://g.alicdn.com/code/npm/@ali/agentscope-ai-design/4.7.2/docs-dist/llms/all.llms.txt)：Spark Design 的完整文档
|
|
4525
|
-
|
|
4526
|
-
在 Cursor 中使用 @Docs 功能将 LLMs.txt 文件包含在您的项目中。[了解更多](https://docs.cursor.com/en/context/@-symbols/@-docs)
|
|
4527
|
-
|
|
4528
|
-
## D2C
|
|
4529
|
-
|
|
4530
|
-
在前端使用 Alibaba Cloud Spark Design、设计稿使用 Spark Design 套件的前提下，通过 masterGo 视觉稿生成代码可以做到以下几点：
|
|
4531
|
-
|
|
4532
|
-
|
|
4533
|
-
- 准确识别 icon
|
|
4534
|
-
- 使用标准 css token
|
|
4535
|
-
- 无需测量间距、圆角等数据，AI 直接还原布局（90%以上概率准确生成）
|
|
4536
|
-
- 使用标准组件还原页面，大部分标准组件可一次性正确生成，无需二次调整
|
|
4537
|
-
|
|
4538
|
-
<div>
|
|
4539
|
-
<video style="width: 100%" controls src="https://cloud.video.taobao.com/vod/PrrYzvYJkoDlbJwoL8Ei1Bo_60LrKAROCojWxB_EAYs.mp4" />
|
|
4540
|
-
</div>
|
|
4541
|
-
|
|
4542
|
-
我们会在不久的将来开放 masterGo 的设计套件和 rules，帮助您高效率还原视觉稿
|
|
4543
|
-
|
|
4544
|
-
|
|
4545
|
-
|
|
4546
4547
|
# Tokens
|
|
4547
4548
|
|
|
4548
4549
|
除了来自 [antd](https://ant.design/theme-editor) 的固有 tokens 之外，Spark Design 在原有基础上扩展了更多变量。完整的 token 示例如下所示：
|