@agentscope-ai/design 1.0.19 → 1.0.20

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 (60) hide show
  1. package/lib/components/commonComponents/CodeBlock/index.js +21 -12
  2. package/llms/all.llms.txt +4976 -0
  3. package/llms/components/commonComponents/Alert/index.zh-CN.llms.txt +32 -0
  4. package/llms/components/commonComponents/AlertDialog/index.zh-CN.llms.txt +171 -0
  5. package/llms/components/commonComponents/Anchor/index.zh-CN.llms.txt +51 -0
  6. package/llms/components/commonComponents/Audio/index.zh-CN.llms.txt +7 -0
  7. package/llms/components/commonComponents/Avatar/index.zh-CN.llms.txt +37 -0
  8. package/llms/components/commonComponents/Breadcrumb/index.zh-CN.llms.txt +117 -0
  9. package/llms/components/commonComponents/Button/index.zh-CN.llms.txt +54 -0
  10. package/llms/components/commonComponents/Card/index.zh-CN.llms.txt +61 -0
  11. package/llms/components/commonComponents/Checkbox/index.zh-CN.llms.txt +69 -0
  12. package/llms/components/commonComponents/CodeBlock/index.zh-CN.llms.txt +13 -0
  13. package/llms/components/commonComponents/Collapse/index.zh-CN.llms.txt +56 -0
  14. package/llms/components/commonComponents/CollapsePanel/index.zh-CN.llms.txt +69 -0
  15. package/llms/components/commonComponents/DatePicker/index.zh-CN.llms.txt +221 -0
  16. package/llms/components/commonComponents/Descriptions/index.zh-CN.llms.txt +37 -0
  17. package/llms/components/commonComponents/Drawer/index.zh-CN.llms.txt +62 -0
  18. package/llms/components/commonComponents/Dropdown/index.zh-CN.llms.txt +149 -0
  19. package/llms/components/commonComponents/Empty/index.zh-CN.llms.txt +41 -0
  20. package/llms/components/commonComponents/FloatButton/index.zh-CN.llms.txt +51 -0
  21. package/llms/components/commonComponents/Form/index.zh-CN.llms.txt +558 -0
  22. package/llms/components/commonComponents/IconButton/index.zh-CN.llms.txt +45 -0
  23. package/llms/components/commonComponents/Image/index.zh-CN.llms.txt +165 -0
  24. package/llms/components/commonComponents/Input/index.zh-CN.llms.txt +133 -0
  25. package/llms/components/commonComponents/InputNumber/index.zh-CN.llms.txt +51 -0
  26. package/llms/components/commonComponents/Message/index.zh-CN.llms.txt +98 -0
  27. package/llms/components/commonComponents/Modal/index.zh-CN.llms.txt +168 -0
  28. package/llms/components/commonComponents/Notification/index.zh-CN.llms.txt +94 -0
  29. package/llms/components/commonComponents/Pagination/index.zh-CN.llms.txt +45 -0
  30. package/llms/components/commonComponents/Popconfirm/index.zh-CN.llms.txt +55 -0
  31. package/llms/components/commonComponents/Popover/index.zh-CN.llms.txt +43 -0
  32. package/llms/components/commonComponents/Progress/index.zh-CN.llms.txt +50 -0
  33. package/llms/components/commonComponents/PromptsEditor/index.zh-CN.llms.txt +15 -0
  34. package/llms/components/commonComponents/Radio/index.zh-CN.llms.txt +66 -0
  35. package/llms/components/commonComponents/RadioButton/index.zh-CN.llms.txt +73 -0
  36. package/llms/components/commonComponents/Result/index.zh-CN.llms.txt +10 -0
  37. package/llms/components/commonComponents/Select/index.zh-CN.llms.txt +96 -0
  38. package/llms/components/commonComponents/Skeleton/index.zh-CN.llms.txt +59 -0
  39. package/llms/components/commonComponents/Slider/index.zh-CN.llms.txt +62 -0
  40. package/llms/components/commonComponents/Spinner/index.zh-CN.llms.txt +15 -0
  41. package/llms/components/commonComponents/Statistic/index.zh-CN.llms.txt +58 -0
  42. package/llms/components/commonComponents/Steps/index.zh-CN.llms.txt +57 -0
  43. package/llms/components/commonComponents/Switch/index.zh-CN.llms.txt +39 -0
  44. package/llms/components/commonComponents/Table/index.zh-CN.llms.txt +254 -0
  45. package/llms/components/commonComponents/Tabs/index.zh-CN.llms.txt +68 -0
  46. package/llms/components/commonComponents/Tag/index.zh-CN.llms.txt +33 -0
  47. package/llms/components/commonComponents/TimePicker/index.zh-CN.llms.txt +111 -0
  48. package/llms/components/commonComponents/Tooltip/index.zh-CN.llms.txt +45 -0
  49. package/llms/components/commonComponents/Upload/index.zh-CN.llms.txt +95 -0
  50. package/llms/components/commonComponents/Video/index.zh-CN.llms.txt +11 -0
  51. package/llms/docs/guide/fromAntd.zh-CN.llms.txt +156 -0
  52. package/llms/docs/guide/fromScratch.zh-CN.llms.txt +83 -0
  53. package/llms/docs/guide/iconfont.zh-CN.llms.txt +69 -0
  54. package/llms/docs/guide/overview.zh-CN.llms.txt +51 -0
  55. package/llms/docs/guide/sparkIcons.zh-CN.llms.txt +25 -0
  56. package/llms/docs/guide/theme.zh-CN.llms.txt +61 -0
  57. package/llms/docs/guide/tokens&variables.zh-CN.llms.txt +433 -0
  58. package/llms/docs/guide/vibe-coding.zh-CN.llms.txt +29 -0
  59. package/llms/index.llms.txt +58 -0
  60. package/package.json +4 -2
