@agentscope-ai/design 1.0.21 → 1.0.23-beta.1767087061250
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/antd/themes/generateTheme.d.ts +46 -23
- package/lib/antd/themes/generateTheme.js +132 -68
- package/llms/all.llms.txt +1562 -689
- package/llms/index.llms.txt +20 -14
- package/package.json +1 -1
- package/llms/docs/changelog/index.zh-CN.llms.txt +0 -18
package/llms/all.llms.txt
CHANGED
|
@@ -1,18 +1,5 @@
|
|
|
1
1
|
|
|
2
2
|
|
|
3
|
-
<DemoTitle title="Video" desc="视频展示">
|
|
4
|
-
#### API
|
|
5
|
-
|
|
6
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
7
|
-
|--------|--------|--------|--------|
|
|
8
|
-
| mouseEnterAutoPlay | 鼠标进入时是否自动播放 | boolean | false |
|
|
9
|
-
| children | video内部设置了按钮在暗色背景下的样式，如果有一些操作按钮想继承这个样式可以在这里传入 | React.ReactNode | |
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
3
|
<DemoTitle title="Upload" desc="文件选择上传和拖拽上传控件。">
|
|
17
4
|
#### API
|
|
18
5
|
|
|
@@ -109,6 +96,19 @@
|
|
|
109
96
|
|
|
110
97
|
|
|
111
98
|
|
|
99
|
+
<DemoTitle title="Video" desc="视频展示">
|
|
100
|
+
#### API
|
|
101
|
+
|
|
102
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
103
|
+
|--------|--------|--------|--------|
|
|
104
|
+
| mouseEnterAutoPlay | 鼠标进入时是否自动播放 | boolean | false |
|
|
105
|
+
| children | video内部设置了按钮在暗色背景下的样式，如果有一些操作按钮想继承这个样式可以在这里传入 | React.ReactNode | |
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
|
|
112
112
|
<DemoTitle title="Tooltip" desc="简单的文本提示气泡框">
|
|
113
113
|
#### API
|
|
114
114
|
|
|
@@ -156,41 +156,6 @@
|
|
|
156
156
|
|
|
157
157
|
|
|
158
158
|
|
|
159
|
-
<DemoTitle title="Tag" desc="进行标记和分类的小标签">
|
|
160
|
-
#### API
|
|
161
|
-
|
|
162
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
163
|
-
|--------|--------|--------|--------|
|
|
164
|
-
| size | 尺寸 | 'small' \| 'middle' | 'middle' |
|
|
165
|
-
| color | 标签色 | SparkTagColors \| string | 'purple' |
|
|
166
|
-
|
|
167
|
-
<AntdApiRef url="https://ant.design/components/tag-cn/#api"></AntdApiRef>
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
## antd API
|
|
171
|
-
|
|
172
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
173
|
-
|
|
174
|
-
### Tag
|
|
175
|
-
|
|
176
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
177
|
-
|--------|--------|--------|--------|--------|
|
|
178
|
-
| closeIcon | 自定义关闭按钮。5.7.0：设置为 | ReactNode | false | 4.4.0 |
|
|
179
|
-
| icon | 设置图标 | ReactNode | - | |
|
|
180
|
-
| bordered | 是否有边框 | boolean | true | 5.4.0 |
|
|
181
|
-
| onClose | 关闭时的回调（可通过 | (e: React.MouseEvent) => void | - | |
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
### Tag.CheckableTag
|
|
185
|
-
|
|
186
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
187
|
-
|--------|--------|--------|--------|
|
|
188
|
-
| checked | 设置标签的选中状态 | boolean | false |
|
|
189
|
-
| onChange | 点击标签时触发的回调 | (checked) => void | - |
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
|
|
194
159
|
<DemoTitle title="TimePicker" desc="输入或选择时间的控件。">
|
|
195
160
|
#### API
|
|
196
161
|
|
|
@@ -304,113 +269,37 @@ type RangeDisabledTime = (
|
|
|
304
269
|
|
|
305
270
|
|
|
306
271
|
|
|
307
|
-
<DemoTitle title="
|
|
272
|
+
<DemoTitle title="Tag" desc="进行标记和分类的小标签">
|
|
308
273
|
#### API
|
|
309
274
|
|
|
310
275
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
311
276
|
|--------|--------|--------|--------|
|
|
312
|
-
|
|
|
313
|
-
|
|
277
|
+
| size | 尺寸 | 'small' \| 'middle' | 'middle' |
|
|
278
|
+
| color | 标签色 | SparkTagColors \| string | 'purple' |
|
|
314
279
|
|
|
315
|
-
<AntdApiRef url="https://ant.design/components/
|
|
280
|
+
<AntdApiRef url="https://ant.design/components/tag-cn/#api"></AntdApiRef>
|
|
316
281
|
|
|
317
282
|
|
|
318
283
|
## antd API
|
|
319
284
|
|
|
320
285
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
321
286
|
|
|
322
|
-
###
|
|
323
|
-
|
|
324
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
325
|
-
|--------|--------|--------|--------|--------|
|
|
326
|
-
| activeKey | 当前激活 tab 面板的 key | string | - | |
|
|
327
|
-
| addIcon | 自定义添加按钮，设置 | ReactNode | | 4.4.0 |
|
|
328
|
-
| animated | 是否使用动画切换 Tabs | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | |
|
|
329
|
-
| centered | 标签居中展示 | boolean | false | 4.4.0 |
|
|
330
|
-
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板的 key | |
|
|
331
|
-
| hideAdd | 是否隐藏加号图标，在 | boolean | false | |
|
|
332
|
-
| indicator | 自定义指示条的长度和对齐方式 | { size?: number \| (origin: number) => number; align: | - | 5.13.0 |
|
|
333
|
-
| items | 配置选项卡内容 | | [] | 4.23.0 |
|
|
334
|
-
| more | 自定义折叠菜单属性 | | { icon: | |
|
|
335
|
-
| removeIcon | 自定义删除按钮，设置 | ReactNode | | 5.15.0 |
|
|
336
|
-
| popupClassName | 更多菜单的 | string | - | 4.21.0 |
|
|
337
|
-
| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
|
|
338
|
-
| size | 大小，提供 | string | middle | |
|
|
339
|
-
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
|
|
340
|
-
| tabBarGutter | tabs 之间的间隙 | number | - | |
|
|
341
|
-
| tabBarStyle | tab bar 的样式对象 | CSSProperties | - | |
|
|
342
|
-
| tabPosition | 页签位置，可选值有 | string | top | |
|
|
343
|
-
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
344
|
-
| onChange | 切换面板的回调 | (activeKey: string) => void | - | |
|
|
345
|
-
| onEdit | 新增和删除页签的回调，在 | (action === 'add' ? event : targetKey, action) => void | - | |
|
|
346
|
-
| onTabClick | tab 被点击的回调 | (key: string, event: MouseEvent) => void | - | |
|
|
347
|
-
| onTabScroll | tab 滚动时触发 | ({ direction: | - | 4.3.0 |
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
更多属性查看 [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
|
|
351
|
-
|
|
352
|
-
### TabItemType
|
|
353
|
-
|
|
354
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
355
|
-
|--------|--------|--------|--------|--------|
|
|
356
|
-
| closeIcon | 自定义关闭图标，在 | ReactNode | - | |
|
|
357
|
-
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
358
|
-
| disabled | 禁用某一项 | boolean | false | |
|
|
359
|
-
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
|
|
360
|
-
| key | 对应 activeKey | string | - | |
|
|
361
|
-
| label | 选项卡头显示文字 | ReactNode | - | |
|
|
362
|
-
| icon | 选项卡头显示图标 | ReactNode | - | 5.12.0 |
|
|
363
|
-
| children | 选项卡头显示内容 | ReactNode | - | |
|
|
364
|
-
| closable | 是否显示选项卡的关闭按钮，在 | boolean | true | |
|
|
365
|
-
|
|
366
|
-
|
|
367
|
-
### MoreProps
|
|
287
|
+
### Tag
|
|
368
288
|
|
|
369
289
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
370
290
|
|--------|--------|--------|--------|--------|
|
|
371
|
-
|
|
|
372
|
-
|
|
|
373
|
-
|
|
374
|
-
|
|
291
|
+
| closeIcon | 自定义关闭按钮。5.7.0：设置为 | ReactNode | false | 4.4.0 |
|
|
292
|
+
| icon | 设置图标 | ReactNode | - | |
|
|
293
|
+
| bordered | 是否有边框 | boolean | true | 5.4.0 |
|
|
294
|
+
| onClose | 关闭时的回调（可通过 | (e: React.MouseEvent) => void | - | |
|
|
375
295
|
|
|
376
296
|
|
|
377
|
-
|
|
378
|
-
#### API
|
|
297
|
+
### Tag.CheckableTag
|
|
379
298
|
|
|
380
|
-
|
|
|
299
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
381
300
|
|--------|--------|--------|--------|
|
|
382
|
-
|
|
|
383
|
-
|
|
384
|
-
<AntdApiRef url="https://ant.design/components/switch-cn/#api"></AntdApiRef>
|
|
385
|
-
|
|
386
|
-
|
|
387
|
-
## antd API
|
|
388
|
-
|
|
389
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
390
|
-
|
|
391
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
392
|
-
|--------|--------|--------|--------|--------|
|
|
393
|
-
| autoFocus | 组件自动获取焦点 | boolean | false | |
|
|
394
|
-
| checked | 指定当前是否选中 | boolean | false | |
|
|
395
|
-
| checkedChildren | 选中时的内容 | ReactNode | - | |
|
|
396
|
-
| className | Switch 器类名 | string | - | |
|
|
397
|
-
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
398
|
-
| defaultValue | defaultChecked | boolean | - | 5.12.0 |
|
|
399
|
-
| disabled | 是否禁用 | boolean | false | |
|
|
400
|
-
| loading | 加载中的开关 | boolean | false | |
|
|
401
|
-
| size | 开关大小，可选值： | string | default | |
|
|
402
|
-
| unCheckedChildren | 非选中时的内容 | ReactNode | - | |
|
|
403
|
-
| value | checked | boolean | - | 5.12.0 |
|
|
404
|
-
| onChange | 变化时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
405
|
-
| onClick | 点击时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
## 方法
|
|
409
|
-
|
|
410
|
-
| 名称 | 描述 |
|
|
411
|
-
|--------|--------|
|
|
412
|
-
| blur() | 移除焦点 |
|
|
413
|
-
| focus() | 获取焦点 |
|
|
301
|
+
| checked | 设置标签的选中状态 | boolean | false |
|
|
302
|
+
| onChange | 点击标签时触发的回调 | (checked) => void | - |
|
|
414
303
|
|
|
415
304
|
|
|
416
305
|
|
|
@@ -670,83 +559,194 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
670
559
|
|
|
671
560
|
|
|
672
561
|
|
|
673
|
-
<DemoTitle title="
|
|
562
|
+
<DemoTitle title="Tabs" desc="用户可以通过点击不同的标签在同一页面中查看不同的内容区域。">
|
|
674
563
|
#### API
|
|
675
564
|
|
|
676
|
-
|
|
565
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
566
|
+
|--------|--------|--------|--------|
|
|
567
|
+
| type | 类型 | 'line' \| 'card' \| 'editable-card' \| 'segmented' | true |
|
|
568
|
+
|
|
569
|
+
|
|
570
|
+
<AntdApiRef url="https://ant.design/components/tabs-cn/#api"></AntdApiRef>
|
|
677
571
|
|
|
678
572
|
|
|
679
573
|
## antd API
|
|
680
574
|
|
|
681
575
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
682
576
|
|
|
683
|
-
###
|
|
684
|
-
|
|
685
|
-
整体步骤条。
|
|
577
|
+
### Tabs
|
|
686
578
|
|
|
687
579
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
688
580
|
|--------|--------|--------|--------|--------|
|
|
689
|
-
|
|
|
690
|
-
|
|
|
691
|
-
|
|
|
692
|
-
|
|
|
693
|
-
|
|
|
694
|
-
|
|
|
695
|
-
|
|
|
696
|
-
|
|
|
697
|
-
|
|
|
698
|
-
|
|
|
699
|
-
|
|
|
700
|
-
|
|
|
701
|
-
|
|
|
581
|
+
| activeKey | 当前激活 tab 面板的 key | string | - | |
|
|
582
|
+
| addIcon | 自定义添加按钮，设置 | ReactNode | | 4.4.0 |
|
|
583
|
+
| animated | 是否使用动画切换 Tabs | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | |
|
|
584
|
+
| centered | 标签居中展示 | boolean | false | 4.4.0 |
|
|
585
|
+
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板的 key | |
|
|
586
|
+
| hideAdd | 是否隐藏加号图标，在 | boolean | false | |
|
|
587
|
+
| indicator | 自定义指示条的长度和对齐方式 | { size?: number \| (origin: number) => number; align: | - | 5.13.0 |
|
|
588
|
+
| items | 配置选项卡内容 | | [] | 4.23.0 |
|
|
589
|
+
| more | 自定义折叠菜单属性 | | { icon: | |
|
|
590
|
+
| removeIcon | 自定义删除按钮，设置 | ReactNode | | 5.15.0 |
|
|
591
|
+
| popupClassName | 更多菜单的 | string | - | 4.21.0 |
|
|
592
|
+
| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
|
|
593
|
+
| size | 大小，提供 | string | middle | |
|
|
594
|
+
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
|
|
595
|
+
| tabBarGutter | tabs 之间的间隙 | number | - | |
|
|
596
|
+
| tabBarStyle | tab bar 的样式对象 | CSSProperties | - | |
|
|
597
|
+
| tabPosition | 页签位置，可选值有 | string | top | |
|
|
598
|
+
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
599
|
+
| onChange | 切换面板的回调 | (activeKey: string) => void | - | |
|
|
600
|
+
| onEdit | 新增和删除页签的回调，在 | (action === 'add' ? event : targetKey, action) => void | - | |
|
|
601
|
+
| onTabClick | tab 被点击的回调 | (key: string, event: MouseEvent) => void | - | |
|
|
602
|
+
| onTabScroll | tab 滚动时触发 | ({ direction: | - | 4.3.0 |
|
|
702
603
|
|
|
703
604
|
|
|
704
|
-
|
|
605
|
+
更多属性查看 [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
|
|
606
|
+
|
|
607
|
+
### TabItemType
|
|
705
608
|
|
|
706
609
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
707
610
|
|--------|--------|--------|--------|--------|
|
|
708
|
-
|
|
|
709
|
-
|
|
|
710
|
-
|
|
|
711
|
-
|
|
|
712
|
-
|
|
|
713
|
-
|
|
|
714
|
-
|
|
611
|
+
| closeIcon | 自定义关闭图标，在 | ReactNode | - | |
|
|
612
|
+
| destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
|
|
613
|
+
| disabled | 禁用某一项 | boolean | false | |
|
|
614
|
+
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
|
|
615
|
+
| key | 对应 activeKey | string | - | |
|
|
616
|
+
| label | 选项卡头显示文字 | ReactNode | - | |
|
|
617
|
+
| icon | 选项卡头显示图标 | ReactNode | - | 5.12.0 |
|
|
618
|
+
| children | 选项卡头显示内容 | ReactNode | - | |
|
|
619
|
+
| closable | 是否显示选项卡的关闭按钮，在 | boolean | true | |
|
|
715
620
|
|
|
716
|
-
### StepItem
|
|
717
621
|
|
|
718
|
-
|
|
622
|
+
### MoreProps
|
|
719
623
|
|
|
720
624
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
721
625
|
|--------|--------|--------|--------|--------|
|
|
722
|
-
|
|
|
723
|
-
|
|
|
724
|
-
| icon | 步骤图标的类型，可选 | ReactNode | - | |
|
|
725
|
-
| status | 指定状态。当不配置该属性时，会使用 Steps 的 | string | wait | |
|
|
726
|
-
| subTitle | 子标题 | ReactNode | - | |
|
|
727
|
-
| title | 标题 | ReactNode | - | |
|
|
626
|
+
| icon | 自定义折叠图标 | ReactNode | - | |
|
|
627
|
+
| | | | | |
|
|
728
628
|
|
|
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>
|
|
736
640
|
|
|
737
641
|
|
|
738
642
|
## antd API
|
|
739
643
|
|
|
740
644
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
741
645
|
|
|
742
|
-
#### Statistic
|
|
743
|
-
|
|
744
646
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
745
647
|
|--------|--------|--------|--------|--------|
|
|
746
|
-
|
|
|
747
|
-
|
|
|
748
|
-
|
|
|
749
|
-
|
|
|
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
|
+
|
|
737
|
+
|
|
738
|
+
## antd API
|
|
739
|
+
|
|
740
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
741
|
+
|
|
742
|
+
#### Statistic
|
|
743
|
+
|
|
744
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
745
|
+
|--------|--------|--------|--------|--------|
|
|
746
|
+
| decimalSeparator | 设置小数点 | string | . | |
|
|
747
|
+
| formatter | 自定义数值展示 | (value) => ReactNode | - | |
|
|
748
|
+
| groupSeparator | 设置千分位标识符 | string | , | |
|
|
749
|
+
| loading | 数值是否加载中 | boolean | false | 4.8.0 |
|
|
750
750
|
| precision | 数值精度 | number | - | |
|
|
751
751
|
| prefix | 设置数值的前缀 | ReactNode | - | |
|
|
752
752
|
| suffix | 设置数值的后缀 | ReactNode | - | |
|
|
@@ -870,67 +870,6 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
870
870
|
|
|
871
871
|
|
|
872
872
|
|
|
873
|
-
<DemoTitle title="Skeleton" desc="在内容加载时提供占位图形展示。">
|
|
874
|
-
## antd API
|
|
875
|
-
|
|
876
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
877
|
-
|
|
878
|
-
### Skeleton
|
|
879
|
-
|
|
880
|
-
| 属性 | 说明 | 类型 | 默认值 |
|
|
881
|
-
|--------|--------|--------|--------|
|
|
882
|
-
| active | 是否展示动画效果 | boolean | false |
|
|
883
|
-
| avatar | 是否显示头像占位图 | boolean \| | false |
|
|
884
|
-
| loading | 为 true 时，显示占位图。反之则直接展示子组件 | boolean | - |
|
|
885
|
-
| paragraph | 是否显示段落占位图 | boolean \| | true |
|
|
886
|
-
| round | 为 true 时，段落和标题显示圆角 | boolean | false |
|
|
887
|
-
| title | 是否显示标题占位图 | boolean \| | true |
|
|
888
|
-
|
|
889
|
-
|
|
890
|
-
### SkeletonAvatarProps
|
|
891
|
-
|
|
892
|
-
| 属性 | 说明 | 类型 | 默认值 |
|
|
893
|
-
|--------|--------|--------|--------|
|
|
894
|
-
| active | 是否展示动画效果，仅在单独使用头像骨架时生效 | boolean | false |
|
|
895
|
-
| shape | 指定头像的形状 | circle | - |
|
|
896
|
-
| size | 设置头像占位图的大小 | number \| | - |
|
|
897
|
-
|
|
898
|
-
|
|
899
|
-
### SkeletonTitleProps
|
|
900
|
-
|
|
901
|
-
| 属性 | 说明 | 类型 | 默认值 |
|
|
902
|
-
|--------|--------|--------|--------|
|
|
903
|
-
| width | 设置标题占位图的宽度 | number \| string | - |
|
|
904
|
-
|
|
905
|
-
|
|
906
|
-
### SkeletonParagraphProps
|
|
907
|
-
|
|
908
|
-
| 属性 | 说明 | 类型 | 默认值 |
|
|
909
|
-
|--------|--------|--------|--------|
|
|
910
|
-
| rows | 设置段落占位图的行数 | number | - |
|
|
911
|
-
| width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \| string \| Array | - |
|
|
912
|
-
|
|
913
|
-
|
|
914
|
-
### SkeletonButtonProps
|
|
915
|
-
|
|
916
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
917
|
-
|--------|--------|--------|--------|--------|
|
|
918
|
-
| active | 是否展示动画效果 | boolean | false | |
|
|
919
|
-
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | 4.17.0 |
|
|
920
|
-
| shape | 指定按钮的形状 | circle | - | |
|
|
921
|
-
| size | 设置按钮的大小 | large | - | |
|
|
922
|
-
|
|
923
|
-
|
|
924
|
-
### SkeletonInputProps
|
|
925
|
-
|
|
926
|
-
| 属性 | 说明 | 类型 | 默认值 |
|
|
927
|
-
|--------|--------|--------|--------|
|
|
928
|
-
| active | 是否展示动画效果 | boolean | false |
|
|
929
|
-
| size | 设置输入框的大小 | large | - |
|
|
930
|
-
|
|
931
|
-
|
|
932
|
-
|
|
933
|
-
|
|
934
873
|
<DemoTitle title="Select" desc="下拉选择器">
|
|
935
874
|
## antd API
|
|
936
875
|
|
|
@@ -1029,14 +968,63 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1029
968
|
|
|
1030
969
|
|
|
1031
970
|
|
|
1032
|
-
<DemoTitle title="
|
|
1033
|
-
## API
|
|
971
|
+
<DemoTitle title="Skeleton" desc="在内容加载时提供占位图形展示。">
|
|
972
|
+
## antd API
|
|
1034
973
|
|
|
1035
|
-
|
|
974
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
975
|
+
|
|
976
|
+
### Skeleton
|
|
977
|
+
|
|
978
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
1036
979
|
|--------|--------|--------|--------|
|
|
1037
|
-
|
|
|
980
|
+
| active | 是否展示动画效果 | boolean | false |
|
|
981
|
+
| avatar | 是否显示头像占位图 | boolean \| | false |
|
|
982
|
+
| loading | 为 true 时，显示占位图。反之则直接展示子组件 | boolean | - |
|
|
983
|
+
| paragraph | 是否显示段落占位图 | boolean \| | true |
|
|
984
|
+
| round | 为 true 时，段落和标题显示圆角 | boolean | false |
|
|
985
|
+
| title | 是否显示标题占位图 | boolean \| | true |
|
|
986
|
+
|
|
987
|
+
|
|
988
|
+
### SkeletonAvatarProps
|
|
989
|
+
|
|
990
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
991
|
+
|--------|--------|--------|--------|
|
|
992
|
+
| active | 是否展示动画效果，仅在单独使用头像骨架时生效 | boolean | false |
|
|
993
|
+
| shape | 指定头像的形状 | circle | - |
|
|
994
|
+
| size | 设置头像占位图的大小 | number \| | - |
|
|
995
|
+
|
|
996
|
+
|
|
997
|
+
### SkeletonTitleProps
|
|
1038
998
|
|
|
999
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
1000
|
+
|--------|--------|--------|--------|
|
|
1001
|
+
| width | 设置标题占位图的宽度 | number \| string | - |
|
|
1002
|
+
|
|
1003
|
+
|
|
1004
|
+
### SkeletonParagraphProps
|
|
1005
|
+
|
|
1006
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
1007
|
+
|--------|--------|--------|--------|
|
|
1008
|
+
| rows | 设置段落占位图的行数 | number | - |
|
|
1009
|
+
| width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \| string \| Array | - |
|
|
1010
|
+
|
|
1011
|
+
|
|
1012
|
+
### SkeletonButtonProps
|
|
1013
|
+
|
|
1014
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1015
|
+
|--------|--------|--------|--------|--------|
|
|
1016
|
+
| active | 是否展示动画效果 | boolean | false | |
|
|
1017
|
+
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | 4.17.0 |
|
|
1018
|
+
| shape | 指定按钮的形状 | circle | - | |
|
|
1019
|
+
| size | 设置按钮的大小 | large | - | |
|
|
1020
|
+
|
|
1021
|
+
|
|
1022
|
+
### SkeletonInputProps
|
|
1039
1023
|
|
|
1024
|
+
| 属性 | 说明 | 类型 | 默认值 |
|
|
1025
|
+
|--------|--------|--------|--------|
|
|
1026
|
+
| active | 是否展示动画效果 | boolean | false |
|
|
1027
|
+
| size | 设置输入框的大小 | large | - |
|
|
1040
1028
|
|
|
1041
1029
|
|
|
1042
1030
|
|
|
@@ -1116,6 +1104,18 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1116
1104
|
|
|
1117
1105
|
|
|
1118
1106
|
|
|
1107
|
+
<DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。">
|
|
1108
|
+
## API
|
|
1109
|
+
|
|
1110
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1111
|
+
|--------|--------|--------|--------|
|
|
1112
|
+
| texture | 是否显示纹理 | boolean | false |
|
|
1113
|
+
|
|
1114
|
+
|
|
1115
|
+
|
|
1116
|
+
|
|
1117
|
+
|
|
1118
|
+
|
|
1119
1119
|
<DemoTitle title="Radio" desc="用于在多个备选项中选中单个状态。">
|
|
1120
1120
|
#### API
|
|
1121
1121
|
|
|
@@ -1297,84 +1297,27 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1297
1297
|
|
|
1298
1298
|
|
|
1299
1299
|
|
|
1300
|
-
<DemoTitle title="
|
|
1301
|
-
|
|
1300
|
+
<DemoTitle title="Pagination" desc="分页器用于分隔长列表，每次只加载一个页面。">
|
|
1301
|
+
## API
|
|
1302
1302
|
|
|
1303
1303
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1304
1304
|
|--------|--------|--------|--------|
|
|
1305
|
-
|
|
|
1305
|
+
| hideSwitchButton | 是否展示上一页/下一页的切换按钮 | boolean | false |
|
|
1306
1306
|
|
|
1307
1307
|
|
|
1308
|
-
<AntdApiRef url="https://ant.design/components/
|
|
1308
|
+
<AntdApiRef url="https://ant.design/components/pagination-cn/#api"></AntdApiRef>
|
|
1309
1309
|
|
|
1310
1310
|
|
|
1311
1311
|
## antd API
|
|
1312
1312
|
|
|
1313
1313
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1314
1314
|
|
|
1315
|
-
|
|
1316
|
-
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1320
|
-
|
|
1321
|
-
| okButtonProps | ok 按钮 props | | - | |
|
|
1322
|
-
| okText | 确认按钮文字 | string | 确定 | |
|
|
1323
|
-
| okType | 确认按钮类型 | string | primary | |
|
|
1324
|
-
| showCancel | 是否显示取消按钮 | boolean | true | 4.18.0 |
|
|
1325
|
-
| title | 确认框标题 | ReactNode \| () => ReactNode | - | |
|
|
1326
|
-
| description | 确认内容的详细描述 | ReactNode \| () => ReactNode | - | 5.1.0 |
|
|
1327
|
-
| onCancel | 点击取消的回调 | function(e) | - | |
|
|
1328
|
-
| onConfirm | 点击确认的回调 | function(e) | - | |
|
|
1329
|
-
| onPopupClick | 弹出气泡点击事件 | function(e) | - | 5.5.0 |
|
|
1330
|
-
|
|
1331
|
-
|
|
1332
|
-
<!-- 共同的 API -->
|
|
1333
|
-
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
1334
|
-
|
|
1335
|
-
<!-- prettier-ignore -->
|
|
1336
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1337
|
-
|--------|--------|--------|--------|--------|
|
|
1338
|
-
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
1339
|
-
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
1340
|
-
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
1341
|
-
| color | 背景颜色 | string | - | 4.3.0 |
|
|
1342
|
-
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
1343
|
-
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
1344
|
-
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
1345
|
-
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
1346
|
-
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
1347
|
-
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
1348
|
-
| placement | 气泡框位置，可选 | string | top | |
|
|
1349
|
-
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
1350
|
-
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
1351
|
-
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
1352
|
-
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
1353
|
-
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
|
|
1357
|
-
<DemoTitle title="Pagination" desc="分页器用于分隔长列表，每次只加载一个页面。">
|
|
1358
|
-
## API
|
|
1359
|
-
|
|
1360
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1361
|
-
|--------|--------|--------|--------|
|
|
1362
|
-
| hideSwitchButton | 是否展示上一页/下一页的切换按钮 | boolean | false |
|
|
1363
|
-
|
|
1364
|
-
|
|
1365
|
-
<AntdApiRef url="https://ant.design/components/pagination-cn/#api"></AntdApiRef>
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
## antd API
|
|
1369
|
-
|
|
1370
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
```jsx
|
|
1374
|
-
<Pagination onChange={onChange} total={50} />
|
|
1375
|
-
```
|
|
1376
|
-
|
|
1377
|
-
|
|
1315
|
+
|
|
1316
|
+
```jsx
|
|
1317
|
+
<Pagination onChange={onChange} total={50} />
|
|
1318
|
+
```
|
|
1319
|
+
|
|
1320
|
+
|
|
1378
1321
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1379
1322
|
|--------|--------|--------|--------|--------|
|
|
1380
1323
|
| align | 对齐方式 | start \| center \| end | - | 5.19.0 |
|
|
@@ -1401,98 +1344,59 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1401
1344
|
|
|
1402
1345
|
|
|
1403
1346
|
|
|
1404
|
-
<DemoTitle title="
|
|
1347
|
+
<DemoTitle title="Popconfirm" desc="点击元素，弹出气泡式的确认框。">
|
|
1405
1348
|
#### API
|
|
1406
1349
|
|
|
1407
|
-
|
|
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 参数如下：
|
|
1350
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1351
|
+
|--------|--------|--------|--------|
|
|
1352
|
+
| type | 类型 | 'info' \| 'warning' \| 'error' \| 'success' \| 'confirm' | 'confirm' |
|
|
1423
1353
|
|
|
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
1354
|
|
|
1355
|
+
<AntdApiRef url="https://ant.design/components/popconfirm-cn/#api"></AntdApiRef>
|
|
1443
1356
|
|
|
1444
1357
|
|
|
1445
|
-
|
|
1358
|
+
## antd API
|
|
1446
1359
|
|
|
1447
|
-
|
|
1360
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1448
1361
|
|
|
1449
1362
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1450
1363
|
|--------|--------|--------|--------|--------|
|
|
1451
|
-
|
|
|
1452
|
-
|
|
|
1453
|
-
|
|
|
1454
|
-
|
|
|
1455
|
-
|
|
|
1456
|
-
|
|
|
1457
|
-
|
|
|
1458
|
-
|
|
|
1459
|
-
|
|
|
1460
|
-
|
|
|
1461
|
-
|
|
1462
|
-
|
|
1463
|
-
|
|
1464
|
-
|
|
1465
|
-
还提供了一个全局配置方法，在调用前提前配置，全局一次生效。
|
|
1466
|
-
|
|
1467
|
-
`notification.config(options)`
|
|
1468
|
-
|
|
1469
|
-
当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)当你想单独使用，可通过如下设置开启 RTL 模式。
|
|
1470
|
-
|
|
1471
|
-
|
|
1472
|
-
```js
|
|
1473
|
-
notification.config({
|
|
1474
|
-
placement: 'bottomRight',
|
|
1475
|
-
bottom: 50,
|
|
1476
|
-
duration: 3,
|
|
1477
|
-
rtl: true,
|
|
1478
|
-
});
|
|
1479
|
-
```
|
|
1364
|
+
| cancelButtonProps | cancel 按钮 props | | - | |
|
|
1365
|
+
| cancelText | 取消按钮文字 | string | 取消 | |
|
|
1366
|
+
| disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false | |
|
|
1367
|
+
| icon | 自定义弹出气泡 Icon 图标 | ReactNode | | |
|
|
1368
|
+
| okButtonProps | ok 按钮 props | | - | |
|
|
1369
|
+
| okText | 确认按钮文字 | string | 确定 | |
|
|
1370
|
+
| okType | 确认按钮类型 | string | primary | |
|
|
1371
|
+
| showCancel | 是否显示取消按钮 | boolean | true | 4.18.0 |
|
|
1372
|
+
| title | 确认框标题 | ReactNode \| () => ReactNode | - | |
|
|
1373
|
+
| description | 确认内容的详细描述 | ReactNode \| () => ReactNode | - | 5.1.0 |
|
|
1374
|
+
| onCancel | 点击取消的回调 | function(e) | - | |
|
|
1375
|
+
| onConfirm | 点击确认的回调 | function(e) | - | |
|
|
1376
|
+
| onPopupClick | 弹出气泡点击事件 | function(e) | - | 5.5.0 |
|
|
1480
1377
|
|
|
1481
1378
|
|
|
1482
|
-
|
|
1379
|
+
<!-- 共同的 API -->
|
|
1380
|
+
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
1483
1381
|
|
|
1382
|
+
<!-- prettier-ignore -->
|
|
1484
1383
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1485
1384
|
|--------|--------|--------|--------|--------|
|
|
1486
|
-
|
|
|
1487
|
-
|
|
|
1488
|
-
|
|
|
1489
|
-
|
|
|
1490
|
-
|
|
|
1491
|
-
|
|
|
1492
|
-
|
|
|
1493
|
-
|
|
|
1494
|
-
|
|
|
1495
|
-
|
|
|
1385
|
+
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
1386
|
+
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
1387
|
+
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
1388
|
+
| color | 背景颜色 | string | - | 4.3.0 |
|
|
1389
|
+
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
1390
|
+
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
1391
|
+
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
1392
|
+
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
1393
|
+
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
1394
|
+
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
1395
|
+
| placement | 气泡框位置，可选 | string | top | |
|
|
1396
|
+
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
1397
|
+
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
1398
|
+
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
1399
|
+
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
1496
1400
|
|
|
1497
1401
|
|
|
1498
1402
|
|
|
@@ -1667,6 +1571,155 @@ const confirmed = await modal.confirm({ ... });
|
|
|
1667
1571
|
|
|
1668
1572
|
|
|
1669
1573
|
|
|
1574
|
+
<DemoTitle title="Notification" desc="用于指示任务的完成进度">
|
|
1575
|
+
#### API
|
|
1576
|
+
|
|
1577
|
+
<AntdApiRef url="https://ant.design/components/notification-cn/#api"></AntdApiRef>
|
|
1578
|
+
|
|
1579
|
+
|
|
1580
|
+
## antd API
|
|
1581
|
+
|
|
1582
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1583
|
+
|
|
1584
|
+
|
|
1585
|
+
- `notification.success(config)`
|
|
1586
|
+
- `notification.error(config)`
|
|
1587
|
+
- `notification.info(config)`
|
|
1588
|
+
- `notification.warning(config)`
|
|
1589
|
+
- `notification.open(config)`
|
|
1590
|
+
- `notification.destroy(key?: String)`
|
|
1591
|
+
|
|
1592
|
+
config 参数如下：
|
|
1593
|
+
|
|
1594
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1595
|
+
|--------|--------|--------|--------|--------|
|
|
1596
|
+
| actions | 自定义按钮组 | ReactNode | - | 5.24.0 |
|
|
1597
|
+
| className | 自定义 CSS class | string | - | - |
|
|
1598
|
+
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1599
|
+
| description | 通知提醒内容，必选 | ReactNode | - | - |
|
|
1600
|
+
| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 | - |
|
|
1601
|
+
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1602
|
+
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1603
|
+
| icon | 自定义图标 | ReactNode | - | - |
|
|
1604
|
+
| key | 当前通知唯一标志 | string | - | - |
|
|
1605
|
+
| message | 通知提醒标题，必选 | ReactNode | - | - |
|
|
1606
|
+
| placement | 弹出位置，可选 | string | topRight | - |
|
|
1607
|
+
| style | 自定义内联样式 | | - | - |
|
|
1608
|
+
| role | 供屏幕阅读器识别的通知内容语义，默认为 | alert \| status | alert | 5.6.0 |
|
|
1609
|
+
| onClick | 点击通知时触发的回调函数 | function | - | - |
|
|
1610
|
+
| onClose | 当通知关闭时触发 | function | - | - |
|
|
1611
|
+
| props | 透传至通知 | Object | - | - |
|
|
1612
|
+
|
|
1613
|
+
|
|
1614
|
+
|
|
1615
|
+
- `notification.useNotification(config)`
|
|
1616
|
+
|
|
1617
|
+
config 参数如下：
|
|
1618
|
+
|
|
1619
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1620
|
+
|--------|--------|--------|--------|--------|
|
|
1621
|
+
| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 | |
|
|
1622
|
+
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1623
|
+
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body | |
|
|
1624
|
+
| placement | 弹出位置，可选 | string | topRight | |
|
|
1625
|
+
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1626
|
+
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1627
|
+
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1628
|
+
| stack | 堆叠模式，超过阈值时会将所有消息收起 | boolean \| | { threshold: 3 } | 5.10.0 |
|
|
1629
|
+
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | |
|
|
1630
|
+
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
|
|
1631
|
+
|
|
1632
|
+
|
|
1633
|
+
### 全局配置
|
|
1634
|
+
|
|
1635
|
+
还提供了一个全局配置方法，在调用前提前配置，全局一次生效。
|
|
1636
|
+
|
|
1637
|
+
`notification.config(options)`
|
|
1638
|
+
|
|
1639
|
+
当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)当你想单独使用，可通过如下设置开启 RTL 模式。
|
|
1640
|
+
|
|
1641
|
+
|
|
1642
|
+
```js
|
|
1643
|
+
notification.config({
|
|
1644
|
+
placement: 'bottomRight',
|
|
1645
|
+
bottom: 50,
|
|
1646
|
+
duration: 3,
|
|
1647
|
+
rtl: true,
|
|
1648
|
+
});
|
|
1649
|
+
```
|
|
1650
|
+
|
|
1651
|
+
|
|
1652
|
+
#### notification.config
|
|
1653
|
+
|
|
1654
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1655
|
+
|--------|--------|--------|--------|--------|
|
|
1656
|
+
| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 | |
|
|
1657
|
+
| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
|
|
1658
|
+
| duration | 默认自动关闭延时，单位秒 | number | 4.5 | |
|
|
1659
|
+
| showProgress | 显示自动关闭通知框的进度条 | boolean | | 5.18.0 |
|
|
1660
|
+
| pauseOnHover | 悬停时是否暂停计时器 | boolean | true | 5.18.0 |
|
|
1661
|
+
| getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLNode | () => document.body | |
|
|
1662
|
+
| placement | 弹出位置，可选 | string | topRight | |
|
|
1663
|
+
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1664
|
+
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | |
|
|
1665
|
+
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
|
|
1666
|
+
|
|
1667
|
+
|
|
1668
|
+
|
|
1669
|
+
|
|
1670
|
+
<DemoTitle title="InputNumber" desc="通过鼠标或键盘，输入范围内的数值。">
|
|
1671
|
+
#### API
|
|
1672
|
+
|
|
1673
|
+
<AntdApiRef url="https://ant.design/components/input-number-cn/#api"></AntdApiRef>
|
|
1674
|
+
|
|
1675
|
+
|
|
1676
|
+
## antd API
|
|
1677
|
+
|
|
1678
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1679
|
+
|
|
1680
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1681
|
+
|--------|--------|--------|--------|--------|
|
|
1682
|
+
| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | 4.17.0 |
|
|
1683
|
+
| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | 4.17.0 |
|
|
1684
|
+
| autoFocus | 自动获取焦点 | boolean | false | - |
|
|
1685
|
+
| changeOnBlur | 是否在失去焦点时，触发 | boolean | true | 5.11.0 |
|
|
1686
|
+
| changeOnWheel | 允许鼠标滚轮改变数值 | boolean | - | 5.14.0 |
|
|
1687
|
+
| controls | 是否显示增减按钮，也可设置自定义箭头图标 | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
|
|
1688
|
+
| decimalSeparator | 小数点 | string | - | - |
|
|
1689
|
+
| placeholder | 占位符 | string | - | |
|
|
1690
|
+
| defaultValue | 初始值 | number | - | - |
|
|
1691
|
+
| disabled | 禁用 | boolean | false | - |
|
|
1692
|
+
| formatter | 指定输入框展示值的格式 | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - | info: 4.17.0 |
|
|
1693
|
+
| keyboard | 是否启用键盘快捷行为 | boolean | true | 4.12.0 |
|
|
1694
|
+
| max | 最大值 | number | | - |
|
|
1695
|
+
| min | 最小值 | number | | - |
|
|
1696
|
+
| parser | 指定从 | function(string): number | - | - |
|
|
1697
|
+
| precision | 数值精度，配置 | number | - | - |
|
|
1698
|
+
| readOnly | 只读 | boolean | false | - |
|
|
1699
|
+
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
1700
|
+
| prefix | 带有前缀图标的 input | ReactNode | - | 4.17.0 |
|
|
1701
|
+
| suffix | 带有后缀图标的 input | ReactNode | - | 5.20.0 |
|
|
1702
|
+
| size | 输入框大小 | large | - | - |
|
|
1703
|
+
| step | 每次改变步数，可以为小数 | number \| string | 1 | - |
|
|
1704
|
+
| stringMode | 字符值模式，开启后支持高精度小数。同时 | boolean | false | 4.13.0 |
|
|
1705
|
+
| value | 当前值 | number | - | - |
|
|
1706
|
+
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
1707
|
+
| onChange | 变化回调 | function(value: number \| string \| null) | - | - |
|
|
1708
|
+
| onPressEnter | 按下回车的回调 | function(e) | - | - |
|
|
1709
|
+
| onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 |
|
|
1710
|
+
|
|
1711
|
+
|
|
1712
|
+
## Ref
|
|
1713
|
+
|
|
1714
|
+
| 名称 | 说明 | 参数 | 版本 |
|
|
1715
|
+
|--------|--------|--------|--------|
|
|
1716
|
+
| blur() | 移除焦点 | - | |
|
|
1717
|
+
| focus() | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | cursor - 5.22.0 |
|
|
1718
|
+
| nativeElement | 获取原生 DOM 元素 | - | 5.17.3 |
|
|
1719
|
+
|
|
1720
|
+
|
|
1721
|
+
|
|
1722
|
+
|
|
1670
1723
|
<DemoTitle title="Message" desc="一条简洁且临时显示的消息，为操作提供全局反馈">
|
|
1671
1724
|
#### API
|
|
1672
1725
|
|
|
@@ -1767,59 +1820,6 @@ message.config({
|
|
|
1767
1820
|
|
|
1768
1821
|
|
|
1769
1822
|
|
|
1770
|
-
<DemoTitle title="InputNumber" desc="通过鼠标或键盘，输入范围内的数值。">
|
|
1771
|
-
#### API
|
|
1772
|
-
|
|
1773
|
-
<AntdApiRef url="https://ant.design/components/input-number-cn/#api"></AntdApiRef>
|
|
1774
|
-
|
|
1775
|
-
|
|
1776
|
-
## antd API
|
|
1777
|
-
|
|
1778
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1779
|
-
|
|
1780
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1781
|
-
|--------|--------|--------|--------|--------|
|
|
1782
|
-
| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | 4.17.0 |
|
|
1783
|
-
| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | 4.17.0 |
|
|
1784
|
-
| autoFocus | 自动获取焦点 | boolean | false | - |
|
|
1785
|
-
| changeOnBlur | 是否在失去焦点时，触发 | boolean | true | 5.11.0 |
|
|
1786
|
-
| changeOnWheel | 允许鼠标滚轮改变数值 | boolean | - | 5.14.0 |
|
|
1787
|
-
| controls | 是否显示增减按钮，也可设置自定义箭头图标 | boolean \| { upIcon?: React.ReactNode; downIcon?: React.ReactNode; } | - | 4.19.0 |
|
|
1788
|
-
| decimalSeparator | 小数点 | string | - | - |
|
|
1789
|
-
| placeholder | 占位符 | string | - | |
|
|
1790
|
-
| defaultValue | 初始值 | number | - | - |
|
|
1791
|
-
| disabled | 禁用 | boolean | false | - |
|
|
1792
|
-
| formatter | 指定输入框展示值的格式 | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - | info: 4.17.0 |
|
|
1793
|
-
| keyboard | 是否启用键盘快捷行为 | boolean | true | 4.12.0 |
|
|
1794
|
-
| max | 最大值 | number | | - |
|
|
1795
|
-
| min | 最小值 | number | | - |
|
|
1796
|
-
| parser | 指定从 | function(string): number | - | - |
|
|
1797
|
-
| precision | 数值精度，配置 | number | - | - |
|
|
1798
|
-
| readOnly | 只读 | boolean | false | - |
|
|
1799
|
-
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
1800
|
-
| prefix | 带有前缀图标的 input | ReactNode | - | 4.17.0 |
|
|
1801
|
-
| suffix | 带有后缀图标的 input | ReactNode | - | 5.20.0 |
|
|
1802
|
-
| size | 输入框大小 | large | - | - |
|
|
1803
|
-
| step | 每次改变步数，可以为小数 | number \| string | 1 | - |
|
|
1804
|
-
| stringMode | 字符值模式，开启后支持高精度小数。同时 | boolean | false | 4.13.0 |
|
|
1805
|
-
| value | 当前值 | number | - | - |
|
|
1806
|
-
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
1807
|
-
| onChange | 变化回调 | function(value: number \| string \| null) | - | - |
|
|
1808
|
-
| onPressEnter | 按下回车的回调 | function(e) | - | - |
|
|
1809
|
-
| onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 |
|
|
1810
|
-
|
|
1811
|
-
|
|
1812
|
-
## Ref
|
|
1813
|
-
|
|
1814
|
-
| 名称 | 说明 | 参数 | 版本 |
|
|
1815
|
-
|--------|--------|--------|--------|
|
|
1816
|
-
| blur() | 移除焦点 | - | |
|
|
1817
|
-
| focus() | 获取焦点 | (option?: { preventScroll?: boolean, cursor?: 'start' \| 'end' \| 'all' }) | cursor - 5.22.0 |
|
|
1818
|
-
| nativeElement | 获取原生 DOM 元素 | - | 5.17.3 |
|
|
1819
|
-
|
|
1820
|
-
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
1823
|
<DemoTitle title="Input" desc="通过鼠标或键盘输入内容，为表单提供输入字段的基础容器。。">
|
|
1824
1824
|
#### API
|
|
1825
1825
|
|
|
@@ -2070,153 +2070,54 @@ type TransformAction =
|
|
|
2070
2070
|
| 'wheel'
|
|
2071
2071
|
| 'doubleClick'
|
|
2072
2072
|
| 'move'
|
|
2073
|
-
| 'dragRebound'
|
|
2074
|
-
| 'reset';
|
|
2075
|
-
```
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
### ToolbarRenderInfoType
|
|
2079
|
-
|
|
2080
|
-
|
|
2081
|
-
```typescript
|
|
2082
|
-
{
|
|
2083
|
-
icons: {
|
|
2084
|
-
flipYIcon: React.ReactNode;
|
|
2085
|
-
flipXIcon: React.ReactNode;
|
|
2086
|
-
rotateLeftIcon: React.ReactNode;
|
|
2087
|
-
rotateRightIcon: React.ReactNode;
|
|
2088
|
-
zoomOutIcon: React.ReactNode;
|
|
2089
|
-
zoomInIcon: React.ReactNode;
|
|
2090
|
-
};
|
|
2091
|
-
actions: {
|
|
2092
|
-
onActive?: (index: number) => void; // 5.21.0 之后支持
|
|
2093
|
-
onFlipY: () => void;
|
|
2094
|
-
onFlipX: () => void;
|
|
2095
|
-
onRotateLeft: () => void;
|
|
2096
|
-
onRotateRight: () => void;
|
|
2097
|
-
onZoomOut: () => void;
|
|
2098
|
-
onZoomIn: () => void;
|
|
2099
|
-
onReset: () => void; // 5.17.3 之后支持
|
|
2100
|
-
onClose: () => void;
|
|
2101
|
-
};
|
|
2102
|
-
transform: TransformType,
|
|
2103
|
-
current: number;
|
|
2104
|
-
total: number;
|
|
2105
|
-
image: ImgInfo
|
|
2106
|
-
}
|
|
2107
|
-
```
|
|
2108
|
-
|
|
2109
|
-
|
|
2110
|
-
### ImgInfo
|
|
2111
|
-
|
|
2112
|
-
|
|
2113
|
-
```typescript
|
|
2114
|
-
{
|
|
2115
|
-
url: string;
|
|
2116
|
-
alt: string;
|
|
2117
|
-
width: string | number;
|
|
2118
|
-
height: string | number;
|
|
2119
|
-
}
|
|
2120
|
-
```
|
|
2121
|
-
|
|
2122
|
-
|
|
2123
|
-
|
|
2124
|
-
|
|
2125
|
-
<DemoTitle title="IconButton" desc="以图标为核心的轻量按钮组件，用于触发操作。">
|
|
2126
|
-
#### API
|
|
2127
|
-
|
|
2128
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2129
|
-
|--------|--------|--------|--------|
|
|
2130
|
-
| icon | icon | ReactNode \| string | |
|
|
2131
|
-
| iconType | 百炼图标iconfont的key，依赖百炼的iconFont，例如bl-icon-add | string | |
|
|
2132
|
-
| bordered | 边框 | boolean | true |
|
|
2133
|
-
| shape | 形状 | 'default' \| 'circle' | 'default' |
|
|
2134
|
-
|
|
2135
|
-
|
|
2136
|
-
## antd API
|
|
2137
|
-
|
|
2138
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2139
|
-
|
|
2140
|
-
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
2141
|
-
|
|
2142
|
-
按钮的属性说明如下：
|
|
2143
|
-
|
|
2144
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
2145
|
-
|--------|--------|--------|--------|--------|
|
|
2146
|
-
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
2147
|
-
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
2148
|
-
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
2149
|
-
| color | 设置按钮的颜色 | default | - | default |
|
|
2150
|
-
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
2151
|
-
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
2152
|
-
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
2153
|
-
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2154
|
-
| htmlType | 设置 | submit | button | |
|
|
2155
|
-
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
2156
|
-
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
2157
|
-
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
2158
|
-
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
2159
|
-
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
2160
|
-
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
2161
|
-
|
|
2162
|
-
|
|
2163
|
-
支持原生 button 的其他所有属性。
|
|
2164
|
-
|
|
2165
|
-
### PresetColors
|
|
2166
|
-
|
|
2167
|
-
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
2168
|
-
|
|
2169
|
-
|
|
2170
|
-
|
|
2171
|
-
<DemoTitle title="FloatButton" desc="用于网站上的全局功能；无论浏览到何处都可以看见的按钮。">
|
|
2172
|
-
#### API
|
|
2173
|
-
|
|
2174
|
-
<AntdApiRef url="https://ant.design/components/float-button-cn/#api"></AntdApiRef>
|
|
2175
|
-
|
|
2176
|
-
|
|
2177
|
-
## antd API
|
|
2178
|
-
|
|
2179
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2180
|
-
|
|
2181
|
-
自 `antd@5.0.0` 版本开始提供该组件。
|
|
2073
|
+
| 'dragRebound'
|
|
2074
|
+
| 'reset';
|
|
2075
|
+
```
|
|
2182
2076
|
|
|
2183
|
-
### 共同的 API
|
|
2184
2077
|
|
|
2185
|
-
|
|
2186
|
-
|--------|--------|--------|--------|--------|
|
|
2187
|
-
| icon | 自定义图标 | ReactNode | - | |
|
|
2188
|
-
| description | 文字及其它内容 | ReactNode | - | |
|
|
2189
|
-
| tooltip | 气泡卡片的内容 | ReactNode \| | - | TooltipProps: 5.25.0 |
|
|
2190
|
-
| type | 设置按钮类型 | default | default | |
|
|
2191
|
-
| shape | 设置按钮形状 | circle | circle | |
|
|
2192
|
-
| onClick | 点击按钮时的回调 | (event) => void | - | |
|
|
2193
|
-
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2194
|
-
| target | 相当于 a 标签的 target 属性，href 存在时生效 | string | - | |
|
|
2195
|
-
| htmlType | 设置 | submit | button | 5.21.0 |
|
|
2196
|
-
| badge | 带徽标数字的悬浮按钮（不支持 | | - | 5.4.0 |
|
|
2078
|
+
### ToolbarRenderInfoType
|
|
2197
2079
|
|
|
2198
2080
|
|
|
2199
|
-
|
|
2081
|
+
```typescript
|
|
2082
|
+
{
|
|
2083
|
+
icons: {
|
|
2084
|
+
flipYIcon: React.ReactNode;
|
|
2085
|
+
flipXIcon: React.ReactNode;
|
|
2086
|
+
rotateLeftIcon: React.ReactNode;
|
|
2087
|
+
rotateRightIcon: React.ReactNode;
|
|
2088
|
+
zoomOutIcon: React.ReactNode;
|
|
2089
|
+
zoomInIcon: React.ReactNode;
|
|
2090
|
+
};
|
|
2091
|
+
actions: {
|
|
2092
|
+
onActive?: (index: number) => void; // 5.21.0 之后支持
|
|
2093
|
+
onFlipY: () => void;
|
|
2094
|
+
onFlipX: () => void;
|
|
2095
|
+
onRotateLeft: () => void;
|
|
2096
|
+
onRotateRight: () => void;
|
|
2097
|
+
onZoomOut: () => void;
|
|
2098
|
+
onZoomIn: () => void;
|
|
2099
|
+
onReset: () => void; // 5.17.3 之后支持
|
|
2100
|
+
onClose: () => void;
|
|
2101
|
+
};
|
|
2102
|
+
transform: TransformType,
|
|
2103
|
+
current: number;
|
|
2104
|
+
total: number;
|
|
2105
|
+
image: ImgInfo
|
|
2106
|
+
}
|
|
2107
|
+
```
|
|
2200
2108
|
|
|
2201
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2202
|
-
|--------|--------|--------|--------|--------|
|
|
2203
|
-
| shape | 设置包含的 FloatButton 按钮形状 | circle | circle | |
|
|
2204
|
-
| trigger | 触发方式（有触发方式为菜单模式） | click | - | |
|
|
2205
|
-
| open | 受控展开，需配合 trigger 一起使用 | boolean | - | |
|
|
2206
|
-
| closeIcon | 自定义关闭按钮 | React.ReactNode | | |
|
|
2207
|
-
| placement | 自定义菜单弹出位置 | top | top | 5.21.0 |
|
|
2208
|
-
| onOpenChange | 展开收起时的回调，需配合 trigger 一起使用 | (open: boolean) => void | - | |
|
|
2209
|
-
| onClick | 点击按钮时的回调（仅在菜单模式中有效） | (event) => void | - | 5.3.0 |
|
|
2210
2109
|
|
|
2110
|
+
### ImgInfo
|
|
2211
2111
|
|
|
2212
|
-
### FloatButton.BackTop
|
|
2213
2112
|
|
|
2214
|
-
|
|
2215
|
-
|
|
2216
|
-
|
|
2217
|
-
|
|
2218
|
-
|
|
2219
|
-
|
|
2113
|
+
```typescript
|
|
2114
|
+
{
|
|
2115
|
+
url: string;
|
|
2116
|
+
alt: string;
|
|
2117
|
+
width: string | number;
|
|
2118
|
+
height: string | number;
|
|
2119
|
+
}
|
|
2120
|
+
```
|
|
2220
2121
|
|
|
2221
2122
|
|
|
2222
2123
|
|
|
@@ -2781,6 +2682,148 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
|
|
|
2781
2682
|
|
|
2782
2683
|
|
|
2783
2684
|
|
|
2685
|
+
<DemoTitle title="IconButton" desc="以图标为核心的轻量按钮组件，用于触发操作。">
|
|
2686
|
+
#### API
|
|
2687
|
+
|
|
2688
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2689
|
+
|--------|--------|--------|--------|
|
|
2690
|
+
| icon | icon | ReactNode \| string | |
|
|
2691
|
+
| iconType | 百炼图标iconfont的key，依赖百炼的iconFont，例如bl-icon-add | string | |
|
|
2692
|
+
| bordered | 边框 | boolean | true |
|
|
2693
|
+
| shape | 形状 | 'default' \| 'circle' | 'default' |
|
|
2694
|
+
|
|
2695
|
+
|
|
2696
|
+
## antd API
|
|
2697
|
+
|
|
2698
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2699
|
+
|
|
2700
|
+
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
2701
|
+
|
|
2702
|
+
按钮的属性说明如下：
|
|
2703
|
+
|
|
2704
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
2705
|
+
|--------|--------|--------|--------|--------|
|
|
2706
|
+
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
2707
|
+
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
2708
|
+
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
2709
|
+
| color | 设置按钮的颜色 | default | - | default |
|
|
2710
|
+
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
2711
|
+
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
2712
|
+
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
2713
|
+
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2714
|
+
| htmlType | 设置 | submit | button | |
|
|
2715
|
+
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
2716
|
+
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
2717
|
+
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
2718
|
+
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
2719
|
+
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
2720
|
+
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
2721
|
+
|
|
2722
|
+
|
|
2723
|
+
支持原生 button 的其他所有属性。
|
|
2724
|
+
|
|
2725
|
+
### PresetColors
|
|
2726
|
+
|
|
2727
|
+
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
2728
|
+
|
|
2729
|
+
|
|
2730
|
+
|
|
2731
|
+
<DemoTitle title="FloatButton" desc="用于网站上的全局功能；无论浏览到何处都可以看见的按钮。">
|
|
2732
|
+
#### API
|
|
2733
|
+
|
|
2734
|
+
<AntdApiRef url="https://ant.design/components/float-button-cn/#api"></AntdApiRef>
|
|
2735
|
+
|
|
2736
|
+
|
|
2737
|
+
## antd API
|
|
2738
|
+
|
|
2739
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2740
|
+
|
|
2741
|
+
自 `antd@5.0.0` 版本开始提供该组件。
|
|
2742
|
+
|
|
2743
|
+
### 共同的 API
|
|
2744
|
+
|
|
2745
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2746
|
+
|--------|--------|--------|--------|--------|
|
|
2747
|
+
| icon | 自定义图标 | ReactNode | - | |
|
|
2748
|
+
| description | 文字及其它内容 | ReactNode | - | |
|
|
2749
|
+
| tooltip | 气泡卡片的内容 | ReactNode \| | - | TooltipProps: 5.25.0 |
|
|
2750
|
+
| type | 设置按钮类型 | default | default | |
|
|
2751
|
+
| shape | 设置按钮形状 | circle | circle | |
|
|
2752
|
+
| onClick | 点击按钮时的回调 | (event) => void | - | |
|
|
2753
|
+
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2754
|
+
| target | 相当于 a 标签的 target 属性，href 存在时生效 | string | - | |
|
|
2755
|
+
| htmlType | 设置 | submit | button | 5.21.0 |
|
|
2756
|
+
| badge | 带徽标数字的悬浮按钮（不支持 | | - | 5.4.0 |
|
|
2757
|
+
|
|
2758
|
+
|
|
2759
|
+
### FloatButton.Group
|
|
2760
|
+
|
|
2761
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2762
|
+
|--------|--------|--------|--------|--------|
|
|
2763
|
+
| shape | 设置包含的 FloatButton 按钮形状 | circle | circle | |
|
|
2764
|
+
| trigger | 触发方式（有触发方式为菜单模式） | click | - | |
|
|
2765
|
+
| open | 受控展开，需配合 trigger 一起使用 | boolean | - | |
|
|
2766
|
+
| closeIcon | 自定义关闭按钮 | React.ReactNode | | |
|
|
2767
|
+
| placement | 自定义菜单弹出位置 | top | top | 5.21.0 |
|
|
2768
|
+
| onOpenChange | 展开收起时的回调，需配合 trigger 一起使用 | (open: boolean) => void | - | |
|
|
2769
|
+
| onClick | 点击按钮时的回调（仅在菜单模式中有效） | (event) => void | - | 5.3.0 |
|
|
2770
|
+
|
|
2771
|
+
|
|
2772
|
+
### FloatButton.BackTop
|
|
2773
|
+
|
|
2774
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2775
|
+
|--------|--------|--------|--------|--------|
|
|
2776
|
+
| duration | 回到顶部所需时间（ms） | number | 450 | |
|
|
2777
|
+
| target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window | |
|
|
2778
|
+
| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |
|
|
2779
|
+
| onClick | 点击按钮的回调函数 | () => void | - | |
|
|
2780
|
+
|
|
2781
|
+
|
|
2782
|
+
|
|
2783
|
+
|
|
2784
|
+
<DemoTitle title="Empty" desc="用于空状态的占位图形展示。">
|
|
2785
|
+
## API
|
|
2786
|
+
|
|
2787
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2788
|
+
|--------|--------|--------|--------|
|
|
2789
|
+
| type | 空状态类型 | \| 'noData'
|
|
2790
|
+
\| 'networkError'
|
|
2791
|
+
\| '404'
|
|
2792
|
+
\| 'arrears'
|
|
2793
|
+
\| 'desktopOnly'
|
|
2794
|
+
\| 'noAudio'
|
|
2795
|
+
\| 'noImage'
|
|
2796
|
+
\| 'noVideo'
|
|
2797
|
+
\| 'noAccess'
|
|
2798
|
+
\| 'error'
|
|
2799
|
+
\| 'noModel'
|
|
2800
|
+
\| 'noApp'
|
|
2801
|
+
\| 'success'
|
|
2802
|
+
\| 'failed'
|
|
2803
|
+
\| 'inProgress'
|
|
2804
|
+
\| 'stayTuned' | 'noData' |
|
|
2805
|
+
| texture | 是否显示纹理 | boolean | true |
|
|
2806
|
+
| image | 图片地址 | string | 默认是no data的图片 |
|
|
2807
|
+
| imageStyle | 图片样式 | React.CSSProperties | |
|
|
2808
|
+
| title | 标题内容 | React.ReactNode | |
|
|
2809
|
+
| description | 自定义描述内容 | React.ReactNode | |
|
|
2810
|
+
| onOk | ok按钮的点击事件 | (e: React.MouseEvent) => void | |
|
|
2811
|
+
| okText | ok按钮的文本 | React.ReactNode | |
|
|
2812
|
+
| okType | ok按钮的类型 | SparkButtonProps['type'] | 'primary' |
|
|
2813
|
+
| okButtonProps | ok按钮的props | SparkButtonProps | |
|
|
2814
|
+
| children | 自定义空状态的内容 | React.ReactNode | |
|
|
2815
|
+
| className | 自定义空状态的类名 | string | |
|
|
2816
|
+
| style | 自定义空状态的样式 | React.CSSProperties | |
|
|
2817
|
+
| size | 自定义空状态的大小 | React.CSSProperties['width'] | |
|
|
2818
|
+
| autoFit | 是否自适应容器宽度，当容器宽度小于 size 时自动缩放 | boolean | false |
|
|
2819
|
+
|
|
2820
|
+
|
|
2821
|
+
<AntdApiRef url="https://ant.design/components/empty-cn/#api"></AntdApiRef>
|
|
2822
|
+
|
|
2823
|
+
|
|
2824
|
+
|
|
2825
|
+
|
|
2826
|
+
|
|
2784
2827
|
<DemoTitle title="Dropdown" desc="向下弹出的列表。">
|
|
2785
2828
|
#### API
|
|
2786
2829
|
|
|
@@ -2932,46 +2975,41 @@ const dividerItem = {
|
|
|
2932
2975
|
|
|
2933
2976
|
|
|
2934
2977
|
|
|
2935
|
-
<DemoTitle title="
|
|
2936
|
-
|
|
2978
|
+
<DemoTitle title="Descriptions" desc="展示多个只读字段的组合">
|
|
2979
|
+
#### API
|
|
2937
2980
|
|
|
2938
|
-
|
|
2939
|
-
|
|
2940
|
-
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
|
|
2944
|
-
|
|
2945
|
-
|
|
2946
|
-
\| 'noImage'
|
|
2947
|
-
\| 'noVideo'
|
|
2948
|
-
\| 'noAccess'
|
|
2949
|
-
\| 'error'
|
|
2950
|
-
\| 'noModel'
|
|
2951
|
-
\| 'noApp'
|
|
2952
|
-
\| 'success'
|
|
2953
|
-
\| 'failed'
|
|
2954
|
-
\| 'inProgress'
|
|
2955
|
-
\| 'stayTuned' | 'noData' |
|
|
2956
|
-
| texture | 是否显示纹理 | boolean | true |
|
|
2957
|
-
| image | 图片地址 | string | 默认是no data的图片 |
|
|
2958
|
-
| imageStyle | 图片样式 | React.CSSProperties | |
|
|
2959
|
-
| title | 标题内容 | React.ReactNode | |
|
|
2960
|
-
| description | 自定义描述内容 | React.ReactNode | |
|
|
2961
|
-
| onOk | ok按钮的点击事件 | (e: React.MouseEvent) => void | |
|
|
2962
|
-
| okText | ok按钮的文本 | React.ReactNode | |
|
|
2963
|
-
| okType | ok按钮的类型 | SparkButtonProps['type'] | 'primary' |
|
|
2964
|
-
| okButtonProps | ok按钮的props | SparkButtonProps | |
|
|
2965
|
-
| children | 自定义空状态的内容 | React.ReactNode | |
|
|
2966
|
-
| className | 自定义空状态的类名 | string | |
|
|
2967
|
-
| style | 自定义空状态的样式 | React.CSSProperties | |
|
|
2968
|
-
| size | 自定义空状态的大小 | React.CSSProperties['width'] | |
|
|
2969
|
-
| autoFit | 是否自适应容器宽度，当容器宽度小于 size 时自动缩放 | boolean | false |
|
|
2981
|
+
<AntdApiRef url="https://ant.design/components/descriptions-cn/#api"></AntdApiRef>
|
|
2982
|
+
|
|
2983
|
+
|
|
2984
|
+
## antd API
|
|
2985
|
+
|
|
2986
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2987
|
+
|
|
2988
|
+
### Descriptions
|
|
2970
2989
|
|
|
2990
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2991
|
+
|--------|--------|--------|--------|--------|
|
|
2992
|
+
| bordered | 是否展示边框 | boolean | false | |
|
|
2993
|
+
| colon | 配置 | boolean | true | |
|
|
2994
|
+
| column | 一行的 | number \| | 3 | |
|
|
2995
|
+
| extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 |
|
|
2996
|
+
| items | 描述列表项内容 | | - | 5.8.0 |
|
|
2997
|
+
| layout | 描述布局 | horizontal | horizontal | |
|
|
2998
|
+
| size | 设置列表的大小。可以设置为 | default | - | |
|
|
2999
|
+
| title | 描述列表的标题，显示在最顶部 | ReactNode | - | |
|
|
3000
|
+
| classNames | 语义化结构 class | | - | 5.23.0 |
|
|
3001
|
+
| styles | 语义化结构 style | | - | 5.23.0 |
|
|
2971
3002
|
|
|
2972
|
-
|
|
3003
|
+
|
|
3004
|
+
### DescriptionItem
|
|
3005
|
+
|
|
3006
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3007
|
+
|--------|--------|--------|--------|--------|
|
|
3008
|
+
| label | 内容的描述 | ReactNode | - | |
|
|
3009
|
+
| span | 包含列的数量（ | number\| | 1 | screens: 5.9.0 |
|
|
2973
3010
|
|
|
2974
3011
|
|
|
3012
|
+
span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
|
|
2975
3013
|
|
|
2976
3014
|
|
|
2977
3015
|
|
|
@@ -3039,44 +3077,6 @@ v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v
|
|
|
3039
3077
|
|
|
3040
3078
|
|
|
3041
3079
|
|
|
3042
|
-
<DemoTitle title="Descriptions" desc="展示多个只读字段的组合">
|
|
3043
|
-
#### API
|
|
3044
|
-
|
|
3045
|
-
<AntdApiRef url="https://ant.design/components/descriptions-cn/#api"></AntdApiRef>
|
|
3046
|
-
|
|
3047
|
-
|
|
3048
|
-
## antd API
|
|
3049
|
-
|
|
3050
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3051
|
-
|
|
3052
|
-
### Descriptions
|
|
3053
|
-
|
|
3054
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3055
|
-
|--------|--------|--------|--------|--------|
|
|
3056
|
-
| bordered | 是否展示边框 | boolean | false | |
|
|
3057
|
-
| colon | 配置 | boolean | true | |
|
|
3058
|
-
| column | 一行的 | number \| | 3 | |
|
|
3059
|
-
| extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 |
|
|
3060
|
-
| items | 描述列表项内容 | | - | 5.8.0 |
|
|
3061
|
-
| layout | 描述布局 | horizontal | horizontal | |
|
|
3062
|
-
| size | 设置列表的大小。可以设置为 | default | - | |
|
|
3063
|
-
| title | 描述列表的标题，显示在最顶部 | ReactNode | - | |
|
|
3064
|
-
| classNames | 语义化结构 class | | - | 5.23.0 |
|
|
3065
|
-
| styles | 语义化结构 style | | - | 5.23.0 |
|
|
3066
|
-
|
|
3067
|
-
|
|
3068
|
-
### DescriptionItem
|
|
3069
|
-
|
|
3070
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3071
|
-
|--------|--------|--------|--------|--------|
|
|
3072
|
-
| label | 内容的描述 | ReactNode | - | |
|
|
3073
|
-
| span | 包含列的数量（ | number\| | 1 | screens: 5.9.0 |
|
|
3074
|
-
|
|
3075
|
-
|
|
3076
|
-
span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
|
|
3077
|
-
|
|
3078
|
-
|
|
3079
|
-
|
|
3080
3080
|
<DemoTitle title="DatePicker" desc="输入或选择时间的控件。">
|
|
3081
3081
|
#### API
|
|
3082
3082
|
|
|
@@ -3428,6 +3428,21 @@ export type FormatType =
|
|
|
3428
3428
|
|
|
3429
3429
|
|
|
3430
3430
|
|
|
3431
|
+
<DemoTitle title="CodeBlock" desc="代码块">
|
|
3432
|
+
#### API
|
|
3433
|
+
|
|
3434
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3435
|
+
|--------|--------|--------|--------|
|
|
3436
|
+
| language | 语言 | string \| string[] | (必填) |
|
|
3437
|
+
| value | 值 | string | (必填) |
|
|
3438
|
+
| className | 类名 | string | |
|
|
3439
|
+
| theme | 主题 | 'dark' \| 'light' | |
|
|
3440
|
+
| readOnly | 只读 | boolean | |
|
|
3441
|
+
| onChange | | (value: string) => void | |
|
|
3442
|
+
|
|
3443
|
+
|
|
3444
|
+
|
|
3445
|
+
|
|
3431
3446
|
<DemoTitle title="Checkbox" desc="收集用户的多项选择。">
|
|
3432
3447
|
#### API
|
|
3433
3448
|
|
|
@@ -3499,21 +3514,6 @@ interface Option {
|
|
|
3499
3514
|
|
|
3500
3515
|
|
|
3501
3516
|
|
|
3502
|
-
<DemoTitle title="CodeBlock" desc="代码块">
|
|
3503
|
-
#### API
|
|
3504
|
-
|
|
3505
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3506
|
-
|--------|--------|--------|--------|
|
|
3507
|
-
| language | 语言 | string \| string[] | (必填) |
|
|
3508
|
-
| value | 值 | string | (必填) |
|
|
3509
|
-
| className | 类名 | string | |
|
|
3510
|
-
| theme | 主题 | 'dark' \| 'light' | |
|
|
3511
|
-
| readOnly | 只读 | boolean | |
|
|
3512
|
-
| onChange | | (value: string) => void | |
|
|
3513
|
-
|
|
3514
|
-
|
|
3515
|
-
|
|
3516
|
-
|
|
3517
3517
|
<DemoTitle title="Card" desc="通用卡片容器">
|
|
3518
3518
|
#### API
|
|
3519
3519
|
|
|
@@ -3790,15 +3790,6 @@ Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fa
|
|
|
3790
3790
|
|
|
3791
3791
|
|
|
3792
3792
|
|
|
3793
|
-
<DemoTitle title="Audio" desc="音频展示">
|
|
3794
|
-
#### API
|
|
3795
|
-
|
|
3796
|
-
ApiParser解析结果为空
|
|
3797
|
-
|
|
3798
|
-
|
|
3799
|
-
|
|
3800
|
-
|
|
3801
|
-
|
|
3802
3793
|
<DemoTitle title="Anchor" desc="用于跳转到页面指定位置。">
|
|
3803
3794
|
#### API
|
|
3804
3795
|
|
|
@@ -3852,6 +3843,15 @@ ApiParser解析结果为空
|
|
|
3852
3843
|
|
|
3853
3844
|
|
|
3854
3845
|
|
|
3846
|
+
<DemoTitle title="Audio" desc="音频展示">
|
|
3847
|
+
#### API
|
|
3848
|
+
|
|
3849
|
+
ApiParser解析结果为空
|
|
3850
|
+
|
|
3851
|
+
|
|
3852
|
+
|
|
3853
|
+
|
|
3854
|
+
|
|
3855
3855
|
<DemoTitle title="AlertDialog" desc="一种在界面中弹出的对话框，用来向用户传达重要信息，并引导其进行确认或取消等操作。">
|
|
3856
3856
|
#### API
|
|
3857
3857
|
|
|
@@ -4059,6 +4059,349 @@ const confirmed = await modal.confirm({ ... });
|
|
|
4059
4059
|
|
|
4060
4060
|
|
|
4061
4061
|
|
|
4062
|
+
## 内置主题
|
|
4063
|
+
|
|
4064
|
+
Alibaba Cloud Spark Design 提供四种内置主题：
|
|
4065
|
+
|
|
4066
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
|
|
4067
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
|
|
4068
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
|
|
4069
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #676767;"></span> carbonDarkTheme（暗色模式）</div>
|
|
4070
|
+
|
|
4071
|
+
### 示例用法
|
|
4072
|
+
|
|
4073
|
+
|
|
4074
|
+
```tsx
|
|
4075
|
+
import { ConfigProvider, purpleTheme } from '@agentscope-ai/design';
|
|
4076
|
+
|
|
4077
|
+
const App = () => {
|
|
4078
|
+
return <ConfigProvider {...purpleTheme}>Hello Spark Design!</ConfigProvider>;
|
|
4079
|
+
};
|
|
4080
|
+
|
|
4081
|
+
export default App;
|
|
4082
|
+
```
|
|
4083
|
+
|
|
4084
|
+
|
|
4085
|
+
## 从 Antd token 生成您自己的主题
|
|
4086
|
+
|
|
4087
|
+
如果您已经有了 Antd 主题，仍然可以使用 generateThemeByToken 生成 spark 风格的主题
|
|
4088
|
+
|
|
4089
|
+
|
|
4090
|
+
```tsx
|
|
4091
|
+
import { ConfigProvider, generateThemeByToken } from '@agentscope-ai/design';
|
|
4092
|
+
const yourToken = {
|
|
4093
|
+
borderRadiusXS: 2,
|
|
4094
|
+
borderRadiusSM: 4,
|
|
4095
|
+
borderRadius: 6,
|
|
4096
|
+
borderRadiusLG: 8,
|
|
4097
|
+
borderRadiusXL: 12,
|
|
4098
|
+
borderRadiusFull: 999,
|
|
4099
|
+
wireframe: false,
|
|
4100
|
+
colorPrimaryBg: '#F2F0FF',
|
|
4101
|
+
colorPrimaryBgHover: '#F2F0FF',
|
|
4102
|
+
colorPrimaryBorder: '#E2DEFF',
|
|
4103
|
+
colorPrimaryBorderHover: '#BCB5FF',
|
|
4104
|
+
// ... 您可以在下一个文档中找到完整版本的 tokens：Tokens 和 CSS 变量
|
|
4105
|
+
};
|
|
4106
|
+
const darkMode = false;
|
|
4107
|
+
const yourThemeWithSparkStyle = generateThemeByToken(yourToken, darkMode);
|
|
4108
|
+
const App = () => {
|
|
4109
|
+
return (
|
|
4110
|
+
<ConfigProvider {...yourThemeWithSparkStyle}>
|
|
4111
|
+
Hello Spark Design!
|
|
4112
|
+
</ConfigProvider>
|
|
4113
|
+
);
|
|
4114
|
+
};
|
|
4115
|
+
|
|
4116
|
+
export default App;
|
|
4117
|
+
```
|
|
4118
|
+
|
|
4119
|
+
|
|
4120
|
+
您仍然可以修改生成的主题：`yourThemeWithSparkStyle`，但不建议这样做。我们建议您保持原始主题以获得 Spark Design 的最佳体验。
|
|
4121
|
+
|
|
4122
|
+
|
|
4123
|
+
|
|
4124
|
+
<div align="center"><a name="readme-top"></a>
|
|
4125
|
+
<img height="120" src="https://img.alicdn.com/imgextra/i1/O1CN01ipemFb1EzmZI9LiTe_!!6000000000423-55-tps-28-28.svg" style="border: none">
|
|
4126
|
+
<h1>Alibaba Cloud Spark Design</h1>
|
|
4127
|
+
</div>
|
|
4128
|
+
|
|
4129
|
+
# 概述
|
|
4130
|
+
|
|
4131
|
+
Alibaba Cloud Spark Design 是一个基于 Ant Design 的 React UI 组件库，包含丰富的基础组件和场景组件，专为构建优秀的 LLM 产品而设计。
|
|
4132
|
+
<br />
|
|
4133
|
+
<br />
|
|
4134
|
+
|
|
4135
|
+
## ✨ 特性
|
|
4136
|
+
|
|
4137
|
+
|
|
4138
|
+
- <img height="15" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"> 基于 Ant Design，兼容 Ant Design 生态系统。您可以无需修改代码即可切换到 Spark Design。
|
|
4139
|
+
- 🛡 使用 TypeScript 编写，具有可预测的静态类型。
|
|
4140
|
+
- 🧠 为 LLM 产品设计的各种场景组件。
|
|
4141
|
+
- 💡 与@agentscope-ai/chat 和 @agentscope-ai/flow 配合使用，构建企业级 LLM 应用。
|
|
4142
|
+
- 🎨 多种预设主题。
|
|
4143
|
+
- ☀️ 轻松切换明暗模式。
|
|
4144
|
+
|
|
4145
|
+
## 📦 安装
|
|
4146
|
+
|
|
4147
|
+
|
|
4148
|
+
```bash
|
|
4149
|
+
npm install antd @agentscope-ai/icons @agentscope-ai/design --save
|
|
4150
|
+
```
|
|
4151
|
+
|
|
4152
|
+
|
|
4153
|
+
## Tree Shaking 支持
|
|
4154
|
+
|
|
4155
|
+
@agentscope-ai/design 默认基于 ES 模块支持 tree shaking
|
|
4156
|
+
|
|
4157
|
+
## TypeScript
|
|
4158
|
+
|
|
4159
|
+
@agentscope-ai/chat 使用 TypeScript 编写并提供完整的定义文件。
|
|
4160
|
+
|
|
4161
|
+
## 内置主题
|
|
4162
|
+
|
|
4163
|
+
我们提供四种内置主题：
|
|
4164
|
+
|
|
4165
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
|
|
4166
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
|
|
4167
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
|
|
4168
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #676767;"></span> carbonDarkTheme（暗色模式）</div>
|
|
4169
|
+
|
|
4170
|
+
## 🏗️ 开源
|
|
4171
|
+
|
|
4172
|
+
[@agentscope-ai/design](https://www.npmjs.com/package/@agentscope-ai/design) 和 [@agentscope-ai/chat](https://www.npmjs.com/package/@agentscope-ai/chat) 正在积极推进开源，预计将在 2025 年底完成。目前，您可以通过 npm 访问我们的项目。
|
|
4173
|
+
|
|
4174
|
+
|
|
4175
|
+
|
|
4176
|
+
# 使用
|
|
4177
|
+
|
|
4178
|
+
如果您有自己的 iconfont 项目，可以将您的图标集成到 Spark Design 中，并通过简单的符号名称访问您的图标。
|
|
4179
|
+
|
|
4180
|
+
|
|
4181
|
+
```tsx
|
|
4182
|
+
import {
|
|
4183
|
+
ConfigProvider,
|
|
4184
|
+
purpleTheme,
|
|
4185
|
+
Button,
|
|
4186
|
+
IconFont,
|
|
4187
|
+
IconButton,
|
|
4188
|
+
} from '@agentscope-ai/design';
|
|
4189
|
+
import { Flex } from 'antd';
|
|
4190
|
+
import zhCN from 'antd/locale/zh_CN';
|
|
4191
|
+
import { useState } from 'react';
|
|
4192
|
+
|
|
4193
|
+
const App = () => {
|
|
4194
|
+
const prefix = 'sps';
|
|
4195
|
+
const iconSymbol = 'spark-effciency-line';
|
|
4196
|
+
const iconfont = '//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js'; // 您可以从 https://www.iconfont.cn/ 获取
|
|
4197
|
+
return (
|
|
4198
|
+
<ConfigProvider
|
|
4199
|
+
{...purpleTheme}
|
|
4200
|
+
prefix={prefix}
|
|
4201
|
+
prefixCls={prefix}
|
|
4202
|
+
iconfont={iconfont}
|
|
4203
|
+
locale={zhCN}
|
|
4204
|
+
style={{
|
|
4205
|
+
width: '100%',
|
|
4206
|
+
height: '100%',
|
|
4207
|
+
}}
|
|
4208
|
+
>
|
|
4209
|
+
<Flex
|
|
4210
|
+
style={{
|
|
4211
|
+
width: '100%',
|
|
4212
|
+
height: '100%',
|
|
4213
|
+
backgroundColor: `var(--${prefix}-color-bg-base)`,
|
|
4214
|
+
}}
|
|
4215
|
+
justify="center"
|
|
4216
|
+
align="center"
|
|
4217
|
+
>
|
|
4218
|
+
<Flex vertical gap={16} style={{ width: '300px', padding: '12px 0' }}>
|
|
4219
|
+
<Flex gap={8}>
|
|
4220
|
+
<div style={{ width: '100px', lineHeight: '32px' }}>IconFont:</div>
|
|
4221
|
+
<IconFont type={iconSymbol} />
|
|
4222
|
+
</Flex>
|
|
4223
|
+
<Flex gap={8}>
|
|
4224
|
+
<div style={{ width: '100px', lineHeight: '32px' }}>Button:</div>
|
|
4225
|
+
<Button type="primary" iconType={iconSymbol}>
|
|
4226
|
+
添加用户
|
|
4227
|
+
</Button>
|
|
4228
|
+
</Flex>
|
|
4229
|
+
<Flex gap={8}>
|
|
4230
|
+
<div style={{ width: '100px', lineHeight: '32px' }}>
|
|
4231
|
+
IconButton:
|
|
4232
|
+
</div>
|
|
4233
|
+
<IconButton iconType={iconSymbol}></IconButton>
|
|
4234
|
+
</Flex>
|
|
4235
|
+
</Flex>
|
|
4236
|
+
</Flex>
|
|
4237
|
+
</ConfigProvider>
|
|
4238
|
+
);
|
|
4239
|
+
};
|
|
4240
|
+
|
|
4241
|
+
export default App;
|
|
4242
|
+
```
|
|
4243
|
+
|
|
4244
|
+
|
|
4245
|
+
|
|
4246
|
+
|
|
4247
|
+
# 从 Antd 迁移
|
|
4248
|
+
|
|
4249
|
+
## 📦 安装
|
|
4250
|
+
|
|
4251
|
+
|
|
4252
|
+
```bash
|
|
4253
|
+
$ npm install @agentscope-ai/icons @agentscope-ai/design --save
|
|
4254
|
+
```
|
|
4255
|
+
|
|
4256
|
+
|
|
4257
|
+
## 🔨 使用
|
|
4258
|
+
|
|
4259
|
+
从 @agentscope-ai/design 导出的所有同名组件在 API 方面都与 antd 的对应组件兼容，这意味着您无需学习如何使用它们。如果您想充分利用 Alibaba Cloud Spark Design 的新功能，可以尝试使用这些组件而不是 antd 的组件。
|
|
4260
|
+
|
|
4261
|
+
|
|
4262
|
+
```tsx
|
|
4263
|
+
import {
|
|
4264
|
+
Button,
|
|
4265
|
+
Image,
|
|
4266
|
+
ConfigProvider,
|
|
4267
|
+
purpleDarkTheme,
|
|
4268
|
+
purpleTheme,
|
|
4269
|
+
} from '@agentscope-ai/design';
|
|
4270
|
+
import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
|
|
4271
|
+
import { Flex } from 'antd';
|
|
4272
|
+
import zhCN from 'antd/locale/zh_CN';
|
|
4273
|
+
import { useState } from 'react';
|
|
4274
|
+
|
|
4275
|
+
const App = () => {
|
|
4276
|
+
const [colorMode, setColorMode] = useState('light');
|
|
4277
|
+
const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
|
|
4278
|
+
|
|
4279
|
+
const prefix = 'sps';
|
|
4280
|
+
return (
|
|
4281
|
+
<ConfigProvider
|
|
4282
|
+
{...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
|
|
4283
|
+
prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
|
|
4284
|
+
prefixCls={prefix}
|
|
4285
|
+
iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
|
|
4286
|
+
locale={zhCN} // 来自 Ant Design 的语言包
|
|
4287
|
+
style={{
|
|
4288
|
+
width: '100%',
|
|
4289
|
+
height: '100%',
|
|
4290
|
+
}}
|
|
4291
|
+
>
|
|
4292
|
+
<div
|
|
4293
|
+
style={{
|
|
4294
|
+
width: '100%',
|
|
4295
|
+
height: '100%',
|
|
4296
|
+
backgroundColor: `var(--${prefix}-color-bg-base)`,
|
|
4297
|
+
}}
|
|
4298
|
+
>
|
|
4299
|
+
<Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
|
|
4300
|
+
<Image
|
|
4301
|
+
width={120}
|
|
4302
|
+
src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
|
|
4303
|
+
/>
|
|
4304
|
+
<div
|
|
4305
|
+
style={{
|
|
4306
|
+
color: `var(--${prefix}-ant-color-text-base)`,
|
|
4307
|
+
fontSize: '24px',
|
|
4308
|
+
textAlign: 'center',
|
|
4309
|
+
}}
|
|
4310
|
+
>
|
|
4311
|
+
Hello Spark Design!
|
|
4312
|
+
</div>
|
|
4313
|
+
<Button
|
|
4314
|
+
type="primary"
|
|
4315
|
+
onClick={() => {
|
|
4316
|
+
setColorMode(colorMode === 'light' ? 'dark' : 'light');
|
|
4317
|
+
}}
|
|
4318
|
+
icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
|
|
4319
|
+
>
|
|
4320
|
+
{colorMode === 'light' ? '暗色' : '亮色'} 模式
|
|
4321
|
+
</Button>
|
|
4322
|
+
</Flex>
|
|
4323
|
+
</div>
|
|
4324
|
+
</ConfigProvider>
|
|
4325
|
+
);
|
|
4326
|
+
};
|
|
4327
|
+
|
|
4328
|
+
export default App;
|
|
4329
|
+
```
|
|
4330
|
+
|
|
4331
|
+
|
|
4332
|
+
如果您想继续使用 antd 的组件，那也没问题。您只需要将 antd 的 ConfigProvider 替换为 @agentscope-ai/design 的即可。
|
|
4333
|
+
|
|
4334
|
+
|
|
4335
|
+
```tsx
|
|
4336
|
+
import {
|
|
4337
|
+
ConfigProvider,
|
|
4338
|
+
purpleDarkTheme,
|
|
4339
|
+
purpleTheme,
|
|
4340
|
+
} from '@agentscope-ai/design';
|
|
4341
|
+
import { Button, Image, Flex } from 'antd';
|
|
4342
|
+
import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
|
|
4343
|
+
import zhCN from 'antd/locale/zh_CN';
|
|
4344
|
+
import { useState } from 'react';
|
|
4345
|
+
|
|
4346
|
+
const App = () => {
|
|
4347
|
+
const [colorMode, setColorMode] = useState('light');
|
|
4348
|
+
const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
|
|
4349
|
+
|
|
4350
|
+
const prefix = 'sps';
|
|
4351
|
+
return (
|
|
4352
|
+
<ConfigProvider
|
|
4353
|
+
{...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
|
|
4354
|
+
prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
|
|
4355
|
+
prefixCls={prefix}
|
|
4356
|
+
iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
|
|
4357
|
+
locale={zhCN} // 来自 Ant Design 的语言包
|
|
4358
|
+
style={{
|
|
4359
|
+
width: '100%',
|
|
4360
|
+
height: '100%',
|
|
4361
|
+
}}
|
|
4362
|
+
>
|
|
4363
|
+
<div
|
|
4364
|
+
style={{
|
|
4365
|
+
width: '100%',
|
|
4366
|
+
height: '100%',
|
|
4367
|
+
backgroundColor: `var(--${prefix}-color-bg-base)`,
|
|
4368
|
+
}}
|
|
4369
|
+
>
|
|
4370
|
+
<Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
|
|
4371
|
+
<Image
|
|
4372
|
+
width={120}
|
|
4373
|
+
src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
|
|
4374
|
+
/>
|
|
4375
|
+
<div
|
|
4376
|
+
style={{
|
|
4377
|
+
color: `var(--${prefix}-ant-color-text-base)`,
|
|
4378
|
+
fontSize: '24px',
|
|
4379
|
+
textAlign: 'center',
|
|
4380
|
+
}}
|
|
4381
|
+
>
|
|
4382
|
+
Hello Spark Design!
|
|
4383
|
+
</div>
|
|
4384
|
+
<Button
|
|
4385
|
+
type="primary"
|
|
4386
|
+
onClick={() => {
|
|
4387
|
+
setColorMode(colorMode === 'light' ? 'dark' : 'light');
|
|
4388
|
+
}}
|
|
4389
|
+
icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
|
|
4390
|
+
>
|
|
4391
|
+
{colorMode === 'light' ? '暗色' : '亮色'} 模式
|
|
4392
|
+
</Button>
|
|
4393
|
+
</Flex>
|
|
4394
|
+
</div>
|
|
4395
|
+
</ConfigProvider>
|
|
4396
|
+
);
|
|
4397
|
+
};
|
|
4398
|
+
|
|
4399
|
+
export default App;
|
|
4400
|
+
```
|
|
4401
|
+
|
|
4402
|
+
|
|
4403
|
+
|
|
4404
|
+
|
|
4062
4405
|
# 使用
|
|
4063
4406
|
|
|
4064
4407
|
|
|
@@ -4085,19 +4428,549 @@ export default () => {
|
|
|
4085
4428
|
|
|
4086
4429
|
|
|
4087
4430
|
|
|
4088
|
-
|
|
4089
|
-
|
|
4431
|
+
# Vibe 编程
|
|
4432
|
+
|
|
4433
|
+
## LLMs.txt
|
|
4434
|
+
|
|
4435
|
+
为了让 Cursor 和 Claude Code 等工具理解 Spark Design，我们支持 LLMs.txt 文件，使 Spark Design 的文档可供大型语言模型使用。
|
|
4436
|
+
|
|
4437
|
+
|
|
4438
|
+
- [index.llms.txt](https://g.alicdn.com/code/npm/@ali/agentscope-ai-design/4.7.2/docs-dist/llms/index.llms.txt)：主要的 LLMs.txt 索引文件
|
|
4439
|
+
- [all.llms.txt](https://g.alicdn.com/code/npm/@ali/agentscope-ai-design/4.7.2/docs-dist/llms/all.llms.txt)：Spark Design 的完整文档
|
|
4440
|
+
|
|
4441
|
+
在 Cursor 中使用 @Docs 功能将 LLMs.txt 文件包含在您的项目中。[了解更多](https://docs.cursor.com/en/context/@-symbols/@-docs)
|
|
4442
|
+
|
|
4443
|
+
## D2C
|
|
4444
|
+
|
|
4445
|
+
在前端使用 Alibaba Cloud Spark Design、设计稿使用 Spark Design 套件的前提下，通过 masterGo 视觉稿生成代码可以做到以下几点：
|
|
4446
|
+
|
|
4447
|
+
|
|
4448
|
+
- 准确识别 icon
|
|
4449
|
+
- 使用标准 css token
|
|
4450
|
+
- 无需测量间距、圆角等数据，AI 直接还原布局（90%以上概率准确生成）
|
|
4451
|
+
- 使用标准组件还原页面，大部分标准组件可一次性正确生成，无需二次调整
|
|
4452
|
+
|
|
4453
|
+
<div>
|
|
4454
|
+
<video style="width: 100%" controls src="https://cloud.video.taobao.com/vod/PrrYzvYJkoDlbJwoL8Ei1Bo_60LrKAROCojWxB_EAYs.mp4" />
|
|
4455
|
+
</div>
|
|
4456
|
+
|
|
4457
|
+
我们会在不久的将来开放 masterGo 的设计套件和 rules，帮助您高效率还原视觉稿
|
|
4458
|
+
|
|
4459
|
+
|
|
4460
|
+
|
|
4461
|
+
# 从零开始使用
|
|
4462
|
+
|
|
4463
|
+
## 📦 安装
|
|
4464
|
+
|
|
4465
|
+
|
|
4466
|
+
```bash
|
|
4467
|
+
$ npm install antd @agentscope-ai/icons @agentscope-ai/design --save
|
|
4468
|
+
```
|
|
4469
|
+
|
|
4470
|
+
|
|
4471
|
+
## 🔨 使用
|
|
4472
|
+
|
|
4473
|
+
|
|
4474
|
+
```tsx
|
|
4475
|
+
import {
|
|
4476
|
+
Button,
|
|
4477
|
+
Image,
|
|
4478
|
+
ConfigProvider,
|
|
4479
|
+
purpleDarkTheme,
|
|
4480
|
+
purpleTheme,
|
|
4481
|
+
} from '@agentscope-ai/design';
|
|
4482
|
+
import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
|
|
4483
|
+
import { Flex } from 'antd';
|
|
4484
|
+
import zhCN from 'antd/locale/zh_CN';
|
|
4485
|
+
import { useState } from 'react';
|
|
4486
|
+
|
|
4487
|
+
const App = () => {
|
|
4488
|
+
const [colorMode, setColorMode] = useState('light');
|
|
4489
|
+
const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
|
|
4490
|
+
|
|
4491
|
+
const prefix = 'sps';
|
|
4492
|
+
return (
|
|
4493
|
+
<ConfigProvider
|
|
4494
|
+
{...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
|
|
4495
|
+
prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
|
|
4496
|
+
prefixCls={prefix}
|
|
4497
|
+
iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
|
|
4498
|
+
locale={zhCN} // 来自 Ant Design 的语言包
|
|
4499
|
+
style={{
|
|
4500
|
+
width: '100%',
|
|
4501
|
+
height: '100%',
|
|
4502
|
+
}}
|
|
4503
|
+
>
|
|
4504
|
+
<div
|
|
4505
|
+
style={{
|
|
4506
|
+
width: '100%',
|
|
4507
|
+
height: '100%',
|
|
4508
|
+
backgroundColor: `var(--${prefix}-color-bg-base)`,
|
|
4509
|
+
}}
|
|
4510
|
+
>
|
|
4511
|
+
<Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
|
|
4512
|
+
<Image
|
|
4513
|
+
width={120}
|
|
4514
|
+
src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
|
|
4515
|
+
/>
|
|
4516
|
+
<div
|
|
4517
|
+
style={{
|
|
4518
|
+
color: `var(--${prefix}-ant-color-text-base)`,
|
|
4519
|
+
fontSize: '24px',
|
|
4520
|
+
textAlign: 'center',
|
|
4521
|
+
}}
|
|
4522
|
+
>
|
|
4523
|
+
Hello Spark Design!
|
|
4524
|
+
</div>
|
|
4525
|
+
<Button
|
|
4526
|
+
type="primary"
|
|
4527
|
+
onClick={() => {
|
|
4528
|
+
setColorMode(colorMode === 'light' ? 'dark' : 'light');
|
|
4529
|
+
}}
|
|
4530
|
+
icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
|
|
4531
|
+
>
|
|
4532
|
+
{colorMode === 'light' ? '暗色' : '亮色'} 模式
|
|
4533
|
+
</Button>
|
|
4534
|
+
</Flex>
|
|
4535
|
+
</div>
|
|
4536
|
+
</ConfigProvider>
|
|
4537
|
+
);
|
|
4538
|
+
};
|
|
4539
|
+
|
|
4540
|
+
export default App;
|
|
4541
|
+
```
|
|
4542
|
+
|
|
4543
|
+
|
|
4544
|
+
|
|
4545
|
+
|
|
4546
|
+
# Tokens
|
|
4547
|
+
|
|
4548
|
+
除了来自 [antd](https://ant.design/theme-editor) 的固有 tokens 之外，Spark Design 在原有基础上扩展了更多变量。完整的 token 示例如下所示：
|
|
4549
|
+
|
|
4550
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
|
|
4551
|
+
|
|
4552
|
+
```json
|
|
4553
|
+
{
|
|
4554
|
+
"borderRadiusXS": 2,
|
|
4555
|
+
"borderRadiusSM": 4,
|
|
4556
|
+
"borderRadius": 6,
|
|
4557
|
+
"borderRadiusLG": 8,
|
|
4558
|
+
"borderRadiusXL": 12,
|
|
4559
|
+
"borderRadiusFull": 999,
|
|
4560
|
+
"wireframe": false,
|
|
4561
|
+
"colorPrimaryBg": "rgba(97, 92, 237, 0.08)",
|
|
4562
|
+
"colorPrimaryBgHover": "#F2F0FF",
|
|
4563
|
+
"colorPrimaryBorder": "#E2DEFF",
|
|
4564
|
+
"colorPrimaryBorderHover": "#BCB5FF",
|
|
4565
|
+
"colorPrimaryHover": "#9189FA",
|
|
4566
|
+
"colorPrimary": "#615CED",
|
|
4567
|
+
"colorPrimaryActive": "#4444C7",
|
|
4568
|
+
"colorPrimaryTextHover": "#9189FA",
|
|
4569
|
+
"colorPrimaryText": "#615CED",
|
|
4570
|
+
"colorPrimaryTextActive": "#4444C7",
|
|
4571
|
+
"colorTextBase": "#26244c",
|
|
4572
|
+
"colorBgBase": "#FFFFFF",
|
|
4573
|
+
"colorText": "rgba(38, 36, 76, 0.88)",
|
|
4574
|
+
"colorTextSecondary": "rgba(38, 36, 76, 0.65)",
|
|
4575
|
+
"colorTextTertiary": "rgba(38, 36, 76, 0.45)",
|
|
4576
|
+
"colorTextQuaternary": "rgba(38, 36, 76, 0.25)",
|
|
4577
|
+
"colorBorder": "#cdd0dc",
|
|
4578
|
+
"colorBorderSecondary": "#e6e8ee",
|
|
4579
|
+
"colorFill": "#cdd0dc5c",
|
|
4580
|
+
"colorFillSecondary": "#cdd0dc33",
|
|
4581
|
+
"colorFillTertiary": "#cdd0dc26",
|
|
4582
|
+
"colorFillQuaternary": "#cdd0dc1a",
|
|
4583
|
+
"colorBgContainer": "#FFFFFF",
|
|
4584
|
+
"colorBgElevated": "#FFFFFF",
|
|
4585
|
+
"colorBgLayout": "#f9fafd",
|
|
4586
|
+
"colorBgSpotlight": "rgba(38, 36, 76, 0.85)",
|
|
4587
|
+
"colorBgMask": "rgba(20, 19, 39, 0.45)",
|
|
4588
|
+
"colorInfo": "#0B83F1",
|
|
4589
|
+
"colorInfoHover": "#5EBCFF",
|
|
4590
|
+
"colorInfoBorder": "#87D1FF",
|
|
4591
|
+
"colorInfoText": "#0B83F1",
|
|
4592
|
+
"colorInfoBg": "#E6F7FF",
|
|
4593
|
+
"colorInfoBgHover": "#B0E3FF",
|
|
4594
|
+
"colorInfoBorderHover": "#5EBCFF",
|
|
4595
|
+
"colorSuccess": "#5BB98B",
|
|
4596
|
+
"colorSuccessHover": "#ABD4BE",
|
|
4597
|
+
"colorSuccessBg": "#EBFAF0",
|
|
4598
|
+
"colorSuccessBgHover": "#DFEDE4",
|
|
4599
|
+
"colorSuccessBorder": "#D3E0D9",
|
|
4600
|
+
"colorSuccessBorderHover": "#ABD4BE",
|
|
4601
|
+
"colorWarning": "#FAAD14",
|
|
4602
|
+
"colorWarningHover": "#FFD666",
|
|
4603
|
+
"colorWarningBg": "#FFFBE6",
|
|
4604
|
+
"colorWarningBgHover": "#FFF1B8",
|
|
4605
|
+
"colorWarningBorder": "#FFE58F",
|
|
4606
|
+
"colorWarningBorderHover": "#FFD666",
|
|
4607
|
+
"colorError": "#FF4D4F",
|
|
4608
|
+
"colorErrorHover": "#FF7875",
|
|
4609
|
+
"colorErrorBg": "#FFF2F0",
|
|
4610
|
+
"colorErrorBgHover": "#FFF1F0",
|
|
4611
|
+
"colorErrorBorder": "#FFCCC7",
|
|
4612
|
+
"colorErrorBorderHover": "#FFA39E",
|
|
4613
|
+
"colorLink": "#615CED",
|
|
4614
|
+
"boxShadow": "0px 4px 6px 0px rgba(0, 0, 0, 0.08)",
|
|
4615
|
+
"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)",
|
|
4616
|
+
|
|
4617
|
+
"colorTextWhite": "#ffffff",
|
|
4618
|
+
"colorTextOnPrimary": "#ffffff",
|
|
4619
|
+
"colorFillDisable": "#DBDAE7",
|
|
4620
|
+
"colorPurple": "#615CED",
|
|
4621
|
+
"colorPurpleHover": "#8080FF",
|
|
4622
|
+
"colorPurpleBg": "rgba(226, 222, 255, 0.8)",
|
|
4623
|
+
"colorPink": "#EC4899",
|
|
4624
|
+
"colorPinkHover": "#E593BC",
|
|
4625
|
+
"colorPinkBg": "rgba(251, 220, 239, 0.8)",
|
|
4626
|
+
"colorYellow": "#EAB308",
|
|
4627
|
+
"colorYellowHover": "#F1D372",
|
|
4628
|
+
"colorYellowBg": "rgba(255, 250, 184, 0.8)",
|
|
4629
|
+
"colorOrange": "#FA8125",
|
|
4630
|
+
"colorOrangeHover": "#E88C45",
|
|
4631
|
+
"colorOrangeBg": "rgba(255, 232, 201, 0.8)",
|
|
4632
|
+
"colorTeal": "#14B8A6",
|
|
4633
|
+
"colorTealHover": "#5FB3A9",
|
|
4634
|
+
"colorTealBg": "rgba(200, 244, 233, 0.8)",
|
|
4635
|
+
"colorBlue": "#0090FF",
|
|
4636
|
+
"colorBlueHover": "#72BCF5",
|
|
4637
|
+
"colorBlueBg": "rgba(194, 229, 255, 0.8)",
|
|
4638
|
+
"colorMauve": "#8E8C99",
|
|
4639
|
+
"colorMauveHover": "#C0BFC8",
|
|
4640
|
+
"colorMauveBg": "rgba(239, 240, 243, 0.8)",
|
|
4641
|
+
"colorSlate": "#1E293B",
|
|
4642
|
+
"colorSlateHover": "#475569",
|
|
4643
|
+
"colorSlateBg": "#E2E8F0",
|
|
4644
|
+
"colorLavender": "#A77BFF",
|
|
4645
|
+
"colorLavenderHover": "#BB99FF",
|
|
4646
|
+
"colorLavenderBg": "rgba(226, 212, 255, 0.8)",
|
|
4647
|
+
|
|
4648
|
+
"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)",
|
|
4649
|
+
"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)",
|
|
4650
|
+
"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)"
|
|
4651
|
+
}
|
|
4652
|
+
```
|
|
4653
|
+
|
|
4654
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
|
|
4655
|
+
|
|
4656
|
+
```json
|
|
4657
|
+
{
|
|
4658
|
+
"borderRadiusXS": 2,
|
|
4659
|
+
"borderRadiusSM": 4,
|
|
4660
|
+
"borderRadius": 6,
|
|
4661
|
+
"borderRadiusLG": 8,
|
|
4662
|
+
"borderRadiusXL": 12,
|
|
4663
|
+
"borderRadiusFull": 999,
|
|
4664
|
+
"wireframe": false,
|
|
4665
|
+
"colorPrimaryBg": "#202041",
|
|
4666
|
+
"colorPrimaryBgHover": "#202041",
|
|
4667
|
+
"colorPrimaryBorder": "#2B2A55",
|
|
4668
|
+
"colorPrimaryBorderHover": "#373476",
|
|
4669
|
+
"colorPrimaryHover": "#857DE3",
|
|
4670
|
+
"colorPrimary": "#5551CC",
|
|
4671
|
+
"colorPrimaryActive": "#4643A1",
|
|
4672
|
+
"colorPrimaryTextHover": "#857DE3",
|
|
4673
|
+
"colorPrimaryText": "#5551CC",
|
|
4674
|
+
"colorPrimaryTextActive": "#4643A1",
|
|
4675
|
+
"colorTextBase": "#E7E7ED",
|
|
4676
|
+
"colorBgBase": "#000000",
|
|
4677
|
+
"colorText": "rgba(231, 231, 237, 0.88)",
|
|
4678
|
+
"colorTextSecondary": "rgba(231, 231, 237, 0.65)",
|
|
4679
|
+
"colorTextTertiary": "rgba(231, 231, 237, 0.45)",
|
|
4680
|
+
"colorTextQuaternary": "rgba(231, 231, 237, 0.25)",
|
|
4681
|
+
"colorBorder": "rgba(71, 71, 97, 0.8)",
|
|
4682
|
+
"colorBorderSecondary": "rgba(56, 56, 76, 0.8)",
|
|
4683
|
+
"colorFill": "rgba(231, 231, 237, 0.18)",
|
|
4684
|
+
"colorFillSecondary": "rgba(231, 231, 237, 0.12)",
|
|
4685
|
+
"colorFillTertiary": "rgba(231, 231, 237, 0.08)",
|
|
4686
|
+
"colorFillQuaternary": "rgba(231, 231, 237, 0.04)",
|
|
4687
|
+
"colorBgContainer": "#0F0F14",
|
|
4688
|
+
"colorBgElevated": "#0F0F14",
|
|
4689
|
+
"colorBgLayout": "#0F0F14",
|
|
4690
|
+
"colorBgSpotlight": "rgba(71, 71, 97, 0.85)",
|
|
4691
|
+
"colorBgMask": "rgba(5, 5, 8, 0.8)",
|
|
4692
|
+
"colorInfo": "#0B83F1",
|
|
4693
|
+
"colorInfoHover": "rgba(42, 114, 165, 1)",
|
|
4694
|
+
"colorInfoBorder": "rgba(135, 209, 255, 0.2)",
|
|
4695
|
+
"colorInfoText": "#0B83F1",
|
|
4696
|
+
"colorInfoBg": "rgba(27, 73, 115, 0.25)",
|
|
4697
|
+
"colorInfoBgHover": "rgba(27, 73, 115, 0.32)",
|
|
4698
|
+
"colorInfoBorderHover": "rgba(94, 188, 255, 0.2)",
|
|
4699
|
+
"colorSuccess": "#5BB98B",
|
|
4700
|
+
"colorSuccessHover": "rgba(87, 141, 112, 1)",
|
|
4701
|
+
"colorSuccessBg": "rgba(0, 50, 26, 0.25)",
|
|
4702
|
+
"colorSuccessBgHover": "rgba(0, 50, 26, 0.32)",
|
|
4703
|
+
"colorSuccessBorder": "rgba(211, 224, 217, 0.2)",
|
|
4704
|
+
"colorSuccessBorderHover": "rgba(171, 212, 190, 0.2)",
|
|
4705
|
+
"colorWarning": "#FAAD14",
|
|
4706
|
+
"colorWarningHover": "rgba(170, 136, 43, 1)",
|
|
4707
|
+
"colorWarningBg": "rgba(129, 116, 49, 0.25)",
|
|
4708
|
+
"colorWarningBgHover": "rgba(129, 116, 49, 0.32)",
|
|
4709
|
+
"colorWarningBorder": "rgba(255, 229, 143, 0.2)",
|
|
4710
|
+
"colorWarningBorderHover": "rgba(255, 214, 102, 0.2)",
|
|
4711
|
+
"colorError": "#FF4D4F",
|
|
4712
|
+
"colorErrorHover": "rgba(165, 50, 48, 1)",
|
|
4713
|
+
"colorErrorBg": "rgba(129, 46, 46, 0.25)",
|
|
4714
|
+
"colorErrorBgHover": "rgba(129, 46, 46, 0.32)",
|
|
4715
|
+
"colorErrorBorder": "rgba(255, 204, 199, 0.2)",
|
|
4716
|
+
"colorErrorBorderHover": "rgba(255, 163, 158, 0.2)",
|
|
4717
|
+
"colorLink": "#5551CC",
|
|
4718
|
+
"boxShadow": "0px 4px 6px 0px rgba(255, 255, 255, 0.08)",
|
|
4719
|
+
"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)",
|
|
4720
|
+
|
|
4721
|
+
"colorTextWhite": "#fff",
|
|
4722
|
+
"colorTextOnPrimary": "#fff",
|
|
4723
|
+
"colorFillDisable": "#8D8C98",
|
|
4724
|
+
"colorPurple": "#5551CC",
|
|
4725
|
+
"colorPurpleHover": "#8383F0",
|
|
4726
|
+
"colorPurpleBg": "rgba(226, 222, 255, 0.2)",
|
|
4727
|
+
"colorPink": "#EC4899",
|
|
4728
|
+
"colorPinkHover": "#E494BC",
|
|
4729
|
+
"colorPinkBg": "rgba(251, 220, 239, 0.2)",
|
|
4730
|
+
"colorYellow": "#EAB308",
|
|
4731
|
+
"colorYellowHover": "#DBBE62",
|
|
4732
|
+
"colorYellowBg": "rgba(255, 250, 184, 0.2)",
|
|
4733
|
+
"colorOrange": "#FA8125",
|
|
4734
|
+
"colorOrangeHover": "#F7A25F",
|
|
4735
|
+
"colorOrangeBg": "rgba(255, 232, 201, 0.2)",
|
|
4736
|
+
"colorTeal": "#14B8A6",
|
|
4737
|
+
"colorTealHover": "#7BC7BE",
|
|
4738
|
+
"colorTealBg": "rgba(200, 244, 233, 0.2)",
|
|
4739
|
+
"colorBlue": "#0090FF",
|
|
4740
|
+
"colorBlueHover": "#83BFED",
|
|
4741
|
+
"colorBlueBg": "rgba(194, 229, 255, 0.2)",
|
|
4742
|
+
"colorMauve": "#8E8C99",
|
|
4743
|
+
"colorMauveHover": "#BBB8CA",
|
|
4744
|
+
"colorMauveBg": "rgba(239, 240, 243, 0.2)",
|
|
4745
|
+
"colorSlate": "#2C3A50",
|
|
4746
|
+
"colorSlateHover": "#354252",
|
|
4747
|
+
"colorSlateBg": "#232B36",
|
|
4748
|
+
"colorLavender": "#A77BFF",
|
|
4749
|
+
"colorLavenderHover": "#BFA5F3",
|
|
4750
|
+
"colorLavenderBg": "rgba(150, 143, 167, 0.48)",
|
|
4751
|
+
|
|
4752
|
+
"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)",
|
|
4753
|
+
"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);",
|
|
4754
|
+
"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)"
|
|
4755
|
+
}
|
|
4756
|
+
|
|
4757
|
+
```
|
|
4758
|
+
|
|
4759
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
|
|
4760
|
+
|
|
4761
|
+
```json
|
|
4762
|
+
{
|
|
4763
|
+
"borderRadiusXS": 2,
|
|
4764
|
+
"borderRadiusSM": 4,
|
|
4765
|
+
"borderRadius": 6,
|
|
4766
|
+
"borderRadiusLG": 8,
|
|
4767
|
+
"borderRadiusXL": 12,
|
|
4768
|
+
"borderRadiusFull": 999,
|
|
4769
|
+
"wireframe": false,
|
|
4770
|
+
"colorPrimaryBg": "rgba(244, 244, 247, 1)",
|
|
4771
|
+
"colorPrimaryBgHover": "rgba(239, 239, 244, 1)",
|
|
4772
|
+
"colorPrimaryBorder": "rgba(62, 63, 66, 1)",
|
|
4773
|
+
"colorPrimaryBorderHover": "rgba(130, 132, 137, 1)",
|
|
4774
|
+
"colorPrimaryHover": "rgba(38, 38, 41, 1)",
|
|
4775
|
+
"colorPrimary": "rgba(26, 26, 29, 1)",
|
|
4776
|
+
"colorPrimaryActive": "rgba(0, 0, 0, 1)",
|
|
4777
|
+
"colorPrimaryTextHover": "rgba(38, 38, 41, 1)",
|
|
4778
|
+
"colorPrimaryText": "rgba(26, 26, 29, 1)",
|
|
4779
|
+
"colorPrimaryTextActive": "rgba(0, 0, 0, 1)",
|
|
4780
|
+
"colorTextBase": "rgba(26, 26, 29, 1)",
|
|
4781
|
+
"colorBgBase": "rgba(255, 255, 255, 1)",
|
|
4782
|
+
"colorText": "rgba(26, 26, 29, 0.88)",
|
|
4783
|
+
"colorTextSecondary": "rgba(26, 26, 29, 0.65)",
|
|
4784
|
+
"colorTextTertiary": "rgba(26, 26, 29, 0.45)",
|
|
4785
|
+
"colorTextQuaternary": "rgba(26, 26, 29, 0.25)",
|
|
4786
|
+
"colorBorder": "rgba(187, 187, 193, 1)",
|
|
4787
|
+
"colorBorderSecondary": "rgba(234, 234, 234, 1)",
|
|
4788
|
+
"colorFill": "rgba(0, 0, 43, 0.06)",
|
|
4789
|
+
"colorFillSecondary": "rgba(0, 0, 85, 0.03)",
|
|
4790
|
+
"colorFillTertiary": "rgba(205, 208, 220, 0.15)",
|
|
4791
|
+
"colorFillQuaternary": "rgba(205, 208, 220, 0.1)",
|
|
4792
|
+
"colorBgContainer": "rgba(255, 255, 255, 1)",
|
|
4793
|
+
"colorBgElevated": "rgba(255, 255, 255, 1)",
|
|
4794
|
+
"colorBgLayout": "rgba(250, 250, 251, 1)",
|
|
4795
|
+
"colorBgSpotlight": "rgba(26, 26, 29, 0.85)",
|
|
4796
|
+
"colorBgMask": "rgba(0, 0, 0, 0.45)",
|
|
4797
|
+
"colorInfo": "rgba(11, 131, 241, 1)",
|
|
4798
|
+
"colorInfoHover": "rgba(94, 188, 255, 1)",
|
|
4799
|
+
"colorInfoBorder": "rgba(135, 209, 255, 1)",
|
|
4800
|
+
"colorInfoText": "rgba(11, 131, 241, 1)",
|
|
4801
|
+
"colorInfoBg": "rgba(230, 247, 255, 1)",
|
|
4802
|
+
"colorInfoBgHover": "rgba(176, 227, 255, 1)",
|
|
4803
|
+
"colorInfoBorderHover": "rgba(94, 188, 255, 1)",
|
|
4804
|
+
"colorSuccess": "rgba(91, 185, 139, 1)",
|
|
4805
|
+
"colorSuccessHover": "rgba(171, 212, 190, 1)",
|
|
4806
|
+
"colorSuccessBg": "rgba(235, 250, 240, 1)",
|
|
4807
|
+
"colorSuccessBgHover": "rgba(223, 237, 228, 1)",
|
|
4808
|
+
"colorSuccessBorder": "rgba(211, 224, 217, 1)",
|
|
4809
|
+
"colorSuccessBorderHover": "rgba(171, 212, 190, 1)",
|
|
4810
|
+
"colorWarning": "rgba(250, 173, 20, 1)",
|
|
4811
|
+
"colorWarningHover": "rgba(255, 214, 102, 1)",
|
|
4812
|
+
"colorWarningBg": "rgba(255, 251, 230, 1)",
|
|
4813
|
+
"colorWarningBgHover": "rgba(255, 241, 184, 1)",
|
|
4814
|
+
"colorWarningBorder": "rgba(255, 229, 143, 1)",
|
|
4815
|
+
"colorWarningBorderHover": "rgba(255, 214, 102, 1)",
|
|
4816
|
+
"colorError": "rgba(255, 77, 79, 1)",
|
|
4817
|
+
"colorErrorHover": "rgba(255, 120, 117, 1)",
|
|
4818
|
+
"colorErrorBg": "rgba(255, 242, 240, 1)",
|
|
4819
|
+
"colorErrorBgHover": "rgba(255, 241, 240, 1)",
|
|
4820
|
+
"colorErrorBorder": "rgba(255, 204, 199, 1)",
|
|
4821
|
+
"colorErrorBorderHover": "rgba(255, 163, 158, 1)",
|
|
4822
|
+
"colorLink": "rgba(0, 77, 255, 1)",
|
|
4823
|
+
"boxShadow": "0px 4px 6px 0px rgba(0, 0, 0, 0.08)",
|
|
4824
|
+
"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)",
|
|
4825
|
+
|
|
4826
|
+
"colorTextWhite": "#ffffff",
|
|
4827
|
+
"colorTextOnPrimary": "#ffffff",
|
|
4828
|
+
"colorFillDisable": "rgba(232, 232, 235, 1)",
|
|
4829
|
+
"colorPurple": "rgba(97, 92, 237, 1)",
|
|
4830
|
+
"colorPurpleHover": "#8080FF",
|
|
4831
|
+
"colorPurpleBg": "rgba(226, 222, 255, 0.8)",
|
|
4832
|
+
"colorPink": "rgba(236, 72, 153, 1)",
|
|
4833
|
+
"colorPinkHover": "#E593BC",
|
|
4834
|
+
"colorPinkBg": "rgba(251, 220, 239, 0.8)",
|
|
4835
|
+
"colorYellow": "rgba(234, 179, 8, 1)",
|
|
4836
|
+
"colorYellowHover": "#F1D372",
|
|
4837
|
+
"colorYellowBg": "rgba(255, 250, 184, 0.8)",
|
|
4838
|
+
"colorOrange": "rgba(250, 129, 37, 1)",
|
|
4839
|
+
"colorOrangeHover": "#E88C45",
|
|
4840
|
+
"colorOrangeBg": "rgba(255, 232, 201, 0.8)",
|
|
4841
|
+
"colorTeal": "rgba(20, 184, 166, 1)",
|
|
4842
|
+
"colorTealHover": "#5FB3A9",
|
|
4843
|
+
"colorTealBg": "rgba(200, 244, 233, 0.8)",
|
|
4844
|
+
"colorBlue": "rgba(0, 144, 255, 1)",
|
|
4845
|
+
"colorBlueHover": "#72BCF5",
|
|
4846
|
+
"colorBlueBg": "rgba(194, 229, 255, 0.8)",
|
|
4847
|
+
"colorMauve": "rgba(142, 140, 153, 1)",
|
|
4848
|
+
"colorMauveHover": "#C0BFC8",
|
|
4849
|
+
"colorMauveBg": "rgba(239, 240, 243, 0.8)",
|
|
4850
|
+
"colorSlate": "#2C3A50",
|
|
4851
|
+
"colorSlateHover": "#354252",
|
|
4852
|
+
"colorSlateBg": "#232B36",
|
|
4853
|
+
"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)",
|
|
4854
|
+
"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)",
|
|
4855
|
+
"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)"
|
|
4856
|
+
}
|
|
4857
|
+
|
|
4858
|
+
```
|
|
4859
|
+
|
|
4860
|
+
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonDarkTheme</div>
|
|
4861
|
+
|
|
4862
|
+
```json
|
|
4863
|
+
{
|
|
4864
|
+
"borderRadiusXS": 2,
|
|
4865
|
+
"borderRadiusSM": 4,
|
|
4866
|
+
"borderRadius": 6,
|
|
4867
|
+
"borderRadiusLG": 8,
|
|
4868
|
+
"borderRadiusXL": 12,
|
|
4869
|
+
"borderRadiusFull": 999,
|
|
4870
|
+
"wireframe": false,
|
|
4871
|
+
"colorPrimaryBg": "#181818",
|
|
4872
|
+
"colorPrimaryBgHover": "#2E2E2E",
|
|
4873
|
+
"colorPrimaryBorder": "#323232",
|
|
4874
|
+
"colorPrimaryBorderHover": "#2C2C2C",
|
|
4875
|
+
"colorPrimaryHover": "#DFDFDF",
|
|
4876
|
+
"colorPrimary": "#E4E4E4",
|
|
4877
|
+
"colorPrimaryActive": "#7E7E7E",
|
|
4878
|
+
"colorPrimaryTextHover": "#909090",
|
|
4879
|
+
"colorPrimaryText": "#676767",
|
|
4880
|
+
"colorPrimaryTextActive": "#959595",
|
|
4881
|
+
"colorTextBase": "#E7E7ED",
|
|
4882
|
+
"colorBgBase": "#0A0A0B",
|
|
4883
|
+
"colorText": "#E7E7EDC7",
|
|
4884
|
+
"colorTextSecondary": "#E7E7EDA6",
|
|
4885
|
+
"colorTextTertiary": "#E7E7ED73",
|
|
4886
|
+
"colorTextQuaternary": "#E7E7ED40",
|
|
4887
|
+
"colorBorder": "#5B5B5BCC",
|
|
4888
|
+
"colorBorderSecondary": "#323232CC",
|
|
4889
|
+
"colorFill": "#E7E7ED2E",
|
|
4890
|
+
"colorFillSecondary": "#E7E7ED1F",
|
|
4891
|
+
"colorFillTertiary": "#E7E7ED14",
|
|
4892
|
+
"colorFillQuaternary": "#E7E7ED0A",
|
|
4893
|
+
"colorBgContainer": "#121212",
|
|
4894
|
+
"colorBgElevated": "#212121",
|
|
4895
|
+
"colorBgLayout": "#141414",
|
|
4896
|
+
"colorBgSpotlight": "#525252D9",
|
|
4897
|
+
"colorBgMask": "#050508CC",
|
|
4898
|
+
"colorInfo": "#0B83F1",
|
|
4899
|
+
"colorInfoHover": "#5EBCFF",
|
|
4900
|
+
"colorInfoBorder": "#3990C9",
|
|
4901
|
+
"colorInfoText": "#0B83F1",
|
|
4902
|
+
"colorInfoBg": "#112233",
|
|
4903
|
+
"colorInfoBgHover": "#264866",
|
|
4904
|
+
"colorInfoBorderHover": "#5EBCFF",
|
|
4905
|
+
"colorSuccess": "#5BB98B",
|
|
4906
|
+
"colorSuccessHover": "#74A47C",
|
|
4907
|
+
"colorSuccessBg": "#293631",
|
|
4908
|
+
"colorSuccessBgHover": "#3F5147",
|
|
4909
|
+
"colorSuccessBorder": "#73A377",
|
|
4910
|
+
"colorSuccessBorderHover": "#ABD4BE",
|
|
4911
|
+
"colorWarning": "#FAAD14",
|
|
4912
|
+
"colorWarningHover": "#FF8C28",
|
|
4913
|
+
"colorWarningBg": "#2D231A",
|
|
4914
|
+
"colorWarningBgHover": "#4D3B23",
|
|
4915
|
+
"colorWarningBorder": "#FFA628",
|
|
4916
|
+
"colorWarningBorderHover": "#FFD666",
|
|
4917
|
+
"colorError": "#FF4D4F",
|
|
4918
|
+
"colorErrorHover": "#EE654E",
|
|
4919
|
+
"colorErrorBg": "#2B0B08",
|
|
4920
|
+
"colorErrorBgHover": "#4A2A28",
|
|
4921
|
+
"colorErrorBorder": "#EE5B4E",
|
|
4922
|
+
"colorErrorBorderHover": "#FFA39E",
|
|
4923
|
+
"colorLink": "#4D7DFF",
|
|
4924
|
+
"boxShadow": "0px 4px 6px 0px rgba(255, 255, 255, 0.08)",
|
|
4925
|
+
"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)",
|
|
4926
|
+
|
|
4927
|
+
"colorTextWhite": "#ffffff",
|
|
4928
|
+
"colorTextOnPrimary": "#000000",
|
|
4929
|
+
"colorFillDisable": "#898989",
|
|
4930
|
+
"colorPurple": "#615CED",
|
|
4931
|
+
"colorPurpleHover": "#8383F0",
|
|
4932
|
+
"colorPurpleBg": "#6964877A",
|
|
4933
|
+
"colorPink": "#EC4899",
|
|
4934
|
+
"colorPinkHover": "#E494BC",
|
|
4935
|
+
"colorPinkBg": "#53424D7A",
|
|
4936
|
+
"colorYellow": "#EAB308",
|
|
4937
|
+
"colorYellowHover": "#DBBE62",
|
|
4938
|
+
"colorYellowBg": "#9585527A",
|
|
4939
|
+
"colorOrange": "#FA8125",
|
|
4940
|
+
"colorOrangeHover": "#F7A25F",
|
|
4941
|
+
"colorOrangeBg": "#6F58417A",
|
|
4942
|
+
"colorTeal": "#14B8A6",
|
|
4943
|
+
"colorTealHover": "#7BC7BE",
|
|
4944
|
+
"colorTealBg": "#4658547A",
|
|
4945
|
+
"colorBlue": "#0090FF",
|
|
4946
|
+
"colorBlueHover": "#83BFED",
|
|
4947
|
+
"colorBlueBg": "#5E76897A",
|
|
4948
|
+
"colorMauve": "#8E8C99",
|
|
4949
|
+
"colorMauveHover": "#BBB8CA",
|
|
4950
|
+
"colorMauveBg": "#5859647A",
|
|
4951
|
+
"colorSlate": "#2C3A50",
|
|
4952
|
+
"colorSlateHover": "#354252",
|
|
4953
|
+
"colorSlateBg": "#232B36",
|
|
4954
|
+
"colorLavender": "#A77BFF",
|
|
4955
|
+
"colorLavenderHover": "#BFA5F3",
|
|
4956
|
+
"colorLavenderBg": "rgba(150, 143, 167, 0.48)",
|
|
4957
|
+
|
|
4958
|
+
"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)",
|
|
4959
|
+
"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)",
|
|
4960
|
+
"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)",
|
|
4961
|
+
"colorTextBlack": "#000000"
|
|
4962
|
+
}
|
|
4963
|
+
```
|
|
4090
4964
|
|
|
4091
|
-
|
|
4965
|
+
# CSS 变量
|
|
4092
4966
|
|
|
4093
|
-
|
|
4094
|
-
- Table 组件：表格行 hover 背景色修改为 `color-bg-layout` 颜色变量；表格行选中背景色修改为 `color-primary-bg-hover` 颜色变量
|
|
4095
|
-
- Select 组件：多选模式的选中项背景色调整
|
|
4096
|
-
- 主题色变量更新：,
|
|
4097
|
-
- bailianDarkTheme：添加 `"colorLinkHover": "#857DE3"`
|
|
4098
|
-
- bailianTheme：添加 `"colorLinkHover": "#8080FF"`
|
|
4099
|
-
- carbonDarkTheme：修改 `"colorTextOnPrimary": "#ffffff"`
|
|
4967
|
+
Spark Design 默认启用 cssVar 模式，因此您可以利用 从 token 派生出的 CSS 变量来构建自己的样式。
|
|
4100
4968
|
|
|
4101
|
-
##### Fixed
|
|
4102
4969
|
|
|
4103
|
-
|
|
4970
|
+
```less
|
|
4971
|
+
.example {
|
|
4972
|
+
background: var(--sps-color-bg-base);
|
|
4973
|
+
color: var(--sps-color-pink);
|
|
4974
|
+
}
|
|
4975
|
+
// 提示：您可以将 'sps' 替换为您自己的前缀
|
|
4976
|
+
```
|