@agentscope-ai/design 1.0.15 → 1.0.16

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.
Files changed (59) hide show
  1. package/llms/all.llms.txt +4954 -0
  2. package/llms/components/commonComponents/Alert/index.zh-CN.llms.txt +32 -0
  3. package/llms/components/commonComponents/AlertDialog/index.zh-CN.llms.txt +171 -0
  4. package/llms/components/commonComponents/Anchor/index.zh-CN.llms.txt +51 -0
  5. package/llms/components/commonComponents/Avatar/index.zh-CN.llms.txt +37 -0
  6. package/llms/components/commonComponents/Breadcrumb/index.zh-CN.llms.txt +117 -0
  7. package/llms/components/commonComponents/Button/index.zh-CN.llms.txt +54 -0
  8. package/llms/components/commonComponents/Card/index.zh-CN.llms.txt +61 -0
  9. package/llms/components/commonComponents/Checkbox/index.zh-CN.llms.txt +69 -0
  10. package/llms/components/commonComponents/CodeBlock/index.zh-CN.llms.txt +13 -0
  11. package/llms/components/commonComponents/Collapse/index.zh-CN.llms.txt +56 -0
  12. package/llms/components/commonComponents/CollapsePanel/index.zh-CN.llms.txt +69 -0
  13. package/llms/components/commonComponents/DatePicker/index.zh-CN.llms.txt +221 -0
  14. package/llms/components/commonComponents/Descriptions/index.zh-CN.llms.txt +37 -0
  15. package/llms/components/commonComponents/Drawer/index.zh-CN.llms.txt +62 -0
  16. package/llms/components/commonComponents/Dropdown/index.zh-CN.llms.txt +149 -0
  17. package/llms/components/commonComponents/Empty/index.zh-CN.llms.txt +40 -0
  18. package/llms/components/commonComponents/FloatButton/index.zh-CN.llms.txt +51 -0
  19. package/llms/components/commonComponents/Form/index.zh-CN.llms.txt +558 -0
  20. package/llms/components/commonComponents/IconButton/index.zh-CN.llms.txt +45 -0
  21. package/llms/components/commonComponents/Image/index.zh-CN.llms.txt +165 -0
  22. package/llms/components/commonComponents/Input/index.zh-CN.llms.txt +133 -0
  23. package/llms/components/commonComponents/InputNumber/index.zh-CN.llms.txt +51 -0
  24. package/llms/components/commonComponents/Message/index.zh-CN.llms.txt +98 -0
  25. package/llms/components/commonComponents/Modal/index.zh-CN.llms.txt +168 -0
  26. package/llms/components/commonComponents/Notification/index.zh-CN.llms.txt +94 -0
  27. package/llms/components/commonComponents/Pagination/index.zh-CN.llms.txt +45 -0
  28. package/llms/components/commonComponents/Popconfirm/index.zh-CN.llms.txt +55 -0
  29. package/llms/components/commonComponents/Popover/index.zh-CN.llms.txt +43 -0
  30. package/llms/components/commonComponents/Progress/index.zh-CN.llms.txt +50 -0
  31. package/llms/components/commonComponents/PromptsEditor/index.zh-CN.llms.txt +15 -0
  32. package/llms/components/commonComponents/Radio/index.zh-CN.llms.txt +66 -0
  33. package/llms/components/commonComponents/RadioButton/index.zh-CN.llms.txt +73 -0
  34. package/llms/components/commonComponents/Result/index.zh-CN.llms.txt +10 -0
  35. package/llms/components/commonComponents/Select/index.zh-CN.llms.txt +96 -0
  36. package/llms/components/commonComponents/Skeleton/index.zh-CN.llms.txt +59 -0
  37. package/llms/components/commonComponents/Slider/index.zh-CN.llms.txt +62 -0
  38. package/llms/components/commonComponents/Spinner/index.zh-CN.llms.txt +15 -0
  39. package/llms/components/commonComponents/Statistic/index.zh-CN.llms.txt +58 -0
  40. package/llms/components/commonComponents/Steps/index.zh-CN.llms.txt +57 -0
  41. package/llms/components/commonComponents/Switch/index.zh-CN.llms.txt +39 -0
  42. package/llms/components/commonComponents/Table/index.zh-CN.llms.txt +254 -0
  43. package/llms/components/commonComponents/Tabs/index.zh-CN.llms.txt +68 -0
  44. package/llms/components/commonComponents/Tag/index.zh-CN.llms.txt +33 -0
  45. package/llms/components/commonComponents/TimePicker/index.zh-CN.llms.txt +111 -0
  46. package/llms/components/commonComponents/Tooltip/index.zh-CN.llms.txt +44 -0
  47. package/llms/components/commonComponents/Upload/index.zh-CN.llms.txt +95 -0
  48. package/llms/components/commonComponents/Video/index.zh-CN.llms.txt +7 -0
  49. package/llms/docs/guide/fromAntd.zh-CN.llms.txt +156 -0
  50. package/llms/docs/guide/fromScratch.zh-CN.llms.txt +83 -0
  51. package/llms/docs/guide/iconfont.zh-CN.llms.txt +69 -0
  52. package/llms/docs/guide/overview.zh-CN.llms.txt +51 -0
  53. package/llms/docs/guide/sparkIcons.zh-CN.llms.txt +25 -0
  54. package/llms/docs/guide/theme.zh-CN.llms.txt +61 -0
  55. package/llms/docs/guide/tokens&variables.zh-CN.llms.txt +425 -0
  56. package/llms/docs/guide/vibe-coding.zh-CN.llms.txt +29 -0
  57. package/llms/index.llms.txt +49 -0
  58. package/package.json +4 -2
  59. package/scripts/mcp-docs-server.js +14079 -0
