@agentscope-ai/design 1.0.13 → 1.0.15-rc.0
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/README.md +237 -178
- package/README.zh-CN.md +312 -0
- package/lib/antd/styles/alert.style.js +7 -1
- package/lib/antd/styles/dropdown.style.js +5 -1
- package/lib/antd/styles/select.style.js +9 -1
- package/lib/components/commonComponents/Alert/demo/demo2.js +5 -0
- package/lib/components/commonComponents/AlertDialog/index.d.ts +37 -325
- package/lib/components/commonComponents/AlertDialog/index.js +151 -3
- package/lib/components/commonComponents/AlertDialog/index.style.js +2 -14
- package/lib/components/commonComponents/Drawer/index.style.js +2 -42
- package/lib/components/commonComponents/Modal/index.d.ts +16 -2
- package/lib/components/commonComponents/Modal/index.js +71 -3
- package/lib/components/commonComponents/Modal/index.style.js +2 -62
- package/lib/components/commonComponents/PromptsEditor/VarRender.d.ts +1 -1
- package/lib/components/commonComponents/Tabs/index.style.js +7 -1
- package/lib/components/commonComponents/Tag/demo/demo1.js +1 -1
- package/lib/components/commonComponents/Tag/index.d.ts +5 -1
- package/lib/components/commonComponents/Tag/index.js +4 -0
- package/lib/components/commonComponents/Tag/index.style.js +65 -1
- package/lib/components/mobileComponents/MobileAlertDialog/demo/demo1.d.ts +3 -0
- package/lib/components/mobileComponents/MobileAlertDialog/demo/demo1.js +20 -0
- package/lib/components/mobileComponents/MobileAlertDialog/demo/demo2.d.ts +3 -0
- package/lib/components/mobileComponents/MobileAlertDialog/demo/demo2.js +50 -0
- package/lib/components/{commonComponents/AlertDialog/mobile.d.ts → mobileComponents/MobileAlertDialog/index.d.ts} +8 -8
- package/lib/components/{commonComponents/AlertDialog/mobile.js → mobileComponents/MobileAlertDialog/index.js} +3 -3
- package/lib/components/mobileComponents/MobileAlertDialog/index.style.d.ts +1 -0
- package/lib/components/mobileComponents/MobileAlertDialog/index.style.js +22 -0
- package/lib/components/mobileComponents/MobileDrawer/Confirm.d.ts +46 -0
- package/lib/components/mobileComponents/MobileDrawer/Confirm.js +63 -0
- package/lib/components/mobileComponents/MobileDrawer/demo/demo1.d.ts +2 -0
- package/lib/components/mobileComponents/MobileDrawer/demo/demo1.js +49 -0
- package/lib/components/mobileComponents/MobileDrawer/demo/demo2.d.ts +7 -0
- package/lib/components/mobileComponents/MobileDrawer/demo/demo2.js +90 -0
- package/lib/components/mobileComponents/MobileDrawer/demo/demo3.d.ts +2 -0
- package/lib/components/mobileComponents/MobileDrawer/demo/demo3.js +64 -0
- package/lib/components/mobileComponents/MobileDrawer/demo/demo4.d.ts +2 -0
- package/lib/components/mobileComponents/MobileDrawer/demo/demo4.js +99 -0
- package/lib/components/mobileComponents/MobileDrawer/demo/demo5.d.ts +2 -0
- package/lib/components/mobileComponents/MobileDrawer/demo/demo5.js +73 -0
- package/lib/components/mobileComponents/MobileDrawer/index.d.ts +16 -0
- package/lib/components/{commonComponents/Modal/pc.js → mobileComponents/MobileDrawer/index.js} +25 -52
- package/lib/components/mobileComponents/MobileDrawer/index.style.d.ts +1 -0
- package/lib/components/mobileComponents/MobileDrawer/index.style.js +44 -0
- package/lib/components/mobileComponents/MobileModal/demo/basic.d.ts +1 -0
- package/lib/components/mobileComponents/MobileModal/demo/basic.js +49 -0
- package/lib/components/mobileComponents/MobileModal/demo/styles.d.ts +1 -0
- package/lib/components/mobileComponents/MobileModal/demo/styles.js +158 -0
- package/lib/components/mobileComponents/MobileModal/demo/width.d.ts +1 -0
- package/lib/components/mobileComponents/MobileModal/demo/width.js +68 -0
- package/lib/components/mobileComponents/MobileModal/index.d.ts +43 -0
- package/lib/components/{commonComponents/Modal/mobile.js → mobileComponents/MobileModal/index.js} +45 -11
- package/lib/components/mobileComponents/MobileModal/index.style.d.ts +1 -0
- package/lib/components/mobileComponents/MobileModal/index.style.js +70 -0
- package/lib/index.d.ts +7 -1
- package/lib/index.js +10 -1
- package/lib/libs/env/index.d.ts +1 -1
- package/lib/typings.d.ts +0 -2
- package/llms/all.llms.txt +4953 -0
- package/llms/components/commonComponents/Alert/index.zh-CN.llms.txt +32 -0
- package/llms/components/commonComponents/AlertDialog/index.zh-CN.llms.txt +171 -0
- package/llms/components/commonComponents/Anchor/index.zh-CN.llms.txt +51 -0
- package/llms/components/commonComponents/Avatar/index.zh-CN.llms.txt +37 -0
- package/llms/components/commonComponents/Breadcrumb/index.zh-CN.llms.txt +117 -0
- package/llms/components/commonComponents/Button/index.zh-CN.llms.txt +54 -0
- package/llms/components/commonComponents/Card/index.zh-CN.llms.txt +61 -0
- package/llms/components/commonComponents/Checkbox/index.zh-CN.llms.txt +69 -0
- package/llms/components/commonComponents/CodeBlock/index.zh-CN.llms.txt +13 -0
- package/llms/components/commonComponents/Collapse/index.zh-CN.llms.txt +56 -0
- package/llms/components/commonComponents/CollapsePanel/index.zh-CN.llms.txt +69 -0
- package/llms/components/commonComponents/DatePicker/index.zh-CN.llms.txt +221 -0
- package/llms/components/commonComponents/Descriptions/index.zh-CN.llms.txt +37 -0
- package/llms/components/commonComponents/Drawer/index.zh-CN.llms.txt +62 -0
- package/llms/components/commonComponents/Dropdown/index.zh-CN.llms.txt +149 -0
- package/llms/components/commonComponents/Empty/index.zh-CN.llms.txt +40 -0
- package/llms/components/commonComponents/FloatButton/index.zh-CN.llms.txt +51 -0
- package/llms/components/commonComponents/Form/index.zh-CN.llms.txt +558 -0
- package/llms/components/commonComponents/IconButton/index.zh-CN.llms.txt +45 -0
- package/llms/components/commonComponents/Image/index.zh-CN.llms.txt +165 -0
- package/llms/components/commonComponents/Input/index.zh-CN.llms.txt +133 -0
- package/llms/components/commonComponents/InputNumber/index.zh-CN.llms.txt +51 -0
- package/llms/components/commonComponents/Message/index.zh-CN.llms.txt +98 -0
- package/llms/components/commonComponents/Modal/index.zh-CN.llms.txt +168 -0
- package/llms/components/commonComponents/Notification/index.zh-CN.llms.txt +94 -0
- package/llms/components/commonComponents/Pagination/index.zh-CN.llms.txt +45 -0
- package/llms/components/commonComponents/Popconfirm/index.zh-CN.llms.txt +55 -0
- package/llms/components/commonComponents/Popover/index.zh-CN.llms.txt +43 -0
- package/llms/components/commonComponents/Progress/index.zh-CN.llms.txt +50 -0
- package/llms/components/commonComponents/PromptsEditor/index.zh-CN.llms.txt +15 -0
- package/llms/components/commonComponents/Radio/index.zh-CN.llms.txt +66 -0
- package/llms/components/commonComponents/RadioButton/index.zh-CN.llms.txt +73 -0
- package/llms/components/commonComponents/Result/index.zh-CN.llms.txt +10 -0
- package/llms/components/commonComponents/Select/index.zh-CN.llms.txt +96 -0
- package/llms/components/commonComponents/Skeleton/index.zh-CN.llms.txt +59 -0
- package/llms/components/commonComponents/Slider/index.zh-CN.llms.txt +62 -0
- package/llms/components/commonComponents/Spinner/index.zh-CN.llms.txt +15 -0
- package/llms/components/commonComponents/Statistic/index.zh-CN.llms.txt +58 -0
- package/llms/components/commonComponents/Steps/index.zh-CN.llms.txt +57 -0
- package/llms/components/commonComponents/Switch/index.zh-CN.llms.txt +39 -0
- package/llms/components/commonComponents/Table/index.zh-CN.llms.txt +254 -0
- package/llms/components/commonComponents/Tabs/index.zh-CN.llms.txt +68 -0
- package/llms/components/commonComponents/Tag/index.zh-CN.llms.txt +33 -0
- package/llms/components/commonComponents/TimePicker/index.zh-CN.llms.txt +111 -0
- package/llms/components/commonComponents/Tooltip/index.zh-CN.llms.txt +44 -0
- package/llms/components/commonComponents/Upload/index.zh-CN.llms.txt +95 -0
- package/llms/components/commonComponents/Video/index.zh-CN.llms.txt +7 -0
- package/llms/docs/guide/fromAntd.zh-CN.llms.txt +156 -0
- package/llms/docs/guide/fromScratch.zh-CN.llms.txt +83 -0
- package/llms/docs/guide/iconfont.zh-CN.llms.txt +69 -0
- package/llms/docs/guide/overview.zh-CN.llms.txt +51 -0
- package/llms/docs/guide/sparkIcons.zh-CN.llms.txt +25 -0
- package/llms/docs/guide/theme.zh-CN.llms.txt +61 -0
- package/llms/docs/guide/tokens&variables.zh-CN.llms.txt +425 -0
- package/llms/docs/guide/vibe-coding.zh-CN.llms.txt +29 -0
- package/llms/index.llms.txt +49 -0
- package/package.json +14 -4
- package/scripts/mcp-docs-server.js +14079 -0
- package/lib/components/commonComponents/AlertDialog/pc.d.ts +0 -38
- package/lib/components/commonComponents/AlertDialog/pc.js +0 -152
- package/lib/components/commonComponents/Modal/mobile.d.ts +0 -28
- package/lib/components/commonComponents/Modal/pc.d.ts +0 -28
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
<DemoTitle title="CollapsePanel" desc="折叠面板">
|
|
4
|
+
#### API
|
|
5
|
+
|
|
6
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
7
|
+
|--------|--------|--------|--------|
|
|
8
|
+
| collapsedHeight | 收起状态下显示的内容高度 | number | 0 |
|
|
9
|
+
| expandedHeight | 展开状态下的内容高度,设置后内容超出时可滚动,不设置则自适应内容高度 | number | 300 |
|
|
10
|
+
| title | 面板标题 | string \| React.ReactNode | "" |
|
|
11
|
+
| expandOnPanelClick | 是否允许点击整个面板进行展开 | boolean | false |
|
|
12
|
+
| extra | 面板右侧内容 | React.ReactNode | |
|
|
13
|
+
| children | 面板内容 | React.ReactNode | |
|
|
14
|
+
| defaultExpanded | 是否默认展开 | boolean | false |
|
|
15
|
+
| classNames | 语义化的classNames | Partial> | |
|
|
16
|
+
| styles | 语义化的styles | Partial<
|
|
17
|
+
Record
|
|
18
|
+
> | |
|
|
19
|
+
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
## antd API
|
|
23
|
+
|
|
24
|
+
通用属性参考:[通用属性](/docs/react/common-props)
|
|
25
|
+
|
|
26
|
+
### Collapse
|
|
27
|
+
|
|
28
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
29
|
+
|--------|--------|--------|--------|--------|
|
|
30
|
+
| accordion | 手风琴模式 | boolean | false | |
|
|
31
|
+
| activeKey | 当前激活 tab 面板的 key | string[] \| string | | |
|
|
32
|
+
| bordered | 带边框风格的折叠面板 | boolean | true | |
|
|
33
|
+
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 |
|
|
34
|
+
| defaultActiveKey | 初始化选中面板的 key | string[] \| string | - | |
|
|
35
|
+
| destroyOnHidden | 销毁折叠隐藏的面板 | boolean | false | 5.25.0 |
|
|
36
|
+
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
|
|
37
|
+
| expandIconPosition | 设置图标位置 | start | - | 4.21.0 |
|
|
38
|
+
| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
|
|
39
|
+
| size | 设置折叠面板大小 | large | middle | 5.2.0 |
|
|
40
|
+
| onChange | 切换面板的回调 | function | - | |
|
|
41
|
+
| items | 折叠项目内容 | | - | 5.6.0 |
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
### ItemType
|
|
45
|
+
|
|
46
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
47
|
+
|--------|--------|--------|--------|--------|
|
|
48
|
+
| classNames | 语义化结构 className | | - | 5.21.0 |
|
|
49
|
+
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | |
|
|
50
|
+
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
51
|
+
| key | 对应 activeKey | string \| number | - | |
|
|
52
|
+
| label | 面板标题 | ReactNode | - | - |
|
|
53
|
+
| showArrow | 是否展示当前面板上的箭头(为 false 时,collapsible 不能设为 icon) | boolean | true | |
|
|
54
|
+
| styles | 语义化结构 style | | - | 5.21.0 |
|
|
55
|
+
|
|
56
|
+
|
|
57
|
+
### Collapse.Panel
|
|
58
|
+
|
|
59
|
+
<!-- prettier-ignore -->
|
|
60
|
+
<Container type="warning" title="已废弃">
|
|
61
|
+
版本 >= 5.6.0 时请使用 items 方式配置面板。
|
|
62
|
+
</Container>
|
|
63
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
64
|
+
|--------|--------|--------|--------|--------|
|
|
65
|
+
| collapsible | 是否可折叠或指定可折叠触发区域 | header | - | 4.9.0 (icon: 4.24.0) |
|
|
66
|
+
| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false | |
|
|
67
|
+
| header | 面板标题 | ReactNode | - | |
|
|
68
|
+
| key | 对应 activeKey | string \| number | - | |
|
|
69
|
+
| showArrow | 是否展示当前面板上的箭头(为 false 时,collapsible 不能设为 icon) | boolean | true | |
|
|
@@ -0,0 +1,221 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
<DemoTitle title="DatePicker" desc="输入或选择时间的控件。">
|
|
4
|
+
#### API
|
|
5
|
+
|
|
6
|
+
<AntdApiRef url="https://ant.design/components/date-picker-cn/#api"></AntdApiRef>
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## antd API
|
|
10
|
+
|
|
11
|
+
通用属性参考:[通用属性](/docs/react/common-props)
|
|
12
|
+
|
|
13
|
+
日期类组件包括以下五种形式。
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
- DatePicker
|
|
17
|
+
- DatePicker[picker="month"]
|
|
18
|
+
- DatePicker[picker="week"]
|
|
19
|
+
- DatePicker[picker="year"]
|
|
20
|
+
- DatePicker[picker="quarter"] (4.1.0 新增)
|
|
21
|
+
- RangePicker
|
|
22
|
+
|
|
23
|
+
### 国际化配置
|
|
24
|
+
|
|
25
|
+
默认配置为 en-US,如果你需要设置其他语言,推荐在入口处使用我们提供的国际化组件,详见:[ConfigProvider 国际化](https://ant.design/components/config-provider-cn/)。
|
|
26
|
+
|
|
27
|
+
如有特殊需求(仅修改单一组件的语言),请使用 locale 参数,参考:[默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)。
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
```jsx
|
|
31
|
+
// 默认语言为 en-US,如果你需要设置其他语言,推荐在入口文件全局设置 locale
|
|
32
|
+
// 确保还导入相关的 dayjs 文件,否则所有文本的区域设置都不会更改(例如范围选择器月份)
|
|
33
|
+
import locale from 'antd/locale/zh_CN';
|
|
34
|
+
import dayjs from 'dayjs';
|
|
35
|
+
|
|
36
|
+
import 'dayjs/locale/zh-cn';
|
|
37
|
+
|
|
38
|
+
dayjs.locale('zh-cn');
|
|
39
|
+
|
|
40
|
+
<ConfigProvider locale={locale}>
|
|
41
|
+
<DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} />
|
|
42
|
+
</ConfigProvider>;
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
<!-- prettier-ignore -->
|
|
47
|
+
<Container type="warning">
|
|
48
|
+
在搭配 Next.js 的 App Router 使用时,注意在引入 dayjs 的 locale 文件时加上 `'use client'`。这是由于 Ant Design 的组件都是客户端组件,在 RSC 中引入 dayjs 的 locale 文件将不会在客户端生效。
|
|
49
|
+
</Container>
|
|
50
|
+
### 共同的 API
|
|
51
|
+
|
|
52
|
+
以下 API 为 DatePicker、 RangePicker 共享的 API。
|
|
53
|
+
|
|
54
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
55
|
+
|--------|--------|--------|--------|--------|
|
|
56
|
+
| allowClear | 自定义清除按钮 | boolean \| { clearIcon?: ReactNode } | true | 5.8.0: 支持对象类型 |
|
|
57
|
+
| autoFocus | 自动获取焦点 | boolean | false | |
|
|
58
|
+
| className | 选择器 className | string | - | |
|
|
59
|
+
| dateRender | 自定义日期单元格的内容,5.4.0 起用 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 |
|
|
60
|
+
| cellRender | 自定义单元格的内容 | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
|
|
61
|
+
| components | 自定义面板 | Record | - | 5.14.0 |
|
|
62
|
+
| defaultOpen | 是否默认展开控制弹层 | boolean | - | |
|
|
63
|
+
| disabled | 禁用 | boolean | false | |
|
|
64
|
+
| disabledDate | 不可选择的日期 | (currentDate: dayjs, info: { from?: dayjs, type: Picker }) => boolean | - | info |
|
|
65
|
+
| format | 设置日期格式,为数组时支持多格式匹配,展示以第一个为准。配置参考 | | | |
|
|
66
|
+
| order | 多选、范围时是否自动排序 | boolean | true | 5.14.0 |
|
|
67
|
+
| preserveInvalidOnBlur | 失去焦点是否要清空输入框内无效内容 | boolean | false | 5.14.0 |
|
|
68
|
+
| getPopupContainer | 定义浮层的容器,默认为 body 上新建 div | function(trigger) | - | |
|
|
69
|
+
| inputReadOnly | 设置输入框为只读(避免在移动设备上打开虚拟键盘) | boolean | false | |
|
|
70
|
+
| locale | 国际化配置 | object | | |
|
|
71
|
+
| minDate | 最小日期,同样会限制面板的切换范围 | dayjs | - | 5.14.0 |
|
|
72
|
+
| maxDate | 最大日期,同样会限制面板的切换范围 | dayjs | - | 5.14.0 |
|
|
73
|
+
| mode | 日期面板的状态( | time | - | |
|
|
74
|
+
| needConfirm | 是否需要确认按钮,为 | boolean | - | 5.14.0 |
|
|
75
|
+
| nextIcon | 自定义下一个图标 | ReactNode | - | 4.17.0 |
|
|
76
|
+
| open | 控制弹层是否展开 | boolean | - | |
|
|
77
|
+
| panelRender | 自定义渲染面板 | (panelNode) => ReactNode | - | 4.5.0 |
|
|
78
|
+
| picker | 设置选择器类型 | date | date | quarter |
|
|
79
|
+
| placeholder | 输入框提示文字 | string \| [string, string] | - | |
|
|
80
|
+
| placement | 选择框弹出的位置 | bottomLeft | bottomLeft | |
|
|
81
|
+
| prefix | 自定义前缀 | ReactNode | - | 5.22.0 |
|
|
82
|
+
| prevIcon | 自定义上一个图标 | ReactNode | - | 4.17.0 |
|
|
83
|
+
| presets | 预设时间范围快捷选择, 自 | { label: React.ReactNode, value: Dayjs \| (() => Dayjs) }[] | - | |
|
|
84
|
+
| size | 输入框大小, | large | - | |
|
|
85
|
+
| status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
|
|
86
|
+
| style | 自定义输入框样式 | CSSProperties | {} | |
|
|
87
|
+
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
|
88
|
+
| superNextIcon | 自定义 | ReactNode | - | 4.17.0 |
|
|
89
|
+
| superPrevIcon | 自定义 | ReactNode | - | 4.17.0 |
|
|
90
|
+
| variant | 形态变体 | outlined | outlined | 5.13.0 \| |
|
|
91
|
+
| onOpenChange | 弹出日历和关闭日历的回调 | function(open) | - | |
|
|
92
|
+
| onPanelChange | 日历面板切换的回调 | function(value, mode) | - | |
|
|
93
|
+
|
|
94
|
+
|
|
95
|
+
### 共同的方法
|
|
96
|
+
|
|
97
|
+
| 名称 | 描述 | 版本 |
|
|
98
|
+
|--------|--------|--------|
|
|
99
|
+
| blur() | 移除焦点 | |
|
|
100
|
+
| focus() | 获取焦点 | |
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
### DatePicker
|
|
104
|
+
|
|
105
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
106
|
+
|--------|--------|--------|--------|--------|
|
|
107
|
+
| defaultPickerValue | 默认面板日期,每次面板打开时会被重置到该日期 | | - | 5.14.0 |
|
|
108
|
+
| defaultValue | 默认日期,如果开始时间或结束时间为 | | - | |
|
|
109
|
+
| disabledTime | 不可选择的时间 | function(date) | - | |
|
|
110
|
+
| format | 展示的日期格式,配置参考 | | YYYY-MM-DD | |
|
|
111
|
+
| multiple | 是否为多选,不支持 | boolean | false | 5.14.0 |
|
|
112
|
+
| pickerValue | 面板日期,可以用于受控切换面板所在日期。配合 | | - | 5.14.0 |
|
|
113
|
+
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
|
|
114
|
+
| showNow | 显示当前日期时间的快捷选择 | boolean | - | |
|
|
115
|
+
| showTime | 增加时间选择功能 | Object \| boolean | | |
|
|
116
|
+
| showTime.defaultValue | 设置用户选择日期时默认的时分秒, | | dayjs() | |
|
|
117
|
+
| showWeek | DatePicker 下展示当前周 | boolean | false | 5.14.0 |
|
|
118
|
+
| value | 日期 | | - | |
|
|
119
|
+
| onChange | 时间发生变化的回调 | function(date: dayjs, dateString: string) | - | |
|
|
120
|
+
| onOk | 点击确定按钮的回调 | function() | - | |
|
|
121
|
+
| onPanelChange | 日期面板变化时的回调 | function(value, mode) | - | |
|
|
122
|
+
|
|
123
|
+
|
|
124
|
+
### DatePicker[picker=year]
|
|
125
|
+
|
|
126
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
127
|
+
|--------|--------|--------|--------|--------|
|
|
128
|
+
| defaultValue | 默认日期 | | - | |
|
|
129
|
+
| format | 展示的日期格式,配置参考 | | YYYY | |
|
|
130
|
+
| multiple | 是否为多选 | boolean | false | 5.14.0 |
|
|
131
|
+
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
|
132
|
+
| value | 日期 | | - | |
|
|
133
|
+
| onChange | 时间发生变化的回调,发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | |
|
|
134
|
+
|
|
135
|
+
|
|
136
|
+
### DatePicker[picker=quarter]
|
|
137
|
+
|
|
138
|
+
`4.1.0` 新增。
|
|
139
|
+
|
|
140
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
141
|
+
|--------|--------|--------|--------|--------|
|
|
142
|
+
| defaultValue | 默认日期 | | - | |
|
|
143
|
+
| format | 展示的日期格式,配置参考 | | YYYY-\QQ | |
|
|
144
|
+
| multiple | 是否为多选 | boolean | false | 5.14.0 |
|
|
145
|
+
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
|
146
|
+
| value | 日期 | | - | |
|
|
147
|
+
| onChange | 时间发生变化的回调,发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | |
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
### DatePicker[picker=month]
|
|
151
|
+
|
|
152
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
153
|
+
|--------|--------|--------|--------|--------|
|
|
154
|
+
| defaultValue | 默认日期 | | - | |
|
|
155
|
+
| format | 展示的日期格式,配置参考 | | YYYY-MM | |
|
|
156
|
+
| multiple | 是否为多选 | boolean | false | 5.14.0 |
|
|
157
|
+
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
|
158
|
+
| value | 日期 | | - | |
|
|
159
|
+
| onChange | 时间发生变化的回调,发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | |
|
|
160
|
+
|
|
161
|
+
|
|
162
|
+
### DatePicker[picker=week]
|
|
163
|
+
|
|
164
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
165
|
+
|--------|--------|--------|--------|--------|
|
|
166
|
+
| defaultValue | 默认日期 | | - | |
|
|
167
|
+
| format | 展示的日期格式,配置参考 | | YYYY-wo | |
|
|
168
|
+
| multiple | 是否为多选 | boolean | false | 5.14.0 |
|
|
169
|
+
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
|
|
170
|
+
| value | 日期 | | - | |
|
|
171
|
+
| onChange | 时间发生变化的回调,发生在用户选择时间时 | function(date: dayjs, dateString: string) | - | |
|
|
172
|
+
| showWeek | DatePicker 下展示当前周 | boolean | true | 5.14.0 |
|
|
173
|
+
|
|
174
|
+
|
|
175
|
+
### RangePicker
|
|
176
|
+
|
|
177
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
178
|
+
|--------|--------|--------|--------|--------|
|
|
179
|
+
| allowEmpty | 允许起始项部分为空 | [boolean, boolean] | [false, false] | |
|
|
180
|
+
| cellRender | 自定义单元格的内容。 | (current: dayjs, info: { originNode: React.ReactElement,today: DateType, range?: 'start' \| 'end', type: PanelMode, locale?: Locale, subType?: 'hour' \| 'minute' \| 'second' \| 'meridiem' }) => React.ReactNode | - | 5.4.0 |
|
|
181
|
+
| dateRender | 自定义日期单元格的内容,5.4.0 起用 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - | < 5.4.0 |
|
|
182
|
+
| defaultPickerValue | 默认面板日期,每次面板打开时会被重置到该日期 | | - | 5.14.0 |
|
|
183
|
+
| defaultValue | 默认日期 | | - | |
|
|
184
|
+
| disabled | 禁用起始项 | [boolean, boolean] | - | |
|
|
185
|
+
| disabledTime | 不可选择的时间 | function(date: dayjs, partial: | - | info.from |
|
|
186
|
+
| format | 展示的日期格式,配置参考 | | YYYY-MM-DD HH:mm:ss | |
|
|
187
|
+
| id | 设置输入框 | { start?: string, end?: string } | - | 5.14.0 |
|
|
188
|
+
| pickerValue | 面板日期,可以用于受控切换面板所在日期。配合 | | - | 5.14.0 |
|
|
189
|
+
| presets | 预设时间范围快捷选择,自 | { label: React.ReactNode, value: (Dayjs \| (() => Dayjs))[] }[] | - | |
|
|
190
|
+
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
|
191
|
+
| separator | 设置分隔符 | React.ReactNode | | |
|
|
192
|
+
| showTime | 增加时间选择功能 | Object\|boolean | | |
|
|
193
|
+
| showTime.defaultValue | 设置用户选择日期时默认的时分秒, | | [dayjs(), dayjs()] | |
|
|
194
|
+
| value | 日期 | | - | |
|
|
195
|
+
| onCalendarChange | 待选日期发生变化的回调。 | function(dates: [dayjs, dayjs], dateStrings: [string, string], info: { range: | - | |
|
|
196
|
+
| onChange | 日期范围发生变化的回调 | function(dates: [dayjs, dayjs], dateStrings: [string, string]) | - | |
|
|
197
|
+
| onFocus | 聚焦时回调 | function(event, { range: 'start' \| 'end' }) | - | range |
|
|
198
|
+
| onBlur | 失焦时回调 | function(event, { range: 'start' \| 'end' }) | - | range |
|
|
199
|
+
|
|
200
|
+
|
|
201
|
+
#### formatType
|
|
202
|
+
|
|
203
|
+
|
|
204
|
+
```typescript
|
|
205
|
+
import type { Dayjs } from 'dayjs';
|
|
206
|
+
|
|
207
|
+
type Generic = string;
|
|
208
|
+
type GenericFn = (value: Dayjs) => string;
|
|
209
|
+
|
|
210
|
+
export type FormatType =
|
|
211
|
+
| Generic
|
|
212
|
+
| GenericFn
|
|
213
|
+
| Array
|
|
214
|
+
| {
|
|
215
|
+
format: string;
|
|
216
|
+
type?: 'mask';
|
|
217
|
+
};
|
|
218
|
+
```
|
|
219
|
+
|
|
220
|
+
|
|
221
|
+
注意:`type` 定义为 `5.14.0` 新增。
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
<DemoTitle title="Descriptions" desc="展示多个只读字段的组合">
|
|
4
|
+
#### API
|
|
5
|
+
|
|
6
|
+
<AntdApiRef url="https://ant.design/components/descriptions-cn/#api"></AntdApiRef>
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## antd API
|
|
10
|
+
|
|
11
|
+
通用属性参考:[通用属性](/docs/react/common-props)
|
|
12
|
+
|
|
13
|
+
### Descriptions
|
|
14
|
+
|
|
15
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
16
|
+
|--------|--------|--------|--------|--------|
|
|
17
|
+
| bordered | 是否展示边框 | boolean | false | |
|
|
18
|
+
| colon | 配置 | boolean | true | |
|
|
19
|
+
| column | 一行的 | number \| | 3 | |
|
|
20
|
+
| extra | 描述列表的操作区域,显示在右上方 | ReactNode | - | 4.5.0 |
|
|
21
|
+
| items | 描述列表项内容 | | - | 5.8.0 |
|
|
22
|
+
| layout | 描述布局 | horizontal | horizontal | |
|
|
23
|
+
| size | 设置列表的大小。可以设置为 | default | - | |
|
|
24
|
+
| title | 描述列表的标题,显示在最顶部 | ReactNode | - | |
|
|
25
|
+
| classNames | 语义化结构 class | | - | 5.23.0 |
|
|
26
|
+
| styles | 语义化结构 style | | - | 5.23.0 |
|
|
27
|
+
|
|
28
|
+
|
|
29
|
+
### DescriptionItem
|
|
30
|
+
|
|
31
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
32
|
+
|--------|--------|--------|--------|--------|
|
|
33
|
+
| label | 内容的描述 | ReactNode | - | |
|
|
34
|
+
| span | 包含列的数量( | number\| | 1 | screens: 5.9.0 |
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`(或 `contentStyle`)时,两者会同时作用。样式冲突时,后者会覆盖前者。
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
<DemoTitle title="Drawer" desc="从页面一侧滑入的操作面板,用于承载临时界面内容。">
|
|
4
|
+
#### API
|
|
5
|
+
|
|
6
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
7
|
+
|--------|--------|--------|--------|
|
|
8
|
+
| showDivider | 是否显示分割线 | boolean | true |
|
|
9
|
+
|
|
10
|
+
##### Drawer.Confirm - 带按钮的抽屉
|
|
11
|
+
|
|
12
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
13
|
+
|--------|--------|--------|--------|
|
|
14
|
+
| footer | 自定义底部内容 | React.ReactNode | |
|
|
15
|
+
| onOk | 点击确定回调 | () => void | |
|
|
16
|
+
| okText | 确认按钮文字 | string | |
|
|
17
|
+
| okButtonProps | 确认按钮属性 | ButtonProps | |
|
|
18
|
+
| onCancel | 点击取消回调 | () => void | |
|
|
19
|
+
| cancelText | 取消按钮文字 | string | |
|
|
20
|
+
| cancelButtonProps | 取消按钮属性 | ButtonProps | |
|
|
21
|
+
| info | 底部额外内容 | React.ReactNode | |
|
|
22
|
+
|
|
23
|
+
<AntdApiRef url="https://ant.design/components/drawer-cn/#api"></AntdApiRef>
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
## antd API
|
|
27
|
+
|
|
28
|
+
通用属性参考:[通用属性](/docs/react/common-props)
|
|
29
|
+
|
|
30
|
+
<!-- prettier-ignore -->
|
|
31
|
+
<Container type="warning" title="注意">
|
|
32
|
+
v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v4 `className` 与 `style` 改至配置 Drawer 窗体样式以和 Modal 对齐。
|
|
33
|
+
</Container>
|
|
34
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
35
|
+
|--------|--------|--------|--------|--------|
|
|
36
|
+
| autoFocus | 抽屉展开后是否将焦点切换至其 DOM 节点 | boolean | true | 4.17.0 |
|
|
37
|
+
| afterOpenChange | 切换抽屉时动画结束后的回调 | function(open) | - | |
|
|
38
|
+
| className | Drawer 容器外层 className 设置,如果需要设置最外层,请使用 rootClassName | string | - | |
|
|
39
|
+
| classNames | 语义化结构 className | | - | 5.10.0 |
|
|
40
|
+
| closeIcon | 自定义关闭图标。5.7.0:设置为 | ReactNode | | |
|
|
41
|
+
| destroyOnHidden | 关闭时销毁 Drawer 里的子元素 | boolean | false | 5.25.0 |
|
|
42
|
+
| extra | 抽屉右上角的操作区域 | ReactNode | - | 4.17.0 |
|
|
43
|
+
| footer | 抽屉的页脚 | ReactNode | - | |
|
|
44
|
+
| forceRender | 预渲染 Drawer 内元素 | boolean | false | |
|
|
45
|
+
| getContainer | 指定 Drawer 挂载的节点, | HTMLElement \| () => HTMLElement \| Selectors \| false | body | |
|
|
46
|
+
| height | 高度,在 | string \| number | 378 | |
|
|
47
|
+
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
|
|
48
|
+
| mask | 是否展示遮罩 | boolean | true | |
|
|
49
|
+
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
|
|
50
|
+
| placement | 抽屉的方向 | top | right | |
|
|
51
|
+
| push | 用于设置多层 Drawer 的推动行为 | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
|
|
52
|
+
| rootStyle | 可用于设置 Drawer 最外层容器的样式,和 | CSSProperties | - | |
|
|
53
|
+
| size | 预设抽屉宽度(或高度),default | 'default' \| 'large' | 'default' | 4.17.0 |
|
|
54
|
+
| style | 设计 Drawer 容器样式,如果你只需要设置内容部分请使用 | CSSProperties | - | |
|
|
55
|
+
| styles | 语义化结构 style | | - | 5.10.0 |
|
|
56
|
+
| title | 标题 | ReactNode | - | |
|
|
57
|
+
| loading | 显示骨架屏 | boolean | false | 5.17.0 |
|
|
58
|
+
| open | Drawer 是否可见 | boolean | - |
|
|
59
|
+
| width | 宽度 | string \| number | 378 | |
|
|
60
|
+
| zIndex | 设置 Drawer 的 | number | 1000 | |
|
|
61
|
+
| onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - | |
|
|
62
|
+
| drawerRender | 自定义渲染抽屉 | (node: ReactNode) => ReactNode | - | 5.18.0 |
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
<DemoTitle title="Dropdown" desc="向下弹出的列表。">
|
|
4
|
+
#### API
|
|
5
|
+
|
|
6
|
+
<AntdApiRef url="https://ant.design/components/dropdown-cn/#api"></AntdApiRef>
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## antd API
|
|
10
|
+
|
|
11
|
+
通用属性参考:[通用属性](/docs/react/common-props)
|
|
12
|
+
|
|
13
|
+
### Dropdown
|
|
14
|
+
|
|
15
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
16
|
+
|--------|--------|--------|--------|--------|
|
|
17
|
+
| arrow | 下拉框箭头是否显示 | boolean \| { pointAtCenter: boolean } | false | |
|
|
18
|
+
| autoAdjustOverflow | 下拉框被遮挡时自动调整位置 | boolean | true | 5.2.0 |
|
|
19
|
+
| autoFocus | 打开后自动聚焦下拉框 | boolean | false | 4.21.0 |
|
|
20
|
+
| disabled | 菜单是否禁用 | boolean | - | |
|
|
21
|
+
| destroyOnHidden | 关闭后是否销毁 Dropdown | boolean | false | 5.25.0 |
|
|
22
|
+
| popupRender | 自定义弹出框内容 | (menus: ReactNode) => ReactNode | - | 5.25.0 |
|
|
23
|
+
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。 | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
|
|
24
|
+
| menu | 菜单配置项 | | - | 4.24.0 |
|
|
25
|
+
| overlayClassName | 下拉根元素的类名称 | string | - | |
|
|
26
|
+
| overlayStyle | 下拉根元素的样式 | CSSProperties | - | |
|
|
27
|
+
| placement | 菜单弹出位置: | string | bottomLeft | |
|
|
28
|
+
| trigger | 触发下拉的行为,移动端不支持 hover | Array< | [ | |
|
|
29
|
+
| open | 菜单是否显示,小于 4.23.0 使用 | boolean | - | 4.23.0 |
|
|
30
|
+
| onOpenChange | 菜单显示状态改变时调用,点击菜单按钮导致的消失不会触发。小于 4.23.0 使用 | (open: boolean, info: { source: 'trigger' \| 'menu' }) => void | - | info.source |
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
### Dropdown.Button
|
|
34
|
+
|
|
35
|
+
属性与 Dropdown 的相同。还包含以下属性:
|
|
36
|
+
|
|
37
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
38
|
+
|--------|--------|--------|--------|--------|
|
|
39
|
+
| buttonsRender | 自定义左右两个按钮 | (buttons: ReactNode[]) => ReactNode[] | - | |
|
|
40
|
+
| loading | 设置按钮载入状态,和 | boolean \| { delay: number, icon: ReactNode } | false | icon: 5.23.0 |
|
|
41
|
+
| danger | 设置危险按钮 | boolean | - | 4.23.0 |
|
|
42
|
+
| icon | 右侧的 icon | ReactNode | - | |
|
|
43
|
+
| size | 按钮大小,和 | large | middle | |
|
|
44
|
+
| type | 按钮类型,和 | primary | default | |
|
|
45
|
+
| onClick | 点击左侧按钮的回调,和 | (event: React.MouseEvent) => void | - | |
|
|
46
|
+
|
|
47
|
+
|
|
48
|
+
## 注意
|
|
49
|
+
|
|
50
|
+
请确保 `Dropdown` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
|
|
51
|
+
## antd API
|
|
52
|
+
|
|
53
|
+
### Menu
|
|
54
|
+
|
|
55
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
56
|
+
|--------|--------|--------|--------|--------|
|
|
57
|
+
| defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | string[] | - | |
|
|
58
|
+
| defaultSelectedKeys | 初始选中的菜单项 key 数组 | string[] | - | |
|
|
59
|
+
| expandIcon | 自定义展开图标 | ReactNode \| | - | 4.9.0 |
|
|
60
|
+
| forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false | |
|
|
61
|
+
| inlineCollapsed | inline 时菜单是否收起状态 | boolean | - | |
|
|
62
|
+
| inlineIndent | inline 模式的菜单缩进宽度 | number | 24 | |
|
|
63
|
+
| items | 菜单内容 | | - | 4.20.0 |
|
|
64
|
+
| mode | 菜单类型,现在支持垂直、水平、和内嵌模式三种 | vertical | vertical | |
|
|
65
|
+
| multiple | 是否允许多选 | boolean | false | |
|
|
66
|
+
| openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string[] | - | |
|
|
67
|
+
| overflowedIndicator | 用于自定义 Menu 水平空间不足时的省略收缩的图标 | ReactNode | | |
|
|
68
|
+
| selectable | 是否允许选中 | boolean | true | |
|
|
69
|
+
| selectedKeys | 当前选中的菜单项 key 数组 | string[] | - | |
|
|
70
|
+
| style | 根节点样式 | CSSProperties | - | |
|
|
71
|
+
| subMenuCloseDelay | 用户鼠标离开子菜单后关闭延时,单位:秒 | number | 0.1 | |
|
|
72
|
+
| subMenuOpenDelay | 用户鼠标进入子菜单后开启延时,单位:秒 | number | 0 | |
|
|
73
|
+
| theme | 主题颜色 | light | light | |
|
|
74
|
+
| triggerSubMenuAction | SubMenu 展开/关闭的触发行为 | hover | hover | |
|
|
75
|
+
| onClick | 点击 MenuItem 调用此函数 | function({ item, key, keyPath, domEvent }) | - | |
|
|
76
|
+
| onDeselect | 取消选中时调用,仅在 multiple 生效 | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |
|
|
77
|
+
| onOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string[]) | - | |
|
|
78
|
+
| onSelect | 被选中时调用 | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |
|
|
79
|
+
|
|
80
|
+
|
|
81
|
+
更多属性查看 [rc-menu](https://github.com/react-component/menu#api)
|
|
82
|
+
|
|
83
|
+
### ItemType
|
|
84
|
+
|
|
85
|
+
type ItemType = [MenuItemType](#menuitemtype) | [SubMenuType](#submenutype) | [MenuItemGroupType](#menuitemgrouptype) | [MenuDividerType](#menudividertype);
|
|
86
|
+
|
|
87
|
+
#### MenuItemType
|
|
88
|
+
|
|
89
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
90
|
+
|--------|--------|--------|--------|--------|
|
|
91
|
+
| danger | 展示错误状态样式 | boolean | false | |
|
|
92
|
+
| disabled | 是否禁用 | boolean | false | |
|
|
93
|
+
| extra | 额外节点 | ReactNode | - | 5.21.0 |
|
|
94
|
+
| icon | 菜单图标 | ReactNode | - | |
|
|
95
|
+
| key | item 的唯一标志 | string | - | |
|
|
96
|
+
| label | 菜单项标题 | ReactNode | - | |
|
|
97
|
+
| title | 设置收缩时展示的悬浮标题 | string | - | |
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
#### SubMenuType
|
|
101
|
+
|
|
102
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
103
|
+
|--------|--------|--------|--------|--------|
|
|
104
|
+
| children | 子菜单的菜单项 | | - | |
|
|
105
|
+
| disabled | 是否禁用 | boolean | false | |
|
|
106
|
+
| icon | 菜单图标 | ReactNode | - | |
|
|
107
|
+
| key | 唯一标志 | string | - | |
|
|
108
|
+
| label | 菜单项标题 | ReactNode | - | |
|
|
109
|
+
| popupClassName | 子菜单样式, | string | - | |
|
|
110
|
+
| popupOffset | 子菜单偏移量, | [number, number] | - | |
|
|
111
|
+
| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | - | |
|
|
112
|
+
| theme | 设置子菜单的主题,默认从 Menu 上继承 | light | - | |
|
|
113
|
+
|
|
114
|
+
|
|
115
|
+
#### MenuItemGroupType
|
|
116
|
+
|
|
117
|
+
定义类型为 `group` 时,会作为分组处理:
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
```ts
|
|
121
|
+
const groupItem = {
|
|
122
|
+
type: 'group', // Must have
|
|
123
|
+
label: 'My Group',
|
|
124
|
+
children: [],
|
|
125
|
+
};
|
|
126
|
+
```
|
|
127
|
+
|
|
128
|
+
|
|
129
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
130
|
+
|--------|--------|--------|--------|--------|
|
|
131
|
+
| children | 分组的菜单项 | | - | |
|
|
132
|
+
| label | 分组标题 | ReactNode | - | |
|
|
133
|
+
|
|
134
|
+
|
|
135
|
+
#### MenuDividerType
|
|
136
|
+
|
|
137
|
+
菜单项分割线,只用在弹出菜单内,需要定义类型为 `divider`:
|
|
138
|
+
|
|
139
|
+
|
|
140
|
+
```ts
|
|
141
|
+
const dividerItem = {
|
|
142
|
+
type: 'divider', // Must have
|
|
143
|
+
};
|
|
144
|
+
```
|
|
145
|
+
|
|
146
|
+
|
|
147
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
148
|
+
|--------|--------|--------|--------|--------|
|
|
149
|
+
| dashed | 是否虚线 | boolean | false | |
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
<DemoTitle title="Empty" desc="用于空状态的占位图形展示。">
|
|
4
|
+
## API
|
|
5
|
+
|
|
6
|
+
| 属性名 | 描述 | 类型 | 默认值 |
|
|
7
|
+
|--------|--------|--------|--------|
|
|
8
|
+
| type | 空状态类型 | \| 'noData'
|
|
9
|
+
\| 'networkError'
|
|
10
|
+
\| '404'
|
|
11
|
+
\| 'arrears'
|
|
12
|
+
\| 'desktopOnly'
|
|
13
|
+
\| 'noAudio'
|
|
14
|
+
\| 'noImage'
|
|
15
|
+
\| 'noVideo'
|
|
16
|
+
\| 'noAccess'
|
|
17
|
+
\| 'error'
|
|
18
|
+
\| 'noModel'
|
|
19
|
+
\| 'noApp'
|
|
20
|
+
\| 'success'
|
|
21
|
+
\| 'failed'
|
|
22
|
+
\| 'inProgress'
|
|
23
|
+
\| 'stayTuned' | 'noData' |
|
|
24
|
+
| texture | 是否显示纹理 | boolean | true |
|
|
25
|
+
| image | 图片地址 | string | 默认是no data的图片 |
|
|
26
|
+
| imageStyle | 图片样式 | React.CSSProperties | |
|
|
27
|
+
| title | 标题内容 | React.ReactNode | |
|
|
28
|
+
| description | 自定义描述内容 | React.ReactNode | |
|
|
29
|
+
| onOk | ok按钮的点击事件 | (e: React.MouseEvent) => void | |
|
|
30
|
+
| okText | ok按钮的文本 | React.ReactNode | |
|
|
31
|
+
| okType | ok按钮的类型 | SparkButtonProps['type'] | 'primary' |
|
|
32
|
+
| okButtonProps | ok按钮的props | SparkButtonProps | |
|
|
33
|
+
| children | 自定义空状态的内容 | React.ReactNode | |
|
|
34
|
+
| className | 自定义空状态的类名 | string | |
|
|
35
|
+
| style | 自定义空状态的样式 | React.CSSProperties | |
|
|
36
|
+
| size | 自定义空状态的大小 | React.CSSProperties['width'] | |
|
|
37
|
+
|
|
38
|
+
|
|
39
|
+
<AntdApiRef url="https://ant.design/components/empty-cn/#api"></AntdApiRef>
|
|
40
|
+
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
<DemoTitle title="FloatButton" desc="用于网站上的全局功能;无论浏览到何处都可以看见的按钮。">
|
|
4
|
+
#### API
|
|
5
|
+
|
|
6
|
+
<AntdApiRef url="https://ant.design/components/float-button-cn/#api"></AntdApiRef>
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
## antd API
|
|
10
|
+
|
|
11
|
+
通用属性参考:[通用属性](/docs/react/common-props)
|
|
12
|
+
|
|
13
|
+
自 `antd@5.0.0` 版本开始提供该组件。
|
|
14
|
+
|
|
15
|
+
### 共同的 API
|
|
16
|
+
|
|
17
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
18
|
+
|--------|--------|--------|--------|--------|
|
|
19
|
+
| icon | 自定义图标 | ReactNode | - | |
|
|
20
|
+
| description | 文字及其它内容 | ReactNode | - | |
|
|
21
|
+
| tooltip | 气泡卡片的内容 | ReactNode \| | - | TooltipProps: 5.25.0 |
|
|
22
|
+
| type | 设置按钮类型 | default | default | |
|
|
23
|
+
| shape | 设置按钮形状 | circle | circle | |
|
|
24
|
+
| onClick | 点击按钮时的回调 | (event) => void | - | |
|
|
25
|
+
| href | 点击跳转的地址,指定此属性 button 的行为和 a 链接一致 | string | - | |
|
|
26
|
+
| target | 相当于 a 标签的 target 属性,href 存在时生效 | string | - | |
|
|
27
|
+
| htmlType | 设置 | submit | button | 5.21.0 |
|
|
28
|
+
| badge | 带徽标数字的悬浮按钮(不支持 | | - | 5.4.0 |
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
### FloatButton.Group
|
|
32
|
+
|
|
33
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
34
|
+
|--------|--------|--------|--------|--------|
|
|
35
|
+
| shape | 设置包含的 FloatButton 按钮形状 | circle | circle | |
|
|
36
|
+
| trigger | 触发方式(有触发方式为菜单模式) | click | - | |
|
|
37
|
+
| open | 受控展开,需配合 trigger 一起使用 | boolean | - | |
|
|
38
|
+
| closeIcon | 自定义关闭按钮 | React.ReactNode | | |
|
|
39
|
+
| placement | 自定义菜单弹出位置 | top | top | 5.21.0 |
|
|
40
|
+
| onOpenChange | 展开收起时的回调,需配合 trigger 一起使用 | (open: boolean) => void | - | |
|
|
41
|
+
| onClick | 点击按钮时的回调(仅在菜单模式中有效) | (event) => void | - | 5.3.0 |
|
|
42
|
+
|
|
43
|
+
|
|
44
|
+
### FloatButton.BackTop
|
|
45
|
+
|
|
46
|
+
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
|
47
|
+
|--------|--------|--------|--------|--------|
|
|
48
|
+
| duration | 回到顶部所需时间(ms) | number | 450 | |
|
|
49
|
+
| target | 设置需要监听其滚动事件的元素 | () => HTMLElement | () => window | |
|
|
50
|
+
| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |
|
|
51
|
+
| onClick | 点击按钮的回调函数 | () => void | - | |
|