mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-01-18 06:03:38 +08:00
Code Issues Actions 29 Packages Projects Releases Wiki Activity

sort api

Browse Source
This commit is contained in:
Tom Xu 2020-10-20 10:23:54 +08:00
parent 00d7c3e301
commit 343505d5f0
97 changed files with 599 additions and 599 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
components/alert/index.en-US.md
View File

@ -23,13 +23,13 @@ Alert component for feedback.
| description | Additional content of Alert | ReactNode | - |
| icon | Custom icon, effective when `showIcon` is true | ReactNode | - |
| message | Content of Alert | ReactNode | - |
| onClose | Callback when Alert is closed | (e: MouseEvent) => void | - |
| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true |
| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` |
| onClose | Callback when Alert is closed | (e: MouseEvent) => void | - |
### Alert.ErrorBoundary
| Property | Description | Type | Default | Version |
| ----------- | -------------------------------- | --------- | ----------------- | ------- |
| message | Custom error message to show | ReactNode | {{ error }} | |
| description | Custom error description to show | ReactNode | {{ error stack }} | |
| message | Custom error message to show | ReactNode | {{ error }} | |

4
components/alert/index.zh-CN.md
View File

@ -24,13 +24,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
| description | 警告提示的辅助性文字介绍 | ReactNode | - |
| icon | 自定义图标，`showIcon` 为 true 时有效 | ReactNode | - |
| message | 警告提示内容 | ReactNode | - |
| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | - |
| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true |
| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` |
| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | - |
### Alert.ErrorBoundary
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| message | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }} | |
| description | 自定义错误内容，如果未指定会展示报错堆栈 | ReactNode | {{ error stack }} | |
| message | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }} | |

10
components/anchor/index.en-US.md
View File

@ -21,17 +21,17 @@ For displaying anchor hyperlinks on page and jumping between them.
| affix | Fixed mode of Anchor | boolean | true | |
| bounds | Bounding distance of anchor area | number | 5 | |
| getContainer | Scrolling container | () => HTMLElement | () => window | |
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | |
| showInkInFixed | Whether show ink-balls when `affix={false}` | boolean | false | |
| onClick | Set the handler to handle `click` event | function(e: Event, link: Object) | - | |
| getCurrentAnchor | Customize the anchor highlight | () => string | - | |
| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | - | |
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | |
| onChange | Listening for anchor link change | (currentActiveLink: string) => void | | |
| onClick | Set the handler to handle `click` event | function(e: Event, link: Object) | - | |
| showInkInFixed | Whether show ink-balls when `affix={false}` | boolean | false | |
| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | - | |
### Link Props
| Property | Description | Type | Default | Version |
| -------- | ----------------------------------------- | --------- | ------- | ------- |
| href | The target of hyperlink | string | | |
| title | The content of hyperlink | ReactNode | | |
| target | Specifies where to display the linked URL | string | | |
| title | The content of hyperlink | ReactNode | | |

10
components/anchor/index.zh-CN.md
View File

@ -22,17 +22,17 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
| affix | 固定模式 | boolean | true | |
| bounds | 锚点区域边界 | number | 5 | |
| getContainer | 指定滚动的容器 | () => HTMLElement | () => window | |
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
| showInkInFixed | `affix={false}` 时是否显示小圆点 | boolean | false | |
| onClick | `click` 事件的 handler | function(e: Event, link: Object) | - | |
| getCurrentAnchor | 自定义高亮的锚点 | () => string | - | |
| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | - | |
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
| onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - | |
| onClick | `click` 事件的 handler | function(e: Event, link: Object) | - | |
| showInkInFixed | `affix={false}` 时是否显示小圆点 | boolean | false | |
| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | - | |
### Link Props
| 成员 | 说明 | 类型 | 默认值 | 版本 |
| ------ | -------------------------------- | --------- | ------ | ---- |
| href | 锚点链接 | string | - | |
| title | 文字内容 | ReactNode | - | |
| target | 该属性指定在何处显示链接的资源。 | string | - | |
| title | 文字内容 | ReactNode | - | |

10
components/auto-complete/index.en-US.md
View File

@ -22,23 +22,23 @@ When there is a need for autocomplete functionality.
| children (for customize input element) | Customize input element | HTMLInputElement \| HTMLTextAreaElement \| React.ReactElement<InputProps> | <Input /> | |
| children (for dataSource) | Data source to auto complete | React.ReactElement<OptionProps> \| Array<React.ReactElement<OptionProps>> | - | |
| defaultActiveFirstOption | Whether active first option by default | boolean | true | |
| defaultOpen | Initial open state of dropdown | boolean | - | |
| defaultValue | Initial selected option | string | - | |
| disabled | Whether disabled select | boolean | false | |
| dropdownClassName | The className of dropdown menu | string | - | |
| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true | |
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded | boolean \| function(inputValue, option) | true | |
| placeholder | The placeholder of input | string | - | |
| value | Selected option | string | - | |
| notFoundContent | Specify content to show when no result matches | string | `Not Found` | |
| onBlur | Called when leaving the component | function() | - | |
| onChange | Called when select an option or input value change, or value of input is changed | function(value) | - | |
| onDropdownVisibleChange | Call when dropdown open | function(open) | - | |
| onFocus | Called when entering the component | function() | - | |
| onSearch | Called when searching items | function(value) | - | |
| onSelect | Called when a option is selected. param is option's value and option instance | function(value, option) | - | |
| defaultOpen | Initial open state of dropdown | boolean | - | |
| open | Controlled open state of dropdown | boolean | - | |
| options | Select options. Will get better perf than jsx definition | { label, value }[] | - | |
| onDropdownVisibleChange | Call when dropdown open | function(open) | - | |
| notFoundContent | Specify content to show when no result matches | string | `Not Found` | |
| placeholder | The placeholder of input | string | - | |
| value | Selected option | string | - | |
## Methods

12
components/auto-complete/index.zh-CN.md
View File

@ -20,27 +20,27 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
| allowClear | 支持清除, 单选模式有效 | boolean | false | |
| autoFocus | 自动获取焦点 | boolean | false | |
| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false | |
| children (自定义输入框) | 自定义输入框 | HTMLInputElement \| HTMLTextAreaElement \| React.ReactElement<InputProps> | <Input /> | |
| children (自动完成的数据源) | 自动完成的数据源 | React.ReactElement<OptionProps> \| Array<React.ReactElement<OptionProps>> | - | |
| children (自定义输入框) | 自定义输入框 | HTMLInputElement \| HTMLTextAreaElement \| React.ReactElement<InputProps> | <Input /> | |
| defaultActiveFirstOption | 是否默认高亮第一个选项 | boolean | true | |
| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |
| defaultValue | 指定默认选中的条目 | string | - | |
| disabled | 是否禁用 | boolean | false | |
| dropdownClassName | 下拉菜单的 className 属性 | string | - | |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true | |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false | boolean \| function(inputValue, option) | true | |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body | |
| placeholder | 输入框提示 | string | - | |
| value | 指定当前选中的条目 | string | - | |
| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | - | |
| onBlur | 失去焦点时的回调 | function() | - | |
| onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | - | |
| onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - | |
| onFocus | 获得焦点时的回调 | function() | - | |
| onSearch | 搜索补全项的时候调用 | function(value) | - | |
| onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | - | |
| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |
| open | 是否展开下拉菜单 | boolean | - | |
| options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }[] | - | |
| onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - | |
| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | - | |
| placeholder | 输入框提示 | string | - | |
| value | 指定当前选中的条目 | string | - | |
## 方法

8
components/avatar/index.en-US.md
View File

@ -13,14 +13,14 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| alt | This attribute defines the alternative text describing the image | string | - | |
| gap | Letter type unit distance between left and right sides | number | 4 | 4.3.0 |
| icon | Custom icon type for an icon avatar | ReactNode | - | |
| onError | Handler when img load error, return false to prevent default fallback behavior | () => boolean | - | |
| shape | The shape of avatar | `circle` \| `square` | `circle` | |
| size | The size of the avatar | number \| `large` \| `small` \| `default` \| `{ xs: number, sm: number, ...}` | `default` | 4.7.0 |
| src | The address of the image for an image avatar | string | - | |
| srcSet | A list of sources to use for different screen resolutions | string | - | |
| alt | This attribute defines the alternative text describing the image | string | - | |
| onError | Handler when img load error, return false to prevent default fallback behavior | () => boolean | - | |
| gap | Letter type unit distance between left and right sides | number | 4 | 4.3.0 |
> Tip: You can set `icon` or `children` as the fallback for image load error, with the priority of `icon` > `children`
@ -29,5 +29,5 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ------------------- | -------------------------------------- | ----------------- | ------ | ---- |
| maxCount | Max avatars to show | number | - | |
| maxStyle | The style of excess avatar style | CSSProperties | - | |
| maxPopoverPlacement | The placement of excess avatar Popover | `top` \| `bottom` | `top` | |
| maxStyle | The style of excess avatar style | CSSProperties | - | |

8
components/avatar/index.zh-CN.md
View File

@ -18,14 +18,14 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| alt | 图像无法显示时的替代文本 | string | - | |
| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 |
| icon | 设置头像的自定义图标 | ReactNode | - | |
| onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - | |
| shape | 指定头像的形状 | `circle` \| `square` | `circle` | |
| size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| `{ xs: number, sm: number, ...}` | `default` | 4.7.0 |
| src | 图片类头像的资源地址 | string | - | |
| srcSet | 设置图片类头像响应式资源地址 | string | - | |
| alt | 图像无法显示时的替代文本 | string | - | |
| onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - | |
| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 |
> Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fallback 行为，优先级为 `icon` > `children`
@ -34,5 +34,5 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ------------------- | -------------------- | ----------------- | ------ | ---- |
| maxCount | 显示的最大头像个数 | number | - | |
| maxStyle | 多余头像样式 | CSSProperties | - | |
| maxPopoverPlacement | 多余头像气泡弹出位置 | `top` \| `bottom` | `top` | |
| maxStyle | 多余头像样式 | CSSProperties | - | |

4
components/back-top/index.en-US.md
View File

@ -20,7 +20,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| duration | Time to return to top（ms） | number | 450 | 4.4.0 |
| onClick | A callback function, which can be executed when you click the button | function | - | |
| target | Specifies the scrollable area dom node | () => HTMLElement | () => window | |
| visibilityHeight | The BackTop button will not show until the scroll height reaches this value | number | 400 | |
| onClick | A callback function, which can be executed when you click the button | function | - | |
| duration | Time to return to top（ms） | number | 450 | 4.4.0 |

4
components/back-top/index.zh-CN.md
View File

@ -21,7 +21,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| duration | 回到顶部所需时间（ms） | number | 450 | 4.4.0 |
| onClick | 点击按钮的回调函数 | function | - | |
| target | 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window | |
| visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | |
| onClick | 点击按钮的回调函数 | function | - | |
| duration | 回到顶部所需时间（ms） | number | 450 | 4.4.0 |

2
components/badge/index.en-US.md
View File

@ -23,8 +23,8 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
| offset | Set offset of the badge dot | \[number, number] | - | |
| overflowCount | Max count to show | number | 99 | |
| showZero | Whether to show badge when `count` is zero | boolean | false | |
| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | - | |
| size | If `count` is set, `size` sets the size of badge | `default` \| `small` | - | 4.6.0 |
| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | - | |
| text | If `status` is set, `text` sets the display text of the status `dot` | ReactNode | - | |
| title | Text to show when hovering over the badge | string | - | |

2
components/badge/index.zh-CN.md
View File

@ -24,8 +24,8 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
| offset | 设置状态点的位置偏移 | \[number, number] | - | |
| overflowCount | 展示封顶的数字值 | number | 99 | |
| showZero | 当数值为 0 时，是否展示 Badge | boolean | false | |
| status | 设置 Badge 为状态点 | `success` \| `processing` \| `default` \| `error` \| `warning` | - | |
| size | 在设置了 `count` 的前提下有效，设置小圆点的大小 | `default` \| `small` | - | 4.6.0 |
| status | 设置 Badge 为状态点 | `success` \| `processing` \| `default` \| `error` \| `warning` | - | |
| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | ReactNode | - | |
| title | 设置鼠标放在状态点上时显示的文字 | string | - | |

8
components/calendar/index.en-US.md
View File