@@ -0,0 +1,62 @@
1
+
2
+
3
+ <DemoTitle title="Slider" desc="滑动型输入器,展示当前值和可选范围。">
4
+ #### API
5
+
6
+ <AntdApiRef url="https://ant.design/components/slider-cn/#api"></AntdApiRef>
7
+
8
+
9
+ ## antd API
10
+
11
+ 通用属性参考:[通用属性](/docs/react/common-props)
12
+
13
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
14
+ |--------|--------|--------|--------|--------|
15
+ | autoFocus | 自动获取焦点 | boolean | false | |
16
+ | classNames | 语义化结构 className | | - | 5.10.0 |
17
+ | defaultValue | 设置初始取值。当 | number \| [number, number] | 0 \| [0, 0] | |
18
+ | disabled | 值为 true 时,滑块为禁用状态 | boolean | false | |
19
+ | keyboard | 支持使用键盘操作 handler | boolean | true | 5.2.0+ |
20
+ | dots | 是否只能拖拽到刻度上 | boolean | false | |
21
+ | included | marks | boolean | true | |
22
+ | marks | 刻度标记,key 的类型必须为 | object | { number: ReactNode } or { number: { style: CSSProperties, label: ReactNode } } | |
23
+ | max | 最大值 | number | 100 | |
24
+ | min | 最小值 | number | 0 | |
25
+ | range | 双滑块模式 | boolean \| | false | |
26
+ | reverse | 反向坐标轴 | boolean | false | |
27
+ | step | 步长,取值必须大于 0,并且可被 (max - min) 整除。当 | number \| null | 1 | |
28
+ | styles | 语义化结构 styles | | - | 5.10.0 |
29
+ | tooltip | 设置 Tooltip 相关属性 | | - | 4.23.0 |
30
+ | value | 设置当前取值。当 | number \| [number, number] | - | |
31
+ | vertical | 值为 true 时,Slider 为垂直方向 | boolean | false | |
32
+ | onChangeComplete | 与 | (value) => void | - | |
33
+ | onChange | 当 Slider 的值发生改变时,会触发 onChange 事件,并把改变后的值作为参数传入 | (value) => void | - | |
34
+
35
+
36
+ ### range
37
+
38
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
39
+ |--------|--------|--------|--------|--------|
40
+ | draggableTrack | 范围刻度是否可被拖拽 | boolean | false | |
41
+ | editable | 启动动态增减节点,不能和 | boolean | false | 5.20.0 |
42
+ | minCount | 配置 | number | 0 | 5.20.0 |
43
+ | maxCount | 配置 | number | - | 5.20.0 |
44
+
45
+
46
+ ### tooltip
47
+
48
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
49
+ |--------|--------|--------|--------|--------|
50
+ | autoAdjustOverflow | 是否自动调整弹出位置 | boolean | true | 5.8.0 |
51
+ | open | 值为 true 时,Tooltip 将会始终显示;否则始终不显示,哪怕在拖拽及移入时 | boolean | - | 4.23.0 |
52
+ | placement | 设置 Tooltip 展示位置。参考 | string | - | 4.23.0 |
53
+ | getPopupContainer | Tooltip 渲染父节点,默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
54
+ | formatter | Slider 会把当前值传给 | value => ReactNode \| null | IDENTITY | 4.23.0 |
55
+
56
+
57
+ ## 方法
58
+
59
+ | 名称 | 描述 | 版本 |
60
+ |--------|--------|--------|
61
+ | blur() | 移除焦点 | |
62
+ | focus() | 获取焦点 | |
@@ -0,0 +1,15 @@
1
+
2
+
3
+ <DemoTitle title="Spinner" desc="指示页面或区块的加载中状态">
4
+ #### API
5
+
6
+ | 属性名 | 描述 | 类型 | 默认值 |
7
+ |--------|--------|--------|--------|
8
+ | tip | indicator下方的tip | React.ReactNode | - |
9
+ | indicator | 自定义indicator,用于展示progress的百分比和加载文案 | React.ReactNode | - |
10
+ | children | 被spinner包裹的子元素 | React.ReactNode | - |
11
+ | style | spinner最外层的样式 | React.CSSProperties | - |
12
+ | className | spinner的类名 | string | - |
13
+ | percent | 进度条的百分比 | number | - |
14
+ | spinning | 是否为加载中状态 | boolean | false |
15
+ | showProgress | 是否显示进度条,如果为true,不需要手动在children中添加Progress组件 | boolean | false |
@@ -0,0 +1,58 @@
1
+
2
+
3
+ <DemoTitle title="Statistic" desc="展示统计数值">
4
+ #### API
5
+
6
+ <AntdApiRef url="https://ant.design/components/statistic-cn/#api"></AntdApiRef>
7
+
8
+
9
+ ## antd API
10
+
11
+ 通用属性参考:[通用属性](/docs/react/common-props)
12
+
13
+ #### Statistic
14
+
15
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
16
+ |--------|--------|--------|--------|--------|
17
+ | decimalSeparator | 设置小数点 | string | . | |
18
+ | formatter | 自定义数值展示 | (value) => ReactNode | - | |
19
+ | groupSeparator | 设置千分位标识符 | string | , | |
20
+ | loading | 数值是否加载中 | boolean | false | 4.8.0 |
21
+ | precision | 数值精度 | number | - | |
22
+ | prefix | 设置数值的前缀 | ReactNode | - | |
23
+ | suffix | 设置数值的后缀 | ReactNode | - | |
24
+ | title | 数值的标题 | ReactNode | - | |
25
+ | value | 数值内容 | string \| number | - | |
26
+ | valueStyle | 设置数值区域的样式 | CSSProperties | - | |
27
+
28
+
29
+ #### Statistic.Countdown <Badge type="error">Deprecated</Badge>
30
+
31
+ <!-- <Antd component="Alert" message="版本 >= 5.25.0 时请使用 Statistic.Timer 作为替代方案。" type="warning" banner="true"></Antd> -->
32
+
33
+ <!-- prettier-ignore -->
34
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
35
+ |--------|--------|--------|--------|--------|
36
+ | format | 格式化倒计时展示,参考 | string | HH:mm:ss | |
37
+ | prefix | 设置数值的前缀 | ReactNode | - | |
38
+ | suffix | 设置数值的后缀 | ReactNode | - | |
39
+ | title | 数值的标题 | ReactNode | - | |
40
+ | value | 数值内容 | number | - | |
41
+ | valueStyle | 设置数值区域的样式 | CSSProperties | - | |
42
+ | onFinish | 倒计时完成时触发 | () => void | - | |
43
+ | onChange | 倒计时时间变化时触发 | (value: number) => void | - | |
44
+
45
+
46
+ #### Statistic.Timer <Badge>5.25.0+</Badge>
47
+
48
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
49
+ |--------|--------|--------|--------|--------|
50
+ | type | 计时类型,正计时或者倒计时 | countdown | - | |
51
+ | format | 格式化倒计时展示,参考 | string | HH:mm:ss | |
52
+ | prefix | 设置数值的前缀 | ReactNode | - | |
53
+ | suffix | 设置数值的后缀 | ReactNode | - | |
54
+ | title | 数值的标题 | ReactNode | - | |
55
+ | value | 数值内容 | number | - | |
56
+ | valueStyle | 设置数值区域的样式 | CSSProperties | - | |
57
+ | onFinish | 倒计时完成时触发, 指定为 | () => void | - | |
58
+ | onChange | 倒计时时间变化时触发 | (value: number) => void | - | |
@@ -0,0 +1,57 @@
1
+
2
+
3
+ <DemoTitle title="Steps" desc="引导用户按照流程完成任务的导航条。">
4
+ #### API
5
+
6
+ <AntdApiRef url="https://ant.design/components/steps-cn/#api"></AntdApiRef>
7
+
8
+
9
+ ## antd API
10
+
11
+ 通用属性参考:[通用属性](/docs/react/common-props)
12
+
13
+ ### Steps
14
+
15
+ 整体步骤条。
16
+
17
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
18
+ |--------|--------|--------|--------|--------|
19
+ | className | 步骤条类名 | string | - | |
20
+ | current | 指定当前步骤,从 0 开始记数。在子 Step 元素中,可以通过 | number | 0 | |
21
+ | direction | 指定步骤条方向。目前支持水平( | string | horizontal | |
22
+ | initial | 起始序号,从 0 开始记数 | number | 0 | |
23
+ | labelPlacement | 指定标签放置位置,默认水平放图标右侧,可选 | string | horizontal | |
24
+ | percent | 当前 | number | - | 4.5.0 |
25
+ | progressDot | 点状步骤条,可以设置为一个 function,labelPlacement 将强制为 | boolean \| (iconDot, {index, status, title, description}) => ReactNode | false | |
26
+ | responsive | 当屏幕宽度小于 | boolean | true | |
27
+ | size | 指定大小,目前支持普通( | string | default | |
28
+ | status | 指定当前步骤的状态,可选 | string | process | |
29
+ | type | 步骤条类型,可选 | string | default | inline: 5.0 |
30
+ | onChange | 点击切换步骤时触发 | (current) => void | - | |
31
+ | items | 配置选项卡内容 | | [] | 4.24.0 |
32
+
33
+
34
+ ### `type="inline"`
35
+
36
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
37
+ |--------|--------|--------|--------|--------|
38
+ | className | 步骤条类名 | string | - | |
39
+ | current | 指定当前步骤,从 0 开始记数。在子 Step 元素中,可以通过 | number | 0 | |
40
+ | initial | 起始序号,从 0 开始记数 | number | 0 | |
41
+ | status | 指定当前步骤的状态,可选 | string | process | |
42
+ | onChange | 点击切换步骤时触发 | (current) => void | - | |
43
+ | items | 配置选项卡内容,不支持 | | [] | 4.24.0 |
44
+
45
+
46
+ ### StepItem
47
+
48
+ 步骤条内的每一个步骤。
49
+
50
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
51
+ |--------|--------|--------|--------|--------|
52
+ | description | 步骤的详情描述,可选 | ReactNode | - | |
53
+ | disabled | 禁用点击 | boolean | false | |
54
+ | icon | 步骤图标的类型,可选 | ReactNode | - | |
55
+ | status | 指定状态。当不配置该属性时,会使用 Steps 的 | string | wait | |
56
+ | subTitle | 子标题 | ReactNode | - | |
57
+ | title | 标题 | ReactNode | - | |
@@ -0,0 +1,39 @@
1
+
2
+
3
+ <DemoTitle title="Switch" desc="使用开关切换两种状态之间。">
4
+ #### API
5
+
6
+ | 属性名 | 描述 | 类型 | 默认值 |
7
+ |--------|--------|--------|--------|
8
+ | label | Switch后的内容 | ReactNode | |
9
+
10
+ <AntdApiRef url="https://ant.design/components/switch-cn/#api"></AntdApiRef>
11
+
12
+
13
+ ## antd API
14
+
15
+ 通用属性参考:[通用属性](/docs/react/common-props)
16
+
17
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
18
+ |--------|--------|--------|--------|--------|
19
+ | autoFocus | 组件自动获取焦点 | boolean | false | |
20
+ | checked | 指定当前是否选中 | boolean | false | |
21
+ | checkedChildren | 选中时的内容 | ReactNode | - | |
22
+ | className | Switch 器类名 | string | - | |
23
+ | defaultChecked | 初始是否选中 | boolean | false | |
24
+ | defaultValue | defaultChecked | boolean | - | 5.12.0 |
25
+ | disabled | 是否禁用 | boolean | false | |
26
+ | loading | 加载中的开关 | boolean | false | |
27
+ | size | 开关大小,可选值: | string | default | |
28
+ | unCheckedChildren | 非选中时的内容 | ReactNode | - | |
29
+ | value | checked | boolean | - | 5.12.0 |
30
+ | onChange | 变化时的回调函数 | function(checked: boolean, event: Event) | - | |
31
+ | onClick | 点击时的回调函数 | function(checked: boolean, event: Event) | - | |
32
+
33
+
34
+ ## 方法
35
+
36
+ | 名称 | 描述 |
37
+ |--------|--------|
38
+ | blur() | 移除焦点 |
39
+ | focus() | 获取焦点 |
@@ -0,0 +1,254 @@
1
+
2
+
3
+ <DemoTitle title="Table" desc="展示行列数据。">
4
+ #### API
5
+
6
+ <AntdApiRef url="https://ant.design/components/table-cn/#api"></AntdApiRef>
7
+
8
+
9
+ ## antd API
10
+
11
+ 通用属性参考:[通用属性](/docs/react/common-props)
12
+
13
+ ### Table
14
+
15
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
16
+ |--------|--------|--------|--------|--------|
17
+ | bordered | 是否展示外边框和列边框 | boolean | false | |
18
+ | columns | 表格列的配置描述,具体项见下表 | | - | |
19
+ | components | 覆盖默认的 table 元素 | | - | |
20
+ | dataSource | 数据数组 | object[] | - | |
21
+ | expandable | 配置展开属性 | | - | |
22
+ | footer | 表格尾部 | function(currentPageData) | - | |
23
+ | getPopupContainer | 设置表格内各类浮层的渲染节点,如筛选菜单 | (triggerNode) => HTMLElement | () => TableHtmlElement | |
24
+ | loading | 页面是否加载中 | boolean \| | false | |
25
+ | locale | 默认文案设置,目前包括排序、过滤、空数据文案 | object | | |
26
+ | pagination | 分页器,参考 | object \| | - | |
27
+ | rowClassName | 表格行的类名 | function(record, index): string | - | |
28
+ | rowKey | 表格行 key 的取值,可以是字符串或一个函数 | string \| function(record): string | key | |
29
+ | rowSelection | 表格行是否可选择, | object | - | |
30
+ | rowHoverable | 表格行是否开启 hover 交互 | boolean | true | 5.16.0 |
31
+ | scroll | 表格是否可滚动,也可以指定滚动区域的宽、高, | object | - | |
32
+ | showHeader | 是否显示表头 | boolean | true | |
33
+ | showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示。当参数类型为对象时,将被设置为 Tooltip 的属性 | boolean \| | { target: 'full-header' } | 5.16.0 |
34
+ | size | 表格大小 | large | large | |
35
+ | sortDirections | 支持的排序方式,取值为 | Array | [ | |
36
+ | sticky | 设置粘性头部和滚动条 | boolean \| | - | 4.6.0 (getContainer: 4.7.0) |
37
+ | summary | 总结栏 | (currentData) => ReactNode | - | |
38
+ | tableLayout | 表格元素的 | - \| | 无 | |
39
+ | title | 表格标题 | function(currentPageData) | - | |
40
+ | virtual | 支持虚拟列表 | boolean | - | 5.9.0 |
41
+ | onChange | 分页、排序、筛选变化时触发 | function(pagination, filters, sorter, extra: { currentDataSource: [], action: | - | |
42
+ | onHeaderRow | 设置头部行属性 | function(columns, index) | - | |
43
+ | onRow | 设置行属性 | function(record, index) | - | |
44
+ | onScroll | 表单内容滚动时触发(虚拟滚动下只有垂直滚动会触发事件) | function(event) | - | 5.16.0 |
45
+
46
+
47
+ ### Table ref
48
+
49
+ | 参数 | 说明 | 类型 | 版本 |
50
+ |--------|--------|--------|--------|
51
+ | nativeElement | 最外层 div 元素 | HTMLDivElement | 5.11.0 |
52
+ | scrollTo | 滚动到目标位置(设置 | (config: { index?: number, key?: React.Key, top?: number }) => void | 5.11.0 |
53
+
54
+
55
+ #### onRow 用法
56
+
57
+ 适用于 `onRow` `onHeaderRow` `onCell` `onHeaderCell`。
58
+
59
+
60
+ ```jsx
61
+ <Table
62
+ onRow={(record) => {
63
+ return {
64
+ onClick: (event) => {}, // 点击行
65
+ onDoubleClick: (event) => {},
66
+ onContextMenu: (event) => {},
67
+ onMouseEnter: (event) => {}, // 鼠标移入行
68
+ onMouseLeave: (event) => {},
69
+ };
70
+ }}
71
+ onHeaderRow={(columns, index) => {
72
+ return {
73
+ onClick: () => {}, // 点击表头行
74
+ };
75
+ }}
76
+ />
77
+ ```
78
+
79
+
80
+ ### Column
81
+
82
+ 列描述数据对象,是 columns 中的一项,Column 使用相同的 API。
83
+
84
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
85
+ |--------|--------|--------|--------|--------|
86
+ | align | 设置列的对齐方式 | left | left | |
87
+ | className | 列样式类名 | string | - | |
88
+ | colSpan | 表头列合并,设置为 0 时,不渲染 | number | - | |
89
+ | dataIndex | 列数据在数据项中对应的路径,支持通过数组查询嵌套路径 | string \| string[] | - | |
90
+ | defaultFilteredValue | 默认筛选值 | string[] | - | |
91
+ | filterResetToDefaultFilteredValue | 点击重置按钮的时候,是否恢复默认筛选值 | boolean | false | |
92
+ | defaultSortOrder | 默认排序顺序 | ascend | - | |
93
+ | ellipsis | 超过宽度将自动省略,暂不支持和排序筛选一起使用。 | boolean \| { showTitle?: boolean } | false | showTitle: 4.3.0 |
94
+ | filterDropdown | 可以自定义筛选菜单,此函数只负责渲染图层,需要自行编写各种交互 | ReactNode \| (props: | - | |
95
+ | filtered | 标识数据是否经过过滤,筛选图标会高亮 | boolean | false | |
96
+ | filteredValue | 筛选的受控属性,外界可用此控制列的筛选状态,值为已筛选的 value 数组 | string[] | - | |
97
+ | filterIcon | 自定义 filter 图标。 | ReactNode \| (filtered: boolean) => ReactNode | false | |
98
+ | filterOnClose | 是否在筛选菜单关闭时触发筛选 | boolean | true | 5.15.0 |
99
+ | filterMultiple | 是否多选 | boolean | true | |
100
+ | filterMode | 指定筛选菜单的用户界面 | 'menu' \| 'tree' | 'menu' | 4.17.0 |
101
+ | filterSearch | 筛选菜单项是否可搜索 | boolean \| function(input, record):boolean | false | boolean:4.17.0 function:4.19.0 |
102
+ | filters | 表头的筛选菜单项 | object[] | - | |
103
+ | filterDropdownProps | 自定义下拉属性,在 | | - | 5.22.0 |
104
+ | fixed | (IE 下无效)列是否固定,可选 | boolean \| string | false | |
105
+ | key | React 需要的 key,如果已经设置了唯一的 | string | - | |
106
+ | render | 生成复杂数据的渲染函数,参数分别为当前单元格的值,当前行数据,行索引 | function(value, record, index) {} | - | |
107
+ | responsive | 响应式 breakpoint 配置列表。未设置则始终可见。 | | - | 4.2.0 |
108
+ | rowScope | 设置列范围 | row | - | 5.1.0 |
109
+ | shouldCellUpdate | 自定义单元格渲染时机 | (record, prevRecord) => boolean | - | 4.3.0 |
110
+ | showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中 | boolean \| | { target: 'full-header' } | 5.16.0 |
111
+ | sortDirections | 支持的排序方式,覆盖 | Array | [ | |
112
+ | sorter | 排序函数,本地排序使用一个函数(参考 | function \| boolean \| { compare: function, multiple: number } | - | |
113
+ | sortOrder | 排序的受控属性,外界可用此控制列的排序,可设置为 | ascend | - | |
114
+ | sortIcon | 自定义 sort 图标 | (props: { sortOrder }) => ReactNode | - | 5.6.0 |
115
+ | title | 列头显示文字(函数用法 | ReactNode \| ({ sortOrder, sortColumn, filters }) => ReactNode | - | |
116
+ | width | 列宽度( | string \| number | - | |
117
+ | minWidth | 最小列宽度,只在 | number | - | 5.21.0 |
118
+ | hidden | 隐藏列 | boolean | false | 5.13.0 |
119
+ | onCell | 设置单元格属性 | function(record, rowIndex) | - | |
120
+ | onFilter | 本地模式下,确定筛选的运行函数 | function | - | |
121
+ | onHeaderCell | 设置头部单元格属性 | function(column) | - | |
122
+
123
+
124
+ ### ColumnGroup
125
+
126
+ | 参数 | 说明 | 类型 | 默认值 |
127
+ |--------|--------|--------|--------|
128
+ | title | 列头显示文字 | ReactNode | - |
129
+
130
+
131
+ ### pagination
132
+
133
+ 分页的配置项。
134
+
135
+ | 参数 | 说明 | 类型 | 默认值 |
136
+ |--------|--------|--------|--------|
137
+ | position | 指定分页显示的位置, 取值为 | Array | [ |
138
+
139
+
140
+ 更多配置项,请查看 [`Pagination`](/components/pagination-cn)。
141
+
142
+ ### expandable
143
+
144
+ 展开功能的配置。
145
+
146
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
147
+ |--------|--------|--------|--------|--------|
148
+ | childrenColumnName | 指定树形结构的列名 | string | children | |
149
+ | columnTitle | 自定义展开列表头 | ReactNode | - | 4.23.0 |
150
+ | columnWidth | 自定义展开列宽度 | string \| number | - | |
151
+ | defaultExpandAllRows | 初始时,是否展开所有行 | boolean | false | |
152
+ | defaultExpandedRowKeys | 默认展开的行 | string[] | - | |
153
+ | expandedRowClassName | 展开行的 className | string \| (record, index, indent) => string | - | string: 5.22.0 |
154
+ | expandedRowKeys | 展开的行,控制属性 | string[] | - | |
155
+ | expandedRowRender | 额外的展开行 | function(record, index, indent, expanded): ReactNode | - | |
156
+ | expandIcon | 自定义展开图标,参考 | function(props): ReactNode | - | |
157
+ | expandRowByClick | 通过点击行来展开子行 | boolean | false | |
158
+ | fixed | 控制展开图标是否固定,可选 | boolean \| string | false | 4.16.0 |
159
+ | indentSize | 展示树形数据时,每层缩进的宽度,以 px 为单位 | number | 15 | |
160
+ | rowExpandable | 设置是否允许行展开( | (record) => boolean | - | |
161
+ | showExpandColumn | 是否显示展开图标列 | boolean | true | 4.18.0 |
162
+ | onExpand | 点击展开图标时触发 | function(expanded, record) | - | |
163
+ | onExpandedRowsChange | 展开的行变化时触发 | function(expandedRows) | - | |
164
+
165
+
166
+ ### rowSelection
167
+
168
+ 选择功能的配置。
169
+
170
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
171
+ |--------|--------|--------|--------|--------|
172
+ | align | 设置选择列的对齐方式 | left | left | 5.25.0 |
173
+ | checkStrictly | checkable 状态下节点选择完全受控(父子数据选中状态不再关联) | boolean | true | 4.4.0 |
174
+ | columnTitle | 自定义列表选择框标题 | ReactNode \| (originalNode: ReactNode) => ReactNode | - | |
175
+ | columnWidth | 自定义列表选择框宽度 | string \| number | 32px | |
176
+ | fixed | 把选择框列固定在左边 | boolean | - | |
177
+ | getCheckboxProps | 选择框的默认属性配置 | function(record) | - | |
178
+ | hideSelectAll | 隐藏全选勾选框与自定义选择项 | boolean | false | 4.3.0 |
179
+ | preserveSelectedRowKeys | 当数据被删除时仍然保留选项的 | boolean | - | 4.4.0 |
180
+ | renderCell | 渲染勾选框,用法与 Column 的 | function(checked, record, index, originNode) {} | - | 4.1.0 |
181
+ | selectedRowKeys | 指定选中项的 key 数组,需要和 onChange 进行配合 | string[] \| number[] | [] | |
182
+ | defaultSelectedRowKeys | 默认选中项的 key 数组 | string[] \| number[] | [] | |
183
+ | selections | 自定义选择项 | object[] \| boolean | true | |
184
+ | type | 多选/单选 | checkbox | checkbox | |
185
+ | onCell | 设置单元格属性,用法与 Column 的 | function(record, rowIndex) | - | 5.5.0 |
186
+ | onChange | 选中项发生变化时的回调 | function(selectedRowKeys, selectedRows, info: { type }) | - | info.type |
187
+ | onSelect | 用户手动选择/取消选择某行的回调 | function(record, selected, selectedRows, nativeEvent) | - | |
188
+ | onSelectAll | 用户手动选择/取消选择所有行的回调 | function(selected, selectedRows, changeRows) | - | |
189
+ | onSelectInvert | 用户手动选择反选的回调 | function(selectedRowKeys) | - | |
190
+ | onSelectNone | 用户清空选择的回调 | function() | - | |
191
+ | onSelectMultiple | 用户使用键盘 shift 选择多行的回调 | function(selected, selectedRows, changeRows) | - | |
192
+
193
+
194
+ ### scroll
195
+
196
+ | 参数 | 说明 | 类型 | 默认值 |
197
+ |--------|--------|--------|--------|
198
+ | scrollToFirstRowOnChange | 当分页、排序、筛选变化后是否滚动到表格顶部 | boolean | - |
199
+ | x | 设置横向滚动,也可用于指定滚动区域的宽,可以设置为像素值,百分比, | string \| number \| true | - |
200
+ | y | 设置纵向滚动,也可用于指定滚动区域的高,可以设置为像素值 | string \| number | - |
201
+
202
+
203
+ ### selection
204
+
205
+ | 参数 | 说明 | 类型 | 默认值 |
206
+ |--------|--------|--------|--------|
207
+ | key | React 需要的 key,建议设置 | string | - |
208
+ | text | 选择项显示的文字 | ReactNode | - |
209
+ | onSelect | 选择项点击回调 | function(changeableRowKeys) | - |
210
+
211
+
212
+ ## 在 TypeScript 中使用
213
+
214
+
215
+ ```tsx
216
+ import React from 'react';
217
+ import { Table } from 'antd';
218
+ import type { TableColumnsType } from 'antd';
219
+
220
+ interface User {
221
+ key: number;
222
+ name: string;
223
+ }
224
+
225
+ const columns: TableColumnsType<User> = [
226
+ {
227
+ key: 'name',
228
+ title: 'Name',
229
+ dataIndex: 'name',
230
+ },
231
+ ];
232
+
233
+ const data: User[] = [
234
+ {
235
+ key: 0,
236
+ name: 'Jack',
237
+ },
238
+ ];
239
+
240
+ const Demo: React.FC = () => (
241
+ <>
242
+ <Table<User> columns={columns} dataSource={data} />
243
+ {/* 使用 JSX 风格的 API */}
244
+ <Table<User> dataSource={data}>
245
+ <Table.Column<User> key="name" title="Name" dataIndex="name" />
246
+ </Table>
247
+ </>
248
+ );
249
+
250
+ export default Demo;
251
+ ```
252
+
253
+
254
+ TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/serene-platform-0jo5t)。
@@ -0,0 +1,68 @@
1
+
2
+
3
+ <DemoTitle title="Tabs" desc="用户可以通过点击不同的标签在同一页面中查看不同的内容区域。">
4
+ #### API
5
+
6
+ | 属性名 | 描述 | 类型 | 默认值 |
7
+ |--------|--------|--------|--------|
8
+ | type | 类型 | 'line' \| 'card' \| 'editable-card' \| 'segmented' | true |
9
+
10
+
11
+ <AntdApiRef url="https://ant.design/components/tabs-cn/#api"></AntdApiRef>
12
+
13
+
14
+ ## antd API
15
+
16
+ 通用属性参考:[通用属性](/docs/react/common-props)
17
+
18
+ ### Tabs
19
+
20
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
21
+ |--------|--------|--------|--------|--------|
22
+ | activeKey | 当前激活 tab 面板的 key | string | - | |
23
+ | addIcon | 自定义添加按钮,设置 | ReactNode | | 4.4.0 |
24
+ | animated | 是否使用动画切换 Tabs | boolean\| { inkBar: boolean, tabPane: boolean } | { inkBar: true, tabPane: false } | |
25
+ | centered | 标签居中展示 | boolean | false | 4.4.0 |
26
+ | defaultActiveKey | 初始化选中面板的 key,如果没有设置 activeKey | string | 第一个面板的 key | |
27
+ | hideAdd | 是否隐藏加号图标,在 | boolean | false | |
28
+ | indicator | 自定义指示条的长度和对齐方式 | { size?: number \| (origin: number) => number; align: | - | 5.13.0 |
29
+ | items | 配置选项卡内容 | | [] | 4.23.0 |
30
+ | more | 自定义折叠菜单属性 | | { icon: | |
31
+ | removeIcon | 自定义删除按钮,设置 | ReactNode | | 5.15.0 |
32
+ | popupClassName | 更多菜单的 | string | - | 4.21.0 |
33
+ | renderTabBar | 替换 TabBar,用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
34
+ | size | 大小,提供 | string | middle | |
35
+ | tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
36
+ | tabBarGutter | tabs 之间的间隙 | number | - | |
37
+ | tabBarStyle | tab bar 的样式对象 | CSSProperties | - | |
38
+ | tabPosition | 页签位置,可选值有 | string | top | |
39
+ | destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
40
+ | onChange | 切换面板的回调 | (activeKey: string) => void | - | |
41
+ | onEdit | 新增和删除页签的回调,在 | (action === 'add' ? event : targetKey, action) => void | - | |
42
+ | onTabClick | tab 被点击的回调 | (key: string, event: MouseEvent) => void | - | |
43
+ | onTabScroll | tab 滚动时触发 | ({ direction: | - | 4.3.0 |
44
+
45
+
46
+ 更多属性查看 [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
47
+
48
+ ### TabItemType
49
+
50
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
51
+ |--------|--------|--------|--------|--------|
52
+ | closeIcon | 自定义关闭图标,在 | ReactNode | - | |
53
+ | destroyOnHidden | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.25.0 |
54
+ | disabled | 禁用某一项 | boolean | false | |
55
+ | forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
56
+ | key | 对应 activeKey | string | - | |
57
+ | label | 选项卡头显示文字 | ReactNode | - | |
58
+ | icon | 选项卡头显示图标 | ReactNode | - | 5.12.0 |
59
+ | children | 选项卡头显示内容 | ReactNode | - | |
60
+ | closable | 是否显示选项卡的关闭按钮,在 | boolean | true | |
61
+
62
+
63
+ ### MoreProps
64
+
65
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
66
+ |--------|--------|--------|--------|--------|
67
+ | icon | 自定义折叠图标 | ReactNode | - | |
68
+ | | | | | |
@@ -0,0 +1,33 @@
1
+
2
+
3
+ <DemoTitle title="Tag" desc="进行标记和分类的小标签">
4
+ #### API
5
+
6
+ | 属性名 | 描述 | 类型 | 默认值 |
7
+ |--------|--------|--------|--------|
8
+ | size | 尺寸 | 'small' \| 'middle' | 'middle' |
9
+ | color | 标签色 | SparkTagColors \| string | 'purple' |
10
+
11
+ <AntdApiRef url="https://ant.design/components/tag-cn/#api"></AntdApiRef>
12
+
13
+
14
+ ## antd API
15
+
16
+ 通用属性参考:[通用属性](/docs/react/common-props)
17
+
18
+ ### Tag
19
+
20
+ | 参数 | 说明 | 类型 | 默认值 | 版本 |
21
+ |--------|--------|--------|--------|--------|
22
+ | closeIcon | 自定义关闭按钮。5.7.0:设置为 | ReactNode | false | 4.4.0 |
23
+ | icon | 设置图标 | ReactNode | - | |
24
+ | bordered | 是否有边框 | boolean | true | 5.4.0 |
25
+ | onClose | 关闭时的回调(可通过 | (e: React.MouseEvent) => void | - | |
26
+
27
+
28
+ ### Tag.CheckableTag
29
+
30
+ | 参数 | 说明 | 类型 | 默认值 |
31
+ |--------|--------|--------|--------|
32
+ | checked | 设置标签的选中状态 | boolean | false |
33
+ | onChange | 点击标签时触发的回调 | (checked) => void | - |