diff --git a/components/alert/index.en-US.md b/components/alert/index.en-US.md
index 9ebb00e6c1..6caf74fae5 100644
--- a/components/alert/index.en-US.md
+++ b/components/alert/index.en-US.md
@@ -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 }} | |
diff --git a/components/alert/index.zh-CN.md b/components/alert/index.zh-CN.md
index c5fb7294cb..2922de22dd 100644
--- a/components/alert/index.zh-CN.md
+++ b/components/alert/index.zh-CN.md
@@ -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 }} | |
diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md
index ce30064c3c..77f3c4f9f4 100644
--- a/components/anchor/index.en-US.md
+++ b/components/anchor/index.en-US.md
@@ -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 | | |
diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md
index fdd0b2bfc7..cbb6b28c5e 100644
--- a/components/anchor/index.zh-CN.md
+++ b/components/anchor/index.zh-CN.md
@@ -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 | - | |
diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md
index 8c99200bae..575cc4b1cc 100644
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@@ -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
diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md
index c7e7a78a21..c6f1a4bf68 100644
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@@ -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 | - | |
## 方法
diff --git a/components/avatar/index.en-US.md b/components/avatar/index.en-US.md
index 31db6d84a8..4803058607 100644
--- a/components/avatar/index.en-US.md
+++ b/components/avatar/index.en-US.md
@@ -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 | - | |
diff --git a/components/avatar/index.zh-CN.md b/components/avatar/index.zh-CN.md
index 32292ba5ec..6f956dedb2 100644
--- a/components/avatar/index.zh-CN.md
+++ b/components/avatar/index.zh-CN.md
@@ -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 | - | |
diff --git a/components/back-top/index.en-US.md b/components/back-top/index.en-US.md
index e62514c9b7..793ceaa5bf 100644
--- a/components/back-top/index.en-US.md
+++ b/components/back-top/index.en-US.md
@@ -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 |
diff --git a/components/back-top/index.zh-CN.md b/components/back-top/index.zh-CN.md
index fa08ded7ba..f5f74f2cc8 100644
--- a/components/back-top/index.zh-CN.md
+++ b/components/back-top/index.zh-CN.md
@@ -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 |
diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md
index 8035dcaa15..0e86abcfbb 100644
--- a/components/badge/index.en-US.md
+++ b/components/badge/index.en-US.md
@@ -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 | - | |
diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md
index 3aa267c533..00dd75ba1d 100644
--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@@ -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 | - | |
diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md
index 7397403c61..8df332b372 100644
--- a/components/calendar/index.en-US.md
+++ b/components/calendar/index.en-US.md
@@ -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
diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md
index 37a4edcf94..5c1d6eaa16 100644
--- a/components/calendar/index.zh-CN.md
+++ b/components/calendar/index.zh-CN.md
@@ -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
diff --git a/components/card/index.en-US.md b/components/card/index.en-US.md
index 1632a66493..5e7014e583 100644
--- a/components/card/index.en-US.md
+++ b/components/card/index.en-US.md
@@ -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
diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md
index 36719a6537..421c9589aa 100644
--- a/components/card/index.zh-CN.md
+++ b/components/card/index.zh-CN.md
@@ -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
diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md
index b5567be997..f7025b7c68 100644
--- a/components/cascader/index.en-US.md
+++ b/components/cascader/index.en-US.md
@@ -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`:
diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md
index 6db77de3a1..7d2606b26a 100644
--- a/components/cascader/index.zh-CN.md
+++ b/components/cascader/index.zh-CN.md
@@ -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` 为对象时，其中的字段：
diff --git a/components/checkbox/index.en-US.md b/components/checkbox/index.en-US.md
index e5f1c8dc42..4aa5bcc2b1 100644
--- a/components/checkbox/index.en-US.md
+++ b/components/checkbox/index.en-US.md
@@ -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
diff --git a/components/checkbox/index.zh-CN.md b/components/checkbox/index.zh-CN.md
index a8c621354d..739144d692 100644
--- a/components/checkbox/index.zh-CN.md
+++ b/components/checkbox/index.zh-CN.md
@@ -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
diff --git a/components/collapse/index.en-US.md b/components/collapse/index.en-US.md
index 7dd42378ce..517b2c29b4 100644
--- a/components/collapse/index.en-US.md
+++ b/components/collapse/index.en-US.md
@@ -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
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
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
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
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 | - | |
diff --git a/components/collapse/index.zh-CN.md b/components/collapse/index.zh-CN.md
index e128311b3f..83d5dbaf5f 100644
--- a/components/collapse/index.zh-CN.md
+++ b/components/collapse/index.zh-CN.md
@@ -20,23 +20,23 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
-| activeKey | 当前激活 tab 面板的 key | string\[] \| string
number\[] \| number | 默认无，accordion 模式下默认第一个元素 | |
-| defaultActiveKey | 初始化选中面板的 key | string\[] \| string
number\[] \| number | - | |
-| bordered | 带边框风格的折叠面板 | boolean | true | |
| accordion | 手风琴模式 | boolean | false | |
-| onChange | 切换面板的回调 | function | - | |
+| activeKey | 当前激活 tab 面板的 key | string\[] \| string
number\[] \| number | 默认无，accordion 模式下默认第一个元素 | |
+| bordered | 带边框风格的折叠面板 | boolean | true | |
+| defaultActiveKey | 初始化选中面板的 key | string\[] \| string
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 | - | |
diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
index 4adc52e58f..aa41abaa37 100644
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@@ -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
diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
index 560245c74a..4fded51766 100644
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@@ -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
diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md
index bc5f6b0493..c4bf088512 100644
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@@ -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
diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md
index 8f6a50dfa4..4be6e5b311 100644
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@@ -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
diff --git a/components/descriptions/index.en-US.md b/components/descriptions/index.en-US.md
index 32bd3ad5d7..9eadd25532 100644
--- a/components/descriptions/index.en-US.md
+++ b/components/descriptions/index.en-US.md
@@ -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
diff --git a/components/descriptions/index.zh-CN.md b/components/descriptions/index.zh-CN.md
index c2b9da0d4c..a071a44ca6 100644
--- a/components/descriptions/index.zh-CN.md
+++ b/components/descriptions/index.zh-CN.md
@@ -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
diff --git a/components/drawer/index.en-US.md b/components/drawer/index.en-US.md
index fa15ca2dd6..7497191f5e 100644
--- a/components/drawer/index.en-US.md
+++ b/components/drawer/index.en-US.md
@@ -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 | <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+ |
diff --git a/components/drawer/index.zh-CN.md b/components/drawer/index.zh-CN.md
index b26be668d9..d6f4e1c9f3 100644
--- a/components/drawer/index.zh-CN.md
+++ b/components/drawer/index.zh-CN.md
@@ -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 | <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+ |
diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md
index ee7dec1263..828041678e 100644
--- a/components/dropdown/index.en-US.md
+++ b/components/dropdown/index.en-US.md
@@ -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<`click`\|`hover`\|`contextMenu`> | \[`hover`] | |
| visible | Whether the dropdown menu is currently visible | boolean | - | |
diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md
index 125234aa9e..dd7d8535c2 100644
--- a/components/dropdown/index.zh-CN.md
+++ b/components/dropdown/index.zh-CN.md
@@ -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<`click`\|`hover`\|`contextMenu`> | \[`hover`] | |
| visible | 菜单是否显示 | boolean | - | |
diff --git a/components/empty/index.en-US.md b/components/empty/index.en-US.md
index c9a187eb3b..9c7cd06530 100644
--- a/components/empty/index.en-US.md
+++ b/components/empty/index.en-US.md
@@ -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
diff --git a/components/empty/index.zh-CN.md b/components/empty/index.zh-CN.md
index 013468debe..ef887fb9a1 100644
--- a/components/empty/index.zh-CN.md
+++ b/components/empty/index.zh-CN.md
@@ -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 | - | |
## 内置图片
diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md
index 578f035199..b5f8c44f2b 100644
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@@ -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 `` 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 ``. 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 | - | 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
diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md
index 142c52cdee..d60347a4d1 100644
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@@ -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 标签布局，同 `` 组件，设置 `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` 标签布局，同 `` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置，，不会作用于嵌套 Item。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid/#Col) | - | |
| messageVariables | 默认验证字段的信息 | Record | - | 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
diff --git a/components/grid/index.en-US.md b/components/grid/index.en-US.md
index 4a00fec1df..a9ab52ec77 100644
--- a/components/grid/index.en-US.md
+++ b/components/grid/index.en-US.md
@@ -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`).
diff --git a/components/grid/index.zh-CN.md b/components/grid/index.zh-CN.md
index 2f303684e9..54d60dd6c0 100644
--- a/components/grid/index.zh-CN.md
+++ b/components/grid/index.zh-CN.md
@@ -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` 的部分)。
diff --git a/components/input-number/index.en-US.md b/components/input-number/index.en-US.md
index 870949ef78..f07006b7f3 100644
--- a/components/input-number/index.en-US.md
+++ b/components/input-number/index.en-US.md
@@ -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
diff --git a/components/input-number/index.zh-CN.md b/components/input-number/index.zh-CN.md
index 5766f32f3f..1fc3d418d6 100644
--- a/components/input-number/index.zh-CN.md
+++ b/components/input-number/index.zh-CN.md
@@ -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 | - | - |
## 方法
diff --git a/components/input/index.en-US.md b/components/input/index.en-US.md
index 7fe9cece2d..6bc8419535 100644
--- a/components/input/index.en-US.md
+++ b/components/input/index.en-US.md
@@ -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 ? <EyeOutlined /> : <EyeInvisibleOutlined />) | 4.3.0 |
+| visibilityToggle | Whether show toggle button | boolean | true | |
## FAQ
diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md
index 67d9903227..3d9852b5c8 100644
--- a/components/input/index.zh-CN.md
+++ b/components/input/index.zh-CN.md
@@ -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 ? <EyeOutlined /> : <EyeInvisibleOutlined />) | 4.3.0 |
+| visibilityToggle | 是否显示切换按钮 | boolean | true | |
## FAQ
diff --git a/components/list/index.en-US.md b/components/list/index.en-US.md
index d8e872b700..b88ecb8d01 100644
--- a/components/list/index.en-US.md
+++ b/components/list/index.en-US.md
@@ -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
diff --git a/components/list/index.zh-CN.md b/components/list/index.zh-CN.md
index ce68ff35e3..a7fef152ab 100644
--- a/components/list/index.zh-CN.md
+++ b/components/list/index.zh-CN.md
@@ -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
diff --git a/components/mentions/index.en-US.md b/components/mentions/index.en-US.md
index d9fdf77880..6a604d09bd 100644
--- a/components/mentions/index.en-US.md
+++ b/components/mentions/index.en-US.md
@@ -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
diff --git a/components/mentions/index.zh-CN.md b/components/mentions/index.zh-CN.md
index 0fdff80861..c4552d7789 100644
--- a/components/mentions/index.zh-CN.md
+++ b/components/mentions/index.zh-CN.md
@@ -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 方法
diff --git a/components/message/index.en-US.md b/components/message/index.en-US.md
index 83e8e3169d..6a5a58d6af 100644
--- a/components/message/index.en-US.md
+++ b/components/message/index.en-US.md
@@ -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
diff --git a/components/message/index.zh-CN.md b/components/message/index.zh-CN.md
index a27b5ed8bb..68367b67ab 100644
--- a/components/message/index.zh-CN.md
+++ b/components/message/index.zh-CN.md
@@ -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
diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md
index 3f8e71f1f9..acb1e9fb94 100644
--- a/components/modal/index.en-US.md
+++ b/components/modal/index.en-US.md
@@ -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 | <CloseOutlined /> | |
diff --git a/components/notification/index.en-US.md b/components/notification/index.en-US.md
index d137cccb41..47085dcc47 100644
--- a/components/notification/index.en-US.md
+++ b/components/notification/index.en-US.md
@@ -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
diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md
index 6fab9482bc..68d0a0fe70 100644
--- a/components/notification/index.zh-CN.md
+++ b/components/notification/index.zh-CN.md
@@ -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
diff --git a/components/page-header/index.en-US.md b/components/page-header/index.en-US.md
index 1b2f59b538..6c7861177a 100644
--- a/components/page-header/index.en-US.md
+++ b/components/page-header/index.en-US.md
@@ -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 | <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 | - | |