@ -37,16 +37,16 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
| defaultValue | The date selected by default | [moment](http://momentjs.com/) | - | |
| disabledDate | Function that specifies the dates that cannot be selected | (currentDate: moment) => boolean | - | |
| fullscreen | Whether to display in full-screen | boolean | true | |
| headerRender | Render custom header in panel | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | - | |
| locale | The calendar's locale | object | [(default)](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |
| mode | The display mode of the calendar | `month` \| `year` | `month` | |
| monthCellRender | Customize the display of the month cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - | |
| monthFullCellRender | Customize the display of the month cell, the returned content will override the cell | function(date: moment): ReactNode | - | |
| validRange | To set valid range | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
| value | The current selected date | [moment](http://momentjs.com/) | - | |
| onChange | Callback for when date changes | function(date: moment） | - | |
| onPanelChange | Callback for when panel changes | function(date: moment, mode: string) | - | |
| onSelect | Callback for when a date is selected | function(date: moment） | - | |
| onChange | Callback for when date changes | function(date: moment） | - | |
| headerRender | Render custom header in panel | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | - | |
| validRange | To set valid range | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
| value | The current selected date | [moment](http://momentjs.com/) | - | |
## FAQ

8
components/calendar/index.zh-CN.md
View File

@ -38,16 +38,16 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
| defaultValue | 默认展示的日期 | [moment](http://momentjs.com/) | - | |
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | - | |
| fullscreen | 是否全屏显示 | boolean | true | |
| headerRender | 自定义头部内容 | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | - | |
| locale | 国际化配置 | object | [(默认配置)](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |
| mode | 初始模式 | `month` \| `year` | `month` | |
| monthCellRender | 自定义渲染月单元格，返回内容会被追加到单元格 | function(date: moment): ReactNode | - | |
| monthFullCellRender | 自定义渲染月单元格，返回内容覆盖单元格 | function(date: moment): ReactNode | - | |
| validRange | 设置可以显示的日期 | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
| value | 展示日期 | [moment](http://momentjs.com/) | - | |
| onChange | 日期变化回调 | function(date: moment） | - | |
| onPanelChange | 日期面板变化回调 | function(date: moment, mode: string) | - | |
| onSelect | 点击选择日期回调 | function(date: moment） | - | |
| onChange | 日期变化回调 | function(date: moment） | - | |
| headerRender | 自定义头部内容 | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | - | |
| validRange | 设置可以显示的日期 | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
| value | 展示日期 | [moment](http://momentjs.com/) | - | |
## FAQ

10
components/card/index.en-US.md
View File

@ -24,21 +24,21 @@ A card can be used to display content related to a single subject. The content c
| --- | --- | --- | --- | --- |
| actions | The action list, shows at the bottom of the Card | Array<ReactNode> | - | |
| activeTabKey | Current TabPane's key | string | - | |
| headStyle | Inline style to apply to the card head | CSSProperties | - | |
| bodyStyle | Inline style to apply to the card content | CSSProperties | - | |
| bordered | Toggles rendering of the border around the card | boolean | true | |
| cover | Card cover | ReactNode | - | |
| defaultActiveTabKey | Initial active TabPane's key, if `activeTabKey` is not set | string | - | |
| extra | Content to render in the top-right corner of the card | ReactNode | - | |
| headStyle | Inline style to apply to the card head | CSSProperties | - | |
| hoverable | Lift up when hovering card | boolean | false | |
| loading | Shows a loading indicator while the contents of the card are being fetched | boolean | false | |
| tabList | List of TabPane's head | Array<{key: string, tab: ReactNode}> | - | |
| tabBarExtraContent | Extra content in tab bar | ReactNode | - | |
| onTabChange | Callback when tab is switched | (key) => void | - | |
| size | Size of card | `default` \| `small` | `default` | |
| tabBarExtraContent | Extra content in tab bar | ReactNode | - | |
| tabList | List of TabPane's head | Array<{key: string, tab: ReactNode}> | - | |
| tabProps | [Tabs](/components/tabs/#Tabs) | - | - | |
| title | Card title | ReactNode | - | |
| type | Card style type, can be set to `inner` or not set | string | - | |
| onTabChange | Callback when tab is switched | (key) => void | - | |
| tabProps | [Tabs](/components/tabs/#Tabs) | - | - | |
### Card.Grid

10
components/card/index.zh-CN.md
View File

@ -25,21 +25,21 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/NqXt8DJhky/Card.svg
| --- | --- | --- | --- | --- |
| actions | 卡片操作组，位置在卡片底部 | Array<ReactNode> | - | |
| activeTabKey | 当前激活页签的 key | string | - | |
| headStyle | 自定义标题区域样式 | CSSProperties | - | |
| bodyStyle | 内容区域自定义样式 | CSSProperties | - | |
| bordered | 是否有边框 | boolean | true | |
| cover | 卡片封面 | ReactNode | - | |
| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | `第一个页签` | |
| extra | 卡片右上角的操作区域 | ReactNode | - | |
| headStyle | 自定义标题区域样式 | CSSProperties | - | |
| hoverable | 鼠标移过时可浮起 | boolean | false | |
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false | |
| tabList | 页签标题列表 | Array<{key: string, tab: ReactNode}> | - | |
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | |
| onTabChange | 页签切换的回调 | (key) => void | - | |
| size | card 的尺寸 | `default` \| `small` | `default` | |
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | |
| tabList | 页签标题列表 | Array<{key: string, tab: ReactNode}> | - | |
| tabProps | [Tabs](/components/tabs/#Tabs) | - | - | |
| title | 卡片标题 | ReactNode | - | |
| type | 卡片类型，可设置为 `inner` 或 不设置 | string | - | |
| onTabChange | 页签切换的回调 | (key) => void | - | |
| tabProps | [Tabs](/components/tabs/#Tabs) | - | - | |
### Card.Grid

8
components/cascader/index.en-US.md
View File

@ -29,12 +29,15 @@ Cascade selection box.
| defaultValue | Initial selected value | string\[] \| number\[] | \[] | |
| disabled | Whether disabled select | boolean | false | |
| displayRender | The render function of displaying selected options | (label, selectedOptions) => ReactNode | label => label.join(`/`) | |
| expandTrigger | expand current item when click or hover, one of `click` `hover` | string | `click` | |
| dropdownRender | Customize dropdown content | (menus: ReactNode) => ReactNode | - | 4.4.0 |
| expandIcon | Customize the current item expand icon | ReactNode | - | 4.4.0 |
| expandTrigger | expand current item when click or hover, one of `click` `hover` | string | `click` | |
| fieldNames | Custom field name for label and value and children | object | { label: `label`, value: `value`, children: `children` } | |
| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body | |
| loadData | To load option lazily, and it cannot work with `showSearch` | (selectedOptions) => void | - | |
| notFoundContent | Specify content to show when no result matches | string | `Not Found` | |
| onChange | Callback when finishing cascader select | (value, selectedOptions) => void | - | |
| onPopupVisibleChange | Callback when popup shown or hidden | (value) => void | - | |
| options | The data options of cascade | [Option](#Option)[] | - | |
| placeholder | The input placeholder | string | `Please select` | |
| popupClassName | The additional className of popup overlay | string | - | |
@ -45,9 +48,6 @@ Cascade selection box.
| style | The additional style | CSSProperties | - | |
| suffixIcon | The custom suffix icon | ReactNode | - | |
| value | The selected value | string\[] \| number\[] | - | |
| dropdownRender | Customize dropdown content | (menus: ReactNode) => ReactNode | - | 4.4.0 |
| onChange | Callback when finishing cascader select | (value, selectedOptions) => void | - | |
| onPopupVisibleChange | Callback when popup shown or hidden | (value) => void | - | |
Fields in `showSearch`:

8
components/cascader/index.zh-CN.md
View File

@ -30,12 +30,15 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
| defaultValue | 默认的选中项 | string\[] \| number\[] | \[] | |
| disabled | 禁用 | boolean | false | |
| displayRender | 选择后展示的渲染函数 | (label, selectedOptions) => ReactNode | label => label.join(`/`) | |
| expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | `click` | |
| dropdownRender | 自定义下拉框内容 | (menus: ReactNode) => ReactNode | - | 4.4.0 |
| expandIcon | 自定义次级菜单展开图标 | ReactNode | - | 4.4.0 |
| expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | `click` | |
| fieldNames | 自定义 options 中 label name children 的字段 | object | { label: `label`, value: `value`, children: `children` } | |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body | |
| loadData | 用于动态加载选项，无法与 `showSearch` 一起使用 | (selectedOptions) => void | - | |
| notFoundContent | 当下拉列表为空时显示的内容 | string | `Not Found` | |
| onChange | 选择完成后的回调 | (value, selectedOptions) => void | - | |
| onPopupVisibleChange | 显示/隐藏浮层的回调 | (value) => void | - | |
| options | 可选项数据源 | [Option](#Option)[] | - | |
| placeholder | 输入框占位文本 | string | `请选择` | |
| popupClassName | 自定义浮层类名 | string | - | |
@ -46,9 +49,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
| style | 自定义样式 | CSSProperties | - | |
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
| value | 指定选中项 | string\[] \| number\[] | - | |
| dropdownRender | 自定义下拉框内容 | (menus: ReactNode) => ReactNode | - | 4.4.0 |
| onChange | 选择完成后的回调 | (value, selectedOptions) => void | - | |
| onPopupVisibleChange | 显示/隐藏浮层的回调 | (value) => void | - | |
`showSearch` 为对象时，其中的字段：

2
components/checkbox/index.en-US.md
View File

@ -34,9 +34,9 @@ Checkbox component.
| defaultValue | Default selected value | string\[] | \[] | |
| disabled | If disable all checkboxes | boolean | false | |
| name | The `name` property of all `input[type="checkbox"]` children | string | - | |
| onChange | The callback function that is triggered when the state changes | function(checkedValue) | - | |
| options | Specifies options | string\[] \| Option\[] | \[] | |
| value | Used for setting the currently selected value | string\[] | \[] | |
| onChange | The callback function that is triggered when the state changes | function(checkedValue) | - | |
### Methods

2
components/checkbox/index.zh-CN.md
View File

@ -35,9 +35,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8nbVbHEm_/CheckBox.svg
| defaultValue | 默认选中的选项 | string\[] | \[] | |
| disabled | 整组失效 | boolean | false | |
| name | CheckboxGroup 下所有 `input[type="checkbox"]` 的 `name` 属性 | string | - | |
| onChange | 变化时回调函数 | function(checkedValue) | - | |
| options | 指定可选项 | string\[] \| Option\[] | \[] | |
| value | 指定选中的选项 | string\[] | \[] | |
| onChange | 变化时回调函数 | function(checkedValue) | - | |
##### Option

12
components/collapse/index.en-US.md
View File

@ -19,23 +19,23 @@ A content area which can be collapsed and expanded.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| activeKey | Key of the active panel | string\[] \| string <br/> number\[] \| number | No default value. In `accordion` mode, it's the key of the first panel | |
| defaultActiveKey | Key of the initial active panel | string\[] \| string <br/> number\[] \| number | - | |
| bordered | Toggles rendering of the border around the collapse block | boolean | true | |
| accordion | If true, Collapse renders as Accordion | boolean | false | |
| onChange | Callback function executed when active panel is changed | function | - | |
| activeKey | Key of the active panel | string\[] \| string <br/> number\[] \| number | No default value. In `accordion` mode, it's the key of the first panel | |
| bordered | Toggles rendering of the border around the collapse block | boolean | true | |
| defaultActiveKey | Key of the initial active panel | string\[] \| string <br/> number\[] \| number | - | |
| destroyInactivePanel | Destroy Inactive Panel | boolean | false | |
| expandIcon | Allow to customize collapse icon | (panelProps) => ReactNode | - | |
| expandIconPosition | Set expand icon position | `left` \| `right` | - | |
| destroyInactivePanel | Destroy Inactive Panel | boolean | false | |
| ghost | Make the collapse borderless and its background transparent | boolean | false | 4.4.0 |
| onChange | Callback function executed when active panel is changed | function | - | |
### Collapse.Panel
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| disabled | If true, panel cannot be opened or closed | boolean | false | |
| extra | The extra element in the corner | ReactNode | - | |
| forceRender | Forced render of content on panel, instead of lazy rending after clicking on header | boolean | false | |
| header | Title of the panel | ReactNode | - | |
| key | Unique key identifying the panel from among its siblings | string \| number | - | |
| showArrow | If false, panel will not show arrow icon | boolean | true | |
| extra | The extra element in the corner | ReactNode | - | |

12
components/collapse/index.zh-CN.md
View File

@ -20,23 +20,23 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| activeKey | 当前激活 tab 面板的 key | string\[] \| string <br/> number\[] \| number | 默认无，accordion 模式下默认第一个元素 | |
| defaultActiveKey | 初始化选中面板的 key | string\[] \| string<br/> number\[] \| number | - | |
| bordered | 带边框风格的折叠面板 | boolean | true | |
| accordion | 手风琴模式 | boolean | false | |
| onChange | 切换面板的回调 | function | - | |
| activeKey | 当前激活 tab 面板的 key | string\[] \| string <br/> number\[] \| number | 默认无，accordion 模式下默认第一个元素 | |
| bordered | 带边框风格的折叠面板 | boolean | true | |
| defaultActiveKey | 初始化选中面板的 key | string\[] \| string<br/> number\[] \| number | - | |
| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | false | |
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
| expandIconPosition | 设置图标位置 | `left` \| `right` | - | |
| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | false | |
| ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
| onChange | 切换面板的回调 | function | - | |
### Collapse.Panel
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----------- | ------------------------------------------ | ---------------- | ------ | ---- |
| disabled | 禁用后的面板展开与否将无法通过用户交互改变 | boolean | false | |
| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - | |
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
| header | 面板头内容 | ReactNode | - | |
| key | 对应 activeKey | string \| number | - | |
| showArrow | 是否展示当前面板上的箭头 | boolean | true | |
| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - | |

10
components/config-provider/index.en-US.md
View File

@ -41,18 +41,18 @@ Some components use dynamic style to support wave effect. You can config `csp` p
| autoInsertSpaceInButton | Set false to remove space between 2 chinese characters on Button | boolean | true | |
| componentSize | Config antd component size | `small` \| `middle` \| `large` | - | |
| csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - | |
| direction | Set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | |
| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | - | 4.3.0 |
| form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validateMessages) } | - | |
| input | Set Input common props | { autoComplete?: string } | - | 4.2.0 |
| renderEmpty | Set empty content of components. Ref [Empty](/components/empty/) | function(componentName: string): ReactNode | - | |
| getPopupContainer | To set the container of the popup element. The default is to create a `div` element in `body` | function(triggerNode) | () => document.body | |
| getTargetContainer | Config Affix, Anchor scroll target container | () => HTMLElement | () => window | 4.2.0 |
| input | Set Input common props | { autoComplete?: string } | - | 4.2.0 |
| locale | Language package setting, you can find the packages in [antd/es/locale](http://unpkg.com/antd/es/locale/) | object | - |
| prefixCls | Set prefix className (cooperated with [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7)) | string | `ant` | |
| pageHeader | Unify the ghost of PageHeader, ref [PageHeader](/components/page-header) | { ghost: boolean } | true | |
| direction | Set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | |
| prefixCls | Set prefix className (cooperated with [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7)) | string | `ant` | |
| renderEmpty | Set empty content of components. Ref [Empty](/components/empty/) | function(componentName: string): ReactNode | - | |
| space | Set Space `size`, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |
| virtual | Disable virtual scroll when set to `false` | boolean | - | 4.3.0 |
| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | - | 4.3.0 |
## FAQ

10
components/config-provider/index.zh-CN.md
View File

@ -42,18 +42,18 @@ export default () => (
| autoInsertSpaceInButton | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格 | boolean | true | |
| componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - | |
| csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - | |
| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动 | boolean \| number | - | 4.3.0 |
| form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form/#validateMessages) } | - | |
| input | 设置 Input 组件的通用属性 | { autoComplete?: string } | - | 4.2.0 |
| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | function(componentName: string): ReactNode | - | |
| getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | function(triggerNode) | () => document.body | |
| getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 |
| input | 设置 Input 组件的通用属性 | { autoComplete?: string } | - | 4.2.0 |
| locale | 语言包配置，语言包可到 [antd/es/locale](http://unpkg.com/antd/es/locale/) 目录下寻找 | object | - | |
| prefixCls | 设置统一样式前缀。注意：需要配合 `less` 变量 [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7) 使用 | string | `ant` | |
| pageHeader | 统一设置 PageHeader 的 ghost，参考 [PageHeader](/components/page-header) | { ghost: boolean } | true | |
| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | |
| prefixCls | 设置统一样式前缀。注意：需要配合 `less` 变量 [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7) 使用 | string | `ant` | |
| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | function(componentName: string): ReactNode | - | |
| space | 设置 Space 的 `size`，参考 [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |
| virtual | 设置 `false` 时关闭虚拟滚动 | boolean | - | 4.3.0 |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动 | boolean \| number | - | 4.3.0 |
## FAQ

42
components/date-picker/index.en-US.md
View File

@ -54,26 +54,26 @@ The following APIs are shared by DatePicker, RangePicker.
| --- | --- | --- | --- | --- |
| allowClear | Whether to show clear button | boolean | true | |
| autoFocus | If get focus when component mounted | boolean | false | |
| bordered | Whether has border style | boolean | true | |
| className | The picker className | string | - | |
| dateRender | Custom rendering function for date cells | function(currentDate: moment, today: moment) => React.ReactNode | - | |
| disabled | Determine whether the DatePicker is disabled | boolean | false | |
| disabledDate | Specify the date that cannot be selected | (currentDate: moment) => boolean | - | |
| dropdownClassName | To customize the className of the popup calendar | string | - | |
| getPopupContainer | To set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - | |
| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | |
| locale | Localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |
| mode | The picker panel mode（ [Cannot select year or month anymore?](/docs/react/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?) ) | `time` \| `date` \| `month` \| `year` \| `decade` | - | |
| onOpenChange | Callback function, can be executed whether the popup calendar is popped up or closed | function(open) | - | |
| onPanelChange | Callback when picker panel mode is changed | function(value, mode) | - | |
| open | The open state of picker | boolean | - | |
| panelRender | Customize panel render | (panelNode) => ReactNode | - | 4.5.0 |
| picker | Set picker type | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter`: 4.1.0 |
| placeholder | The placeholder of date input | string \| \[string,string] | - | |
| popupStyle | To customize the style of the popup calendar | CSSProperties | {} | |
| size | The determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - | |
| bordered | Whether has border style | boolean | true | |
| suffixIcon | The custom suffix icon | ReactNode | - | |
| style | To customize the style of the input box | CSSProperties | {} | |
| onOpenChange | Callback function, can be executed whether the popup calendar is popped up or closed | function(open) | - | |
| onPanelChange | Callback when picker panel mode is changed | function(value, mode) | - | |
| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | |
| suffixIcon | The custom suffix icon | ReactNode | - | |
### Common Methods
@ -86,30 +86,30 @@ The following APIs are shared by DatePicker, RangePicker.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| defaultValue | To set default date, if start time or end time is null or undefined, the date range will be an open interval | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | |
| defaultValue | To set default date, if start time or end time is null or undefined, the date range will be an open interval | [moment](http://momentjs.com/) | - | |
| disabledTime | To specify the time that cannot be selected | function(date) | - | |
| format | To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting, support [Custom Format](#components-date-picker-demo-format) | string \| (value: moment) => string \| (string \| (value: moment) => string)[] | `YYYY-MM-DD` | |
| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
| onOk | Callback when click ok button | function() | - | |
| onPanelChange | Callback function for panel changing | function(value, mode) | - | |
| renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - | |
| showNow | Whether to show 'Now' button on panel when `showTime` is set | boolean | - | 4.4.0 |
| showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#API) | |
| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() | |
| showToday | Whether to show `Today` button | boolean | true | |
| value | To set date | [moment](http://momentjs.com/) | - | |
| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
| onOk | Callback when click ok button | function() | - | |
| onPanelChange | Callback function for panel changing | function(value, mode) | - | |
| showNow | Whether to show 'Now' button on panel when `showTime` is set | boolean | - | 4.4.0 |
### DatePicker\[picker=year]
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| defaultValue | To set default date | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | |
| defaultValue | To set default date | [moment](http://momentjs.com/) | - | |
| format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY` | |
| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | |
| value | To set date | [moment](http://momentjs.com/) | - | |
| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
### DatePicker\[picker=quarter]
@ -117,35 +117,35 @@ Added in `4.1.0`.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| defaultValue | To set default date | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | |
| defaultValue | To set default date | [moment](http://momentjs.com/) | - | |
| format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY-\QQ` | |
| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | |
| value | To set date | [moment](http://momentjs.com/) | - | |
| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
### DatePicker\[picker=month]
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| defaultValue | To set default date | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | |
| defaultValue | To set default date | [moment](http://momentjs.com/) | - | |
| format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY-MM` | |
| monthCellRender | Custom month cell content render method | function(date, locale): ReactNode | - | |
| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | |
| value | To set date | [moment](http://momentjs.com/) | - | |
| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
### DatePicker\[picker=week]
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| defaultValue | To set default date | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | |
| defaultValue | To set default date | [moment](http://momentjs.com/) | - | |
| format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY-wo` | |
| value | To set date | [moment](http://momentjs.com/) | - | |
| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
| renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - | |
| value | To set date | [moment](http://momentjs.com/) | - | |
### RangePicker
@ -153,19 +153,19 @@ Added in `4.1.0`.
| --- | --- | --- | --- | --- |
| allowEmpty | Allow start or end input leave empty | \[boolean, boolean] | \[false, false] | |
| dateRender | Customize date cell. `info` argument is added in 4.3.0 | function(currentDate: moment, today: moment, info: { range: `start` \| `end` }) => React.ReactNode | - | |
| defaultValue | To set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
| defaultPickerValue | To set default picker date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)\] | - | |
| defaultValue | To set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
| disabled | If disable start or end | \[boolean, boolean] | - | |
| disabledTime | To specify the time that cannot be selected | function(date: moment, partial: `start` \| `end`) | - | |
| format | To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting | string \| string[] | `YYYY-MM-DD HH:mm:ss` | |
| onCalendarChange | Callback function, can be executed when the start time or the end time of the range is changing. `info` argument is added in 4.4.0 | function(dates: \[moment, moment], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | |
| onChange | Callback function, can be executed when the selected time is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - | |
| ranges | The preseted ranges for quick selection | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - | |
| renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | |
| separator | Set separator between inputs | string | `~` | |
| showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#API) | |
| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] | |
| value | To set date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
| onCalendarChange | Callback function, can be executed when the start time or the end time of the range is changing. `info` argument is added in 4.4.0 | function(dates: \[moment, moment], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | |
| onChange | Callback function, can be executed when the selected time is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - | |
## FAQ

42
components/date-picker/index.zh-CN.md
View File

@ -55,26 +55,26 @@ import locale from 'antd/es/locale/zh_CN';
| --- | --- | --- | --- | --- |
| allowClear | 是否显示清除按钮 | boolean | true | |
| autoFocus | 自动获取焦点 | boolean | false | |
| bordered | 是否有边框 | boolean | true | |
| className | 选择器 className | string | - | |
| dateRender | 自定义日期单元格的内容 | function(currentDate: moment, today: moment) => React.ReactNode | - | |
| disabled | 禁用 | boolean | false | |
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | - | |
| dropdownClassName | 额外的弹出日历 className | string | - | |
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | |
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |
| mode | 日期面板的状态（[设置后无法选择年份/月份？](/docs/react/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？)） | `time` \| `date` \| `month` \| `year` \| `decade` | - | |
| onOpenChange | 弹出日历和关闭日历的回调 | function(open) | - | |
| onPanelChange | 日历面板切换的回调 | function(value, mode) | - | |
| open | 控制弹层是否展开 | boolean | - | |
| panelRender | 自定义渲染面板 | (panelNode) => ReactNode | - | 4.5.0 |
| picker | 设置选择器类型 | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter`: 4.1.0 |
| placeholder | 输入框提示文字 | string \| \[string, string] | - | |
| popupStyle | 额外的弹出日历样式 | CSSProperties | {} | |
| size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | - | |
| bordered | 是否有边框 | boolean | true | |
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
| style | 自定义输入框样式 | CSSProperties | {} | |
| onOpenChange | 弹出日历和关闭日历的回调 | function(open) | - | |
| onPanelChange | 日历面板切换的回调 | function(value, mode) | - | |
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
### 共同的方法
@ -87,30 +87,30 @@ import locale from 'antd/es/locale/zh_CN';
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| defaultValue | 默认日期，如果开始时间或结束时间为 `null` 或者 `undefined`，日期范围将是一个开区间 | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |
| defaultValue | 默认日期，如果开始时间或结束时间为 `null` 或者 `undefined`，日期范围将是一个开区间 | [moment](http://momentjs.com/) | - | |
| disabledTime | 不可选择的时间 | function(date) | - | |
| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [moment.js](http://momentjs.com/)，支持[自定义格式](#components-date-picker-demo-format) | string \| (value: moment) => string \| (string \| (value: moment) => string)[] | `YYYY-MM-DD` | |
| onChange | 时间发生变化的回调 | function(date: moment, dateString: string) | - | |
| onOk | 点击确定按钮的回调 | function() | - | |
| onPanelChange | 日期面板变化时的回调 | function(value, mode) | - | |
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
| showNow | 当设定了 `showTime` 的时候，面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
| showTime | 增加时间选择功能 | Object \| boolean | [TimePicker Options](/components/time-picker/#API) | |
| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() | |
| showToday | 是否展示“今天”按钮 | boolean | true | |
| value | 日期 | [moment](http://momentjs.com/) | - | |
| onChange | 时间发生变化的回调 | function(date: moment, dateString: string) | - | |
| onOk | 点击确定按钮的回调 | function() | - | |
| onPanelChange | 日期面板变化时的回调 | function(value, mode) | - | |
| showNow | 当设定了 `showTime` 的时候，面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
### DatePicker\[picker=year]
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY` | |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
| value | 日期 | [moment](http://momentjs.com/) | - | |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
### DatePicker\[picker=quarter]
@ -118,35 +118,35 @@ import locale from 'antd/es/locale/zh_CN';
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY-\QQ` | |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
| value | 日期 | [moment](http://momentjs.com/) | - | |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
### DatePicker\[picker=month]
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY-MM` | |
| monthCellRender | 自定义的月份内容渲染方法 | function(date, locale): ReactNode | - | |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
| value | 日期 | [moment](http://momentjs.com/) | - | |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
### DatePicker\[picker=week]
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY-wo` | |
| value | 日期 | [moment](http://momentjs.com/) | - | |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
| value | 日期 | [moment](http://momentjs.com/) | - | |
### RangePicker
@ -154,19 +154,19 @@ import locale from 'antd/es/locale/zh_CN';
| --- | --- | --- | --- | --- |
| allowEmpty | 允许起始项部分为空 | \[boolean, boolean] | \[false, false] | |
| dateRender | 自定义日期单元格的内容。`info` 参数自 4.3.0 添加 | function(currentDate: moment, today: moment, info: { range: `start` \| `end` }) => React.ReactNode | - | |
| defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | - | |
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/)\[] | - | |
| defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | - | |
| disabled | 禁用起始项 | \[boolean, boolean] | - | |
| disabledTime | 不可选择的时间 | function(date: moment, partial: `start` \| `end`) | - | |
| format | 展示的日期格式 | string | `YYYY-MM-DD HH:mm:ss` | |
| onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[moment, moment\], dateStrings: \[string, string\], info: { range:`start`\|`end` }) | - | |
| onChange | 日期范围发生变化的回调 | function(dates: \[moment, moment\], dateStrings: \[string, string\]) | - | |
| ranges | 预设时间范围快捷选择 | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - | |
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
| separator | 设置分隔符 | string | `~` | |
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) | |
| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] | |
| value | 日期 | [moment](http://momentjs.com/)\[] | - | |
| onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[moment, moment\], dateStrings: \[string, string\], info: { range:`start`\|`end` }) | - | |
| onChange | 日期范围发生变化的回调 | function(dates: \[moment, moment\], dateStrings: \[string, string\]) | - | |
## FAQ

10
components/descriptions/index.en-US.md
View File

@ -18,13 +18,13 @@ Commonly displayed on the details page.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| title | The title of the description list, placed at the top | ReactNode | - | |
| extra | The action area of the description list, placed at the top-right | ReactNode | - | 4.5.0 |
| bordered | Whether to display the border | boolean | false | |
| column | The number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect) | number | 3 | |
| size | Set the size of the list. Can be set to `middle`,`small`, or not filled | `default` \| `middle` \| `small` | - | |
| layout | Define description layout | `horizontal` \| `vertical` | `horizontal` | |
| colon | Change default props `colon` value of Descriptions.Item | boolean | true | |
| column | The number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect) | number | 3 | |
| extra | The action area of the description list, placed at the top-right | ReactNode | - | 4.5.0 |
| layout | Define description layout | `horizontal` \| `vertical` | `horizontal` | |
| size | Set the size of the list. Can be set to `middle`,`small`, or not filled | `default` \| `middle` \| `small` | - | |
| title | The title of the description list, placed at the top | ReactNode | - | |
### DescriptionItem

10
components/descriptions/index.zh-CN.md
View File

@ -19,13 +19,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/MjtG9_FOI/Descriptions.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| title | 描述列表的标题，显示在最顶部 | ReactNode | - | |
| extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 |
| bordered | 是否展示边框 | boolean | false | |
| column | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number | 3 | |
| size | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效） | `default` \| `middle` \| `small` | - | |
| layout | 描述布局 | `horizontal` \| `vertical` | `horizontal` | |
| colon | 配置 `Descriptions.Item` 的 `colon` 的默认值 | boolean | true | |
| column | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number | 3 | |
| extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 |
| layout | 描述布局 | `horizontal` \| `vertical` | `horizontal` | |
| size | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效） | `default` \| `middle` \| `small` | - | |
| title | 描述列表的标题，显示在最顶部 | ReactNode | - | |
### DescriptionItem

24
components/drawer/index.en-US.md
View File

@ -20,28 +20,28 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
| Props | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| afterVisibleChange | Callback after the animation ends when switching drawers | function(visible) | - |
| bodyStyle | Style of the drawer content part | object | - |
| className | The class name of the container of the Drawer dialog | string | - |
| closable | Whether a close (x) button is visible on top right of the Drawer dialog or not | boolean | true |
| closeIcon | Custom close icon | ReactNode | &lt;CloseOutlined /> |
| destroyOnClose | Whether to unmount child components on closing drawer or not | boolean | false |
| drawerStyle | Style of the popup layer element | object | - |
| footer | The footer for Drawer | ReactNode | - |
| footerStyle | Style of the drawer footer part | CSSProperties | - |
| forceRender | Prerender Drawer component forcely | boolean | false |
| getContainer | Return the mounted node for Drawer | HTMLElement \| () => HTMLElement \| Selectors \| false | body |
| headerStyle | Style of the drawer header part | object | - |
| height | Placement is `top` or `bottom`, height of the Drawer dialog | string \| number | 256 |
| keyboard | Whether support press esc to close | boolean | true |
| mask | Whether to show mask or not | boolean | true |
| maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not | boolean | true |
| maskStyle | Style for Drawer's mask element | CSSProperties | {} |
| onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button | function(e) | - |
| placement | The placement of the Drawer | `top` \| `right` \| `bottom` \| `left` | `right` |
| push | Nested drawers push behavior | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
| style | Style of wrapper element which **contains mask** compare to `drawerStyle` | CSSProperties | - |
| drawerStyle | Style of the popup layer element | object | - |
| headerStyle | Style of the drawer header part | object | - |
| bodyStyle | Style of the drawer content part | object | - |
| title | The title for Drawer | ReactNode | - |
| visible | Whether the Drawer dialog is visible or not | boolean | false |
| width | Width of the Drawer dialog | string \| number | 256 |
| height | Placement is `top` or `bottom`, height of the Drawer dialog | string \| number | 256 |
| className | The class name of the container of the Drawer dialog | string | - |
| zIndex | The `z-index` of the Drawer | number | 1000 |
| placement | The placement of the Drawer | `top` \| `right` \| `bottom` \| `left` | `right` |
| onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button | function(e) | - |
| afterVisibleChange | Callback after the animation ends when switching drawers | function(visible) | - |
| keyboard | Whether support press esc to close | boolean | true |
| footer | The footer for Drawer | ReactNode | - |
| footerStyle | Style of the drawer footer part | CSSProperties | - |
| push | Nested drawers push behavior | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |

30
components/drawer/index.zh-CN.md
View File

@ -19,28 +19,28 @@ cover: https://gw.alipayobjects.com/zos/alicdn/7z8NJQhFb/Drawer.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| afterVisibleChange | 切换抽屉时动画结束后的回调 | function(visible) | - |
| bodyStyle | 可用于设置 Drawer 内容部分的样式 | CSSProperties | - |
| className | 对话框外层容器的类名 | string | - |
| closable | 是否显示右上角的关闭按钮 | boolean | true |
| closeIcon | 自定义关闭图标 | ReactNode | &lt;CloseOutlined /> |
| destroyOnClose | 关闭时销毁 Drawer 里的子元素 | boolean | false |
| drawerStyle | 用于设置 Drawer 弹出层的样式 | CSSProperties | - |
| footer | 抽屉的页脚 | ReactNode | - |
| footerStyle | 抽屉页脚部件的样式 | CSSProperties | - |
| forceRender | 预渲染 Drawer 内元素 | boolean | false |
| getContainer | 指定 Drawer 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| () => HTMLElement \| Selectors \| false | body |
| maskClosable | 点击蒙层是否允许关闭 | boolean | true |
| mask | 是否展示遮罩 | boolean | true |
| maskStyle | 遮罩样式 | CSSProperties | {} |
| style | 可用于设置 Drawer 最外层容器的样式，和 `drawerStyle` 的区别是作用节点包括 `mask` | CSSProperties | - |
| drawerStyle | 用于设置 Drawer 弹出层的样式 | CSSProperties | - |
| headerStyle | 用于设置 Drawer 头部的样式 | CSSProperties | - |
| bodyStyle | 可用于设置 Drawer 内容部分的样式 | CSSProperties | - |
| height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 256 |
| keyboard | 是否支持键盘 esc 关闭 | boolean | true |
| mask | 是否展示遮罩 | boolean | true |
| maskClosable | 点击蒙层是否允许关闭 | boolean | true |
| maskStyle | 遮罩样式 | CSSProperties | {} |
| onClose | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | - |
| placement | 抽屉的方向 | `top` \| `right` \| `bottom` \| `left` | `right` |
| push | 用于设置多层 Drawer 的推动行为 | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
| style | 可用于设置 Drawer 最外层容器的样式，和 `drawerStyle` 的区别是作用节点包括 `mask` | CSSProperties | - |
| title | 标题 | ReactNode | - |
| visible | Drawer 是否可见 | boolean | - |
| width | 宽度 | string \| number | 256 |
| height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 256 |
| className | 对话框外层容器的类名 | string | - |
| zIndex | 设置 Drawer 的 `z-index` | number | 1000 |
| placement | 抽屉的方向 | `top` \| `right` \| `bottom` \| `left` | `right` |
| onClose | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | - |
| afterVisibleChange | 切换抽屉时动画结束后的回调 | function(visible) | - |
| keyboard | 是否支持键盘 esc 关闭 | boolean | true |
| footer | 抽屉的页脚 | ReactNode | - |
| footerStyle | 抽屉页脚部件的样式 | CSSProperties | - |
| push | 用于设置多层 Drawer 的推动行为 | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |

2
components/dropdown/index.en-US.md
View File

@ -20,10 +20,10 @@ When there are more than a few options to choose from, you can wrap them in a `D
| arrow | Whether the dropdown arrow should be visible | boolean | false | |
| disabled | Whether the dropdown menu is disabled | boolean | - | |
| getPopupContainer | To set the container of the dropdown menu. The default is to create a div element in body, but you can reset it to the scrolling area and make a relative reposition. [Example on CodePen](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
| onVisibleChange | Called when the visible state is changed | (visible: boolean) => void | - | |
| overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - | |
| overlayClassName | The class name of the dropdown root element | string | - | |
| overlayStyle | The style of the dropdown root element | CSSProperties | - | |
| onVisibleChange | Called when the visible state is changed | (visible: boolean) => void | - | |
| placement | Placement of popup menu: `bottomLeft`, `bottomCenter`, `bottomRight`, `topLeft`, `topCenter` or `topRight` | string | `bottomLeft` | |
| trigger | The trigger mode which executes the dropdown action. Note that hover can't be used on touchscreens | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] | |
| visible | Whether the dropdown menu is currently visible | boolean | - | |

2
components/dropdown/index.zh-CN.md
View File

@ -24,10 +24,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
| arrow | 下拉框箭头是否显示 | boolean | false | |
| disabled | 菜单是否禁用 | boolean | - | |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | (triggerNode: HTMLElement) => HTMLElement | () => document.body | |
| onVisibleChange | 菜单显示状态改变时调用，参数为 `visible` | (visible: boolean) => void | - | |
| overlay | 菜单 | [Menu](/components/menu) \| () => Menu | - | |
| overlayClassName | 下拉根元素的类名称 | string | - | |
| overlayStyle | 下拉根元素的样式 | CSSProperties | - | |
| onVisibleChange | 菜单显示状态改变时调用，参数为 `visible` | (visible: boolean) => void | - | |
| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | string | `bottomLeft` | |
| trigger | 触发下拉的行为, 移动端不支持 hover | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] | |
| visible | 菜单是否显示 | boolean | - | |

2
components/empty/index.en-US.md
View File

@ -24,8 +24,8 @@ Empty state placeholder.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| description | Customize description | ReactNode | - | |
| imageStyle | The style of image | CSSProperties | - | |
| image | Customize image. Will treat as image url when string provided | ReactNode | `Empty.PRESENTED_IMAGE_DEFAULT` | |
| imageStyle | The style of image | CSSProperties | - | |
## Built-in images

2
components/empty/index.zh-CN.md
View File

@ -25,8 +25,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/MNbKfLBVb/Empty.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| description | 自定义描述内容 | ReactNode | - | |
| imageStyle | 图片样式 | CSSProperties | - | |
| image | 设置显示图片，为 string 时表示自定义图片地址。 | ReactNode | `Empty.PRESENTED_IMAGE_DEFAULT` | |
| imageStyle | 图片样式 | CSSProperties | - | |
## 内置图片

30
components/form/index.en-US.md
View File

@ -19,8 +19,8 @@ High performance Form component with data scope management. Including data colle
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| component | Set the Form rendering element. Do not create a DOM node for `false` | ComponentType \| false | form | |
| colon | Configure the default value of `colon` for Form.Item. Indicates whether the colon after the label is displayed (only effective when prop layout is horizontal) | boolean | true | |
| component | Set the Form rendering element. Do not create a DOM node for `false` | ComponentType \| false | form | |
| fields | Control of form fields through state management (such as redux). Not recommended for non-strong demand. View [example](#components-form-demo-global-state) | [FieldData](#FieldData)\[] | - | |
| form | Form control instance created by `Form.useForm()`. Automatically created when not provided | [FormInstance](#FormInstance) | - | |
| initialValues | Set value by Form initialization or reset | object | - | |
@ -28,6 +28,10 @@ High performance Form component with data scope management. Including data colle
| labelCol | Label layout, like `<Col>` component. Set `span` `offset` value like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` | [object](/components/grid/#Col) | - | |
| layout | Form layout | `horizontal` \| `vertical` \| `inline` | `horizontal` | |
| name | Form name. Will be the prefix of Field `id` | string | - | |
| onFieldsChange | Trigger when field updated | function(changedFields, allFields) | - | |
| onFinish | Trigger after submitting the form and verifying data successfully | function(values) | - | |
| onFinishFailed | Trigger after submitting the form and verifying data failed | function({ values, errorFields, outOfDate }) | - | |
| onValuesChange | Trigger when value updated | function(changedValues, allValues) | - | |
| preserve | Keep field value even when field removed | boolean | true | 4.4.0 |
| requiredMark | Required mark style. Can use required mark or optional mark. You can not config to single Form.Item since this is a Form level config | boolean \| `optional` | true | 4.6.0 |
| scrollToFirstError | Auto scroll to first failed field when submit | boolean | false | |
@ -35,10 +39,6 @@ High performance Form component with data scope management. Including data colle
| validateMessages | Validation prompt template, description [see below](#validateMessages) | [ValidateMessages](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts) | - | |
| validateTrigger | Config field validate trigger | string \| string[] | `onChange` | 4.3.0 |
| wrapperCol | The layout for input controls, same as `labelCol` | [object](/components/grid/#Col) | - | |
| onFinish | Trigger after submitting the form and verifying data successfully | function(values) | - | |
| onFinishFailed | Trigger after submitting the form and verifying data failed | function({ values, errorFields, outOfDate }) | - | |
| onFieldsChange | Trigger when field updated | function(changedFields, allFields) | - | |
| onValuesChange | Trigger when value updated | function(changedValues, allValues) | - | |
### validateMessages
@ -79,14 +79,15 @@ Form field component for data bidirectional binding, validation, layout, and so
| getValueProps | Additional props with sub component | (value: any) => any | - | 4.2.0 |
| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input` | boolean | false | |
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | ReactNode | - | |
| hidden | Whether to hide Form.Item (still collect and validate value) | boolean | false | |
| htmlFor | Set sub label `htmlFor` | string | - | |
| initialValue | Config sub default value. Form `initialValues` get higher priority when conflict | string | - | 4.2.0 |
| noStyle | No style for `true`, used as a pure field control | boolean | false | |
| label | Label text | ReactNode | - | |
| labelAlign | The text align of label | `left` \| `right` | `right` | |
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>`. You can set `labelCol` on Form which will not affect nest Item. If both exists, use Item first | [object](/components/grid/#Col) | - | |
| messageVariables | default validate filed info | Record<string, string> | - | 4.7.0 |
| name | Field name, support array | [NamePath](#NamePath) | - | |
| noStyle | No style for `true`, used as a pure field control | boolean | false | |
| normalize | Normalize value from component value before passing to Form instance | (value, prevValue, prevValues) => any | - | |
| preserve | Keep field value even when field removed | boolean | true | 4.4.0 |
| required | Display required style. It will be generated by the validation rule | boolean | false | |
@ -99,7 +100,6 @@ Form field component for data bidirectional binding, validation, layout, and so
| validateTrigger | When to validate the value of children node | string \| string[] | `onChange` | |
| valuePropName | Props of children node, for example, the prop of Switch is 'checked'. This prop is an encapsulation of `getValueProps`, which will be invalid after customizing `getValueProps` | string | `value` | |
| wrapperCol | The layout for input controls, same as `labelCol`. You can set `wrapperCol` on Form which will not affect nest Item. If both exists, use Item first | [object](/components/grid/#Col) | - | |
| hidden | Whether to hide Form.Item (still collect and validate value) | boolean | false | |
After wrapped by `Form.Item` with `name` property, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls, the flow of form data will be handled by Form which will cause:
@ -168,8 +168,8 @@ Provides array management for fields.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| name | Field name, support array | [NamePath](#NamePath) | - | |
| children | Render function | (fields: Field[], operation: { add, remove, move }) => React.ReactNode | - | |
| name | Field name, support array | [NamePath](#NamePath) | - | |
| rules | Validate rules, only support customize validator. Should work with [ErrorList](#Form.ErrorList) | { validator, message }[] | - | 4.7.0 |
```tsx
@ -193,8 +193,8 @@ Some operator functions in render form of Form.List.
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| add | add form item | (defaultValue?: any, insertIndex?: number) => void | insertIndex: 4.6.0 |
| remove | remove form item | (index: number \| number[]) => void | number[]: 4.5.0 |
| move | move form item | (from: number, to: number) => void | - |
| remove | remove form item | (index: number \| number[]) => void | number[]: 4.5.0 |
## Form.ErrorList
@ -230,14 +230,14 @@ Provide linkage between forms. If a sub form with `name` prop update, it will au
| Name | Description | Type | Version |
| --- | --- | --- | --- |
| getFieldError | Get the error messages by the field name | (name: [NamePath](#NamePath)) => string[] | |
| getFieldInstance | Get field instance | (name: [NamePath](#NamePath)) => any | 4.4.0 |
| getFieldValue | Get the value by the field name | (name: [NamePath](#NamePath)) => any | |
| getFieldsValue | Get values by a set of field names. Return according to the corresponding structure | (nameList?: [NamePath](#NamePath)[], filterFunc?: (meta: { touched: boolean, validating: boolean }) => boolean) => any | |
| getFieldError | Get the error messages by the field name | (name: [NamePath](#NamePath)) => string[] | |
| getFieldsError | Get the error messages by the fields name. Return as an array | (nameList?: [NamePath](#NamePath)[]) => FieldError[] | |
| getFieldsValue | Get values by a set of field names. Return according to the corresponding structure | (nameList?: [NamePath](#NamePath)[], filterFunc?: (meta: { touched: boolean, validating: boolean }) => boolean) => any | |
| isFieldTouched | Check if a field has been operated | (name: [NamePath](#NamePath)) => boolean | |
| isFieldsTouched | Check if fields have been operated. Check if all fields is touched when `allTouched` is `true` | (nameList?: [NamePath](#NamePath)[], allTouched?: boolean) => boolean | |
| isFieldValidating | Check fields if is in validating | (name: [NamePath](#NamePath)) => boolean | |
| isFieldsTouched | Check if fields have been operated. Check if all fields is touched when `allTouched` is `true` | (nameList?: [NamePath](#NamePath)[], allTouched?: boolean) => boolean | |
| resetFields | Reset fields to `initialValues` | (fields?: [NamePath](#NamePath)[]) => void | |
| scrollToField | Scroll to field position | (name: [NamePath](#NamePath), options: [[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void | |
| setFields | Set fields status | (fields: [FieldData](#FieldData)[]) => void | |
@ -285,10 +285,10 @@ validateFields()
| Name | Description | Type |
| ---------- | ------------------------ | ----------------------- |
| touched | Whether is operated | boolean |
| validating | Whether is in validating | boolean |
| errors | Error messages | string[] |
| name | Field name path | [NamePath](#NamePath)[] |
| touched | Whether is operated | boolean |
| validating | Whether is in validating | boolean |
| value | Field value | any |
#### Rule
@ -310,9 +310,9 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
| required | Required field | boolean |
| transform | Transform value to the rule before validation | (value) => any |
| type | Normally `string` \|`number` \|`boolean` \|`url` \| `email`. More type to ref [here](https://github.com/yiminghe/async-validator#type) | string |
| validateTrigger | Set validate trigger event. Must be the sub set of `validateTrigger` in Form.Item | string \| string[] |
| validator | Customize validation rule. Accept Promise as return. See [example](#components-form-demo-register) | ([rule](#Rule), value) => Promise |
| whitespace | Failed if only has whitespace | boolean |
| validateTrigger | Set validate trigger event. Must be the sub set of `validateTrigger` in Form.Item | string \| string[] |
## Migrate to v4

32
components/form/index.zh-CN.md
View File

@ -20,8 +20,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| component | 设置 Form 渲染元素，为 `false` 则不创建 DOM 节点 | ComponentType \| false | form | |
| colon | 配置 Form.Item 的 `colon` 的默认值。表示是否显示 label 后面的冒号 (只有在属性 layout 为 horizontal 时有效) | boolean | true | |
| component | 设置 Form 渲染元素，为 `false` 则不创建 DOM 节点 | ComponentType \| false | form | |
| fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。查看[示例](#components-form-demo-global-state) | [FieldData](#FieldData)\[] | - | |
| form | 经 `Form.useForm()` 创建的 form 控制实例，不提供时会自动创建 | [FormInstance](#FormInstance) | - | |
| initialValues | 表单默认值，只有初始化以及重置时生效 | object | - | |
@ -29,6 +29,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/components/grid/#Col) | - | |
| layout | 表单布局 | `horizontal` \| `vertical` \| `inline` | `horizontal` | |
| name | 表单名称，会作为表单字段 `id` 前缀使用 | string | - | |
| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | - | |
| onFinish | 提交表单且数据验证成功后回调事件 | function(values) | - | |
| onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | - | |
| onValuesChange | 字段值更新时触发回调事件 | function(changedValues, allValues) | - | |
| preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 |
| requiredMark | 必选样式，可以切换为必选或者可选展示样式。此为 Form 配置，Form.Item 无法单独配置 | boolean \| `optional` | true | 4.6.0 |
| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean | false | |
@ -36,10 +40,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
| validateMessages | 验证提示模板，说明[见下](#validateMessages) | [ValidateMessages](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts) | - | |
| validateTrigger | 统一设置字段校验规则 | string \| string[] | `onChange` | 4.3.0 |
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/components/grid/#Col) | - | |
| onFinish | 提交表单且数据验证成功后回调事件 | function(values) | - | |
| onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | - | |
| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | - | |
| onValuesChange | 字段值更新时触发回调事件 | function(changedValues, allValues) | - | |
### validateMessages
@ -80,16 +80,17 @@ const validateMessages = {
| getValueProps | 为子元素添加额外的属性 | (value: any) => any | - | 4.2.0 |
| hasFeedback | 配合 `validateStatus` 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false | |
| help | 提示信息，如不设置，则会根据校验规则自动生成 | ReactNode | - | |
| hidden | 是否隐藏字段（依然会收集和校验字段） | boolean | false | |
| htmlFor | 设置子元素 label `htmlFor` 属性 | string | - | |
| initialValue | 设置子元素默认值，如果与 Form 的 `initialValues` 冲突则以 Form 为准 | string | - | 4.2.0 |
| noStyle | 为 `true` 时不带样式，作为纯字段控件使用 | boolean | false | |
| label | `label` 标签的文本 | ReactNode | - | |
| labelAlign | 标签文本对齐方式 | `left` \| `right` | `right` | |
| labelCol | `label` 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置，，不会作用于嵌套 Item。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid/#Col) | - | |
| messageVariables | 默认验证字段的信息 | Record<string, string> | - | 4.7.0 |
| name | 字段名，支持数组 | [NamePath](#NamePath) | - | |
| preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 |
| noStyle | 为 `true` 时不带样式，作为纯字段控件使用 | boolean | false | |
| normalize | 组件获取值后进行转换，再放入 Form 中 | (value, prevValue, prevValues) => any | - | |
| preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 |
| required | 必填样式设置。如不设置，则会根据校验规则自动生成 | boolean | false | |
| rules | 校验规则，设置字段的校验逻辑。点击[此处](#components-form-demo-basic)查看示例 | [Rule](#Rule)[] | - | |
| shouldUpdate | 自定义字段更新逻辑，说明[见下](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false | |
@ -100,7 +101,6 @@ const validateMessages = {
| validateTrigger | 设置字段校验的时机 | string \| string[] | `onChange` | |
| valuePropName | 子节点的值的属性，如 Switch 的是 'checked'。该属性为 `getValueProps` 的封装，自定义 `getValueProps` 后会失效 | string | `value` | |
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 `labelCol`。你可以通过 Form 的 `wrapperCol` 进行统一设置，不会作用于嵌套 Item。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid/#Col) | - | |
| hidden | 是否隐藏字段（依然会收集和校验字段） | boolean | false | |
被设置了 `name` 属性的 `Form.Item` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：
@ -169,8 +169,8 @@ Form 通过增量更新方式，只更新被修改的字段相关组件以达到
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| name | 字段名，支持数组 | [NamePath](#NamePath) | - | |
| children | 渲染函数 | (fields: Field[], operation: { add, remove, move }) => React.ReactNode | - | |
| name | 字段名，支持数组 | [NamePath](#NamePath) | - | |
| rules | 校验规则，仅支持自定义规则。需要配合 [ErrorList](#Form.ErrorList) 一同使用。 | { validator, message }[] | - | 4.7.0 |
```tsx
@ -195,8 +195,8 @@ Form.List 渲染表单相关操作函数。
| 参数 | 说明 | 类型 | 默认值 |
| ------ | ---------- | -------------------------------------------------- | ------------------ |
| add | 新增表单项 | (defaultValue?: any, insertIndex?: number) => void | insertIndex: 4.6.0 |
| remove | 删除表单项 | (index: number \| number[]) => void | number[]: 4.5.0 |
| move | 移动表单项 | (from: number, to: number) => void | - |
| remove | 删除表单项 | (index: number \| number[]) => void | number[]: 4.5.0 |
## Form.ErrorList
@ -232,14 +232,14 @@ Form.List 渲染表单相关操作函数。
| 名称 | 说明 | 类型 | 版本 |
| --- | --- | --- | --- |
| getFieldError | 获取对应字段名的错误信息 | (name: [NamePath](#NamePath)) => string[] | |
| getFieldInstance | 获取对应字段实例 | (name: [NamePath](#NamePath)) => any | 4.4.0 |
| getFieldValue | 获取对应字段名的值 | (name: [NamePath](#NamePath)) => any | |
| getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回 | (nameList?: [NamePath](#NamePath)[], filterFunc?: (meta: { touched: boolean, validating: boolean }) => boolean) => any | |
| getFieldError | 获取对应字段名的错误信息 | (name: [NamePath](#NamePath)) => string[] | |
| getFieldsError | 获取一组字段名对应的错误信息，返回为数组形式 | (nameList?: [NamePath](#NamePath)[]) => FieldError[] | |
| getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回 | (nameList?: [NamePath](#NamePath)[], filterFunc?: (meta: { touched: boolean, validating: boolean }) => boolean) => any | |
| isFieldTouched | 检查对应字段是否被用户操作过 | (name: [NamePath](#NamePath)) => boolean | |
| isFieldsTouched | 检查一组字段是否被用户操作过，`allTouched` 为 `true` 时检查是否所有字段都被操作过 | (nameList?: [NamePath](#NamePath)[], allTouched?: boolean) => boolean | |
| isFieldValidating | 检查一组字段是否正在校验 | (name: [NamePath](#NamePath)) => boolean | |
| isFieldsTouched | 检查一组字段是否被用户操作过，`allTouched` 为 `true` 时检查是否所有字段都被操作过 | (nameList?: [NamePath](#NamePath)[], allTouched?: boolean) => boolean | |
| resetFields | 重置一组字段到 `initialValues` | (fields?: [NamePath](#NamePath)[]) => void | |
| scrollToField | 滚动到对应字段位置 | (name: [NamePath](#NamePath), options: [[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void | |
| setFields | 设置一组字段状态 | (fields: [FieldData](#FieldData)[]) => void | |
@ -287,10 +287,10 @@ validateFields()
| 名称 | 说明 | 类型 |
| ---------- | ---------------- | ----------------------- |
| touched | 是否被用户操作过 | boolean |
| validating | 是否正在校验 | boolean |
| errors | 错误信息 | string[] |
| name | 字段名称 | [NamePath](#NamePath)[] |
| touched | 是否被用户操作过 | boolean |
| validating | 是否正在校验 | boolean |
| value | 字段对应值 | any |
#### Rule
@ -312,9 +312,9 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
| required | 是否为必选字段 | boolean |
| transform | 将字段值转换成目标值后进行校验 | (value) => any |
| type | 类型，常见有 `string` \|`number` \|`boolean` \|`url` \| `email`。更多请参考[此处](https://github.com/yiminghe/async-validator#type) | string |
| validateTrigger | 设置触发验证时机，必须是 Form.Item 的 `validateTrigger` 的子集 | string \| string[] |
| validator | 自定义校验，接收 Promise 作为返回值。[示例](#components-form-demo-register)参考 | ([rule](#Rule), value) => Promise |
| whitespace | 如果字段仅包含空格则校验不通过 | boolean |
| validateTrigger | 设置触发验证时机，必须是 Form.Item 的 `validateTrigger` 的子集 | string \| string[] |
## 从 v3 升级到 v4

8
components/grid/index.en-US.md
View File

@ -98,16 +98,16 @@ If the Ant Design grid layout component does not meet your needs, you can use th
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| flex | Flex layout style | string \| number | - | |
| lg | `screen ≥ 992px`, could be a `span` value or an object containing above props | number \| object | - | |
| md | `screen ≥ 768px`, could be a `span` value or an object containing above props | number \| object | - | |
| offset | The number of cells to offset Col from the left | number | 0 | |
| order | Raster order | number | 0 | |
| pull | The number of cells that raster is moved to the left | number | 0 | |
| push | The number of cells that raster is moved to the right | number | 0 | |
| span | Raster number of cells to occupy, 0 corresponds to `display: none` | number | none | |
| xs | `screen < 576px` and also default setting, could be a `span` value or an object containing above props | number \| object | - | |
| sm | `screen ≥ 576px`, could be a `span` value or an object containing above props | number \| object | - | |
| md | `screen ≥ 768px`, could be a `span` value or an object containing above props | number \| object | - | |
| lg | `screen ≥ 992px`, could be a `span` value or an object containing above props | number \| object | - | |
| span | Raster number of cells to occupy, 0 corresponds to `display: none` | number | none | |
| xl | `screen ≥ 1200px`, could be a `span` value or an object containing above props | number \| object | - | |
| xs | `screen < 576px` and also default setting, could be a `span` value or an object containing above props | number \| object | - | |
| xxl | `screen ≥ 1600px`, could be a `span` value or an object containing above props | number \| object | - | |
The breakpoints of responsive grid follow [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints) (not including `occasionally part`).

8
components/grid/index.zh-CN.md
View File

@ -97,16 +97,16 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
| 成员 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| flex | flex 布局属性 | string \| number | - | |
| lg | `屏幕 ≥ 992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
| md | `屏幕 ≥ 768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 | |
| order | 栅格顺序 | number | 0 | |
| pull | 栅格向左移动格数 | number | 0 | |
| push | 栅格向右移动格数 | number | 0 | |
| span | 栅格占位格数，为 0 时相当于 `display: none` | number | - | |
| xs | `屏幕 < 576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
| sm | `屏幕 ≥ 576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
| md | `屏幕 ≥ 768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
| lg | `屏幕 ≥ 992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
| span | 栅格占位格数，为 0 时相当于 `display: none` | number | - | |
| xl | `屏幕 ≥ 1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
| xs | `屏幕 < 576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
| xxl | `屏幕 ≥ 1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number \| object | - | |
响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。

14
components/input-number/index.en-US.md
View File

@ -16,21 +16,21 @@ When a numeric value needs to be provided.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| autoFocus | If get focus when component mounted | boolean | false | - |
| decimalSeparator | Decimal separator | string | - | - |
| defaultValue | The initial value | number | - | - |
| disabled | If disable the input | boolean | false | - |
| readOnly | If readonly the input | boolean | false | - |
| formatter | Specifies the format of the value presented | function(value: number \| string): string | - | - |
| max | The max value | number | [Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) | - |
| min | The min value | number | [Number.MIN_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER) | - |
| parser | Specifies the value extracted from formatter | function(string): number | - | - |
| precision | The precision of input value | number | - | - |
| decimalSeparator | Decimal separator | string | - | - |
| size | The height of input box | `large` \| `middle` \| `small` | - | - |
| step | The number to which the current value is increased or decreased. It can be an integer or decimal | number \| string | 1 | - |
| value | The current value | number | - | - |
| onChange | The callback triggered when the value is changed | function(value: number \| string) | - | - |
| onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | - |
| onStep | The callback function that is triggered when click up or down buttons | `(value: number, info: { offset: number, type: 'up' | 'down' }) => void` | - | 4.7.0 |
| parser | Specifies the value extracted from formatter | function(string): number | - | - |
| precision | The precision of input value | number | - | - |
| readOnly | If readonly the input | boolean | false | - |
| size | The height of input box | `large` \| `middle` \| `small` | - | - |
| step | The number to which the current value is increased or decreased. It can be an integer or decimal | number \| string | 1 | - |
| value | The current value | number | - | - |
## Methods

14
components/input-number/index.zh-CN.md
View File

@ -19,21 +19,21 @@ cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
| 成员 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| autoFocus | 自动获取焦点 | boolean | false | - |
| decimalSeparator | 小数点 | string | - | - |
| defaultValue | 初始值 | number | - | - |
| disabled | 禁用 | boolean | false | - |
| readOnly | 只读 | boolean | false | - |
| formatter | 指定输入框展示值的格式 | function(value: number \| string): string | - | - |
| max | 最大值 | number | [Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) | - |
| min | 最小值 | number | [Number.MIN_SAFE_INTEGER](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER) | - |
| parser | 指定从 `formatter` 里转换回数字的方式，和 `formatter` 搭配使用 | function(string): number | - | - |
| precision | 数值精度 | number | - | - |
| decimalSeparator | 小数点 | string | - | - |
| size | 输入框大小 | `large` \| `middle` \| `small` | - | - |
| step | 每次改变步数，可以为小数 | number \| string | 1 | - |
| value | 当前值 | number | - | - |
| onChange | 变化回调 | function(value: number \| string) | - | - |
| onPressEnter | 按下回车的回调 | function(e) | - | - |
| onStep | 点击上下箭头的回调 | `(value: number, info: { offset: number, type: 'up' | 'down' }) => void` | - | 4.7.0 |
| parser | 指定从 `formatter` 里转换回数字的方式，和 `formatter` 搭配使用 | function(string): number | - | - |
| precision | 数值精度 | number | - | - |
| readOnly | 只读 | boolean | false | - |
| size | 输入框大小 | `large` \| `middle` \| `small` | - | - |
| step | 每次改变步数，可以为小数 | number \| string | 1 | - |
| value | 当前值 | number | - | - |
## 方法

24
components/input/index.en-US.md
View File

@ -20,19 +20,19 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca
| --- | --- | --- | --- | --- |
| addonAfter | The label text displayed after (on the right side of) the input field | ReactNode | - | |
| addonBefore | The label text displayed before (on the left side of) the input field | ReactNode | - | |
| allowClear | If allow to remove input content with clear icon | boolean | false | |
| bordered | Whether has border style | boolean | true | 4.5.0 |
| defaultValue | The initial input content | string | - | |
| disabled | Whether the input is disabled | boolean | false | |
| id | The ID for input | string | - | |
| maxLength | The max length | number | - | |
| onChange | Callback when user input | function(e) | - | |
| onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | |
| prefix | The prefix icon for the Input | ReactNode | - | |
| size | The size of the input box. Note: in the context of a form, the `large` size is used | `large` \| `middle` \| `small` | - | |
| suffix | The suffix icon for the Input | ReactNode | - | |
| type | The type of input, see: [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)( use `Input.TextArea` instead of `type="textarea"`) | string | `text` | |
| value | The input content value | string | - | |
| onChange | Callback when user input | function(e) | - | |
| onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | |
| allowClear | If allow to remove input content with clear icon | boolean | false | |
| bordered | Whether has border style | boolean | true | 4.5.0 |
> When `Input` is used in a `Form.Item` context, if the `Form.Item` has the `id` and `options` props defined then `value`, `defaultValue`, and `id` props of `Input` are automatically set.
@ -42,15 +42,15 @@ The rest of the props of Input are exactly the same as the original [input](http
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| autoSize | Height autosize feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | boolean \| object | false | |
| defaultValue | The initial input content | string | - | |
| value | The input content value | string | - | |
| onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | |
| allowClear | If allow to remove input content with clear icon | boolean | false | |
| onResize | The callback function that is triggered when resize | function({ width, height }) | - | |
| autoSize | Height autosize feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | boolean \| object | false | |
| bordered | Whether has border style | boolean | true | 4.5.0 |
| showCount | Whether show text count | boolean | false | 4.7.0 |
| defaultValue | The initial input content | string | - | |
| maxLength | The max length | number | - | 4.7.0 |
| onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | |
| onResize | The callback function that is triggered when resize | function({ width, height }) | - | |
| showCount | Whether show text count | boolean | false | 4.7.0 |
| value | The input content value | string | - | |
The rest of the props of `Input.TextArea` are the same as the original [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea).
@ -59,8 +59,8 @@ The rest of the props of `Input.TextArea` are the same as the original [textarea
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| enterButton | Whether to show an enter button after input. This property conflicts with the `addonAfter` property | boolean \| ReactNode | false |
| onSearch | The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key | function(value, event) | - |
| loading | Search box with loading | boolean | false |
| onSearch | The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key | function(value, event) | - |
Supports all props of `Input`.
@ -82,8 +82,8 @@ Supports all props of `Input`.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| visibilityToggle | Whether show toggle button | boolean | true | |
| iconRender | Custom toggle button | (visible) => ReactNode | (visible) => (visible ? &lt;EyeOutlined /> : &lt;EyeInvisibleOutlined />) | 4.3.0 |
| visibilityToggle | Whether show toggle button | boolean | true | |
## FAQ

24
components/input/index.zh-CN.md
View File

@ -21,19 +21,19 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg
| --- | --- | --- | --- | --- |
| addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | |
| addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | |
| allowClear | 可以点击清除图标删除内容 | boolean | - | |
| bordered | 是否有边框 | boolean | true | 4.5.0 |
| defaultValue | 输入框默认内容 | string | - | |
| disabled | 是否禁用状态，默认为 false | boolean | false | |
| id | 输入框的 id | string | - | |
| maxLength | 最大长度 | number | - | |
| onChange | 输入框内容变化时的回调 | function(e) | - | |
| onPressEnter | 按下回车的回调 | function(e) | - | |
| prefix | 带有前缀图标的 input | ReactNode | - | |
| size | 控件大小。注：标准表单内的输入框大小限制为 `large` | `large` \| `middle` \| `small` | - | |
| suffix | 带有后缀图标的 input | ReactNode | - | |
| type | 声明 input 类型，同原生 input 标签的 type 属性，见：[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#属性)(请直接使用 `Input.TextArea` 代替 `type="textarea"`) | string | `text` | |
| value | 输入框内容 | string | - | |
| onChange | 输入框内容变化时的回调 | function(e) | - | |
| onPressEnter | 按下回车的回调 | function(e) | - | |
| allowClear | 可以点击清除图标删除内容 | boolean | - | |
| bordered | 是否有边框 | boolean | true | 4.5.0 |
> 如果 `Input` 在 `Form.Item` 内，并且 `Form.Item` 设置了 `id` 和 `options` 属性，则 `value` `defaultValue` 和 `id` 属性会被自动设置。
@ -43,15 +43,15 @@ Input 的其他属性和 React 自带的 [input](https://facebook.github.io/reac
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false | |
| defaultValue | 输入框默认内容 | string | - | |
| value | 输入框内容 | string | - | |
| onPressEnter | 按下回车的回调 | function(e) | - | |
| allowClear | 可以点击清除图标删除内容 | boolean | false | |
| onResize | resize 回调 | function({ width, height }) | - | |
| autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false | |
| bordered | 是否有边框 | boolean | true | 4.5.0 |
| showCount | 是否展示字数 | boolean | false | 4.7.0 |
| defaultValue | 输入框默认内容 | string | - | |
| maxLength | 内容最大长度 | number | - | 4.7.0 |
| onPressEnter | 按下回车的回调 | function(e) | - | |
| onResize | resize 回调 | function({ width, height }) | - | |
| showCount | 是否展示字数 | boolean | false | 4.7.0 |
| value | 输入框内容 | string | - | |
`Input.TextArea` 的其他属性和浏览器自带的 [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) 一致。
@ -60,8 +60,8 @@ Input 的其他属性和 React 自带的 [input](https://facebook.github.io/reac
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| enterButton | 是否有确认按钮，可设为按钮文字。该属性会与 `addonAfter` 冲突。 | boolean \| ReactNode | false |
| onSearch | 点击搜索图标、清除图标，或按下回车键时的回调 | function(value, event) | - |
| loading | 搜索 loading | boolean | false |
| onSearch | 点击搜索图标、清除图标，或按下回车键时的回调 | function(value, event) | - |
其余属性和 Input 一致。
@ -83,8 +83,8 @@ Input 的其他属性和 React 自带的 [input](https://facebook.github.io/reac
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| visibilityToggle | 是否显示切换按钮 | boolean | true | |
| iconRender | 自定义切换按钮 | (visible) => ReactNode | (visible) => (visible ? &lt;EyeOutlined /> : &lt;EyeInvisibleOutlined />) | 4.3.0 |
| visibilityToggle | 是否显示切换按钮 | boolean | true | |
## FAQ

14
components/list/index.en-US.md
View File

@ -19,19 +19,19 @@ A list can be used to display content related to a single subject. The content c
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| bordered | Toggles rendering of the border around the list | boolean | false | |
| dataSource | DataSource array for list | any[] | - | |
| footer | List footer renderer | ReactNode | - | |
| grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | [object](#List-grid-props) | - | |
| header | List header renderer | ReactNode | - | |
| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - | |
| rowKey | Item's unique key, could be a string or function that returns a string | string \| Function(record): string | `key` | |
| loading | Shows a loading indicator while the contents of the list are being fetched | boolean \| [SpinProps](/components/spin/#API) ([more](https://github.com/ant-design/ant-design/issues/8659)) | false | |
| loadMore | Shows a load more content | ReactNode | - | |
| loading | Shows a loading indicator while the contents of the list are being fetched | boolean \| [SpinProps](/components/spin/#API) ([more](https://github.com/ant-design/ant-design/issues/8659)) | false | |
| locale | The i18n text including empty text | object | {emptyText: `No Data`} | |
| pagination | Pagination [config](/components/pagination/), hide it by setting it to false | boolean \| object | false | |
| renderItem | Customize list item when using `dataSource` | (item) => ReactNode | - | |
| rowKey | Item's unique key, could be a string or function that returns a string | string \| Function(record): string | `key` | |
| size | Size of list | `default` \| `large` \| `small` | `default` | |
| split | Toggles rendering of the split under the list item | boolean | true | |
| dataSource | DataSource array for list | any[] | - | |
| renderItem | Customize list item when using `dataSource` | (item) => ReactNode | - | |
### pagination
@ -49,11 +49,11 @@ More about pagination, please check [`Pagination`](/components/pagination/).
| -------- | ------------------------ | ------ | ------- | ------- |
| column | The column of grid | number | - | |
| gutter | The spacing between grid | number | 0 | |
| xs | `<576px` column of grid | number | - | |
| sm | `≥576px` column of grid | number | - | |
| md | `≥768px` column of grid | number | - | |
| lg | `≥992px` column of grid | number | - | |
| md | `≥768px` column of grid | number | - | |
| sm | `≥576px` column of grid | number | - | |
| xl | `≥1200px` column of grid | number | - | |
| xs | `<576px` column of grid | number | - | |
| xxl | `≥1600px` column of grid | number | - | |
### List.Item

12
components/list/index.zh-CN.md
View File

@ -22,18 +22,18 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| bordered | 是否展示边框 | boolean | false | |
| dataSource | 列表数据源 | any[] | - | |
| footer | 列表底部 | ReactNode | - | |
| grid | 列表栅格配置 | [object](#List-grid-props) | - | |
| header | 列表头部 | ReactNode | - | |
| itemLayout | 设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - | |
| loading | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位 | boolean \| [object](/components/spin/#API) ([更多](https://github.com/ant-design/ant-design/issues/8659)) | false | |
| loadMore | 加载更多 | ReactNode | - | |
| loading | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位 | boolean \| [object](/components/spin/#API) ([更多](https://github.com/ant-design/ant-design/issues/8659)) | false | |
| locale | 默认文案设置，目前包括空数据文案 | object | {emptyText: `暂无数据`} | |
| pagination | 对应的 `pagination` 配置, 设置 false 不显示 | boolean \| object | false | |
| renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项 | (item) => ReactNode | - | |
| size | list 的尺寸 | `default` \| `large` \| `small` | `default` | |
| split | 是否展示分割线 | boolean | true | |
| dataSource | 列表数据源 | any[] | - | |
| renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项 | (item) => ReactNode | - | |
### pagination
@ -51,11 +51,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg
| ------ | -------------------- | ------ | ------ | ---- |
| column | 列数 | number | - | |
| gutter | 栅格间隔 | number | 0 | |
| xs | `<576px` 展示的列数 | number | - | |
| sm | `≥576px` 展示的列数 | number | - | |
| md | `≥768px` 展示的列数 | number | - | |
| lg | `≥992px` 展示的列数 | number | - | |
| md | `≥768px` 展示的列数 | number | - | |
| sm | `≥576px` 展示的列数 | number | - | |
| xl | `≥1200px` 展示的列数 | number | - | |
| xs | `<576px` 展示的列数 | number | - | |
| xxl | `≥1600px` 展示的列数 | number | - | |
### List.Item

16
components/mentions/index.en-US.md
View File

@ -24,22 +24,22 @@ When need to mention someone or something.
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| autoFocus | Auto get focus when component mounted | boolean | false |
| autoSize | Textarea height autosize feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | boolean \| object | false |
| defaultValue | Default value | string | - |
| filterOption | Customize filter option logic | false \| (input: string, option: OptionProps) => boolean | - |
| getPopupContainer | Set the mount HTML node for suggestions | () => HTMLElement | - |
| notFoundContent | Set mentions content when not match | ReactNode | `Not Found` |
| onBlur | Trigger when mentions lose focus | () => void | - |
| onChange | Trigger when value changed | (text: string) => void | - |
| onFocus | Trigger when mentions get focus | () => void | - |
| onResize | The callback function that is triggered when textarea resize | function({ width, height }) | - |
| onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - |
| onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - |
| placement | Set popup placement | `top` \| `bottom` | `bottom` |
| prefix | Set trigger prefix keyword | string \| string[] | `@` |
| split | Set split string before and after selected mention | string | `` |
| validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - |
| value | Set value of mentions | string | - |
| onChange | Trigger when value changed | (text: string) => void | - |
| onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - |
| onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - |
| onFocus | Trigger when mentions get focus | () => void | - |
| onBlur | Trigger when mentions lose focus | () => void | - |
| getPopupContainer | Set the mount HTML node for suggestions | () => HTMLElement | - |
| autoSize | Textarea height autosize feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | boolean \| object | false |
| onResize | The callback function that is triggered when textarea resize | function({ width, height }) | - |
### Mention methods

16
components/mentions/index.zh-CN.md
View File

@ -25,22 +25,22 @@ cover: https://gw.alipayobjects.com/zos/alicdn/jPE-itMFM/Mentions.svg
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| autoFocus | 自动获得焦点 | boolean | false |
| autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false |
| defaultValue | 默认值 | string | - |
| filterOption | 自定义过滤逻辑 | false \| (input: string, option: OptionProps) => boolean | - |
| getPopupContainer | 指定建议框挂载的 HTML 节点 | () => HTMLElement | - |
| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | `Not Found` |
| onBlur | 失去焦点时触发 | () => void | - |
| onChange | 值改变时触发 | (text: string) => void | - |
| onFocus | 获得焦点时触发 | () => void | - |
| onResize | resize 回调 | function({ width, height }) | - |
| onSearch | 搜索时触发 | (text: string, prefix: string) => void | - |
| onSelect | 选择选项时触发 | (option: OptionProps, prefix: string) => void | - |
| placement | 弹出层展示位置 | `top` \| `bottom` | `bottom` |
| prefix | 设置触发关键字 | string \| string[] | `@` |
| split | 设置选中项前后分隔符 | string | `` |
| validateSearch | 自定义触发验证逻辑 | (text: string, props: MentionsProps) => void | - |
| value | 设置值 | string | - |
| onChange | 值改变时触发 | (text: string) => void | - |
| onSelect | 选择选项时触发 | (option: OptionProps, prefix: string) => void | - |
| onSearch | 搜索时触发 | (text: string, prefix: string) => void | - |
| onFocus | 获得焦点时触发 | () => void | - |
| onBlur | 失去焦点时触发 | () => void | - |
| getPopupContainer | 指定建议框挂载的 HTML 节点 | () => HTMLElement | - |
| autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false |
| onResize | resize 回调 | function({ width, height }) | - |
### Mentions 方法

8
components/message/index.en-US.md
View File

@ -51,12 +51,12 @@ The properties of config are as follows:
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| className | Customized CSS class | string | - |
| content | The content of the message | ReactNode | - |
| duration | Time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 3 |
| onClose | Specify a function that will be called when the message is closed | function | - |
| icon | Customized Icon | ReactNode | - |
| key | The unique identifier of the Message | string \| number | - |
| className | Customized CSS class | string | - |
| onClose | Specify a function that will be called when the message is closed | function | - |
| style | Customized inline style | [CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |
### Global static methods
@ -89,9 +89,9 @@ message.config({
| duration | Time before auto-dismiss, in seconds | number | 1.5 | |
| getContainer | Return the mount node for Message | () => HTMLElement | () => document.body | |
| maxCount | Max message show, drop oldest if exceed limit | number | - | |
| top | Distance from top | number | 24 | |
| rtl | Whether to enable RTL mode | boolean | false | |
| prefixCls | The prefix className of message node | string | `ant-message` | 4.5.0 |
| rtl | Whether to enable RTL mode | boolean | false | |
| top | Distance from top | number | 24 | |
## FAQ

8
components/message/index.zh-CN.md
View File

@ -52,12 +52,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/hAkKTIW0K/Message.svg
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| className | 自定义 CSS class | string | - |
| content | 提示内容 | ReactNode | - |
| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number | 3 |
| onClose | 关闭时触发的回调函数 | function | - |
| icon | 自定义图标 | ReactNode | - |
| key | 当前提示的唯一标志 | string \| number | - |
| className | 自定义 CSS class | string | - |
| onClose | 关闭时触发的回调函数 | function | - |
| style | 自定义内联样式 | [CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |
### 全局方法
@ -90,9 +90,9 @@ message.config({
| duration | 默认自动关闭延时，单位秒 | number | 3 | |
| getContainer | 配置渲染节点的输出位置 | () => HTMLElement | () => document.body | |
| maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - | |
| top | 消息距离顶部的位置 | number | 24 | |
| rtl | 是否开启 RTL 模式 | boolean | false | |
| prefixCls | 消息节点的 className 前缀 | string | `ant-message` | 4.5.0 |
| rtl | 是否开启 RTL 模式 | boolean | false | |
| top | 消息距离顶部的位置 | number | 24 | |
## FAQ

2
components/modal/index.en-US.md
View File

@ -17,8 +17,8 @@ When requiring users to interact with the application, but without jumping to a
| --- | --- | --- | --- | --- |
| afterClose | Specify a function that will be called when modal is closed completely | function | - | |
| bodyStyle | Body style for modal body element. Such as height, padding etc | CSSProperties | {} | |
| cancelText | Text of the Cancel button | ReactNode | `Cancel` | |
| cancelButtonProps | The cancel button props | [ButtonProps](/components/button/#API) | - | |
| cancelText | Text of the Cancel button | ReactNode | `Cancel` | |
| centered | Centered Modal | boolean | false | |
| closable | Whether a close (x) button is visible on top right of the modal dialog or not | boolean | true | |
| closeIcon | Custom close icon | ReactNode | &lt;CloseOutlined /> | |

6
components/notification/index.en-US.md
View File

@ -34,15 +34,15 @@ The properties of config are as follows:
| bottom | Distance from the bottom of the viewport, when `placement` is `bottomRight` or `bottomLeft` (unit: pixels) | number | 24 |
| btn | Customized close button | ReactNode | - |
| className | Customized CSS class | string | - |
| closeIcon | Custom close icon | ReactNode | - |
| description | The content of notification box (required) | ReactNode | - |
| duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 |
| getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body |
| icon | Customized icon | ReactNode | - |
| closeIcon | Custom close icon | ReactNode | - |
| key | The unique identifier of the Notification | string | - |
| message | The title of notification box (required) | ReactNode | - |
| onClose | Trigger when notification closed | function | - |
| onClick | Specify a function that will be called when the notification is clicked | function | - |
| onClose | Trigger when notification closed | function | - |
| placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
| style | Customized inline style | [CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |
| top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels) | number | 24 |
@ -71,8 +71,8 @@ notification.config({
| duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 |
| getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body |
| placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
| top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels) | number | 24 |
| rtl | Whether to enable RTL mode | boolean | false |
| top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels) | number | 24 |
## FAQ

6
components/notification/index.zh-CN.md
View File

@ -32,8 +32,8 @@ config 参数如下：
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| btn | 自定义关闭按钮 | ReactNode | - |
| bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 |
| btn | 自定义关闭按钮 | ReactNode | - |
| className | 自定义 CSS class | string | - |
| closeIcon | 自定义关闭图标 | ReactNode | - |
| description | 通知提醒内容，必选 | ReactNode | - |
@ -42,8 +42,8 @@ config 参数如下：
| icon | 自定义图标 | ReactNode | - |
| key | 当前通知唯一标志 | string | - |
| message | 通知提醒标题，必选 | ReactNode | - |
| onClose | 当通知关闭时触发 | function | - |
| onClick | 点击通知时触发的回调函数 | function | - |
| onClose | 当通知关闭时触发 | function | - |
| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
| style | 自定义内联样式 | [CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 |
@ -72,8 +72,8 @@ notification.config({
| duration | 默认自动关闭延时，单位秒 | number | 4.5 |
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body |
| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 |
| rtl | 是否开启 RTL 模式 | boolean | false |
| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 |
## FAQ

10
components/page-header/index.en-US.md
View File

@ -17,16 +17,16 @@ PageHeader can be used to highlight the page topic, display important informatio
| Param | Description | Type | Default value | Version |
| --- | --- | --- | --- | --- |
| title | Custom title text | ReactNode | - | |
| subTitle | Custom subtitle text | ReactNode | - | |
| ghost | PageHeader type, will change background color | boolean | true | |
| avatar | Avatar next to the title bar | [AvatarProps](/components/avatar/) | - | |
| backIcon | Custom back icon, if false the back icon will not be displayed | ReactNode \| boolean | &lt;ArrowLeft /> | |
| tags | Tag list next to title | [Tag](/components/tag/)[] \| [Tag](/components/tag/) | - | |
| extra | Operating area, at the end of the line of the title line | ReactNode | - | |
| breadcrumb | Breadcrumb configuration | [Breadcrumb](/components/breadcrumb/) | - | |
| extra | Operating area, at the end of the line of the title line | ReactNode | - | |
| footer | PageHeader's footer, generally used to render TabBar | ReactNode | - | |
| ghost | PageHeader type, will change background color | boolean | true | |
| onBack | Back icon click event | () => void | - | |
| subTitle | Custom subtitle text | ReactNode | - | |
| tags | Tag list next to title | [Tag](/components/tag/)[] \| [Tag](/components/tag/) | - | |
| title | Custom title text | ReactNode | - | |
<style>
[data-theme="dark"] .site-page-header {

10
components/page-header/index.zh-CN.md
View File

@ -17,16 +17,16 @@ cover: https://gw.alipayobjects.com/zos/alicdn/6bKE0Cq0R/PageHeader.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| title | 自定义标题文字 | ReactNode | - | |
| subTitle | 自定义的二级标题文字 | ReactNode | - | |
| ghost | pageHeader 的类型，将会改变背景颜色 | boolean | true | |
| avatar | 标题栏旁的头像 | [AvatarProps](/components/avatar/) | - | |
| backIcon | 自定义 back icon ，如果为 false 不渲染 back icon | ReactNode \| boolean | &lt;ArrowLeft /> | |
| tags | title 旁的 tag 列表 | [Tag](/components/tag/)[] \| [Tag](/components/tag/) | - | |
| extra | 操作区，位于 title 行的行尾 | ReactNode | - | |
| breadcrumb | 面包屑的配置 | [Breadcrumb](/components/breadcrumb/) | - | |
| extra | 操作区，位于 title 行的行尾 | ReactNode | - | |
| footer | PageHeader 的页脚，一般用于渲染 TabBar | ReactNode | - | |
| ghost | pageHeader 的类型，将会改变背景颜色 | boolean | true | |
| onBack | 返回按钮的点击事件 | () => void | - | |
| subTitle | 自定义的二级标题文字 | ReactNode | - | |
| tags | title 旁的 tag 列表 | [Tag](/components/tag/)[] \| [Tag](/components/tag/) | - | |
| title | 自定义标题文字 | ReactNode | - | |
<style>
[data-theme="dark"] .site-page-header {

6
components/pagination/index.en-US.md
View File

@ -27,8 +27,11 @@ A long list can be divided into several pages using `Pagination`, and only one p
| disabled | Disable pagination | boolean | - | |
| hideOnSinglePage | Whether to hide pager on single page | boolean | false | |
| itemRender | To customize item's innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | |
| onChange | Called when the page number is changed, and it takes the resulting page number and pageSize as its arguments | function(page, pageSize) | - | |
| onShowSizeChange | Called when `pageSize` is changed | function(current, size) | - | |
| pageSize | Number of data items per page | number | - | |
| pageSizeOptions | Specify the sizeChanger options | string\[] | \[`10`, `20`, `50`, `100`] | |
| responsive | If `size` is not specified, `Pagination` would resize according to the width of the window | boolean | - | |
| showLessItems | Show less page items | boolean | false | |
| showQuickJumper | Determine whether you can jump to pages directly | boolean \| { goButton: ReactNode } | false | |
| showSizeChanger | Determine whether to show `pageSize` select, it will be true when `total > 50` | boolean | - | |
@ -36,7 +39,4 @@ A long list can be divided into several pages using `Pagination`, and only one p
| showTotal | To display the total number and range | function(total, range) | - | |
| simple | Whether to use simple mode | boolean | - | |
| size | Specify the size of `Pagination`, can be set to `small` | `default` \| `small` | `default` | |
| responsive | If `size` is not specified, `Pagination` would resize according to the width of the window | boolean | - | |
| total | Total number of data items | number | 0 | |
| onChange | Called when the page number is changed, and it takes the resulting page number and pageSize as its arguments | function(page, pageSize) | - | |
| onShowSizeChange | Called when `pageSize` is changed | function(current, size) | - | |

6
components/pagination/index.zh-CN.md
View File

@ -28,8 +28,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/1vqv2bj68/Pagination.svg
| disabled | 禁用分页 | boolean | - | |
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | |
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | |
| onChange | 页码改变的回调，参数是改变后的页码及每页条数 | function(page, pageSize) | - | |
| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | |
| pageSize | 每页条数 | number | - | |
| pageSizeOptions | 指定每页可以显示多少条 | string\[] | \[`10`, `20`, `50`, `100`] | |
| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | |
| showLessItems | 是否显示较少页面内容 | boolean | false | |
| showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false | |
| showSizeChanger | 是否展示 `pageSize` 切换器，当 `total` 大于 50 时默认为 true | boolean | - | |
@ -37,7 +40,4 @@ cover: https://gw.alipayobjects.com/zos/alicdn/1vqv2bj68/Pagination.svg
| showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - | |
| simple | 当添加该属性时，显示为简单分页 | boolean | - | |
| size | 当为 `small` 时，是小尺寸分页 | `default` \| `small` | `default` | |
| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - | |
| total | 数据总数 | number | 0 | |
| onChange | 页码改变的回调，参数是改变后的页码及每页条数 | function(page, pageSize) | - | |
| onShowSizeChange | pageSize 变化的回调 | function(current, size) | - | |

10
components/popconfirm/index.en-US.md
View File

@ -17,16 +17,16 @@ The difference with the `confirm` modal dialog is that it's more lightweight tha
| Param | Description | Type | Default value |
| --- | --- | --- | --- |
| cancelButtonProps | The cancel button props | [ButtonProps](/components/button/#API) | - |
| cancelText | The text of the Cancel button | string | `Cancel` |
| disabled | Whether show popconfirm when click its childrenNode | boolean | false |
| icon | Customize icon of confirmation | ReactNode | &lt;ExclamationCircle /> |
| okButtonProps | The ok button props | [ButtonProps](/components/button/#API) | - |
| okText | The text of the Confirm button | string | `OK` |
| okType | Button `type` of the Confirm button | string | `primary` |
| okButtonProps | The ok button props | [ButtonProps](/components/button/#API) | - |
| cancelButtonProps | The cancel button props | [ButtonProps](/components/button/#API) | - |
| title | The title of the confirmation box | ReactNode \| () => ReactNode | - |
| onCancel | A callback of cancel | function(e) | - |
| onConfirm | A callback of confirmation | function(e) | - |
| icon | Customize icon of confirmation | ReactNode | &lt;ExclamationCircle /> |
| disabled | Whether show popconfirm when click its childrenNode | boolean | false |
| title | The title of the confirmation box | ReactNode \| () => ReactNode | - |
Consult [Tooltip's documentation](/components/tooltip/#API) to find more APIs.

10
components/popconfirm/index.zh-CN.md
View File

@ -18,16 +18,16 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fjMCD9xRq/Popconfirm.svg
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - |
| cancelText | 取消按钮文字 | string | `取消` |
| disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false |
| icon | 自定义弹出气泡 Icon 图标 | ReactNode | &lt;ExclamationCircle /> |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - |
| okText | 确认按钮文字 | string | `确定` |
| okType | 确认按钮类型 | string | `primary` |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - |
| title | 确认框的描述 | ReactNode \| () => ReactNode | - |
| onCancel | 点击取消的回调 | function(e) | - |
| onConfirm | 点击确认的回调 | function(e) | - |
| icon | 自定义弹出气泡 Icon 图标 | ReactNode | &lt;ExclamationCircle /> |
| disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false |
| title | 确认框的描述 | ReactNode \| () => ReactNode | - |
更多属性请参考 [Tooltip](/components/tooltip/#API)。

18
components/progress/index.en-US.md
View File

@ -20,37 +20,37 @@ Properties that shared by all types.
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| type | To set the type, options: `line` `circle` `dashboard` | string | `line` |
| format | The template function of the content | function(percent, successPercent) | (percent) => percent + `%` |
| percent | To set the completion percentage | number | 0 |
| showInfo | Whether to display the progress value and the status icon | boolean | true |
| status | To set the status of the Progress, options: `success` `exception` `normal` `active`(line only) | string | - |
| strokeLinecap | To set the style of the progress linecap | `round` \| `square` | `round` |
| strokeColor | The color of progress bar | string | - |
| trailColor | The color of unfilled part | string | - |
| strokeLinecap | To set the style of the progress linecap | `round` \| `square` | `round` |
| success | Configs of successfully progress bar | { percent: number, strokeColor: string } | - |
| trailColor | The color of unfilled part | string | - |
| type | To set the type, options: `line` `circle` `dashboard` | string | `line` |
### `type="line"`
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| strokeWidth | To set the width of the progress bar, unit: `px` | number | 10 |
| strokeColor | The color of progress bar, render `linear-gradient` when passing an object | string \| { from: string; to: string; direction: string } | - |
| steps | The total step count | number | - |
| strokeColor | The color of progress bar, render `linear-gradient` when passing an object | string \| { from: string; to: string; direction: string } | - |
| strokeWidth | To set the width of the progress bar, unit: `px` | number | 10 |
### `type="circle"`
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| width | To set the canvas width of the circular progress, unit: `px` | number | 132 |
| strokeWidth | To set the width of the circular progress, unit: percentage of the canvas width | number | 6 |
| strokeColor | The color of circular progress, render `linear-gradient` when passing an object | string \| object | - |
| strokeWidth | To set the width of the circular progress, unit: percentage of the canvas width | number | 6 |
| width | To set the canvas width of the circular progress, unit: `px` | number | 132 |
### `type="dashboard"`
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| width | To set the canvas width of the dashboard progress, unit: `px` | number | 132 |
| strokeWidth | To set the width of the dashboard progress, unit: percentage of the canvas width | number | 6 |
| gapDegree | The gap degree of half circle, 0 ~ 295 | number | 75 |
| gapPosition | The gap position, options: `top` `bottom` `left` `right` | string | `bottom` |
| strokeWidth | To set the width of the dashboard progress, unit: percentage of the canvas width | number | 6 |
| width | To set the canvas width of the dashboard progress, unit: `px` | number | 132 |

18
components/progress/index.zh-CN.md
View File

@ -21,37 +21,37 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xqsDu4ZyR/Progress.svg
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| type | 类型，可选 `line` `circle` `dashboard` | string | `line` |
| format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent + `%` |
| percent | 百分比 | number | 0 |
| showInfo | 是否显示进度数值或状态图标 | boolean | true |
| status | 状态，可选：`success` `exception` `normal` `active`(仅限 line) | string | - |
| strokeLinecap | 进度条的样式 | `round` \| `square` | `round` |
| strokeColor | 进度条的色彩 | string | - |
| trailColor | 未完成的分段的颜色 | string | - |
| strokeLinecap | 进度条的样式 | `round` \| `square` | `round` |
| success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - |
| trailColor | 未完成的分段的颜色 | string | - |
| type | 类型，可选 `line` `circle` `dashboard` | string | `line` |
### `type="line"`
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| strokeWidth | 进度条线的宽度，单位 px | number | 10 |
| strokeColor | 进度条的色彩，传入 object 时为渐变 | string \| { from: string; to: string; direction: string } | - |
| steps | 进度条总共步数 | number | - |
| strokeColor | 进度条的色彩，传入 object 时为渐变 | string \| { from: string; to: string; direction: string } | - |
| strokeWidth | 进度条线的宽度，单位 px | number | 10 |
### `type="circle"`
| 属性 | 说明 | 类型 | 默认值 |
| ----------- | ------------------------------------------------ | ---------------- | ------ |
| width | 圆形进度条画布宽度，单位 px | number | 132 |
| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| object | - |
| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
| width | 圆形进度条画布宽度，单位 px | number | 132 |
### `type="dashboard"`
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| width | 仪表盘进度条画布宽度，单位 px | number | 132 |
| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 295 | number | 75 |
| gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `bottom` |
| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
| width | 仪表盘进度条画布宽度，单位 px | number | 132 |

6
components/radio/index.en-US.md
View File

@ -30,15 +30,15 @@ Radio group can wrap a group of `Radio`。
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| buttonStyle | The style type of radio button | `outline` \| `solid` | `outline` | |
| defaultValue | Default selected value | any | - | |
| disabled | Disable all radio buttons | boolean | false | |
| name | The `name` property of all `input[type="radio"]` children | string | - | |
| onChange | The callback function that is triggered when the state changes | function(e:Event) | - | |
| optionType | Set Radio optionType | `default` \| `button` | `default` | 4.4.0 |
| options | Set children optional | string\[] \| Array&lt;{ label: string value: string disabled?: boolean }> | - | |
| size | The size of radio button style | `large` \| `middle` \| `small` | - | |
| value | Used for setting the currently selected value | any | - | |
| onChange | The callback function that is triggered when the state changes | function(e:Event) | - | |
| optionType | Set Radio optionType | `default` \| `button` | `default` | 4.4.0 |
| buttonStyle | The style type of radio button | `outline` \| `solid` | `outline` | |
## Methods

6
components/radio/index.zh-CN.md
View File

@ -31,15 +31,15 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8cYb5seNB/Radio.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| buttonStyle | RadioButton 的风格样式，目前有描边和填色两种风格 | `outline` \| `solid` | `outline` | |
| defaultValue | 默认选中的值 | any | - | |
| disabled | 禁选所有子单选器 | boolean | false | | |
| name | RadioGroup 下所有 `input[type="radio"]` 的 `name` 属性 | string | - | |
| onChange | 选项变化时的回调函数 | function(e:Event) | - | |
| optionType | 用于设置 Radio `options` 类型 | `default` \| `button` | `default` | 4.4.0 |
| options | 以配置形式设置子元素 | string\[] \| Array&lt;{ label: string value: string disabled?: boolean }> | - | |
| size | 大小，只对按钮样式生效 | `large` \| `middle` \| `small` | - | |
| value | 用于设置当前选中的值 | any | - | |
| onChange | 选项变化时的回调函数 | function(e:Event) | - | |
| optionType | 用于设置 Radio `options` 类型 | `default` \| `button` | `default` | 4.4.0 |
| buttonStyle | RadioButton 的风格样式，目前有描边和填色两种风格 | `outline` \| `solid` | `outline` | |
## 方法

6
components/rate/index.en-US.md
View File

@ -24,14 +24,14 @@ Rate component.
| count | Star count | number | 5 | |
| defaultValue | The default value | number | 0 | |
| disabled | If read only, unable to interact | boolean | false | |
| style | The custom style object of rate | CSSProperties | - | |
| tooltips | Customize tooltip by each character | string\[] | - | |
| value | The current value | number | - | |
| onBlur | Callback when component lose focus | function() | - | |
| onChange | Callback when select value | function(value: number) | - | |
| onFocus | Callback when component get focus | function() | - | |
| onHoverChange | Callback when hover item | function(value: number) | - | |
| onKeyDown | Callback when keydown on component | function(event) | - | |
| style | The custom style object of rate | CSSProperties | - | |
| tooltips | Customize tooltip by each character | string\[] | - | |
| value | The current value | number | - | |
## Methods

6
components/rate/index.zh-CN.md
View File

@ -25,14 +25,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/R5uiIWmxe/Rate.svg
| count | star 总数 | number | 5 | |
| defaultValue | 默认值 | number | 0 | |
| disabled | 只读，无法进行交互 | boolean | false | |
| style | 自定义样式对象 | CSSProperties | - | |
| tooltips | 自定义每项的提示信息 | string\[] | - | |
| value | 当前数，受控值 | number | - | |
| onBlur | 失去焦点时的回调 | function() | - | |
| onChange | 选择时的回调 | function(value: number) | - | |
| onFocus | 获取焦点时的回调 | function() | - | |
| onHoverChange | 鼠标经过时数值变化的回调 | function(value: number) | - | |
| onKeyDown | 按键回调 | function(event) | - | |
| style | 自定义样式对象 | CSSProperties | - | |
| tooltips | 自定义每项的提示信息 | string\[] | - | |
| value | 当前数，受控值 | number | - | |
## 方法

8
components/result/index.en-US.md
View File

@ -16,8 +16,8 @@ Use when important operations need to inform the user to process the results and
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| title | The title | ReactNode | - |
| subTitle | The subTitle | ReactNode | - |
| status | Result status, decide icons and colors | `success` \| `error` \| `info` \| `warning` \| `404` \| `403` \| `500` | `info` |
| icon | Custom back icon | ReactNode | - |
| extra | Operating area | ReactNode | - |
| icon | Custom back icon | ReactNode | - |
| status | Result status, decide icons and colors | `success` \| `error` \| `info` \| `warning` \| `404` \| `403` \| `500` | `info` |
| subTitle | The subTitle | ReactNode | - |
| title | The title | ReactNode | - |

8
components/result/index.zh-CN.md
View File

@ -17,8 +17,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9nepwjaLa/Result.svg
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| title | title 文字 | ReactNode | - |
| subTitle | subTitle 文字 | ReactNode | - |
| status | 结果的状态，决定图标和颜色 | `success` \| `error` \| `info` \| `warning` \| `404` \| `403` \| `500` | `info` |
| icon | 自定义 icon | ReactNode | - |
| extra | 操作区 | ReactNode | - |
| icon | 自定义 icon | ReactNode | - |
| status | 结果的状态，决定图标和颜色 | `success` \| `error` \| `info` \| `warning` \| `404` \| `403` \| `500` | `info` |
| subTitle | subTitle 文字 | ReactNode | - |
| title | title 文字 | ReactNode | - |

2
components/select/index.en-US.md
View File

@ -61,9 +61,9 @@ Select component to select value from options.
| onSearch | Callback function that is fired when input changed | function(value: string) | - | |
| onSelect | Called when a option is selected, the params are option's value (or key) and option instance | function(string \| number \| LabeledValue, option: Option) | - | |
| open | Controlled open state of dropdown | boolean | - | |
| options | Select options. Will get better perf than jsx definition | { label, value }[] | - | |
| optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | `value` | |
| optionLabelProp | Which prop value of option will render as content of select. [Example](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `children` | |
| options | Select options. Will get better perf than jsx definition | { label, value }[] | - | |
| placeholder | Placeholder of select | ReactNode | - | |
| removeIcon | The custom remove icon | ReactNode | - | |
| showArrow | Whether to show the drop-down arrow | boolean | true(for single select), false(for multiple select) | |

2
components/select/index.zh-CN.md
View File

@ -62,9 +62,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
| onSearch | 文本框值变化时回调 | function(value: string) | - | |
| onSelect | 被选中时调用，参数为选中项的 value (或 key) 值 | function(string \| number \| LabeledValue, option: Option) | - | |
| open | 是否展开下拉菜单 | boolean | - | |
| options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }[] | - | |
| optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `value` | |
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value` | string | `children` | |
| options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }[] | - | |
| placeholder | 选择框默认文字 | string | - | |
| removeIcon | 自定义的多选框清除图标 | ReactNode | - | |
| showArrow | 是否显示下拉小箭头 | boolean | 单选为 true，多选为 false | |

6
components/skeleton/index.en-US.md
View File

@ -25,16 +25,16 @@ Provide a placeholder while you wait for content to load, or to visualise conten
| avatar | Show avatar placeholder | boolean \| [SkeletonAvatarProps](#SkeletonAvatarProps) | false |
| loading | Display the skeleton when true | boolean | - |
| paragraph | Show paragraph placeholder | boolean \| [SkeletonParagraphProps](#SkeletonParagraphProps) | true |
| title | Show title placeholder | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true |
| round | Show paragraph and title radius when true | boolean | false |
| title | Show title placeholder | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true |
### SkeletonAvatarProps
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| active | Show animation effect, only valid when used avatar independently | boolean | false |
| size | Set the size of avatar | number \| `large` \| `small` \| `default` | - |
| shape | Set the shape of avatar | `circle` \| `square` | - |
| size | Set the size of avatar | number \| `large` \| `small` \| `default` | - |
### SkeletonTitleProps
@ -54,8 +54,8 @@ Provide a placeholder while you wait for content to load, or to visualise conten
| Property | Description | Type | Default |
| -------- | ----------------------- | -------------------------------- | ------- |
| active | Show animation effect | boolean | false |
| size | Set the size of button | `large` \| `small` \| `default` | - |
| shape | Set the shape of button | `circle` \| `round` \| `default` | - |
| size | Set the size of button | `large` \| `small` \| `default` | - |
### SkeletonInputProps

6
components/skeleton/index.zh-CN.md
View File

@ -26,16 +26,16 @@ cover: https://gw.alipayobjects.com/zos/alicdn/KpcciCJgv/Skeleton.svg
| avatar | 是否显示头像占位图 | boolean \| [SkeletonAvatarProps](#SkeletonAvatarProps) | false |
| loading | 为 true 时，显示占位图。反之则直接展示子组件 | boolean | - |
| paragraph | 是否显示段落占位图 | boolean \| [SkeletonParagraphProps](#SkeletonParagraphProps) | true |
| title | 是否显示标题占位图 | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true |
| round | 为 true 时，段落和标题显示圆角 | boolean | false |
| title | 是否显示标题占位图 | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true |
### SkeletonAvatarProps
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| active | 是否展示动画效果，仅在单独使用头像骨架时生效 | boolean | false |
| size | 设置头像占位图的大小 | number \| `large` \| `small` \| `default` | - |
| shape | 指定头像的形状 | `circle` \| `square` | - |
| size | 设置头像占位图的大小 | number \| `large` \| `small` \| `default` | - |
### SkeletonTitleProps
@ -55,8 +55,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/KpcciCJgv/Skeleton.svg
| 属性 | 说明 | 类型 | 默认值 |
| ------ | ---------------- | -------------------------------- | ------ |
| active | 是否展示动画效果 | boolean | false |
| size | 设置按钮的大小 | `large` \| `small` \| `default` | - |
| shape | 指定按钮的形状 | `circle` \| `round` \| `default` | - |
| size | 设置按钮的大小 | `large` \| `small` \| `default` | - |
### SkeletonInputProps

10
components/slider/index.en-US.md
View File

@ -19,21 +19,21 @@ To input a value in a range.
| defaultValue | The default value of slider. When `range` is false, use number, otherwise, use \[number, number] | number \| \[number, number] | 0 \| \[0, 0] | |
| disabled | If true, the slider will not be interactable | boolean | false | |
| dots | Whether the thumb can drag over tick only | boolean | false | |
| getTooltipPopupContainer | The DOM container of the Tooltip, the default behavior is to create a div element in body | (triggerNode) => HTMLElement | () => document.body | |
| included | Make effect when `marks` not null, true means containment and false means coordinative | boolean | true | |
| marks | Tick mark of Slider, type of key must be `number`, and must in closed interval \[min, max], each mark can declare its own style | object | { number: ReactNode } \| { number: { style: object, label: ReactNode } } | |
| max | The maximum value the slider can slide to | number | 100 | |
| min | The minimum value the slider can slide to | number | 0 | |
| onAfterChange | Fire when onmouseup is fired | (value) => void | - | |
| onChange | Callback function that is fired when the user changes the slider's value | (value) => void | - | |
| range | Dual thumb mode | boolean | false | |
| reverse | Reverse the component | boolean | false | |
| step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be null | number \| null | 1 | |
| tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null | value => ReactNode \| null | IDENTITY | |
| value | The value of slider. When `range` is false, use number, otherwise, use \[number, number] | number \| \[number, number] | - |
| vertical | If true, the slider will be vertical | boolean | false | |
| onAfterChange | Fire when onmouseup is fired | (value) => void | - | |
| onChange | Callback function that is fired when the user changes the slider's value | (value) => void | - | |
| tooltipPlacement | Set Tooltip display position. Ref [Tooltip](/components/tooltip/) | string | - | |
| tooltipVisible | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering | boolean | - | |
| getTooltipPopupContainer | The DOM container of the Tooltip, the default behavior is to create a div element in body | (triggerNode) => HTMLElement | () => document.body | |
| value | The value of slider. When `range` is false, use number, otherwise, use \[number, number] | number \| \[number, number] | - |
| vertical | If true, the slider will be vertical | boolean | false | |
## Methods

10
components/slider/index.zh-CN.md
View File

@ -20,21 +20,21 @@ cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
| defaultValue | 设置初始取值。当 `range` 为 false 时，使用 number，否则用 \[number, number] | number \| \[number, number] | 0 \| \[0, 0] | |
| disabled | 值为 true 时，滑块为禁用状态 | boolean | false | |
| dots | 是否只能拖拽到刻度上 | boolean | false | |
| getTooltipPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | |
| included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | boolean | true | |
| marks | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 \[min, max] 内，每个标签可以单独设置样式 | object | { number: ReactNode } or { number: { style: object, label: ReactNode } } | |
| max | 最大值 | number | 100 | |
| min | 最小值 | number | 0 | |
| onAfterChange | 与 `onmouseup` 触发时机一致，把当前值作为参数传入 | (value) => void | - | |
| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | (value) => void | - | |
| range | 双滑块模式 | boolean | false | |
| reverse | 反向坐标轴 | boolean | false | |
| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 null，此时 Slider 的可选值仅有 marks 标出来的部分 | number \| null | 1 | |
| tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip | value => ReactNode \| null | IDENTITY | |
| value | 设置当前取值。当 `range` 为 false 时，使用 number，否则用 \[number, number] | number \| \[number, number] | - | |
| vertical | 值为 true 时，Slider 为垂直方向 | boolean | false | |
| onAfterChange | 与 `onmouseup` 触发时机一致，把当前值作为参数传入 | (value) => void | - | |
| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | (value) => void | - | |
| tooltipPlacement | 设置 Tooltip 展示位置。参考 [Tooltip](/components/tooltip/) | string | - | |
| tooltipVisible | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时 | boolean | - | |
| getTooltipPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | |
| value | 设置当前取值。当 `range` 为 false 时，使用 number，否则用 \[number, number] | number \| \[number, number] | - | |
| vertical | 值为 true 时，Slider 为垂直方向 | boolean | false | |
## 方法

12
components/steps/index.en-US.md
View File

@ -29,16 +29,16 @@ The whole of the step bar.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| className | Additional class to Steps | string | - | |
| type | Type of steps, can be set to one of the following values: `default`, `navigation` | string | `default` | |
| current | To set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0 | |
| direction | To specify the direction of the step bar, `horizontal` or `vertical` | string | `horizontal` | |
| initial | Set the initial step, counting from 0 | number | 0 | |
| labelPlacement | Place title and description with `horizontal` or `vertical` direction | string | `horizontal` | |
| onChange | Trigger when Step is changed | (current) => void | - | |
| percent | Progress circle percentage of current step in `process` status (only works on basic Steps) | number | - | 4.5.0 |
| progressDot | Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be `vertical` | boolean \| (iconDot, {index, status, title, description}) => ReactNode | false | |
| size | To specify the size of the step bar, `default` and `small` are currently supported | string | `default` | |
| status | To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` | |
| initial | Set the initial step, counting from 0 | number | 0 | |
| onChange | Trigger when Step is changed | (current) => void | - | |
| percent | Progress circle percentage of current step in `process` status (only works on basic Steps) | number | - | 4.5.0 |
| type | Type of steps, can be set to one of the following values: `default`, `navigation` | string | `default` | |
### Steps.Step
@ -47,8 +47,8 @@ A single step in the step bar.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| description | Description of the step, optional property | ReactNode | - | |
| disabled | Disable click | boolean | false | |
| icon | Icon of the step, optional property | ReactNode | - | |
| status | To specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | string | `wait` | |
| title | Title of the step | ReactNode | - | |
| subTitle | Subtitle of the step | ReactNode | - | |
| disabled | Disable click | boolean | false | |
| title | Title of the step | ReactNode | - | |

12
components/steps/index.zh-CN.md
View File

@ -30,16 +30,16 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| className | 步骤条类名 | string | - | |
| type | 步骤条类型，有 `default` 和 `navigation` 两种 | string | `default` | |
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0 | |
| direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | string | `horizontal` | |
| initial | 起始序号，从 0 开始记数 | number | 0 | |
| labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选 `vertical` 放图标下方 | string | `horizontal` | |
| onChange | 点击切换步骤时触发 | (current) => void | - | |
| percent | 当前 `process` 步骤显示的进度条进度（只对基本类型的 Steps 生效） | number | - | 4.5.0 |
| progressDot | 点状步骤条，可以设置为一个 function，labelPlacement 将强制为 `vertical` | boolean \| (iconDot, {index, status, title, description}) => ReactNode | false | |
| size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | `default` | |
| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | `process` | |
| initial | 起始序号，从 0 开始记数 | number | 0 | |
| onChange | 点击切换步骤时触发 | (current) => void | - | |
| percent | 当前 `process` 步骤显示的进度条进度（只对基本类型的 Steps 生效） | number | - | 4.5.0 |
| type | 步骤条类型，有 `default` 和 `navigation` 两种 | string | `default` | |
### Steps.Step
@ -48,8 +48,8 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| description | 步骤的详情描述，可选 | ReactNode | - | |
| disabled | 禁用点击 | boolean | false | |
| icon | 步骤图标的类型，可选 | ReactNode | - | |
| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | `wait` | |
| title | 标题 | ReactNode | - | |
| subTitle | 子标题 | ReactNode | - | |
| disabled | 禁用点击 | boolean | false | |
| title | 标题 | ReactNode | - | |

6
components/switch/index.en-US.md
View File

@ -19,14 +19,14 @@ Switching Selector.
| autoFocus | Whether get focus when component mounted | boolean | false |
| checked | Determine whether the Switch is checked | boolean | false |
| checkedChildren | The content to be shown when the state is checked | ReactNode | - |
| className | The additional class to Switch | string | - |
| defaultChecked | Whether to set the initial state | boolean | false |
| disabled | Disable switch | boolean | false |
| loading | Loading state of switch | boolean | false |
| size | The size of the Switch, options: `default` `small` | string | `default` |
| unCheckedChildren | The content to be shown when the state is unchecked | ReactNode | - |
| onChange | Trigger when the checked state is changing | function(checked: boolean, event: Event) | - |
| onClick | Trigger when clicked | function(checked: boolean, event: Event) | - |
| className | The additional class to Switch | string | - |
| size | The size of the Switch, options: `default` `small` | string | `default` |
| unCheckedChildren | The content to be shown when the state is unchecked | ReactNode | - |
## Methods

6
components/switch/index.zh-CN.md
View File

@ -20,14 +20,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/zNdJQMhfm/Switch.svg
| autoFocus | 组件自动获取焦点 | boolean | false |
| checked | 指定当前是否选中 | boolean | false |
| checkedChildren | 选中时的内容 | ReactNode | - |
| className | Switch 器类名 | string | - |
| defaultChecked | 初始是否选中 | boolean | false |
| disabled | 是否禁用 | boolean | false |
| loading | 加载中的开关 | boolean | false |
| size | 开关大小，可选值：`default` `small` | string | `default` |
| unCheckedChildren | 非选中时的内容 | ReactNode | - |
| onChange | 变化时回调函数 | function(checked: boolean, event: Event) | - |
| onClick | 点击时回调函数 | function(checked: boolean, event: Event) | - |
| className | Switch 器类名 | string | - |
| size | 开关大小，可选值：`default` `small` | string | `default` |
| unCheckedChildren | 非选中时的内容 | ReactNode | - |
## 方法

56
components/table/index.en-US.md
View File

@ -60,31 +60,31 @@ const columns = [
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| tableLayout | The [table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) attribute of table element | - \| `auto` \| `fixed` | -<hr />`fixed` when header/columns are fixed, or using `column.ellipsis` | |
| bordered | Whether to show all table borders | boolean | false | |
| columns | Columns of table | [ColumnsType](#Column)\[] | - | |
| components | Override default table elements | [TableComponents](https://git.io/fANxz) | - | |
| dataSource | Data record array to be displayed | object\[] | - | |
| expandable | Config expandable content | [expandable](#expandable) | - | |
| footer | Table footer renderer | function(currentPageData) | - | |
| getPopupContainer | The render container of dropdowns in table | (triggerNode) => HTMLElement | () => TableHtmlElement | |
| loading | Loading status of table | boolean \| [object](/components/spin/#API) ([more](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | false | |
| locale | The i18n text including filter, sort, empty text, etc | object | filterConfirm: `Ok` <br> filterReset: `Reset` <br> emptyText: `No Data` <br> [Default](https://github.com/ant-design/ant-design/blob/4ad1ccac277782d7ed14f7e5d02d6346aae0db67/components/locale/default.tsx#L19) | |
| onChange | Callback executed when pagination, filters or sorter is changed | function(pagination, filters, sorter, extra: { currentDataSource: [], action: `paginate` \| `sort` \| `filter` }) | - | |
| onHeaderRow | Set props on per header row | function(column, index) | - | |
| onRow | Set props on per row | function(record, index) | - | |
| pagination | Config of pagination. You can ref table pagination [config](#pagination) or full [`pagination`](/components/pagination/) document, hide it by setting it to `false` | object | - | |
| rowClassName | Row's className | function(record, index): string | - | |
| rowKey | Row's unique key, could be a string or function that returns a string | string \| function(record): string | `key` | |
| rowSelection | Row selection [config](#rowSelection) | object | - | |
| scroll | Whether the table can be scrollable, [config](#scroll) | object | - | |
| showHeader | Whether to show table header | boolean | true | |
| size | Size of table | `default` \| `middle` \| `small` | `default` | |
| summary | Summary content | (currentData) => ReactNode | - | |
| title | Table title renderer | function(currentPageData) | - | |
| onChange | Callback executed when pagination, filters or sorter is changed | function(pagination, filters, sorter, extra: { currentDataSource: [], action: `paginate` \| `sort` \| `filter` }) | - | |
| onHeaderRow | Set props on per header row | function(column, index) | - | |
| onRow | Set props on per row | function(record, index) | - | |
| getPopupContainer | The render container of dropdowns in table | (triggerNode) => HTMLElement | () => TableHtmlElement | |
| sortDirections | Supported sort way, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] | |
| showSorterTooltip | The header show next sorter direction tooltip | boolean | true | |
| size | Size of table | `default` \| `middle` \| `small` | `default` | |
| sortDirections | Supported sort way, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] | |
| sticky | Set sticky header and scroll bar | boolean \| `{offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}` | - | 4.6.0 (getContainer: 4.7.0) |
| summary | Summary content | (currentData) => ReactNode | - | |
| tableLayout | The [table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) attribute of table element | - \| `auto` \| `fixed` | -<hr />`fixed` when header/columns are fixed, or using `column.ellipsis` | |
| title | Table title renderer | function(currentPageData) | - | |
#### onRow usage
@ -116,34 +116,34 @@ One of the Table `columns` prop for describing the table's columns, Column has t
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| align | The specify which way that column is aligned | `left` \| `right` \| `center` | `left` | |
| ellipsis | The ellipsis cell content, not working with sorter and filters for now.<br />tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }` | boolean \| {showTitle?: boolean } | false | showTitle: 4.3.0 |
| className | The className of this column | string | - | |
| colSpan | Span of this column's title | number | - | |
| dataIndex | Display field of the data record, support nest path by string array | string \| string\[] | - | |
| defaultFilteredValue | Default filtered values | string\[] | - | | |
| defaultSortOrder | Default order of sorted values | `ascend` \| `descend` | - | |
| ellipsis | The ellipsis cell content, not working with sorter and filters for now.<br />tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }` | boolean \| {showTitle?: boolean } | false | showTitle: 4.3.0 |
| filterDropdown | Customized filter overlay | ReactNode \| (props: [FilterDropdownProps](https://git.io/fjP5h)) => ReactNode | - | |
| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - | |
| filtered | Whether the `dataSource` is filtered | boolean | false | |
| filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - | |
| filterIcon | Customized filter icon | ReactNode \| (filtered: boolean) => ReactNode | - | |
| filterMultiple | Whether multiple filters can be selected | boolean | true | |
| filtered | Whether the `dataSource` is filtered | boolean | false | |
| filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - | |
| filters | Filter menu config | object\[] | - | |
| fixed | (IE not support) Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean \| string | false | |
| key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - | |
| onCell | Set props on per cell | function(record, rowIndex) | - | |
| onFilter | Function that determines if the row is displayed when filtered | function(value, record) => boolean | - | |
| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | function(visible) {} | - | |
| onHeaderCell | Set props on per header cell | function(column) | - | |
| render | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | function(text, record, index) {} | - | |
| responsive | The list of breakpoints at which to display this column. Always visible if not set. | [Breakpoint](https://github.com/ant-design/ant-design/blob/015109b42b85c63146371b4e32b883cf97b088e8/components/_util/responsiveObserve.ts#L1)\[] | - | 4.2.0 |
| shouldCellUpdate | Control cell render logic | (record, prevRecord) => boolean | - | 4.3.0 |
| sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | function \| boolean | - | |
| sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean \| string | - | |
| showSorterTooltip | If header show next sorter direction tooltip, override `showSorterTooltip` in table | boolean | true | |
| sortDirections | Supported sort way, override `sortDirections` in `Table`, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] | |
| sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean \| string | - | |
| sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | function \| boolean | - | |
| title | Title of this column | ReactNode \| ({ sortOrder, sortColumn, filters }) => ReactNode | - | |
| width | Width of this column ([width not working?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)) | string \| number | - | |
| onCell | Set props on per cell | function(record, rowIndex) | - | |
| onFilter | Function that determines if the row is displayed when filtered | function(value, record) => boolean | - | |
| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | function(visible) {} | - | |
| onHeaderCell | Set props on per header cell | function(column) | - | |
| showSorterTooltip | If header show next sorter direction tooltip, override `showSorterTooltip` in table | boolean | true | |
### ColumnGroup
@ -172,14 +172,14 @@ Properties for expandable.
| defaultExpandedRowKeys | Initial expanded row keys | string\[] | - |
| expandIcon | Customize row expand Icon. Ref [example](https://codesandbox.io/s/fervent-bird-nuzpr) | function(props): ReactNode | - |
| expandIconColumnIndex | Customize expand icon column index. Not render when `-1` | number | - |
| expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | false |
| expandedRowClassName | Expanded row's className | function(record, index, indent): string | - |
| expandedRowKeys | Current expanded row keys | string\[] | - |
| expandedRowRender | Expanded container render for each row | function(record, index, indent, expanded): ReactNode | - |
| expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | false |
| indentSize | Indent size in pixels of tree data | number | 15 |
| rowExpandable | Enable row can be expandable | (record) => boolean | - |
| onExpand | Callback executed when the row expand icon is clicked | function(expanded, record) | - |
| onExpandedRowsChange | Callback executed when the expanded rows change | function(expandedRows) | - |
| rowExpandable | Enable row can be expandable | (record) => boolean | - |
### rowSelection
@ -188,36 +188,36 @@ Properties for row selection.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| checkStrictly | Check table row precisely; parent row and children rows are not associated | boolean | true | 4.4.0 |
| columnWidth | Set the width of the selection column | string \| number | `60px` | |
| columnTitle | Set the title of the selection column | ReactNode | - | |
| columnWidth | Set the width of the selection column | string \| number | `60px` | |
| fixed | Fixed selection column on the left | boolean | - | |
| getCheckboxProps | Get Checkbox or Radio props | function(record) | - | |
| hideSelectAll | Hide the selectAll checkbox and custom selection | boolean | false | 4.3.0 |
| onChange | Callback executed when selected rows change | function(selectedRowKeys, selectedRows) | - | |
| onSelect | Callback executed when select/deselect one row | function(record, selected, selectedRows, nativeEvent) | - | |
| onSelectAll | Callback executed when select/deselect all rows | function(selected, selectedRows, changeRows) | - | |
| onSelectInvert | Callback executed when row selection is inverted | function(selectedRowKeys) | - | |
| preserveSelectedRowKeys | Keep selection `key` even when it removed from `dataSource` | boolean | - | 4.4.0 |
| renderCell | Renderer of the table cell. Same as `render` in column | function(checked, record, index, originNode) {} | - | 4.1.0 |
| selectedRowKeys | Controlled selected row keys | string\[] \| number[] | \[] | |
| selections | Custom selection [config](#rowSelection), only displays default selections when set to `true` | object\[] \| boolean | - | |
| type | `checkbox` or `radio` | `checkbox` \| `radio` | `checkbox` | |
| onChange | Callback executed when selected rows change | function(selectedRowKeys, selectedRows) | - | |
| onSelect | Callback executed when select/deselect one row | function(record, selected, selectedRows, nativeEvent) | - | |
| onSelectAll | Callback executed when select/deselect all rows | function(selected, selectedRows, changeRows) | - | |
| onSelectInvert | Callback executed when row selection is inverted | function(selectedRowKeys) | - | |
### scroll
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| scrollToFirstRowOnChange | Whether to scroll to the top of the table when paging, sorting, filtering changes | boolean | - |
| x | Set horizontal scrolling, can also be used to specify the width of the scroll area, could be number, percent value, true and ['max-content'](https://developer.mozilla.org/zh-CN/docs/Web/CSS/width#max-content) | number \| true | - |
| y | Set vertical scrolling, can also be used to specify the height of the scroll area, could be number | number | - |
| scrollToFirstRowOnChange | Whether to scroll to the top of the table when paging, sorting, filtering changes | boolean | - |
### selection
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| key | Unique key of this selection | string | - |
| text | Display text of this selection | ReactNode | - |
| onSelect | Callback executed when this selection is clicked | function(changeableRowKeys) | - |
| text | Display text of this selection | ReactNode | - |
## Using in TypeScript

58
components/table/index.zh-CN.md
View File

@ -67,31 +67,31 @@ const columns = [
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| tableLayout | 表格元素的 [table-layout](https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout) 属性，设为 `fixed` 表示内容不会影响列的布局 | - \| `auto` \| `fixed` | 无<hr />固定表头/列或使用了 `column.ellipsis` 时，默认值为 `fixed` | |
| bordered | 是否展示外边框和列边框 | boolean | false | |
| columns | 表格列的配置描述，具体项见下表 | [ColumnsType](#Column)\[] | - | |
| components | 覆盖默认的 table 元素 | [TableComponents](https://git.io/fANxz) | - | |
| dataSource | 数据数组 | object\[] | - | |
| expandable | 配置展开属性 | [expandable](#expandable) | - | |
| footer | 表格尾部 | function(currentPageData) | - | |
| getPopupContainer | 设置表格内各类浮层的渲染节点，如筛选菜单 | (triggerNode) => HTMLElement | () => TableHtmlElement | |
| loading | 页面是否加载中 | boolean \| [object](/components/spin/#API) ([更多](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | false | |
| locale | 默认文案设置，目前包括排序、过滤、空数据文案 | object | filterConfirm: `确定` <br> filterReset: `重置` <br> emptyText: `暂无数据` <br> [默认值](https://github.com/ant-design/ant-design/blob/4ad1ccac277782d7ed14f7e5d02d6346aae0db67/components/locale/default.tsx#L19) | |
| onChange | 分页、排序、筛选变化时触发 | function(pagination, filters, sorter, extra: { currentDataSource: [], action: `paginate` \| `sort` \| `filter` }) | - | |
| onHeaderRow | 设置头部行属性 | function(column, index) | - | |
| onRow | 设置行属性 | function(record, index) | - | |
| pagination | 分页器，参考[配置项](#pagination)或 [pagination](/components/pagination/) 文档，设为 false 时不展示和进行分页 | object | - | |
| rowClassName | 表格行的类名 | function(record, index): string | - | |
| rowKey | 表格行 key 的取值，可以是字符串或一个函数 | string \| function(record): string | `key` | |
| rowSelection | 表格行是否可选择，[配置项](#rowSelection) | object | - | |
| scroll | 表格是否可滚动，也可以指定滚动区域的宽、高，[配置项](#scroll) | object | - | |
| showHeader | 是否显示表头 | boolean | true | |
| size | 表格大小 | `default` \| `middle` \| `small` | default | |
| summary | 总结栏 | (currentData) => ReactNode | - | |
| title | 表格标题 | function(currentPageData) | - | |
| onChange | 分页、排序、筛选变化时触发 | function(pagination, filters, sorter, extra: { currentDataSource: [], action: `paginate` \| `sort` \| `filter` }) | - | |
| onHeaderRow | 设置头部行属性 | function(column, index) | - | |
| onRow | 设置行属性 | function(record, index) | - | |
| getPopupContainer | 设置表格内各类浮层的渲染节点，如筛选菜单 | (triggerNode) => HTMLElement | () => TableHtmlElement | |
| sortDirections | 支持的排序方式，取值为 `ascend` `descend` | Array | \[`ascend`, `descend`] | |
| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示 | boolean | true | |
| size | 表格大小 | `default` \| `middle` \| `small` | default | |
| sortDirections | 支持的排序方式，取值为 `ascend` `descend` | Array | \[`ascend`, `descend`] | |
| sticky | 设置粘性头部和滚动条 | boolean \| `{offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}` | - | 4.6.0 (getContainer: 4.7.0) |
| summary | 总结栏 | (currentData) => ReactNode | - | |
| tableLayout | 表格元素的 [table-layout](https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout) 属性，设为 `fixed` 表示内容不会影响列的布局 | - \| `auto` \| `fixed` | 无<hr />固定表头/列或使用了 `column.ellipsis` 时，默认值为 `fixed` | |
| title | 表格标题 | function(currentPageData) | - | |
#### onRow 用法
@ -123,34 +123,34 @@ const columns = [
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| align | 设置列的对齐方式 | `left` \| `right` \| `center` | `left` | |
| ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。<br />设置为 `true` 或 `{ showTitle?: boolean }` 时，表格布局将变成 `tableLayout="fixed"`。 | boolean \| { showTitle?: boolean } | false | showTitle: 4.3.0 |
| className | 列样式类名 | string | - | |
| colSpan | 表头列合并,设置为 0 时，不渲染 | number | - | |
| dataIndex | 列数据在数据项中对应的路径，支持通过数组查询嵌套路径 | string \| string\[] | - | |
| defaultFilteredValue | 默认筛选值 | string\[] | - | |
| defaultSortOrder | 默认排序顺序 | `ascend` \| `descend` | - | |
| ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。<br />设置为 `true` 或 `{ showTitle?: boolean }` 时，表格布局将变成 `tableLayout="fixed"`。 | boolean \| { showTitle?: boolean } | false | showTitle: 4.3.0 |
| filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | ReactNode \| (props: [FilterDropdownProps](https://git.io/fjP5h)) => ReactNode | - | |
| filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - | |
| filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false | |
| filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string\[] | - | |
| filterIcon | 自定义 filter 图标。 | ReactNode \| (filtered: boolean) => ReactNode | false | |
| filterMultiple | 是否多选 | boolean | true | |
| filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false | |
| filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string\[] | - | |
| filters | 表头的筛选菜单项 | object\[] | - | |
| fixed | （IE 下无效）列是否固定，可选 true (等效于 left) `left` `right` | boolean \| string | false | |
| key | React 需要的 key，如果已经设置了唯一的 `dataIndex`，可以忽略这个属性 | string | - | |
| render | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return 里面可以设置表格[行/列合并](#components-table-demo-colspan-rowspan) | function(text, record, index) {} | - | |
| responsive | 响应式 breakpoint 配置列表。未设置则始终可见。 | [Breakpoint](https://github.com/ant-design/ant-design/blob/015109b42b85c63146371b4e32b883cf97b088e8/components/_util/responsiveObserve.ts#L1)\[] | - | 4.2.0 |
| shouldCellUpdate | 自定义单元格渲染时机 | (record, prevRecord) => boolean | - | 4.3.0 |
| sorter | 排序函数，本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction)，需要服务端排序可设为 true | function \| boolean | - | |
| sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 `ascend` `descend` false | boolean \| string | - | |
| sortDirections | 支持的排序方式，覆盖`Table`中`sortDirections`， 取值为 `ascend` `descend` | Array | \[`ascend`, `descend`] | |
| title | 列头显示文字（函数用法 `3.10.0` 后支持） | ReactNode \| ({ sortOrder, sortColumn, filters }) => ReactNode | - | |
| width | 列宽度（[指定了也不生效？](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)） | string \| number | - | |
| onCell | 设置单元格属性 | function(record, rowIndex) | - | |
| onFilter | 本地模式下，确定筛选的运行函数 | function | - | |
| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - | |
| onHeaderCell | 设置头部单元格属性 | function(column) | - | |
| render | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return 里面可以设置表格[行/列合并](#components-table-demo-colspan-rowspan) | function(text, record, index) {} | - | |
| responsive | 响应式 breakpoint 配置列表。未设置则始终可见。 | [Breakpoint](https://github.com/ant-design/ant-design/blob/015109b42b85c63146371b4e32b883cf97b088e8/components/_util/responsiveObserve.ts#L1)\[] | - | 4.2.0 |
| shouldCellUpdate | 自定义单元格渲染时机 | (record, prevRecord) => boolean | - | 4.3.0 |
| showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中`showSorterTooltip` | boolean | true | |
| sortDirections | 支持的排序方式，覆盖`Table`中`sortDirections`， 取值为 `ascend` `descend` | Array | \[`ascend`, `descend`] | |
| sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 `ascend` `descend` false | boolean \| string | - | |
| sorter | 排序函数，本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction)，需要服务端排序可设为 true | function \| boolean | - | |
| title | 列头显示文字（函数用法 `3.10.0` 后支持） | ReactNode \| ({ sortOrder, sortColumn, filters }) => ReactNode | - | |
| width | 列宽度（[指定了也不生效？](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)） | string \| number | - | |
### ColumnGroup
@ -179,14 +179,14 @@ const columns = [
| defaultExpandedRowKeys | 默认展开的行 | string\[] | - |
| expandIcon | 自定义展开图标，参考[示例](https://codesandbox.io/s/fervent-bird-nuzpr) | function(props): ReactNode | - |
| expandIconColumnIndex | 自定义展开按钮的列顺序，`-1` 时不展示 | number | - |
| expandRowByClick | 通过点击行来展开子行 | boolean | false |
| expandedRowClassName | 展开行的 className | function(record, index, indent): string | - |
| expandedRowKeys | 展开的行，控制属性 | string\[] | - |
| expandedRowRender | 额外的展开行 | function(record, index, indent, expanded): ReactNode | - |
| expandRowByClick | 通过点击行来展开子行 | boolean | false |
| indentSize | 展示树形数据时，每层缩进的宽度，以 px 为单位 | number | 15 |
| rowExpandable | 设置是否允许行展开 | (record) => boolean | - |
| onExpand | 点击展开图标时触发 | function(expanded, record) | - |
| onExpandedRowsChange | 展开的行变化时触发 | function(expandedRows) | - |
| rowExpandable | 设置是否允许行展开 | (record) => boolean | - |
### rowSelection
@ -195,36 +195,36 @@ const columns = [
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| checkStrictly | checkable 状态下节点选择完全受控（父子数据选中状态不再关联） | boolean | true | 4.4.0 |
| columnWidth | 自定义列表选择框宽度 | string \| number | `60px` | |
| columnTitle | 自定义列表选择框标题 | ReactNode | - | |
| columnWidth | 自定义列表选择框宽度 | string \| number | `60px` | |
| fixed | 把选择框列固定在左边 | boolean | - | |
| getCheckboxProps | 选择框的默认属性配置 | function(record) | - | |
| hideSelectAll | 隐藏全选勾选框与自定义选择项 | boolean | false | 4.3.0 |
| onChange | 选中项发生变化时的回调 | function(selectedRowKeys, selectedRows) | - | |
| onSelect | 用户手动选择/取消选择某行的回调 | function(record, selected, selectedRows, nativeEvent) | - | |
| onSelectAll | 用户手动选择/取消选择所有行的回调 | function(selected, selectedRows, changeRows) | - | |
| onSelectInvert | 用户手动选择反选的回调 | function(selectedRowKeys) | - | |
| preserveSelectedRowKeys | 当数据被删除时仍然保留选项的 `key` | boolean | - | 4.4.0 |
| renderCell | 渲染勾选框，用法与 Column 的 `render` 相同 | function(checked, record, index, originNode) {} | - | 4.1.0 |
| selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | string\[] \| number[] | \[] | |
| selections | 自定义选择项 [配置项](#selection), 设为 `true` 时使用默认选择项 | object\[] \| boolean | true | |
| type | 多选/单选，`checkbox` or `radio` | string | `checkbox` | |
| onChange | 选中项发生变化时的回调 | function(selectedRowKeys, selectedRows) | - | |
| onSelect | 用户手动选择/取消选择某行的回调 | function(record, selected, selectedRows, nativeEvent) | - | |
| onSelectAll | 用户手动选择/取消选择所有行的回调 | function(selected, selectedRows, changeRows) | - | |
| onSelectInvert | 用户手动选择反选的回调 | function(selectedRowKeys) | - | |
### scroll
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| scrollToFirstRowOnChange | 当分页、排序、筛选变化后是否滚动到表格顶部 | boolean | - |
| x | 设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比，true 和 ['max-content'](https://developer.mozilla.org/zh-CN/docs/Web/CSS/width#max-content) | number \| true | - |
| y | 设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值 | number | - |
| scrollToFirstRowOnChange | 当分页、排序、筛选变化后是否滚动到表格顶部 | boolean | - |
### selection
| 参数 | 说明 | 类型 | 默认值 |
| -------- | -------------------------- | --------------------------- | ------ |
| key | React 需要的 key，建议设置 | string | - |
| text | 选择项显示的文字 | ReactNode | - |
| onSelect | 选择项点击回调 | function(changeableRowKeys) | - |
| text | 选择项显示的文字 | ReactNode | - |
## 在 TypeScript 中使用

18
components/tabs/index.en-US.md
View File

@ -22,24 +22,24 @@ Ant Design has 3 types of Tabs for different situations.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| addIcon | Customize add icon | ReactNode | - | 4.4.0 |
| activeKey | Current TabPane's key | string | - | |
| addIcon | Customize add icon | ReactNode | - | 4.4.0 |
| animated | Whether to change tabs with animation. Only works while `tabPosition="top" | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` | |
| renderTabBar | Replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
| centered | Centers tabs | boolean | false | 4.4.0 |
| defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | - | |
| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false | |
| keyboard | Whether to turn on keyboard navigation | boolean | true | |
| onChange | Callback executed when active tab is changed | function(activeKey) {} | - | |
| onEdit | Callback executed when tab is added or removed. Only works while `type="editable-card"` | (targetKey, action) => void | - | |
| onTabClick | Callback executed when tab is clicked | function(key: string, event: MouseEvent) | - | |
| onTabScroll | Trigger when tab scroll | function({ direction: `left` \| `right` \| `top` \| `bottom` }) | - | 4.3.0 |
| renderTabBar | Replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
| size | Preset tab bar size | `large` \| `default` \| `small` | `default` | |
| centered | Centers tabs | boolean | false | 4.4.0 |
| tabBarExtraContent | Extra content in tab bar | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | |
| tabBarGutter | The gap between tabs | number | - | |
| tabBarStyle | Tab bar style object | object | - | |
| tabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` | |
| type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` | |
| onChange | Callback executed when active tab is changed | function(activeKey) {} | - | |
| onEdit | Callback executed when tab is added or removed. Only works while `type="editable-card"` | (targetKey, action) => void | - | |
| onTabClick | Callback executed when tab is clicked | function(key: string, event: MouseEvent) | - | |
| onTabScroll | Trigger when tab scroll | function({ direction: `left` \| `right` \| `top` \| `bottom` }) | - | 4.3.0 |
| keyboard | Whether to turn on keyboard navigation | boolean | true | |
More option at [rc-tabs option](https://github.com/react-component/tabs#tabs)
@ -47,9 +47,9 @@ More option at [rc-tabs option](https://github.com/react-component/tabs#tabs)
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| closeIcon | Customize close icon in TabPane's head. Only works while `type="editable-card"` | ReactNode | - |
| forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false |
| key | TabPane's key | string | - |
| tab | Show text in TabPane's head | ReactNode | - |
| closeIcon | Customize close icon in TabPane's head. Only works while `type="editable-card"` | ReactNode | - |
More option at [rc-tabs option](https://github.com/react-component/tabs#tabpane)

18
components/tabs/index.zh-CN.md
View File

@ -25,30 +25,30 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| addIcon | 自定义添加按钮 | ReactNode | - | 4.4.0 |
| activeKey | 当前激活 tab 面板的 key | string | - | |
| addIcon | 自定义添加按钮 | ReactNode | - | 4.4.0 |
| animated | 是否使用动画切换 Tabs，在 `tabPosition="top" | "bottom"` 时有效 | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` | |
| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
| centered | 标签居中展示 | boolean | false | 4.4.0 |
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` | |
| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | |
| keyboard | 开启键盘切换功能 | boolean | true | |
| onChange | 切换面板的回调 | function(activeKey) {} | - | |
| onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void | - | |
| onTabClick | tab 被点击的回调 | function(key: string, event: MouseEvent) | - | |
| onTabScroll | tab 滚动时触发 | function({ direction: `left` \| `right` \| `top` \| `bottom` }) | - | 4.3.0 |
| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
| size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | `default` | |
| centered | 标签居中展示 | boolean | false | 4.4.0 |
| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | |
| tabBarGutter | tabs 之间的间隙 | number | - | |
| tabBarStyle | tab bar 的样式对象 | object | - | |
| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | `top` | |
| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | `line` | |
| onChange | 切换面板的回调 | function(activeKey) {} | - | |
| onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void | - | |
| onTabClick | tab 被点击的回调 | function(key: string, event: MouseEvent) | - | |
| onTabScroll | tab 滚动时触发 | function({ direction: `left` \| `right` \| `top` \| `bottom` }) | - | 4.3.0 |
| keyboard | 开启键盘切换功能 | boolean | true | |
### Tabs.TabPane
| 参数 | 说明 | 类型 | 默认值 |
| ----------- | ----------------------------------------------- | --------- | ------ |
| closeIcon | 自定义关闭图标，`在 type="editable-card"`时有效 | ReactNode | - |
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
| key | 对应 activeKey | string | - |
| tab | 选项卡头显示文字 | ReactNode | - |
| closeIcon | 自定义关闭图标，`在 type="editable-card"`时有效 | ReactNode | - |

4
components/tag/index.en-US.md
View File

@ -20,11 +20,11 @@ Tag for categorizing or markup.
| Property | Description | Type | Default | Version |
| --------- | ------------------------------------ | ----------- | ------- | ------- |
| closable | Whether the Tag can be closed | boolean | false | |
| color | Color of the Tag | string | - | |
| closeIcon | Custom close icon | ReactNode | - | 4.4.0 |
| color | Color of the Tag | string | - | |
| icon | Set the icon of tag | ReactNode | - | |
| onClose | Callback executed when tag is closed | (e) => void | - | |
| visible | Whether the Tag is closed or not | boolean | true | |
| icon | Set the icon of tag | ReactNode | - | |
### Tag.CheckableTag

4
components/tag/index.zh-CN.md
View File

@ -20,11 +20,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/cH1BOLfxC/Tag.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --------- | ---------------- | ----------- | ------ | ----- |
| closable | 标签是否可以关闭 | boolean | false | |
| color | 标签色 | string | - | |
| closeIcon | 自定义关闭按钮 | ReactNode | - | 4.4.0 |
| color | 标签色 | string | - | |
| icon | 设置图标 | ReactNode | - | |
| onClose | 关闭时的回调 | (e) => void | - | |
| visible | 是否显示标签 | boolean | true | |
| icon | 设置图标 | ReactNode | - | |
### Tag.CheckableTag

16
components/time-picker/index.en-US.md
View File

@ -29,6 +29,7 @@ import moment from 'moment';
| autoFocus | If get focus when component mounted | boolean | false | |
| bordered | Whether has border style | boolean | true | |
| className | The className of picker | string | - | |
| clearIcon | The custom clear icon | ReactNode | - | |
| clearText | The clear tooltip of icon | string | clear | |
| defaultValue | To set default time | [moment](http://momentjs.com/) | - | |
| disabled | Determine whether the TimePicker is disabled | boolean | false | |
@ -41,20 +42,19 @@ import moment from 'moment';
| hourStep | Interval between hours in picker | number | 1 | |
| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | |
| minuteStep | Interval between minutes in picker | number | 1 | |
| onChange | A callback function, can be executed when the selected time is changing | function(time: moment, timeString: string): void | - | |
| onOpenChange | A callback function which will be called while panel opening/closing | (open: boolean) => void | - | |
| onSelect | A callback function, executes when a value is selected | function(time: moment): void | - | |
| open | Whether to popup panel | boolean | false | |
| placeholder | Display when there's no value | string \| \[string, string] | `Select a time` | |
| popupClassName | The className of panel | string | - | |
| popupStyle | The style of panel | CSSProperties | - | |
| secondStep | Interval between seconds in picker | number | 1 | |
| suffixIcon | The custom suffix icon | ReactNode | - | |
| clearIcon | The custom clear icon | ReactNode | - | |
| use12Hours | Display as 12 hours format, with default format `h:mm:ss a` | boolean | false | |
| renderExtraFooter | Called from time picker panel to render some addon to its bottom | () => ReactNode | - | |
| value | To set time | [moment](http://momentjs.com/) | - | |
| onChange | A callback function, can be executed when the selected time is changing | function(time: moment, timeString: string): void | - | |
| onOpenChange | A callback function which will be called while panel opening/closing | (open: boolean) => void | - | |
| onSelect | A callback function, executes when a value is selected | function(time: moment): void | - | |
| secondStep | Interval between seconds in picker | number | 1 | |
| showNow | Whether to show `Now` button on panel | boolean | - | 4.4.0 |
| suffixIcon | The custom suffix icon | ReactNode | - | |
| use12Hours | Display as 12 hours format, with default format `h:mm:ss a` | boolean | false | |
| value | To set time | [moment](http://momentjs.com/) | - | |
## Methods

12
components/time-picker/index.zh-CN.md
View File

@ -29,6 +29,7 @@ import moment from 'moment';
| autoFocus | 自动获取焦点 | boolean | false | |
| bordered | 是否有边框 | boolean | true | |
| className | 选择器类名 | string | - | |
| clearIcon | 自定义的清除图标 | ReactNode | - | |
| clearText | 清除按钮的提示文案 | string | clear | |
| defaultValue | 默认时间 | [moment](http://momentjs.com/) | - | |
| disabled | 禁用全部操作 | boolean | false | |
@ -41,19 +42,18 @@ import moment from 'moment';
| hourStep | 小时选项间隔 | number | 1 | |
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
| minuteStep | 分钟选项间隔 | number | 1 | |
| onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | - | |
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - | |
| open | 面板是否打开 | boolean | false | |
| placeholder | 没有值的时候显示的内容 | string \| \[string, string] | `请选择时间` | |
| popupClassName | 弹出层类名 | string | - | |
| popupStyle | 弹出层样式对象 | object | - | |
| secondStep | 秒选项间隔 | number | 1 | |
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
| clearIcon | 自定义的清除图标 | ReactNode | - | |
| renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - | |
| secondStep | 秒选项间隔 | number | 1 | |
| showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
| use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false | |
| value | 当前时间 | [moment](http://momentjs.com/) | - | |
| onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | - | |
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - | |
| showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
## 方法

4
components/timeline/index.en-US.md
View File

@ -29,10 +29,10 @@ Timeline
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| mode | By sending `alternate` the timeline will distribute the nodes to the left and right | `left` \| `alternate` \| `right` | - |
| pending | Set the last ghost node's existence or its content | boolean \| ReactNode | false |
| pendingDot | Set the dot of the last ghost node when pending is true | ReactNode | &lt;LoadingOutlined /> |
| reverse | Whether reverse nodes or not | boolean | false |
| mode | By sending `alternate` the timeline will distribute the nodes to the left and right | `left` \| `alternate` \| `right` | - |
### Timeline.Item
@ -42,5 +42,5 @@ Node of timeline
| --- | --- | --- | --- |
| color | Set the circle's color to `blue`, `red`, `green`, `gray` or other custom colors | string | `blue` |
| dot | Customize timeline dot | ReactNode | - |
| position | Customize node position | `left` \| `right` | - |
| label | Set the label | ReactNode | - |
| position | Customize node position | `left` \| `right` | - |

4
components/timeline/index.zh-CN.md
View File

@ -30,10 +30,10 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/vJmo00mmgR/Timeline.svg
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| mode | 通过设置 `mode` 可以改变时间轴和内容的相对位置 | `left` \| `alternate` \| `right` | - |
| pending | 指定最后一个幽灵节点是否存在或内容 | boolean \| ReactNode | false |
| pendingDot | 当最后一个幽灵节点存在時，指定其时间图点 | ReactNode | &lt;LoadingOutlined /> |
| reverse | 节点排序 | boolean | false |
| mode | 通过设置 `mode` 可以改变时间轴和内容的相对位置 | `left` \| `alternate` \| `right` | - |
### Timeline.Item
@ -43,5 +43,5 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/vJmo00mmgR/Timeline.svg
| --- | --- | --- | --- |
| color | 指定圆圈颜色 `blue`, `red`, `green`, `gray`，或自定义的色值 | string | `blue` |
| dot | 自定义时间轴点 | ReactNode | - |
| position | 自定义节点位置 | `left` \| `right` | - |
| label | 设置标签 | ReactNode | - |
| position | 自定义节点位置 | `left` \| `right` | - |

8
components/tooltip/index.en-US.md
View File

@ -24,21 +24,21 @@ The following APIs are shared by Tooltip, Popconfirm, Popover.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| align | This value will be merged into placement's config, please refer to the settings [rc-tooltip](https://github.com/react-component/tooltip) | object | - | |
| arrowPointAtCenter | Whether the arrow is pointed at the center of target | boolean | false | |
| autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | true | |
| defaultVisible | Whether the floating tooltip card is visible by default | boolean | false | |
| color | The background color | string | - | 4.3.0 |
| defaultVisible | Whether the floating tooltip card is visible by default | boolean | false | |
| destroyTooltipOnHide | Whether destroy tooltip when hidden, parent container of tooltip will be destroyed when `keepParent` is false | boolean \| { keepParent?: boolean } | false | |
| getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body` | function(triggerNode) | () => document.body | |
| mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0.1 | |
| mouseLeaveDelay | Delay in seconds, before tooltip is hidden on mouse leave | number | 0.1 | |
| onVisibleChange | Callback executed when visibility of the tooltip card is changed | (visible) => void | - | |
| overlayClassName | Class name of the tooltip card | string | - | |
| overlayStyle | Style of the tooltip card | object | - | |
| placement | The position of the tooltip relative to the target, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` | |
| trigger | Tooltip trigger mode. Could be multiple by passing an array | `hover` \| `focus` \| `click` \| `contextMenu` \| Array&lt;string> | `hover` | |
| visible | Whether the floating tooltip card is visible or not | boolean | false | |
| onVisibleChange | Callback executed when visibility of the tooltip card is changed | (visible) => void | - | |
| align | This value will be merged into placement's config, please refer to the settings [rc-tooltip](https://github.com/react-component/tooltip) | object | - | |
| destroyTooltipOnHide | Whether destroy tooltip when hidden, parent container of tooltip will be destroyed when `keepParent` is false | boolean \| { keepParent?: boolean } | false | |
## Note

8
components/tooltip/index.zh-CN.md
View File

@ -26,21 +26,21 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| align | 该值将合并到 placement 的配置中，设置参考 [rc-tooltip](https://github.com/react-component/tooltip) | object | - | |
| arrowPointAtCenter | 箭头是否指向目标元素中心 | boolean | false | |
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
| defaultVisible | 默认是否显隐 | boolean | false | |
| color | 背景颜色 | string | - | 4.3.0 |
| defaultVisible | 默认是否显隐 | boolean | false | |
| destroyTooltipOnHide | 关闭后是否销毁 Tooltip，当 `keepParent` 为 `false` 时销毁父容器 | boolean \| { keepParent?: boolean } | false | |
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | function(triggerNode) | () => document.body | |
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 | |
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | |
| onVisibleChange | 显示隐藏的回调 | (visible) => void | - | |
| overlayClassName | 卡片类名 | string | - | |
| overlayStyle | 卡片样式 | object | - | |
| placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` | |
| trigger | 触发行为，可选 `hover` \| `focus` \| `click` \| `contextMenu`，可使用数组设置多个触发行为 | string \| string[] | `hover` | |
| visible | 用于手动控制浮层显隐 | boolean | false | |
| onVisibleChange | 显示隐藏的回调 | (visible) => void | - | |
| align | 该值将合并到 placement 的配置中，设置参考 [rc-tooltip](https://github.com/react-component/tooltip) | object | - | |
| destroyTooltipOnHide | 关闭后是否销毁 Tooltip，当 `keepParent` 为 `false` 时销毁父容器 | boolean \| { keepParent?: boolean } | false | |
## 注意

12
components/transfer/index.en-US.md
View File

@ -27,21 +27,21 @@ One or more elements can be selected from either column, one click on the proper
| footer | A function used for rendering the footer | (props) => ReactNode | - | |
| listStyle | A custom CSS style used for rendering the transfer columns | object \| ({direction: `left` \| `right`}) => object | - | |
| locale | The i18n text including filter, empty text, item unit, etc | { itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode; } | { itemUnit: `item`, itemsUnit: `items`, notFoundContent: `The list is empty`, searchPlaceholder: `Search here` } | |
| operations | A set of operations that are sorted from top to bottom | string\[] | \[`>`, `<`] | |
| onChange | A callback function that is executed when the transfer between columns is complete | (targetKeys, direction, moveKeys): void | - | |
| onScroll | A callback function which is executed when scroll options list | (direction, event): void | - | |
| onSearch | A callback function which is executed when search field are changed | (direction: `left` \| `right`, value: string): void | - | |
| onSelectChange | A callback function which is executed when selected items are changed | (sourceSelectedKeys, targetSelectedKeys): void | - | |
| oneWay | Display as single direction style | boolean | false | 4.3.0 |
| operationStyle | A custom CSS style used for rendering the operations column | object | - | |
| operations | A set of operations that are sorted from top to bottom | string\[] | \[`>`, `<`] | |
| pagination | Use pagination. Not work in render props | boolean \| { pageSize: number } | false | 4.3.0 |
| render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a React element which is generated from that record. Also, it can return a plain object with `value` and `label`, `label` is a React element and `value` is for title | (record) => ReactNode | - | |
| selectAllLabels | A set of customized labels for select all checkboxs on the header | (ReactNode \| (info: { selectedCount: number, totalCount: number }) => ReactNode)[] | - | |
| selectedKeys | A set of keys of selected items | string\[] | \[] | |
| showSearch | If included, a search box is shown on each column | boolean | false | |
| showSelectAll | Show select all checkbox on the header | boolean | true | |
| targetKeys | A set of keys of elements that are listed on the right column | string\[] | \[] | |
| titles | A set of titles that are sorted from left to right | ReactNode\[] | - | |
| selectAllLabels | A set of customized labels for select all checkboxs on the header | (ReactNode \| (info: { selectedCount: number, totalCount: number }) => ReactNode)[] | - | |
| onChange | A callback function that is executed when the transfer between columns is complete | (targetKeys, direction, moveKeys): void | - | |
| onScroll | A callback function which is executed when scroll options list | (direction, event): void | - | |
| onSearch | A callback function which is executed when search field are changed | (direction: `left` \| `right`, value: string): void | - | |
| onSelectChange | A callback function which is executed when selected items are changed | (sourceSelectedKeys, targetSelectedKeys): void | - | |
### Render Props

10
components/transfer/index.zh-CN.md
View File

@ -30,20 +30,20 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QAXskNI4G/Transfer.svg
| footer | 底部渲染函数 | (props) => ReactNode | - | |
| listStyle | 两个穿梭框的自定义样式 | object\|({direction: `left` \| `right`}) => object | - | |
| locale | 各种语言 | { itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode; } | { itemUnit: `项`, itemsUnit: `项`, searchPlaceholder: `请输入搜索内容` } | |
| onChange | 选项在两栏之间转移时的回调函数 | (targetKeys, direction, moveKeys): void | - | |
| onScroll | 选项列表滚动时的回调函数 | (direction, event): void | - | |
| onSearch | 搜索框内容时改变时的回调函数 | (direction: `left` \| `right`, value: string): void | - | |
| onSelectChange | 选中项发生改变时的回调函数 | (sourceSelectedKeys, targetSelectedKeys): void | - | |
| oneWay | 展示为单向样式 | boolean | false | 4.3.0 |
| operations | 操作文案集合，顺序从上至下 | string\[] | \[`>`, `<`] | |
| pagination | 使用分页样式，自定义渲染列表下无效 | boolean \| { pageSize: number } | false | 4.3.0 |
| render | 每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 ReactElement。或者返回一个普通对象，其中 `label` 字段为 ReactElement，`value` 字段为 title | (record) => ReactNode | - | |
| selectAllLabels | 自定义顶部多选框标题的集合 | (ReactNode \| (info: { selectedCount: number, totalCount: number }) => ReactNode)[] | - | |
| selectedKeys | 设置哪些项应该被选中 | string\[] | \[] | |
| showSearch | 是否显示搜索框 | boolean | false | |
| showSelectAll | 是否展示全选勾选框 | boolean | true | |
| targetKeys | 显示在右侧框数据的 key 集合 | string\[] | \[] | |
| titles | 标题集合，顺序从左至右 | ReactNode\[] | - | |
| selectAllLabels | 自定义顶部多选框标题的集合 | (ReactNode \| (info: { selectedCount: number, totalCount: number }) => ReactNode)[] | - | |
| onChange | 选项在两栏之间转移时的回调函数 | (targetKeys, direction, moveKeys): void | - | |
| onScroll | 选项列表滚动时的回调函数 | (direction, event): void | - | |
| onSearch | 搜索框内容时改变时的回调函数 | (direction: `left` \| `right`, value: string): void | - | |
| onSelectChange | 选中项发生改变时的回调函数 | (sourceSelectedKeys, targetSelectedKeys): void | - | |
### Render Props

18
components/tree-select/index.en-US.md
View File

@ -34,30 +34,30 @@ Tree selection control.
| maxTagCount | Max tag count to show | number | - | |
| maxTagPlaceholder | Placeholder for not showing tags | ReactNode \| function(omittedValues) | - | |
| multiple | Support multiple or not, will be `true` when enable `treeCheckable` | boolean | false | |
| onChange | A callback function, can be executed when selected treeNodes or input value change | function(value, label, extra) | - | |
| onSearch | A callback function, can be executed when the search input changes | function(value: string) | - | |
| onSelect | A callback function, can be executed when you select a treeNode | function(value, node, extra) | - | |
| onTreeExpand | A callback function, can be executed when treeNode expanded | function(expandedKeys) | - | |
| placeholder | Placeholder of the select input | string | - | |
| searchValue | Work with `onSearch` to make search value controlled | string | - | |
| treeIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false | |
| switcherIcon | customize collapse \| expand icon of tree node | ReactNode | - |
| showArrow | Whether to show the `suffixIcon`，when single selection mode, default `true` | boolean | - | |
| showCheckedStrategy | The way show selected item in box. **Default:** just show child nodes. **`TreeSelect.SHOW_ALL`:** show all checked treeNodes (include parent treeNode). **`TreeSelect.SHOW_PARENT`:** show checked treeNodes (just show parent treeNode) | `TreeSelect.SHOW_ALL` \| `TreeSelect.SHOW_PARENT` \| `TreeSelect.SHOW_CHILD` | `TreeSelect.SHOW_CHILD` | |
| showSearch | Support search or not | boolean | single: false \| multiple: true | |
| size | To set the size of the select input | `large` \| `middle` \| `small` | - | |
| showArrow | Whether to show the `suffixIcon`，when single selection mode, default `true` | boolean | - | |
| suffixIcon | The custom suffix icon,you must set `showArrow` to `true` manually in multiple selection mode | ReactNode | - | |
| treeCheckable | Whether to show checkbox on the treeNodes | boolean | false | |
| switcherIcon | customize collapse \| expand icon of tree node | ReactNode | - |
| treeCheckStrictly | Whether to check nodes precisely (in the `checkable` mode), means parent and child nodes are not associated, and it will make `labelInValue` be true | boolean | false | |
| treeCheckable | Whether to show checkbox on the treeNodes | boolean | false | |
| treeData | Data of the treeNodes, manual construction work is no longer needed if this property has been set(ensure the Uniqueness of each value) | array&lt;{ value, title, children, \[disabled, disableCheckbox, selectable, checkable] }> | \[] | |
| treeDataSimpleMode | Enable simple mode of treeData. Changes the `treeData` schema to: \[{id:1, pId:0, value:'1', title:"test1",...},...] where pId is parent node's id). It is possible to replace the default `id` and `pId` keys by providing object to `treeDataSimpleMode` | false \| object&lt;{ id: string, pId: string, rootPId: string }> | false | |
| treeDefaultExpandAll | Whether to expand all treeNodes by default | boolean | false | |
| treeDefaultExpandedKeys | Default expanded treeNodes | string\[] | - | |
| treeExpandedKeys | Set expanded keys | string\[] | - | |
| treeIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false | |
| treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | `value` | |
| treeNodeLabelProp | Will render as content of select | string | `title` | |
| value | To set the current selected treeNode(s) | string \| string\[] | - | |
| virtual | Disable virtual scroll when set to false | boolean | true | 4.1.0 |
| onChange | A callback function, can be executed when selected treeNodes or input value change | function(value, label, extra) | - | |
| onSearch | A callback function, can be executed when the search input changes | function(value: string) | - | |
| onSelect | A callback function, can be executed when you select a treeNode | function(value, node, extra) | - | |
| onTreeExpand | A callback function, can be executed when treeNode expanded | function(expandedKeys) | - | |
### Tree Methods
@ -72,12 +72,12 @@ Tree selection control.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| selectable | Whether can be selected | boolean | true | |
| checkable | When Tree is checkable, set TreeNode display Checkbox or not | boolean | - | |
| disableCheckbox | Disables the checkbox of the treeNode | boolean | false | |
| disabled | Disabled or not | boolean | false | |
| isLeaf | Leaf node or not | boolean | false | |
| key | Required property (unless using `treeDataSimpleMode`), should be unique in the tree | string | - | |
| selectable | Whether can be selected | boolean | true | |
| title | Content showed on the treeNodes | ReactNode | `---` | |
| value | Will be treated as `treeNodeFilterProp` by default, should be unique in the tree | string | - | |

18
components/tree-select/index.zh-CN.md
View File

@ -35,30 +35,30 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
| maxTagCount | 最多显示多少个 tag | number | - | |
| maxTagPlaceholder | 隐藏 tag 时显示的内容 | ReactNode \| function(omittedValues) | - | |
| multiple | 支持多选（当设置 treeCheckable 时自动变为 true） | boolean | false | |
| onChange | 选中树节点时调用此函数 | function(value, label, extra) | - | |
| onSearch | 文本框值变化时回调 | function(value: string) | - | |
| onSelect | 被选中时调用 | function(value, node, extra) | - | |
| onTreeExpand | 展示节点时调用 | function(expandedKeys) | - | |
| placeholder | 选择框默认文字 | string | - | |
| searchValue | 搜索框的值，可以通过 `onSearch` 获取用户输入 | string | - | |
| treeIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false | |
| switcherIcon | 自定义树节点的展开/折叠图标 | ReactNode | - |
| showArrow | 是否显示 `suffixIcon`，单选模式下默认 `true` | boolean | - | |
| showCheckedStrategy | 定义选中项回填的方式。`TreeSelect.SHOW_ALL`: 显示所有选中节点(包括父节点)。`TreeSelect.SHOW_PARENT`: 只显示父节点(当父节点下所有子节点都选中时)。 默认只显示子节点 | `TreeSelect.SHOW_ALL` \| `TreeSelect.SHOW_PARENT` \| `TreeSelect.SHOW_CHILD` | `TreeSelect.SHOW_CHILD` | |
| showSearch | 是否支持搜索框 | boolean | 单选：false \| 多选：true | |
| size | 选择框大小 | `large` \| `middle` \| `small` | - | |
| showArrow | 是否显示 `suffixIcon`，单选模式下默认 `true` | boolean | - | |
| suffixIcon | 自定义的选择框后缀图标, 多选模式下必须同时设置 `showArrow` 为 true | ReactNode | - | |
| treeCheckable | 显示 Checkbox | boolean | false | |
| switcherIcon | 自定义树节点的展开/折叠图标 | ReactNode | - |
| treeCheckStrictly | `checkable` 状态下节点选择完全受控（父子节点选中状态不再关联），会使得 `labelInValue` 强制为 true | boolean | false | |
| treeCheckable | 显示 Checkbox | boolean | false | |
| treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（value 在整个树范围内唯一） | array&lt;{value, title, children, \[disabled, disableCheckbox, selectable, checkable]}> | \[] | |
| treeDataSimpleMode | 使用简单格式的 treeData，具体设置参考可设置的类型 (此时 treeData 应变为这样的数据结构: \[{id:1, pId:0, value:'1', title:"test1",...},...]， `pId` 是父节点的 id) | false \| object&lt;{ id: string, pId: string, rootPId: string }> | false | |
| treeDefaultExpandAll | 默认展开所有树节点 | boolean | false | |
| treeDefaultExpandedKeys | 默认展开的树节点 | string\[] | - | |
| treeExpandedKeys | 设置展开的树节点 | string\[] | - | |
| treeIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false | |
| treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | string | `value` | |
| treeNodeLabelProp | 作为显示的 prop 设置 | string | `title` | |
| value | 指定当前选中的条目 | string \| string\[] | - | |
| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 |
| onChange | 选中树节点时调用此函数 | function(value, label, extra) | - | |
| onSearch | 文本框值变化时回调 | function(value: string) | - | |
| onSelect | 被选中时调用 | function(value, node, extra) | - | |
| onTreeExpand | 展示节点时调用 | function(expandedKeys) | - | |
### Tree 方法
@ -73,12 +73,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --------------- | -------------------------------------------------- | --------- | ------ | ---- |
| selectable | 是否可选 | boolean | true | |
| checkable | 当树为 Checkbox 时，设置独立节点是否展示 Checkbox | boolean | - | |
| disableCheckbox | 禁掉 Checkbox | boolean | false | |
| disabled | 是否禁用 | boolean | false | |
| isLeaf | 是否是叶子节点 | boolean | false | |
| key | 此项必须设置（其值在整个树范围内唯一） | string | - | |
| selectable | 是否可选 | boolean | true | |
| title | 树节点显示的内容 | ReactNode | `---` | |
| value | 默认根据此属性值进行筛选（其值在整个树范围内唯一） | string | - | |

22
components/tree/index.en-US.md
View File

@ -19,30 +19,23 @@ Almost anything can be represented in a tree structure. Examples include directo
| --- | --- | --- | --- | --- |
| autoExpandParent | Whether to automatically expand a parent treeNode | boolean | false | |
| blockNode | Whether treeNode fill remaining horizontal space | boolean | false | |
| checkStrictly | Check treeNode precisely; parent treeNode and children treeNodes are not associated | boolean | false | |
| checkable | Add a Checkbox before the treeNodes | boolean | false | |
| checkedKeys | (Controlled) Specifies the keys of the checked treeNodes (PS: When this specifies the key of a treeNode which is also a parent treeNode, all the children treeNodes of will be checked; and vice versa, when it specifies the key of a treeNode which is a child treeNode, its parent treeNode will also be checked. When `checkable` and `checkStrictly` is true, its object has `checked` and `halfChecked` property. Regardless of whether the child or parent treeNode is checked, they won't impact each other | string\[] \| {checked: string\[], halfChecked: string\[]} | \[] | |
| checkStrictly | Check treeNode precisely; parent treeNode and children treeNodes are not associated | boolean | false | |
| defaultCheckedKeys | Specifies the keys of the default checked treeNodes | string\[] | \[] | |
| defaultExpandAll | Whether to expand all treeNodes by default | boolean | false | |
| defaultExpandedKeys | Specify the keys of the default expanded treeNodes | string\[] | \[] | |
| defaultExpandParent | If auto expand parent treeNodes when init | boolean | true | |
| defaultExpandedKeys | Specify the keys of the default expanded treeNodes | string\[] | \[] | |
| defaultSelectedKeys | Specifies the keys of the default selected treeNodes | string\[] | \[] | |
| disabled | Whether disabled the tree | boolean | false | |
| draggable | Specifies whether this Tree is draggable (IE > 8) | boolean | false | |
| expandedKeys | (Controlled) Specifies the keys of the expanded treeNodes | string\[] | \[] | |
| filterTreeNode | Defines a function to filter (highlight) treeNodes. When the function returns `true`, the corresponding treeNode will be highlighted | function(node) | - | |
| height | Config virtual scroll height. Will not support horizontal scroll when enable this | number | - | |
| icon | Customize treeNode icon | ReactNode \| (props) => ReactNode | - | |
| loadData | Load data asynchronously | function(node) | - | |
| loadedKeys | (Controlled) Set loaded tree nodes. Need work with `loadData` | string\[] | \[] | |
| multiple | Allows selecting multiple treeNodes | boolean | false | |
| selectable | Whether can be selected | boolean | true | |
| selectedKeys | (Controlled) Specifies the keys of the selected treeNodes | string\[] | - | |
| showIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to true | boolean | false | |
| switcherIcon | Customize collapse/expand icon of tree node | ReactNode | - | |
| showLine | Shows a connecting line | boolean \| {showLeafIcon: boolean} | false | |
| titleRender | Customize tree node title render | (nodeData) => ReactNode | - | 4.5.0 |
| treeData | The treeNodes data Array, if set it then you need not to construct children TreeNode. (key should be unique across the whole array) | array&lt;{ key, title, children, \[disabled, selectable] }> | - | |
| virtual | Disable virtual scroll when set to false | boolean | true | 4.1.0 |
| onCheck | Callback function for when the onCheck event occurs | function(checkedKeys, e:{checked: bool, checkedNodes, node, event, halfCheckedKeys}) | - | |
| onDragEnd | Callback function for when the onDragEnd event occurs | function({event, node}) | - | |
| onDragEnter | Callback function for when the onDragEnter event occurs | function({event, node, expandedKeys}) | - | |
@ -54,7 +47,14 @@ Almost anything can be represented in a tree structure. Examples include directo
| onLoad | Callback function for when a treeNode is loaded | function(loadedKeys, {event, node}) | - | |
| onRightClick | Callback function for when the user right clicks a treeNode | function({event, node}) | - | |
| onSelect | Callback function for when the user clicks a treeNode | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - | |
| icon | Customize treeNode icon | ReactNode \| (props) => ReactNode | - | |
| selectable | Whether can be selected | boolean | true | |
| selectedKeys | (Controlled) Specifies the keys of the selected treeNodes | string\[] | - | |
| showIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to true | boolean | false | |
| showLine | Shows a connecting line | boolean \| {showLeafIcon: boolean} | false | |
| switcherIcon | Customize collapse/expand icon of tree node | ReactNode | - | |
| titleRender | Customize tree node title render | (nodeData) => ReactNode | - | 4.5.0 |
| treeData | The treeNodes data Array, if set it then you need not to construct children TreeNode. (key should be unique across the whole array) | array&lt;{ key, title, children, \[disabled, selectable] }> | - | |
| virtual | Disable virtual scroll when set to false | boolean | true | 4.1.0 |
### TreeNode props

22
components/tree/index.zh-CN.md
View File

@ -20,30 +20,23 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
| --- | --- | --- | --- | --- |
| autoExpandParent | 是否自动展开父节点 | boolean | false | |
| blockNode | 是否节点占据一行 | boolean | false | |
| checkStrictly | checkable 状态下节点选择完全受控（父子节点选中状态不再关联） | boolean | false | |
| checkable | 节点前添加 Checkbox 复选框 | boolean | false | |
| checkedKeys | （受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点 key，则子节点自动选中；相应当子节点 key 都传入，父节点也自动选中。当设置`checkable`和`checkStrictly`，它是一个有`checked`和`halfChecked`属性的对象，并且父子节点的选中与否不再关联 | string\[] \| {checked: string\[], halfChecked: string\[]} | \[] | |
| checkStrictly | checkable 状态下节点选择完全受控（父子节点选中状态不再关联） | boolean | false | |
| defaultCheckedKeys | 默认选中复选框的树节点 | string\[] | \[] | |
| defaultExpandAll | 默认展开所有树节点 | boolean | false | |
| defaultExpandedKeys | 默认展开指定的树节点 | string\[] | \[] | |
| defaultExpandParent | 默认展开父节点 | boolean | true | |
| defaultExpandedKeys | 默认展开指定的树节点 | string\[] | \[] | |
| defaultSelectedKeys | 默认选中的树节点 | string\[] | \[] | |
| disabled | 将树禁用 | boolean | false | |
| draggable | 设置节点可拖拽（IE>8） | boolean | false | |
| expandedKeys | （受控）展开指定的树节点 | string\[] | \[] | |
| filterTreeNode | 按需筛选树节点（高亮），返回 true | function(node) | - | |
| height | 设置虚拟滚动容器高度，设置后内部节点不再支持横向滚动 | number | - | |
| icon | 自定义树节点图标。 | ReactNode \| (props) => ReactNode | - | |
| loadData | 异步加载数据 | function(node) | - | |
| loadedKeys | （受控）已经加载的节点，需要配合 `loadData` 使用 | string\[] | \[] | |
| multiple | 支持点选多个节点（节点本身） | boolean | false | |
| selectable | 是否可选中 | boolean | true | |
| selectedKeys | （受控）设置选中的树节点 | string\[] | - | |
| showIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false | |
| switcherIcon | 自定义树节点的展开/折叠图标 | ReactNode | - |
| showLine | 是否展示连接线 | boolean \| {showLeafIcon: boolean} | false | |
| titleRender | 自定义渲染节点 | (nodeData) => ReactNode | - | 4.5.0 |
| treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一） | array&lt;{key, title, children, \[disabled, selectable]}> | - | |
| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 |
| onCheck | 点击复选框触发 | function(checkedKeys, e:{checked: bool, checkedNodes, node, event, halfCheckedKeys}) | - | |
| onDragEnd | dragend 触发时调用 | function({event, node}) | - | |
| onDragEnter | dragenter 触发时调用 | function({event, node, expandedKeys}) | - | |
@ -55,7 +48,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
| onLoad | 节点加载完毕时触发 | function(loadedKeys, {event, node}) | - | |
| onRightClick | 响应右键点击 | function({event, node}) | - | |
| onSelect | 点击树节点触发 | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - | |
| icon | 自定义树节点图标。 | ReactNode \| (props) => ReactNode | - | |
| selectable | 是否可选中 | boolean | true | |
| selectedKeys | （受控）设置选中的树节点 | string\[] | - | |
| showIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false | |
| showLine | 是否展示连接线 | boolean \| {showLeafIcon: boolean} | false | |
| switcherIcon | 自定义树节点的展开/折叠图标 | ReactNode | - |
| titleRender | 自定义渲染节点 | (nodeData) => ReactNode | - | 4.5.0 |
| treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一） | array&lt;{key, title, children, \[disabled, selectable]}> | - | |
| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 |
### TreeNode props

28
components/typography/index.en-US.md
View File

@ -25,12 +25,12 @@ Basic text writing, including headings, body text, lists, and more.
| disabled | Disabled content | boolean | false | |
| editable | If editable. Can control edit state when is object | boolean \| [editable](#editable) | false | [editable](#editable) |
| ellipsis | Display ellipsis when text overflows | boolean | false | |
| mark | Marked style | boolean | false | |
| keyboard | Keyboard style | boolean | false | 4.3.0 |
| underline | Underlined style | boolean | false | |
| mark | Marked style | boolean | false | |
| onChange | Trigger when user edits the content | function(string) | - | |
| strong | Bold style | boolean | false | |
| type | Content type | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 |
| underline | Underlined style | boolean | false | |
### Typography.Title
@ -44,9 +44,9 @@ Basic text writing, including headings, body text, lists, and more.
| ellipsis | Display ellipsis when text overflows, can configure rows and expandable by using object | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) |
| level | Set content importance. Match with `h1`, `h2`, `h3`, `h4`, `h5` | number: 1, 2, 3, 4, 5 | 1 | 5: 4.6.0 |
| mark | Marked style | boolean | false | |
| underline | Underlined style | boolean | false | |
| onChange | Trigger when user edits the content | function(string) | - | |
| type | Content type | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 |
| underline | Underlined style | boolean | false | |
### Typography.Paragraph
@ -59,10 +59,10 @@ Basic text writing, including headings, body text, lists, and more.
| editable | If editable. Can control edit state when is object | boolean \| [editable](#editable) | false | [editable](#editable) |
| ellipsis | Display ellipsis when text overflows, can configure rows and expandable by using object | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) |
| mark | Marked style | boolean | false | |
| underline | Underlined style | boolean | false | |
| onChange | Trigger when user edits the content | function(string) | - | |
| strong | Bold style | boolean | false | |
| type | Content type | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 |
| underline | Underlined style | boolean | false | |
### copyable
@ -77,9 +77,9 @@ Basic text writing, including headings, body text, lists, and more.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| text | The text to copy | string | - | |
| onCopy | Called when copied text | function | - | |
| icon | Custom copy icon: \[copyIcon, copiedIcon] | \[ReactNode, ReactNode\] | - | 4.6.0 |
| onCopy | Called when copied text | function | - | |
| text | The text to copy | string | - | |
| tooltips | Custom tooltip text, hide when it is false | \[ReactNode, ReactNode\] | \[`Copy`, `Copied`] | 4.4.0 |
### editable
@ -98,13 +98,13 @@ Basic text writing, including headings, body text, lists, and more.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| icon | Custom editable icon | ReactNode | &lt;EditOutlined /> | 4.6.0 |
| tooltip | Custom tooltip text, hide when it is false | boolean \| ReactNode | `Edit` | 4.6.0 |
| editing | Whether to be editable | boolean | false | |
| maxLength | `maxLength` attribute of textarea | number | - | 4.4.0 |
| autoSize | `autoSize` attribute of textarea | boolean \| { minRows: number, maxRows: number } | - | 4.4.0 |
| onStart | Called when enter editable state | function | - | |
| editing | Whether to be editable | boolean | false | |
| icon | Custom editable icon | ReactNode | &lt;EditOutlined /> | 4.6.0 |
| maxLength | `maxLength` attribute of textarea | number | - | 4.4.0 |
| onChange | Called when input at textarea | function(event) | - | |
| onStart | Called when enter editable state | function | - | |
| tooltip | Custom tooltip text, hide when it is false | boolean \| ReactNode | `Edit` | 4.6.0 |
### ellipsis
@ -121,12 +121,12 @@ Basic text writing, including headings, body text, lists, and more.
| Property | Description | Type | Default | Version |
| ---------- | ----------------------------------------- | ------------------ | ------- | ------- |
| rows | Max rows of content | number | - | |
| expandable | Whether to be expandable | boolean | - | |
| onEllipsis | Called when enter or leave ellipsis state | function(ellipsis) | - | 4.2.0 |
| onExpand | Called when expand content | function(event) | - | |
| rows | Max rows of content | number | - | |
| suffix | Suffix of ellipsis content | ReactNode | - | |
| symbol | Custom `...` symbol of ellipsis | ReactNode | `...` | |
| onExpand | Called when expand content | function(event) | - | |
| onEllipsis | Called when enter or leave ellipsis state | function(ellipsis) | - | 4.2.0 |
## FAQ

28
components/typography/index.zh-CN.md
View File

@ -26,11 +26,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
| disabled | 禁用文本 | boolean | false | |
| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| [editable](#editable) | false | [editable](#editable) |
| ellipsis | 自动溢出省略 | boolean | false | |
| mark | 添加标记样式 | boolean | false | |
| keyboard | 添加键盘样式 | boolean | false | 4.3.0 |
| underline | 添加下划线样式 | boolean | false | |
| mark | 添加标记样式 | boolean | false | |
| strong | 是否加粗 | boolean | false | |
| type | 文本类型 | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 |
| underline | 添加下划线样式 | boolean | false | |
### Typography.Title
@ -44,9 +44,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
| ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) |
| level | 重要程度，相当于 `h1`、`h2`、`h3`、`h4`、`h5` | number: 1, 2, 3, 4, 5 | 1 | 5: 4.6.0 |
| mark | 添加标记样式 | boolean | false | |
| underline | 添加下划线样式 | boolean | false | |
| onChange | 当用户提交编辑内容时触发 | function(string) | - | |
| type | 文本类型 | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 |
| underline | 添加下划线样式 | boolean | false | |
### Typography.Paragraph
@ -59,10 +59,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
| editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| [editable](#editable) | false | [editable](#editable) |
| ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) |
| mark | 添加标记样式 | boolean | false | |
| underline | 添加下划线样式 | boolean | false | |
| onChange | 当用户提交编辑内容时触发 | function(string) | - | |
| strong | 是否加粗 | boolean | false | |
| type | 文本类型 | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 |
| underline | 添加下划线样式 | boolean | false | |
### copyable
@ -77,9 +77,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| text | 拷贝到剪切板里的文本 | string | - | |
| onCopy | 拷贝成功的回调函数 | function | - | |
| icon | 自定义拷贝图标：\[默认图标, 拷贝后的图标] | \[ReactNode, ReactNode\] | - | 4.6.0 |
| onCopy | 拷贝成功的回调函数 | function | - | |
| text | 拷贝到剪切板里的文本 | string | - | |
| tooltips | 自定义提示文案，为 false 时隐藏文案 | \[ReactNode, ReactNode\] | \[`复制`, `复制成功`] | 4.4.0 |
### editable
@ -98,13 +98,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| icon | 自定义编辑图标 | ReactNode | &lt;EditOutlined /> | 4.6.0 |
| tooltip | 自定义提示文本，为 false 时关闭 | boolean \| ReactNode | `编辑` | 4.6.0 |
| editing | 控制是否是编辑中状态 | boolean | false | |
| maxLength | 编辑中文本域最大长度 | number | - | 4.4.0 |
| autoSize | 自动 resize 文本域 | boolean \| { minRows: number, maxRows: number } | - | 4.4.0 |
| onStart | 进入编辑中状态时触发 | function | - | |
| editing | 控制是否是编辑中状态 | boolean | false | |
| icon | 自定义编辑图标 | ReactNode | &lt;EditOutlined /> | 4.6.0 |
| maxLength | 编辑中文本域最大长度 | number | - | 4.4.0 |
| onChange | 文本域编辑时触发 | function(event) | - | |
| onStart | 进入编辑中状态时触发 | function | - | |
| tooltip | 自定义提示文本，为 false 时关闭 | boolean \| ReactNode | `编辑` | 4.6.0 |
### ellipsis
@ -121,12 +121,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ---------- | ------------------ | ------------------ | ------ | ----- |
| rows | 最多显示的行数 | number | - | |
| expandable | 是否可展开 | boolean | - | |
| onEllipsis | 触发省略时的回调 | function(ellipsis) | - | 4.2.0 |
| onExpand | 点击展开时的回调 | function(event) | - | |
| rows | 最多显示的行数 | number | - | |
| suffix | 自定义省略内容后缀 | ReactNode | - | |
| symbol | 自定义省略符号 | ReactNode | `...` | |
| onExpand | 点击展开时的回调 | function(event) | - | |
| onEllipsis | 触发省略时的回调 | function(ellipsis) | - | 4.2.0 |
## FAQ

22
components/upload/index.en-US.md
View File

@ -21,31 +21,31 @@ Uploading is the process of publishing information (web pages, text, pictures, v
| --- | --- | --- | --- | --- |
| accept | File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - | |
| action | Uploading URL | string \| (file) => Promise | - | |
| method | The http method of upload request | string | `post` | |
| directory | Support upload whole directory ([caniuse](https://caniuse.com/#feat=input-file-directory)) | boolean | false | |
| beforeUpload | Hook function which will be executed before uploading. Uploading will be stopped with `false` or a rejected Promise returned. **Warning：this function is not supported in IE9** | (file, fileList) => boolean \| Promise | - | |
| customRequest | Override for the default xhr behavior allowing for additional customization and ability to implement your own XMLHttpRequest | function | - | |
| data | Uploading extra params or function which can return uploading extra params | object \| (file) => object \| Promise&lt;object> | - | |
| defaultFileList | Default list of files that have been uploaded | object\[] | - | |
| directory | Support upload whole directory ([caniuse](https://caniuse.com/#feat=input-file-directory)) | boolean | false | |
| disabled | Disable upload button | boolean | false | |
| fileList | List of files that have been uploaded (controlled). Here is a common issue [#2423](https://github.com/ant-design/ant-design/issues/2423) when using it | object\[] | - | |
| headers | Set request headers, valid above IE10 | object | - | |
| iconRender | Custom show icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - | |
| isImageUrl | Customize if render &lt;img /> in thumbnail | (file: UploadFile) => boolean | [(inside implementation)](https://github.com/ant-design/ant-design/blob/4ad5830eecfb87471cd8ac588c5d992862b70770/components/upload/utils.tsx#L47-L68) | |
| itemRender | Custom item of uploadList | (originNode: ReactElement, file: UploadFile, fileList?: object\[]) => React.ReactNode | - | 4.7.0 |
| listType | Built-in stylesheets, support for three types: `text`, `picture` or `picture-card` | string | `text` | |
| method | The http method of upload request | string | `post` | |
| multiple | Whether to support selected multiple file. `IE10+` supported. You can select multiple files with CTRL holding down while multiple is set to be true | boolean | false | |
| name | The name of uploading file | string | `file` | |
| previewFile | Customize preview file logic | (file: File \| Blob) => Promise&lt;dataURL: string> | - | |
| isImageUrl | Customize if render &lt;img /> in thumbnail | (file: UploadFile) => boolean | [(inside implementation)](https://github.com/ant-design/ant-design/blob/4ad5830eecfb87471cd8ac588c5d992862b70770/components/upload/utils.tsx#L47-L68) | |
| showUploadList | Whether to show default upload list, could be an object to specify `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` and `downloadIcon` individually | boolean \| { showPreviewIcon?: boolean, showDownloadIcon?: boolean, showRemoveIcon?: boolean, removeIcon?: ReactNode \| (file: UploadFile) => ReactNode, downloadIcon?: ReactNode \| (file: UploadFile) => ReactNode } | true | function: 4.7.0 |
| withCredentials | The ajax upload with cookie sent | boolean | false | |
| openFileDialogOnClick | Click open file dialog | boolean | true | |
| onChange | A callback function, can be executed when uploading state is changing, see [onChange](#onChange) | function | - | |
| onDownload | Click the method to download the file, pass the method to perform the method logic, do not pass the default jump to the new TAB | function(file): void | (Jump to new TAB) | |
| onPreview | A callback function, will be executed when file link or preview icon is clicked | function(file) | - | |
| onRemove | A callback function, will be executed when removing file button is clicked, remove event will be prevented when return value is false or a Promise which resolve(false) or reject | function(file): boolean \| Promise | - | |
| onDownload | Click the method to download the file, pass the method to perform the method logic, do not pass the default jump to the new TAB | function(file): void | (Jump to new TAB) | |
| transformFile   | Customize transform file before request | Function(file): string \| Blob \| File \| Promise&lt;string \| Blob \| File> | - | |
| iconRender | Custom show icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - | |
| openFileDialogOnClick | Click open file dialog | boolean | true | |
| previewFile | Customize preview file logic | (file: File \| Blob) => Promise&lt;dataURL: string> | - | |
| progress | Custom progress bar | [ProgressProps](/components/progress/#API) (support `type="line"` only) | { strokeWidth: 2, showInfo: false } | 4.3.0 |
| itemRender | Custom item of uploadList | (originNode: ReactElement, file: UploadFile, fileList?: object\[]) => React.ReactNode | - | 4.7.0 |
| showUploadList | Whether to show default upload list, could be an object to specify `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` and `downloadIcon` individually | boolean \| { showPreviewIcon?: boolean, showDownloadIcon?: boolean, showRemoveIcon?: boolean, removeIcon?: ReactNode \| (file: UploadFile) => ReactNode, downloadIcon?: ReactNode \| (file: UploadFile) => ReactNode } | true | function: 4.7.0 |
| transformFile   | Customize transform file before request | Function(file): string \| Blob \| File \| Promise&lt;string \| Blob \| File> | - | |
| withCredentials | The ajax upload with cookie sent | boolean | false | |
### onChange

22
components/upload/index.zh-CN.md
View File

@ -22,31 +22,31 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
| --- | --- | --- | --- | --- |
| accept | 接受上传的文件类型, 详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - | |
| action | 上传的地址 | string \| (file) => Promise | - | |
| method | 上传请求的 http method | string | `post` | |
| directory | 支持上传文件夹（[caniuse](https://caniuse.com/#feat=input-file-directory)） | boolean | false | |
| beforeUpload | 上传文件之前的钩子，参数为上传的文件，若返回 `false` 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 `File` 或 `Blob` 对象则上传 resolve 传入对象）。**注意：IE9 不支持该方法** | (file, fileList) => boolean \| Promise | - | |
| customRequest | 通过覆盖默认的上传行为，可以自定义自己的上传实现 | function | - | |
| data | 上传所需额外参数或返回上传额外参数的方法 | object\|(file) => object \| Promise&lt;object> | - | |
| defaultFileList | 默认已经上传的文件列表 | object\[] | - | |
| directory | 支持上传文件夹（[caniuse](https://caniuse.com/#feat=input-file-directory)） | boolean | false | |
| disabled | 是否禁用 | boolean | false | |
| fileList | 已经上传的文件列表（受控），使用此参数时，如果遇到 `onChange` 只调用一次的问题，请参考 [#2423](https://github.com/ant-design/ant-design/issues/2423) | object\[] | - | |
| headers | 设置上传的请求头部，IE10 以上有效 | object | - | |
| iconRender | 自定义显示 icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - | |
| isImageUrl | 自定义缩略图是否使用 &lt;img /> 标签进行显示 | (file: UploadFile) => boolean | [(内部实现)](https://github.com/ant-design/ant-design/blob/4ad5830eecfb87471cd8ac588c5d992862b70770/components/upload/utils.tsx#L47-L68) | |
| itemRender | 自定义上传列表项 | (originNode: ReactElement, file: UploadFile, fileList?: object\[]) => React.ReactNode | - | 4.7.0 |
| listType | 上传列表的内建样式，支持三种基本样式 `text`, `picture` 和 `picture-card` | string | `text` | |
| method | 上传请求的 http method | string | `post` | |
| multiple | 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件 | boolean | false | |
| name | 发到后台的文件参数名 | string | `file` | |
| previewFile | 自定义文件预览逻辑 | (file: File \| Blob) => Promise<dataURL: string> | - | |
| isImageUrl | 自定义缩略图是否使用 &lt;img /> 标签进行显示 | (file: UploadFile) => boolean | [(内部实现)](https://github.com/ant-design/ant-design/blob/4ad5830eecfb87471cd8ac588c5d992862b70770/components/upload/utils.tsx#L47-L68) | |
| showUploadList | 是否展示文件列表, 可设为一个对象，用于单独设定 `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` 和 `downloadIcon` | boolean \| { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean, removeIcon?: ReactNode \| (file: UploadFile) => ReactNode, downloadIcon?: ReactNode \| (file: UploadFile) => ReactNode } | true | function: 4.7.0 |
| withCredentials | 上传请求时是否携带 cookie | boolean | false | |
| openFileDialogOnClick | 点击打开文件对话框 | boolean | true | |
| onChange | 上传文件改变时的状态，详见 [onChange](#onChange) | function | - | |
| onDownload | 点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页 | function(file): void | (跳转新标签页) | |
| onPreview | 点击文件链接或预览图标时的回调 | function(file) | - | |
| onRemove   | 点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除               | function(file): boolean \| Promise | -   | |
| onDownload | 点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页 | function(file): void | (跳转新标签页) | |
| transformFile   | 在上传之前转换文件。支持返回一个 Promise 对象   | function(file): string \| Blob \| File \| Promise&lt;string \| Blob \| File> | -   | |
| iconRender | 自定义显示 icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - | |
| openFileDialogOnClick | 点击打开文件对话框 | boolean | true | |
| previewFile | 自定义文件预览逻辑 | (file: File \| Blob) => Promise<dataURL: string> | - | |
| progress | 自定义进度条样式 | [ProgressProps](/components/progress/#API)（仅支持 `type="line"`） | { strokeWidth: 2, showInfo: false } | 4.3.0 |
| itemRender | 自定义上传列表项 | (originNode: ReactElement, file: UploadFile, fileList?: object\[]) => React.ReactNode | - | 4.7.0 |
| showUploadList | 是否展示文件列表, 可设为一个对象，用于单独设定 `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` 和 `downloadIcon` | boolean \| { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean, removeIcon?: ReactNode \| (file: UploadFile) => ReactNode, downloadIcon?: ReactNode \| (file: UploadFile) => ReactNode } | true | function: 4.7.0 |
| transformFile   | 在上传之前转换文件。支持返回一个 Promise 对象   | function(file): string \| Blob \| File \| Promise&lt;string \| Blob \| File> | -   | |
| withCredentials | 上传请求时是否携带 cookie | boolean | false | |
### onChange