@@ -0,0 +1,32 @@
1
+
2
+
3
+ <DemoTitle title="Alert" desc="向用户突出显示的重要提示信息。">
4
+ #### API
5
+
6
+ <AntdApiRef url="https://ant.design/components/alert-cn/#api"></AntdApiRef>
7
+
8
+
9
+ ## antd API
10
+
11
+ 通用属性参考:[通用属性](/docs/react/common-props)
12
+
13
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
14
+ |--------|--------|--------|--------|--------|
15
+ | action | 自定义操作项 | ReactNode | - | 4.9.0 |
16
+ | afterClose | 关闭动画结束后触发的回调函数 | () => void | - | |
17
+ | banner | 是否用作顶部公告 | boolean | false | |
18
+ | closable | 可关闭配置,>=5.15.0: 支持 | boolean \| ({ closeIcon?: React.ReactNode } & React.AriaAttributes) | false | |
19
+ | description | 警告提示的辅助性文字介绍 | ReactNode | - | |
20
+ | icon | 自定义图标, | ReactNode | - | |
21
+ | message | 警告提示内容 | ReactNode | - | |
22
+ | showIcon | 是否显示辅助图标 | boolean | false, | |
23
+ | type | 指定警告提示的样式,有四种选择 | string | info | |
24
+ | onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | - | |
25
+
26
+
27
+ ### Alert.ErrorBoundary
28
+
29
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
30
+ |--------|--------|--------|--------|--------|
31
+ | description | 自定义错误内容,如果未指定会展示报错堆栈 | ReactNode | {{ error stack }} | |
32
+ | message | 自定义错误标题,如果未指定会展示原生报错信息 | ReactNode | {{ error }} | |
@@ -0,0 +1,171 @@
1
+
2
+
3
+ <DemoTitle title="AlertDialog" desc="一种在界面中弹出的对话框,用来向用户传达重要信息,并引导其进行确认或取消等操作。">
4
+ #### API
5
+
6
+ | 属性名 | 描述 | 类型 | 默认值 |
7
+ |--------|--------|--------|--------|
8
+ | type | 类型 | 'success' \| 'info' \| 'warning' \| 'error' \| 'confirm' | info |
9
+ | danger | 确认按钮是否带有danger属性 | boolean | false |
10
+ | content | 内容 | React.ReactNode | - |
11
+ | onClose | 关闭时触发的回调函数 | (e: SyntheticEvent) => any | - |
12
+
13
+
14
+ 本组件完全兼容 Antd Design 的 Modal 组件,详情可访问[https://ant.design/components/modal-cn/#api](https://ant.design/components/modal-cn/#api)
15
+
16
+
17
+ ## antd API
18
+
19
+ 通用属性参考:[通用属性](/docs/react/common-props)
20
+
21
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
22
+ |--------|--------|--------|--------|--------|
23
+ | afterClose | Modal 完全关闭后的回调 | function | - | |
24
+ | classNames | 配置弹窗内置模块的 className | | - | |
25
+ | styles | 配置弹窗内置模块的 style | | - | 5.10.0 |
26
+ | cancelButtonProps | cancel 按钮 props | | - | |
27
+ | cancelText | 取消按钮文字 | ReactNode | 取消 | |
28
+ | centered | 垂直居中展示 Modal | boolean | false | |
29
+ | closable | 是否显示右上角的关闭按钮 | boolean \| { closeIcon?: React.ReactNode; disabled?: boolean; } | true | |
30
+ | closeIcon | 自定义关闭图标。5.7.0:设置为 | ReactNode | | |
31
+ | confirmLoading | 确定按钮 loading | boolean | false | |
32
+ | destroyOnHidden | 关闭时销毁 Modal 里的子元素 | boolean | false | 5.25.0 |
33
+ | focusTriggerAfterClose | 对话框关闭后是否需要聚焦触发元素 | boolean | true | 4.9.0 |
34
+ | footer | 底部内容,当不需要默认底部按钮时,可以设为 | ReactNode \| (originNode: ReactNode, extra: { OkBtn: React.FC, CancelBtn: React.FC }) => ReactNode | (确定取消按钮) | renderFunction: 5.9.0 |
35
+ | forceRender | 强制渲染 Modal | boolean | false | |
36
+ | getContainer | 指定 Modal 挂载的节点,但依旧为全屏展示, | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body | |
37
+ | keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
38
+ | mask | 是否展示遮罩 | boolean | true | |
39
+ | maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
40
+ | modalRender | 自定义渲染对话框 | (node: ReactNode) => ReactNode | - | 4.7.0 |
41
+ | okButtonProps | ok 按钮 props | | - | |
42
+ | okText | 确认按钮文字 | ReactNode | 确定 | |
43
+ | okType | 确认按钮类型 | string | primary | |
44
+ | style | 可用于设置浮层的样式,调整浮层位置等 | CSSProperties | - | |
45
+ | loading | 显示骨架屏 | boolean | | 5.18.0 |
46
+ | title | 标题 | ReactNode | - | |
47
+ | open | 对话框是否可见 | boolean | - | |
48
+ | width | 宽度 | string \| number \| | 520 | Breakpoint: 5.23.0 |
49
+ | wrapClassName | 对话框外层容器的类名 | string | - | |
50
+ | zIndex | 设置 Modal 的 | number | 1000 | |
51
+ | onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | - | |
52
+ | onOk | 点击确定回调 | function(e) | - | |
53
+ | afterOpenChange | 打开和关闭 Modal 时动画结束后的回调 | (open: boolean) => void | - | 5.4.0 |
54
+
55
+
56
+ #### 注意
57
+
58
+
59
+ - `<Modal />` 默认关闭后状态不会自动清空,如果希望每次打开都是新内容,请设置 `destroyOnHidden`。
60
+ - `<Modal />` 和 Form 一起配合使用时,设置 `destroyOnHidden` 也不会在 Modal 关闭时销毁表单字段数据,需要设置 `<Form preserve={false} />`。
61
+ - `Modal.method()` RTL 模式仅支持 hooks 用法。
62
+
63
+ ### Modal.method()
64
+
65
+ 包括:
66
+
67
+
68
+ - `Modal.info`
69
+ - `Modal.success`
70
+ - `Modal.error`
71
+ - `Modal.warning`
72
+ - `Modal.confirm`
73
+
74
+ 以上均为一个函数,参数为 object,具体属性如下:
75
+
76
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
77
+ |--------|--------|--------|--------|--------|
78
+ | afterClose | Modal 完全关闭后的回调 | function | - | 4.9.0 |
79
+ | autoFocusButton | 指定自动获得焦点的按钮 | null \| | ok | |
80
+ | cancelButtonProps | cancel 按钮 props | | - | |
81
+ | cancelText | 设置 Modal.confirm 取消按钮文字 | string | 取消 | |
82
+ | centered | 垂直居中展示 Modal | boolean | false | |
83
+ | className | 容器类名 | string | - | |
84
+ | closable | 是否显示右上角的关闭按钮 | boolean | false | 4.9.0 |
85
+ | closeIcon | 自定义关闭图标 | ReactNode | undefined | 4.9.0 |
86
+ | content | 内容 | ReactNode | - | |
87
+ | footer | 底部内容,当不需要默认底部按钮时,可以设为 | ReactNode \| (originNode: ReactNode, extra: { OkBtn: React.FC, CancelBtn: React.FC }) => ReactNode | - | renderFunction: 5.9.0 |
88
+ | getContainer | 指定 Modal 挂载的 HTML 节点,false 为挂载在当前 dom | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body | |
89
+ | icon | 自定义图标 | ReactNode | | |
90
+ | keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
91
+ | mask | 是否展示遮罩 | boolean | true | |
92
+ | maskClosable | 点击蒙层是否允许关闭 | boolean | false | |
93
+ | okButtonProps | ok 按钮 props | | - | |
94
+ | okText | 确认按钮文字 | string | 确定 | |
95
+ | okType | 确认按钮类型 | string | primary | |
96
+ | style | 可用于设置浮层的样式,调整浮层位置等 | CSSProperties | - | |
97
+ | title | 标题 | ReactNode | - | |
98
+ | width | 宽度 | string \| number | 416 | |
99
+ | wrapClassName | 对话框外层容器的类名 | string | - | 4.18.0 |
100
+ | zIndex | 设置 Modal 的 | number | 1000 | |
101
+ | onCancel | 点击取消回调,参数为关闭函数,若返回 promise 时 resolve 为正常关闭, reject 为不关闭 | function(close) | - | |
102
+ | onOk | 点击确定回调,参数为关闭函数,若返回 promise 时 resolve 为正常关闭, reject 为不关闭 | function(close) | - | |
103
+
104
+
105
+ 以上函数调用后,会返回一个引用,可以通过该引用更新和关闭弹窗。
106
+
107
+
108
+ ```jsx
109
+ const modal = Modal.info();
110
+
111
+ modal.update({
112
+ title: '修改的标题',
113
+ content: '修改的内容',
114
+ });
115
+
116
+ // 在 4.8.0 或更高版本中,可以通过传入函数的方式更新弹窗
117
+ modal.update((prevConfig) => ({
118
+ ...prevConfig,
119
+ title: `${prevConfig.title}(新)`,
120
+ }));
121
+
122
+ modal.destroy();
123
+ ```
124
+
125
+
126
+
127
+ - `Modal.destroyAll`
128
+
129
+ 使用 `Modal.destroyAll()` 可以销毁弹出的确认窗(即上述的 `Modal.info`、`Modal.success`、`Modal.error`、`Modal.warning`、`Modal.confirm`)。通常用于路由监听当中,处理路由前进、后退不能销毁确认对话框的问题,而不用各处去使用实例的返回值进行关闭(`modal.destroy()` 适用于主动关闭,而不是路由这样被动关闭)
130
+
131
+
132
+ ```jsx
133
+ import { browserHistory } from 'react-router';
134
+
135
+ // router change
136
+ browserHistory.listen(() => {
137
+ Modal.destroyAll();
138
+ });
139
+ ```
140
+
141
+
142
+ ### Modal.useModal()
143
+
144
+ 当你需要使用 Context 时,可以通过 `Modal.useModal` 创建一个 `contextHolder` 插入子节点中。通过 hooks 创建的临时 Modal 将会得到 `contextHolder` 所在位置的所有上下文。创建的 `modal` 对象拥有与 [`Modal.method`](#modalmethod) 相同的创建通知方法。
145
+
146
+
147
+ ```jsx
148
+ const [modal, contextHolder] = Modal.useModal();
149
+
150
+ React.useEffect(() => {
151
+ modal.confirm({
152
+ // ...
153
+ });
154
+ }, []);
155
+
156
+ return <div>{contextHolder}</div>;
157
+ ```
158
+
159
+
160
+ `modal.confirm` 返回方法:
161
+
162
+
163
+ - `destroy`:销毁当前窗口
164
+ - `update`:更新当前窗口
165
+ - `then`:Promise 链式调用,支持 `await` 操作。该方法为 Hooks 仅有
166
+
167
+
168
+ ```tsx
169
+ //点击 `onOk` 时返回 `true`,点击 `onCancel` 时返回 `false`
170
+ const confirmed = await modal.confirm({ ... });
171
+ ```
@@ -0,0 +1,51 @@
1
+
2
+
3
+ <DemoTitle title="Anchor" desc="用于跳转到页面指定位置。">
4
+ #### API
5
+
6
+ <AntdApiRef url="https://ant.design/components/anchor-cn/#api"></AntdApiRef>
7
+
8
+
9
+ ## antd API
10
+
11
+ 通用属性参考:[通用属性](/docs/react/common-props)
12
+
13
+ ### Anchor Props
14
+
15
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
16
+ |--------|--------|--------|--------|--------|
17
+ | affix | 固定模式 | boolean \| Omit | true | object: 5.19.0 |
18
+ | bounds | 锚点区域边界 | number | 5 | |
19
+ | getContainer | 指定滚动的容器 | () => HTMLElement | () => window | |
20
+ | getCurrentAnchor | 自定义高亮的锚点 | (activeLink: string) => string | - | |
21
+ | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
22
+ | showInkInFixed | affix={false} | boolean | false | |
23
+ | targetOffset | 锚点滚动偏移量,默认与 offsetTop 相同, | number | - | |
24
+ | onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - | |
25
+ | onClick | click | (e: MouseEvent, link: object) => void | - | |
26
+ | items | 数据化配置选项内容,支持通过 children 嵌套 | { key, href, title, target, children }[] | - | 5.1.0 |
27
+ | direction | 设置导航方向 | vertical | vertical | 5.2.0 |
28
+ | replace | 替换浏览器历史记录中项目的 href 而不是推送它 | boolean | false | 5.7.0 |
29
+
30
+
31
+ ### AnchorItem
32
+
33
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
34
+ |--------|--------|--------|--------|--------|
35
+ | key | 唯一标志 | string \| number | - | |
36
+ | href | 锚点链接 | string | - | |
37
+ | target | 该属性指定在何处显示链接的资源 | string | - | |
38
+ | title | 文字内容 | ReactNode | - | |
39
+ | children | 嵌套的 Anchor Link, | | - | |
40
+ | replace | 替换浏览器历史记录中的项目 href 而不是推送它 | boolean | false | 5.7.0 |
41
+
42
+
43
+ ### Link Props
44
+
45
+ 建议使用 items 形式。
46
+
47
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
48
+ |--------|--------|--------|--------|--------|
49
+ | href | 锚点链接 | string | - | |
50
+ | target | 该属性指定在何处显示链接的资源 | string | - | |
51
+ | title | 文字内容 | ReactNode | - | |
@@ -0,0 +1,37 @@
1
+
2
+
3
+ <DemoTitle title="Avatar" desc="用来代表用户或事物,支持图片、图标或字符展示。">
4
+ #### API
5
+
6
+ <AntdApiRef url="https://ant.design/components/avatar-cn/#api"></AntdApiRef>
7
+
8
+
9
+ ## antd API
10
+
11
+ 通用属性参考:[通用属性](/docs/react/common-props)
12
+
13
+ ### Avatar
14
+
15
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
16
+ |--------|--------|--------|--------|--------|
17
+ | alt | 图像无法显示时的替代文本 | string | - | |
18
+ | gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 |
19
+ | icon | 设置头像的自定义图标 | ReactNode | - | |
20
+ | shape | 指定头像的形状 | circle | circle | |
21
+ | size | 设置头像的大小 | number \| | default | 4.7.0 |
22
+ | src | 图片类头像的资源地址或者图片元素 | string \| ReactNode | - | ReactNode: 4.8.0 |
23
+ | srcSet | 设置图片类头像响应式资源地址 | string | - | |
24
+ | draggable | 图片是否允许拖动 | boolean \| | true | |
25
+ | crossOrigin | CORS 属性设置 | 'anonymous' | - | 4.17.0 |
26
+ | onError | 图片加载失败的事件,返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - | |
27
+
28
+
29
+ Tip:你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fallback 行为,优先级为 `icon` > `children`
30
+
31
+ ### Avatar.Group <Badge>4.5.0+</Badge>
32
+
33
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
34
+ |--------|--------|--------|--------|--------|
35
+ | max | 设置最多显示相关配置, | { count?: number; style?: CSSProperties; popover?: PopoverProps } | - | 5.18.0 |
36
+ | size | 设置头像的大小 | number \| | default | 4.8.0 |
37
+ | shape | 设置头像的形状 | circle | circle | 5.8.0 |
@@ -0,0 +1,117 @@
1
+
2
+
3
+ <DemoTitle title="Breadcrumb" desc="显示当前页面在系统层级结构中的位置,并能向上返回。">
4
+ #### API
5
+
6
+ #### BreadcrumbItems 配置
7
+
8
+ | 属性名 | 描述 | 类型 | 默认值 |
9
+ |--------|--------|--------|--------|
10
+ | title | 面包屑项标题 | string \| React.ReactNode | (必填) |
11
+ | iconUrl | 图标地址 | string | '' |
12
+ | dropdown | 下拉菜单配置 | {
13
+ items: Array<{
14
+ key: string;
15
+ label: React.ReactNode;
16
+ }>;
17
+ } | |
18
+
19
+
20
+ <AntdApiRef url="https://ant.design/components/breadcrumb-cn/#api"></AntdApiRef>
21
+
22
+
23
+ ## antd API
24
+
25
+ 通用属性参考:[通用属性](/docs/react/common-props)
26
+
27
+ ### Breadcrumb
28
+
29
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
30
+ |--------|--------|--------|--------|--------|
31
+ | itemRender | 自定义链接函数,和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | - | |
32
+ | params | 路由的参数 | object | - | |
33
+ | separator | 分隔符自定义 | ReactNode | / | |
34
+
35
+
36
+ ### ItemType
37
+
38
+ type ItemType = Omit | [SeparatorType](#separatortype)
39
+
40
+ ### RouteItemType
41
+
42
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
43
+ |--------|--------|--------|--------|--------|
44
+ | className | 自定义类名 | string | - | |
45
+ | dropdownProps | 弹出下拉菜单的自定义配置 | | - | |
46
+ | href | 链接的目的地,不能和 | string | - | |
47
+ | path | 拼接路径,每一层都会拼接前一个 | string | - | |
48
+ | menu | 菜单配置项 | | - | 4.24.0 |
49
+ | onClick | 单击事件 | (e:MouseEvent) => void | - | |
50
+
51
+
52
+ ### SeparatorType
53
+
54
+
55
+ ```ts
56
+ const item = {
57
+ type: 'separator', // Must have
58
+ separator: '/',
59
+ };
60
+ ```
61
+
62
+
63
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
64
+ |--------|--------|--------|--------|--------|
65
+ | type | 标记为分隔符 | separator | | 5.3.0 |
66
+ | separator | 要显示的分隔符 | ReactNode | / | 5.3.0 |
67
+
68
+
69
+ ### 和 browserHistory 配合
70
+
71
+ 和 react-router 一起使用时,默认生成的 url 路径是带有 `#` 的,如果和 browserHistory 一起使用的话,你可以使用 `itemRender` 属性定义面包屑链接。
72
+
73
+
74
+ ```jsx
75
+ import { Link } from 'react-router';
76
+
77
+ const items = [
78
+ {
79
+ path: '/index',
80
+ title: 'home',
81
+ },
82
+ {
83
+ path: '/first',
84
+ title: 'first',
85
+ children: [
86
+ {
87
+ path: '/general',
88
+ title: 'General',
89
+ },
90
+ {
91
+ path: '/layout',
92
+ title: 'Layout',
93
+ },
94
+ {
95
+ path: '/navigation',
96
+ title: 'Navigation',
97
+ },
98
+ ],
99
+ },
100
+ {
101
+ path: '/second',
102
+ title: 'second',
103
+ },
104
+ ];
105
+
106
+ function itemRender(currentRoute, params, items, paths) {
107
+ const isLast = currentRoute?.path === items[items.length - 1]?.path;
108
+
109
+ return isLast ? (
110
+ <span>{currentRoute.title}</span>
111
+ ) : (
112
+ <Link to={`/${paths.join('/')}`}>{currentRoute.title}</Link>
113
+ );
114
+ }
115
+
116
+ return <Breadcrumb itemRender={itemRender} items={items} />;
117
+ ```
@@ -0,0 +1,54 @@
1
+
2
+
3
+ <DemoTitle title="Button" desc="按钮用于开始一个即时操作。">
4
+ #### API
5
+
6
+ | 属性名 | 描述 | 类型 | 默认值 |
7
+ |--------|--------|--------|--------|
8
+ | size | 按钮大小 | 'small' \| 'middle' \| 'large' | 'middle' |
9
+ | type | 类型 | \| 'primary'
10
+ \| 'dashed'
11
+ \| 'link'
12
+ \| 'text'
13
+ \| 'default'
14
+ \| 'primaryLess'
15
+ \| 'textCompact' | 'deafult' |
16
+ | tooltipContent | hover上去tooltip的内容 | string \| ReactNode | |
17
+ | iconType | 百炼图标iconfont的key,依赖ConfigProvider传入的iconfont,例如bl-icon-add | string | |
18
+ | iconSize | 图标大小 | SparkIconFontProps['size'] | |
19
+
20
+ <AntdApiRef url="https://ant.design/components/button-cn/#api"></AntdApiRef>
21
+
22
+
23
+ ## antd API
24
+
25
+ 通用属性参考:[通用属性](/docs/react/common-props)
26
+
27
+ 通过设置 Button 的属性来产生不同的按钮样式,推荐顺序为:`type` -> `shape` -> `size` -> `loading` -> `disabled`。
28
+
29
+ 按钮的属性说明如下:
30
+
31
+ | 属性 | 说明 | 类型 | 默认值 | 版本 |
32
+ |--------|--------|--------|--------|--------|
33
+ | autoInsertSpace | 我们默认提供两个汉字之间的空格,可以设置 | boolean | true | 5.17.0 |
34
+ | block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
35
+ | classNames | 语义化结构 class | | - | 5.4.0 |
36
+ | color | 设置按钮的颜色 | default | - | default |
37
+ | danger | 语法糖,设置危险按钮。当设置 | boolean | false | |
38
+ | disabled | 设置按钮失效状态 | boolean | false | |
39
+ | ghost | 幽灵属性,使按钮背景透明 | boolean | false | |
40
+ | href | 点击跳转的地址,指定此属性 button 的行为和 a 链接一致 | string | - | |
41
+ | htmlType | 设置 | submit | button | |
42
+ | iconPosition | 设置按钮图标组件的位置 | start | start | 5.17.0 |
43
+ | loading | 设置按钮载入状态 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
44
+ | styles | 语义化结构 style | | - | 5.4.0 |
45
+ | target | 相当于 a 链接的 target 属性,href 存在时生效 | string | - | |
46
+ | onClick | 点击按钮时的回调 | (event: React.MouseEvent) => void | - | |
47
+ | variant | 设置按钮的变体 | outlined | - | 5.21.0 |
48
+
49
+
50
+ 支持原生 button 的其他所有属性。
51
+
52
+ ### PresetColors
53
+
54
+ type PresetColors = 'blue' | 'purple' | 'cyan' | 'green' | 'magenta' | 'pink' | 'red' | 'orange' | 'yellow' | 'volcano' | 'geekblue' | 'lime' | 'gold';
@@ -0,0 +1,61 @@
1
+
2
+
3
+ <DemoTitle title="Card" desc="通用卡片容器">
4
+ #### API
5
+
6
+ | 属性名 | 描述 | 类型 | 默认值 |
7
+ |--------|--------|--------|--------|
8
+ | info | 副标题 | ReactNode | |
9
+
10
+ <AntdApiRef url="https://ant.design/components/card-cn/#api"></AntdApiRef>
11
+
12
+
13
+ ## antd API
14
+
15
+ 通用属性参考:[通用属性](/docs/react/common-props)
16
+
17
+
18
+ ```jsx
19
+ <Card title="卡片标题">卡片内容</Card>
20
+ ```
21
+
22
+
23
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
24
+ |--------|--------|--------|--------|--------|
25
+ | actions | 卡片操作组,位置在卡片底部 | Array | - | |
26
+ | activeTabKey | 当前激活页签的 key | string | - | |
27
+ | variant | 形态变体 | outlined | outlined | 5.24.0 |
28
+ | cover | 卡片封面 | ReactNode | - | |
29
+ | defaultActiveTabKey | 初始化选中页签的 key,如果没有设置 activeTabKey | string | 第一个页签的 key | |
30
+ | extra | 卡片右上角的操作区域 | ReactNode | - | |
31
+ | hoverable | 鼠标移过时可浮起 | boolean | false | |
32
+ | loading | 当卡片内容还在加载中时,可以用 loading 展示一个占位 | boolean | false | |
33
+ | size | card 的尺寸 | default | default | |
34
+ | tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | |
35
+ | tabList | 页签标题列表 | | - | |
36
+ | tabProps | | - | - | |
37
+ | title | 卡片标题 | ReactNode | - | |
38
+ | type | 卡片类型,可设置为 | string | - | |
39
+ | classNames | 配置卡片内置模块的 className | | - | 5.14.0 |
40
+ | styles | 配置卡片内置模块的 style | | - | 5.14.0 |
41
+ | onTabChange | 页签切换的回调 | (key) => void | - | |
42
+
43
+
44
+ ### Card.Grid
45
+
46
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
47
+ |--------|--------|--------|--------|--------|
48
+ | className | 网格容器类名 | string | - | |
49
+ | hoverable | 鼠标移过时可浮起 | boolean | true | |
50
+ | style | 定义网格容器类名的样式 | CSSProperties | - | |
51
+
52
+
53
+ ### Card.Meta
54
+
55
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
56
+ |--------|--------|--------|--------|--------|
57
+ | avatar | 头像/图标 | ReactNode | - | |
58
+ | className | 容器类名 | string | - | |
59
+ | description | 描述内容 | ReactNode | - | |
60
+ | style | 定义容器类名的样式 | CSSProperties | - | |
61
+ | title | 标题内容 | ReactNode | - | |
@@ -0,0 +1,69 @@
1
+
2
+
3
+ <DemoTitle title="Checkbox" desc="收集用户的多项选择。">
4
+ #### API
5
+
6
+ | 属性名 | 描述 | 类型 | 默认值 |
7
+ |--------|--------|--------|--------|
8
+ | description | 描述文本 | string | |
9
+ | descriptionClassName | 描述文本的样式类名 | string | |
10
+ | descriptionStyle | 描述文本的内联样式 | React.CSSProperties | |
11
+
12
+
13
+ <AntdApiRef url="https://ant.design/components/checkbox-cn/#api"></AntdApiRef>
14
+
15
+
16
+ ## antd API
17
+
18
+ 通用属性参考:[通用属性](/docs/react/common-props)
19
+
20
+ #### Checkbox
21
+
22
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
23
+ |--------|--------|--------|--------|--------|
24
+ | autoFocus | 自动获取焦点 | boolean | false | |
25
+ | checked | 指定当前是否选中 | boolean | false | |
26
+ | defaultChecked | 初始是否选中 | boolean | false | |
27
+ | disabled | 失效状态 | boolean | false | |
28
+ | indeterminate | 设置 indeterminate 状态,只负责样式控制 | boolean | false | |
29
+ | onChange | 变化时的回调函数 | (e: CheckboxChangeEvent) => void | - | |
30
+ | onBlur | 失去焦点时的回调 | function() | - | |
31
+ | onFocus | 获得焦点时的回调 | function() | - | |
32
+
33
+
34
+ #### Checkbox.Group
35
+
36
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
37
+ |--------|--------|--------|--------|--------|
38
+ | defaultValue | 默认选中的选项 | (string \| number)[] | [] | |
39
+ | disabled | 整组失效 | boolean | false | |
40
+ | name | CheckboxGroup 下所有 | string | - | |
41
+ | options | 指定可选项 | string[] \| number[] \| Option[] | [] | |
42
+ | value | 指定选中的选项 | (string \| number \| boolean)[] | [] | |
43
+ | title | 选项的 title | string | - | |
44
+ | className | 选项的类名 | string | - | 5.25.0 |
45
+ | style | 选项的样式 | React.CSSProperties | - | |
46
+ | onChange | 变化时的回调函数 | (checkedValue: T[]) => void | - | |
47
+
48
+
49
+ ##### Option
50
+
51
+
52
+ ```typescript
53
+ interface Option {
54
+ label: string;
55
+ value: string;
56
+ disabled?: boolean;
57
+ }
58
+ ```
59
+
60
+
61
+ ### 方法
62
+
63
+ #### Checkbox
64
+
65
+ | 名称 | 描述 | 版本 |
66
+ |--------|--------|--------|
67
+ | blur() | 移除焦点 | |
68
+ | focus() | 获取焦点 | |
69
+ | nativeElement | 返回 Checkbox 的 DOM 节点 | 5.17.3 |
@@ -0,0 +1,13 @@
1
+
2
+
3
+ <DemoTitle title="CodeBlock" desc="代码块">
4
+ #### API
5
+
6
+ | 属性名 | 描述 | 类型 | 默认值 |
7
+ |--------|--------|--------|--------|
8
+ | language | 语言 | string \| string[] | (必填) |
9
+ | value | 值 | string | (必填) |
10
+ | className | 类名 | string | |
11
+ | theme | 主题 | 'dark' \| 'light' | |
12
+ | readOnly | 只读 | boolean | |
13
+ | onChange | | (value: string) => void | |
@@ -0,0 +1,56 @@
1
+
2
+
3
+ <DemoTitle title="Collapse" desc="可以折叠/展开的内容区域">
4
+ #### API
5
+
6
+ <AntdApiRef url="https://ant.design/components/collapse-cn/#api"></AntdApiRef>
7
+
8
+
9
+ ## antd API
10
+
11
+ 通用属性参考:[通用属性](/docs/react/common-props)
12
+
13
+ ### Collapse
14
+
15
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
16
+ |--------|--------|--------|--------|--------|
17
+ | accordion | 手风琴模式 | boolean | false | |
18
+ | activeKey | 当前激活 tab 面板的 key | string[] \| string | | |
19
+ | bordered | 带边框风格的折叠面板 | boolean | true | |
20
+ | collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 |
21
+ | defaultActiveKey | 初始化选中面板的 key | string[] \| string | - | |
22
+ | destroyOnHidden | 销毁折叠隐藏的面板 | boolean | false | 5.25.0 |
23
+ | expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
24
+ | expandIconPosition | 设置图标位置 | start | - | 4.21.0 |
25
+ | ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
26
+ | size | 设置折叠面板大小 | large | middle | 5.2.0 |
27
+ | onChange | 切换面板的回调 | function | - | |
28
+ | items | 折叠项目内容 | | - | 5.6.0 |
29
+
30
+
31
+ ### ItemType
32
+
33
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
34
+ |--------|--------|--------|--------|--------|
35
+ | classNames | 语义化结构 className | | - | 5.21.0 |
36
+ | collapsible | 是否可折叠或指定可折叠触发区域 | header | - | |
37
+ | forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
38
+ | key | 对应 activeKey | string \| number | - | |
39
+ | label | 面板标题 | ReactNode | - | - |
40
+ | showArrow | 是否展示当前面板上的箭头(为 false 时,collapsible 不能设为 icon) | boolean | true | |
41
+ | styles | 语义化结构 style | | - | 5.21.0 |
42
+
43
+
44
+ ### Collapse.Panel
45
+
46
+ <!-- prettier-ignore -->
47
+ <Container type="warning" title="已废弃">
48
+ 版本 >= 5.6.0 时请使用 items 方式配置面板。
49
+ </Container>
50
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
51
+ |--------|--------|--------|--------|--------|
52
+ | collapsible | 是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 (icon: 4.24.0) |
53
+ | forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
54
+ | header | 面板标题 | ReactNode | - | |
55
+ | key | 对应 activeKey | string \| number | - | |
56
+ | showArrow | 是否展示当前面板上的箭头(为 false 时,collapsible 不能设为 icon) | boolean | true | |