@agentscope-ai/design 1.0.16 → 1.0.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/antd/styles/button.style.js +13 -1
- package/lib/antd/styles/index.style.js +3 -1
- package/lib/antd/styles/tree.style.d.ts +6 -0
- package/lib/antd/styles/tree.style.js +18 -0
- package/lib/antd/themes/bailianDarkTheme.json +3 -1
- package/lib/antd/themes/bailianTheme.json +4 -2
- package/lib/antd/themes/carbonDarkTheme.json +3 -1
- package/lib/antd/themes/carbonTheme.json +3 -1
- package/lib/antd/themes/generateTheme.js +30 -29
- package/lib/components/commonComponents/Audio/Control.d.ts +53 -0
- package/lib/components/commonComponents/{Video → Audio}/Control.js +18 -15
- package/lib/components/commonComponents/Audio/Control.style.d.ts +1 -0
- package/lib/components/commonComponents/Audio/Control.style.js +14 -0
- package/lib/components/commonComponents/Audio/demo/demo1.d.ts +2 -0
- package/lib/components/commonComponents/Audio/demo/demo1.js +11 -0
- package/lib/components/commonComponents/Audio/index.d.ts +10 -0
- package/lib/components/commonComponents/Audio/index.js +164 -0
- package/lib/components/commonComponents/Audio/index.style.d.ts +1 -0
- package/lib/components/commonComponents/Audio/index.style.js +10 -0
- package/lib/components/commonComponents/Button/demo/demo1.js +7 -0
- package/lib/components/commonComponents/Button/index.js +2 -1
- package/lib/components/commonComponents/CollapsePanel/demo/demo1.js +6 -6
- package/lib/components/commonComponents/CollapsePanel/index.js +4 -4
- package/lib/components/commonComponents/EllipsisTip/index.d.ts +8 -1
- package/lib/components/commonComponents/EllipsisTip/index.js +33 -3
- package/lib/components/commonComponents/Empty/index.d.ts +6 -0
- package/lib/components/commonComponents/Empty/index.js +22 -7
- package/lib/components/commonComponents/Empty/index.style.js +1 -1
- package/lib/components/commonComponents/Pagination/index.js +33 -42
- package/lib/components/commonComponents/Pagination/index.style.js +1 -1
- package/lib/components/commonComponents/PromptsEditor/VarRender.js +1 -1
- package/lib/components/commonComponents/SliderSelector/index.d.ts +1 -1
- package/lib/components/commonComponents/SliderSelector/index.js +8 -4
- package/lib/components/commonComponents/Steps/index.js +2 -1
- package/lib/components/commonComponents/Steps/index.style.js +5 -1
- package/lib/components/commonComponents/Table/index.style.js +27 -1
- package/lib/components/commonComponents/Tabs/index.js +9 -8
- package/lib/components/commonComponents/Tooltip/demo/demo3.d.ts +3 -0
- package/lib/components/commonComponents/Tooltip/demo/demo3.js +25 -0
- package/lib/components/commonComponents/Tooltip/index.d.ts +7 -1
- package/lib/components/commonComponents/Tooltip/index.js +12 -1
- package/lib/components/commonComponents/Tooltip/index.style.js +1 -1
- package/lib/components/commonComponents/Video/index.d.ts +5 -6
- package/lib/components/commonComponents/Video/index.js +14 -9
- package/lib/components/commonComponents/Video/index.style.js +2 -4
- package/lib/components/mobileComponents/MobileDrawer/index.style.js +7 -1
- package/lib/index.d.ts +2 -1
- package/lib/index.js +1 -0
- package/lib/typings.d.ts +12 -0
- package/llms/all.llms.txt +889 -1772
- package/llms/components/commonComponents/Empty/index.zh-CN.llms.txt +1 -0
- package/llms/components/commonComponents/Tooltip/index.zh-CN.llms.txt +2 -1
- package/llms/index.llms.txt +47 -47
- package/package.json +4 -4
- package/scripts/mcp-docs-server.js +4 -4
- package/lib/components/commonComponents/Video/Control.d.ts +0 -19
- package/llms/docs/guide/fromAntd.zh-CN.llms.txt +0 -156
- package/llms/docs/guide/fromScratch.zh-CN.llms.txt +0 -83
- package/llms/docs/guide/iconfont.zh-CN.llms.txt +0 -69
- package/llms/docs/guide/overview.zh-CN.llms.txt +0 -51
- package/llms/docs/guide/theme.zh-CN.llms.txt +0 -61
- package/llms/docs/guide/tokens&variables.zh-CN.llms.txt +0 -425
- package/llms/docs/guide/vibe-coding.zh-CN.llms.txt +0 -29
package/llms/all.llms.txt
CHANGED
|
@@ -1,5 +1,52 @@
|
|
|
1
1
|
|
|
2
2
|
|
|
3
|
+
<DemoTitle title="Tooltip" desc="简单的文本提示气泡框">
|
|
4
|
+
#### API
|
|
5
|
+
|
|
6
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
7
|
+
|--------|--------|--------|--------|
|
|
8
|
+
| mode | 颜色模式 | 'dark' \| 'light' | 'dark' |
|
|
9
|
+
| maxHeight | 最大高度 | number \| string | '90vh' |
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
<AntdApiRef url="https://ant.design/components/tooltip-cn/#api"></AntdApiRef>
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
## antd API
|
|
16
|
+
|
|
17
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
18
|
+
|
|
19
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
20
|
+
|--------|--------|--------|--------|
|
|
21
|
+
| title | 提示文字 | ReactNode \| () => ReactNode | - |
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
### 共同的 API
|
|
25
|
+
|
|
26
|
+
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
27
|
+
|
|
28
|
+
<!-- prettier-ignore -->
|
|
29
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
30
|
+
|--------|--------|--------|--------|--------|
|
|
31
|
+
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
32
|
+
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
33
|
+
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
34
|
+
| color | 背景颜色 | string | - | 4.3.0 |
|
|
35
|
+
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
36
|
+
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
37
|
+
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
38
|
+
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
39
|
+
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
40
|
+
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
41
|
+
| placement | 气泡框位置，可选 | string | top | |
|
|
42
|
+
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
43
|
+
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
44
|
+
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
45
|
+
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
|
|
49
|
+
|
|
3
50
|
<DemoTitle title="Upload" desc="文件选择上传和拖拽上传控件。">
|
|
4
51
|
#### API
|
|
5
52
|
|
|
@@ -96,61 +143,6 @@
|
|
|
96
143
|
|
|
97
144
|
|
|
98
145
|
|
|
99
|
-
<DemoTitle title="Video" desc="视频展示">
|
|
100
|
-
#### API
|
|
101
|
-
|
|
102
|
-
<AntdApiRef url="https://ant.design/components/upload-cn/#api"></AntdApiRef>
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
<DemoTitle title="Tooltip" desc="简单的文本提示气泡框">
|
|
109
|
-
#### API
|
|
110
|
-
|
|
111
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
112
|
-
|--------|--------|--------|--------|
|
|
113
|
-
| mode | 颜色模式 | 'dark' \| 'light' | 'light' |
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
<AntdApiRef url="https://ant.design/components/tooltip-cn/#api"></AntdApiRef>
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
## antd API
|
|
120
|
-
|
|
121
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
122
|
-
|
|
123
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
124
|
-
|--------|--------|--------|--------|
|
|
125
|
-
| title | 提示文字 | ReactNode \| () => ReactNode | - |
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
### 共同的 API
|
|
129
|
-
|
|
130
|
-
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
131
|
-
|
|
132
|
-
<!-- prettier-ignore -->
|
|
133
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
134
|
-
|--------|--------|--------|--------|--------|
|
|
135
|
-
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
136
|
-
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
137
|
-
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
138
|
-
| color | 背景颜色 | string | - | 4.3.0 |
|
|
139
|
-
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
140
|
-
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
141
|
-
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
142
|
-
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
143
|
-
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
144
|
-
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
145
|
-
| placement | 气泡框位置，可选 | string | top | |
|
|
146
|
-
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
147
|
-
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
148
|
-
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
149
|
-
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
146
|
<DemoTitle title="TimePicker" desc="输入或选择时间的控件。">
|
|
155
147
|
#### API
|
|
156
148
|
|
|
@@ -624,6 +616,56 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
624
616
|
|
|
625
617
|
|
|
626
618
|
|
|
619
|
+
<DemoTitle title="Video" desc="视频展示">
|
|
620
|
+
#### API
|
|
621
|
+
|
|
622
|
+
<AntdApiRef url="https://ant.design/components/upload-cn/#api"></AntdApiRef>
|
|
623
|
+
|
|
624
|
+
|
|
625
|
+
|
|
626
|
+
|
|
627
|
+
|
|
628
|
+
<DemoTitle title="Switch" desc="使用开关切换两种状态之间。">
|
|
629
|
+
#### API
|
|
630
|
+
|
|
631
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
632
|
+
|--------|--------|--------|--------|
|
|
633
|
+
| label | Switch后的内容 | ReactNode | |
|
|
634
|
+
|
|
635
|
+
<AntdApiRef url="https://ant.design/components/switch-cn/#api"></AntdApiRef>
|
|
636
|
+
|
|
637
|
+
|
|
638
|
+
## antd API
|
|
639
|
+
|
|
640
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
641
|
+
|
|
642
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
643
|
+
|--------|--------|--------|--------|--------|
|
|
644
|
+
| autoFocus | 组件自动获取焦点 | boolean | false | |
|
|
645
|
+
| checked | 指定当前是否选中 | boolean | false | |
|
|
646
|
+
| checkedChildren | 选中时的内容 | ReactNode | - | |
|
|
647
|
+
| className | Switch 器类名 | string | - | |
|
|
648
|
+
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
649
|
+
| defaultValue | defaultChecked | boolean | - | 5.12.0 |
|
|
650
|
+
| disabled | 是否禁用 | boolean | false | |
|
|
651
|
+
| loading | 加载中的开关 | boolean | false | |
|
|
652
|
+
| size | 开关大小，可选值： | string | default | |
|
|
653
|
+
| unCheckedChildren | 非选中时的内容 | ReactNode | - | |
|
|
654
|
+
| value | checked | boolean | - | 5.12.0 |
|
|
655
|
+
| onChange | 变化时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
656
|
+
| onClick | 点击时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
657
|
+
|
|
658
|
+
|
|
659
|
+
## 方法
|
|
660
|
+
|
|
661
|
+
| 名称 | 描述 |
|
|
662
|
+
|--------|--------|
|
|
663
|
+
| blur() | 移除焦点 |
|
|
664
|
+
| focus() | 获取焦点 |
|
|
665
|
+
|
|
666
|
+
|
|
667
|
+
|
|
668
|
+
|
|
627
669
|
<DemoTitle title="Statistic" desc="展示统计数值">
|
|
628
670
|
#### API
|
|
629
671
|
|
|
@@ -684,47 +726,6 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
684
726
|
|
|
685
727
|
|
|
686
728
|
|
|
687
|
-
<DemoTitle title="Switch" desc="使用开关切换两种状态之间。">
|
|
688
|
-
#### API
|
|
689
|
-
|
|
690
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
691
|
-
|--------|--------|--------|--------|
|
|
692
|
-
| label | Switch后的内容 | ReactNode | |
|
|
693
|
-
|
|
694
|
-
<AntdApiRef url="https://ant.design/components/switch-cn/#api"></AntdApiRef>
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
## antd API
|
|
698
|
-
|
|
699
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
700
|
-
|
|
701
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
702
|
-
|--------|--------|--------|--------|--------|
|
|
703
|
-
| autoFocus | 组件自动获取焦点 | boolean | false | |
|
|
704
|
-
| checked | 指定当前是否选中 | boolean | false | |
|
|
705
|
-
| checkedChildren | 选中时的内容 | ReactNode | - | |
|
|
706
|
-
| className | Switch 器类名 | string | - | |
|
|
707
|
-
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
708
|
-
| defaultValue | defaultChecked | boolean | - | 5.12.0 |
|
|
709
|
-
| disabled | 是否禁用 | boolean | false | |
|
|
710
|
-
| loading | 加载中的开关 | boolean | false | |
|
|
711
|
-
| size | 开关大小，可选值： | string | default | |
|
|
712
|
-
| unCheckedChildren | 非选中时的内容 | ReactNode | - | |
|
|
713
|
-
| value | checked | boolean | - | 5.12.0 |
|
|
714
|
-
| onChange | 变化时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
715
|
-
| onClick | 点击时的回调函数 | function(checked: boolean, event: Event) | - | |
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
## 方法
|
|
719
|
-
|
|
720
|
-
| 名称 | 描述 |
|
|
721
|
-
|--------|--------|
|
|
722
|
-
| blur() | 移除焦点 |
|
|
723
|
-
| focus() | 获取焦点 |
|
|
724
|
-
|
|
725
|
-
|
|
726
|
-
|
|
727
|
-
|
|
728
729
|
<DemoTitle title="Steps" desc="引导用户按照流程完成任务的导航条。">
|
|
729
730
|
#### API
|
|
730
731
|
|
|
@@ -784,70 +785,6 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
784
785
|
|
|
785
786
|
|
|
786
787
|
|
|
787
|
-
<DemoTitle title="Slider" desc="滑动型输入器，展示当前值和可选范围。">
|
|
788
|
-
#### API
|
|
789
|
-
|
|
790
|
-
<AntdApiRef url="https://ant.design/components/slider-cn/#api"></AntdApiRef>
|
|
791
|
-
|
|
792
|
-
|
|
793
|
-
## antd API
|
|
794
|
-
|
|
795
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
796
|
-
|
|
797
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
798
|
-
|--------|--------|--------|--------|--------|
|
|
799
|
-
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
800
|
-
| classNames | 语义化结构 className | | - | 5.10.0 |
|
|
801
|
-
| defaultValue | 设置初始取值。当 | number \| [number, number] | 0 \| [0, 0] | |
|
|
802
|
-
| disabled | 值为 true 时，滑块为禁用状态 | boolean | false | |
|
|
803
|
-
| keyboard | 支持使用键盘操作 handler | boolean | true | 5.2.0+ |
|
|
804
|
-
| dots | 是否只能拖拽到刻度上 | boolean | false | |
|
|
805
|
-
| included | marks | boolean | true | |
|
|
806
|
-
| marks | 刻度标记，key 的类型必须为 | object | { number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } } | |
|
|
807
|
-
| max | 最大值 | number | 100 | |
|
|
808
|
-
| min | 最小值 | number | 0 | |
|
|
809
|
-
| range | 双滑块模式 | boolean \| | false | |
|
|
810
|
-
| reverse | 反向坐标轴 | boolean | false | |
|
|
811
|
-
| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 | number \| null | 1 | |
|
|
812
|
-
| styles | 语义化结构 styles | | - | 5.10.0 |
|
|
813
|
-
| tooltip | 设置 Tooltip 相关属性 | | - | 4.23.0 |
|
|
814
|
-
| value | 设置当前取值。当 | number \| [number, number] | - | |
|
|
815
|
-
| vertical | 值为 true 时，Slider 为垂直方向 | boolean | false | |
|
|
816
|
-
| onChangeComplete | 与 | (value) => void | - | |
|
|
817
|
-
| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | (value) => void | - | |
|
|
818
|
-
|
|
819
|
-
|
|
820
|
-
### range
|
|
821
|
-
|
|
822
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
823
|
-
|--------|--------|--------|--------|--------|
|
|
824
|
-
| draggableTrack | 范围刻度是否可被拖拽 | boolean | false | |
|
|
825
|
-
| editable | 启动动态增减节点，不能和 | boolean | false | 5.20.0 |
|
|
826
|
-
| minCount | 配置 | number | 0 | 5.20.0 |
|
|
827
|
-
| maxCount | 配置 | number | - | 5.20.0 |
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
### tooltip
|
|
831
|
-
|
|
832
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
833
|
-
|--------|--------|--------|--------|--------|
|
|
834
|
-
| autoAdjustOverflow | 是否自动调整弹出位置 | boolean | true | 5.8.0 |
|
|
835
|
-
| open | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时 | boolean | - | 4.23.0 |
|
|
836
|
-
| placement | 设置 Tooltip 展示位置。参考 | string | - | 4.23.0 |
|
|
837
|
-
| getPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
|
|
838
|
-
| formatter | Slider 会把当前值传给 | value => ReactNode \| null | IDENTITY | 4.23.0 |
|
|
839
|
-
|
|
840
|
-
|
|
841
|
-
## 方法
|
|
842
|
-
|
|
843
|
-
| 名称 | 描述 | 版本 |
|
|
844
|
-
|--------|--------|--------|
|
|
845
|
-
| blur() | 移除焦点 | |
|
|
846
|
-
| focus() | 获取焦点 | |
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
851
788
|
<DemoTitle title="Skeleton" desc="在内容加载时提供占位图形展示。">
|
|
852
789
|
## antd API
|
|
853
790
|
|
|
@@ -909,8 +846,89 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
909
846
|
|
|
910
847
|
|
|
911
848
|
|
|
912
|
-
<DemoTitle title="
|
|
913
|
-
|
|
849
|
+
<DemoTitle title="Spinner" desc="指示页面或区块的加载中状态">
|
|
850
|
+
#### API
|
|
851
|
+
|
|
852
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
853
|
+
|--------|--------|--------|--------|
|
|
854
|
+
| tip | indicator下方的tip | React.ReactNode | - |
|
|
855
|
+
| indicator | 自定义indicator，用于展示progress的百分比和加载文案 | React.ReactNode | - |
|
|
856
|
+
| children | 被spinner包裹的子元素 | React.ReactNode | - |
|
|
857
|
+
| style | spinner最外层的样式 | React.CSSProperties | - |
|
|
858
|
+
| className | spinner的类名 | string | - |
|
|
859
|
+
| percent | 进度条的百分比 | number | - |
|
|
860
|
+
| spinning | 是否为加载中状态 | boolean | false |
|
|
861
|
+
| showProgress | 是否显示进度条，如果为true，不需要手动在children中添加Progress组件 | boolean | false |
|
|
862
|
+
|
|
863
|
+
|
|
864
|
+
|
|
865
|
+
|
|
866
|
+
<DemoTitle title="Slider" desc="滑动型输入器，展示当前值和可选范围。">
|
|
867
|
+
#### API
|
|
868
|
+
|
|
869
|
+
<AntdApiRef url="https://ant.design/components/slider-cn/#api"></AntdApiRef>
|
|
870
|
+
|
|
871
|
+
|
|
872
|
+
## antd API
|
|
873
|
+
|
|
874
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
875
|
+
|
|
876
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
877
|
+
|--------|--------|--------|--------|--------|
|
|
878
|
+
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
879
|
+
| classNames | 语义化结构 className | | - | 5.10.0 |
|
|
880
|
+
| defaultValue | 设置初始取值。当 | number \| [number, number] | 0 \| [0, 0] | |
|
|
881
|
+
| disabled | 值为 true 时，滑块为禁用状态 | boolean | false | |
|
|
882
|
+
| keyboard | 支持使用键盘操作 handler | boolean | true | 5.2.0+ |
|
|
883
|
+
| dots | 是否只能拖拽到刻度上 | boolean | false | |
|
|
884
|
+
| included | marks | boolean | true | |
|
|
885
|
+
| marks | 刻度标记，key 的类型必须为 | object | { number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } } | |
|
|
886
|
+
| max | 最大值 | number | 100 | |
|
|
887
|
+
| min | 最小值 | number | 0 | |
|
|
888
|
+
| range | 双滑块模式 | boolean \| | false | |
|
|
889
|
+
| reverse | 反向坐标轴 | boolean | false | |
|
|
890
|
+
| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 | number \| null | 1 | |
|
|
891
|
+
| styles | 语义化结构 styles | | - | 5.10.0 |
|
|
892
|
+
| tooltip | 设置 Tooltip 相关属性 | | - | 4.23.0 |
|
|
893
|
+
| value | 设置当前取值。当 | number \| [number, number] | - | |
|
|
894
|
+
| vertical | 值为 true 时，Slider 为垂直方向 | boolean | false | |
|
|
895
|
+
| onChangeComplete | 与 | (value) => void | - | |
|
|
896
|
+
| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | (value) => void | - | |
|
|
897
|
+
|
|
898
|
+
|
|
899
|
+
### range
|
|
900
|
+
|
|
901
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
902
|
+
|--------|--------|--------|--------|--------|
|
|
903
|
+
| draggableTrack | 范围刻度是否可被拖拽 | boolean | false | |
|
|
904
|
+
| editable | 启动动态增减节点，不能和 | boolean | false | 5.20.0 |
|
|
905
|
+
| minCount | 配置 | number | 0 | 5.20.0 |
|
|
906
|
+
| maxCount | 配置 | number | - | 5.20.0 |
|
|
907
|
+
|
|
908
|
+
|
|
909
|
+
### tooltip
|
|
910
|
+
|
|
911
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
912
|
+
|--------|--------|--------|--------|--------|
|
|
913
|
+
| autoAdjustOverflow | 是否自动调整弹出位置 | boolean | true | 5.8.0 |
|
|
914
|
+
| open | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时 | boolean | - | 4.23.0 |
|
|
915
|
+
| placement | 设置 Tooltip 展示位置。参考 | string | - | 4.23.0 |
|
|
916
|
+
| getPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
|
|
917
|
+
| formatter | Slider 会把当前值传给 | value => ReactNode \| null | IDENTITY | 4.23.0 |
|
|
918
|
+
|
|
919
|
+
|
|
920
|
+
## 方法
|
|
921
|
+
|
|
922
|
+
| 名称 | 描述 | 版本 |
|
|
923
|
+
|--------|--------|--------|
|
|
924
|
+
| blur() | 移除焦点 | |
|
|
925
|
+
| focus() | 获取焦点 | |
|
|
926
|
+
|
|
927
|
+
|
|
928
|
+
|
|
929
|
+
|
|
930
|
+
<DemoTitle title="Select" desc="下拉选择器">
|
|
931
|
+
## antd API
|
|
914
932
|
|
|
915
933
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
916
934
|
|
|
@@ -1007,19 +1025,14 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1007
1025
|
|
|
1008
1026
|
|
|
1009
1027
|
|
|
1010
|
-
<DemoTitle title="
|
|
1011
|
-
|
|
1028
|
+
<DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。">
|
|
1029
|
+
## API
|
|
1012
1030
|
|
|
1013
1031
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1014
1032
|
|--------|--------|--------|--------|
|
|
1015
|
-
|
|
|
1016
|
-
|
|
1017
|
-
|
|
1018
|
-
| style | spinner最外层的样式 | React.CSSProperties | - |
|
|
1019
|
-
| className | spinner的类名 | string | - |
|
|
1020
|
-
| percent | 进度条的百分比 | number | - |
|
|
1021
|
-
| spinning | 是否为加载中状态 | boolean | false |
|
|
1022
|
-
| showProgress | 是否显示进度条，如果为true，不需要手动在children中添加Progress组件 | boolean | false |
|
|
1033
|
+
| texture | 是否显示纹理 | boolean | false |
|
|
1034
|
+
|
|
1035
|
+
|
|
1023
1036
|
|
|
1024
1037
|
|
|
1025
1038
|
|
|
@@ -1099,18 +1112,6 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1099
1112
|
|
|
1100
1113
|
|
|
1101
1114
|
|
|
1102
|
-
<DemoTitle title="Result" desc="为操作结果提供反馈信息的展示。">
|
|
1103
|
-
## API
|
|
1104
|
-
|
|
1105
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1106
|
-
|--------|--------|--------|--------|
|
|
1107
|
-
| texture | 是否显示纹理 | boolean | false |
|
|
1108
|
-
|
|
1109
|
-
|
|
1110
|
-
|
|
1111
|
-
|
|
1112
|
-
|
|
1113
|
-
|
|
1114
1115
|
<DemoTitle title="Radio" desc="用于在多个备选项中选中单个状态。">
|
|
1115
1116
|
#### API
|
|
1116
1117
|
|
|
@@ -1179,6 +1180,67 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1179
1180
|
|
|
1180
1181
|
|
|
1181
1182
|
|
|
1183
|
+
<DemoTitle title="MdEditor" desc="提示词编辑器，可以高亮 Markdown 的语法，支持自定义槽位变量的插入">
|
|
1184
|
+
#### API
|
|
1185
|
+
|
|
1186
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1187
|
+
|--------|--------|--------|--------|
|
|
1188
|
+
| maxLength | 可以输入内容的最大长度 | number | |
|
|
1189
|
+
| value | 输入的内容 | string | (必填) |
|
|
1190
|
+
| className | 输入内容的类名 | string | |
|
|
1191
|
+
| onChange | 输入内容的回调 | (value: string) => void | |
|
|
1192
|
+
| variables | 可以插入的变量列表 | Array | |
|
|
1193
|
+
| onCreate | 新增变量的触发回调 | () => void | |
|
|
1194
|
+
| createBtnText | 新增变量的按钮文本 | string | |
|
|
1195
|
+
| tipsText | 提示文本，传入 false 时隐藏提示 | string \| React.ReactNode \| false | |
|
|
1196
|
+
|
|
1197
|
+
|
|
1198
|
+
|
|
1199
|
+
|
|
1200
|
+
<DemoTitle title="Popover" desc="点击/鼠标移入元素，弹出气泡式的卡片浮层">
|
|
1201
|
+
#### API
|
|
1202
|
+
|
|
1203
|
+
<AntdApiRef url="https://ant.design/components/popover-cn/#api"></AntdApiRef>
|
|
1204
|
+
|
|
1205
|
+
|
|
1206
|
+
## antd API
|
|
1207
|
+
|
|
1208
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1209
|
+
|
|
1210
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1211
|
+
|--------|--------|--------|--------|--------|
|
|
1212
|
+
| content | 卡片内容 | ReactNode \| () => ReactNode | - | |
|
|
1213
|
+
| title | 卡片标题 | ReactNode \| () => ReactNode | - | |
|
|
1214
|
+
|
|
1215
|
+
|
|
1216
|
+
<!-- 共同的 API -->
|
|
1217
|
+
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
1218
|
+
|
|
1219
|
+
<!-- prettier-ignore -->
|
|
1220
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1221
|
+
|--------|--------|--------|--------|--------|
|
|
1222
|
+
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
1223
|
+
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
1224
|
+
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
1225
|
+
| color | 背景颜色 | string | - | 4.3.0 |
|
|
1226
|
+
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
1227
|
+
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
1228
|
+
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
1229
|
+
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
1230
|
+
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
1231
|
+
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
1232
|
+
| placement | 气泡框位置，可选 | string | top | |
|
|
1233
|
+
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
1234
|
+
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
1235
|
+
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
1236
|
+
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
1237
|
+
|
|
1238
|
+
## 注意
|
|
1239
|
+
|
|
1240
|
+
请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
|
|
1241
|
+
|
|
1242
|
+
|
|
1243
|
+
|
|
1182
1244
|
<DemoTitle title="Progress" desc="用于指示任务的完成进度">
|
|
1183
1245
|
## antd API
|
|
1184
1246
|
|
|
@@ -1231,175 +1293,57 @@ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/ser
|
|
|
1231
1293
|
|
|
1232
1294
|
|
|
1233
1295
|
|
|
1234
|
-
<DemoTitle title="
|
|
1235
|
-
|
|
1296
|
+
<DemoTitle title="Pagination" desc="分页器用于分隔长列表，每次只加载一个页面。">
|
|
1297
|
+
## API
|
|
1298
|
+
|
|
1299
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1300
|
+
|--------|--------|--------|--------|
|
|
1301
|
+
| hideSwitchButton | 是否展示上一页/下一页的切换按钮 | boolean | false |
|
|
1236
1302
|
|
|
1237
|
-
|
|
1303
|
+
|
|
1304
|
+
<AntdApiRef url="https://ant.design/components/pagination-cn/#api"></AntdApiRef>
|
|
1238
1305
|
|
|
1239
1306
|
|
|
1240
1307
|
## antd API
|
|
1241
1308
|
|
|
1242
1309
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1243
1310
|
|
|
1244
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1245
|
-
|--------|--------|--------|--------|--------|
|
|
1246
|
-
| content | 卡片内容 | ReactNode \| () => ReactNode | - | |
|
|
1247
|
-
| title | 卡片标题 | ReactNode \| () => ReactNode | - | |
|
|
1248
1311
|
|
|
1312
|
+
```jsx
|
|
1313
|
+
<Pagination onChange={onChange} total={50} />
|
|
1314
|
+
```
|
|
1249
1315
|
|
|
1250
|
-
<!-- 共同的 API -->
|
|
1251
|
-
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
1252
1316
|
|
|
1253
|
-
<!-- prettier-ignore -->
|
|
1254
1317
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1255
1318
|
|--------|--------|--------|--------|--------|
|
|
1256
|
-
| align |
|
|
1257
|
-
|
|
|
1258
|
-
|
|
|
1259
|
-
|
|
|
1260
|
-
|
|
|
1261
|
-
|
|
|
1262
|
-
|
|
|
1263
|
-
|
|
|
1264
|
-
|
|
|
1265
|
-
|
|
|
1266
|
-
|
|
|
1267
|
-
|
|
|
1268
|
-
|
|
|
1269
|
-
|
|
|
1270
|
-
|
|
|
1271
|
-
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
|
|
1276
|
-
|
|
1277
|
-
|
|
1278
|
-
<DemoTitle title="MdEditor" desc="提示词编辑器，可以高亮 Markdown 的语法，支持自定义槽位变量的插入">
|
|
1279
|
-
#### API
|
|
1280
|
-
|
|
1281
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1282
|
-
|--------|--------|--------|--------|
|
|
1283
|
-
| maxLength | 可以输入内容的最大长度 | number | |
|
|
1284
|
-
| value | 输入的内容 | string | (必填) |
|
|
1285
|
-
| className | 输入内容的类名 | string | |
|
|
1286
|
-
| onChange | 输入内容的回调 | (value: string) => void | |
|
|
1287
|
-
| variables | 可以插入的变量列表 | Array | |
|
|
1288
|
-
| onCreate | 新增变量的触发回调 | () => void | |
|
|
1289
|
-
| createBtnText | 新增变量的按钮文本 | string | |
|
|
1290
|
-
| tipsText | 提示文本，传入 false 时隐藏提示 | string \| React.ReactNode \| false | |
|
|
1319
|
+
| align | 对齐方式 | start \| center \| end | - | 5.19.0 |
|
|
1320
|
+
| current | 当前页数 | number | - | |
|
|
1321
|
+
| defaultCurrent | 默认的当前页数 | number | 1 | |
|
|
1322
|
+
| defaultPageSize | 默认的每页条数 | number | 10 | |
|
|
1323
|
+
| disabled | 禁用分页 | boolean | - | |
|
|
1324
|
+
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | |
|
|
1325
|
+
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | |
|
|
1326
|
+
| pageSize | 每页条数 | number | - | |
|
|
1327
|
+
| pageSizeOptions | 指定每页可以显示多少条 | number[] | [ | |
|
|
1328
|
+
| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | |
|
|
1329
|
+
| showLessItems | 是否显示较少页面内容 | boolean | false | |
|
|
1330
|
+
| showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false | |
|
|
1331
|
+
| showSizeChanger | 是否展示 | boolean \| | - | SelectProps: 5.21.0 |
|
|
1332
|
+
| showTitle | 是否显示原生 tooltip 页码提示 | boolean | true | |
|
|
1333
|
+
| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | |
|
|
1334
|
+
| simple | 当添加该属性时，显示为简单分页 | boolean \| { readOnly?: boolean } | - | |
|
|
1335
|
+
| size | 当为 | default | default | |
|
|
1336
|
+
| total | 数据总数 | number | 0 | |
|
|
1337
|
+
| onChange | 页码或 | function(page, pageSize) | - | |
|
|
1338
|
+
| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | |
|
|
1291
1339
|
|
|
1292
1340
|
|
|
1293
1341
|
|
|
1294
1342
|
|
|
1295
|
-
<DemoTitle title="
|
|
1343
|
+
<DemoTitle title="Notification" desc="用于指示任务的完成进度">
|
|
1296
1344
|
#### API
|
|
1297
1345
|
|
|
1298
|
-
|
|
1299
|
-
|--------|--------|--------|--------|
|
|
1300
|
-
| type | 类型 | 'info' \| 'warning' \| 'error' \| 'success' \| 'confirm' | 'confirm' |
|
|
1301
|
-
|
|
1302
|
-
|
|
1303
|
-
<AntdApiRef url="https://ant.design/components/popconfirm-cn/#api"></AntdApiRef>
|
|
1304
|
-
|
|
1305
|
-
|
|
1306
|
-
## antd API
|
|
1307
|
-
|
|
1308
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1309
|
-
|
|
1310
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1311
|
-
|--------|--------|--------|--------|--------|
|
|
1312
|
-
| cancelButtonProps | cancel 按钮 props | | - | |
|
|
1313
|
-
| cancelText | 取消按钮文字 | string | 取消 | |
|
|
1314
|
-
| disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false | |
|
|
1315
|
-
| icon | 自定义弹出气泡 Icon 图标 | ReactNode | | |
|
|
1316
|
-
| okButtonProps | ok 按钮 props | | - | |
|
|
1317
|
-
| okText | 确认按钮文字 | string | 确定 | |
|
|
1318
|
-
| okType | 确认按钮类型 | string | primary | |
|
|
1319
|
-
| showCancel | 是否显示取消按钮 | boolean | true | 4.18.0 |
|
|
1320
|
-
| title | 确认框标题 | ReactNode \| () => ReactNode | - | |
|
|
1321
|
-
| description | 确认内容的详细描述 | ReactNode \| () => ReactNode | - | 5.1.0 |
|
|
1322
|
-
| onCancel | 点击取消的回调 | function(e) | - | |
|
|
1323
|
-
| onConfirm | 点击确认的回调 | function(e) | - | |
|
|
1324
|
-
| onPopupClick | 弹出气泡点击事件 | function(e) | - | 5.5.0 |
|
|
1325
|
-
|
|
1326
|
-
|
|
1327
|
-
<!-- 共同的 API -->
|
|
1328
|
-
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
1329
|
-
|
|
1330
|
-
<!-- prettier-ignore -->
|
|
1331
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1332
|
-
|--------|--------|--------|--------|--------|
|
|
1333
|
-
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
1334
|
-
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
1335
|
-
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
1336
|
-
| color | 背景颜色 | string | - | 4.3.0 |
|
|
1337
|
-
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
1338
|
-
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
1339
|
-
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
1340
|
-
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
1341
|
-
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
1342
|
-
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
1343
|
-
| placement | 气泡框位置，可选 | string | top | |
|
|
1344
|
-
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
1345
|
-
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
1346
|
-
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
1347
|
-
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
|
|
1352
|
-
<DemoTitle title="Pagination" desc="分页器用于分隔长列表，每次只加载一个页面。">
|
|
1353
|
-
## API
|
|
1354
|
-
|
|
1355
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1356
|
-
|--------|--------|--------|--------|
|
|
1357
|
-
| hideSwitchButton | 是否展示上一页/下一页的切换按钮 | boolean | false |
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
<AntdApiRef url="https://ant.design/components/pagination-cn/#api"></AntdApiRef>
|
|
1361
|
-
|
|
1362
|
-
|
|
1363
|
-
## antd API
|
|
1364
|
-
|
|
1365
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
```jsx
|
|
1369
|
-
<Pagination onChange={onChange} total={50} />
|
|
1370
|
-
```
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1374
|
-
|--------|--------|--------|--------|--------|
|
|
1375
|
-
| align | 对齐方式 | start \| center \| end | - | 5.19.0 |
|
|
1376
|
-
| current | 当前页数 | number | - | |
|
|
1377
|
-
| defaultCurrent | 默认的当前页数 | number | 1 | |
|
|
1378
|
-
| defaultPageSize | 默认的每页条数 | number | 10 | |
|
|
1379
|
-
| disabled | 禁用分页 | boolean | - | |
|
|
1380
|
-
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | |
|
|
1381
|
-
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | |
|
|
1382
|
-
| pageSize | 每页条数 | number | - | |
|
|
1383
|
-
| pageSizeOptions | 指定每页可以显示多少条 | number[] | [ | |
|
|
1384
|
-
| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | |
|
|
1385
|
-
| showLessItems | 是否显示较少页面内容 | boolean | false | |
|
|
1386
|
-
| showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false | |
|
|
1387
|
-
| showSizeChanger | 是否展示 | boolean \| | - | SelectProps: 5.21.0 |
|
|
1388
|
-
| showTitle | 是否显示原生 tooltip 页码提示 | boolean | true | |
|
|
1389
|
-
| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | |
|
|
1390
|
-
| simple | 当添加该属性时，显示为简单分页 | boolean \| { readOnly?: boolean } | - | |
|
|
1391
|
-
| size | 当为 | default | default | |
|
|
1392
|
-
| total | 数据总数 | number | 0 | |
|
|
1393
|
-
| onChange | 页码或 | function(page, pageSize) | - | |
|
|
1394
|
-
| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | |
|
|
1395
|
-
|
|
1396
|
-
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
<DemoTitle title="Notification" desc="用于指示任务的完成进度">
|
|
1400
|
-
#### API
|
|
1401
|
-
|
|
1402
|
-
<AntdApiRef url="https://ant.design/components/notification-cn/#api"></AntdApiRef>
|
|
1346
|
+
<AntdApiRef url="https://ant.design/components/notification-cn/#api"></AntdApiRef>
|
|
1403
1347
|
|
|
1404
1348
|
|
|
1405
1349
|
## antd API
|
|
@@ -1492,102 +1436,59 @@ notification.config({
|
|
|
1492
1436
|
|
|
1493
1437
|
|
|
1494
1438
|
|
|
1495
|
-
<DemoTitle title="
|
|
1439
|
+
<DemoTitle title="Popconfirm" desc="点击元素，弹出气泡式的确认框。">
|
|
1496
1440
|
#### API
|
|
1497
1441
|
|
|
1498
1442
|
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1499
1443
|
|--------|--------|--------|--------|
|
|
1500
|
-
|
|
|
1444
|
+
| type | 类型 | 'info' \| 'warning' \| 'error' \| 'success' \| 'confirm' | 'confirm' |
|
|
1501
1445
|
|
|
1502
|
-
|
|
1446
|
+
|
|
1447
|
+
<AntdApiRef url="https://ant.design/components/popconfirm-cn/#api"></AntdApiRef>
|
|
1503
1448
|
|
|
1504
1449
|
|
|
1505
1450
|
## antd API
|
|
1506
1451
|
|
|
1507
1452
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1508
1453
|
|
|
1509
|
-
|
|
1510
|
-
|
|
1511
|
-
|
|
1512
|
-
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
-
|
|
1516
|
-
|
|
1517
|
-
|
|
1518
|
-
|
|
|
1519
|
-
|
|
1520
|
-
|
|
|
1521
|
-
|
|
|
1522
|
-
|
|
|
1523
|
-
|
|
1524
|
-
|
|
1525
|
-
组件同时提供 promise 接口。
|
|
1526
|
-
|
|
1527
|
-
|
|
1528
|
-
- `message[level](content, [duration]).then(afterClose)`
|
|
1529
|
-
- `message[level](content, [duration], onClose).then(afterClose)`
|
|
1530
|
-
|
|
1531
|
-
其中 `message[level]` 是组件已经提供的静态方法。`then` 接口返回值是 Promise。
|
|
1532
|
-
|
|
1533
|
-
也可以对象的形式传递参数：
|
|
1534
|
-
|
|
1535
|
-
|
|
1536
|
-
- `message.open(config)`
|
|
1537
|
-
- `message.success(config)`
|
|
1538
|
-
- `message.error(config)`
|
|
1539
|
-
- `message.info(config)`
|
|
1540
|
-
- `message.warning(config)`
|
|
1541
|
-
- `message.loading(config)`
|
|
1542
|
-
|
|
1543
|
-
`config` 对象属性如下：
|
|
1544
|
-
|
|
1545
|
-
| 参数 | 说明 | 类型 | 默认值 |
|
|
1546
|
-
|--------|--------|--------|--------|
|
|
1547
|
-
| className | 自定义 CSS class | string | - |
|
|
1548
|
-
| content | 提示内容 | ReactNode | - |
|
|
1549
|
-
| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number | 3 |
|
|
1550
|
-
| icon | 自定义图标 | ReactNode | - |
|
|
1551
|
-
| key | 当前提示的唯一标志 | string \| number | - |
|
|
1552
|
-
| style | 自定义内联样式 | | - |
|
|
1553
|
-
| onClick | 点击 message 时触发的回调函数 | function | - |
|
|
1554
|
-
| onClose | 关闭时触发的回调函数 | function | - |
|
|
1555
|
-
|
|
1556
|
-
|
|
1557
|
-
### 全局方法
|
|
1558
|
-
|
|
1559
|
-
还提供了全局配置和全局销毁方法：
|
|
1560
|
-
|
|
1561
|
-
|
|
1562
|
-
- `message.config(options)`
|
|
1563
|
-
- `message.destroy()`
|
|
1564
|
-
|
|
1565
|
-
也可通过 `message.destroy(key)` 来关闭一条消息。
|
|
1566
|
-
|
|
1567
|
-
#### message.config
|
|
1568
|
-
|
|
1569
|
-
当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)当你想单独使用，可通过如下设置开启 RTL 模式。
|
|
1570
|
-
|
|
1454
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1455
|
+
|--------|--------|--------|--------|--------|
|
|
1456
|
+
| cancelButtonProps | cancel 按钮 props | | - | |
|
|
1457
|
+
| cancelText | 取消按钮文字 | string | 取消 | |
|
|
1458
|
+
| disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false | |
|
|
1459
|
+
| icon | 自定义弹出气泡 Icon 图标 | ReactNode | | |
|
|
1460
|
+
| okButtonProps | ok 按钮 props | | - | |
|
|
1461
|
+
| okText | 确认按钮文字 | string | 确定 | |
|
|
1462
|
+
| okType | 确认按钮类型 | string | primary | |
|
|
1463
|
+
| showCancel | 是否显示取消按钮 | boolean | true | 4.18.0 |
|
|
1464
|
+
| title | 确认框标题 | ReactNode \| () => ReactNode | - | |
|
|
1465
|
+
| description | 确认内容的详细描述 | ReactNode \| () => ReactNode | - | 5.1.0 |
|
|
1466
|
+
| onCancel | 点击取消的回调 | function(e) | - | |
|
|
1467
|
+
| onConfirm | 点击确认的回调 | function(e) | - | |
|
|
1468
|
+
| onPopupClick | 弹出气泡点击事件 | function(e) | - | 5.5.0 |
|
|
1571
1469
|
|
|
1572
|
-
```js
|
|
1573
|
-
message.config({
|
|
1574
|
-
top: 100,
|
|
1575
|
-
duration: 2,
|
|
1576
|
-
maxCount: 3,
|
|
1577
|
-
rtl: true,
|
|
1578
|
-
prefixCls: 'my-message',
|
|
1579
|
-
});
|
|
1580
|
-
```
|
|
1581
1470
|
|
|
1471
|
+
<!-- 共同的 API -->
|
|
1472
|
+
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
|
|
1582
1473
|
|
|
1474
|
+
<!-- prettier-ignore -->
|
|
1583
1475
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1584
1476
|
|--------|--------|--------|--------|--------|
|
|
1585
|
-
|
|
|
1586
|
-
|
|
|
1587
|
-
|
|
|
1588
|
-
|
|
|
1589
|
-
|
|
|
1590
|
-
|
|
|
1477
|
+
| align | 该值将合并到 placement 的配置中，设置参考 | object | - | |
|
|
1478
|
+
| arrow | 修改箭头的显示状态以及修改箭头是否指向目标元素中心 | boolean \| { pointAtCenter: boolean } | true | 5.2.0 |
|
|
1479
|
+
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
|
1480
|
+
| color | 背景颜色 | string | - | 4.3.0 |
|
|
1481
|
+
| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
|
|
1482
|
+
| destroyOnHidden | 关闭后是否销毁 dom | boolean | false | 5.25.0 |
|
|
1483
|
+
| fresh | 默认情况下，Tooltip 在关闭时会缓存内容。设置该属性后会始终保持更新 | boolean | false | 5.10.0 |
|
|
1484
|
+
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
1485
|
+
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
|
|
1486
|
+
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
|
|
1487
|
+
| placement | 气泡框位置，可选 | string | top | |
|
|
1488
|
+
| trigger | 触发行为，可选 | string \| string[] | hover | |
|
|
1489
|
+
| open | 用于手动控制浮层显隐，小于 4.23.0 使用 | boolean | false | 4.23.0 |
|
|
1490
|
+
| zIndex | 设置 Tooltip 的 | number | - | |
|
|
1491
|
+
| onOpenChange | 显示隐藏的回调 | (open: boolean) => void | - | 4.23.0 |
|
|
1591
1492
|
|
|
1592
1493
|
|
|
1593
1494
|
|
|
@@ -1815,216 +1716,103 @@ const confirmed = await modal.confirm({ ... });
|
|
|
1815
1716
|
|
|
1816
1717
|
|
|
1817
1718
|
|
|
1818
|
-
<DemoTitle title="
|
|
1719
|
+
<DemoTitle title="Message" desc="一条简洁且临时显示的消息，为操作提供全局反馈">
|
|
1819
1720
|
#### API
|
|
1820
1721
|
|
|
1821
|
-
|
|
1722
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1723
|
+
|--------|--------|--------|--------|
|
|
1724
|
+
| conent | 显示的内容 | string | "" |
|
|
1725
|
+
|
|
1726
|
+
<AntdApiRef url="https://ant.design/components/message-cn/#api"></AntdApiRef>
|
|
1822
1727
|
|
|
1823
1728
|
|
|
1824
1729
|
## antd API
|
|
1825
1730
|
|
|
1826
1731
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1827
1732
|
|
|
1828
|
-
|
|
1733
|
+
组件提供了一些静态方法，使用方式和参数如下：
|
|
1829
1734
|
|
|
1830
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1831
|
-
|--------|--------|--------|--------|--------|
|
|
1832
|
-
| alt | 图像描述 | string | - | 4.6.0 |
|
|
1833
|
-
| fallback | 加载失败容错地址 | string | - | 4.6.0 |
|
|
1834
|
-
| height | 图像高度 | string \| number | - | 4.6.0 |
|
|
1835
|
-
| placeholder | 加载占位，为 | ReactNode | - | 4.6.0 |
|
|
1836
|
-
| preview | 预览参数，为 | boolean \| | true | 4.6.0 |
|
|
1837
|
-
| src | 图片地址 | string | - | 4.6.0 |
|
|
1838
|
-
| width | 图像宽度 | string \| number | - | 4.6.0 |
|
|
1839
|
-
| onError | 加载错误回调 | (event: Event) => void | - | 4.12.0 |
|
|
1840
1735
|
|
|
1736
|
+
- `message.success(content, [duration], onClose)`
|
|
1737
|
+
- `message.error(content, [duration], onClose)`
|
|
1738
|
+
- `message.info(content, [duration], onClose)`
|
|
1739
|
+
- `message.warning(content, [duration], onClose)`
|
|
1740
|
+
- `message.loading(content, [duration], onClose)`
|
|
1841
1741
|
|
|
1842
|
-
|
|
1742
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
1743
|
+
|--------|--------|--------|--------|
|
|
1744
|
+
| content | 提示内容 | ReactNode \| config | - |
|
|
1745
|
+
| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number | 3 |
|
|
1746
|
+
| onClose | 关闭时触发的回调函数 | function | - |
|
|
1843
1747
|
|
|
1844
|
-
### PreviewType
|
|
1845
1748
|
|
|
1846
|
-
|
|
1847
|
-
|--------|--------|--------|--------|--------|
|
|
1848
|
-
| visible | 是否显示 | boolean | - | - |
|
|
1849
|
-
| src | 自定义预览 src | string | - | 4.10.0 |
|
|
1850
|
-
| getContainer | 指定预览挂载的节点，但依旧为全屏展示，false 为挂载在当前位置 | string \| HTMLElement \| (() => HTMLElement) \| false | - | 4.8.0 |
|
|
1851
|
-
| movable | 是否可移动 | boolean | true | 5.8.0 |
|
|
1852
|
-
| mask | 缩略图遮罩 | ReactNode | - | 4.9.0 |
|
|
1853
|
-
| maskClassName | 缩略图遮罩类名 | string | - | 4.11.0 |
|
|
1854
|
-
| rootClassName | 预览图的根 DOM 类名 | string | - | 5.4.0 |
|
|
1855
|
-
| scaleStep | 1 + scaleStep | number | 0.5 | - |
|
|
1856
|
-
| minScale | 最小缩放倍数 | number | 1 | 5.7.0 |
|
|
1857
|
-
| maxScale | 最大放大倍数 | number | 50 | 5.7.0 |
|
|
1858
|
-
| closeIcon | 自定义关闭 Icon | React.ReactNode | - | 5.7.0 |
|
|
1859
|
-
| forceRender | 强制渲染预览图 | boolean | - | - |
|
|
1860
|
-
| toolbarRender | 自定义工具栏 | (originalNode: React.ReactElement, info: Omit< | - | 5.7.0, |
|
|
1861
|
-
| imageRender | 自定义预览内容 | (originalNode: React.ReactElement, info: { transform: | - | 5.7.0, image: 5.18.0 |
|
|
1862
|
-
| destroyOnHidden | 关闭预览时销毁子元素 | boolean | false | 5.25.0 |
|
|
1863
|
-
| onTransform | 预览图 transform 变化的回调 | { transform: | - | 5.7.0 |
|
|
1864
|
-
| onVisibleChange | 当 | (visible: boolean, prevVisible: boolean) => void | - | - |
|
|
1865
|
-
|
|
1866
|
-
|
|
1867
|
-
## PreviewGroup
|
|
1868
|
-
|
|
1869
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1870
|
-
|--------|--------|--------|--------|--------|
|
|
1871
|
-
| preview | 预览参数，为 | boolean \| | true | 4.6.0 |
|
|
1872
|
-
| items | 预览数组 | string[] \| { src: string, crossOrigin: string, ... }[] | - | 5.7.0 |
|
|
1873
|
-
| fallback | 加载失败容错地址 | string | - | 5.7.0 |
|
|
1874
|
-
|
|
1875
|
-
|
|
1876
|
-
### PreviewGroupType
|
|
1749
|
+
组件同时提供 promise 接口。
|
|
1877
1750
|
|
|
1878
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
1879
|
-
|--------|--------|--------|--------|--------|
|
|
1880
|
-
| visible | 是否显示 | boolean | - | - |
|
|
1881
|
-
| getContainer | 指定预览挂载的节点，但依旧为全屏展示，false 为挂载在当前位置 | string \| HTMLElement \| (() => HTMLElement) \| false | - | 4.8.0 |
|
|
1882
|
-
| movable | 是否可移动 | boolean | true | 5.8.0 |
|
|
1883
|
-
| current | 当前预览图的 index | number | - | 4.12.0 |
|
|
1884
|
-
| mask | 缩略图遮罩 | ReactNode | - | 4.9.0 |
|
|
1885
|
-
| maskClassName | 缩略图遮罩类名 | string | - | 4.11.0 |
|
|
1886
|
-
| scaleStep | 1 + scaleStep | number | 0.5 | - |
|
|
1887
|
-
| minScale | 最小缩放倍数 | number | 1 | 5.7.0 |
|
|
1888
|
-
| maxScale | 最大放大倍数 | number | 50 | 5.7.0 |
|
|
1889
|
-
| closeIcon | 自定义关闭 Icon | React.ReactNode | - | 5.7.0 |
|
|
1890
|
-
| forceRender | 强制渲染预览图 | boolean | - | - |
|
|
1891
|
-
| countRender | 自定义预览计数内容 | (current: number, total: number) => React.ReactNode | - | 4.20.0 |
|
|
1892
|
-
| toolbarRender | 自定义工具栏 | (originalNode: React.ReactElement, info: | - | 5.7.0, |
|
|
1893
|
-
| imageRender | 自定义预览内容 | (originalNode: React.ReactElement, info: { transform: | - | 5.7.0, image: 5.18.0 |
|
|
1894
|
-
| onTransform | 预览图 transform 变化的回调 | { transform: | - | 5.7.0 |
|
|
1895
|
-
| onChange | 切换预览图的回调 | (current: number, prevCurrent: number) => void | - | 5.3.0 |
|
|
1896
|
-
| onVisibleChange | 当 | (visible: boolean, prevVisible: boolean, current: number) => void | - | current 参数 5.3.0 |
|
|
1897
1751
|
|
|
1752
|
+
- `message[level](content, [duration]).then(afterClose)`
|
|
1753
|
+
- `message[level](content, [duration], onClose).then(afterClose)`
|
|
1898
1754
|
|
|
1899
|
-
|
|
1755
|
+
其中 `message[level]` 是组件已经提供的静态方法。`then` 接口返回值是 Promise。
|
|
1900
1756
|
|
|
1901
|
-
|
|
1757
|
+
也可以对象的形式传递参数：
|
|
1902
1758
|
|
|
1903
1759
|
|
|
1904
|
-
|
|
1905
|
-
|
|
1906
|
-
|
|
1907
|
-
|
|
1908
|
-
|
|
1909
|
-
|
|
1910
|
-
flipX: boolean;
|
|
1911
|
-
flipY: boolean;
|
|
1912
|
-
}
|
|
1913
|
-
```
|
|
1760
|
+
- `message.open(config)`
|
|
1761
|
+
- `message.success(config)`
|
|
1762
|
+
- `message.error(config)`
|
|
1763
|
+
- `message.info(config)`
|
|
1764
|
+
- `message.warning(config)`
|
|
1765
|
+
- `message.loading(config)`
|
|
1914
1766
|
|
|
1767
|
+
`config` 对象属性如下：
|
|
1915
1768
|
|
|
1916
|
-
|
|
1769
|
+
| 参数 | 说明 | 类型 | 默认值 |
|
|
1770
|
+
|--------|--------|--------|--------|
|
|
1771
|
+
| className | 自定义 CSS class | string | - |
|
|
1772
|
+
| content | 提示内容 | ReactNode | - |
|
|
1773
|
+
| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number | 3 |
|
|
1774
|
+
| icon | 自定义图标 | ReactNode | - |
|
|
1775
|
+
| key | 当前提示的唯一标志 | string \| number | - |
|
|
1776
|
+
| style | 自定义内联样式 | | - |
|
|
1777
|
+
| onClick | 点击 message 时触发的回调函数 | function | - |
|
|
1778
|
+
| onClose | 关闭时触发的回调函数 | function | - |
|
|
1917
1779
|
|
|
1918
1780
|
|
|
1919
|
-
|
|
1920
|
-
type TransformAction =
|
|
1921
|
-
| 'flipY'
|
|
1922
|
-
| 'flipX'
|
|
1923
|
-
| 'rotateLeft'
|
|
1924
|
-
| 'rotateRight'
|
|
1925
|
-
| 'zoomIn'
|
|
1926
|
-
| 'zoomOut'
|
|
1927
|
-
| 'close'
|
|
1928
|
-
| 'prev'
|
|
1929
|
-
| 'next'
|
|
1930
|
-
| 'wheel'
|
|
1931
|
-
| 'doubleClick'
|
|
1932
|
-
| 'move'
|
|
1933
|
-
| 'dragRebound'
|
|
1934
|
-
| 'reset';
|
|
1935
|
-
```
|
|
1781
|
+
### 全局方法
|
|
1936
1782
|
|
|
1783
|
+
还提供了全局配置和全局销毁方法：
|
|
1937
1784
|
|
|
1938
|
-
### ToolbarRenderInfoType
|
|
1939
1785
|
|
|
1786
|
+
- `message.config(options)`
|
|
1787
|
+
- `message.destroy()`
|
|
1940
1788
|
|
|
1941
|
-
|
|
1942
|
-
{
|
|
1943
|
-
icons: {
|
|
1944
|
-
flipYIcon: React.ReactNode;
|
|
1945
|
-
flipXIcon: React.ReactNode;
|
|
1946
|
-
rotateLeftIcon: React.ReactNode;
|
|
1947
|
-
rotateRightIcon: React.ReactNode;
|
|
1948
|
-
zoomOutIcon: React.ReactNode;
|
|
1949
|
-
zoomInIcon: React.ReactNode;
|
|
1950
|
-
};
|
|
1951
|
-
actions: {
|
|
1952
|
-
onActive?: (index: number) => void; // 5.21.0 之后支持
|
|
1953
|
-
onFlipY: () => void;
|
|
1954
|
-
onFlipX: () => void;
|
|
1955
|
-
onRotateLeft: () => void;
|
|
1956
|
-
onRotateRight: () => void;
|
|
1957
|
-
onZoomOut: () => void;
|
|
1958
|
-
onZoomIn: () => void;
|
|
1959
|
-
onReset: () => void; // 5.17.3 之后支持
|
|
1960
|
-
onClose: () => void;
|
|
1961
|
-
};
|
|
1962
|
-
transform: TransformType,
|
|
1963
|
-
current: number;
|
|
1964
|
-
total: number;
|
|
1965
|
-
image: ImgInfo
|
|
1966
|
-
}
|
|
1967
|
-
```
|
|
1789
|
+
也可通过 `message.destroy(key)` 来关闭一条消息。
|
|
1968
1790
|
|
|
1791
|
+
#### message.config
|
|
1969
1792
|
|
|
1970
|
-
|
|
1793
|
+
当你使用 `ConfigProvider` 进行全局化配置时，系统会默认自动开启 RTL 模式。(4.3.0+)当你想单独使用，可通过如下设置开启 RTL 模式。
|
|
1971
1794
|
|
|
1972
1795
|
|
|
1973
|
-
```
|
|
1974
|
-
{
|
|
1975
|
-
|
|
1976
|
-
|
|
1977
|
-
|
|
1978
|
-
|
|
1979
|
-
|
|
1796
|
+
```js
|
|
1797
|
+
message.config({
|
|
1798
|
+
top: 100,
|
|
1799
|
+
duration: 2,
|
|
1800
|
+
maxCount: 3,
|
|
1801
|
+
rtl: true,
|
|
1802
|
+
prefixCls: 'my-message',
|
|
1803
|
+
});
|
|
1980
1804
|
```
|
|
1981
1805
|
|
|
1982
1806
|
|
|
1983
|
-
|
|
1984
|
-
|
|
1985
|
-
<DemoTitle title="IconButton" desc="以图标为核心的轻量按钮组件，用于触发操作。">
|
|
1986
|
-
#### API
|
|
1987
|
-
|
|
1988
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1989
|
-
|--------|--------|--------|--------|
|
|
1990
|
-
| icon | icon | ReactNode \| string | |
|
|
1991
|
-
| iconType | 百炼图标iconfont的key，依赖百炼的iconFont，例如bl-icon-add | string | |
|
|
1992
|
-
| bordered | 边框 | boolean | true |
|
|
1993
|
-
| shape | 形状 | 'default' \| 'circle' | 'default' |
|
|
1994
|
-
|
|
1995
|
-
|
|
1996
|
-
## antd API
|
|
1997
|
-
|
|
1998
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1999
|
-
|
|
2000
|
-
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
2001
|
-
|
|
2002
|
-
按钮的属性说明如下：
|
|
2003
|
-
|
|
2004
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1807
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2005
1808
|
|--------|--------|--------|--------|--------|
|
|
2006
|
-
|
|
|
2007
|
-
|
|
|
2008
|
-
|
|
|
2009
|
-
|
|
|
2010
|
-
|
|
|
2011
|
-
|
|
|
2012
|
-
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
2013
|
-
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
2014
|
-
| htmlType | 设置 | submit | button | |
|
|
2015
|
-
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
2016
|
-
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
2017
|
-
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
2018
|
-
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
2019
|
-
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
2020
|
-
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
2021
|
-
|
|
2022
|
-
|
|
2023
|
-
支持原生 button 的其他所有属性。
|
|
2024
|
-
|
|
2025
|
-
### PresetColors
|
|
1809
|
+
| duration | 默认自动关闭延时，单位秒 | number | 3 | |
|
|
1810
|
+
| getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLElement | () => document.body | |
|
|
1811
|
+
| maxCount | 最大显示数，超过限制时，最早的消息会被自动关闭 | number | - | |
|
|
1812
|
+
| prefixCls | 消息节点的 className 前缀 | string | ant-message | 4.5.0 |
|
|
1813
|
+
| rtl | 是否开启 RTL 模式 | boolean | false | |
|
|
1814
|
+
| top | 消息距离顶部的位置 | string \| number | 8 | |
|
|
2026
1815
|
|
|
2027
|
-
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
2028
1816
|
|
|
2029
1817
|
|
|
2030
1818
|
|
|
@@ -2163,6 +1951,52 @@ interface CountConfig {
|
|
|
2163
1951
|
|
|
2164
1952
|
|
|
2165
1953
|
|
|
1954
|
+
<DemoTitle title="IconButton" desc="以图标为核心的轻量按钮组件，用于触发操作。">
|
|
1955
|
+
#### API
|
|
1956
|
+
|
|
1957
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
1958
|
+
|--------|--------|--------|--------|
|
|
1959
|
+
| icon | icon | ReactNode \| string | |
|
|
1960
|
+
| iconType | 百炼图标iconfont的key，依赖百炼的iconFont，例如bl-icon-add | string | |
|
|
1961
|
+
| bordered | 边框 | boolean | true |
|
|
1962
|
+
| shape | 形状 | 'default' \| 'circle' | 'default' |
|
|
1963
|
+
|
|
1964
|
+
|
|
1965
|
+
## antd API
|
|
1966
|
+
|
|
1967
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
1968
|
+
|
|
1969
|
+
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
1970
|
+
|
|
1971
|
+
按钮的属性说明如下：
|
|
1972
|
+
|
|
1973
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
1974
|
+
|--------|--------|--------|--------|--------|
|
|
1975
|
+
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
1976
|
+
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
1977
|
+
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
1978
|
+
| color | 设置按钮的颜色 | default | - | default |
|
|
1979
|
+
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
1980
|
+
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
1981
|
+
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
1982
|
+
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
1983
|
+
| htmlType | 设置 | submit | button | |
|
|
1984
|
+
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
1985
|
+
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
1986
|
+
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
1987
|
+
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
1988
|
+
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
1989
|
+
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
1990
|
+
|
|
1991
|
+
|
|
1992
|
+
支持原生 button 的其他所有属性。
|
|
1993
|
+
|
|
1994
|
+
### PresetColors
|
|
1995
|
+
|
|
1996
|
+
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
1997
|
+
|
|
1998
|
+
|
|
1999
|
+
|
|
2166
2000
|
<DemoTitle title="Form" desc="高性能表单控件，自带数据域管理。包含数据录入、校验以及对应样式。">
|
|
2167
2001
|
#### API
|
|
2168
2002
|
|
|
@@ -2776,44 +2610,169 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
|
|
|
2776
2610
|
|
|
2777
2611
|
|
|
2778
2612
|
|
|
2779
|
-
<DemoTitle title="
|
|
2780
|
-
|
|
2613
|
+
<DemoTitle title="Image" desc="可预览的图片">
|
|
2614
|
+
#### API
|
|
2781
2615
|
|
|
2782
|
-
|
|
2783
|
-
|--------|--------|--------|--------|
|
|
2784
|
-
| type | 空状态类型 | \| 'noData'
|
|
2785
|
-
\| 'networkError'
|
|
2786
|
-
\| '404'
|
|
2787
|
-
\| 'arrears'
|
|
2788
|
-
\| 'desktopOnly'
|
|
2789
|
-
\| 'noAudio'
|
|
2790
|
-
\| 'noImage'
|
|
2791
|
-
\| 'noVideo'
|
|
2792
|
-
\| 'noAccess'
|
|
2793
|
-
\| 'error'
|
|
2794
|
-
\| 'noModel'
|
|
2795
|
-
\| 'noApp'
|
|
2796
|
-
\| 'success'
|
|
2797
|
-
\| 'failed'
|
|
2798
|
-
\| 'inProgress'
|
|
2799
|
-
\| 'stayTuned' | 'noData' |
|
|
2800
|
-
| texture | 是否显示纹理 | boolean | true |
|
|
2801
|
-
| image | 图片地址 | string | 默认是no data的图片 |
|
|
2802
|
-
| imageStyle | 图片样式 | React.CSSProperties | |
|
|
2803
|
-
| title | 标题内容 | React.ReactNode | |
|
|
2804
|
-
| description | 自定义描述内容 | React.ReactNode | |
|
|
2805
|
-
| onOk | ok按钮的点击事件 | (e: React.MouseEvent) => void | |
|
|
2806
|
-
| okText | ok按钮的文本 | React.ReactNode | |
|
|
2807
|
-
| okType | ok按钮的类型 | SparkButtonProps['type'] | 'primary' |
|
|
2808
|
-
| okButtonProps | ok按钮的props | SparkButtonProps | |
|
|
2809
|
-
| children | 自定义空状态的内容 | React.ReactNode | |
|
|
2810
|
-
| className | 自定义空状态的类名 | string | |
|
|
2811
|
-
| style | 自定义空状态的样式 | React.CSSProperties | |
|
|
2812
|
-
| size | 自定义空状态的大小 | React.CSSProperties['width'] | |
|
|
2616
|
+
<AntdApiRef url="https://ant.design/components/image-cn/#api"></AntdApiRef>
|
|
2813
2617
|
|
|
2814
2618
|
|
|
2815
|
-
|
|
2619
|
+
## antd API
|
|
2620
|
+
|
|
2621
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2816
2622
|
|
|
2623
|
+
### Image
|
|
2624
|
+
|
|
2625
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2626
|
+
|--------|--------|--------|--------|--------|
|
|
2627
|
+
| alt | 图像描述 | string | - | 4.6.0 |
|
|
2628
|
+
| fallback | 加载失败容错地址 | string | - | 4.6.0 |
|
|
2629
|
+
| height | 图像高度 | string \| number | - | 4.6.0 |
|
|
2630
|
+
| placeholder | 加载占位，为 | ReactNode | - | 4.6.0 |
|
|
2631
|
+
| preview | 预览参数，为 | boolean \| | true | 4.6.0 |
|
|
2632
|
+
| src | 图片地址 | string | - | 4.6.0 |
|
|
2633
|
+
| width | 图像宽度 | string \| number | - | 4.6.0 |
|
|
2634
|
+
| onError | 加载错误回调 | (event: Event) => void | - | 4.12.0 |
|
|
2635
|
+
|
|
2636
|
+
|
|
2637
|
+
其他属性见 [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
|
|
2638
|
+
|
|
2639
|
+
### PreviewType
|
|
2640
|
+
|
|
2641
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2642
|
+
|--------|--------|--------|--------|--------|
|
|
2643
|
+
| visible | 是否显示 | boolean | - | - |
|
|
2644
|
+
| src | 自定义预览 src | string | - | 4.10.0 |
|
|
2645
|
+
| getContainer | 指定预览挂载的节点，但依旧为全屏展示，false 为挂载在当前位置 | string \| HTMLElement \| (() => HTMLElement) \| false | - | 4.8.0 |
|
|
2646
|
+
| movable | 是否可移动 | boolean | true | 5.8.0 |
|
|
2647
|
+
| mask | 缩略图遮罩 | ReactNode | - | 4.9.0 |
|
|
2648
|
+
| maskClassName | 缩略图遮罩类名 | string | - | 4.11.0 |
|
|
2649
|
+
| rootClassName | 预览图的根 DOM 类名 | string | - | 5.4.0 |
|
|
2650
|
+
| scaleStep | 1 + scaleStep | number | 0.5 | - |
|
|
2651
|
+
| minScale | 最小缩放倍数 | number | 1 | 5.7.0 |
|
|
2652
|
+
| maxScale | 最大放大倍数 | number | 50 | 5.7.0 |
|
|
2653
|
+
| closeIcon | 自定义关闭 Icon | React.ReactNode | - | 5.7.0 |
|
|
2654
|
+
| forceRender | 强制渲染预览图 | boolean | - | - |
|
|
2655
|
+
| toolbarRender | 自定义工具栏 | (originalNode: React.ReactElement, info: Omit< | - | 5.7.0, |
|
|
2656
|
+
| imageRender | 自定义预览内容 | (originalNode: React.ReactElement, info: { transform: | - | 5.7.0, image: 5.18.0 |
|
|
2657
|
+
| destroyOnHidden | 关闭预览时销毁子元素 | boolean | false | 5.25.0 |
|
|
2658
|
+
| onTransform | 预览图 transform 变化的回调 | { transform: | - | 5.7.0 |
|
|
2659
|
+
| onVisibleChange | 当 | (visible: boolean, prevVisible: boolean) => void | - | - |
|
|
2660
|
+
|
|
2661
|
+
|
|
2662
|
+
## PreviewGroup
|
|
2663
|
+
|
|
2664
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2665
|
+
|--------|--------|--------|--------|--------|
|
|
2666
|
+
| preview | 预览参数，为 | boolean \| | true | 4.6.0 |
|
|
2667
|
+
| items | 预览数组 | string[] \| { src: string, crossOrigin: string, ... }[] | - | 5.7.0 |
|
|
2668
|
+
| fallback | 加载失败容错地址 | string | - | 5.7.0 |
|
|
2669
|
+
|
|
2670
|
+
|
|
2671
|
+
### PreviewGroupType
|
|
2672
|
+
|
|
2673
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2674
|
+
|--------|--------|--------|--------|--------|
|
|
2675
|
+
| visible | 是否显示 | boolean | - | - |
|
|
2676
|
+
| getContainer | 指定预览挂载的节点，但依旧为全屏展示，false 为挂载在当前位置 | string \| HTMLElement \| (() => HTMLElement) \| false | - | 4.8.0 |
|
|
2677
|
+
| movable | 是否可移动 | boolean | true | 5.8.0 |
|
|
2678
|
+
| current | 当前预览图的 index | number | - | 4.12.0 |
|
|
2679
|
+
| mask | 缩略图遮罩 | ReactNode | - | 4.9.0 |
|
|
2680
|
+
| maskClassName | 缩略图遮罩类名 | string | - | 4.11.0 |
|
|
2681
|
+
| scaleStep | 1 + scaleStep | number | 0.5 | - |
|
|
2682
|
+
| minScale | 最小缩放倍数 | number | 1 | 5.7.0 |
|
|
2683
|
+
| maxScale | 最大放大倍数 | number | 50 | 5.7.0 |
|
|
2684
|
+
| closeIcon | 自定义关闭 Icon | React.ReactNode | - | 5.7.0 |
|
|
2685
|
+
| forceRender | 强制渲染预览图 | boolean | - | - |
|
|
2686
|
+
| countRender | 自定义预览计数内容 | (current: number, total: number) => React.ReactNode | - | 4.20.0 |
|
|
2687
|
+
| toolbarRender | 自定义工具栏 | (originalNode: React.ReactElement, info: | - | 5.7.0, |
|
|
2688
|
+
| imageRender | 自定义预览内容 | (originalNode: React.ReactElement, info: { transform: | - | 5.7.0, image: 5.18.0 |
|
|
2689
|
+
| onTransform | 预览图 transform 变化的回调 | { transform: | - | 5.7.0 |
|
|
2690
|
+
| onChange | 切换预览图的回调 | (current: number, prevCurrent: number) => void | - | 5.3.0 |
|
|
2691
|
+
| onVisibleChange | 当 | (visible: boolean, prevVisible: boolean, current: number) => void | - | current 参数 5.3.0 |
|
|
2692
|
+
|
|
2693
|
+
|
|
2694
|
+
## Interface
|
|
2695
|
+
|
|
2696
|
+
### TransformType
|
|
2697
|
+
|
|
2698
|
+
|
|
2699
|
+
```typescript
|
|
2700
|
+
{
|
|
2701
|
+
x: number;
|
|
2702
|
+
y: number;
|
|
2703
|
+
rotate: number;
|
|
2704
|
+
scale: number;
|
|
2705
|
+
flipX: boolean;
|
|
2706
|
+
flipY: boolean;
|
|
2707
|
+
}
|
|
2708
|
+
```
|
|
2709
|
+
|
|
2710
|
+
|
|
2711
|
+
### TransformAction
|
|
2712
|
+
|
|
2713
|
+
|
|
2714
|
+
```typescript
|
|
2715
|
+
type TransformAction =
|
|
2716
|
+
| 'flipY'
|
|
2717
|
+
| 'flipX'
|
|
2718
|
+
| 'rotateLeft'
|
|
2719
|
+
| 'rotateRight'
|
|
2720
|
+
| 'zoomIn'
|
|
2721
|
+
| 'zoomOut'
|
|
2722
|
+
| 'close'
|
|
2723
|
+
| 'prev'
|
|
2724
|
+
| 'next'
|
|
2725
|
+
| 'wheel'
|
|
2726
|
+
| 'doubleClick'
|
|
2727
|
+
| 'move'
|
|
2728
|
+
| 'dragRebound'
|
|
2729
|
+
| 'reset';
|
|
2730
|
+
```
|
|
2731
|
+
|
|
2732
|
+
|
|
2733
|
+
### ToolbarRenderInfoType
|
|
2734
|
+
|
|
2735
|
+
|
|
2736
|
+
```typescript
|
|
2737
|
+
{
|
|
2738
|
+
icons: {
|
|
2739
|
+
flipYIcon: React.ReactNode;
|
|
2740
|
+
flipXIcon: React.ReactNode;
|
|
2741
|
+
rotateLeftIcon: React.ReactNode;
|
|
2742
|
+
rotateRightIcon: React.ReactNode;
|
|
2743
|
+
zoomOutIcon: React.ReactNode;
|
|
2744
|
+
zoomInIcon: React.ReactNode;
|
|
2745
|
+
};
|
|
2746
|
+
actions: {
|
|
2747
|
+
onActive?: (index: number) => void; // 5.21.0 之后支持
|
|
2748
|
+
onFlipY: () => void;
|
|
2749
|
+
onFlipX: () => void;
|
|
2750
|
+
onRotateLeft: () => void;
|
|
2751
|
+
onRotateRight: () => void;
|
|
2752
|
+
onZoomOut: () => void;
|
|
2753
|
+
onZoomIn: () => void;
|
|
2754
|
+
onReset: () => void; // 5.17.3 之后支持
|
|
2755
|
+
onClose: () => void;
|
|
2756
|
+
};
|
|
2757
|
+
transform: TransformType,
|
|
2758
|
+
current: number;
|
|
2759
|
+
total: number;
|
|
2760
|
+
image: ImgInfo
|
|
2761
|
+
}
|
|
2762
|
+
```
|
|
2763
|
+
|
|
2764
|
+
|
|
2765
|
+
### ImgInfo
|
|
2766
|
+
|
|
2767
|
+
|
|
2768
|
+
```typescript
|
|
2769
|
+
{
|
|
2770
|
+
url: string;
|
|
2771
|
+
alt: string;
|
|
2772
|
+
width: string | number;
|
|
2773
|
+
height: string | number;
|
|
2774
|
+
}
|
|
2775
|
+
```
|
|
2817
2776
|
|
|
2818
2777
|
|
|
2819
2778
|
|
|
@@ -2969,6 +2928,87 @@ const dividerItem = {
|
|
|
2969
2928
|
|
|
2970
2929
|
|
|
2971
2930
|
|
|
2931
|
+
<DemoTitle title="Empty" desc="用于空状态的占位图形展示。">
|
|
2932
|
+
## API
|
|
2933
|
+
|
|
2934
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
2935
|
+
|--------|--------|--------|--------|
|
|
2936
|
+
| type | 空状态类型 | \| 'noData'
|
|
2937
|
+
\| 'networkError'
|
|
2938
|
+
\| '404'
|
|
2939
|
+
\| 'arrears'
|
|
2940
|
+
\| 'desktopOnly'
|
|
2941
|
+
\| 'noAudio'
|
|
2942
|
+
\| 'noImage'
|
|
2943
|
+
\| 'noVideo'
|
|
2944
|
+
\| 'noAccess'
|
|
2945
|
+
\| 'error'
|
|
2946
|
+
\| 'noModel'
|
|
2947
|
+
\| 'noApp'
|
|
2948
|
+
\| 'success'
|
|
2949
|
+
\| 'failed'
|
|
2950
|
+
\| 'inProgress'
|
|
2951
|
+
\| 'stayTuned' | 'noData' |
|
|
2952
|
+
| texture | 是否显示纹理 | boolean | true |
|
|
2953
|
+
| image | 图片地址 | string | 默认是no data的图片 |
|
|
2954
|
+
| imageStyle | 图片样式 | React.CSSProperties | |
|
|
2955
|
+
| title | 标题内容 | React.ReactNode | |
|
|
2956
|
+
| description | 自定义描述内容 | React.ReactNode | |
|
|
2957
|
+
| onOk | ok按钮的点击事件 | (e: React.MouseEvent) => void | |
|
|
2958
|
+
| okText | ok按钮的文本 | React.ReactNode | |
|
|
2959
|
+
| okType | ok按钮的类型 | SparkButtonProps['type'] | 'primary' |
|
|
2960
|
+
| okButtonProps | ok按钮的props | SparkButtonProps | |
|
|
2961
|
+
| children | 自定义空状态的内容 | React.ReactNode | |
|
|
2962
|
+
| className | 自定义空状态的类名 | string | |
|
|
2963
|
+
| style | 自定义空状态的样式 | React.CSSProperties | |
|
|
2964
|
+
| size | 自定义空状态的大小 | React.CSSProperties['width'] | |
|
|
2965
|
+
| autoFit | 是否自适应容器宽度，当容器宽度小于 size 时自动缩放 | boolean | false |
|
|
2966
|
+
|
|
2967
|
+
|
|
2968
|
+
<AntdApiRef url="https://ant.design/components/empty-cn/#api"></AntdApiRef>
|
|
2969
|
+
|
|
2970
|
+
|
|
2971
|
+
|
|
2972
|
+
|
|
2973
|
+
|
|
2974
|
+
<DemoTitle title="Descriptions" desc="展示多个只读字段的组合">
|
|
2975
|
+
#### API
|
|
2976
|
+
|
|
2977
|
+
<AntdApiRef url="https://ant.design/components/descriptions-cn/#api"></AntdApiRef>
|
|
2978
|
+
|
|
2979
|
+
|
|
2980
|
+
## antd API
|
|
2981
|
+
|
|
2982
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
2983
|
+
|
|
2984
|
+
### Descriptions
|
|
2985
|
+
|
|
2986
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
2987
|
+
|--------|--------|--------|--------|--------|
|
|
2988
|
+
| bordered | 是否展示边框 | boolean | false | |
|
|
2989
|
+
| colon | 配置 | boolean | true | |
|
|
2990
|
+
| column | 一行的 | number \| | 3 | |
|
|
2991
|
+
| extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 |
|
|
2992
|
+
| items | 描述列表项内容 | | - | 5.8.0 |
|
|
2993
|
+
| layout | 描述布局 | horizontal | horizontal | |
|
|
2994
|
+
| size | 设置列表的大小。可以设置为 | default | - | |
|
|
2995
|
+
| title | 描述列表的标题，显示在最顶部 | ReactNode | - | |
|
|
2996
|
+
| classNames | 语义化结构 class | | - | 5.23.0 |
|
|
2997
|
+
| styles | 语义化结构 style | | - | 5.23.0 |
|
|
2998
|
+
|
|
2999
|
+
|
|
3000
|
+
### DescriptionItem
|
|
3001
|
+
|
|
3002
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3003
|
+
|--------|--------|--------|--------|--------|
|
|
3004
|
+
| label | 内容的描述 | ReactNode | - | |
|
|
3005
|
+
| span | 包含列的数量（ | number\| | 1 | screens: 5.9.0 |
|
|
3006
|
+
|
|
3007
|
+
|
|
3008
|
+
span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
|
|
3009
|
+
|
|
3010
|
+
|
|
3011
|
+
|
|
2972
3012
|
<DemoTitle title="Drawer" desc="从页面一侧滑入的操作面板，用于承载临时界面内容。">
|
|
2973
3013
|
#### API
|
|
2974
3014
|
|
|
@@ -3033,41 +3073,74 @@ v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v
|
|
|
3033
3073
|
|
|
3034
3074
|
|
|
3035
3075
|
|
|
3036
|
-
<DemoTitle title="
|
|
3076
|
+
<DemoTitle title="CollapsePanel" desc="折叠面板">
|
|
3037
3077
|
#### API
|
|
3038
3078
|
|
|
3039
|
-
|
|
3079
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3080
|
+
|--------|--------|--------|--------|
|
|
3081
|
+
| collapsedHeight | 收起状态下显示的内容高度 | number | 0 |
|
|
3082
|
+
| expandedHeight | 展开状态下的内容高度，设置后内容超出时可滚动，不设置则自适应内容高度 | number | 300 |
|
|
3083
|
+
| title | 面板标题 | string \| React.ReactNode | "" |
|
|
3084
|
+
| expandOnPanelClick | 是否允许点击整个面板进行展开 | boolean | false |
|
|
3085
|
+
| extra | 面板右侧内容 | React.ReactNode | |
|
|
3086
|
+
| children | 面板内容 | React.ReactNode | |
|
|
3087
|
+
| defaultExpanded | 是否默认展开 | boolean | false |
|
|
3088
|
+
| classNames | 语义化的classNames | Partial> | |
|
|
3089
|
+
| styles | 语义化的styles | Partial<
|
|
3090
|
+
Record
|
|
3091
|
+
> | |
|
|
3092
|
+
|
|
3040
3093
|
|
|
3041
3094
|
|
|
3042
3095
|
## antd API
|
|
3043
3096
|
|
|
3044
3097
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3045
3098
|
|
|
3046
|
-
###
|
|
3099
|
+
### Collapse
|
|
3047
3100
|
|
|
3048
3101
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3049
3102
|
|--------|--------|--------|--------|--------|
|
|
3050
|
-
|
|
|
3051
|
-
|
|
|
3052
|
-
|
|
|
3053
|
-
|
|
|
3054
|
-
|
|
|
3055
|
-
|
|
|
3056
|
-
|
|
|
3057
|
-
|
|
|
3058
|
-
|
|
|
3059
|
-
|
|
|
3103
|
+
| accordion | 手风琴模式 | boolean | false | |
|
|
3104
|
+
| activeKey | 当前激活 tab 面板的 key | string[] \| string | | |
|
|
3105
|
+
| bordered | 带边框风格的折叠面板 | boolean | true | |
|
|
3106
|
+
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 |
|
|
3107
|
+
| defaultActiveKey | 初始化选中面板的 key | string[] \| string | - | |
|
|
3108
|
+
| destroyOnHidden | 销毁折叠隐藏的面板 | boolean | false | 5.25.0 |
|
|
3109
|
+
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
|
|
3110
|
+
| expandIconPosition | 设置图标位置 | start | - | 4.21.0 |
|
|
3111
|
+
| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
|
|
3112
|
+
| size | 设置折叠面板大小 | large | middle | 5.2.0 |
|
|
3113
|
+
| onChange | 切换面板的回调 | function | - | |
|
|
3114
|
+
| items | 折叠项目内容 | | - | 5.6.0 |
|
|
3060
3115
|
|
|
3061
3116
|
|
|
3062
|
-
###
|
|
3117
|
+
### ItemType
|
|
3063
3118
|
|
|
3064
3119
|
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3065
3120
|
|--------|--------|--------|--------|--------|
|
|
3066
|
-
|
|
|
3067
|
-
|
|
|
3121
|
+
| classNames | 语义化结构 className | | - | 5.21.0 |
|
|
3122
|
+
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | |
|
|
3123
|
+
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3124
|
+
| key | 对应 activeKey | string \| number | - | |
|
|
3125
|
+
| label | 面板标题 | ReactNode | - | - |
|
|
3126
|
+
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3127
|
+
| styles | 语义化结构 style | | - | 5.21.0 |
|
|
3068
3128
|
|
|
3069
3129
|
|
|
3070
|
-
|
|
3130
|
+
### Collapse.Panel
|
|
3131
|
+
|
|
3132
|
+
<!-- prettier-ignore -->
|
|
3133
|
+
<Container type="warning" title="已废弃">
|
|
3134
|
+
版本 >= 5.6.0 时请使用 items 方式配置面板。
|
|
3135
|
+
</Container>
|
|
3136
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3137
|
+
|--------|--------|--------|--------|--------|
|
|
3138
|
+
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 (icon: 4.24.0) |
|
|
3139
|
+
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3140
|
+
| header | 面板标题 | ReactNode | - | |
|
|
3141
|
+
| key | 对应 activeKey | string \| number | - | |
|
|
3142
|
+
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3143
|
+
|
|
3071
3144
|
|
|
3072
3145
|
|
|
3073
3146
|
|
|
@@ -3264,103 +3337,32 @@ dayjs.locale('zh-cn');
|
|
|
3264
3337
|
| showTime.defaultValue | 设置用户选择日期时默认的时分秒， | | [dayjs(), dayjs()] | |
|
|
3265
3338
|
| value | 日期 | | - | |
|
|
3266
3339
|
| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - | |
|
|
3267
|
-
| onChange | 日期范围发生变化的回调 | function(dates: [dayjs, dayjs], dateStrings: [string, string]) | - | |
|
|
3268
|
-
| onFocus | 聚焦时回调 | function(event, { range: 'start' \| 'end' }) | - | range |
|
|
3269
|
-
| onBlur | 失焦时回调 | function(event, { range: 'start' \| 'end' }) | - | range |
|
|
3270
|
-
|
|
3271
|
-
|
|
3272
|
-
#### formatType
|
|
3273
|
-
|
|
3274
|
-
|
|
3275
|
-
```typescript
|
|
3276
|
-
import type { Dayjs } from 'dayjs';
|
|
3277
|
-
|
|
3278
|
-
type Generic = string;
|
|
3279
|
-
type GenericFn = (value: Dayjs) => string;
|
|
3280
|
-
|
|
3281
|
-
export type FormatType =
|
|
3282
|
-
| Generic
|
|
3283
|
-
| GenericFn
|
|
3284
|
-
| Array
|
|
3285
|
-
| {
|
|
3286
|
-
format: string;
|
|
3287
|
-
type?: 'mask';
|
|
3288
|
-
};
|
|
3289
|
-
```
|
|
3290
|
-
|
|
3291
|
-
|
|
3292
|
-
注意：`type` 定义为 `5.14.0` 新增。
|
|
3293
|
-
|
|
3294
|
-
|
|
3295
|
-
|
|
3296
|
-
<DemoTitle title="CollapsePanel" desc="折叠面板">
|
|
3297
|
-
#### API
|
|
3298
|
-
|
|
3299
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3300
|
-
|--------|--------|--------|--------|
|
|
3301
|
-
| collapsedHeight | 收起状态下显示的内容高度 | number | 0 |
|
|
3302
|
-
| expandedHeight | 展开状态下的内容高度，设置后内容超出时可滚动，不设置则自适应内容高度 | number | 300 |
|
|
3303
|
-
| title | 面板标题 | string \| React.ReactNode | "" |
|
|
3304
|
-
| expandOnPanelClick | 是否允许点击整个面板进行展开 | boolean | false |
|
|
3305
|
-
| extra | 面板右侧内容 | React.ReactNode | |
|
|
3306
|
-
| children | 面板内容 | React.ReactNode | |
|
|
3307
|
-
| defaultExpanded | 是否默认展开 | boolean | false |
|
|
3308
|
-
| classNames | 语义化的classNames | Partial> | |
|
|
3309
|
-
| styles | 语义化的styles | Partial<
|
|
3310
|
-
Record
|
|
3311
|
-
> | |
|
|
3312
|
-
|
|
3313
|
-
|
|
3314
|
-
|
|
3315
|
-
## antd API
|
|
3316
|
-
|
|
3317
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3318
|
-
|
|
3319
|
-
### Collapse
|
|
3320
|
-
|
|
3321
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3322
|
-
|--------|--------|--------|--------|--------|
|
|
3323
|
-
| accordion | 手风琴模式 | boolean | false | |
|
|
3324
|
-
| activeKey | 当前激活 tab 面板的 key | string[] \| string | | |
|
|
3325
|
-
| bordered | 带边框风格的折叠面板 | boolean | true | |
|
|
3326
|
-
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 |
|
|
3327
|
-
| defaultActiveKey | 初始化选中面板的 key | string[] \| string | - | |
|
|
3328
|
-
| destroyOnHidden | 销毁折叠隐藏的面板 | boolean | false | 5.25.0 |
|
|
3329
|
-
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
|
|
3330
|
-
| expandIconPosition | 设置图标位置 | start | - | 4.21.0 |
|
|
3331
|
-
| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
|
|
3332
|
-
| size | 设置折叠面板大小 | large | middle | 5.2.0 |
|
|
3333
|
-
| onChange | 切换面板的回调 | function | - | |
|
|
3334
|
-
| items | 折叠项目内容 | | - | 5.6.0 |
|
|
3340
|
+
| onChange | 日期范围发生变化的回调 | function(dates: [dayjs, dayjs], dateStrings: [string, string]) | - | |
|
|
3341
|
+
| onFocus | 聚焦时回调 | function(event, { range: 'start' \| 'end' }) | - | range |
|
|
3342
|
+
| onBlur | 失焦时回调 | function(event, { range: 'start' \| 'end' }) | - | range |
|
|
3335
3343
|
|
|
3336
3344
|
|
|
3337
|
-
|
|
3345
|
+
#### formatType
|
|
3338
3346
|
|
|
3339
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3340
|
-
|--------|--------|--------|--------|--------|
|
|
3341
|
-
| classNames | 语义化结构 className | | - | 5.21.0 |
|
|
3342
|
-
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | |
|
|
3343
|
-
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3344
|
-
| key | 对应 activeKey | string \| number | - | |
|
|
3345
|
-
| label | 面板标题 | ReactNode | - | - |
|
|
3346
|
-
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3347
|
-
| styles | 语义化结构 style | | - | 5.21.0 |
|
|
3348
3347
|
|
|
3348
|
+
```typescript
|
|
3349
|
+
import type { Dayjs } from 'dayjs';
|
|
3349
3350
|
|
|
3350
|
-
|
|
3351
|
+
type Generic = string;
|
|
3352
|
+
type GenericFn = (value: Dayjs) => string;
|
|
3353
|
+
|
|
3354
|
+
export type FormatType =
|
|
3355
|
+
| Generic
|
|
3356
|
+
| GenericFn
|
|
3357
|
+
| Array
|
|
3358
|
+
| {
|
|
3359
|
+
format: string;
|
|
3360
|
+
type?: 'mask';
|
|
3361
|
+
};
|
|
3362
|
+
```
|
|
3351
3363
|
|
|
3352
|
-
<!-- prettier-ignore -->
|
|
3353
|
-
<Container type="warning" title="已废弃">
|
|
3354
|
-
版本 >= 5.6.0 时请使用 items 方式配置面板。
|
|
3355
|
-
</Container>
|
|
3356
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3357
|
-
|--------|--------|--------|--------|--------|
|
|
3358
|
-
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 (icon: 4.24.0) |
|
|
3359
|
-
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
3360
|
-
| header | 面板标题 | ReactNode | - | |
|
|
3361
|
-
| key | 对应 activeKey | string \| number | - | |
|
|
3362
|
-
| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true | |
|
|
3363
3364
|
|
|
3365
|
+
注意：`type` 定义为 `5.14.0` 新增。
|
|
3364
3366
|
|
|
3365
3367
|
|
|
3366
3368
|
|
|
@@ -3437,77 +3439,6 @@ export type FormatType =
|
|
|
3437
3439
|
|
|
3438
3440
|
|
|
3439
3441
|
|
|
3440
|
-
<DemoTitle title="Checkbox" desc="收集用户的多项选择。">
|
|
3441
|
-
#### API
|
|
3442
|
-
|
|
3443
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3444
|
-
|--------|--------|--------|--------|
|
|
3445
|
-
| description | 描述文本 | string | |
|
|
3446
|
-
| descriptionClassName | 描述文本的样式类名 | string | |
|
|
3447
|
-
| descriptionStyle | 描述文本的内联样式 | React.CSSProperties | |
|
|
3448
|
-
|
|
3449
|
-
|
|
3450
|
-
<AntdApiRef url="https://ant.design/components/checkbox-cn/#api"></AntdApiRef>
|
|
3451
|
-
|
|
3452
|
-
|
|
3453
|
-
## antd API
|
|
3454
|
-
|
|
3455
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3456
|
-
|
|
3457
|
-
#### Checkbox
|
|
3458
|
-
|
|
3459
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3460
|
-
|--------|--------|--------|--------|--------|
|
|
3461
|
-
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
3462
|
-
| checked | 指定当前是否选中 | boolean | false | |
|
|
3463
|
-
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
3464
|
-
| disabled | 失效状态 | boolean | false | |
|
|
3465
|
-
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false | |
|
|
3466
|
-
| onChange | 变化时的回调函数 | (e: CheckboxChangeEvent) => void | - | |
|
|
3467
|
-
| onBlur | 失去焦点时的回调 | function() | - | |
|
|
3468
|
-
| onFocus | 获得焦点时的回调 | function() | - | |
|
|
3469
|
-
|
|
3470
|
-
|
|
3471
|
-
#### Checkbox.Group
|
|
3472
|
-
|
|
3473
|
-
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3474
|
-
|--------|--------|--------|--------|--------|
|
|
3475
|
-
| defaultValue | 默认选中的选项 | (string \| number)[] | [] | |
|
|
3476
|
-
| disabled | 整组失效 | boolean | false | |
|
|
3477
|
-
| name | CheckboxGroup 下所有 | string | - | |
|
|
3478
|
-
| options | 指定可选项 | string[] \| number[] \| Option[] | [] | |
|
|
3479
|
-
| value | 指定选中的选项 | (string \| number \| boolean)[] | [] | |
|
|
3480
|
-
| title | 选项的 title | string | - | |
|
|
3481
|
-
| className | 选项的类名 | string | - | 5.25.0 |
|
|
3482
|
-
| style | 选项的样式 | React.CSSProperties | - | |
|
|
3483
|
-
| onChange | 变化时的回调函数 | (checkedValue: T[]) => void | - | |
|
|
3484
|
-
|
|
3485
|
-
|
|
3486
|
-
##### Option
|
|
3487
|
-
|
|
3488
|
-
|
|
3489
|
-
```typescript
|
|
3490
|
-
interface Option {
|
|
3491
|
-
label: string;
|
|
3492
|
-
value: string;
|
|
3493
|
-
disabled?: boolean;
|
|
3494
|
-
}
|
|
3495
|
-
```
|
|
3496
|
-
|
|
3497
|
-
|
|
3498
|
-
### 方法
|
|
3499
|
-
|
|
3500
|
-
#### Checkbox
|
|
3501
|
-
|
|
3502
|
-
| 名称 | 描述 | 版本 |
|
|
3503
|
-
|--------|--------|--------|
|
|
3504
|
-
| blur() | 移除焦点 | |
|
|
3505
|
-
| focus() | 获取焦点 | |
|
|
3506
|
-
| nativeElement | 返回 Checkbox 的 DOM 节点 | 5.17.3 |
|
|
3507
|
-
|
|
3508
|
-
|
|
3509
|
-
|
|
3510
|
-
|
|
3511
3442
|
<DemoTitle title="Card" desc="通用卡片容器">
|
|
3512
3443
|
#### API
|
|
3513
3444
|
|
|
@@ -3571,61 +3502,6 @@ interface Option {
|
|
|
3571
3502
|
|
|
3572
3503
|
|
|
3573
3504
|
|
|
3574
|
-
<DemoTitle title="Button" desc="按钮用于开始一个即时操作。">
|
|
3575
|
-
#### API
|
|
3576
|
-
|
|
3577
|
-
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3578
|
-
|--------|--------|--------|--------|
|
|
3579
|
-
| size | 按钮大小 | 'small' \| 'middle' \| 'large' | 'middle' |
|
|
3580
|
-
| type | 类型 | \| 'primary'
|
|
3581
|
-
\| 'dashed'
|
|
3582
|
-
\| 'link'
|
|
3583
|
-
\| 'text'
|
|
3584
|
-
\| 'default'
|
|
3585
|
-
\| 'primaryLess'
|
|
3586
|
-
\| 'textCompact' | 'deafult' |
|
|
3587
|
-
| tooltipContent | hover上去tooltip的内容 | string \| ReactNode | |
|
|
3588
|
-
| iconType | 百炼图标iconfont的key，依赖ConfigProvider传入的iconfont，例如bl-icon-add | string | |
|
|
3589
|
-
| iconSize | 图标大小 | SparkIconFontProps['size'] | |
|
|
3590
|
-
|
|
3591
|
-
<AntdApiRef url="https://ant.design/components/button-cn/#api"></AntdApiRef>
|
|
3592
|
-
|
|
3593
|
-
|
|
3594
|
-
## antd API
|
|
3595
|
-
|
|
3596
|
-
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3597
|
-
|
|
3598
|
-
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
3599
|
-
|
|
3600
|
-
按钮的属性说明如下：
|
|
3601
|
-
|
|
3602
|
-
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
3603
|
-
|--------|--------|--------|--------|--------|
|
|
3604
|
-
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
3605
|
-
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
3606
|
-
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
3607
|
-
| color | 设置按钮的颜色 | default | - | default |
|
|
3608
|
-
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
3609
|
-
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
3610
|
-
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
3611
|
-
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
3612
|
-
| htmlType | 设置 | submit | button | |
|
|
3613
|
-
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
3614
|
-
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
3615
|
-
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
3616
|
-
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
3617
|
-
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
3618
|
-
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
3619
|
-
|
|
3620
|
-
|
|
3621
|
-
支持原生 button 的其他所有属性。
|
|
3622
|
-
|
|
3623
|
-
### PresetColors
|
|
3624
|
-
|
|
3625
|
-
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
3626
|
-
|
|
3627
|
-
|
|
3628
|
-
|
|
3629
3505
|
<DemoTitle title="Breadcrumb" desc="显示当前页面在系统层级结构中的位置，并能向上返回。">
|
|
3630
3506
|
#### API
|
|
3631
3507
|
|
|
@@ -3729,58 +3605,184 @@ const items = [
|
|
|
3729
3605
|
},
|
|
3730
3606
|
];
|
|
3731
3607
|
|
|
3732
|
-
function itemRender(currentRoute, params, items, paths) {
|
|
3733
|
-
const isLast = currentRoute?.path === items[items.length - 1]?.path;
|
|
3608
|
+
function itemRender(currentRoute, params, items, paths) {
|
|
3609
|
+
const isLast = currentRoute?.path === items[items.length - 1]?.path;
|
|
3610
|
+
|
|
3611
|
+
return isLast ? (
|
|
3612
|
+
<span>{currentRoute.title}</span>
|
|
3613
|
+
) : (
|
|
3614
|
+
<Link to={`/${paths.join('/')}`}>{currentRoute.title}</Link>
|
|
3615
|
+
);
|
|
3616
|
+
}
|
|
3617
|
+
|
|
3618
|
+
return <Breadcrumb itemRender={itemRender} items={items} />;
|
|
3619
|
+
```
|
|
3620
|
+
|
|
3621
|
+
|
|
3622
|
+
|
|
3623
|
+
|
|
3624
|
+
<DemoTitle title="Avatar" desc="用来代表用户或事物，支持图片、图标或字符展示。">
|
|
3625
|
+
#### API
|
|
3626
|
+
|
|
3627
|
+
<AntdApiRef url="https://ant.design/components/avatar-cn/#api"></AntdApiRef>
|
|
3628
|
+
|
|
3629
|
+
|
|
3630
|
+
## antd API
|
|
3631
|
+
|
|
3632
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3633
|
+
|
|
3634
|
+
### Avatar
|
|
3635
|
+
|
|
3636
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3637
|
+
|--------|--------|--------|--------|--------|
|
|
3638
|
+
| alt | 图像无法显示时的替代文本 | string | - | |
|
|
3639
|
+
| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 |
|
|
3640
|
+
| icon | 设置头像的自定义图标 | ReactNode | - | |
|
|
3641
|
+
| shape | 指定头像的形状 | circle | circle | |
|
|
3642
|
+
| size | 设置头像的大小 | number \| | default | 4.7.0 |
|
|
3643
|
+
| src | 图片类头像的资源地址或者图片元素 | string \| ReactNode | - | ReactNode: 4.8.0 |
|
|
3644
|
+
| srcSet | 设置图片类头像响应式资源地址 | string | - | |
|
|
3645
|
+
| draggable | 图片是否允许拖动 | boolean \| | true | |
|
|
3646
|
+
| crossOrigin | CORS 属性设置 | 'anonymous' | - | 4.17.0 |
|
|
3647
|
+
| onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - | |
|
|
3648
|
+
|
|
3649
|
+
|
|
3650
|
+
Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fallback 行为，优先级为 `icon` > `children`
|
|
3651
|
+
|
|
3652
|
+
### Avatar.Group <Badge>4.5.0+</Badge>
|
|
3653
|
+
|
|
3654
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3655
|
+
|--------|--------|--------|--------|--------|
|
|
3656
|
+
| max | 设置最多显示相关配置， | { count?: number; style?: CSSProperties; popover?: PopoverProps } | - | 5.18.0 |
|
|
3657
|
+
| size | 设置头像的大小 | number \| | default | 4.8.0 |
|
|
3658
|
+
| shape | 设置头像的形状 | circle | circle | 5.8.0 |
|
|
3659
|
+
|
|
3660
|
+
|
|
3661
|
+
|
|
3662
|
+
|
|
3663
|
+
<DemoTitle title="Checkbox" desc="收集用户的多项选择。">
|
|
3664
|
+
#### API
|
|
3665
|
+
|
|
3666
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3667
|
+
|--------|--------|--------|--------|
|
|
3668
|
+
| description | 描述文本 | string | |
|
|
3669
|
+
| descriptionClassName | 描述文本的样式类名 | string | |
|
|
3670
|
+
| descriptionStyle | 描述文本的内联样式 | React.CSSProperties | |
|
|
3671
|
+
|
|
3672
|
+
|
|
3673
|
+
<AntdApiRef url="https://ant.design/components/checkbox-cn/#api"></AntdApiRef>
|
|
3674
|
+
|
|
3675
|
+
|
|
3676
|
+
## antd API
|
|
3677
|
+
|
|
3678
|
+
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3679
|
+
|
|
3680
|
+
#### Checkbox
|
|
3681
|
+
|
|
3682
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3683
|
+
|--------|--------|--------|--------|--------|
|
|
3684
|
+
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
3685
|
+
| checked | 指定当前是否选中 | boolean | false | |
|
|
3686
|
+
| defaultChecked | 初始是否选中 | boolean | false | |
|
|
3687
|
+
| disabled | 失效状态 | boolean | false | |
|
|
3688
|
+
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false | |
|
|
3689
|
+
| onChange | 变化时的回调函数 | (e: CheckboxChangeEvent) => void | - | |
|
|
3690
|
+
| onBlur | 失去焦点时的回调 | function() | - | |
|
|
3691
|
+
| onFocus | 获得焦点时的回调 | function() | - | |
|
|
3692
|
+
|
|
3693
|
+
|
|
3694
|
+
#### Checkbox.Group
|
|
3695
|
+
|
|
3696
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
3697
|
+
|--------|--------|--------|--------|--------|
|
|
3698
|
+
| defaultValue | 默认选中的选项 | (string \| number)[] | [] | |
|
|
3699
|
+
| disabled | 整组失效 | boolean | false | |
|
|
3700
|
+
| name | CheckboxGroup 下所有 | string | - | |
|
|
3701
|
+
| options | 指定可选项 | string[] \| number[] \| Option[] | [] | |
|
|
3702
|
+
| value | 指定选中的选项 | (string \| number \| boolean)[] | [] | |
|
|
3703
|
+
| title | 选项的 title | string | - | |
|
|
3704
|
+
| className | 选项的类名 | string | - | 5.25.0 |
|
|
3705
|
+
| style | 选项的样式 | React.CSSProperties | - | |
|
|
3706
|
+
| onChange | 变化时的回调函数 | (checkedValue: T[]) => void | - | |
|
|
3707
|
+
|
|
3734
3708
|
|
|
3735
|
-
|
|
3736
|
-
<span>{currentRoute.title}</span>
|
|
3737
|
-
) : (
|
|
3738
|
-
<Link to={`/${paths.join('/')}`}>{currentRoute.title}</Link>
|
|
3739
|
-
);
|
|
3740
|
-
}
|
|
3709
|
+
##### Option
|
|
3741
3710
|
|
|
3742
|
-
|
|
3711
|
+
|
|
3712
|
+
```typescript
|
|
3713
|
+
interface Option {
|
|
3714
|
+
label: string;
|
|
3715
|
+
value: string;
|
|
3716
|
+
disabled?: boolean;
|
|
3717
|
+
}
|
|
3743
3718
|
```
|
|
3744
3719
|
|
|
3745
3720
|
|
|
3721
|
+
### 方法
|
|
3746
3722
|
|
|
3723
|
+
#### Checkbox
|
|
3747
3724
|
|
|
3748
|
-
|
|
3725
|
+
| 名称 | 描述 | 版本 |
|
|
3726
|
+
|--------|--------|--------|
|
|
3727
|
+
| blur() | 移除焦点 | |
|
|
3728
|
+
| focus() | 获取焦点 | |
|
|
3729
|
+
| nativeElement | 返回 Checkbox 的 DOM 节点 | 5.17.3 |
|
|
3730
|
+
|
|
3731
|
+
|
|
3732
|
+
|
|
3733
|
+
|
|
3734
|
+
<DemoTitle title="Button" desc="按钮用于开始一个即时操作。">
|
|
3749
3735
|
#### API
|
|
3750
3736
|
|
|
3751
|
-
|
|
3737
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
3738
|
+
|--------|--------|--------|--------|
|
|
3739
|
+
| size | 按钮大小 | 'small' \| 'middle' \| 'large' | 'middle' |
|
|
3740
|
+
| type | 类型 | \| 'primary'
|
|
3741
|
+
\| 'dashed'
|
|
3742
|
+
\| 'link'
|
|
3743
|
+
\| 'text'
|
|
3744
|
+
\| 'default'
|
|
3745
|
+
\| 'primaryLess'
|
|
3746
|
+
\| 'textCompact' | 'deafult' |
|
|
3747
|
+
| tooltipContent | hover上去tooltip的内容 | string \| ReactNode | |
|
|
3748
|
+
| iconType | 百炼图标iconfont的key，依赖ConfigProvider传入的iconfont，例如bl-icon-add | string | |
|
|
3749
|
+
| iconSize | 图标大小 | SparkIconFontProps['size'] | |
|
|
3750
|
+
|
|
3751
|
+
<AntdApiRef url="https://ant.design/components/button-cn/#api"></AntdApiRef>
|
|
3752
3752
|
|
|
3753
3753
|
|
|
3754
3754
|
## antd API
|
|
3755
3755
|
|
|
3756
3756
|
通用属性参考：[通用属性](/docs/react/common-props)
|
|
3757
3757
|
|
|
3758
|
-
|
|
3758
|
+
通过设置 Button 的属性来产生不同的按钮样式，推荐顺序为：`type` -> `shape` -> `size` -> `loading` -> `disabled`。
|
|
3759
3759
|
|
|
3760
|
-
|
|
3761
|
-
|--------|--------|--------|--------|--------|
|
|
3762
|
-
| alt | 图像无法显示时的替代文本 | string | - | |
|
|
3763
|
-
| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 |
|
|
3764
|
-
| icon | 设置头像的自定义图标 | ReactNode | - | |
|
|
3765
|
-
| shape | 指定头像的形状 | circle | circle | |
|
|
3766
|
-
| size | 设置头像的大小 | number \| | default | 4.7.0 |
|
|
3767
|
-
| src | 图片类头像的资源地址或者图片元素 | string \| ReactNode | - | ReactNode: 4.8.0 |
|
|
3768
|
-
| srcSet | 设置图片类头像响应式资源地址 | string | - | |
|
|
3769
|
-
| draggable | 图片是否允许拖动 | boolean \| | true | |
|
|
3770
|
-
| crossOrigin | CORS 属性设置 | 'anonymous' | - | 4.17.0 |
|
|
3771
|
-
| onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - | |
|
|
3760
|
+
按钮的属性说明如下：
|
|
3772
3761
|
|
|
3762
|
+
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
|
3763
|
+
|--------|--------|--------|--------|--------|
|
|
3764
|
+
| autoInsertSpace | 我们默认提供两个汉字之间的空格，可以设置 | boolean | true | 5.17.0 |
|
|
3765
|
+
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
|
3766
|
+
| classNames | 语义化结构 class | | - | 5.4.0 |
|
|
3767
|
+
| color | 设置按钮的颜色 | default | - | default |
|
|
3768
|
+
| danger | 语法糖，设置危险按钮。当设置 | boolean | false | |
|
|
3769
|
+
| disabled | 设置按钮失效状态 | boolean | false | |
|
|
3770
|
+
| ghost | 幽灵属性，使按钮背景透明 | boolean | false | |
|
|
3771
|
+
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
3772
|
+
| htmlType | 设置 | submit | button | |
|
|
3773
|
+
| iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
|
|
3774
|
+
| loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
3775
|
+
| styles | 语义化结构 style | | - | 5.4.0 |
|
|
3776
|
+
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
|
|
3777
|
+
| onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
|
|
3778
|
+
| variant | 设置按钮的变体 | outlined | - | 5.21.0 |
|
|
3773
3779
|
|
|
3774
|
-
Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fallback 行为，优先级为 `icon` > `children`
|
|
3775
3780
|
|
|
3776
|
-
|
|
3781
|
+
支持原生 button 的其他所有属性。
|
|
3777
3782
|
|
|
3778
|
-
|
|
3779
|
-
|--------|--------|--------|--------|--------|
|
|
3780
|
-
| max | 设置最多显示相关配置， | { count?: number; style?: CSSProperties; popover?: PopoverProps } | - | 5.18.0 |
|
|
3781
|
-
| size | 设置头像的大小 | number \| | default | 4.8.0 |
|
|
3782
|
-
| shape | 设置头像的形状 | circle | circle | 5.8.0 |
|
|
3783
|
+
### PresetColors
|
|
3783
3784
|
|
|
3785
|
+
type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
|
|
3784
3786
|
|
|
3785
3787
|
|
|
3786
3788
|
|
|
@@ -4044,891 +4046,6 @@ const confirmed = await modal.confirm({ ... });
|
|
|
4044
4046
|
|
|
4045
4047
|
|
|
4046
4048
|
|
|
4047
|
-
## 内置主题
|
|
4048
|
-
|
|
4049
|
-
Alibaba Cloud Spark Design 提供四种内置主题：
|
|
4050
|
-
|
|
4051
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
|
|
4052
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
|
|
4053
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
|
|
4054
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #676767;"></span> carbonDarkTheme（暗色模式）</div>
|
|
4055
|
-
|
|
4056
|
-
### 示例用法
|
|
4057
|
-
|
|
4058
|
-
|
|
4059
|
-
```tsx
|
|
4060
|
-
import { ConfigProvider, purpleTheme } from '@agentscope-ai/design';
|
|
4061
|
-
|
|
4062
|
-
const App = () => {
|
|
4063
|
-
return <ConfigProvider {...purpleTheme}>Hello Spark Design!</ConfigProvider>;
|
|
4064
|
-
};
|
|
4065
|
-
|
|
4066
|
-
export default App;
|
|
4067
|
-
```
|
|
4068
|
-
|
|
4069
|
-
|
|
4070
|
-
## 从 Antd token 生成您自己的主题
|
|
4071
|
-
|
|
4072
|
-
如果您已经有了 Antd 主题，仍然可以使用 generateThemeByToken 生成 spark 风格的主题
|
|
4073
|
-
|
|
4074
|
-
|
|
4075
|
-
```tsx
|
|
4076
|
-
import { ConfigProvider, generateThemeByToken } from '@agentscope-ai/design';
|
|
4077
|
-
const yourToken = {
|
|
4078
|
-
borderRadiusXS: 2,
|
|
4079
|
-
borderRadiusSM: 4,
|
|
4080
|
-
borderRadius: 6,
|
|
4081
|
-
borderRadiusLG: 8,
|
|
4082
|
-
borderRadiusXL: 12,
|
|
4083
|
-
borderRadiusFull: 999,
|
|
4084
|
-
wireframe: false,
|
|
4085
|
-
colorPrimaryBg: '#F2F0FF',
|
|
4086
|
-
colorPrimaryBgHover: '#F2F0FF',
|
|
4087
|
-
colorPrimaryBorder: '#E2DEFF',
|
|
4088
|
-
colorPrimaryBorderHover: '#BCB5FF',
|
|
4089
|
-
// ... 您可以在下一个文档中找到完整版本的 tokens：Tokens 和 CSS 变量
|
|
4090
|
-
};
|
|
4091
|
-
const darkMode = false;
|
|
4092
|
-
const yourThemeWithSparkStyle = generateThemeByToken(yourToken, darkMode);
|
|
4093
|
-
const App = () => {
|
|
4094
|
-
return (
|
|
4095
|
-
<ConfigProvider {...yourThemeWithSparkStyle}>
|
|
4096
|
-
Hello Spark Design!
|
|
4097
|
-
</ConfigProvider>
|
|
4098
|
-
);
|
|
4099
|
-
};
|
|
4100
|
-
|
|
4101
|
-
export default App;
|
|
4102
|
-
```
|
|
4103
|
-
|
|
4104
|
-
|
|
4105
|
-
您仍然可以修改生成的主题：`yourThemeWithSparkStyle`，但不建议这样做。我们建议您保持原始主题以获得 Spark Design 的最佳体验。
|
|
4106
|
-
|
|
4107
|
-
|
|
4108
|
-
|
|
4109
|
-
<div align="center"><a name="readme-top"></a>
|
|
4110
|
-
<img height="120" src="https://img.alicdn.com/imgextra/i1/O1CN01ipemFb1EzmZI9LiTe_!!6000000000423-55-tps-28-28.svg" style="border: none">
|
|
4111
|
-
<h1>Alibaba Cloud Spark Design</h1>
|
|
4112
|
-
</div>
|
|
4113
|
-
|
|
4114
|
-
# 概述
|
|
4115
|
-
|
|
4116
|
-
Alibaba Cloud Spark Design 是一个基于 Ant Design 的 React UI 组件库，包含丰富的基础组件和场景组件，专为构建优秀的 LLM 产品而设计。
|
|
4117
|
-
<br />
|
|
4118
|
-
<br />
|
|
4119
|
-
|
|
4120
|
-
## ✨ 特性
|
|
4121
|
-
|
|
4122
|
-
|
|
4123
|
-
- <img height="15" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg"> 基于 Ant Design，兼容 Ant Design 生态系统。您可以无需修改代码即可切换到 Spark Design。
|
|
4124
|
-
- 🛡 使用 TypeScript 编写，具有可预测的静态类型。
|
|
4125
|
-
- 🧠 为 LLM 产品设计的各种场景组件。
|
|
4126
|
-
- 💡 与@agentscope-ai/chat 和 @agentscope-ai/flow 配合使用，构建企业级 LLM 应用。
|
|
4127
|
-
- 🎨 多种预设主题。
|
|
4128
|
-
- ☀️ 轻松切换明暗模式。
|
|
4129
|
-
|
|
4130
|
-
## 📦 安装
|
|
4131
|
-
|
|
4132
|
-
|
|
4133
|
-
```bash
|
|
4134
|
-
npm install antd @agentscope-ai/icons @agentscope-ai/design --save
|
|
4135
|
-
```
|
|
4136
|
-
|
|
4137
|
-
|
|
4138
|
-
## Tree Shaking 支持
|
|
4139
|
-
|
|
4140
|
-
@agentscope-ai/design 默认基于 ES 模块支持 tree shaking
|
|
4141
|
-
|
|
4142
|
-
## TypeScript
|
|
4143
|
-
|
|
4144
|
-
@agentscope-ai/chat 使用 TypeScript 编写并提供完整的定义文件。
|
|
4145
|
-
|
|
4146
|
-
## 内置主题
|
|
4147
|
-
|
|
4148
|
-
我们提供四种内置主题：
|
|
4149
|
-
|
|
4150
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
|
|
4151
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
|
|
4152
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
|
|
4153
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #676767;"></span> carbonDarkTheme（暗色模式）</div>
|
|
4154
|
-
|
|
4155
|
-
## 🏗️ 开源
|
|
4156
|
-
|
|
4157
|
-
[@agentscope-ai/design](https://www.npmjs.com/package/@agentscope-ai/design) 和 [@agentscope-ai/chat](https://www.npmjs.com/package/@agentscope-ai/chat) 正在积极推进开源，预计将在 2025 年底完成。目前，您可以通过 npm 访问我们的项目。
|
|
4158
|
-
|
|
4159
|
-
|
|
4160
|
-
|
|
4161
|
-
# 使用
|
|
4162
|
-
|
|
4163
|
-
如果您有自己的 iconfont 项目，可以将您的图标集成到 Spark Design 中，并通过简单的符号名称访问您的图标。
|
|
4164
|
-
|
|
4165
|
-
|
|
4166
|
-
```tsx
|
|
4167
|
-
import {
|
|
4168
|
-
ConfigProvider,
|
|
4169
|
-
purpleTheme,
|
|
4170
|
-
Button,
|
|
4171
|
-
IconFont,
|
|
4172
|
-
IconButton,
|
|
4173
|
-
} from '@agentscope-ai/design';
|
|
4174
|
-
import { Flex } from 'antd';
|
|
4175
|
-
import zhCN from 'antd/locale/zh_CN';
|
|
4176
|
-
import { useState } from 'react';
|
|
4177
|
-
|
|
4178
|
-
const App = () => {
|
|
4179
|
-
const prefix = 'sps';
|
|
4180
|
-
const iconSymbol = 'spark-effciency-line';
|
|
4181
|
-
const iconfont = '//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js'; // 您可以从 https://www.iconfont.cn/ 获取
|
|
4182
|
-
return (
|
|
4183
|
-
<ConfigProvider
|
|
4184
|
-
{...purpleTheme}
|
|
4185
|
-
prefix={prefix}
|
|
4186
|
-
prefixCls={prefix}
|
|
4187
|
-
iconfont={iconfont}
|
|
4188
|
-
locale={zhCN}
|
|
4189
|
-
style={{
|
|
4190
|
-
width: '100%',
|
|
4191
|
-
height: '100%',
|
|
4192
|
-
}}
|
|
4193
|
-
>
|
|
4194
|
-
<Flex
|
|
4195
|
-
style={{
|
|
4196
|
-
width: '100%',
|
|
4197
|
-
height: '100%',
|
|
4198
|
-
backgroundColor: `var(--${prefix}-color-bg-base)`,
|
|
4199
|
-
}}
|
|
4200
|
-
justify="center"
|
|
4201
|
-
align="center"
|
|
4202
|
-
>
|
|
4203
|
-
<Flex vertical gap={16} style={{ width: '300px', padding: '12px 0' }}>
|
|
4204
|
-
<Flex gap={8}>
|
|
4205
|
-
<div style={{ width: '100px', lineHeight: '32px' }}>IconFont:</div>
|
|
4206
|
-
<IconFont type={iconSymbol} />
|
|
4207
|
-
</Flex>
|
|
4208
|
-
<Flex gap={8}>
|
|
4209
|
-
<div style={{ width: '100px', lineHeight: '32px' }}>Button:</div>
|
|
4210
|
-
<Button type="primary" iconType={iconSymbol}>
|
|
4211
|
-
添加用户
|
|
4212
|
-
</Button>
|
|
4213
|
-
</Flex>
|
|
4214
|
-
<Flex gap={8}>
|
|
4215
|
-
<div style={{ width: '100px', lineHeight: '32px' }}>
|
|
4216
|
-
IconButton:
|
|
4217
|
-
</div>
|
|
4218
|
-
<IconButton iconType={iconSymbol}></IconButton>
|
|
4219
|
-
</Flex>
|
|
4220
|
-
</Flex>
|
|
4221
|
-
</Flex>
|
|
4222
|
-
</ConfigProvider>
|
|
4223
|
-
);
|
|
4224
|
-
};
|
|
4225
|
-
|
|
4226
|
-
export default App;
|
|
4227
|
-
```
|
|
4228
|
-
|
|
4229
|
-
|
|
4230
|
-
|
|
4231
|
-
|
|
4232
|
-
# 从 Antd 迁移
|
|
4233
|
-
|
|
4234
|
-
## 📦 安装
|
|
4235
|
-
|
|
4236
|
-
|
|
4237
|
-
```bash
|
|
4238
|
-
$ npm install @agentscope-ai/icons @agentscope-ai/design --save
|
|
4239
|
-
```
|
|
4240
|
-
|
|
4241
|
-
|
|
4242
|
-
## 🔨 使用
|
|
4243
|
-
|
|
4244
|
-
从 @agentscope-ai/design 导出的所有同名组件在 API 方面都与 antd 的对应组件兼容，这意味着您无需学习如何使用它们。如果您想充分利用 Alibaba Cloud Spark Design 的新功能，可以尝试使用这些组件而不是 antd 的组件。
|
|
4245
|
-
|
|
4246
|
-
|
|
4247
|
-
```tsx
|
|
4248
|
-
import {
|
|
4249
|
-
Button,
|
|
4250
|
-
Image,
|
|
4251
|
-
ConfigProvider,
|
|
4252
|
-
purpleDarkTheme,
|
|
4253
|
-
purpleTheme,
|
|
4254
|
-
} from '@agentscope-ai/design';
|
|
4255
|
-
import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
|
|
4256
|
-
import { Flex } from 'antd';
|
|
4257
|
-
import zhCN from 'antd/locale/zh_CN';
|
|
4258
|
-
import { useState } from 'react';
|
|
4259
|
-
|
|
4260
|
-
const App = () => {
|
|
4261
|
-
const [colorMode, setColorMode] = useState('light');
|
|
4262
|
-
const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
|
|
4263
|
-
|
|
4264
|
-
const prefix = 'sps';
|
|
4265
|
-
return (
|
|
4266
|
-
<ConfigProvider
|
|
4267
|
-
{...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
|
|
4268
|
-
prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
|
|
4269
|
-
prefixCls={prefix}
|
|
4270
|
-
iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
|
|
4271
|
-
locale={zhCN} // 来自 Ant Design 的语言包
|
|
4272
|
-
style={{
|
|
4273
|
-
width: '100%',
|
|
4274
|
-
height: '100%',
|
|
4275
|
-
}}
|
|
4276
|
-
>
|
|
4277
|
-
<div
|
|
4278
|
-
style={{
|
|
4279
|
-
width: '100%',
|
|
4280
|
-
height: '100%',
|
|
4281
|
-
backgroundColor: `var(--${prefix}-color-bg-base)`,
|
|
4282
|
-
}}
|
|
4283
|
-
>
|
|
4284
|
-
<Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
|
|
4285
|
-
<Image
|
|
4286
|
-
width={120}
|
|
4287
|
-
src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
|
|
4288
|
-
/>
|
|
4289
|
-
<div
|
|
4290
|
-
style={{
|
|
4291
|
-
color: `var(--${prefix}-ant-color-text-base)`,
|
|
4292
|
-
fontSize: '24px',
|
|
4293
|
-
textAlign: 'center',
|
|
4294
|
-
}}
|
|
4295
|
-
>
|
|
4296
|
-
Hello Spark Design!
|
|
4297
|
-
</div>
|
|
4298
|
-
<Button
|
|
4299
|
-
type="primary"
|
|
4300
|
-
onClick={() => {
|
|
4301
|
-
setColorMode(colorMode === 'light' ? 'dark' : 'light');
|
|
4302
|
-
}}
|
|
4303
|
-
icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
|
|
4304
|
-
>
|
|
4305
|
-
{colorMode === 'light' ? '暗色' : '亮色'} 模式
|
|
4306
|
-
</Button>
|
|
4307
|
-
</Flex>
|
|
4308
|
-
</div>
|
|
4309
|
-
</ConfigProvider>
|
|
4310
|
-
);
|
|
4311
|
-
};
|
|
4312
|
-
|
|
4313
|
-
export default App;
|
|
4314
|
-
```
|
|
4315
|
-
|
|
4316
|
-
|
|
4317
|
-
如果您想继续使用 antd 的组件，那也没问题。您只需要将 antd 的 ConfigProvider 替换为 @agentscope-ai/design 的即可。
|
|
4318
|
-
|
|
4319
|
-
|
|
4320
|
-
```tsx
|
|
4321
|
-
import {
|
|
4322
|
-
ConfigProvider,
|
|
4323
|
-
purpleDarkTheme,
|
|
4324
|
-
purpleTheme,
|
|
4325
|
-
} from '@agentscope-ai/design';
|
|
4326
|
-
import { Button, Image, Flex } from 'antd';
|
|
4327
|
-
import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
|
|
4328
|
-
import zhCN from 'antd/locale/zh_CN';
|
|
4329
|
-
import { useState } from 'react';
|
|
4330
|
-
|
|
4331
|
-
const App = () => {
|
|
4332
|
-
const [colorMode, setColorMode] = useState('light');
|
|
4333
|
-
const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
|
|
4334
|
-
|
|
4335
|
-
const prefix = 'sps';
|
|
4336
|
-
return (
|
|
4337
|
-
<ConfigProvider
|
|
4338
|
-
{...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
|
|
4339
|
-
prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
|
|
4340
|
-
prefixCls={prefix}
|
|
4341
|
-
iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
|
|
4342
|
-
locale={zhCN} // 来自 Ant Design 的语言包
|
|
4343
|
-
style={{
|
|
4344
|
-
width: '100%',
|
|
4345
|
-
height: '100%',
|
|
4346
|
-
}}
|
|
4347
|
-
>
|
|
4348
|
-
<div
|
|
4349
|
-
style={{
|
|
4350
|
-
width: '100%',
|
|
4351
|
-
height: '100%',
|
|
4352
|
-
backgroundColor: `var(--${prefix}-color-bg-base)`,
|
|
4353
|
-
}}
|
|
4354
|
-
>
|
|
4355
|
-
<Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
|
|
4356
|
-
<Image
|
|
4357
|
-
width={120}
|
|
4358
|
-
src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
|
|
4359
|
-
/>
|
|
4360
|
-
<div
|
|
4361
|
-
style={{
|
|
4362
|
-
color: `var(--${prefix}-ant-color-text-base)`,
|
|
4363
|
-
fontSize: '24px',
|
|
4364
|
-
textAlign: 'center',
|
|
4365
|
-
}}
|
|
4366
|
-
>
|
|
4367
|
-
Hello Spark Design!
|
|
4368
|
-
</div>
|
|
4369
|
-
<Button
|
|
4370
|
-
type="primary"
|
|
4371
|
-
onClick={() => {
|
|
4372
|
-
setColorMode(colorMode === 'light' ? 'dark' : 'light');
|
|
4373
|
-
}}
|
|
4374
|
-
icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
|
|
4375
|
-
>
|
|
4376
|
-
{colorMode === 'light' ? '暗色' : '亮色'} 模式
|
|
4377
|
-
</Button>
|
|
4378
|
-
</Flex>
|
|
4379
|
-
</div>
|
|
4380
|
-
</ConfigProvider>
|
|
4381
|
-
);
|
|
4382
|
-
};
|
|
4383
|
-
|
|
4384
|
-
export default App;
|
|
4385
|
-
```
|
|
4386
|
-
|
|
4387
|
-
|
|
4388
|
-
|
|
4389
|
-
|
|
4390
|
-
# Vibe 编程
|
|
4391
|
-
|
|
4392
|
-
## LLMs.txt
|
|
4393
|
-
|
|
4394
|
-
为了让 Cursor 和 Claude Code 等工具理解 Spark Design，我们支持 LLMs.txt 文件，使 Spark Design 的文档可供大型语言模型使用。
|
|
4395
|
-
|
|
4396
|
-
|
|
4397
|
-
- [index.llms.txt](https://g.alicdn.com/code/npm/@ali/agentscope-ai-design/4.7.2/docs-dist/llms/index.llms.txt)：主要的 LLMs.txt 索引文件
|
|
4398
|
-
- [all.llms.txt](https://g.alicdn.com/code/npm/@ali/agentscope-ai-design/4.7.2/docs-dist/llms/all.llms.txt)：Spark Design 的完整文档
|
|
4399
|
-
|
|
4400
|
-
在 Cursor 中使用 @Docs 功能将 LLMs.txt 文件包含在您的项目中。[了解更多](https://docs.cursor.com/en/context/@-symbols/@-docs)
|
|
4401
|
-
|
|
4402
|
-
## D2C
|
|
4403
|
-
|
|
4404
|
-
在前端使用 Alibaba Cloud Spark Design、设计稿使用 Spark Design 套件的前提下，通过 masterGo 视觉稿生成代码可以做到以下几点：
|
|
4405
|
-
|
|
4406
|
-
|
|
4407
|
-
- 准确识别 icon
|
|
4408
|
-
- 使用标准 css token
|
|
4409
|
-
- 无需测量间距、圆角等数据，AI 直接还原布局（90%以上概率准确生成）
|
|
4410
|
-
- 使用标准组件还原页面，大部分标准组件可一次性正确生成，无需二次调整
|
|
4411
|
-
|
|
4412
|
-
<div>
|
|
4413
|
-
<video style="width: 100%" controls src="https://cloud.video.taobao.com/vod/PrrYzvYJkoDlbJwoL8Ei1Bo_60LrKAROCojWxB_EAYs.mp4" />
|
|
4414
|
-
</div>
|
|
4415
|
-
|
|
4416
|
-
我们会在不久的将来开放 masterGo 的设计套件和 rules，帮助您高效率还原视觉稿
|
|
4417
|
-
|
|
4418
|
-
|
|
4419
|
-
|
|
4420
|
-
# Tokens
|
|
4421
|
-
|
|
4422
|
-
除了来自 [antd](https://ant.design/theme-editor) 的固有 tokens 之外，Spark Design 在原有基础上扩展了更多变量。完整的 token 示例如下所示：
|
|
4423
|
-
|
|
4424
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #615CED;"></span> purpleTheme</div>
|
|
4425
|
-
|
|
4426
|
-
```json
|
|
4427
|
-
{
|
|
4428
|
-
"borderRadiusXS": 2,
|
|
4429
|
-
"borderRadiusSM": 4,
|
|
4430
|
-
"borderRadius": 6,
|
|
4431
|
-
"borderRadiusLG": 8,
|
|
4432
|
-
"borderRadiusXL": 12,
|
|
4433
|
-
"borderRadiusFull": 999,
|
|
4434
|
-
"wireframe": false,
|
|
4435
|
-
"colorPrimaryBg": "#F2F0FF",
|
|
4436
|
-
"colorPrimaryBgHover": "#F2F0FF",
|
|
4437
|
-
"colorPrimaryBorder": "#E2DEFF",
|
|
4438
|
-
"colorPrimaryBorderHover": "#BCB5FF",
|
|
4439
|
-
"colorPrimaryHover": "#9189FA",
|
|
4440
|
-
"colorPrimary": "#615CED",
|
|
4441
|
-
"colorPrimaryActive": "#4444C7",
|
|
4442
|
-
"colorPrimaryTextHover": "#9189FA",
|
|
4443
|
-
"colorPrimaryText": "#615CED",
|
|
4444
|
-
"colorPrimaryTextActive": "#4444C7",
|
|
4445
|
-
"colorTextBase": "#26244c",
|
|
4446
|
-
"colorBgBase": "#FFFFFF",
|
|
4447
|
-
"colorText": "rgba(38, 36, 76, 0.88)",
|
|
4448
|
-
"colorTextSecondary": "rgba(38, 36, 76, 0.65)",
|
|
4449
|
-
"colorTextTertiary": "rgba(38, 36, 76, 0.45)",
|
|
4450
|
-
"colorTextQuaternary": "rgba(38, 36, 76, 0.25)",
|
|
4451
|
-
"colorBorder": "#cdd0dc",
|
|
4452
|
-
"colorBorderSecondary": "#e6e8ee",
|
|
4453
|
-
"colorFill": "#cdd0dc5c",
|
|
4454
|
-
"colorFillSecondary": "#cdd0dc33",
|
|
4455
|
-
"colorFillTertiary": "#cdd0dc26",
|
|
4456
|
-
"colorFillQuaternary": "#cdd0dc1a",
|
|
4457
|
-
"colorBgContainer": "#FFFFFF",
|
|
4458
|
-
"colorBgElevated": "#FFFFFF",
|
|
4459
|
-
"colorBgLayout": "#f9fafd",
|
|
4460
|
-
"colorBgSpotlight": "rgba(38, 36, 76, 0.85)",
|
|
4461
|
-
"colorBgMask": "rgba(20, 19, 39, 0.45)",
|
|
4462
|
-
"colorInfo": "#0B83F1",
|
|
4463
|
-
"colorInfoHover": "#5EBCFF",
|
|
4464
|
-
"colorInfoBorder": "#87D1FF",
|
|
4465
|
-
"colorInfoText": "#0B83F1",
|
|
4466
|
-
"colorInfoBg": "#E6F7FF",
|
|
4467
|
-
"colorInfoBgHover": "#B0E3FF",
|
|
4468
|
-
"colorInfoBorderHover": "#5EBCFF",
|
|
4469
|
-
"colorSuccess": "#5BB98B",
|
|
4470
|
-
"colorSuccessHover": "#ABD4BE",
|
|
4471
|
-
"colorSuccessBg": "#EBFAF0",
|
|
4472
|
-
"colorSuccessBgHover": "#DFEDE4",
|
|
4473
|
-
"colorSuccessBorder": "#D3E0D9",
|
|
4474
|
-
"colorSuccessBorderHover": "#ABD4BE",
|
|
4475
|
-
"colorWarning": "#FAAD14",
|
|
4476
|
-
"colorWarningHover": "#FFD666",
|
|
4477
|
-
"colorWarningBg": "#FFFBE6",
|
|
4478
|
-
"colorWarningBgHover": "#FFF1B8",
|
|
4479
|
-
"colorWarningBorder": "#FFE58F",
|
|
4480
|
-
"colorWarningBorderHover": "#FFD666",
|
|
4481
|
-
"colorError": "#FF4D4F",
|
|
4482
|
-
"colorErrorHover": "#FF7875",
|
|
4483
|
-
"colorErrorBg": "#FFF2F0",
|
|
4484
|
-
"colorErrorBgHover": "#FFF1F0",
|
|
4485
|
-
"colorErrorBorder": "#FFCCC7",
|
|
4486
|
-
"colorErrorBorderHover": "#FFA39E",
|
|
4487
|
-
"colorLink": "#615CED",
|
|
4488
|
-
"boxShadow": "0px 4px 6px 0px rgba(0, 0, 0, 0.08)",
|
|
4489
|
-
"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)",
|
|
4490
|
-
"colorTextWhite": "#fff",
|
|
4491
|
-
"colorFillDisable": "#DBDAE7",
|
|
4492
|
-
"colorPurple": "#615CED",
|
|
4493
|
-
"colorPurpleHover": "#8080FF",
|
|
4494
|
-
"colorPurpleBg": "rgba(226, 222, 255, 0.8)",
|
|
4495
|
-
"colorPink": "#EC4899",
|
|
4496
|
-
"colorPinkHover": "#E593BC",
|
|
4497
|
-
"colorPinkBg": "rgba(251, 220, 239, 0.8)",
|
|
4498
|
-
"colorYellow": "#EAB308",
|
|
4499
|
-
"colorYellowHover": "#F1D372",
|
|
4500
|
-
"colorYellowBg": "rgba(255, 250, 184, 0.8)",
|
|
4501
|
-
"colorOrange": "#FA8125",
|
|
4502
|
-
"colorOrangeHover": "#E88C45",
|
|
4503
|
-
"colorOrangeBg": "rgba(255, 232, 201, 0.8)",
|
|
4504
|
-
"colorTeal": "#14B8A6",
|
|
4505
|
-
"colorTealHover": "#5FB3A9",
|
|
4506
|
-
"colorTealBg": "rgba(200, 244, 233, 0.8)",
|
|
4507
|
-
"colorBlue": "#0090FF",
|
|
4508
|
-
"colorBlueHover": "#72BCF5",
|
|
4509
|
-
"colorBlueBg": "rgba(194, 229, 255, 0.8)",
|
|
4510
|
-
"colorMauve": "#8E8C99",
|
|
4511
|
-
"colorMauveHover": "#C0BFC8",
|
|
4512
|
-
"colorMauveBg": "rgba(239, 240, 243, 0.8)",
|
|
4513
|
-
"colorSlate": "#1E293B",
|
|
4514
|
-
"colorSlateHover": "#475569",
|
|
4515
|
-
"colorSlateBg": "#E2E8F0",
|
|
4516
|
-
"colorLavender": "#A77BFF",
|
|
4517
|
-
"colorLavenderHover": "#BB99FF",
|
|
4518
|
-
"colorLavenderBg": "rgba(226, 212, 255, 0.8)",
|
|
4519
|
-
|
|
4520
|
-
"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)",
|
|
4521
|
-
"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)",
|
|
4522
|
-
"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)"
|
|
4523
|
-
}
|
|
4524
|
-
```
|
|
4525
|
-
|
|
4526
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: #5551CC;"></span> purpleDarkTheme（暗色模式）</div>
|
|
4527
|
-
|
|
4528
|
-
```json
|
|
4529
|
-
{
|
|
4530
|
-
"borderRadiusXS": 2,
|
|
4531
|
-
"borderRadiusSM": 4,
|
|
4532
|
-
"borderRadius": 6,
|
|
4533
|
-
"borderRadiusLG": 8,
|
|
4534
|
-
"borderRadiusXL": 12,
|
|
4535
|
-
"borderRadiusFull": 999,
|
|
4536
|
-
"wireframe": false,
|
|
4537
|
-
"colorPrimaryBg": "#202041",
|
|
4538
|
-
"colorPrimaryBgHover": "#202041",
|
|
4539
|
-
"colorPrimaryBorder": "#2B2A55",
|
|
4540
|
-
"colorPrimaryBorderHover": "#373476",
|
|
4541
|
-
"colorPrimaryHover": "#857DE3",
|
|
4542
|
-
"colorPrimary": "#5551CC",
|
|
4543
|
-
"colorPrimaryActive": "#4643A1",
|
|
4544
|
-
"colorPrimaryTextHover": "#857DE3",
|
|
4545
|
-
"colorPrimaryText": "#5551CC",
|
|
4546
|
-
"colorPrimaryTextActive": "#4643A1",
|
|
4547
|
-
"colorTextBase": "#E7E7ED",
|
|
4548
|
-
"colorBgBase": "#000000",
|
|
4549
|
-
"colorText": "rgba(231, 231, 237, 0.88)",
|
|
4550
|
-
"colorTextSecondary": "rgba(231, 231, 237, 0.65)",
|
|
4551
|
-
"colorTextTertiary": "rgba(231, 231, 237, 0.45)",
|
|
4552
|
-
"colorTextQuaternary": "rgba(231, 231, 237, 0.25)",
|
|
4553
|
-
"colorBorder": "rgba(71, 71, 97, 0.8)",
|
|
4554
|
-
"colorBorderSecondary": "rgba(56, 56, 76, 0.8)",
|
|
4555
|
-
"colorFill": "rgba(231, 231, 237, 0.18)",
|
|
4556
|
-
"colorFillSecondary": "rgba(231, 231, 237, 0.12)",
|
|
4557
|
-
"colorFillTertiary": "rgba(231, 231, 237, 0.08)",
|
|
4558
|
-
"colorFillQuaternary": "rgba(231, 231, 237, 0.04)",
|
|
4559
|
-
"colorBgContainer": "#0F0F14",
|
|
4560
|
-
"colorBgElevated": "#0F0F14",
|
|
4561
|
-
"colorBgLayout": "#0F0F14",
|
|
4562
|
-
"colorBgSpotlight": "rgba(71, 71, 97, 0.85)",
|
|
4563
|
-
"colorBgMask": "rgba(5, 5, 8, 0.8)",
|
|
4564
|
-
"colorInfo": "#0B83F1",
|
|
4565
|
-
"colorInfoHover": "rgba(42, 114, 165, 1)",
|
|
4566
|
-
"colorInfoBorder": "rgba(135, 209, 255, 0.2)",
|
|
4567
|
-
"colorInfoText": "#0B83F1",
|
|
4568
|
-
"colorInfoBg": "rgba(27, 73, 115, 0.25)",
|
|
4569
|
-
"colorInfoBgHover": "rgba(27, 73, 115, 0.32)",
|
|
4570
|
-
"colorInfoBorderHover": "rgba(94, 188, 255, 0.2)",
|
|
4571
|
-
"colorSuccess": "#5BB98B",
|
|
4572
|
-
"colorSuccessHover": "rgba(87, 141, 112, 1)",
|
|
4573
|
-
"colorSuccessBg": "rgba(0, 50, 26, 0.25)",
|
|
4574
|
-
"colorSuccessBgHover": "rgba(0, 50, 26, 0.32)",
|
|
4575
|
-
"colorSuccessBorder": "rgba(211, 224, 217, 0.2)",
|
|
4576
|
-
"colorSuccessBorderHover": "rgba(171, 212, 190, 0.2)",
|
|
4577
|
-
"colorWarning": "#FAAD14",
|
|
4578
|
-
"colorWarningHover": "rgba(170, 136, 43, 1)",
|
|
4579
|
-
"colorWarningBg": "rgba(129, 116, 49, 0.25)",
|
|
4580
|
-
"colorWarningBgHover": "rgba(129, 116, 49, 0.32)",
|
|
4581
|
-
"colorWarningBorder": "rgba(255, 229, 143, 0.2)",
|
|
4582
|
-
"colorWarningBorderHover": "rgba(255, 214, 102, 0.2)",
|
|
4583
|
-
"colorError": "#FF4D4F",
|
|
4584
|
-
"colorErrorHover": "rgba(165, 50, 48, 1)",
|
|
4585
|
-
"colorErrorBg": "rgba(129, 46, 46, 0.25)",
|
|
4586
|
-
"colorErrorBgHover": "rgba(129, 46, 46, 0.32)",
|
|
4587
|
-
"colorErrorBorder": "rgba(255, 204, 199, 0.2)",
|
|
4588
|
-
"colorErrorBorderHover": "rgba(255, 163, 158, 0.2)",
|
|
4589
|
-
"colorLink": "#5551CC",
|
|
4590
|
-
"boxShadow": "0px 4px 6px 0px rgba(255, 255, 255, 0.08)",
|
|
4591
|
-
"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)",
|
|
4592
|
-
"colorTextWhite": "#fff",
|
|
4593
|
-
"colorFillDisable": "#8D8C98",
|
|
4594
|
-
"colorPurple": "#5551CC",
|
|
4595
|
-
"colorPurpleHover": "#8383F0",
|
|
4596
|
-
"colorPurpleBg": "rgba(226, 222, 255, 0.2)",
|
|
4597
|
-
"colorPink": "#EC4899",
|
|
4598
|
-
"colorPinkHover": "#E494BC",
|
|
4599
|
-
"colorPinkBg": "rgba(251, 220, 239, 0.2)",
|
|
4600
|
-
"colorYellow": "#EAB308",
|
|
4601
|
-
"colorYellowHover": "#DBBE62",
|
|
4602
|
-
"colorYellowBg": "rgba(255, 250, 184, 0.2)",
|
|
4603
|
-
"colorOrange": "#FA8125",
|
|
4604
|
-
"colorOrangeHover": "#F7A25F",
|
|
4605
|
-
"colorOrangeBg": "rgba(255, 232, 201, 0.2)",
|
|
4606
|
-
"colorTeal": "#14B8A6",
|
|
4607
|
-
"colorTealHover": "#7BC7BE",
|
|
4608
|
-
"colorTealBg": "rgba(200, 244, 233, 0.2)",
|
|
4609
|
-
"colorBlue": "#0090FF",
|
|
4610
|
-
"colorBlueHover": "#83BFED",
|
|
4611
|
-
"colorBlueBg": "rgba(194, 229, 255, 0.2)",
|
|
4612
|
-
"colorMauve": "#8E8C99",
|
|
4613
|
-
"colorMauveHover": "#BBB8CA",
|
|
4614
|
-
"colorMauveBg": "rgba(239, 240, 243, 0.2)",
|
|
4615
|
-
"colorSlate": "#2C3A50",
|
|
4616
|
-
"colorSlateHover": "#354252",
|
|
4617
|
-
"colorSlateBg": "#232B36",
|
|
4618
|
-
"colorLavender": "#A77BFF",
|
|
4619
|
-
"colorLavenderHover": "#BFA5F3",
|
|
4620
|
-
"colorLavenderBg": "rgba(150, 143, 167, 0.48)",
|
|
4621
|
-
|
|
4622
|
-
"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)",
|
|
4623
|
-
"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);",
|
|
4624
|
-
"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)"
|
|
4625
|
-
}
|
|
4626
|
-
|
|
4627
|
-
```
|
|
4628
|
-
|
|
4629
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonTheme</div>
|
|
4630
|
-
|
|
4631
|
-
```json
|
|
4632
|
-
{
|
|
4633
|
-
"borderRadiusXS": 2,
|
|
4634
|
-
"borderRadiusSM": 4,
|
|
4635
|
-
"borderRadius": 6,
|
|
4636
|
-
"borderRadiusLG": 8,
|
|
4637
|
-
"borderRadiusXL": 12,
|
|
4638
|
-
"borderRadiusFull": 999,
|
|
4639
|
-
"wireframe": false,
|
|
4640
|
-
"colorPrimaryBg": "rgba(244, 244, 247, 1)",
|
|
4641
|
-
"colorPrimaryBgHover": "rgba(239, 239, 244, 1)",
|
|
4642
|
-
"colorPrimaryBorder": "rgba(62, 63, 66, 1)",
|
|
4643
|
-
"colorPrimaryBorderHover": "rgba(130, 132, 137, 1)",
|
|
4644
|
-
"colorPrimaryHover": "rgba(38, 38, 41, 1)",
|
|
4645
|
-
"colorPrimary": "rgba(26, 26, 29, 1)",
|
|
4646
|
-
"colorPrimaryActive": "rgba(0, 0, 0, 1)",
|
|
4647
|
-
"colorPrimaryTextHover": "rgba(38, 38, 41, 1)",
|
|
4648
|
-
"colorPrimaryText": "rgba(26, 26, 29, 1)",
|
|
4649
|
-
"colorPrimaryTextActive": "rgba(0, 0, 0, 1)",
|
|
4650
|
-
"colorTextBase": "rgba(26, 26, 29, 1)",
|
|
4651
|
-
"colorBgBase": "rgba(255, 255, 255, 1)",
|
|
4652
|
-
"colorText": "rgba(26, 26, 29, 0.88)",
|
|
4653
|
-
"colorTextSecondary": "rgba(26, 26, 29, 0.65)",
|
|
4654
|
-
"colorTextTertiary": "rgba(26, 26, 29, 0.45)",
|
|
4655
|
-
"colorTextQuaternary": "rgba(26, 26, 29, 0.25)",
|
|
4656
|
-
"colorBorder": "rgba(187, 187, 193, 1)",
|
|
4657
|
-
"colorBorderSecondary": "rgba(234, 234, 234, 1)",
|
|
4658
|
-
"colorFill": "rgba(0, 0, 43, 0.06)",
|
|
4659
|
-
"colorFillSecondary": "rgba(0, 0, 85, 0.03)",
|
|
4660
|
-
"colorFillTertiary": "rgba(205, 208, 220, 0.15)",
|
|
4661
|
-
"colorFillQuaternary": "rgba(205, 208, 220, 0.1)",
|
|
4662
|
-
"colorBgContainer": "rgba(255, 255, 255, 1)",
|
|
4663
|
-
"colorBgElevated": "rgba(255, 255, 255, 1)",
|
|
4664
|
-
"colorBgLayout": "rgba(250, 250, 251, 1)",
|
|
4665
|
-
"colorBgSpotlight": "rgba(26, 26, 29, 0.85)",
|
|
4666
|
-
"colorBgMask": "rgba(0, 0, 0, 0.45)",
|
|
4667
|
-
"colorInfo": "rgba(11, 131, 241, 1)",
|
|
4668
|
-
"colorInfoHover": "rgba(94, 188, 255, 1)",
|
|
4669
|
-
"colorInfoBorder": "rgba(135, 209, 255, 1)",
|
|
4670
|
-
"colorInfoText": "rgba(11, 131, 241, 1)",
|
|
4671
|
-
"colorInfoBg": "rgba(230, 247, 255, 1)",
|
|
4672
|
-
"colorInfoBgHover": "rgba(176, 227, 255, 1)",
|
|
4673
|
-
"colorInfoBorderHover": "rgba(94, 188, 255, 1)",
|
|
4674
|
-
"colorSuccess": "rgba(91, 185, 139, 1)",
|
|
4675
|
-
"colorSuccessHover": "rgba(171, 212, 190, 1)",
|
|
4676
|
-
"colorSuccessBg": "rgba(235, 250, 240, 1)",
|
|
4677
|
-
"colorSuccessBgHover": "rgba(223, 237, 228, 1)",
|
|
4678
|
-
"colorSuccessBorder": "rgba(211, 224, 217, 1)",
|
|
4679
|
-
"colorSuccessBorderHover": "rgba(171, 212, 190, 1)",
|
|
4680
|
-
"colorWarning": "rgba(250, 173, 20, 1)",
|
|
4681
|
-
"colorWarningHover": "rgba(255, 214, 102, 1)",
|
|
4682
|
-
"colorWarningBg": "rgba(255, 251, 230, 1)",
|
|
4683
|
-
"colorWarningBgHover": "rgba(255, 241, 184, 1)",
|
|
4684
|
-
"colorWarningBorder": "rgba(255, 229, 143, 1)",
|
|
4685
|
-
"colorWarningBorderHover": "rgba(255, 214, 102, 1)",
|
|
4686
|
-
"colorError": "rgba(255, 77, 79, 1)",
|
|
4687
|
-
"colorErrorHover": "rgba(255, 120, 117, 1)",
|
|
4688
|
-
"colorErrorBg": "rgba(255, 242, 240, 1)",
|
|
4689
|
-
"colorErrorBgHover": "rgba(255, 241, 240, 1)",
|
|
4690
|
-
"colorErrorBorder": "rgba(255, 204, 199, 1)",
|
|
4691
|
-
"colorErrorBorderHover": "rgba(255, 163, 158, 1)",
|
|
4692
|
-
"colorLink": "rgba(0, 77, 255, 1)",
|
|
4693
|
-
"boxShadow": "0px 4px 6px 0px rgba(0, 0, 0, 0.08)",
|
|
4694
|
-
"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)",
|
|
4695
|
-
"colorTextWhite": "rgba(255, 255, 255, 1)",
|
|
4696
|
-
"colorFillDisable": "rgba(232, 232, 235, 1)",
|
|
4697
|
-
"colorPurple": "rgba(97, 92, 237, 1)",
|
|
4698
|
-
"colorPurpleHover": "#8080FF",
|
|
4699
|
-
"colorPurpleBg": "rgba(226, 222, 255, 0.8)",
|
|
4700
|
-
"colorPink": "rgba(236, 72, 153, 1)",
|
|
4701
|
-
"colorPinkHover": "#E593BC",
|
|
4702
|
-
"colorPinkBg": "rgba(251, 220, 239, 0.8)",
|
|
4703
|
-
"colorYellow": "rgba(234, 179, 8, 1)",
|
|
4704
|
-
"colorYellowHover": "#F1D372",
|
|
4705
|
-
"colorYellowBg": "rgba(255, 250, 184, 0.8)",
|
|
4706
|
-
"colorOrange": "rgba(250, 129, 37, 1)",
|
|
4707
|
-
"colorOrangeHover": "#E88C45",
|
|
4708
|
-
"colorOrangeBg": "rgba(255, 232, 201, 0.8)",
|
|
4709
|
-
"colorTeal": "rgba(20, 184, 166, 1)",
|
|
4710
|
-
"colorTealHover": "#5FB3A9",
|
|
4711
|
-
"colorTealBg": "rgba(200, 244, 233, 0.8)",
|
|
4712
|
-
"colorBlue": "rgba(0, 144, 255, 1)",
|
|
4713
|
-
"colorBlueHover": "#72BCF5",
|
|
4714
|
-
"colorBlueBg": "rgba(194, 229, 255, 0.8)",
|
|
4715
|
-
"colorMauve": "rgba(142, 140, 153, 1)",
|
|
4716
|
-
"colorMauveHover": "#C0BFC8",
|
|
4717
|
-
"colorMauveBg": "rgba(239, 240, 243, 0.8)",
|
|
4718
|
-
"colorSlate": "#2C3A50",
|
|
4719
|
-
"colorSlateHover": "#354252",
|
|
4720
|
-
"colorSlateBg": "#232B36",
|
|
4721
|
-
"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)",
|
|
4722
|
-
"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)",
|
|
4723
|
-
"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)"
|
|
4724
|
-
}
|
|
4725
|
-
|
|
4726
|
-
```
|
|
4727
|
-
|
|
4728
|
-
<div><span style="display: inline-block; width: 12px; height: 12px; background-color: rgba(26, 26, 29, 1);"></span> carbonDarkTheme</div>
|
|
4729
|
-
|
|
4730
|
-
```json
|
|
4731
|
-
{
|
|
4732
|
-
"borderRadiusXS": 2,
|
|
4733
|
-
"borderRadiusSM": 4,
|
|
4734
|
-
"borderRadius": 6,
|
|
4735
|
-
"borderRadiusLG": 8,
|
|
4736
|
-
"borderRadiusXL": 12,
|
|
4737
|
-
"borderRadiusFull": 999,
|
|
4738
|
-
"wireframe": false,
|
|
4739
|
-
"colorPrimaryBg": "#181818",
|
|
4740
|
-
"colorPrimaryBgHover": "#2E2E2E",
|
|
4741
|
-
"colorPrimaryBorder": "#323232",
|
|
4742
|
-
"colorPrimaryBorderHover": "#2C2C2C",
|
|
4743
|
-
"colorPrimaryHover": "#DFDFDF",
|
|
4744
|
-
"colorPrimary": "#E4E4E4",
|
|
4745
|
-
"colorPrimaryActive": "#7E7E7E",
|
|
4746
|
-
"colorPrimaryTextHover": "#909090",
|
|
4747
|
-
"colorPrimaryText": "#676767",
|
|
4748
|
-
"colorPrimaryTextActive": "#959595",
|
|
4749
|
-
"colorTextBase": "#E7E7ED",
|
|
4750
|
-
"colorBgBase": "#0A0A0B",
|
|
4751
|
-
"colorText": "#E7E7EDC7",
|
|
4752
|
-
"colorTextSecondary": "#E7E7EDA6",
|
|
4753
|
-
"colorTextTertiary": "#E7E7ED73",
|
|
4754
|
-
"colorTextQuaternary": "#E7E7ED40",
|
|
4755
|
-
"colorBorder": "#5B5B5BCC",
|
|
4756
|
-
"colorBorderSecondary": "#323232CC",
|
|
4757
|
-
"colorFill": "#E7E7ED2E",
|
|
4758
|
-
"colorFillSecondary": "#E7E7ED1F",
|
|
4759
|
-
"colorFillTertiary": "#E7E7ED14",
|
|
4760
|
-
"colorFillQuaternary": "#E7E7ED0A",
|
|
4761
|
-
"colorBgContainer": "#121212",
|
|
4762
|
-
"colorBgElevated": "#212121",
|
|
4763
|
-
"colorBgLayout": "#141414",
|
|
4764
|
-
"colorBgSpotlight": "#525252D9",
|
|
4765
|
-
"colorBgMask": "#050508CC",
|
|
4766
|
-
"colorInfo": "#0B83F1",
|
|
4767
|
-
"colorInfoHover": "#5EBCFF",
|
|
4768
|
-
"colorInfoBorder": "#3990C9",
|
|
4769
|
-
"colorInfoText": "#0B83F1",
|
|
4770
|
-
"colorInfoBg": "#112233",
|
|
4771
|
-
"colorInfoBgHover": "#264866",
|
|
4772
|
-
"colorInfoBorderHover": "#5EBCFF",
|
|
4773
|
-
"colorSuccess": "#5BB98B",
|
|
4774
|
-
"colorSuccessHover": "#74A47C",
|
|
4775
|
-
"colorSuccessBg": "#293631",
|
|
4776
|
-
"colorSuccessBgHover": "#3F5147",
|
|
4777
|
-
"colorSuccessBorder": "#73A377",
|
|
4778
|
-
"colorSuccessBorderHover": "#ABD4BE",
|
|
4779
|
-
"colorWarning": "#FAAD14",
|
|
4780
|
-
"colorWarningHover": "#FF8C28",
|
|
4781
|
-
"colorWarningBg": "#2D231A",
|
|
4782
|
-
"colorWarningBgHover": "#4D3B23",
|
|
4783
|
-
"colorWarningBorder": "#FFA628",
|
|
4784
|
-
"colorWarningBorderHover": "#FFD666",
|
|
4785
|
-
"colorError": "#FF4D4F",
|
|
4786
|
-
"colorErrorHover": "#EE654E",
|
|
4787
|
-
"colorErrorBg": "#2B0B08",
|
|
4788
|
-
"colorErrorBgHover": "#4A2A28",
|
|
4789
|
-
"colorErrorBorder": "#EE5B4E",
|
|
4790
|
-
"colorErrorBorderHover": "#FFA39E",
|
|
4791
|
-
"colorLink": "#4D7DFF",
|
|
4792
|
-
"boxShadow": "0px 4px 6px 0px rgba(255, 255, 255, 0.08)",
|
|
4793
|
-
"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)",
|
|
4794
|
-
"colorTextWhite": "#FFFFFF",
|
|
4795
|
-
"colorFillDisable": "#898989",
|
|
4796
|
-
"colorPurple": "#615CED",
|
|
4797
|
-
"colorPurpleHover": "#8383F0",
|
|
4798
|
-
"colorPurpleBg": "#6964877A",
|
|
4799
|
-
"colorPink": "#EC4899",
|
|
4800
|
-
"colorPinkHover": "#E494BC",
|
|
4801
|
-
"colorPinkBg": "#53424D7A",
|
|
4802
|
-
"colorYellow": "#EAB308",
|
|
4803
|
-
"colorYellowHover": "#DBBE62",
|
|
4804
|
-
"colorYellowBg": "#9585527A",
|
|
4805
|
-
"colorOrange": "#FA8125",
|
|
4806
|
-
"colorOrangeHover": "#F7A25F",
|
|
4807
|
-
"colorOrangeBg": "#6F58417A",
|
|
4808
|
-
"colorTeal": "#14B8A6",
|
|
4809
|
-
"colorTealHover": "#7BC7BE",
|
|
4810
|
-
"colorTealBg": "#4658547A",
|
|
4811
|
-
"colorBlue": "#0090FF",
|
|
4812
|
-
"colorBlueHover": "#83BFED",
|
|
4813
|
-
"colorBlueBg": "#5E76897A",
|
|
4814
|
-
"colorMauve": "#8E8C99",
|
|
4815
|
-
"colorMauveHover": "#BBB8CA",
|
|
4816
|
-
"colorMauveBg": "#5859647A",
|
|
4817
|
-
"colorSlate": "#2C3A50",
|
|
4818
|
-
"colorSlateHover": "#354252",
|
|
4819
|
-
"colorSlateBg": "#232B36",
|
|
4820
|
-
"colorLavender": "#A77BFF",
|
|
4821
|
-
"colorLavenderHover": "#BFA5F3",
|
|
4822
|
-
"colorLavenderBg": "rgba(150, 143, 167, 0.48)",
|
|
4823
|
-
|
|
4824
|
-
"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)",
|
|
4825
|
-
"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)",
|
|
4826
|
-
"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)",
|
|
4827
|
-
"colorTextBlack": "#000000"
|
|
4828
|
-
}
|
|
4829
|
-
```
|
|
4830
|
-
|
|
4831
|
-
# CSS 变量
|
|
4832
|
-
|
|
4833
|
-
Spark Design 默认启用 cssVar 模式，因此您可以利用 从 token 派生出的 CSS 变量来构建自己的样式。
|
|
4834
|
-
|
|
4835
|
-
|
|
4836
|
-
```less
|
|
4837
|
-
.example {
|
|
4838
|
-
background: var(--sps-color-bg-base);
|
|
4839
|
-
color: var(--sps-color-pink);
|
|
4840
|
-
}
|
|
4841
|
-
// 提示：您可以将 'sps' 替换为您自己的前缀
|
|
4842
|
-
```
|
|
4843
|
-
|
|
4844
|
-
|
|
4845
|
-
|
|
4846
|
-
|
|
4847
|
-
# 从零开始使用
|
|
4848
|
-
|
|
4849
|
-
## 📦 安装
|
|
4850
|
-
|
|
4851
|
-
|
|
4852
|
-
```bash
|
|
4853
|
-
$ npm install antd @agentscope-ai/icons @agentscope-ai/design --save
|
|
4854
|
-
```
|
|
4855
|
-
|
|
4856
|
-
|
|
4857
|
-
## 🔨 使用
|
|
4858
|
-
|
|
4859
|
-
|
|
4860
|
-
```tsx
|
|
4861
|
-
import {
|
|
4862
|
-
Button,
|
|
4863
|
-
Image,
|
|
4864
|
-
ConfigProvider,
|
|
4865
|
-
purpleDarkTheme,
|
|
4866
|
-
purpleTheme,
|
|
4867
|
-
} from '@agentscope-ai/design';
|
|
4868
|
-
import { SparkSunLine, SparkMoonLine } from '@agentscope-ai/icons';
|
|
4869
|
-
import { Flex } from 'antd';
|
|
4870
|
-
import zhCN from 'antd/locale/zh_CN';
|
|
4871
|
-
import { useState } from 'react';
|
|
4872
|
-
|
|
4873
|
-
const App = () => {
|
|
4874
|
-
const [colorMode, setColorMode] = useState('light');
|
|
4875
|
-
const theme = colorMode === 'light' ? purpleTheme : purpleDarkTheme;
|
|
4876
|
-
|
|
4877
|
-
const prefix = 'sps';
|
|
4878
|
-
return (
|
|
4879
|
-
<ConfigProvider
|
|
4880
|
-
{...theme} // 您可以从 purpleTheme、purpleDarkTheme、carbonTheme 和 carbonDarkTheme 中选择
|
|
4881
|
-
prefix={prefix} // Ant Design 和 @agentscope-ai/design 的前缀
|
|
4882
|
-
prefixCls={prefix}
|
|
4883
|
-
iconfont="//at.alicdn.com/t/a/font_4807885_ugexdeaoq7.js" // 可选参数，您可以从 https://www.iconfont.cn/ 获取
|
|
4884
|
-
locale={zhCN} // 来自 Ant Design 的语言包
|
|
4885
|
-
style={{
|
|
4886
|
-
width: '100%',
|
|
4887
|
-
height: '100%',
|
|
4888
|
-
}}
|
|
4889
|
-
>
|
|
4890
|
-
<div
|
|
4891
|
-
style={{
|
|
4892
|
-
width: '100%',
|
|
4893
|
-
height: '100%',
|
|
4894
|
-
backgroundColor: `var(--${prefix}-color-bg-base)`,
|
|
4895
|
-
}}
|
|
4896
|
-
>
|
|
4897
|
-
<Flex vertical gap={16} align="center" style={{ padding: '12px 0' }}>
|
|
4898
|
-
<Image
|
|
4899
|
-
width={120}
|
|
4900
|
-
src="https://img.alicdn.com/imgextra/i1/O1CN01Py27NU1re2pgohzqU_!!6000000005655-0-tps-480-480.jpg"
|
|
4901
|
-
/>
|
|
4902
|
-
<div
|
|
4903
|
-
style={{
|
|
4904
|
-
color: `var(--${prefix}-ant-color-text-base)`,
|
|
4905
|
-
fontSize: '24px',
|
|
4906
|
-
textAlign: 'center',
|
|
4907
|
-
}}
|
|
4908
|
-
>
|
|
4909
|
-
Hello Spark Design!
|
|
4910
|
-
</div>
|
|
4911
|
-
<Button
|
|
4912
|
-
type="primary"
|
|
4913
|
-
onClick={() => {
|
|
4914
|
-
setColorMode(colorMode === 'light' ? 'dark' : 'light');
|
|
4915
|
-
}}
|
|
4916
|
-
icon={colorMode === 'light' ? <SparkMoonLine /> : <SparkSunLine />}
|
|
4917
|
-
>
|
|
4918
|
-
{colorMode === 'light' ? '暗色' : '亮色'} 模式
|
|
4919
|
-
</Button>
|
|
4920
|
-
</Flex>
|
|
4921
|
-
</div>
|
|
4922
|
-
</ConfigProvider>
|
|
4923
|
-
);
|
|
4924
|
-
};
|
|
4925
|
-
|
|
4926
|
-
export default App;
|
|
4927
|
-
```
|
|
4928
|
-
|
|
4929
|
-
|
|
4930
|
-
|
|
4931
|
-
|
|
4932
4049
|
# 使用
|
|
4933
4050
|
|
|
4934
4051
|
|