@agentscope-ai/design 1.0.26-beta.1767839208001 → 1.0.26-beta.1767843408082
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/commonComponents/Tabs/index.js +19 -15
- package/llms/all.llms.txt +896 -1809
- package/llms/index.llms.txt +19 -27
- package/package.json +1 -1
package/llms/all.llms.txt
CHANGED
|
@@ -96,53 +96,6 @@
|
|
|
96
96
|
|
|
97
97
|
|
|
98
98
|
|
|
99
|
-
<DemoTitle title="Tooltip" desc="简单的文本提示气泡框">
|
|
100
|
-
#### API
|
|
101
|
-
|
|
102
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
103
|
-
|--------|--------|--------|--------|
|
|
104
|
-
| mode | 颜色模式 | 'dark' \| 'light' | 'dark' |
|
|
105
|
-
| maxHeight | 最大高度 | number \| string | '90vh' |
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
<AntdApiRef url="https://ant.design/components/tooltip-cn/#api"></AntdApiRef>
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
## antd API
|
|
112
|
-
|
|
113
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
114
|
-
|
|
115
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
116
|
-
|--------|--------|--------|--------|
|
|
117
|
-
| title | 提示文字 | ReactNode \| () => ReactNode | - |
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
### 共同的 API
|
|
121
|
-
|
|
122
|
-
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
123
|
-
|
|
124
|
-
<!-- prettier-ignore -->
|
|
125
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
126
|
-
|--------|--------|--------|--------|--------|
|
|
127
|
-
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
128
|
-
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
129
|
-
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
130
|
-
| color | 背景颜色 | string | - | 4.3.0 |
|
|
131
|
-
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
132
|
-
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
133
|
-
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
134
|
-
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
135
|
-
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
136
|
-
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
137
|
-
| placement | 气泡框位置，可选 | string | top | |
|
|
138
|
-
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
139
|
-
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
140
|
-
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
141
|
-
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
99
|
<DemoTitle title="TimePicker" desc="输入或选择时间的控件。">
|
|
147
100
|
#### API
|
|
148
101
|
|
|
@@ -256,72 +209,62 @@ type RangeDisabledTime = (
|
|
|
256
209
|
|
|
257
210
|
|
|
258
211
|
|
|
259
|
-
<DemoTitle title="
|
|
212
|
+
<DemoTitle title="Tooltip" desc="简单的文本提示气泡框">
|
|
260
213
|
#### API
|
|
261
214
|
|
|
262
215
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
263
216
|
|--------|--------|--------|--------|
|
|
264
|
-
|
|
|
217
|
+
| mode | 颜色模式 | 'dark' \| 'light' | 'dark' |
|
|
218
|
+
| maxHeight | 最大高度 | number \| string | '90vh' |
|
|
265
219
|
|
|
266
220
|
|
|
267
|
-
<AntdApiRef url="https://ant.design/components/
|
|
221
|
+
<AntdApiRef url="https://ant.design/components/tooltip-cn/#api"></AntdApiRef>
|
|
268
222
|
|
|
269
223
|
|
|
270
224
|
## antd API
|
|
271
225
|
|
|
272
226
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
273
227
|
|
|
274
|
-
|
|
228
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
229
|
+
|--------|--------|--------|--------|
|
|
230
|
+
| title | 提示文字 | ReactNode \| () => ReactNode | - |
|
|
231
|
+
|
|
232
|
+
|
|
233
|
+
### 共同的 API
|
|
234
|
+
|
|
235
|
+
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
275
236
|
|
|
237
|
+
<!-- prettier-ignore -->
|
|
276
238
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
277
239
|
|--------|--------|--------|--------|--------|
|
|
278
|
-
|
|
|
279
|
-
|
|
|
280
|
-
|
|
|
281
|
-
|
|
|
282
|
-
|
|
|
283
|
-
|
|
|
284
|
-
|
|
|
285
|
-
|
|
|
286
|
-
|
|
|
287
|
-
|
|
|
288
|
-
|
|
|
289
|
-
|
|
|
290
|
-
|
|
|
291
|
-
|
|
|
292
|
-
|
|
|
293
|
-
| tabBarStyle | tab bar 的样式对象 | CSSProperties | - | |
|
|
294
|
-
| tabPosition | 页签位置，可选值有 | string | top | |
|
|
295
|
-
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
296
|
-
| onChange | 切换面板的回调 | (activeKey: string) => void | - | |
|
|
297
|
-
| onEdit | 新增和删除页签的回调，在 | (action === 'add' ? event : targetKey, action) => void | - | |
|
|
298
|
-
| onTabClick | tab 被点击的回调 | (key: string, event: MouseEvent) => void | - | |
|
|
299
|
-
| onTabScroll | tab 滚动时触发 | ({ direction: | - | 4.3.0 |
|
|
240
|
+
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
241
|
+
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
242
|
+
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
243
|
+
| color | 背景颜色 | string | - | 4.3.0 |
|
|
244
|
+
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
245
|
+
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
246
|
+
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
247
|
+
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
248
|
+
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
249
|
+
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
250
|
+
| placement | 气泡框位置，可选 | string | top | |
|
|
251
|
+
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
252
|
+
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
253
|
+
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
254
|
+
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
300
255
|
|
|
301
256
|
|
|
302
|
-
更多属性查看 [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
|
|
303
257
|
|
|
304
|
-
### TabItemType
|
|
305
258
|
|
|
306
|
-
|
|
307
|
-
|
|
308
|
-
| closeIcon | 自定义关闭图标，在 | ReactNode | - | |
|
|
309
|
-
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
310
|
-
| disabled | 禁用某一项 | boolean | false | |
|
|
311
|
-
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
|
|
312
|
-
| key | 对应 activeKey | string | - | |
|
|
313
|
-
| label | 选项卡头显示文字 | ReactNode | - | |
|
|
314
|
-
| icon | 选项卡头显示图标 | ReactNode | - | 5.12.0 |
|
|
315
|
-
| children | 选项卡头显示内容 | ReactNode | - | |
|
|
316
|
-
| closable | 是否显示选项卡的关闭按钮，在 | boolean | true | |
|
|
259
|
+
<DemoTitle title="Video" desc="视频展示">
|
|
260
|
+
#### API
|
|
317
261
|
|
|
262
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
263
|
+
|--------|--------|--------|--------|
|
|
264
|
+
| mouseEnterAutoPlay | 鼠标进入时是否自动播放 | boolean | false |
|
|
265
|
+
| children | video内部设置了按钮在暗色背景下的样式，如果有一些操作按钮想继承这个样式可以在这里传入 | React.ReactNode | |
|
|
318
266
|
|
|
319
|
-
### MoreProps
|
|
320
267
|
|
|
321
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
322
|
-
|--------|--------|--------|--------|--------|
|
|
323
|
-
| icon | 自定义折叠图标 | ReactNode | - | |
|
|
324
|
-
| | | | | |
|
|
325
268
|
|
|
326
269
|
|
|
327
270
|
|
|
@@ -361,115 +304,72 @@ type RangeDisabledTime = (
|
|
|
361
304
|
|
|
362
305
|
|
|
363
306
|
|
|
364
|
-
<DemoTitle title="
|
|
365
|
-
#### API
|
|
366
|
-
|
|
367
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
368
|
-
|--------|--------|--------|--------|
|
|
369
|
-
| label | Switch后的内容 | ReactNode | |
|
|
370
|
-
|
|
371
|
-
<AntdApiRef url="https://ant.design/components/switch-cn/#api"></AntdApiRef>
|
|
372
|
-
|
|
373
|
-
|
|
374
|
-
## antd API
|
|
375
|
-
|
|
376
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
377
|
-
|
|
378
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
379
|
-
|--------|--------|--------|--------|--------|
|
|
380
|
-
| autoFocus | 组件自动获取焦点 | boolean | false | |
|
|
381
|
-
| checked | 指定当前是否选中 | boolean | false | |
|
|
382
|
-
| checkedChildren | 选中时的内容 | ReactNode | - | |
|
|
383
|
-
| className | Switch 器类名 | string | - | |
|
|
384
|
-
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
385
|
-
| defaultValue | defaultChecked | boolean | - | 5.12.0 |
|
|
386
|
-
| disabled | 是否禁用 | boolean | false | |
|
|
387
|
-
| loading | 加载中的开关 | boolean | false | |
|
|
388
|
-
| size | 开关大小，可选值： | string | default | |
|
|
389
|
-
| unCheckedChildren | 非选中时的内容 | ReactNode | - | |
|
|
390
|
-
| value | checked | boolean | - | 5.12.0 |
|
|
391
|
-
| onChange | 变化时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
392
|
-
| onClick | 点击时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
## 方法
|
|
396
|
-
|
|
397
|
-
| 名称 | 描述 |
|
|
398
|
-
|--------|--------|
|
|
399
|
-
| blur() | 移除焦点 |
|
|
400
|
-
| focus() | 获取焦点 |
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
<DemoTitle title="Video" desc="视频展示">
|
|
307
|
+
<DemoTitle title="Tabs" desc="用户可以通过点击不同的标签在同一页面中查看不同的内容区域。">
|
|
406
308
|
#### API
|
|
407
309
|
|
|
408
310
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
409
311
|
|--------|--------|--------|--------|
|
|
410
|
-
|
|
|
411
|
-
| children | video内部设置了按钮在暗色背景下的样式，如果有一些操作按钮想继承这个样式可以在这里传入 | React.ReactNode | |
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
312
|
+
| type | 类型 | 'line' \| 'card' \| 'editable-card' \| 'segmented' | true |
|
|
417
313
|
|
|
418
|
-
<DemoTitle title="Steps" desc="引导用户按照流程完成任务的导航条。">
|
|
419
|
-
#### API
|
|
420
314
|
|
|
421
|
-
<AntdApiRef url="https://ant.design/components/
|
|
315
|
+
<AntdApiRef url="https://ant.design/components/tabs-cn/#api"></AntdApiRef>
|
|
422
316
|
|
|
423
317
|
|
|
424
318
|
## antd API
|
|
425
319
|
|
|
426
320
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
427
321
|
|
|
428
|
-
###
|
|
429
|
-
|
|
430
|
-
整体步骤条。
|
|
322
|
+
### Tabs
|
|
431
323
|
|
|
432
324
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
433
325
|
|--------|--------|--------|--------|--------|
|
|
434
|
-
|
|
|
435
|
-
|
|
|
436
|
-
|
|
|
437
|
-
|
|
|
438
|
-
|
|
|
439
|
-
|
|
|
440
|
-
|
|
|
441
|
-
|
|
|
442
|
-
|
|
|
443
|
-
|
|
|
444
|
-
|
|
|
445
|
-
|
|
|
446
|
-
|
|
|
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 |
|
|
447
348
|
|
|
448
349
|
|
|
449
|
-
|
|
350
|
+
更多属性查看 [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
|
|
351
|
+
|
|
352
|
+
### TabItemType
|
|
450
353
|
|
|
451
354
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
452
355
|
|--------|--------|--------|--------|--------|
|
|
453
|
-
|
|
|
454
|
-
|
|
|
455
|
-
|
|
|
456
|
-
|
|
|
457
|
-
|
|
|
458
|
-
|
|
|
459
|
-
|
|
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 | |
|
|
460
365
|
|
|
461
|
-
### StepItem
|
|
462
366
|
|
|
463
|
-
|
|
367
|
+
### MoreProps
|
|
464
368
|
|
|
465
369
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
466
370
|
|--------|--------|--------|--------|--------|
|
|
467
|
-
|
|
|
468
|
-
|
|
|
469
|
-
| icon | 步骤图标的类型，可选 | ReactNode | - | |
|
|
470
|
-
| status | 指定状态。当不配置该属性时，会使用 Steps 的 | string | wait | |
|
|
471
|
-
| subTitle | 子标题 | ReactNode | - | |
|
|
472
|
-
| title | 标题 | ReactNode | - | |
|
|
371
|
+
| icon | 自定义折叠图标 | ReactNode | - | |
|
|
372
|
+
| | | | | |
|
|
473
373
|
|
|
474
374
|
|
|
475
375
|
|
|
@@ -729,10 +629,110 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
729
629
|
|
|
730
630
|
|
|
731
631
|
|
|
732
|
-
<DemoTitle title="
|
|
632
|
+
<DemoTitle title="Switch" desc="使用开关切换两种状态之间。">
|
|
733
633
|
#### API
|
|
734
634
|
|
|
735
|
-
|
|
635
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
636
|
+
|--------|--------|--------|--------|
|
|
637
|
+
| label | Switch后的内容 | ReactNode | |
|
|
638
|
+
|
|
639
|
+
<AntdApiRef url="https://ant.design/components/switch-cn/#api"></AntdApiRef>
|
|
640
|
+
|
|
641
|
+
|
|
642
|
+
## antd API
|
|
643
|
+
|
|
644
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
645
|
+
|
|
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) | - | |
|
|
661
|
+
|
|
662
|
+
|
|
663
|
+
## 方法
|
|
664
|
+
|
|
665
|
+
| 名称 | 描述 |
|
|
666
|
+
|--------|--------|
|
|
667
|
+
| blur() | 移除焦点 |
|
|
668
|
+
| focus() | 获取焦点 |
|
|
669
|
+
|
|
670
|
+
|
|
671
|
+
|
|
672
|
+
|
|
673
|
+
<DemoTitle title="Steps" desc="引导用户按照流程完成任务的导航条。">
|
|
674
|
+
#### API
|
|
675
|
+
|
|
676
|
+
<AntdApiRef url="https://ant.design/components/steps-cn/#api"></AntdApiRef>
|
|
677
|
+
|
|
678
|
+
|
|
679
|
+
## antd API
|
|
680
|
+
|
|
681
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
682
|
+
|
|
683
|
+
### Steps
|
|
684
|
+
|
|
685
|
+
整体步骤条。
|
|
686
|
+
|
|
687
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
688
|
+
|--------|--------|--------|--------|--------|
|
|
689
|
+
| className | 步骤条类名 | string | - | |
|
|
690
|
+
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 | number | 0 | |
|
|
691
|
+
| direction | 指定步骤条方向。目前支持水平（ | string | horizontal | |
|
|
692
|
+
| initial | 起始序号，从 0 开始记数 | number | 0 | |
|
|
693
|
+
| labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选 | string | horizontal | |
|
|
694
|
+
| percent | 当前 | number | - | 4.5.0 |
|
|
695
|
+
| progressDot | 点状步骤条，可以设置为一个 function，labelPlacement 将强制为 | boolean \| (iconDot, {index, status, title, description}) => ReactNode | false | |
|
|
696
|
+
| responsive | 当屏幕宽度小于 | boolean | true | |
|
|
697
|
+
| size | 指定大小，目前支持普通（ | string | default | |
|
|
698
|
+
| status | 指定当前步骤的状态，可选 | string | process | |
|
|
699
|
+
| type | 步骤条类型，可选 | string | default | inline: 5.0 |
|
|
700
|
+
| onChange | 点击切换步骤时触发 | (current) => void | - | |
|
|
701
|
+
| items | 配置选项卡内容 | | [] | 4.24.0 |
|
|
702
|
+
|
|
703
|
+
|
|
704
|
+
### `type="inline"`
|
|
705
|
+
|
|
706
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
707
|
+
|--------|--------|--------|--------|--------|
|
|
708
|
+
| className | 步骤条类名 | string | - | |
|
|
709
|
+
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 | number | 0 | |
|
|
710
|
+
| initial | 起始序号，从 0 开始记数 | number | 0 | |
|
|
711
|
+
| status | 指定当前步骤的状态，可选 | string | process | |
|
|
712
|
+
| onChange | 点击切换步骤时触发 | (current) => void | - | |
|
|
713
|
+
| items | 配置选项卡内容，不支持 | | [] | 4.24.0 |
|
|
714
|
+
|
|
715
|
+
|
|
716
|
+
### StepItem
|
|
717
|
+
|
|
718
|
+
步骤条内的每一个步骤。
|
|
719
|
+
|
|
720
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
721
|
+
|--------|--------|--------|--------|--------|
|
|
722
|
+
| description | 步骤的详情描述，可选 | ReactNode | - | |
|
|
723
|
+
| disabled | 禁用点击 | boolean | false | |
|
|
724
|
+
| icon | 步骤图标的类型，可选 | ReactNode | - | |
|
|
725
|
+
| status | 指定状态。当不配置该属性时，会使用 Steps 的 | string | wait | |
|
|
726
|
+
| subTitle | 子标题 | ReactNode | - | |
|
|
727
|
+
| title | 标题 | ReactNode | - | |
|
|
728
|
+
|
|
729
|
+
|
|
730
|
+
|
|
731
|
+
|
|
732
|
+
<DemoTitle title="Statistic" desc="展示统计数值">
|
|
733
|
+
#### API
|
|
734
|
+
|
|
735
|
+
<AntdApiRef url="https://ant.design/components/statistic-cn/#api"></AntdApiRef>
|
|
736
736
|
|
|
737
737
|
|
|
738
738
|
## antd API
|
|
@@ -789,6 +789,23 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
789
789
|
|
|
790
790
|
|
|
791
791
|
|
|
792
|
+
<DemoTitle title="Spinner" desc="指示页面或区块的加载中状态">
|
|
793
|
+
#### API
|
|
794
|
+
|
|
795
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
796
|
+
|--------|--------|--------|--------|
|
|
797
|
+
| tip | indicator下方的tip | React.ReactNode | - |
|
|
798
|
+
| indicator | 自定义indicator，用于展示progress的百分比和加载文案 | React.ReactNode | - |
|
|
799
|
+
| children | 被spinner包裹的子元素 | React.ReactNode | - |
|
|
800
|
+
| style | spinner最外层的样式 | React.CSSProperties | - |
|
|
801
|
+
| className | spinner的类名 | string | - |
|
|
802
|
+
| percent | 进度条的百分比 | number | - |
|
|
803
|
+
| spinning | 是否为加载中状态 | boolean | false |
|
|
804
|
+
| showProgress | 是否显示进度条，如果为true，不需要手动在children中添加Progress组件 | boolean | false |
|
|
805
|
+
|
|
806
|
+
|
|
807
|
+
|
|
808
|
+
|
|
792
809
|
<DemoTitle title="Skeleton" desc="在内容加载时提供占位图形展示。">
|
|
793
810
|
## antd API
|
|
794
811
|
|
|
@@ -850,70 +867,6 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
850
867
|
|
|
851
868
|
|
|
852
869
|
|
|
853
|
-
<DemoTitle title="Slider" desc="滑动型输入器，展示当前值和可选范围。">
|
|
854
|
-
#### API
|
|
855
|
-
|
|
856
|
-
<AntdApiRef url="https://ant.design/components/slider-cn/#api"></AntdApiRef>
|
|
857
|
-
|
|
858
|
-
|
|
859
|
-
## antd API
|
|
860
|
-
|
|
861
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
862
|
-
|
|
863
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
864
|
-
|--------|--------|--------|--------|--------|
|
|
865
|
-
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
866
|
-
| classNames | 语义化结构 className | | - | 5.10.0 |
|
|
867
|
-
| defaultValue | 设置初始取值。当 | number \| [number, number] | 0 \| [0, 0] | |
|
|
868
|
-
| disabled | 值为 true 时，滑块为禁用状态 | boolean | false | |
|
|
869
|
-
| keyboard | 支持使用键盘操作 handler | boolean | true | 5.2.0+ |
|
|
870
|
-
| dots | 是否只能拖拽到刻度上 | boolean | false | |
|
|
871
|
-
| included | marks | boolean | true | |
|
|
872
|
-
| marks | 刻度标记，key 的类型必须为 | object | { number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } } | |
|
|
873
|
-
| max | 最大值 | number | 100 | |
|
|
874
|
-
| min | 最小值 | number | 0 | |
|
|
875
|
-
| range | 双滑块模式 | boolean \| | false | |
|
|
876
|
-
| reverse | 反向坐标轴 | boolean | false | |
|
|
877
|
-
| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 | number \| null | 1 | |
|
|
878
|
-
| styles | 语义化结构 styles | | - | 5.10.0 |
|
|
879
|
-
| tooltip | 设置 Tooltip 相关属性 | | - | 4.23.0 |
|
|
880
|
-
| value | 设置当前取值。当 | number \| [number, number] | - | |
|
|
881
|
-
| vertical | 值为 true 时，Slider 为垂直方向 | boolean | false | |
|
|
882
|
-
| onChangeComplete | 与 | (value) => void | - | |
|
|
883
|
-
| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | (value) => void | - | |
|
|
884
|
-
|
|
885
|
-
|
|
886
|
-
### range
|
|
887
|
-
|
|
888
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
889
|
-
|--------|--------|--------|--------|--------|
|
|
890
|
-
| draggableTrack | 范围刻度是否可被拖拽 | boolean | false | |
|
|
891
|
-
| editable | 启动动态增减节点，不能和 | boolean | false | 5.20.0 |
|
|
892
|
-
| minCount | 配置 | number | 0 | 5.20.0 |
|
|
893
|
-
| maxCount | 配置 | number | - | 5.20.0 |
|
|
894
|
-
|
|
895
|
-
|
|
896
|
-
### tooltip
|
|
897
|
-
|
|
898
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
899
|
-
|--------|--------|--------|--------|--------|
|
|
900
|
-
| autoAdjustOverflow | 是否自动调整弹出位置 | boolean | true | 5.8.0 |
|
|
901
|
-
| open | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时 | boolean | - | 4.23.0 |
|
|
902
|
-
| placement | 设置 Tooltip 展示位置。参考 | string | - | 4.23.0 |
|
|
903
|
-
| getPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
|
|
904
|
-
| formatter | Slider 会把当前值传给 | value => ReactNode \| null | IDENTITY | 4.23.0 |
|
|
905
|
-
|
|
906
|
-
|
|
907
|
-
## 方法
|
|
908
|
-
|
|
909
|
-
| 名称 | 描述 | 版本 |
|
|
910
|
-
|--------|--------|--------|
|
|
911
|
-
| blur() | 移除焦点 | |
|
|
912
|
-
| focus() | 获取焦点 | |
|
|
913
|
-
|
|
914
|
-
|
|
915
|
-
|
|
916
|
-
|
|
917
870
|
<DemoTitle title="Select" desc="下拉选择器">
|
|
918
871
|
## antd API
|
|
919
872
|
|
|
@@ -1012,19 +965,66 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1012
965
|
|
|
1013
966
|
|
|
1014
967
|
|
|
1015
|
-
<DemoTitle title="
|
|
968
|
+
<DemoTitle title="Slider" desc="滑动型输入器，展示当前值和可选范围。">
|
|
1016
969
|
#### API
|
|
1017
970
|
|
|
1018
|
-
|
|
1019
|
-
|
|
1020
|
-
|
|
1021
|
-
|
|
1022
|
-
|
|
1023
|
-
|
|
1024
|
-
|
|
1025
|
-
|
|
|
1026
|
-
|
|
1027
|
-
|
|
|
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
1028
|
|
|
1029
1029
|
|
|
1030
1030
|
|
|
@@ -1104,20 +1104,8 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1104
1104
|
|
|
1105
1105
|
|
|
1106
1106
|
|
|
1107
|
-
<DemoTitle title="
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1111
|
-
|--------|--------|--------|--------|
|
|
1112
|
-
| texture | 是否显示纹理 | boolean | false |
|
|
1113
|
-
|
|
1114
|
-
|
|
1115
|
-
|
|
1116
|
-
|
|
1117
|
-
|
|
1118
|
-
|
|
1119
|
-
<DemoTitle title="MdEditor" desc="提示词编辑器，可以高亮 Markdown 的语法，支持自定义槽位变量的插入">
|
|
1120
|
-
#### API
|
|
1107
|
+
<DemoTitle title="MdEditor" desc="提示词编辑器，可以高亮 Markdown 的语法，支持自定义槽位变量的插入">
|
|
1108
|
+
#### API
|
|
1121
1109
|
|
|
1122
1110
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1123
1111
|
|--------|--------|--------|--------|
|
|
@@ -1201,6 +1189,18 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1201
1189
|
|
|
1202
1190
|
|
|
1203
1191
|
|
|
1192
|
+
<DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。">
|
|
1193
|
+
## API
|
|
1194
|
+
|
|
1195
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1196
|
+
|--------|--------|--------|--------|
|
|
1197
|
+
| texture | 是否显示纹理 | boolean | false |
|
|
1198
|
+
|
|
1199
|
+
|
|
1200
|
+
|
|
1201
|
+
|
|
1202
|
+
|
|
1203
|
+
|
|
1204
1204
|
<DemoTitle title="Progress" desc="用于指示任务的完成进度">
|
|
1205
1205
|
## antd API
|
|
1206
1206
|
|
|
@@ -1253,110 +1253,6 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1253
1253
|
|
|
1254
1254
|
|
|
1255
1255
|
|
|
1256
|
-
<DemoTitle title="Pagination" desc="分页器用于分隔长列表，每次只加载一个页面。">
|
|
1257
|
-
## API
|
|
1258
|
-
|
|
1259
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1260
|
-
|--------|--------|--------|--------|
|
|
1261
|
-
| hideSwitchButton | 是否展示上一页/下一页的切换按钮 | boolean | false |
|
|
1262
|
-
|
|
1263
|
-
|
|
1264
|
-
<AntdApiRef url="https://ant.design/components/pagination-cn/#api"></AntdApiRef>
|
|
1265
|
-
|
|
1266
|
-
|
|
1267
|
-
## antd API
|
|
1268
|
-
|
|
1269
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1270
|
-
|
|
1271
|
-
|
|
1272
|
-
```jsx
|
|
1273
|
-
<Pagination onChange={onChange} total={50} />
|
|
1274
|
-
```
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1278
|
-
|--------|--------|--------|--------|--------|
|
|
1279
|
-
| align | 对齐方式 | start \| center \| end | - | 5.19.0 |
|
|
1280
|
-
| current | 当前页数 | number | - | |
|
|
1281
|
-
| defaultCurrent | 默认的当前页数 | number | 1 | |
|
|
1282
|
-
| defaultPageSize | 默认的每页条数 | number | 10 | |
|
|
1283
|
-
| disabled | 禁用分页 | boolean | - | |
|
|
1284
|
-
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | |
|
|
1285
|
-
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | |
|
|
1286
|
-
| pageSize | 每页条数 | number | - | |
|
|
1287
|
-
| pageSizeOptions | 指定每页可以显示多少条 | number[] | [ | |
|
|
1288
|
-
| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | |
|
|
1289
|
-
| showLessItems | 是否显示较少页面内容 | boolean | false | |
|
|
1290
|
-
| showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false | |
|
|
1291
|
-
| showSizeChanger | 是否展示 | boolean \| | - | SelectProps: 5.21.0 |
|
|
1292
|
-
| showTitle | 是否显示原生 tooltip 页码提示 | boolean | true | |
|
|
1293
|
-
| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | |
|
|
1294
|
-
| simple | 当添加该属性时，显示为简单分页 | boolean \| { readOnly?: boolean } | - | |
|
|
1295
|
-
| size | 当为 | default | default | |
|
|
1296
|
-
| total | 数据总数 | number | 0 | |
|
|
1297
|
-
| onChange | 页码或 | function(page, pageSize) | - | |
|
|
1298
|
-
| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | |
|
|
1299
|
-
|
|
1300
|
-
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
<DemoTitle title="Popconfirm" desc="点击元素，弹出气泡式的确认框。">
|
|
1304
|
-
#### API
|
|
1305
|
-
|
|
1306
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1307
|
-
|--------|--------|--------|--------|
|
|
1308
|
-
| type | 类型 | 'info' \| 'warning' \| 'error' \| 'success' \| 'confirm' | 'confirm' |
|
|
1309
|
-
|
|
1310
|
-
|
|
1311
|
-
<AntdApiRef url="https://ant.design/components/popconfirm-cn/#api"></AntdApiRef>
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
## antd API
|
|
1315
|
-
|
|
1316
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1317
|
-
|
|
1318
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1319
|
-
|--------|--------|--------|--------|--------|
|
|
1320
|
-
| cancelButtonProps | cancel 按钮 props | | - | |
|
|
1321
|
-
| cancelText | 取消按钮文字 | string | 取消 | |
|
|
1322
|
-
| disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false | |
|
|
1323
|
-
| icon | 自定义弹出气泡 Icon 图标 | ReactNode | | |
|
|
1324
|
-
| okButtonProps | ok 按钮 props | | - | |
|
|
1325
|
-
| okText | 确认按钮文字 | string | 确定 | |
|
|
1326
|
-
| okType | 确认按钮类型 | string | primary | |
|
|
1327
|
-
| showCancel | 是否显示取消按钮 | boolean | true | 4.18.0 |
|
|
1328
|
-
| title | 确认框标题 | ReactNode \| () => ReactNode | - | |
|
|
1329
|
-
| description | 确认内容的详细描述 | ReactNode \| () => ReactNode | - | 5.1.0 |
|
|
1330
|
-
| onCancel | 点击取消的回调 | function(e) | - | |
|
|
1331
|
-
| onConfirm | 点击确认的回调 | function(e) | - | |
|
|
1332
|
-
| onPopupClick | 弹出气泡点击事件 | function(e) | - | 5.5.0 |
|
|
1333
|
-
|
|
1334
|
-
|
|
1335
|
-
<!-- 共同的 API -->
|
|
1336
|
-
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
1337
|
-
|
|
1338
|
-
<!-- prettier-ignore -->
|
|
1339
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1340
|
-
|--------|--------|--------|--------|--------|
|
|
1341
|
-
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
1342
|
-
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
1343
|
-
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
1344
|
-
| color | 背景颜色 | string | - | 4.3.0 |
|
|
1345
|
-
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
1346
|
-
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
1347
|
-
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
1348
|
-
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
1349
|
-
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
1350
|
-
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
1351
|
-
| placement | 气泡框位置，可选 | string | top | |
|
|
1352
|
-
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
1353
|
-
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
1354
|
-
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
1355
|
-
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
1356
|
-
|
|
1357
|
-
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
1256
|
<DemoTitle title="Popover" desc="点击/鼠标移入元素，弹出气泡式的卡片浮层">
|
|
1361
1257
|
#### API
|
|
1362
1258
|
|
|
@@ -1401,98 +1297,49 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1401
1297
|
|
|
1402
1298
|
|
|
1403
1299
|
|
|
1404
|
-
<DemoTitle title="
|
|
1405
|
-
|
|
1406
|
-
|
|
1407
|
-
<AntdApiRef url="https://ant.design/components/notification-cn/#api"></AntdApiRef>
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
## antd API
|
|
1411
|
-
|
|
1412
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1413
|
-
|
|
1414
|
-
|
|
1415
|
-
- `notification.success(config)`
|
|
1416
|
-
- `notification.error(config)`
|
|
1417
|
-
- `notification.info(config)`
|
|
1418
|
-
- `notification.warning(config)`
|
|
1419
|
-
- `notification.open(config)`
|
|
1420
|
-
- `notification.destroy(key?: String)`
|
|
1421
|
-
|
|
1422
|
-
config 参数如下：
|
|
1423
|
-
|
|
1424
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1425
|
-
|--------|--------|--------|--------|--------|
|
|
1426
|
-
| actions | 自定义按钮组 | ReactNode | - | 5.24.0 |
|
|
1427
|
-
| className | 自定义 CSS class | string | - | - |
|
|
1428
|
-
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1429
|
-
| description | 通知提醒内容，必选 | ReactNode | - | - |
|
|
1430
|
-
| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 | - |
|
|
1431
|
-
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1432
|
-
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1433
|
-
| icon | 自定义图标 | ReactNode | - | - |
|
|
1434
|
-
| key | 当前通知唯一标志 | string | - | - |
|
|
1435
|
-
| message | 通知提醒标题，必选 | ReactNode | - | - |
|
|
1436
|
-
| placement | 弹出位置，可选 | string | topRight | - |
|
|
1437
|
-
| style | 自定义内联样式 | | - | - |
|
|
1438
|
-
| role | 供屏幕阅读器识别的通知内容语义，默认为 | alert \| status | alert | 5.6.0 |
|
|
1439
|
-
| onClick | 点击通知时触发的回调函数 | function | - | - |
|
|
1440
|
-
| onClose | 当通知关闭时触发 | function | - | - |
|
|
1441
|
-
| props | 透传至通知 | Object | - | - |
|
|
1442
|
-
|
|
1443
|
-
|
|
1444
|
-
|
|
1445
|
-
- `notification.useNotification(config)`
|
|
1446
|
-
|
|
1447
|
-
config 参数如下：
|
|
1300
|
+
<DemoTitle title="Pagination" desc="分页器用于分隔长列表，每次只加载一个页面。">
|
|
1301
|
+
## API
|
|
1448
1302
|
|
|
1449
|
-
|
|
|
1450
|
-
|
|
1451
|
-
|
|
|
1452
|
-
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1453
|
-
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body | |
|
|
1454
|
-
| placement | 弹出位置，可选 | string | topRight | |
|
|
1455
|
-
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1456
|
-
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1457
|
-
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1458
|
-
| stack | 堆叠模式，超过阈值时会将所有消息收起 | boolean \| | { threshold: 3 } | 5.10.0 |
|
|
1459
|
-
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | |
|
|
1460
|
-
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
|
|
1303
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1304
|
+
|--------|--------|--------|--------|
|
|
1305
|
+
| hideSwitchButton | 是否展示上一页/下一页的切换按钮 | boolean | false |
|
|
1461
1306
|
|
|
1462
1307
|
|
|
1463
|
-
|
|
1308
|
+
<AntdApiRef url="https://ant.design/components/pagination-cn/#api"></AntdApiRef>
|
|
1464
1309
|
|
|
1465
|
-
还提供了一个全局配置方法，在调用前提前配置，全局一次生效。
|
|
1466
1310
|
|
|
1467
|
-
|
|
1311
|
+
## antd API
|
|
1468
1312
|
|
|
1469
|
-
|
|
1313
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1470
1314
|
|
|
1471
1315
|
|
|
1472
|
-
```
|
|
1473
|
-
|
|
1474
|
-
placement: 'bottomRight',
|
|
1475
|
-
bottom: 50,
|
|
1476
|
-
duration: 3,
|
|
1477
|
-
rtl: true,
|
|
1478
|
-
});
|
|
1316
|
+
```jsx
|
|
1317
|
+
<Pagination onChange={onChange} total={50} />
|
|
1479
1318
|
```
|
|
1480
1319
|
|
|
1481
1320
|
|
|
1482
|
-
#### notification.config
|
|
1483
|
-
|
|
1484
1321
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1485
1322
|
|--------|--------|--------|--------|--------|
|
|
1486
|
-
|
|
|
1487
|
-
|
|
|
1488
|
-
|
|
|
1489
|
-
|
|
|
1490
|
-
|
|
|
1491
|
-
|
|
|
1492
|
-
|
|
|
1493
|
-
|
|
|
1494
|
-
|
|
|
1495
|
-
|
|
|
1323
|
+
| align | 对齐方式 | start \| center \| end | - | 5.19.0 |
|
|
1324
|
+
| current | 当前页数 | number | - | |
|
|
1325
|
+
| defaultCurrent | 默认的当前页数 | number | 1 | |
|
|
1326
|
+
| defaultPageSize | 默认的每页条数 | number | 10 | |
|
|
1327
|
+
| disabled | 禁用分页 | boolean | - | |
|
|
1328
|
+
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | |
|
|
1329
|
+
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | |
|
|
1330
|
+
| pageSize | 每页条数 | number | - | |
|
|
1331
|
+
| pageSizeOptions | 指定每页可以显示多少条 | number[] | [ | |
|
|
1332
|
+
| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | |
|
|
1333
|
+
| showLessItems | 是否显示较少页面内容 | boolean | false | |
|
|
1334
|
+
| showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false | |
|
|
1335
|
+
| showSizeChanger | 是否展示 | boolean \| | - | SelectProps: 5.21.0 |
|
|
1336
|
+
| showTitle | 是否显示原生 tooltip 页码提示 | boolean | true | |
|
|
1337
|
+
| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | |
|
|
1338
|
+
| simple | 当添加该属性时，显示为简单分页 | boolean \| { readOnly?: boolean } | - | |
|
|
1339
|
+
| size | 当为 | default | default | |
|
|
1340
|
+
| total | 数据总数 | number | 0 | |
|
|
1341
|
+
| onChange | 页码或 | function(page, pageSize) | - | |
|
|
1342
|
+
| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | |
|
|
1496
1343
|
|
|
1497
1344
|
|
|
1498
1345
|
|
|
@@ -1767,10 +1614,15 @@ message.config({
|
|
|
1767
1614
|
|
|
1768
1615
|
|
|
1769
1616
|
|
|
1770
|
-
<DemoTitle title="
|
|
1617
|
+
<DemoTitle title="Popconfirm" desc="点击元素，弹出气泡式的确认框。">
|
|
1771
1618
|
#### API
|
|
1772
1619
|
|
|
1773
|
-
|
|
1620
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1621
|
+
|--------|--------|--------|--------|
|
|
1622
|
+
| type | 类型 | 'info' \| 'warning' \| 'error' \| 'success' \| 'confirm' | 'confirm' |
|
|
1623
|
+
|
|
1624
|
+
|
|
1625
|
+
<AntdApiRef url="https://ant.design/components/popconfirm-cn/#api"></AntdApiRef>
|
|
1774
1626
|
|
|
1775
1627
|
|
|
1776
1628
|
## antd API
|
|
@@ -1779,178 +1631,191 @@ message.config({
|
|
|
1779
1631
|
|
|
1780
1632
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1781
1633
|
|--------|--------|--------|--------|--------|
|
|
1782
|
-
|
|
|
1783
|
-
|
|
|
1784
|
-
|
|
|
1785
|
-
|
|
|
1786
|
-
|
|
|
1787
|
-
|
|
|
1788
|
-
|
|
|
1789
|
-
|
|
|
1790
|
-
|
|
|
1791
|
-
|
|
|
1792
|
-
|
|
|
1793
|
-
|
|
|
1794
|
-
|
|
|
1795
|
-
| min | 最小值 | number | | - |
|
|
1796
|
-
| parser | 指定从 | function(string): number | - | - |
|
|
1797
|
-
| precision | 数值精度，配置 | number | - | - |
|
|
1798
|
-
| readOnly | 只读 | boolean | false | - |
|
|
1799
|
-
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
1800
|
-
| prefix | 带有前缀图标的 input | ReactNode | - | 4.17.0 |
|
|
1801
|
-
| suffix | 带有后缀图标的 input | ReactNode | - | 5.20.0 |
|
|
1802
|
-
| size | 输入框大小 | large | - | - |
|
|
1803
|
-
| step | 每次改变步数，可以为小数 | number \| string | 1 | - |
|
|
1804
|
-
| stringMode | 字符值模式，开启后支持高精度小数。同时 | boolean | false | 4.13.0 |
|
|
1805
|
-
| value | 当前值 | number | - | - |
|
|
1806
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
1807
|
-
| onChange | 变化回调 | function(value: number \| string \| null) | - | - |
|
|
1808
|
-
| onPressEnter | 按下回车的回调 | function(e) | - | - |
|
|
1809
|
-
| onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 |
|
|
1634
|
+
| cancelButtonProps | cancel 按钮 props | | - | |
|
|
1635
|
+
| cancelText | 取消按钮文字 | string | 取消 | |
|
|
1636
|
+
| disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false | |
|
|
1637
|
+
| icon | 自定义弹出气泡 Icon 图标 | ReactNode | | |
|
|
1638
|
+
| okButtonProps | ok 按钮 props | | - | |
|
|
1639
|
+
| okText | 确认按钮文字 | string | 确定 | |
|
|
1640
|
+
| okType | 确认按钮类型 | string | primary | |
|
|
1641
|
+
| showCancel | 是否显示取消按钮 | boolean | true | 4.18.0 |
|
|
1642
|
+
| title | 确认框标题 | ReactNode \| () => ReactNode | - | |
|
|
1643
|
+
| description | 确认内容的详细描述 | ReactNode \| () => ReactNode | - | 5.1.0 |
|
|
1644
|
+
| onCancel | 点击取消的回调 | function(e) | - | |
|
|
1645
|
+
| onConfirm | 点击确认的回调 | function(e) | - | |
|
|
1646
|
+
| onPopupClick | 弹出气泡点击事件 | function(e) | - | 5.5.0 |
|
|
1810
1647
|
|
|
1811
1648
|
|
|
1812
|
-
|
|
1649
|
+
<!-- 共同的 API -->
|
|
1650
|
+
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
1813
1651
|
|
|
1814
|
-
|
|
1815
|
-
|
|
1816
|
-
|
|
1817
|
-
|
|
|
1818
|
-
|
|
|
1652
|
+
<!-- prettier-ignore -->
|
|
1653
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1654
|
+
|--------|--------|--------|--------|--------|
|
|
1655
|
+
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
1656
|
+
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
1657
|
+
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
1658
|
+
| color | 背景颜色 | string | - | 4.3.0 |
|
|
1659
|
+
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
1660
|
+
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
1661
|
+
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
1662
|
+
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
1663
|
+
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
1664
|
+
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
1665
|
+
| placement | 气泡框位置，可选 | string | top | |
|
|
1666
|
+
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
1667
|
+
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
1668
|
+
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
1669
|
+
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
1819
1670
|
|
|
1820
1671
|
|
|
1821
1672
|
|
|
1822
1673
|
|
|
1823
|
-
<DemoTitle title="
|
|
1674
|
+
<DemoTitle title="Notification" desc="用于指示任务的完成进度">
|
|
1824
1675
|
#### API
|
|
1825
1676
|
|
|
1826
|
-
|
|
1827
|
-
|--------|--------|--------|--------|
|
|
1828
|
-
| shape | 形态 | 'default' \| 'round' | default 默认 |
|
|
1829
|
-
|
|
1830
|
-
|
|
1831
|
-
<AntdApiRef url="https://ant.design/components/input-cn/#api"></AntdApiRef>
|
|
1677
|
+
<AntdApiRef url="https://ant.design/components/notification-cn/#api"></AntdApiRef>
|
|
1832
1678
|
|
|
1833
1679
|
|
|
1834
1680
|
## antd API
|
|
1835
1681
|
|
|
1836
1682
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1837
1683
|
|
|
1838
|
-
### Input
|
|
1839
|
-
|
|
1840
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1841
|
-
|--------|--------|--------|--------|--------|
|
|
1842
|
-
| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | |
|
|
1843
|
-
| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | |
|
|
1844
|
-
| allowClear | 可以点击清除图标删除内容 | boolean \| { clearIcon: ReactNode } | - | |
|
|
1845
|
-
| classNames | 语义化结构 class | Record< | - | 5.4.0 |
|
|
1846
|
-
| count | 字符计数配置 | | - | 5.10.0 |
|
|
1847
|
-
| defaultValue | 输入框默认内容 | string | - | |
|
|
1848
|
-
| disabled | 是否禁用状态，默认为 false | boolean | false | |
|
|
1849
|
-
| id | 输入框的 id | string | - | |
|
|
1850
|
-
| maxLength | 最大长度 | number | - | |
|
|
1851
|
-
| prefix | 带有前缀图标的 input | ReactNode | - | |
|
|
1852
|
-
| showCount | 是否展示字数 | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 info.value: 4.23.0 |
|
|
1853
|
-
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
1854
|
-
| styles | 语义化结构 style | Record< | - | 5.4.0 |
|
|
1855
|
-
| size | 控件大小。注：标准表单内的输入框大小限制为 | large | - | |
|
|
1856
|
-
| suffix | 带有后缀图标的 input | ReactNode | - | |
|
|
1857
|
-
| type | 声明 input 类型，同原生 input 标签的 type 属性，见： | string | text | |
|
|
1858
|
-
| value | 输入框内容 | string | - | |
|
|
1859
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
1860
|
-
| onChange | 输入框内容变化时的回调 | function(e) | - | |
|
|
1861
|
-
| onPressEnter | 按下回车的回调 | function(e) | - | |
|
|
1862
|
-
| onClear | 按下清除按钮的回调 | () => void | - | 5.20.0 |
|
|
1863
|
-
|
|
1864
|
-
|
|
1865
|
-
如果 `Input` 在 `Form.Item` 内，并且 `Form.Item` 设置了 `id` 属性，则 `value` `defaultValue` 和 `id` 属性会被自动设置。
|
|
1866
1684
|
|
|
1867
|
-
|
|
1685
|
+
- `notification.success(config)`
|
|
1686
|
+
- `notification.error(config)`
|
|
1687
|
+
- `notification.info(config)`
|
|
1688
|
+
- `notification.warning(config)`
|
|
1689
|
+
- `notification.open(config)`
|
|
1690
|
+
- `notification.destroy(key?: String)`
|
|
1868
1691
|
|
|
1869
|
-
|
|
1692
|
+
config 参数如下：
|
|
1870
1693
|
|
|
1694
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1695
|
+
|--------|--------|--------|--------|--------|
|
|
1696
|
+
| actions | 自定义按钮组 | ReactNode | - | 5.24.0 |
|
|
1697
|
+
| className | 自定义 CSS class | string | - | - |
|
|
1698
|
+
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1699
|
+
| description | 通知提醒内容，必选 | ReactNode | - | - |
|
|
1700
|
+
| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 | - |
|
|
1701
|
+
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1702
|
+
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1703
|
+
| icon | 自定义图标 | ReactNode | - | - |
|
|
1704
|
+
| key | 当前通知唯一标志 | string | - | - |
|
|
1705
|
+
| message | 通知提醒标题，必选 | ReactNode | - | - |
|
|
1706
|
+
| placement | 弹出位置，可选 | string | topRight | - |
|
|
1707
|
+
| style | 自定义内联样式 | | - | - |
|
|
1708
|
+
| role | 供屏幕阅读器识别的通知内容语义，默认为 | alert \| status | alert | 5.6.0 |
|
|
1709
|
+
| onClick | 点击通知时触发的回调函数 | function | - | - |
|
|
1710
|
+
| onClose | 当通知关闭时触发 | function | - | - |
|
|
1711
|
+
| props | 透传至通知 | Object | - | - |
|
|
1871
1712
|
|
|
1872
|
-
```tsx
|
|
1873
|
-
interface CountConfig {
|
|
1874
|
-
// 最大字符数，不同于原生 `maxLength`，超出后标红但不会截断
|
|
1875
|
-
max?: number;
|
|
1876
|
-
// 自定义字符计数，例如标准 emoji 长度大于 1，可以自定义计数策略将其改为 1
|
|
1877
|
-
strategy?: (value: string) => number;
|
|
1878
|
-
// 同 `showCount`
|
|
1879
|
-
show?: boolean | ((args: { value: string; count: number; maxLength?: number }) => ReactNode);
|
|
1880
|
-
// 当字符数超出 `count.max` 时的自定义裁剪逻辑，不配置时不进行裁剪
|
|
1881
|
-
exceedFormatter?: (value: string, config: { max: number }) => string;
|
|
1882
|
-
}
|
|
1883
|
-
```
|
|
1884
1713
|
|
|
1885
1714
|
|
|
1886
|
-
|
|
1715
|
+
- `notification.useNotification(config)`
|
|
1887
1716
|
|
|
1888
|
-
|
|
1717
|
+
config 参数如下：
|
|
1889
1718
|
|
|
1890
1719
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1891
1720
|
|--------|--------|--------|--------|--------|
|
|
1892
|
-
|
|
|
1893
|
-
|
|
|
1894
|
-
|
|
|
1721
|
+
| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 | |
|
|
1722
|
+
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1723
|
+
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body | |
|
|
1724
|
+
| placement | 弹出位置，可选 | string | topRight | |
|
|
1725
|
+
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1726
|
+
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1727
|
+
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1728
|
+
| stack | 堆叠模式，超过阈值时会将所有消息收起 | boolean \| | { threshold: 3 } | 5.10.0 |
|
|
1729
|
+
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | |
|
|
1730
|
+
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
|
|
1895
1731
|
|
|
1896
1732
|
|
|
1897
|
-
|
|
1733
|
+
### 全局配置
|
|
1898
1734
|
|
|
1899
|
-
|
|
1735
|
+
还提供了一个全局配置方法，在调用前提前配置，全局一次生效。
|
|
1900
1736
|
|
|
1901
|
-
|
|
1902
|
-
|--------|--------|--------|--------|
|
|
1903
|
-
| enterButton | 是否有确认按钮，可设为按钮文字。该属性会与 | ReactNode | false |
|
|
1904
|
-
| loading | 搜索 loading | boolean | false |
|
|
1905
|
-
| onSearch | 点击搜索图标、清除图标，或按下回车键时的回调 | function(value, event, { source: "input" \| "clear" }) | - |
|
|
1737
|
+
`notification.config(options)`
|
|
1906
1738
|
|
|
1739
|
+
当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)当你想单独使用，可通过如下设置开启 RTL 模式。
|
|
1907
1740
|
|
|
1908
|
-
其余属性和 Input 一致。
|
|
1909
1741
|
|
|
1910
|
-
|
|
1742
|
+
```js
|
|
1743
|
+
notification.config({
|
|
1744
|
+
placement: 'bottomRight',
|
|
1745
|
+
bottom: 50,
|
|
1746
|
+
duration: 3,
|
|
1747
|
+
rtl: true,
|
|
1748
|
+
});
|
|
1749
|
+
```
|
|
1750
|
+
|
|
1751
|
+
|
|
1752
|
+
#### notification.config
|
|
1911
1753
|
|
|
1912
1754
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1913
1755
|
|--------|--------|--------|--------|--------|
|
|
1914
|
-
|
|
|
1915
|
-
|
|
|
1756
|
+
| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 | |
|
|
1757
|
+
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1758
|
+
| duration | 默认自动关闭延时，单位秒 | number | 4.5 | |
|
|
1759
|
+
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1760
|
+
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1761
|
+
| getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLNode | () => document.body | |
|
|
1762
|
+
| placement | 弹出位置，可选 | string | topRight | |
|
|
1763
|
+
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1764
|
+
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | |
|
|
1765
|
+
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
|
|
1916
1766
|
|
|
1917
1767
|
|
|
1918
|
-
### Input.OTP
|
|
1919
1768
|
|
|
1920
|
-
`5.16.0` 新增。
|
|
1921
1769
|
|
|
1922
|
-
|
|
1770
|
+
<DemoTitle title="InputNumber" desc="通过鼠标或键盘，输入范围内的数值。">
|
|
1771
|
+
#### API
|
|
1923
1772
|
|
|
1924
|
-
|
|
1925
|
-
|--------|--------|--------|--------|--------|
|
|
1926
|
-
| defaultValue | 默认值 | string | - | |
|
|
1927
|
-
| disabled | 是否禁用 | boolean | false | |
|
|
1928
|
-
| formatter | 格式化展示，留空字段会被 | (value: string) => string | - | |
|
|
1929
|
-
| separator | 分隔符，在指定索引的输入框后渲染分隔符 | ReactNode \|((i: number) => ReactNode) | - | 5.24.0 |
|
|
1930
|
-
| mask | 自定义展示，和 | boolean \| string | false | 5.17.0 |
|
|
1931
|
-
| length | 输入元素数量 | number | 6 | |
|
|
1932
|
-
| status | 设置校验状态 | 'error' \| 'warning' | - | |
|
|
1933
|
-
| size | 输入框大小 | small | middle | |
|
|
1934
|
-
| variant | 形态变体 | outlined | outlined | underlined |
|
|
1935
|
-
| value | 输入框内容 | string | - | |
|
|
1936
|
-
| onChange | 当输入框内容全部填充时触发回调 | (value: string) => void | - | |
|
|
1937
|
-
| onInput | 输入值变化时触发的回调 | (value: string[]) => void | - | 5.22.0 |
|
|
1773
|
+
<AntdApiRef url="https://ant.design/components/input-number-cn/#api"></AntdApiRef>
|
|
1938
1774
|
|
|
1939
1775
|
|
|
1940
|
-
|
|
1776
|
+
## antd API
|
|
1941
1777
|
|
|
1942
|
-
|
|
1778
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1779
|
+
|
|
1780
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1943
1781
|
|--------|--------|--------|--------|--------|
|
|
1944
|
-
|
|
|
1945
|
-
|
|
|
1782
|
+
| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | 4.17.0 |
|
|
1783
|
+
| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | 4.17.0 |
|
|
1784
|
+
| autoFocus | 自动获取焦点 | boolean | false | - |
|
|
1785
|
+
| changeOnBlur | 是否在失去焦点时，触发 | boolean | true | 5.11.0 |
|
|
1786
|
+
| changeOnWheel | 允许鼠标滚轮改变数值 | boolean | - | 5.14.0 |
|
|
1787
|
+
| controls | 是否显示增减按钮，也可设置自定义箭头图标 | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
|
|
1788
|
+
| decimalSeparator | 小数点 | string | - | - |
|
|
1789
|
+
| placeholder | 占位符 | string | - | |
|
|
1790
|
+
| defaultValue | 初始值 | number | - | - |
|
|
1791
|
+
| disabled | 禁用 | boolean | false | - |
|
|
1792
|
+
| formatter | 指定输入框展示值的格式 | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - | info: 4.17.0 |
|
|
1793
|
+
| keyboard | 是否启用键盘快捷行为 | boolean | true | 4.12.0 |
|
|
1794
|
+
| max | 最大值 | number | | - |
|
|
1795
|
+
| min | 最小值 | number | | - |
|
|
1796
|
+
| parser | 指定从 | function(string): number | - | - |
|
|
1797
|
+
| precision | 数值精度，配置 | number | - | - |
|
|
1798
|
+
| readOnly | 只读 | boolean | false | - |
|
|
1799
|
+
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
1800
|
+
| prefix | 带有前缀图标的 input | ReactNode | - | 4.17.0 |
|
|
1801
|
+
| suffix | 带有后缀图标的 input | ReactNode | - | 5.20.0 |
|
|
1802
|
+
| size | 输入框大小 | large | - | - |
|
|
1803
|
+
| step | 每次改变步数，可以为小数 | number \| string | 1 | - |
|
|
1804
|
+
| stringMode | 字符值模式，开启后支持高精度小数。同时 | boolean | false | 4.13.0 |
|
|
1805
|
+
| value | 当前值 | number | - | - |
|
|
1806
|
+
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
1807
|
+
| onChange | 变化回调 | function(value: number \| string \| null) | - | - |
|
|
1808
|
+
| onPressEnter | 按下回车的回调 | function(e) | - | - |
|
|
1809
|
+
| onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 |
|
|
1946
1810
|
|
|
1947
1811
|
|
|
1948
|
-
|
|
1812
|
+
## Ref
|
|
1949
1813
|
|
|
1950
1814
|
| 名称 | 说明 | 参数 | 版本 |
|
|
1951
1815
|
|--------|--------|--------|--------|
|
|
1952
|
-
| blur |
|
|
1953
|
-
| focus | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) |
|
|
1816
|
+
| blur() | 移除焦点 | - | |
|
|
1817
|
+
| focus() | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | cursor - 5.22.0 |
|
|
1818
|
+
| nativeElement | 获取原生 DOM 元素 | - | 5.17.3 |
|
|
1954
1819
|
|
|
1955
1820
|
|
|
1956
1821
|
|
|
@@ -2107,18 +1972,199 @@ type TransformAction =
|
|
|
2107
1972
|
```
|
|
2108
1973
|
|
|
2109
1974
|
|
|
2110
|
-
### ImgInfo
|
|
1975
|
+
### ImgInfo
|
|
1976
|
+
|
|
1977
|
+
|
|
1978
|
+
```typescript
|
|
1979
|
+
{
|
|
1980
|
+
url: string;
|
|
1981
|
+
alt: string;
|
|
1982
|
+
width: string | number;
|
|
1983
|
+
height: string | number;
|
|
1984
|
+
}
|
|
1985
|
+
```
|
|
1986
|
+
|
|
1987
|
+
|
|
1988
|
+
|
|
1989
|
+
|
|
1990
|
+
<DemoTitle title="Input" desc="通过鼠标或键盘输入内容，为表单提供输入字段的基础容器。。">
|
|
1991
|
+
#### API
|
|
1992
|
+
|
|
1993
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1994
|
+
|--------|--------|--------|--------|
|
|
1995
|
+
| shape | 形态 | 'default' \| 'round' | default 默认 |
|
|
1996
|
+
|
|
1997
|
+
|
|
1998
|
+
<AntdApiRef url="https://ant.design/components/input-cn/#api"></AntdApiRef>
|
|
1999
|
+
|
|
2000
|
+
|
|
2001
|
+
## antd API
|
|
2002
|
+
|
|
2003
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2004
|
+
|
|
2005
|
+
### Input
|
|
2006
|
+
|
|
2007
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2008
|
+
|--------|--------|--------|--------|--------|
|
|
2009
|
+
| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | |
|
|
2010
|
+
| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | |
|
|
2011
|
+
| allowClear | 可以点击清除图标删除内容 | boolean \| { clearIcon: ReactNode } | - | |
|
|
2012
|
+
| classNames | 语义化结构 class | Record< | - | 5.4.0 |
|
|
2013
|
+
| count | 字符计数配置 | | - | 5.10.0 |
|
|
2014
|
+
| defaultValue | 输入框默认内容 | string | - | |
|
|
2015
|
+
| disabled | 是否禁用状态，默认为 false | boolean | false | |
|
|
2016
|
+
| id | 输入框的 id | string | - | |
|
|
2017
|
+
| maxLength | 最大长度 | number | - | |
|
|
2018
|
+
| prefix | 带有前缀图标的 input | ReactNode | - | |
|
|
2019
|
+
| showCount | 是否展示字数 | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 info.value: 4.23.0 |
|
|
2020
|
+
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
2021
|
+
| styles | 语义化结构 style | Record< | - | 5.4.0 |
|
|
2022
|
+
| size | 控件大小。注：标准表单内的输入框大小限制为 | large | - | |
|
|
2023
|
+
| suffix | 带有后缀图标的 input | ReactNode | - | |
|
|
2024
|
+
| type | 声明 input 类型，同原生 input 标签的 type 属性，见： | string | text | |
|
|
2025
|
+
| value | 输入框内容 | string | - | |
|
|
2026
|
+
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
2027
|
+
| onChange | 输入框内容变化时的回调 | function(e) | - | |
|
|
2028
|
+
| onPressEnter | 按下回车的回调 | function(e) | - | |
|
|
2029
|
+
| onClear | 按下清除按钮的回调 | () => void | - | 5.20.0 |
|
|
2030
|
+
|
|
2031
|
+
|
|
2032
|
+
如果 `Input` 在 `Form.Item` 内，并且 `Form.Item` 设置了 `id` 属性，则 `value` `defaultValue` 和 `id` 属性会被自动设置。
|
|
2033
|
+
|
|
2034
|
+
Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-elements.html#all-supported-html-attributes) 一致。
|
|
2035
|
+
|
|
2036
|
+
#### CountConfig
|
|
2037
|
+
|
|
2038
|
+
|
|
2039
|
+
```tsx
|
|
2040
|
+
interface CountConfig {
|
|
2041
|
+
// 最大字符数，不同于原生 `maxLength`，超出后标红但不会截断
|
|
2042
|
+
max?: number;
|
|
2043
|
+
// 自定义字符计数，例如标准 emoji 长度大于 1，可以自定义计数策略将其改为 1
|
|
2044
|
+
strategy?: (value: string) => number;
|
|
2045
|
+
// 同 `showCount`
|
|
2046
|
+
show?: boolean | ((args: { value: string; count: number; maxLength?: number }) => ReactNode);
|
|
2047
|
+
// 当字符数超出 `count.max` 时的自定义裁剪逻辑，不配置时不进行裁剪
|
|
2048
|
+
exceedFormatter?: (value: string, config: { max: number }) => string;
|
|
2049
|
+
}
|
|
2050
|
+
```
|
|
2051
|
+
|
|
2052
|
+
|
|
2053
|
+
### Input.TextArea
|
|
2054
|
+
|
|
2055
|
+
同 Input 属性，外加：
|
|
2056
|
+
|
|
2057
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2058
|
+
|--------|--------|--------|--------|--------|
|
|
2059
|
+
| autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false | |
|
|
2060
|
+
| classNames | 语义化结构 class | Record< | - | 5.4.0 |
|
|
2061
|
+
| styles | 语义化结构 style | Record< | - | 5.4.0 |
|
|
2062
|
+
|
|
2063
|
+
|
|
2064
|
+
`Input.TextArea` 的其他属性和浏览器自带的 [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) 一致。
|
|
2065
|
+
|
|
2066
|
+
### Input.Search
|
|
2067
|
+
|
|
2068
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
2069
|
+
|--------|--------|--------|--------|
|
|
2070
|
+
| enterButton | 是否有确认按钮，可设为按钮文字。该属性会与 | ReactNode | false |
|
|
2071
|
+
| loading | 搜索 loading | boolean | false |
|
|
2072
|
+
| onSearch | 点击搜索图标、清除图标，或按下回车键时的回调 | function(value, event, { source: "input" \| "clear" }) | - |
|
|
2073
|
+
|
|
2074
|
+
|
|
2075
|
+
其余属性和 Input 一致。
|
|
2076
|
+
|
|
2077
|
+
### Input.Password
|
|
2078
|
+
|
|
2079
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2080
|
+
|--------|--------|--------|--------|--------|
|
|
2081
|
+
| iconRender | 自定义切换按钮 | (visible) => ReactNode | (visible) => (visible ? : ) | 4.3.0 |
|
|
2082
|
+
| visibilityToggle | 是否显示切换按钮或者控制密码显隐 | boolean \| | true | |
|
|
2083
|
+
|
|
2084
|
+
|
|
2085
|
+
### Input.OTP
|
|
2086
|
+
|
|
2087
|
+
`5.16.0` 新增。
|
|
2088
|
+
|
|
2089
|
+
开发者注意事项：当 `mask` 属性的类型为 string 时，我们强烈推荐接收单个字符或单个 emoji，如果传入多个字符或多个 emoji，则会在控制台抛出警告。
|
|
2090
|
+
|
|
2091
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2092
|
+
|--------|--------|--------|--------|--------|
|
|
2093
|
+
| defaultValue | 默认值 | string | - | |
|
|
2094
|
+
| disabled | 是否禁用 | boolean | false | |
|
|
2095
|
+
| formatter | 格式化展示，留空字段会被 | (value: string) => string | - | |
|
|
2096
|
+
| separator | 分隔符，在指定索引的输入框后渲染分隔符 | ReactNode \|((i: number) => ReactNode) | - | 5.24.0 |
|
|
2097
|
+
| mask | 自定义展示，和 | boolean \| string | false | 5.17.0 |
|
|
2098
|
+
| length | 输入元素数量 | number | 6 | |
|
|
2099
|
+
| status | 设置校验状态 | 'error' \| 'warning' | - | |
|
|
2100
|
+
| size | 输入框大小 | small | middle | |
|
|
2101
|
+
| variant | 形态变体 | outlined | outlined | underlined |
|
|
2102
|
+
| value | 输入框内容 | string | - | |
|
|
2103
|
+
| onChange | 当输入框内容全部填充时触发回调 | (value: string) => void | - | |
|
|
2104
|
+
| onInput | 输入值变化时触发的回调 | (value: string[]) => void | - | 5.22.0 |
|
|
2105
|
+
|
|
2106
|
+
|
|
2107
|
+
#### VisibilityToggle
|
|
2108
|
+
|
|
2109
|
+
| Property | Description | Type | Default | Version |
|
|
2110
|
+
|--------|--------|--------|--------|--------|
|
|
2111
|
+
| visible | 用于手动控制密码显隐 | boolean | false | 4.24 |
|
|
2112
|
+
| onVisibleChange | 显隐密码的回调 | (visible) => void | - | 4.24 |
|
|
2113
|
+
|
|
2114
|
+
|
|
2115
|
+
#### Input Methods
|
|
2116
|
+
|
|
2117
|
+
| 名称 | 说明 | 参数 | 版本 |
|
|
2118
|
+
|--------|--------|--------|--------|
|
|
2119
|
+
| blur | 取消焦点 | - | |
|
|
2120
|
+
| focus | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | option - 4.10.0 |
|
|
2121
|
+
|
|
2122
|
+
|
|
2123
|
+
|
|
2124
|
+
|
|
2125
|
+
<DemoTitle title="IconButton" desc="以图标为核心的轻量按钮组件，用于触发操作。">
|
|
2126
|
+
#### API
|
|
2127
|
+
|
|
2128
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2129
|
+
|--------|--------|--------|--------|
|
|
2130
|
+
| icon | icon | ReactNode \| string | |
|
|
2131
|
+
| iconType | 百炼图标iconfont的key，依赖百炼的iconFont，例如bl-icon-add | string | |
|
|
2132
|
+
| bordered | 边框 | boolean | true |
|
|
2133
|
+
| shape | 形状 | 'default' \| 'circle' | 'default' |
|
|
2134
|
+
|
|
2135
|
+
|
|
2136
|
+
## antd API
|
|
2137
|
+
|
|
2138
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2139
|
+
|
|
2140
|
+
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
2141
|
+
|
|
2142
|
+
按钮的属性说明如下：
|
|
2143
|
+
|
|
2144
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
2145
|
+
|--------|--------|--------|--------|--------|
|
|
2146
|
+
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
2147
|
+
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
2148
|
+
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
2149
|
+
| color | 设置按钮的颜色 | default | - | default |
|
|
2150
|
+
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
2151
|
+
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
2152
|
+
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
2153
|
+
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2154
|
+
| htmlType | 设置 | submit | button | |
|
|
2155
|
+
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
2156
|
+
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
2157
|
+
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
2158
|
+
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
2159
|
+
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
2160
|
+
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
2161
|
+
|
|
2111
2162
|
|
|
2163
|
+
支持原生 button 的其他所有属性。
|
|
2112
2164
|
|
|
2113
|
-
|
|
2114
|
-
{
|
|
2115
|
-
url: string;
|
|
2116
|
-
alt: string;
|
|
2117
|
-
width: string | number;
|
|
2118
|
-
height: string | number;
|
|
2119
|
-
}
|
|
2120
|
-
```
|
|
2165
|
+
### PresetColors
|
|
2121
2166
|
|
|
2167
|
+
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
2122
2168
|
|
|
2123
2169
|
|
|
2124
2170
|
|
|
@@ -2682,52 +2728,6 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
|
|
|
2682
2728
|
|
|
2683
2729
|
|
|
2684
2730
|
|
|
2685
|
-
<DemoTitle title="IconButton" desc="以图标为核心的轻量按钮组件，用于触发操作。">
|
|
2686
|
-
#### API
|
|
2687
|
-
|
|
2688
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2689
|
-
|--------|--------|--------|--------|
|
|
2690
|
-
| icon | icon | ReactNode \| string | |
|
|
2691
|
-
| iconType | 百炼图标iconfont的key，依赖百炼的iconFont，例如bl-icon-add | string | |
|
|
2692
|
-
| bordered | 边框 | boolean | true |
|
|
2693
|
-
| shape | 形状 | 'default' \| 'circle' | 'default' |
|
|
2694
|
-
|
|
2695
|
-
|
|
2696
|
-
## antd API
|
|
2697
|
-
|
|
2698
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2699
|
-
|
|
2700
|
-
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
2701
|
-
|
|
2702
|
-
按钮的属性说明如下：
|
|
2703
|
-
|
|
2704
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
2705
|
-
|--------|--------|--------|--------|--------|
|
|
2706
|
-
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
2707
|
-
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
2708
|
-
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
2709
|
-
| color | 设置按钮的颜色 | default | - | default |
|
|
2710
|
-
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
2711
|
-
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
2712
|
-
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
2713
|
-
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2714
|
-
| htmlType | 设置 | submit | button | |
|
|
2715
|
-
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
2716
|
-
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
2717
|
-
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
2718
|
-
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
2719
|
-
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
2720
|
-
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
2721
|
-
|
|
2722
|
-
|
|
2723
|
-
支持原生 button 的其他所有属性。
|
|
2724
|
-
|
|
2725
|
-
### PresetColors
|
|
2726
|
-
|
|
2727
|
-
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
2728
|
-
|
|
2729
|
-
|
|
2730
|
-
|
|
2731
2731
|
<DemoTitle title="FloatButton" desc="用于网站上的全局功能；无论浏览到何处都可以看见的按钮。">
|
|
2732
2732
|
#### API
|
|
2733
2733
|
|
|
@@ -2825,6 +2825,44 @@ type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' |
|
|
|
2825
2825
|
|
|
2826
2826
|
|
|
2827
2827
|
|
|
2828
|
+
<DemoTitle title="Descriptions" desc="展示多个只读字段的组合">
|
|
2829
|
+
#### API
|
|
2830
|
+
|
|
2831
|
+
<AntdApiRef url="https://ant.design/components/descriptions-cn/#api"></AntdApiRef>
|
|
2832
|
+
|
|
2833
|
+
|
|
2834
|
+
## antd API
|
|
2835
|
+
|
|
2836
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2837
|
+
|
|
2838
|
+
### Descriptions
|
|
2839
|
+
|
|
2840
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2841
|
+
|--------|--------|--------|--------|--------|
|
|
2842
|
+
| bordered | 是否展示边框 | boolean | false | |
|
|
2843
|
+
| colon | 配置 | boolean | true | |
|
|
2844
|
+
| column | 一行的 | number \| | 3 | |
|
|
2845
|
+
| extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 |
|
|
2846
|
+
| items | 描述列表项内容 | | - | 5.8.0 |
|
|
2847
|
+
| layout | 描述布局 | horizontal | horizontal | |
|
|
2848
|
+
| size | 设置列表的大小。可以设置为 | default | - | |
|
|
2849
|
+
| title | 描述列表的标题，显示在最顶部 | ReactNode | - | |
|
|
2850
|
+
| classNames | 语义化结构 class | | - | 5.23.0 |
|
|
2851
|
+
| styles | 语义化结构 style | | - | 5.23.0 |
|
|
2852
|
+
|
|
2853
|
+
|
|
2854
|
+
### DescriptionItem
|
|
2855
|
+
|
|
2856
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2857
|
+
|--------|--------|--------|--------|--------|
|
|
2858
|
+
| label | 内容的描述 | ReactNode | - | |
|
|
2859
|
+
| span | 包含列的数量（ | number\| | 1 | screens: 5.9.0 |
|
|
2860
|
+
|
|
2861
|
+
|
|
2862
|
+
span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
|
|
2863
|
+
|
|
2864
|
+
|
|
2865
|
+
|
|
2828
2866
|
<DemoTitle title="Dropdown" desc="向下弹出的列表。">
|
|
2829
2867
|
#### API
|
|
2830
2868
|
|
|
@@ -2933,218 +2971,45 @@ type ItemType = [MenuItemType](#menuitemtype) | [SubMenuType](#submenutype) | [M
|
|
|
2933
2971
|
| label | 菜单项标题 | ReactNode | - | |
|
|
2934
2972
|
| popupClassName | 子菜单样式， | string | - | |
|
|
2935
2973
|
| popupOffset | 子菜单偏移量， | [number, number] | - | |
|
|
2936
|
-
| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | - | |
|
|
2937
|
-
| theme | 设置子菜单的主题，默认从 Menu 上继承 | light | - | |
|
|
2938
|
-
|
|
2939
|
-
|
|
2940
|
-
#### MenuItemGroupType
|
|
2941
|
-
|
|
2942
|
-
定义类型为 `group` 时，会作为分组处理:
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
```ts
|
|
2946
|
-
const groupItem = {
|
|
2947
|
-
type: 'group', // Must have
|
|
2948
|
-
label: 'My Group',
|
|
2949
|
-
children: [],
|
|
2950
|
-
};
|
|
2951
|
-
```
|
|
2952
|
-
|
|
2953
|
-
|
|
2954
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2955
|
-
|--------|--------|--------|--------|--------|
|
|
2956
|
-
| children | 分组的菜单项 | | - | |
|
|
2957
|
-
| label | 分组标题 | ReactNode | - | |
|
|
2958
|
-
|
|
2959
|
-
|
|
2960
|
-
#### MenuDividerType
|
|
2961
|
-
|
|
2962
|
-
菜单项分割线，只用在弹出菜单内，需要定义类型为 `divider`：
|
|
2963
|
-
|
|
2964
|
-
|
|
2965
|
-
```ts
|
|
2966
|
-
const dividerItem = {
|
|
2967
|
-
type: 'divider', // Must have
|
|
2968
|
-
};
|
|
2969
|
-
```
|
|
2970
|
-
|
|
2971
|
-
|
|
2972
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2973
|
-
|--------|--------|--------|--------|--------|
|
|
2974
|
-
| dashed | 是否虚线 | boolean | false | |
|
|
2975
|
-
|
|
2976
|
-
|
|
2977
|
-
|
|
2978
|
-
|
|
2979
|
-
<DemoTitle title="Descriptions" desc="展示多个只读字段的组合">
|
|
2980
|
-
#### API
|
|
2981
|
-
|
|
2982
|
-
<AntdApiRef url="https://ant.design/components/descriptions-cn/#api"></AntdApiRef>
|
|
2983
|
-
|
|
2984
|
-
|
|
2985
|
-
## antd API
|
|
2986
|
-
|
|
2987
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2988
|
-
|
|
2989
|
-
### Descriptions
|
|
2990
|
-
|
|
2991
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2992
|
-
|--------|--------|--------|--------|--------|
|
|
2993
|
-
| bordered | 是否展示边框 | boolean | false | |
|
|
2994
|
-
| colon | 配置 | boolean | true | |
|
|
2995
|
-
| column | 一行的 | number \| | 3 | |
|
|
2996
|
-
| extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 |
|
|
2997
|
-
| items | 描述列表项内容 | | - | 5.8.0 |
|
|
2998
|
-
| layout | 描述布局 | horizontal | horizontal | |
|
|
2999
|
-
| size | 设置列表的大小。可以设置为 | default | - | |
|
|
3000
|
-
| title | 描述列表的标题，显示在最顶部 | ReactNode | - | |
|
|
3001
|
-
| classNames | 语义化结构 class | | - | 5.23.0 |
|
|
3002
|
-
| styles | 语义化结构 style | | - | 5.23.0 |
|
|
3003
|
-
|
|
3004
|
-
|
|
3005
|
-
### DescriptionItem
|
|
3006
|
-
|
|
3007
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3008
|
-
|--------|--------|--------|--------|--------|
|
|
3009
|
-
| label | 内容的描述 | ReactNode | - | |
|
|
3010
|
-
| span | 包含列的数量（ | number\| | 1 | screens: 5.9.0 |
|
|
3011
|
-
|
|
3012
|
-
|
|
3013
|
-
span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
|
|
3014
|
-
|
|
3015
|
-
|
|
3016
|
-
|
|
3017
|
-
<DemoTitle title="Drawer" desc="从页面一侧滑入的操作面板，用于承载临时界面内容。">
|
|
3018
|
-
#### API
|
|
3019
|
-
|
|
3020
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3021
|
-
|--------|--------|--------|--------|
|
|
3022
|
-
| showDivider | 是否显示分割线 | boolean | true |
|
|
3023
|
-
|
|
3024
|
-
##### Drawer.Confirm - 带按钮的抽屉
|
|
3025
|
-
|
|
3026
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3027
|
-
|--------|--------|--------|--------|
|
|
3028
|
-
| footer | 自定义底部内容 | React.ReactNode | |
|
|
3029
|
-
| onOk | 点击确定回调 | () => void | |
|
|
3030
|
-
| okText | 确认按钮文字 | string | |
|
|
3031
|
-
| okButtonProps | 确认按钮属性 | ButtonProps | |
|
|
3032
|
-
| onCancel | 点击取消回调 | () => void | |
|
|
3033
|
-
| cancelText | 取消按钮文字 | string | |
|
|
3034
|
-
| cancelButtonProps | 取消按钮属性 | ButtonProps | |
|
|
3035
|
-
| info | 底部额外内容 | React.ReactNode | |
|
|
3036
|
-
|
|
3037
|
-
<AntdApiRef url="https://ant.design/components/drawer-cn/#api"></AntdApiRef>
|
|
3038
|
-
|
|
3039
|
-
|
|
3040
|
-
## antd API
|
|
3041
|
-
|
|
3042
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3043
|
-
|
|
3044
|
-
<!-- prettier-ignore -->
|
|
3045
|
-
<Container type="warning" title="注意">
|
|
3046
|
-
v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v4 `className` 与 `style` 改至配置 Drawer 窗体样式以和 Modal 对齐。
|
|
3047
|
-
</Container>
|
|
3048
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3049
|
-
|--------|--------|--------|--------|--------|
|
|
3050
|
-
| autoFocus | 抽屉展开后是否将焦点切换至其 DOM 节点 | boolean | true | 4.17.0 |
|
|
3051
|
-
| afterOpenChange | 切换抽屉时动画结束后的回调 | function(open) | - | |
|
|
3052
|
-
| className | Drawer 容器外层 className 设置，如果需要设置最外层，请使用 rootClassName | string | - | |
|
|
3053
|
-
| classNames | 语义化结构 className | | - | 5.10.0 |
|
|
3054
|
-
| closeIcon | 自定义关闭图标。5.7.0：设置为 | ReactNode | | |
|
|
3055
|
-
| destroyOnHidden | 关闭时销毁 Drawer 里的子元素 | boolean | false | 5.25.0 |
|
|
3056
|
-
| extra | 抽屉右上角的操作区域 | ReactNode | - | 4.17.0 |
|
|
3057
|
-
| footer | 抽屉的页脚 | ReactNode | - | |
|
|
3058
|
-
| forceRender | 预渲染 Drawer 内元素 | boolean | false | |
|
|
3059
|
-
| getContainer | 指定 Drawer 挂载的节点， | HTMLElement \| () => HTMLElement \| Selectors \| false | body | |
|
|
3060
|
-
| height | 高度，在 | string \| number | 378 | |
|
|
3061
|
-
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
|
|
3062
|
-
| mask | 是否展示遮罩 | boolean | true | |
|
|
3063
|
-
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
|
|
3064
|
-
| placement | 抽屉的方向 | top | right | |
|
|
3065
|
-
| push | 用于设置多层 Drawer 的推动行为 | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
|
|
3066
|
-
| rootStyle | 可用于设置 Drawer 最外层容器的样式，和 | CSSProperties | - | |
|
|
3067
|
-
| size | 预设抽屉宽度（或高度），default | 'default' \| 'large' | 'default' | 4.17.0 |
|
|
3068
|
-
| style | 设计 Drawer 容器样式，如果你只需要设置内容部分请使用 | CSSProperties | - | |
|
|
3069
|
-
| styles | 语义化结构 style | | - | 5.10.0 |
|
|
3070
|
-
| title | 标题 | ReactNode | - | |
|
|
3071
|
-
| loading | 显示骨架屏 | boolean | false | 5.17.0 |
|
|
3072
|
-
| open | Drawer 是否可见 | boolean | - |
|
|
3073
|
-
| width | 宽度 | string \| number | 378 | |
|
|
3074
|
-
| zIndex | 设置 Drawer 的 | number | 1000 | |
|
|
3075
|
-
| onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - | |
|
|
3076
|
-
| drawerRender | 自定义渲染抽屉 | (node: ReactNode) => ReactNode | - | 5.18.0 |
|
|
3077
|
-
|
|
3078
|
-
|
|
3079
|
-
|
|
3080
|
-
|
|
3081
|
-
<DemoTitle title="CollapsePanel" desc="折叠面板">
|
|
3082
|
-
#### API
|
|
2974
|
+
| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | - | |
|
|
2975
|
+
| theme | 设置子菜单的主题，默认从 Menu 上继承 | light | - | |
|
|
3083
2976
|
|
|
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
2977
|
|
|
2978
|
+
#### MenuItemGroupType
|
|
3098
2979
|
|
|
2980
|
+
定义类型为 `group` 时，会作为分组处理:
|
|
3099
2981
|
|
|
3100
|
-
## antd API
|
|
3101
2982
|
|
|
3102
|
-
|
|
2983
|
+
```ts
|
|
2984
|
+
const groupItem = {
|
|
2985
|
+
type: 'group', // Must have
|
|
2986
|
+
label: 'My Group',
|
|
2987
|
+
children: [],
|
|
2988
|
+
};
|
|
2989
|
+
```
|
|
3103
2990
|
|
|
3104
|
-
### Collapse
|
|
3105
2991
|
|
|
3106
2992
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3107
2993
|
|--------|--------|--------|--------|--------|
|
|
3108
|
-
|
|
|
3109
|
-
|
|
|
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 |
|
|
2994
|
+
| children | 分组的菜单项 | | - | |
|
|
2995
|
+
| label | 分组标题 | ReactNode | - | |
|
|
3120
2996
|
|
|
3121
2997
|
|
|
3122
|
-
|
|
2998
|
+
#### MenuDividerType
|
|
3123
2999
|
|
|
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 |
|
|
3000
|
+
菜单项分割线，只用在弹出菜单内，需要定义类型为 `divider`：
|
|
3133
3001
|
|
|
3134
3002
|
|
|
3135
|
-
|
|
3003
|
+
```ts
|
|
3004
|
+
const dividerItem = {
|
|
3005
|
+
type: 'divider', // Must have
|
|
3006
|
+
};
|
|
3007
|
+
```
|
|
3008
|
+
|
|
3136
3009
|
|
|
3137
|
-
<!-- prettier-ignore -->
|
|
3138
|
-
<Container type="warning" title="已废弃">
|
|
3139
|
-
版本 >= 5.6.0 时请使用 items 方式配置面板。
|
|
3140
|
-
</Container>
|
|
3141
3010
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3142
3011
|
|--------|--------|--------|--------|--------|
|
|
3143
|
-
|
|
|
3144
|
-
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3145
|
-
| header | 面板标题 | ReactNode | - | |
|
|
3146
|
-
| key | 对应 activeKey | string \| number | - | |
|
|
3147
|
-
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3012
|
+
| dashed | 是否虚线 | boolean | false | |
|
|
3148
3013
|
|
|
3149
3014
|
|
|
3150
3015
|
|
|
@@ -3371,17 +3236,137 @@ export type FormatType =
|
|
|
3371
3236
|
|
|
3372
3237
|
|
|
3373
3238
|
|
|
3374
|
-
<DemoTitle title="
|
|
3239
|
+
<DemoTitle title="CollapsePanel" desc="折叠面板">
|
|
3375
3240
|
#### API
|
|
3376
3241
|
|
|
3377
3242
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3378
3243
|
|--------|--------|--------|--------|
|
|
3379
|
-
|
|
|
3380
|
-
|
|
|
3381
|
-
|
|
|
3382
|
-
|
|
|
3383
|
-
|
|
|
3384
|
-
|
|
|
3244
|
+
| collapsedHeight | 收起状态下显示的内容高度 | number | 0 |
|
|
3245
|
+
| expandedHeight | 展开状态下的内容高度，设置后内容超出时可滚动，不设置则自适应内容高度 | number | 300 |
|
|
3246
|
+
| title | 面板标题 | string \| React.ReactNode | "" |
|
|
3247
|
+
| expandOnPanelClick | 是否允许点击整个面板进行展开 | boolean | false |
|
|
3248
|
+
| extra | 面板右侧内容 | React.ReactNode | |
|
|
3249
|
+
| children | 面板内容 | React.ReactNode | |
|
|
3250
|
+
| defaultExpanded | 是否默认展开 | boolean | false |
|
|
3251
|
+
| classNames | 语义化的classNames | Partial> | |
|
|
3252
|
+
| styles | 语义化的styles | Partial<
|
|
3253
|
+
Record
|
|
3254
|
+
> | |
|
|
3255
|
+
|
|
3256
|
+
|
|
3257
|
+
|
|
3258
|
+
## antd API
|
|
3259
|
+
|
|
3260
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3261
|
+
|
|
3262
|
+
### Collapse
|
|
3263
|
+
|
|
3264
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3265
|
+
|--------|--------|--------|--------|--------|
|
|
3266
|
+
| accordion | 手风琴模式 | boolean | false | |
|
|
3267
|
+
| activeKey | 当前激活 tab 面板的 key | string[] \| string | | |
|
|
3268
|
+
| bordered | 带边框风格的折叠面板 | boolean | true | |
|
|
3269
|
+
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 |
|
|
3270
|
+
| defaultActiveKey | 初始化选中面板的 key | string[] \| string | - | |
|
|
3271
|
+
| destroyOnHidden | 销毁折叠隐藏的面板 | boolean | false | 5.25.0 |
|
|
3272
|
+
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
|
|
3273
|
+
| expandIconPosition | 设置图标位置 | start | - | 4.21.0 |
|
|
3274
|
+
| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
|
|
3275
|
+
| size | 设置折叠面板大小 | large | middle | 5.2.0 |
|
|
3276
|
+
| onChange | 切换面板的回调 | function | - | |
|
|
3277
|
+
| items | 折叠项目内容 | | - | 5.6.0 |
|
|
3278
|
+
|
|
3279
|
+
|
|
3280
|
+
### ItemType
|
|
3281
|
+
|
|
3282
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3283
|
+
|--------|--------|--------|--------|--------|
|
|
3284
|
+
| classNames | 语义化结构 className | | - | 5.21.0 |
|
|
3285
|
+
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | |
|
|
3286
|
+
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3287
|
+
| key | 对应 activeKey | string \| number | - | |
|
|
3288
|
+
| label | 面板标题 | ReactNode | - | - |
|
|
3289
|
+
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3290
|
+
| styles | 语义化结构 style | | - | 5.21.0 |
|
|
3291
|
+
|
|
3292
|
+
|
|
3293
|
+
### Collapse.Panel
|
|
3294
|
+
|
|
3295
|
+
<!-- prettier-ignore -->
|
|
3296
|
+
<Container type="warning" title="已废弃">
|
|
3297
|
+
版本 >= 5.6.0 时请使用 items 方式配置面板。
|
|
3298
|
+
</Container>
|
|
3299
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3300
|
+
|--------|--------|--------|--------|--------|
|
|
3301
|
+
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 (icon: 4.24.0) |
|
|
3302
|
+
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3303
|
+
| header | 面板标题 | ReactNode | - | |
|
|
3304
|
+
| key | 对应 activeKey | string \| number | - | |
|
|
3305
|
+
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3306
|
+
|
|
3307
|
+
|
|
3308
|
+
|
|
3309
|
+
|
|
3310
|
+
<DemoTitle title="Drawer" desc="从页面一侧滑入的操作面板，用于承载临时界面内容。">
|
|
3311
|
+
#### API
|
|
3312
|
+
|
|
3313
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3314
|
+
|--------|--------|--------|--------|
|
|
3315
|
+
| showDivider | 是否显示分割线 | boolean | true |
|
|
3316
|
+
|
|
3317
|
+
##### Drawer.Confirm - 带按钮的抽屉
|
|
3318
|
+
|
|
3319
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3320
|
+
|--------|--------|--------|--------|
|
|
3321
|
+
| footer | 自定义底部内容 | React.ReactNode | |
|
|
3322
|
+
| onOk | 点击确定回调 | () => void | |
|
|
3323
|
+
| okText | 确认按钮文字 | string | |
|
|
3324
|
+
| okButtonProps | 确认按钮属性 | ButtonProps | |
|
|
3325
|
+
| onCancel | 点击取消回调 | () => void | |
|
|
3326
|
+
| cancelText | 取消按钮文字 | string | |
|
|
3327
|
+
| cancelButtonProps | 取消按钮属性 | ButtonProps | |
|
|
3328
|
+
| info | 底部额外内容 | React.ReactNode | |
|
|
3329
|
+
|
|
3330
|
+
<AntdApiRef url="https://ant.design/components/drawer-cn/#api"></AntdApiRef>
|
|
3331
|
+
|
|
3332
|
+
|
|
3333
|
+
## antd API
|
|
3334
|
+
|
|
3335
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3336
|
+
|
|
3337
|
+
<!-- prettier-ignore -->
|
|
3338
|
+
<Container type="warning" title="注意">
|
|
3339
|
+
v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v4 `className` 与 `style` 改至配置 Drawer 窗体样式以和 Modal 对齐。
|
|
3340
|
+
</Container>
|
|
3341
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3342
|
+
|--------|--------|--------|--------|--------|
|
|
3343
|
+
| autoFocus | 抽屉展开后是否将焦点切换至其 DOM 节点 | boolean | true | 4.17.0 |
|
|
3344
|
+
| afterOpenChange | 切换抽屉时动画结束后的回调 | function(open) | - | |
|
|
3345
|
+
| className | Drawer 容器外层 className 设置，如果需要设置最外层，请使用 rootClassName | string | - | |
|
|
3346
|
+
| classNames | 语义化结构 className | | - | 5.10.0 |
|
|
3347
|
+
| closeIcon | 自定义关闭图标。5.7.0：设置为 | ReactNode | | |
|
|
3348
|
+
| destroyOnHidden | 关闭时销毁 Drawer 里的子元素 | boolean | false | 5.25.0 |
|
|
3349
|
+
| extra | 抽屉右上角的操作区域 | ReactNode | - | 4.17.0 |
|
|
3350
|
+
| footer | 抽屉的页脚 | ReactNode | - | |
|
|
3351
|
+
| forceRender | 预渲染 Drawer 内元素 | boolean | false | |
|
|
3352
|
+
| getContainer | 指定 Drawer 挂载的节点， | HTMLElement \| () => HTMLElement \| Selectors \| false | body | |
|
|
3353
|
+
| height | 高度，在 | string \| number | 378 | |
|
|
3354
|
+
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
|
|
3355
|
+
| mask | 是否展示遮罩 | boolean | true | |
|
|
3356
|
+
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
|
|
3357
|
+
| placement | 抽屉的方向 | top | right | |
|
|
3358
|
+
| push | 用于设置多层 Drawer 的推动行为 | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
|
|
3359
|
+
| rootStyle | 可用于设置 Drawer 最外层容器的样式，和 | CSSProperties | - | |
|
|
3360
|
+
| size | 预设抽屉宽度（或高度），default | 'default' \| 'large' | 'default' | 4.17.0 |
|
|
3361
|
+
| style | 设计 Drawer 容器样式，如果你只需要设置内容部分请使用 | CSSProperties | - | |
|
|
3362
|
+
| styles | 语义化结构 style | | - | 5.10.0 |
|
|
3363
|
+
| title | 标题 | ReactNode | - | |
|
|
3364
|
+
| loading | 显示骨架屏 | boolean | false | 5.17.0 |
|
|
3365
|
+
| open | Drawer 是否可见 | boolean | - |
|
|
3366
|
+
| width | 宽度 | string \| number | 378 | |
|
|
3367
|
+
| zIndex | 设置 Drawer 的 | number | 1000 | |
|
|
3368
|
+
| onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - | |
|
|
3369
|
+
| drawerRender | 自定义渲染抽屉 | (node: ReactNode) => ReactNode | - | 5.18.0 |
|
|
3385
3370
|
|
|
3386
3371
|
|
|
3387
3372
|
|
|
@@ -3444,6 +3429,21 @@ export type FormatType =
|
|
|
3444
3429
|
|
|
3445
3430
|
|
|
3446
3431
|
|
|
3432
|
+
<DemoTitle title="CodeBlock" desc="代码块">
|
|
3433
|
+
#### API
|
|
3434
|
+
|
|
3435
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3436
|
+
|--------|--------|--------|--------|
|
|
3437
|
+
| language | 语言 | string \| string[] | (必填) |
|
|
3438
|
+
| value | 值 | string | |
|
|
3439
|
+
| className | 类名 | string | |
|
|
3440
|
+
| theme | 主题 | 'dark' \| 'light' | |
|
|
3441
|
+
| readOnly | 只读 | boolean | |
|
|
3442
|
+
| onChange | | (value?: string) => void | |
|
|
3443
|
+
|
|
3444
|
+
|
|
3445
|
+
|
|
3446
|
+
|
|
3447
3447
|
<DemoTitle title="Checkbox" desc="收集用户的多项选择。">
|
|
3448
3448
|
#### API
|
|
3449
3449
|
|
|
@@ -3502,16 +3502,71 @@ interface Option {
|
|
|
3502
3502
|
```
|
|
3503
3503
|
|
|
3504
3504
|
|
|
3505
|
-
### 方法
|
|
3505
|
+
### 方法
|
|
3506
|
+
|
|
3507
|
+
#### Checkbox
|
|
3508
|
+
|
|
3509
|
+
| 名称 | 描述 | 版本 |
|
|
3510
|
+
|--------|--------|--------|
|
|
3511
|
+
| blur() | 移除焦点 | |
|
|
3512
|
+
| focus() | 获取焦点 | |
|
|
3513
|
+
| nativeElement | 返回 Checkbox 的 DOM 节点 | 5.17.3 |
|
|
3514
|
+
|
|
3515
|
+
|
|
3516
|
+
|
|
3517
|
+
|
|
3518
|
+
<DemoTitle title="Button" desc="按钮用于开始一个即时操作。">
|
|
3519
|
+
#### API
|
|
3520
|
+
|
|
3521
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3522
|
+
|--------|--------|--------|--------|
|
|
3523
|
+
| size | 按钮大小 | 'small' \| 'middle' \| 'large' | 'middle' |
|
|
3524
|
+
| type | 类型 | \| 'primary'
|
|
3525
|
+
\| 'dashed'
|
|
3526
|
+
\| 'link'
|
|
3527
|
+
\| 'text'
|
|
3528
|
+
\| 'default'
|
|
3529
|
+
\| 'primaryLess'
|
|
3530
|
+
\| 'textCompact' | 'deafult' |
|
|
3531
|
+
| tooltipContent | hover上去tooltip的内容 | string \| ReactNode | |
|
|
3532
|
+
| iconType | 百炼图标iconfont的key，依赖ConfigProvider传入的iconfont，例如bl-icon-add | string | |
|
|
3533
|
+
| iconSize | 图标大小 | SparkIconFontProps['size'] | |
|
|
3534
|
+
|
|
3535
|
+
<AntdApiRef url="https://ant.design/components/button-cn/#api"></AntdApiRef>
|
|
3536
|
+
|
|
3537
|
+
|
|
3538
|
+
## antd API
|
|
3539
|
+
|
|
3540
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3541
|
+
|
|
3542
|
+
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
3543
|
+
|
|
3544
|
+
按钮的属性说明如下：
|
|
3506
3545
|
|
|
3507
|
-
|
|
3546
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
3547
|
+
|--------|--------|--------|--------|--------|
|
|
3548
|
+
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
3549
|
+
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
3550
|
+
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
3551
|
+
| color | 设置按钮的颜色 | default | - | default |
|
|
3552
|
+
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
3553
|
+
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
3554
|
+
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
3555
|
+
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
3556
|
+
| htmlType | 设置 | submit | button | |
|
|
3557
|
+
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
3558
|
+
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
3559
|
+
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
3560
|
+
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
3561
|
+
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
3562
|
+
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
3508
3563
|
|
|
3509
|
-
| 名称 | 描述 | 版本 |
|
|
3510
|
-
|--------|--------|--------|
|
|
3511
|
-
| blur() | 移除焦点 | |
|
|
3512
|
-
| focus() | 获取焦点 | |
|
|
3513
|
-
| nativeElement | 返回 Checkbox 的 DOM 节点 | 5.17.3 |
|
|
3514
3564
|
|
|
3565
|
+
支持原生 button 的其他所有属性。
|
|
3566
|
+
|
|
3567
|
+
### PresetColors
|
|
3568
|
+
|
|
3569
|
+
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
3515
3570
|
|
|
3516
3571
|
|
|
3517
3572
|
|
|
@@ -3697,58 +3752,12 @@ return <Breadcrumb itemRender={itemRender} items={items} />;
|
|
|
3697
3752
|
|
|
3698
3753
|
|
|
3699
3754
|
|
|
3700
|
-
<DemoTitle title="
|
|
3755
|
+
<DemoTitle title="Audio" desc="音频展示">
|
|
3701
3756
|
#### API
|
|
3702
3757
|
|
|
3703
|
-
|
|
3704
|
-
|--------|--------|--------|--------|
|
|
3705
|
-
| size | 按钮大小 | 'small' \| 'middle' \| 'large' | 'middle' |
|
|
3706
|
-
| type | 类型 | \| 'primary'
|
|
3707
|
-
\| 'dashed'
|
|
3708
|
-
\| 'link'
|
|
3709
|
-
\| 'text'
|
|
3710
|
-
\| 'default'
|
|
3711
|
-
\| 'primaryLess'
|
|
3712
|
-
\| 'textCompact' | 'deafult' |
|
|
3713
|
-
| tooltipContent | hover上去tooltip的内容 | string \| ReactNode | |
|
|
3714
|
-
| iconType | 百炼图标iconfont的key，依赖ConfigProvider传入的iconfont，例如bl-icon-add | string | |
|
|
3715
|
-
| iconSize | 图标大小 | SparkIconFontProps['size'] | |
|
|
3716
|
-
|
|
3717
|
-
<AntdApiRef url="https://ant.design/components/button-cn/#api"></AntdApiRef>
|
|
3718
|
-
|
|
3719
|
-
|
|
3720
|
-
## antd API
|
|
3721
|
-
|
|
3722
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3723
|
-
|
|
3724
|
-
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
3725
|
-
|
|
3726
|
-
按钮的属性说明如下：
|
|
3727
|
-
|
|
3728
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
3729
|
-
|--------|--------|--------|--------|--------|
|
|
3730
|
-
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
3731
|
-
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
3732
|
-
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
3733
|
-
| color | 设置按钮的颜色 | default | - | default |
|
|
3734
|
-
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
3735
|
-
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
3736
|
-
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
3737
|
-
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
3738
|
-
| htmlType | 设置 | submit | button | |
|
|
3739
|
-
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
3740
|
-
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
3741
|
-
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
3742
|
-
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
3743
|
-
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
3744
|
-
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
3745
|
-
|
|
3746
|
-
|
|
3747
|
-
支持原生 button 的其他所有属性。
|
|
3758
|
+
ApiParser解析结果为空
|
|
3748
3759
|
|
|
3749
|
-
### PresetColors
|
|
3750
3760
|
|
|
3751
|
-
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
3752
3761
|
|
|
3753
3762
|
|
|
3754
3763
|
|
|
@@ -3791,15 +3800,6 @@ Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fa
|
|
|
3791
3800
|
|
|
3792
3801
|
|
|
3793
3802
|
|
|
3794
|
-
<DemoTitle title="Audio" desc="音频展示">
|
|
3795
|
-
#### API
|
|
3796
|
-
|
|
3797
|
-
ApiParser解析结果为空
|
|
3798
|
-
|
|
3799
|
-
|
|
3800
|
-
|
|
3801
|
-
|
|
3802
|
-
|
|
3803
3803
|
<DemoTitle title="Anchor" desc="用于跳转到页面指定位置。">
|
|
3804
3804
|
#### API
|
|
3805
3805
|
|
|
@@ -4060,349 +4060,6 @@ const confirmed = await modal.confirm({ ... });
|
|
|
4060
4060
|
|
|
4061
4061
|
|
|
4062
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 />
|
|
4073
|
-
|
|
4074
|
-
## ✨ 特性
|
|
4075
|
-
|
|
4076
|
-
|
|
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
|
-
- ☀️ 轻松切换明暗模式。
|
|
4083
|
-
|
|
4084
|
-
## 📦 安装
|
|
4085
|
-
|
|
4086
|
-
|
|
4087
|
-
```bash
|
|
4088
|
-
npm install antd @agentscope-ai/icons @agentscope-ai/design --save
|
|
4089
|
-
```
|
|
4090
|
-
|
|
4091
|
-
|
|
4092
|
-
## Tree Shaking 支持
|
|
4093
|
-
|
|
4094
|
-
@agentscope-ai/design 默认基于 ES 模块支持 tree shaking
|
|
4095
|
-
|
|
4096
|
-
## TypeScript
|
|
4097
|
-
|
|
4098
|
-
@agentscope-ai/chat 使用 TypeScript 编写并提供完整的定义文件。
|
|
4099
|
-
|
|
4100
|
-
## 内置主题
|
|
4101
|
-
|
|
4102
|
-
我们提供四种内置主题：
|
|
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 访问我们的项目。
|
|
4112
|
-
|
|
4113
|
-
|
|
4114
|
-
|
|
4115
|
-
## 内置主题
|
|
4116
|
-
|
|
4117
|
-
Alibaba Cloud Spark Design 提供四种内置主题：
|
|
4118
|
-
|
|
4119
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
|
|
4120
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
|
|
4121
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
|
|
4122
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #676767;"></span> carbonDarkTheme（暗色模式）</div>
|
|
4123
|
-
|
|
4124
|
-
### 示例用法
|
|
4125
|
-
|
|
4126
|
-
|
|
4127
|
-
```tsx
|
|
4128
|
-
import { ConfigProvider, purpleTheme } from '@agentscope-ai/design';
|
|
4129
|
-
|
|
4130
|
-
const App = () => {
|
|
4131
|
-
return <ConfigProvider {...purpleTheme}>Hello Spark Design!</ConfigProvider>;
|
|
4132
|
-
};
|
|
4133
|
-
|
|
4134
|
-
export default App;
|
|
4135
|
-
```
|
|
4136
|
-
|
|
4137
|
-
|
|
4138
|
-
## 从 Antd token 生成您自己的主题
|
|
4139
|
-
|
|
4140
|
-
如果您已经有了 Antd 主题，仍然可以使用 generateThemeByToken 生成 spark 风格的主题
|
|
4141
|
-
|
|
4142
|
-
|
|
4143
|
-
```tsx
|
|
4144
|
-
import { ConfigProvider, generateThemeByToken } from '@agentscope-ai/design';
|
|
4145
|
-
const yourToken = {
|
|
4146
|
-
borderRadiusXS: 2,
|
|
4147
|
-
borderRadiusSM: 4,
|
|
4148
|
-
borderRadius: 6,
|
|
4149
|
-
borderRadiusLG: 8,
|
|
4150
|
-
borderRadiusXL: 12,
|
|
4151
|
-
borderRadiusFull: 999,
|
|
4152
|
-
wireframe: false,
|
|
4153
|
-
colorPrimaryBg: '#F2F0FF',
|
|
4154
|
-
colorPrimaryBgHover: '#F2F0FF',
|
|
4155
|
-
colorPrimaryBorder: '#E2DEFF',
|
|
4156
|
-
colorPrimaryBorderHover: '#BCB5FF',
|
|
4157
|
-
// ... 您可以在下一个文档中找到完整版本的 tokens：Tokens 和 CSS 变量
|
|
4158
|
-
};
|
|
4159
|
-
const darkMode = false;
|
|
4160
|
-
const yourThemeWithSparkStyle = generateThemeByToken(yourToken, darkMode);
|
|
4161
|
-
const App = () => {
|
|
4162
|
-
return (
|
|
4163
|
-
<ConfigProvider {...yourThemeWithSparkStyle}>
|
|
4164
|
-
Hello Spark Design!
|
|
4165
|
-
</ConfigProvider>
|
|
4166
|
-
);
|
|
4167
|
-
};
|
|
4168
|
-
|
|
4169
|
-
export default App;
|
|
4170
|
-
```
|
|
4171
|
-
|
|
4172
|
-
|
|
4173
|
-
您仍然可以修改生成的主题：`yourThemeWithSparkStyle`，但不建议这样做。我们建议您保持原始主题以获得 Spark Design 的最佳体验。
|
|
4174
|
-
|
|
4175
|
-
|
|
4176
|
-
|
|
4177
|
-
# 使用
|
|
4178
|
-
|
|
4179
|
-
如果您有自己的 iconfont 项目，可以将您的图标集成到 Spark Design 中，并通过简单的符号名称访问您的图标。
|
|
4180
|
-
|
|
4181
|
-
|
|
4182
|
-
```tsx
|
|
4183
|
-
import {
|
|
4184
|
-
ConfigProvider,
|
|
4185
|
-
purpleTheme,
|
|
4186
|
-
Button,
|
|
4187
|
-
IconFont,
|
|
4188
|
-
IconButton,
|
|
4189
|
-
} from '@agentscope-ai/design';
|
|
4190
|
-
import { Flex } from 'antd';
|
|
4191
|
-
import zhCN from 'antd/locale/zh_CN';
|
|
4192
|
-
import { useState } from 'react';
|
|
4193
|
-
|
|
4194
|
-
const App = () => {
|
|
4195
|
-
const prefix = 'sps';
|
|
4196
|
-
const iconSymbol = 'spark-effciency-line';
|
|
4197
|
-
const iconfont = '//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js'; // 您可以从 https://www.iconfont.cn/ 获取
|
|
4198
|
-
return (
|
|
4199
|
-
<ConfigProvider
|
|
4200
|
-
{...purpleTheme}
|
|
4201
|
-
prefix={prefix}
|
|
4202
|
-
prefixCls={prefix}
|
|
4203
|
-
iconfont={iconfont}
|
|
4204
|
-
locale={zhCN}
|
|
4205
|
-
style={{
|
|
4206
|
-
width: '100%',
|
|
4207
|
-
height: '100%',
|
|
4208
|
-
}}
|
|
4209
|
-
>
|
|
4210
|
-
<Flex
|
|
4211
|
-
style={{
|
|
4212
|
-
width: '100%',
|
|
4213
|
-
height: '100%',
|
|
4214
|
-
backgroundColor: `var(--${prefix}-color-bg-base)`,
|
|
4215
|
-
}}
|
|
4216
|
-
justify="center"
|
|
4217
|
-
align="center"
|
|
4218
|
-
>
|
|
4219
|
-
<Flex vertical gap={16} style={{ width: '300px', padding: '12px 0' }}>
|
|
4220
|
-
<Flex gap={8}>
|
|
4221
|
-
<div style={{ width: '100px', lineHeight: '32px' }}>IconFont:</div>
|
|
4222
|
-
<IconFont type={iconSymbol} />
|
|
4223
|
-
</Flex>
|
|
4224
|
-
<Flex gap={8}>
|
|
4225
|
-
<div style={{ width: '100px', lineHeight: '32px' }}>Button:</div>
|
|
4226
|
-
<Button type="primary" iconType={iconSymbol}>
|
|
4227
|
-
添加用户
|
|
4228
|
-
</Button>
|
|
4229
|
-
</Flex>
|
|
4230
|
-
<Flex gap={8}>
|
|
4231
|
-
<div style={{ width: '100px', lineHeight: '32px' }}>
|
|
4232
|
-
IconButton:
|
|
4233
|
-
</div>
|
|
4234
|
-
<IconButton iconType={iconSymbol}></IconButton>
|
|
4235
|
-
</Flex>
|
|
4236
|
-
</Flex>
|
|
4237
|
-
</Flex>
|
|
4238
|
-
</ConfigProvider>
|
|
4239
|
-
);
|
|
4240
|
-
};
|
|
4241
|
-
|
|
4242
|
-
export default App;
|
|
4243
|
-
```
|
|
4244
|
-
|
|
4245
|
-
|
|
4246
|
-
|
|
4247
|
-
|
|
4248
|
-
# 从 Antd 迁移
|
|
4249
|
-
|
|
4250
|
-
## 📦 安装
|
|
4251
|
-
|
|
4252
|
-
|
|
4253
|
-
```bash
|
|
4254
|
-
$ npm install @agentscope-ai/icons @agentscope-ai/design --save
|
|
4255
|
-
```
|
|
4256
|
-
|
|
4257
|
-
|
|
4258
|
-
## 🔨 使用
|
|
4259
|
-
|
|
4260
|
-
从 @agentscope-ai/design 导出的所有同名组件在 API 方面都与 antd 的对应组件兼容，这意味着您无需学习如何使用它们。如果您想充分利用 Alibaba Cloud Spark Design 的新功能，可以尝试使用这些组件而不是 antd 的组件。
|
|
4261
|
-
|
|
4262
|
-
|
|
4263
|
-
```tsx
|
|
4264
|
-
import {
|
|
4265
|
-
Button,
|
|
4266
|
-
Image,
|
|
4267
|
-
ConfigProvider,
|
|
4268
|
-
purpleDarkTheme,
|
|
4269
|
-
purpleTheme,
|
|
4270
|
-
} from '@agentscope-ai/design';
|
|
4271
|
-
import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
|
|
4272
|
-
import { Flex } from 'antd';
|
|
4273
|
-
import zhCN from 'antd/locale/zh_CN';
|
|
4274
|
-
import { useState } from 'react';
|
|
4275
|
-
|
|
4276
|
-
const App = () => {
|
|
4277
|
-
const [colorMode, setColorMode] = useState('light');
|
|
4278
|
-
const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
|
|
4279
|
-
|
|
4280
|
-
const prefix = 'sps';
|
|
4281
|
-
return (
|
|
4282
|
-
<ConfigProvider
|
|
4283
|
-
{...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
|
|
4284
|
-
prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
|
|
4285
|
-
prefixCls={prefix}
|
|
4286
|
-
iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
|
|
4287
|
-
locale={zhCN} // 来自 Ant Design 的语言包
|
|
4288
|
-
style={{
|
|
4289
|
-
width: '100%',
|
|
4290
|
-
height: '100%',
|
|
4291
|
-
}}
|
|
4292
|
-
>
|
|
4293
|
-
<div
|
|
4294
|
-
style={{
|
|
4295
|
-
width: '100%',
|
|
4296
|
-
height: '100%',
|
|
4297
|
-
backgroundColor: `var(--${prefix}-color-bg-base)`,
|
|
4298
|
-
}}
|
|
4299
|
-
>
|
|
4300
|
-
<Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
|
|
4301
|
-
<Image
|
|
4302
|
-
width={120}
|
|
4303
|
-
src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
|
|
4304
|
-
/>
|
|
4305
|
-
<div
|
|
4306
|
-
style={{
|
|
4307
|
-
color: `var(--${prefix}-ant-color-text-base)`,
|
|
4308
|
-
fontSize: '24px',
|
|
4309
|
-
textAlign: 'center',
|
|
4310
|
-
}}
|
|
4311
|
-
>
|
|
4312
|
-
Hello Spark Design!
|
|
4313
|
-
</div>
|
|
4314
|
-
<Button
|
|
4315
|
-
type="primary"
|
|
4316
|
-
onClick={() => {
|
|
4317
|
-
setColorMode(colorMode === 'light' ? 'dark' : 'light');
|
|
4318
|
-
}}
|
|
4319
|
-
icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
|
|
4320
|
-
>
|
|
4321
|
-
{colorMode === 'light' ? '暗色' : '亮色'} 模式
|
|
4322
|
-
</Button>
|
|
4323
|
-
</Flex>
|
|
4324
|
-
</div>
|
|
4325
|
-
</ConfigProvider>
|
|
4326
|
-
);
|
|
4327
|
-
};
|
|
4328
|
-
|
|
4329
|
-
export default App;
|
|
4330
|
-
```
|
|
4331
|
-
|
|
4332
|
-
|
|
4333
|
-
如果您想继续使用 antd 的组件，那也没问题。您只需要将 antd 的 ConfigProvider 替换为 @agentscope-ai/design 的即可。
|
|
4334
|
-
|
|
4335
|
-
|
|
4336
|
-
```tsx
|
|
4337
|
-
import {
|
|
4338
|
-
ConfigProvider,
|
|
4339
|
-
purpleDarkTheme,
|
|
4340
|
-
purpleTheme,
|
|
4341
|
-
} from '@agentscope-ai/design';
|
|
4342
|
-
import { Button, Image, Flex } from 'antd';
|
|
4343
|
-
import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
|
|
4344
|
-
import zhCN from 'antd/locale/zh_CN';
|
|
4345
|
-
import { useState } from 'react';
|
|
4346
|
-
|
|
4347
|
-
const App = () => {
|
|
4348
|
-
const [colorMode, setColorMode] = useState('light');
|
|
4349
|
-
const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
|
|
4350
|
-
|
|
4351
|
-
const prefix = 'sps';
|
|
4352
|
-
return (
|
|
4353
|
-
<ConfigProvider
|
|
4354
|
-
{...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
|
|
4355
|
-
prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
|
|
4356
|
-
prefixCls={prefix}
|
|
4357
|
-
iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
|
|
4358
|
-
locale={zhCN} // 来自 Ant Design 的语言包
|
|
4359
|
-
style={{
|
|
4360
|
-
width: '100%',
|
|
4361
|
-
height: '100%',
|
|
4362
|
-
}}
|
|
4363
|
-
>
|
|
4364
|
-
<div
|
|
4365
|
-
style={{
|
|
4366
|
-
width: '100%',
|
|
4367
|
-
height: '100%',
|
|
4368
|
-
backgroundColor: `var(--${prefix}-color-bg-base)`,
|
|
4369
|
-
}}
|
|
4370
|
-
>
|
|
4371
|
-
<Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
|
|
4372
|
-
<Image
|
|
4373
|
-
width={120}
|
|
4374
|
-
src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
|
|
4375
|
-
/>
|
|
4376
|
-
<div
|
|
4377
|
-
style={{
|
|
4378
|
-
color: `var(--${prefix}-ant-color-text-base)`,
|
|
4379
|
-
fontSize: '24px',
|
|
4380
|
-
textAlign: 'center',
|
|
4381
|
-
}}
|
|
4382
|
-
>
|
|
4383
|
-
Hello Spark Design!
|
|
4384
|
-
</div>
|
|
4385
|
-
<Button
|
|
4386
|
-
type="primary"
|
|
4387
|
-
onClick={() => {
|
|
4388
|
-
setColorMode(colorMode === 'light' ? 'dark' : 'light');
|
|
4389
|
-
}}
|
|
4390
|
-
icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
|
|
4391
|
-
>
|
|
4392
|
-
{colorMode === 'light' ? '暗色' : '亮色'} 模式
|
|
4393
|
-
</Button>
|
|
4394
|
-
</Flex>
|
|
4395
|
-
</div>
|
|
4396
|
-
</ConfigProvider>
|
|
4397
|
-
);
|
|
4398
|
-
};
|
|
4399
|
-
|
|
4400
|
-
export default App;
|
|
4401
|
-
```
|
|
4402
|
-
|
|
4403
|
-
|
|
4404
|
-
|
|
4405
|
-
|
|
4406
4063
|
# 使用
|
|
4407
4064
|
|
|
4408
4065
|
|
|
@@ -4425,574 +4082,4 @@ export default () => {
|
|
|
4425
4082
|
|
|
4426
4083
|
基本用法
|
|
4427
4084
|
|
|
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
|
-
## 🔨 使用
|
|
4473
|
-
|
|
4474
|
-
|
|
4475
|
-
```tsx
|
|
4476
|
-
import {
|
|
4477
|
-
Button,
|
|
4478
|
-
Image,
|
|
4479
|
-
ConfigProvider,
|
|
4480
|
-
purpleDarkTheme,
|
|
4481
|
-
purpleTheme,
|
|
4482
|
-
} from '@agentscope-ai/design';
|
|
4483
|
-
import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
|
|
4484
|
-
import { Flex } from 'antd';
|
|
4485
|
-
import zhCN from 'antd/locale/zh_CN';
|
|
4486
|
-
import { useState } from 'react';
|
|
4487
|
-
|
|
4488
|
-
const App = () => {
|
|
4489
|
-
const [colorMode, setColorMode] = useState('light');
|
|
4490
|
-
const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
|
|
4491
|
-
|
|
4492
|
-
const prefix = 'sps';
|
|
4493
|
-
return (
|
|
4494
|
-
<ConfigProvider
|
|
4495
|
-
{...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
|
|
4496
|
-
prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
|
|
4497
|
-
prefixCls={prefix}
|
|
4498
|
-
iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
|
|
4499
|
-
locale={zhCN} // 来自 Ant Design 的语言包
|
|
4500
|
-
style={{
|
|
4501
|
-
width: '100%',
|
|
4502
|
-
height: '100%',
|
|
4503
|
-
}}
|
|
4504
|
-
>
|
|
4505
|
-
<div
|
|
4506
|
-
style={{
|
|
4507
|
-
width: '100%',
|
|
4508
|
-
height: '100%',
|
|
4509
|
-
backgroundColor: `var(--${prefix}-color-bg-base)`,
|
|
4510
|
-
}}
|
|
4511
|
-
>
|
|
4512
|
-
<Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
|
|
4513
|
-
<Image
|
|
4514
|
-
width={120}
|
|
4515
|
-
src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
|
|
4516
|
-
/>
|
|
4517
|
-
<div
|
|
4518
|
-
style={{
|
|
4519
|
-
color: `var(--${prefix}-ant-color-text-base)`,
|
|
4520
|
-
fontSize: '24px',
|
|
4521
|
-
textAlign: 'center',
|
|
4522
|
-
}}
|
|
4523
|
-
>
|
|
4524
|
-
Hello Spark Design!
|
|
4525
|
-
</div>
|
|
4526
|
-
<Button
|
|
4527
|
-
type="primary"
|
|
4528
|
-
onClick={() => {
|
|
4529
|
-
setColorMode(colorMode === 'light' ? 'dark' : 'light');
|
|
4530
|
-
}}
|
|
4531
|
-
icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
|
|
4532
|
-
>
|
|
4533
|
-
{colorMode === 'light' ? '暗色' : '亮色'} 模式
|
|
4534
|
-
</Button>
|
|
4535
|
-
</Flex>
|
|
4536
|
-
</div>
|
|
4537
|
-
</ConfigProvider>
|
|
4538
|
-
);
|
|
4539
|
-
};
|
|
4540
|
-
|
|
4541
|
-
export default App;
|
|
4542
|
-
```
|
|
4543
|
-
|
|
4544
|
-
|
|
4545
|
-
|
|
4546
|
-
|
|
4547
|
-
# Tokens
|
|
4548
|
-
|
|
4549
|
-
除了来自 [antd](https://ant.design/theme-editor) 的固有 tokens 之外，Spark Design 在原有基础上扩展了更多变量。完整的 token 示例如下所示：
|
|
4550
|
-
|
|
4551
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
|
|
4552
|
-
|
|
4553
|
-
```json
|
|
4554
|
-
{
|
|
4555
|
-
"borderRadiusXS": 2,
|
|
4556
|
-
"borderRadiusSM": 4,
|
|
4557
|
-
"borderRadius": 6,
|
|
4558
|
-
"borderRadiusLG": 8,
|
|
4559
|
-
"borderRadiusXL": 12,
|
|
4560
|
-
"borderRadiusFull": 999,
|
|
4561
|
-
"wireframe": false,
|
|
4562
|
-
"colorPrimaryBg": "rgba(97, 92, 237, 0.08)",
|
|
4563
|
-
"colorPrimaryBgHover": "#F2F0FF",
|
|
4564
|
-
"colorPrimaryBorder": "#E2DEFF",
|
|
4565
|
-
"colorPrimaryBorderHover": "#BCB5FF",
|
|
4566
|
-
"colorPrimaryHover": "#9189FA",
|
|
4567
|
-
"colorPrimary": "#615CED",
|
|
4568
|
-
"colorPrimaryActive": "#4444C7",
|
|
4569
|
-
"colorPrimaryTextHover": "#9189FA",
|
|
4570
|
-
"colorPrimaryText": "#615CED",
|
|
4571
|
-
"colorPrimaryTextActive": "#4444C7",
|
|
4572
|
-
"colorTextBase": "#26244c",
|
|
4573
|
-
"colorBgBase": "#FFFFFF",
|
|
4574
|
-
"colorText": "rgba(38, 36, 76, 0.88)",
|
|
4575
|
-
"colorTextSecondary": "rgba(38, 36, 76, 0.65)",
|
|
4576
|
-
"colorTextTertiary": "rgba(38, 36, 76, 0.45)",
|
|
4577
|
-
"colorTextQuaternary": "rgba(38, 36, 76, 0.25)",
|
|
4578
|
-
"colorBorder": "#cdd0dc",
|
|
4579
|
-
"colorBorderSecondary": "#e6e8ee",
|
|
4580
|
-
"colorFill": "#cdd0dc5c",
|
|
4581
|
-
"colorFillSecondary": "#cdd0dc33",
|
|
4582
|
-
"colorFillTertiary": "#cdd0dc26",
|
|
4583
|
-
"colorFillQuaternary": "#cdd0dc1a",
|
|
4584
|
-
"colorBgContainer": "#FFFFFF",
|
|
4585
|
-
"colorBgElevated": "#FFFFFF",
|
|
4586
|
-
"colorBgLayout": "#f9fafd",
|
|
4587
|
-
"colorBgSpotlight": "rgba(38, 36, 76, 0.85)",
|
|
4588
|
-
"colorBgMask": "rgba(20, 19, 39, 0.45)",
|
|
4589
|
-
"colorInfo": "#0B83F1",
|
|
4590
|
-
"colorInfoHover": "#5EBCFF",
|
|
4591
|
-
"colorInfoBorder": "#87D1FF",
|
|
4592
|
-
"colorInfoText": "#0B83F1",
|
|
4593
|
-
"colorInfoBg": "#E6F7FF",
|
|
4594
|
-
"colorInfoBgHover": "#B0E3FF",
|
|
4595
|
-
"colorInfoBorderHover": "#5EBCFF",
|
|
4596
|
-
"colorSuccess": "#5BB98B",
|
|
4597
|
-
"colorSuccessHover": "#ABD4BE",
|
|
4598
|
-
"colorSuccessBg": "#EBFAF0",
|
|
4599
|
-
"colorSuccessBgHover": "#DFEDE4",
|
|
4600
|
-
"colorSuccessBorder": "#D3E0D9",
|
|
4601
|
-
"colorSuccessBorderHover": "#ABD4BE",
|
|
4602
|
-
"colorWarning": "#FAAD14",
|
|
4603
|
-
"colorWarningHover": "#FFD666",
|
|
4604
|
-
"colorWarningBg": "#FFFBE6",
|
|
4605
|
-
"colorWarningBgHover": "#FFF1B8",
|
|
4606
|
-
"colorWarningBorder": "#FFE58F",
|
|
4607
|
-
"colorWarningBorderHover": "#FFD666",
|
|
4608
|
-
"colorError": "#FF4D4F",
|
|
4609
|
-
"colorErrorHover": "#FF7875",
|
|
4610
|
-
"colorErrorBg": "#FFF2F0",
|
|
4611
|
-
"colorErrorBgHover": "#FFF1F0",
|
|
4612
|
-
"colorErrorBorder": "#FFCCC7",
|
|
4613
|
-
"colorErrorBorderHover": "#FFA39E",
|
|
4614
|
-
"colorLink": "#615CED",
|
|
4615
|
-
"boxShadow": "0px 4px 6px 0px rgba(0, 0, 0, 0.08)",
|
|
4616
|
-
"boxShadowSecondary": "0px 12px 24px -16px rgba(0, 0, 0, 0.06),0px 8px 40px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
|
|
4617
|
-
|
|
4618
|
-
"colorTextWhite": "#ffffff",
|
|
4619
|
-
"colorTextOnPrimary": "#ffffff",
|
|
4620
|
-
"colorFillDisable": "#DBDAE7",
|
|
4621
|
-
"colorPurple": "#615CED",
|
|
4622
|
-
"colorPurpleHover": "#8080FF",
|
|
4623
|
-
"colorPurpleBg": "rgba(226, 222, 255, 0.8)",
|
|
4624
|
-
"colorPink": "#EC4899",
|
|
4625
|
-
"colorPinkHover": "#E593BC",
|
|
4626
|
-
"colorPinkBg": "rgba(251, 220, 239, 0.8)",
|
|
4627
|
-
"colorYellow": "#EAB308",
|
|
4628
|
-
"colorYellowHover": "#F1D372",
|
|
4629
|
-
"colorYellowBg": "rgba(255, 250, 184, 0.8)",
|
|
4630
|
-
"colorOrange": "#FA8125",
|
|
4631
|
-
"colorOrangeHover": "#E88C45",
|
|
4632
|
-
"colorOrangeBg": "rgba(255, 232, 201, 0.8)",
|
|
4633
|
-
"colorTeal": "#14B8A6",
|
|
4634
|
-
"colorTealHover": "#5FB3A9",
|
|
4635
|
-
"colorTealBg": "rgba(200, 244, 233, 0.8)",
|
|
4636
|
-
"colorBlue": "#0090FF",
|
|
4637
|
-
"colorBlueHover": "#72BCF5",
|
|
4638
|
-
"colorBlueBg": "rgba(194, 229, 255, 0.8)",
|
|
4639
|
-
"colorMauve": "#8E8C99",
|
|
4640
|
-
"colorMauveHover": "#C0BFC8",
|
|
4641
|
-
"colorMauveBg": "rgba(239, 240, 243, 0.8)",
|
|
4642
|
-
"colorSlate": "#1E293B",
|
|
4643
|
-
"colorSlateHover": "#475569",
|
|
4644
|
-
"colorSlateBg": "#E2E8F0",
|
|
4645
|
-
"colorLavender": "#A77BFF",
|
|
4646
|
-
"colorLavenderHover": "#BB99FF",
|
|
4647
|
-
"colorLavenderBg": "rgba(226, 212, 255, 0.8)",
|
|
4648
|
-
|
|
4649
|
-
"boxShadowTertiary": "0px 12px 32px -16px rgba(0, 0, 0, 0.24),0px 12px 60px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
|
|
4650
|
-
"boxShadowTertiaryLeft": "-12px 0px 32px -16px rgba(0, 0, 0, 0.24),-12px 0px 60px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
|
|
4651
|
-
"boxShadowInput": "0px 12px 24px -16px rgba(54, 54, 73, 0.04),0px 12px 40px 0px rgba(51, 51, 71, 0.08),0px 0px 1px 0px rgba(44, 44, 54, 0.02)"
|
|
4652
|
-
}
|
|
4653
|
-
```
|
|
4654
|
-
|
|
4655
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
|
|
4656
|
-
|
|
4657
|
-
```json
|
|
4658
|
-
{
|
|
4659
|
-
"borderRadiusXS": 2,
|
|
4660
|
-
"borderRadiusSM": 4,
|
|
4661
|
-
"borderRadius": 6,
|
|
4662
|
-
"borderRadiusLG": 8,
|
|
4663
|
-
"borderRadiusXL": 12,
|
|
4664
|
-
"borderRadiusFull": 999,
|
|
4665
|
-
"wireframe": false,
|
|
4666
|
-
"colorPrimaryBg": "#202041",
|
|
4667
|
-
"colorPrimaryBgHover": "#202041",
|
|
4668
|
-
"colorPrimaryBorder": "#2B2A55",
|
|
4669
|
-
"colorPrimaryBorderHover": "#373476",
|
|
4670
|
-
"colorPrimaryHover": "#857DE3",
|
|
4671
|
-
"colorPrimary": "#5551CC",
|
|
4672
|
-
"colorPrimaryActive": "#4643A1",
|
|
4673
|
-
"colorPrimaryTextHover": "#857DE3",
|
|
4674
|
-
"colorPrimaryText": "#5551CC",
|
|
4675
|
-
"colorPrimaryTextActive": "#4643A1",
|
|
4676
|
-
"colorTextBase": "#E7E7ED",
|
|
4677
|
-
"colorBgBase": "#000000",
|
|
4678
|
-
"colorText": "rgba(231, 231, 237, 0.88)",
|
|
4679
|
-
"colorTextSecondary": "rgba(231, 231, 237, 0.65)",
|
|
4680
|
-
"colorTextTertiary": "rgba(231, 231, 237, 0.45)",
|
|
4681
|
-
"colorTextQuaternary": "rgba(231, 231, 237, 0.25)",
|
|
4682
|
-
"colorBorder": "rgba(71, 71, 97, 0.8)",
|
|
4683
|
-
"colorBorderSecondary": "rgba(56, 56, 76, 0.8)",
|
|
4684
|
-
"colorFill": "rgba(231, 231, 237, 0.18)",
|
|
4685
|
-
"colorFillSecondary": "rgba(231, 231, 237, 0.12)",
|
|
4686
|
-
"colorFillTertiary": "rgba(231, 231, 237, 0.08)",
|
|
4687
|
-
"colorFillQuaternary": "rgba(231, 231, 237, 0.04)",
|
|
4688
|
-
"colorBgContainer": "#0F0F14",
|
|
4689
|
-
"colorBgElevated": "#0F0F14",
|
|
4690
|
-
"colorBgLayout": "#0F0F14",
|
|
4691
|
-
"colorBgSpotlight": "rgba(71, 71, 97, 0.85)",
|
|
4692
|
-
"colorBgMask": "rgba(5, 5, 8, 0.8)",
|
|
4693
|
-
"colorInfo": "#0B83F1",
|
|
4694
|
-
"colorInfoHover": "rgba(42, 114, 165, 1)",
|
|
4695
|
-
"colorInfoBorder": "rgba(135, 209, 255, 0.2)",
|
|
4696
|
-
"colorInfoText": "#0B83F1",
|
|
4697
|
-
"colorInfoBg": "rgba(27, 73, 115, 0.25)",
|
|
4698
|
-
"colorInfoBgHover": "rgba(27, 73, 115, 0.32)",
|
|
4699
|
-
"colorInfoBorderHover": "rgba(94, 188, 255, 0.2)",
|
|
4700
|
-
"colorSuccess": "#5BB98B",
|
|
4701
|
-
"colorSuccessHover": "rgba(87, 141, 112, 1)",
|
|
4702
|
-
"colorSuccessBg": "rgba(0, 50, 26, 0.25)",
|
|
4703
|
-
"colorSuccessBgHover": "rgba(0, 50, 26, 0.32)",
|
|
4704
|
-
"colorSuccessBorder": "rgba(211, 224, 217, 0.2)",
|
|
4705
|
-
"colorSuccessBorderHover": "rgba(171, 212, 190, 0.2)",
|
|
4706
|
-
"colorWarning": "#FAAD14",
|
|
4707
|
-
"colorWarningHover": "rgba(170, 136, 43, 1)",
|
|
4708
|
-
"colorWarningBg": "rgba(129, 116, 49, 0.25)",
|
|
4709
|
-
"colorWarningBgHover": "rgba(129, 116, 49, 0.32)",
|
|
4710
|
-
"colorWarningBorder": "rgba(255, 229, 143, 0.2)",
|
|
4711
|
-
"colorWarningBorderHover": "rgba(255, 214, 102, 0.2)",
|
|
4712
|
-
"colorError": "#FF4D4F",
|
|
4713
|
-
"colorErrorHover": "rgba(165, 50, 48, 1)",
|
|
4714
|
-
"colorErrorBg": "rgba(129, 46, 46, 0.25)",
|
|
4715
|
-
"colorErrorBgHover": "rgba(129, 46, 46, 0.32)",
|
|
4716
|
-
"colorErrorBorder": "rgba(255, 204, 199, 0.2)",
|
|
4717
|
-
"colorErrorBorderHover": "rgba(255, 163, 158, 0.2)",
|
|
4718
|
-
"colorLink": "#5551CC",
|
|
4719
|
-
"boxShadow": "0px 4px 6px 0px rgba(255, 255, 255, 0.08)",
|
|
4720
|
-
"boxShadowSecondary": "0px 12px 24px -16px rgba(255, 255, 255, 0.04),0px 8px 40px 0px rgba(255, 255, 255, 0.06),0px 0px 1px 0px rgba(255, 255, 255, 0.02)",
|
|
4721
|
-
|
|
4722
|
-
"colorTextWhite": "#fff",
|
|
4723
|
-
"colorTextOnPrimary": "#fff",
|
|
4724
|
-
"colorFillDisable": "#8D8C98",
|
|
4725
|
-
"colorPurple": "#5551CC",
|
|
4726
|
-
"colorPurpleHover": "#8383F0",
|
|
4727
|
-
"colorPurpleBg": "rgba(226, 222, 255, 0.2)",
|
|
4728
|
-
"colorPink": "#EC4899",
|
|
4729
|
-
"colorPinkHover": "#E494BC",
|
|
4730
|
-
"colorPinkBg": "rgba(251, 220, 239, 0.2)",
|
|
4731
|
-
"colorYellow": "#EAB308",
|
|
4732
|
-
"colorYellowHover": "#DBBE62",
|
|
4733
|
-
"colorYellowBg": "rgba(255, 250, 184, 0.2)",
|
|
4734
|
-
"colorOrange": "#FA8125",
|
|
4735
|
-
"colorOrangeHover": "#F7A25F",
|
|
4736
|
-
"colorOrangeBg": "rgba(255, 232, 201, 0.2)",
|
|
4737
|
-
"colorTeal": "#14B8A6",
|
|
4738
|
-
"colorTealHover": "#7BC7BE",
|
|
4739
|
-
"colorTealBg": "rgba(200, 244, 233, 0.2)",
|
|
4740
|
-
"colorBlue": "#0090FF",
|
|
4741
|
-
"colorBlueHover": "#83BFED",
|
|
4742
|
-
"colorBlueBg": "rgba(194, 229, 255, 0.2)",
|
|
4743
|
-
"colorMauve": "#8E8C99",
|
|
4744
|
-
"colorMauveHover": "#BBB8CA",
|
|
4745
|
-
"colorMauveBg": "rgba(239, 240, 243, 0.2)",
|
|
4746
|
-
"colorSlate": "#2C3A50",
|
|
4747
|
-
"colorSlateHover": "#354252",
|
|
4748
|
-
"colorSlateBg": "#232B36",
|
|
4749
|
-
"colorLavender": "#A77BFF",
|
|
4750
|
-
"colorLavenderHover": "#BFA5F3",
|
|
4751
|
-
"colorLavenderBg": "rgba(150, 143, 167, 0.48)",
|
|
4752
|
-
|
|
4753
|
-
"boxShadowTertiary": "0px 12px 32px -16px rgba(255, 255, 255, 0.16),0px 12px 60px 0px rgba(255, 255, 255, 0.08),0px 0px 1px 0px rgba(255, 255, 255, 0.02)",
|
|
4754
|
-
"boxShadowTertiaryLeft": "-12px 0px 32px -16px rgba(255, 255, 255, 0.16),-12px 0px 60px 0px rgba(255, 255, 255, 0.08),0px 0px 1px 0px rgba(255, 255, 255, 0.02);",
|
|
4755
|
-
"boxShadowInput": "0px 12px 24px -16px rgba(255, 255, 255, 0.08),0px 12px 40px 0px rgba(255, 255, 255, 0.16),0px 0px 1px 0px rgba(255, 255, 255, 0.04)"
|
|
4756
|
-
}
|
|
4757
|
-
|
|
4758
|
-
```
|
|
4759
|
-
|
|
4760
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
|
|
4761
|
-
|
|
4762
|
-
```json
|
|
4763
|
-
{
|
|
4764
|
-
"borderRadiusXS": 2,
|
|
4765
|
-
"borderRadiusSM": 4,
|
|
4766
|
-
"borderRadius": 6,
|
|
4767
|
-
"borderRadiusLG": 8,
|
|
4768
|
-
"borderRadiusXL": 12,
|
|
4769
|
-
"borderRadiusFull": 999,
|
|
4770
|
-
"wireframe": false,
|
|
4771
|
-
"colorPrimaryBg": "rgba(244, 244, 247, 1)",
|
|
4772
|
-
"colorPrimaryBgHover": "rgba(239, 239, 244, 1)",
|
|
4773
|
-
"colorPrimaryBorder": "rgba(62, 63, 66, 1)",
|
|
4774
|
-
"colorPrimaryBorderHover": "rgba(130, 132, 137, 1)",
|
|
4775
|
-
"colorPrimaryHover": "rgba(38, 38, 41, 1)",
|
|
4776
|
-
"colorPrimary": "rgba(26, 26, 29, 1)",
|
|
4777
|
-
"colorPrimaryActive": "rgba(0, 0, 0, 1)",
|
|
4778
|
-
"colorPrimaryTextHover": "rgba(38, 38, 41, 1)",
|
|
4779
|
-
"colorPrimaryText": "rgba(26, 26, 29, 1)",
|
|
4780
|
-
"colorPrimaryTextActive": "rgba(0, 0, 0, 1)",
|
|
4781
|
-
"colorTextBase": "rgba(26, 26, 29, 1)",
|
|
4782
|
-
"colorBgBase": "rgba(255, 255, 255, 1)",
|
|
4783
|
-
"colorText": "rgba(26, 26, 29, 0.88)",
|
|
4784
|
-
"colorTextSecondary": "rgba(26, 26, 29, 0.65)",
|
|
4785
|
-
"colorTextTertiary": "rgba(26, 26, 29, 0.45)",
|
|
4786
|
-
"colorTextQuaternary": "rgba(26, 26, 29, 0.25)",
|
|
4787
|
-
"colorBorder": "rgba(187, 187, 193, 1)",
|
|
4788
|
-
"colorBorderSecondary": "rgba(234, 234, 234, 1)",
|
|
4789
|
-
"colorFill": "rgba(0, 0, 43, 0.06)",
|
|
4790
|
-
"colorFillSecondary": "rgba(0, 0, 85, 0.03)",
|
|
4791
|
-
"colorFillTertiary": "rgba(205, 208, 220, 0.15)",
|
|
4792
|
-
"colorFillQuaternary": "rgba(205, 208, 220, 0.1)",
|
|
4793
|
-
"colorBgContainer": "rgba(255, 255, 255, 1)",
|
|
4794
|
-
"colorBgElevated": "rgba(255, 255, 255, 1)",
|
|
4795
|
-
"colorBgLayout": "rgba(250, 250, 251, 1)",
|
|
4796
|
-
"colorBgSpotlight": "rgba(26, 26, 29, 0.85)",
|
|
4797
|
-
"colorBgMask": "rgba(0, 0, 0, 0.45)",
|
|
4798
|
-
"colorInfo": "rgba(11, 131, 241, 1)",
|
|
4799
|
-
"colorInfoHover": "rgba(94, 188, 255, 1)",
|
|
4800
|
-
"colorInfoBorder": "rgba(135, 209, 255, 1)",
|
|
4801
|
-
"colorInfoText": "rgba(11, 131, 241, 1)",
|
|
4802
|
-
"colorInfoBg": "rgba(230, 247, 255, 1)",
|
|
4803
|
-
"colorInfoBgHover": "rgba(176, 227, 255, 1)",
|
|
4804
|
-
"colorInfoBorderHover": "rgba(94, 188, 255, 1)",
|
|
4805
|
-
"colorSuccess": "rgba(91, 185, 139, 1)",
|
|
4806
|
-
"colorSuccessHover": "rgba(171, 212, 190, 1)",
|
|
4807
|
-
"colorSuccessBg": "rgba(235, 250, 240, 1)",
|
|
4808
|
-
"colorSuccessBgHover": "rgba(223, 237, 228, 1)",
|
|
4809
|
-
"colorSuccessBorder": "rgba(211, 224, 217, 1)",
|
|
4810
|
-
"colorSuccessBorderHover": "rgba(171, 212, 190, 1)",
|
|
4811
|
-
"colorWarning": "rgba(250, 173, 20, 1)",
|
|
4812
|
-
"colorWarningHover": "rgba(255, 214, 102, 1)",
|
|
4813
|
-
"colorWarningBg": "rgba(255, 251, 230, 1)",
|
|
4814
|
-
"colorWarningBgHover": "rgba(255, 241, 184, 1)",
|
|
4815
|
-
"colorWarningBorder": "rgba(255, 229, 143, 1)",
|
|
4816
|
-
"colorWarningBorderHover": "rgba(255, 214, 102, 1)",
|
|
4817
|
-
"colorError": "rgba(255, 77, 79, 1)",
|
|
4818
|
-
"colorErrorHover": "rgba(255, 120, 117, 1)",
|
|
4819
|
-
"colorErrorBg": "rgba(255, 242, 240, 1)",
|
|
4820
|
-
"colorErrorBgHover": "rgba(255, 241, 240, 1)",
|
|
4821
|
-
"colorErrorBorder": "rgba(255, 204, 199, 1)",
|
|
4822
|
-
"colorErrorBorderHover": "rgba(255, 163, 158, 1)",
|
|
4823
|
-
"colorLink": "rgba(0, 77, 255, 1)",
|
|
4824
|
-
"boxShadow": "0px 4px 6px 0px rgba(0, 0, 0, 0.08)",
|
|
4825
|
-
"boxShadowSecondary": "0px 12px 24px -16px rgba(0, 0, 0, 0.06),0px 8px 40px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
|
|
4826
|
-
|
|
4827
|
-
"colorTextWhite": "#ffffff",
|
|
4828
|
-
"colorTextOnPrimary": "#ffffff",
|
|
4829
|
-
"colorFillDisable": "rgba(232, 232, 235, 1)",
|
|
4830
|
-
"colorPurple": "rgba(97, 92, 237, 1)",
|
|
4831
|
-
"colorPurpleHover": "#8080FF",
|
|
4832
|
-
"colorPurpleBg": "rgba(226, 222, 255, 0.8)",
|
|
4833
|
-
"colorPink": "rgba(236, 72, 153, 1)",
|
|
4834
|
-
"colorPinkHover": "#E593BC",
|
|
4835
|
-
"colorPinkBg": "rgba(251, 220, 239, 0.8)",
|
|
4836
|
-
"colorYellow": "rgba(234, 179, 8, 1)",
|
|
4837
|
-
"colorYellowHover": "#F1D372",
|
|
4838
|
-
"colorYellowBg": "rgba(255, 250, 184, 0.8)",
|
|
4839
|
-
"colorOrange": "rgba(250, 129, 37, 1)",
|
|
4840
|
-
"colorOrangeHover": "#E88C45",
|
|
4841
|
-
"colorOrangeBg": "rgba(255, 232, 201, 0.8)",
|
|
4842
|
-
"colorTeal": "rgba(20, 184, 166, 1)",
|
|
4843
|
-
"colorTealHover": "#5FB3A9",
|
|
4844
|
-
"colorTealBg": "rgba(200, 244, 233, 0.8)",
|
|
4845
|
-
"colorBlue": "rgba(0, 144, 255, 1)",
|
|
4846
|
-
"colorBlueHover": "#72BCF5",
|
|
4847
|
-
"colorBlueBg": "rgba(194, 229, 255, 0.8)",
|
|
4848
|
-
"colorMauve": "rgba(142, 140, 153, 1)",
|
|
4849
|
-
"colorMauveHover": "#C0BFC8",
|
|
4850
|
-
"colorMauveBg": "rgba(239, 240, 243, 0.8)",
|
|
4851
|
-
"colorSlate": "#2C3A50",
|
|
4852
|
-
"colorSlateHover": "#354252",
|
|
4853
|
-
"colorSlateBg": "#232B36",
|
|
4854
|
-
"boxShadowTertiary": "0px 12px 32px -16px rgba(0, 0, 0, 0.24),0px 12px 60px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
|
|
4855
|
-
"boxShadowTertiaryLeft": "-12px 0px 32px -16px rgba(0, 0, 0, 0.24),-12px 0px 60px 0px rgba(0, 0, 0, 0.12),0px 0px 1px 0px rgba(0, 0, 0, 0.04)",
|
|
4856
|
-
"boxShadowInput": "0px 12px 24px -16px rgba(54, 54, 73, 0.04),0px 12px 40px 0px rgba(51, 51, 71, 0.08),0px 0px 1px 0px rgba(44, 44, 54, 0.02)"
|
|
4857
|
-
}
|
|
4858
|
-
|
|
4859
|
-
```
|
|
4860
|
-
|
|
4861
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonDarkTheme</div>
|
|
4862
|
-
|
|
4863
|
-
```json
|
|
4864
|
-
{
|
|
4865
|
-
"borderRadiusXS": 2,
|
|
4866
|
-
"borderRadiusSM": 4,
|
|
4867
|
-
"borderRadius": 6,
|
|
4868
|
-
"borderRadiusLG": 8,
|
|
4869
|
-
"borderRadiusXL": 12,
|
|
4870
|
-
"borderRadiusFull": 999,
|
|
4871
|
-
"wireframe": false,
|
|
4872
|
-
"colorPrimaryBg": "#181818",
|
|
4873
|
-
"colorPrimaryBgHover": "#2E2E2E",
|
|
4874
|
-
"colorPrimaryBorder": "#323232",
|
|
4875
|
-
"colorPrimaryBorderHover": "#2C2C2C",
|
|
4876
|
-
"colorPrimaryHover": "#DFDFDF",
|
|
4877
|
-
"colorPrimary": "#E4E4E4",
|
|
4878
|
-
"colorPrimaryActive": "#7E7E7E",
|
|
4879
|
-
"colorPrimaryTextHover": "#909090",
|
|
4880
|
-
"colorPrimaryText": "#676767",
|
|
4881
|
-
"colorPrimaryTextActive": "#959595",
|
|
4882
|
-
"colorTextBase": "#E7E7ED",
|
|
4883
|
-
"colorBgBase": "#0A0A0B",
|
|
4884
|
-
"colorText": "#E7E7EDC7",
|
|
4885
|
-
"colorTextSecondary": "#E7E7EDA6",
|
|
4886
|
-
"colorTextTertiary": "#E7E7ED73",
|
|
4887
|
-
"colorTextQuaternary": "#E7E7ED40",
|
|
4888
|
-
"colorBorder": "#5B5B5BCC",
|
|
4889
|
-
"colorBorderSecondary": "#323232CC",
|
|
4890
|
-
"colorFill": "#E7E7ED2E",
|
|
4891
|
-
"colorFillSecondary": "#E7E7ED1F",
|
|
4892
|
-
"colorFillTertiary": "#E7E7ED14",
|
|
4893
|
-
"colorFillQuaternary": "#E7E7ED0A",
|
|
4894
|
-
"colorBgContainer": "#121212",
|
|
4895
|
-
"colorBgElevated": "#212121",
|
|
4896
|
-
"colorBgLayout": "#141414",
|
|
4897
|
-
"colorBgSpotlight": "#525252D9",
|
|
4898
|
-
"colorBgMask": "#050508CC",
|
|
4899
|
-
"colorInfo": "#0B83F1",
|
|
4900
|
-
"colorInfoHover": "#5EBCFF",
|
|
4901
|
-
"colorInfoBorder": "#3990C9",
|
|
4902
|
-
"colorInfoText": "#0B83F1",
|
|
4903
|
-
"colorInfoBg": "#112233",
|
|
4904
|
-
"colorInfoBgHover": "#264866",
|
|
4905
|
-
"colorInfoBorderHover": "#5EBCFF",
|
|
4906
|
-
"colorSuccess": "#5BB98B",
|
|
4907
|
-
"colorSuccessHover": "#74A47C",
|
|
4908
|
-
"colorSuccessBg": "#293631",
|
|
4909
|
-
"colorSuccessBgHover": "#3F5147",
|
|
4910
|
-
"colorSuccessBorder": "#73A377",
|
|
4911
|
-
"colorSuccessBorderHover": "#ABD4BE",
|
|
4912
|
-
"colorWarning": "#FAAD14",
|
|
4913
|
-
"colorWarningHover": "#FF8C28",
|
|
4914
|
-
"colorWarningBg": "#2D231A",
|
|
4915
|
-
"colorWarningBgHover": "#4D3B23",
|
|
4916
|
-
"colorWarningBorder": "#FFA628",
|
|
4917
|
-
"colorWarningBorderHover": "#FFD666",
|
|
4918
|
-
"colorError": "#FF4D4F",
|
|
4919
|
-
"colorErrorHover": "#EE654E",
|
|
4920
|
-
"colorErrorBg": "#2B0B08",
|
|
4921
|
-
"colorErrorBgHover": "#4A2A28",
|
|
4922
|
-
"colorErrorBorder": "#EE5B4E",
|
|
4923
|
-
"colorErrorBorderHover": "#FFA39E",
|
|
4924
|
-
"colorLink": "#4D7DFF",
|
|
4925
|
-
"boxShadow": "0px 4px 6px 0px rgba(255, 255, 255, 0.08)",
|
|
4926
|
-
"boxShadowSecondary": "0px 12px 24px -16px rgba(255, 255, 255, 0.06),0px 8px 40px 0px rgba(255, 255, 255, 0.12),0px 0px 1px 0px rgba(255, 255, 255, 0.04)",
|
|
4927
|
-
|
|
4928
|
-
"colorTextWhite": "#ffffff",
|
|
4929
|
-
"colorTextBlack": "#000000",
|
|
4930
|
-
"colorTextOnPrimary": "#ffffff",
|
|
4931
|
-
"colorFillDisable": "#898989",
|
|
4932
|
-
"colorPurple": "#615CED",
|
|
4933
|
-
"colorPurpleHover": "#8383F0",
|
|
4934
|
-
"colorPurpleBg": "#6964877A",
|
|
4935
|
-
"colorPink": "#EC4899",
|
|
4936
|
-
"colorPinkHover": "#E494BC",
|
|
4937
|
-
"colorPinkBg": "#53424D7A",
|
|
4938
|
-
"colorYellow": "#EAB308",
|
|
4939
|
-
"colorYellowHover": "#DBBE62",
|
|
4940
|
-
"colorYellowBg": "#9585527A",
|
|
4941
|
-
"colorOrange": "#FA8125",
|
|
4942
|
-
"colorOrangeHover": "#F7A25F",
|
|
4943
|
-
"colorOrangeBg": "#6F58417A",
|
|
4944
|
-
"colorTeal": "#14B8A6",
|
|
4945
|
-
"colorTealHover": "#7BC7BE",
|
|
4946
|
-
"colorTealBg": "#4658547A",
|
|
4947
|
-
"colorBlue": "#0090FF",
|
|
4948
|
-
"colorBlueHover": "#83BFED",
|
|
4949
|
-
"colorBlueBg": "#5E76897A",
|
|
4950
|
-
"colorMauve": "#8E8C99",
|
|
4951
|
-
"colorMauveHover": "#BBB8CA",
|
|
4952
|
-
"colorMauveBg": "#5859647A",
|
|
4953
|
-
"colorSlate": "#2C3A50",
|
|
4954
|
-
"colorSlateHover": "#354252",
|
|
4955
|
-
"colorSlateBg": "#232B36",
|
|
4956
|
-
"colorLavender": "#A77BFF",
|
|
4957
|
-
"colorLavenderHover": "#BFA5F3",
|
|
4958
|
-
"colorLavenderBg": "rgba(150, 143, 167, 0.48)",
|
|
4959
|
-
|
|
4960
|
-
"boxShadowTertiary": "0px 12px 32px -16px rgba(255, 255, 255, 0.24),0px 12px 60px 0px rgba(255, 255, 255, 0.12),0px 0px 1px 0px rgba(255, 255, 255, 0.04)",
|
|
4961
|
-
"boxShadowTertiaryLeft": "-12px 0px 32px -16px rgba(255, 255, 255, 0.24),-12px 0px 60px 0px rgba(255, 255, 255, 0.12),0px 0px 1px 0px rgba(255, 255, 255, 0.04)",
|
|
4962
|
-
"boxShadowInput": "0px 12px 24px -16px rgba(255, 255, 255, 0.08),0px 12px 40px 0px rgba(255, 255, 255, 0.16),0px 0px 1px 0px rgba(255, 255, 255, 0.04)"
|
|
4963
|
-
|
|
4964
|
-
}
|
|
4965
|
-
```
|
|
4966
|
-
|
|
4967
|
-
# CSS 变量
|
|
4968
|
-
|
|
4969
|
-
Spark Design 默认启用 cssVar 模式，因此您可以利用 从 token 派生出的 CSS 变量来构建自己的样式。
|
|
4970
|
-
|
|
4971
|
-
|
|
4972
|
-
```less
|
|
4973
|
-
.example {
|
|
4974
|
-
background: var(--sps-color-bg-base);
|
|
4975
|
-
color: var(--sps-color-pink);
|
|
4976
|
-
}
|
|
4977
|
-
// 提示：您可以将 'sps' 替换为您自己的前缀
|
|
4978
|
-
```
|
|
4979
|
-
|
|
4980
|
-
|
|
4981
|
-
|
|
4982
|
-
|
|
4983
|
-
### 1.0.21
|
|
4984
|
-
`2025-12-25`
|
|
4985
|
-
|
|
4986
|
-
##### Changed
|
|
4987
|
-
|
|
4988
|
-
- AlertDialog 组件：定位距离顶部的默认高度调整为当前窗口高度的 36%
|
|
4989
|
-
- Table 组件：表格行 hover 背景色修改为 `color-bg-layout` 颜色变量；表格行选中背景色修改为 `color-primary-bg-hover` 颜色变量
|
|
4990
|
-
- Select 组件：多选模式的选中项背景色调整
|
|
4991
|
-
- 主题色变量更新：,
|
|
4992
|
-
- bailianDarkTheme：添加 `"colorLinkHover": "#857DE3"`
|
|
4993
|
-
- bailianTheme：添加 `"colorLinkHover": "#8080FF"`
|
|
4994
|
-
- carbonDarkTheme：修改 `"colorTextOnPrimary": "#ffffff"`
|
|
4995
|
-
|
|
4996
|
-
##### Fixed
|
|
4997
|
-
|
|
4998
|
-
- Slider 组件：水平滑动条组件取消默认左右两边的外边距 margin，操作按钮 handle 在最左侧与最右侧不超出滑动轨道宽度
|
|
4085
|
+
访问 [Icon Library](https://sparkdesign.agentscope.io/#/resources/icons) 查看全部 Icon
|