mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

docs: show version Number features were added (#17373)

Browse Source 
* docs: add api first appearance

* docs: fix auto-complete doc

* docs: replace Version Added with Version

* docs: date picker common method

* docs: date picker common method

* docs: tree

* docs: remove meaningless 3.0.0
This commit is contained in:
MuYu 2019-07-11 14:14:33 +08:00 committed by 偏右
parent 79bff3ff61
commit fb0b4f0fc9
124 changed files with 2538 additions and 2537 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -14,12 +14,12 @@ Please note that Affix should not cover other content on the page, especially wh
## API
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |
| target | specifies the scrollable area dom node | () => HTMLElement | () => window |
| onChange | Callback for when affix state is changed | Function(affixed) | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - | |
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | |
| target | specifies the scrollable area dom node | () => HTMLElement | () => window | |
| onChange | Callback for when affix state is changed | Function(affixed) | - | |
**Note:** Children of `Affix` can not be `position: absolute`, but you can set `Affix` as `position: absolute`:

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

@ -15,12 +15,12 @@ title: Affix
## API
| 成员 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | |
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | |
| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |
| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 |
| 成员 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | | |
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window | |
| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 | |
**注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：

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

@ -13,15 +13,15 @@ Alert component for feedback.
## API
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| afterClose | Called when close animation is finished | () => void | - |
| banner | Whether to show as banner | boolean | false |
| closable | Whether Alert can be closed | boolean | - |
| closeText | Close text to show | string\|ReactNode | - |
| description | Additional content of Alert | string\|ReactNode | - |
| icon | Custom icon, effective when `showIcon` is `true` | ReactNode | - |
| message | Content of Alert | string\|ReactNode | - |
| 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 | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| afterClose | Called when close animation is finished | () => void | - | 3.3.1 |
| banner | Whether to show as banner | boolean | false | |
| closable | Whether Alert can be closed | boolean | - | |
| closeText | Close text to show | string\|ReactNode | - | |
| description | Additional content of Alert | string\|ReactNode | - | |
| icon | Custom icon, effective when `showIcon` is `true` | ReactNode | - | 3.10.0 |
| message | Content of Alert | string\|ReactNode | - | |
| 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 | - | |

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

@ -14,15 +14,15 @@ title: Alert
## API
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| afterClose | 关闭动画结束后触发的回调函数 | () => void | - |
| banner | 是否用作顶部公告 | boolean | false |
| closable | 默认不显示关闭按钮 | boolean | 无 |
| closeText | 自定义关闭按钮 | string\|ReactNode | 无 |
| description | 警告提示的辅助性文字介绍 | string\|ReactNode | 无 |
| icon | 自定义图标，`showIcon` 为 `true` 时有效 | ReactNode | - |
| message | 警告提示内容 | string\|ReactNode | 无 |
| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true |
| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` |
| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | 无 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| afterClose | 关闭动画结束后触发的回调函数 | () => void | - | 3.3.1 |
| banner | 是否用作顶部公告 | boolean | false | |
| closable | 默认不显示关闭按钮 | boolean | 无 | |
| closeText | 自定义关闭按钮 | string\|ReactNode | 无 | |
| description | 警告提示的辅助性文字介绍 | string\|ReactNode | 无 | |
| icon | 自定义图标，`showIcon` 为 `true` 时有效 | ReactNode | - | 3.10.0 |
| message | 警告提示内容 | string\|ReactNode | 无 | |
| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true | |
| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` | |
| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | 无 | |

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

@ -15,19 +15,19 @@ For displaying anchor hyperlinks on page and jumping between them.
### Anchor Props
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| affix | Fixed mode of Anchor | boolean | true |
| bounds | Bounding distance of anchor area | number | 5(px) |
| getContainer | Scrolling container | () => HTMLElement | () => window |
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |
| showInkInFixed | Whether show ink-balls in Fixed mode | boolean | false |
| onClick | set the handler to handle `click` event | Function(e: Event, link: Object) | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| affix | Fixed mode of Anchor | boolean | true | |
| bounds | Bounding distance of anchor area | number | 5(px) | |
| getContainer | Scrolling container | () => HTMLElement | () => window | 3.4.0 |
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - | |
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | |
| showInkInFixed | Whether show ink-balls in Fixed mode | boolean | false | |
| onClick | set the handler to handle `click` event | Function(e: Event, link: Object) | - | 3.9.0 |
### Link Props
| Property | Description | Type | Default |
| -------- | -------------------- | ----------------- | ------- |
| href | target of hyperlink | string | |
| title | content of hyperlink | string\|ReactNode | |
| Property | Description | Type | Default | Version |
| -------- | -------------------- | ----------------- | ------- | ------- |
| href | target of hyperlink | string | | |
| title | content of hyperlink | string\|ReactNode | | |

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

@ -16,19 +16,19 @@ title: Anchor
### Anchor Props
| 成员 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| affix | 固定模式 | boolean | true |
| bounds | 锚点区域边界 | number | 5(px) |
| getContainer | 指定滚动的容器 | () => HTMLElement | () => window |
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | |
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | |
| showInkInFixed | 固定模式是否显示小圆点 | boolean | false |
| onClick | `click` 事件的 handler | Function(e: Event, link: Object) | - |
| 成员 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| affix | 固定模式 | boolean | true | |
| bounds | 锚点区域边界 | number | 5(px) | |
| getContainer | 指定滚动的容器 | () => HTMLElement | () => window | 3.4.0 |
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | | |
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
| showInkInFixed | 固定模式是否显示小圆点 | boolean | false | |
| onClick | `click` 事件的 handler | Function(e: Event, link: Object) | - | 3.9.0 |
### Link Props
| 成员 | 说明 | 类型 | 默认值 |
| ----- | -------- | ----------------- | ------ |
| href | 锚点链接 | string | |
| title | 文字内容 | string\|ReactNode | |
| 成员 | 说明 | 类型 | 默认值 | 版本 |
| ----- | -------- | ----------------- | ------ | ---- |
| href | 锚点链接 | string | | |
| title | 文字内容 | string\|ReactNode | | |

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

@ -18,33 +18,33 @@ const dataSource = ['12345', '23456', '34567'];
<AutoComplete dataSource={dataSource} />;
```
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| allowClear | Show clear button, effective in multiple mode only. | boolean | false |
| autoFocus | get focus when component mounted | boolean | false |
| backfill | backfill selected item the input when using keyboard | boolean | false |
| children (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
| children (for dataSource) | Data source for autocomplete | React.ReactElement<OptionProps> / Array&lt;React.ReactElement<OptionProps>> | - |
| dataSource | Data source for autocomplete | [DataSourceItemType](https://git.io/vMMKF)\[] | |
| defaultActiveFirstOption | Whether active first option by default | boolean | true |
| defaultValue | Initial selected option. | string\|string\[]\| - |
| disabled | Whether disabled select | boolean | false |
| 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 or function(inputValue, option) | true |
| optionLabelProp | Which prop value of option will render as content of select. | string | `children` |
| placeholder | placeholder of input | string | - |
| value | selected option | string\|string\[]\|{ key: string, label: string\|ReactNode }\|Array&lt;{ key: string, label: string\|ReactNode }> | - |
| 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) | - |
| 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 | - |
| onDropdownVisibleChange | Call when dropdown open | function(open) | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| allowClear | Show clear button, effective in multiple mode only. | boolean | false | |
| autoFocus | get focus when component mounted | boolean | false | |
| backfill | backfill selected item the input when using keyboard | boolean | false | |
| children (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` | |
| children (for dataSource) | Data source for autocomplete | React.ReactElement<OptionProps> / Array&lt;React.ReactElement<OptionProps>> | - | |
| dataSource | Data source for autocomplete | [DataSourceItemType](https://git.io/vMMKF)\[] | - | |
| defaultActiveFirstOption | Whether active first option by default | boolean | true | |
| defaultValue | Initial selected option. | string\|string\[] | - | |
| disabled | Whether disabled select | boolean | false | |
| 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 or function(inputValue, option) | true | |
| optionLabelProp | Which prop value of option will render as content of select. | string | `children` | |
| placeholder | placeholder of input | string | - | |
| value | selected option | string\|string\[]\|{ key: string, label: string\|ReactNode }\|Array&lt;{ key: string, label: string\|ReactNode }> | - | |
| onBlur | Called when leaving the component. | function() | - | 3.6.5 |
| onChange | Called when select an option or input value change, or value of input is changed | function(value) | - | |
| onFocus | Called when entering the component | function() | - | 3.6.5 |
| 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 | - | 3.9.3 |
| open | Controlled open state of dropdown | boolean | - | 3.9.3 |
| onDropdownVisibleChange | Call when dropdown open | function(open) | - | 3.9.3 |
## Methods
| Name | Description |
| ------- | ------------ |
| blur() | remove focus |
| focus() | get focus |
| Name | Description | Version |
| ------- | ------------ | ------- |
| blur() | remove focus | |
| focus() | get focus | |

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

@ -19,34 +19,34 @@ const dataSource = ['12345', '23456', '34567'];
<AutoComplete dataSource={dataSource} />;
```
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| allowClear | 支持清除, 单选模式有效 | boolean | false |
| autoFocus | 自动获取焦点 | boolean | false |
| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false |
| children (自动完成的数据源) | 自动完成的数据源 | React.ReactElement<OptionProps> / Array&lt;React.ReactElement<OptionProps>> | - |
| children (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
| dataSource | 自动完成的数据源 | [DataSourceItemType](https://git.io/vMMKF)\[] | |
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true |
| defaultValue | 指定默认选中的条目 | string\|string\[]\| 无 |
| disabled | 是否禁用 | boolean | false |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | Function(triggerNode) | () => document.body |
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` |
| placeholder | 输入框提示 | string | - |
| value | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|ReactNode }\|Array&lt;{ key: string, label: string\|ReactNode }> | 无 |
| onBlur | 失去焦点时的回调 | function() | - |
| onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | 无 |
| onFocus | 获得焦点时的回调 | function() | - |
| onSearch | 搜索补全项的时候调用 | function(value) | 无 |
| onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | 无 |
| defaultOpen | 是否默认展开下拉菜单 | boolean | - |
| open | 是否展开下拉菜单 | boolean | - |
| onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| allowClear | 支持清除, 单选模式有效 | boolean | false | |
| autoFocus | 自动获取焦点 | boolean | false | |
| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false | |
| children (自动完成的数据源) | 自动完成的数据源 | React.ReactElement<OptionProps> / Array&lt;React.ReactElement<OptionProps>> | - | | |
| children (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` | @todo.muyu |
| dataSource | 自动完成的数据源 | [DataSourceItemType](https://git.io/vMMKF)\[] | | |
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true | |
| defaultValue | 指定默认选中的条目 | string\|string\[]\| 无 | |
| disabled | 是否禁用 | boolean | false | |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true | |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | Function(triggerNode) | () => document.body | 3.19.4 |
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` | |
| placeholder | 输入框提示 | string | - | |
| value | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|ReactNode }\|Array&lt;{ key: string, label: string\|ReactNode }> | 无 | |
| onBlur | 失去焦点时的回调 | function() | - | 3.6.5 |
| onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | 无 | |
| onFocus | 获得焦点时的回调 | function() | - | 3.6.5 |
| onSearch | 搜索补全项的时候调用 | function(value) | 无 | |
| onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | 无 | |
| defaultOpen | 是否默认展开下拉菜单 | boolean | - | 3.9.3 |
| open | 是否展开下拉菜单 | boolean | - | 3.9.3 |
| onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - | 3.9.3 |
## 方法
| 名称 | 描述 |
| ------- | -------- |
| blur() | 移除焦点 |
| focus() | 获取焦点 |
| 名称 | 描述 | 版本 |
| ------- | -------- | ---- |
| blur() | 移除焦点 | |
| focus() | 获取焦点 | |

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

@ -8,12 +8,12 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
## API
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| icon | the `Icon` type for an icon avatar, see `Icon` Component | string | - |
| shape | the shape of avatar | `circle` \| `square` | `circle` |
| size | the size of the avatar | number \| string: `large` `small` `default` | `default` |
| 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 | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| icon | the `Icon` type for an icon avatar, see `Icon` Component | string | - | |
| shape | the shape of avatar | `circle` \| `square` | `circle` | |
| size | the size of the avatar | number \| string: `large` `small` `default` | `default` | |
| src | the address of the image for an image avatar | string | - | |
| srcSet | a list of sources to use for different screen resolutions | string | - | 3.11.0 |
| alt | This attribute defines the alternative text describing the image | string | - | 3.7.0 |
| onError | handler when img load error, return false to prevent default fallback behavior | () => boolean | - | 3.8.0 |

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

@ -13,12 +13,12 @@ title: Avatar
## API
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| icon | 设置头像的图标类型，参考 `Icon` 组件 | string | - |
| shape | 指定头像的形状 | Enum{ 'circle', 'square' } | `circle` |
| size | 设置头像的大小 | number \| Enum{ 'large', 'small', 'default' } | `default` |
| src | 图片类头像的资源地址 | string | - |
| srcSet | 设置图片类头像响应式资源地址 | string | - |
| alt | 图像无法显示时的替代文本 | string | - |
| onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| icon | 设置头像的图标类型，参考 `Icon` 组件 | string | - | |
| shape | 指定头像的形状 | Enum{ 'circle', 'square' } | `circle` | |
| size | 设置头像的大小 | number \| Enum{ 'large', 'small', 'default' } | `default` | |
| src | 图片类头像的资源地址 | string | - | |
| srcSet | 设置图片类头像响应式资源地址 | string | - | 3.11.0 |
| alt | 图像无法显示时的替代文本 | string | - | 3.7.0 |
| onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - | 3.8.0 |

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

@ -17,8 +17,8 @@ title: BackTop
>
> If you decide to use custom styles, please note the size limit: no more than `40px * 40px`.
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| 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 | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| 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 | - | |

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

@ -18,8 +18,8 @@ title: BackTop
>
> 自定义样式宽高不大于 40px \* 40px。
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| target | 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | Function | () => window |
| visibilityHeight | 滚动高度达到此参数值才出现 `BackTop` | number | 400 |
| onClick | 点击按钮的回调函数 | Function | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| target | 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | Function | () => window | |
| visibilityHeight | 滚动高度达到此参数值才出现 `BackTop` | number | 400 | |
| onClick | 点击按钮的回调函数 | Function | - | |

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

@ -32,4 +32,4 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
| showZero | Whether to show badge when `count` is zero | boolean | `false` | |
| 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` | string | `''` | |
| title | Text to show when hovering over the badge | string | `count` | |
| title | Text to show when hovering over the badge | string | `count` | 3.5.0 |

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

@ -33,4 +33,4 @@ title: Badge
| showZero | 当数值为 0 时，是否展示 Badge | boolean | false | |
| status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' | |
| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | string | '' | |
| title | 设置鼠标放在状态点上时显示的文字 | string | `count` | |
| title | 设置鼠标放在状态点上时显示的文字 | string | `count` | 3.5.0 |

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

@ -15,12 +15,12 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
## API
| Property | Description | Type | Optional | Default |
| --- | --- | --- | --- | --- |
| itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode | | - |
| params | Routing parameters | object | | - |
| routes | The routing stack information of router | [routes\[\]](#routes) | | - |
| separator | Custom separator | string\|ReactNode | | `/` |
| Property | Description | Type | Optional | Default | Version |
| --- | --- | --- | --- | --- | --- |
| itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode | | - | |
| params | Routing parameters | object | | - | |
| routes | The routing stack information of router | [routes\[\]](#routes) | | - | |
| separator | Custom separator | string\|ReactNode | | `/` | |
### Use with browserHistory

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

@ -17,21 +17,21 @@ title: Breadcrumb
### Breadcrumb
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | - |
| params | 路由的参数 | object | - |
| routes | router 的路由栈信息 | [routes\[\]](#routes) | - |
| separator | 分隔符自定义 | string\|ReactNode | '/' |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | - | 3.17.0 |
| params | 路由的参数 | object | - | 3.17.0 |
| routes | router 的路由栈信息 | [routes\[\]](#routes) | - | 3.17.0 |
| separator | 分隔符自定义 | string\|ReactNode | '/' | 3.17.0 |
### Breadcrumb.Item
| 参数 | 参数 | 类型 | 默认值 |
| --------- | -------------- | -------------------------------------- | ------ |
| href | 链接的目的地 | string | - |
| separator | 自定义的分隔符 | string\|ReactNode | '/' |
| overlay | 下来菜单的内容 | [Menu](/components/menu) \| () => Menu | - |
| onClick | 单击事件 | (e:MouseEvent)=>void | - |
| 参数 | 参数 | 类型 | 默认值 | 版本 |
| --------- | -------------- | -------------------------------------- | ------ | ------ |
| href | 链接的目的地 | string | - | 3.17.0 |
| separator | 自定义的分隔符 | string\|ReactNode | '/' | 3.17.0 |
| overlay | 下来菜单的内容 | [Menu](/components/menu) \| () => Menu | - | 3.17.0 |
| onClick | 单击事件 | (e:MouseEvent)=>void | - | 3.17.0 |
### routes

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

@ -14,20 +14,20 @@ A button means an operation (or a series of operations). Clicking a button will
To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| disabled | disabled state of button | boolean | `false` |
| ghost | make background transparent and invert text and border colors, added in 2.7 | boolean | `false` |
| href | redirect url of link button | string | - |
| htmlType | set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |
| icon | set the icon of button, see: Icon component | string | - |
| loading | set the loading status of button | boolean \| { delay: number } | `false` |
| shape | can be set to `circle`, `round` or omitted | string | - |
| size | can be set to `small` `large` or omitted | string | `default` |
| target | same as target attribute of a, works when href is specified | string | - |
| type | can be set to `primary` `ghost` `dashed` `danger` `link`(added in 3.17) or omitted (meaning `default`) | string | `default` |
| onClick | set the handler to handle `click` event | (event) => void | - |
| block | option to fit button width to its parent width | boolean | `false` |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| disabled | disabled state of button | boolean | `false` | 3.5.1 |
| ghost | make background transparent and invert text and border colors, added in 2.7 | boolean | `false` | |
| href | redirect url of link button | string | - | |
| htmlType | set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | |
| icon | set the icon of button, see: Icon component | string | - | |
| loading | set the loading status of button | boolean \| { delay: number } | `false` | |
| shape | can be set to `circle`, `round` or omitted | string | - | |
| size | can be set to `small` `large` or omitted | string | `default` | |
| target | same as target attribute of a, works when href is specified | string | - | |
| type | can be set to `primary` `ghost` `dashed` `danger` `link`(added in 3.17) or omitted (meaning `default`) | string | `default` | |
| onClick | set the handler to handle `click` event | (event) => void | - | |
| block | option to fit button width to its parent width | boolean | `false` | 3.8.0 |
It accepts all props which native button support.

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

@ -17,20 +17,20 @@ subtitle: 按钮
按钮的属性说明如下：
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| disabled | 按钮失效状态 | boolean | `false` |
| ghost | 幽灵属性，使按钮背景透明，版本 2.7 中增加 | boolean | false |
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - |
| htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |
| icon | 设置按钮的图标类型 | string | - |
| loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` |
| shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设 | string | - |
| size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default` |
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - |
| type | 设置按钮类型，可选值为 `primary` `dashed` `danger` `link`(3.17 中增加) 或者不设 | string | - |
| onClick | 点击按钮时的回调 | (event) => void | - |
| block | 将按钮宽度调整为其父宽度的选项 | boolean | `false` |
| 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| disabled | 按钮失效状态 | boolean | `false` | 3.5.1 |
| ghost | 幽灵属性，使按钮背景透明，版本 2.7 中增加 | boolean | false | |
| href | 点击跳转的地址，指定此属性 button 的行为和 a 链接一致 | string | - | |
| htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | |
| icon | 设置按钮的图标类型 | string | - | |
| loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` | |
| shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设 | string | - | |
| size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default` | |
| target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | |
| type | 设置按钮类型，可选值为 `primary` `dashed` `danger` `link`(3.17 中增加) 或者不设 | string | - | |
| onClick | 点击按钮时的回调 | (event) => void | - | |
| block | 将按钮宽度调整为其父宽度的选项 | boolean | `false` | 3.8.0 |
支持原生 button 的其他所有属性。

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

@ -40,9 +40,9 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
| 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/) | current date |
| validRange | to set valid range | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | 3.3.0 |
| value | The current selected date | [moment](http://momentjs.com/) | current date | |
| 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） | - | |
| onChange | Callback for when date changes | function(date: moment） | - | 3.8.0 |
| headerRender | render custom header in panel | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | - | 3.19.0 |

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

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

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

@ -19,37 +19,37 @@ A card can be used to display content related to a single subject. The content c
### Card
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| actions | The action list, shows at the bottom of the Card. | Array&lt;ReactNode> | - |
| activeTabKey | Current TabPane's key | string | - |
| headStyle | Inline style to apply to the card head | object | - |
| bodyStyle | Inline style to apply to the card content | object | - |
| 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 | string\|ReactNode | - |
| 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&lt;{key: string, tab: ReactNode}> | - |
| size | Size of card | `default` \| `small` | `default` |
| title | Card title | string\|ReactNode | - |
| type | Card style type, can be set to `inner` or not set | string | - |
| onTabChange | Callback when tab is switched | (key) => void | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| actions | The action list, shows at the bottom of the Card. | Array&lt;ReactNode> | - | |
| activeTabKey | Current TabPane's key | string | - | 3.3.0 |
| headStyle | Inline style to apply to the card head | object | - | 3.8.0 |
| bodyStyle | Inline style to apply to the card content | object | - | |
| 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 | - | 3.3.0 |
| extra | Content to render in the top-right corner of the card | string\|ReactNode | - | |
| 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&lt;{key: string, tab: ReactNode}> | - | |
| size | Size of card | `default` \| `small` | `default` | 3.12.0 |
| title | Card title | string\|ReactNode | - | |
| type | Card style type, can be set to `inner` or not set | string | - | |
| onTabChange | Callback when tab is switched | (key) => void | - | |
### Card.Grid
| Property | Description | Type | Default |
| --------- | ------------------------- | ------ | ------- |
| className | className of container | string | - |
| style | style object of container | object | - |
| Property | Description | Type | Default | Version |
| --------- | ------------------------- | ------ | ------- | ------- |
| className | className of container | string | - | |
| style | style object of container | object | - | |
### Card.Meta
| Property | Description | Type | Default |
| ----------- | ------------------------- | --------- | ------- |
| avatar | avatar or icon | ReactNode | - |
| className | className of container | string | - |
| description | description content | ReactNode | - |
| style | style object of container | object | - |
| title | title content | ReactNode | - |
| Property | Description | Type | Default | Version |
| ----------- | ------------------------- | --------- | ------- | ------- |
| avatar | avatar or icon | ReactNode | - | |
| className | className of container | string | - | |
| description | description content | ReactNode | - | |
| style | style object of container | object | - | |
| title | title content | ReactNode | - | |

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

@ -20,37 +20,37 @@ cols: 1
### Card
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| actions | 卡片操作组，位置在卡片底部 | Array&lt;ReactNode> | - |
| activeTabKey | 当前激活页签的 key | string | - |
| headStyle | 自定义标题区域样式 | object | - |
| bodyStyle | 内容区域自定义样式 | object | - |
| bordered | 是否有边框 | boolean | true |
| cover | 卡片封面 | ReactNode | - |
| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | 第一个页签 |
| extra | 卡片右上角的操作区域 | string\|ReactNode | - |
| hoverable | 鼠标移过时可浮起 | boolean | false |
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false |
| tabList | 页签标题列表 | Array&lt;{key: string, tab: ReactNode}> | - |
| size | card 的尺寸 | `default` \| `small` | `default` |
| title | 卡片标题 | string\|ReactNode | - |
| type | 卡片类型，可设置为 `inner` 或 不设置 | string | - |
| onTabChange | 页签切换的回调 | (key) => void | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| actions | 卡片操作组，位置在卡片底部 | Array&lt;ReactNode> | - | |
| activeTabKey | 当前激活页签的 key | string | - | 3.3.0 |
| headStyle | 自定义标题区域样式 | object | - | 3.8.0 |
| bodyStyle | 内容区域自定义样式 | object | - | |
| bordered | 是否有边框 | boolean | true | |
| cover | 卡片封面 | ReactNode | - | |
| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | 第一个页签 | 3.3.0 |
| extra | 卡片右上角的操作区域 | string\|ReactNode | - | |
| hoverable | 鼠标移过时可浮起 | boolean | false | |
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false | |
| tabList | 页签标题列表 | Array&lt;{key: string, tab: ReactNode}> | - | |
| size | card 的尺寸 | `default` \| `small` | `default` | 3.12.0 |
| title | 卡片标题 | string\|ReactNode | - | |
| type | 卡片类型，可设置为 `inner` 或 不设置 | string | - | |
| onTabChange | 页签切换的回调 | (key) => void | - | |
### Card.Grid
| Property | Description | Type | Default |
| --------- | ---------------------- | ------ | ------- |
| className | 网格容器类名 | string | - |
| style | 定义网格容器类名的样式 | object | - |
| Property | Description | Type | Default | 版本 |
| --------- | ---------------------- | ------ | ------- | ---- |
| className | 网格容器类名 | string | - | |
| style | 定义网格容器类名的样式 | object | - | |
### Card.Meta
| Property | Description | Type | Default |
| ----------- | ------------------ | --------- | ------- |
| avatar | 头像/图标 | ReactNode | - |
| className | 容器类名 | string | - |
| description | 描述内容 | ReactNode | - |
| style | 定义容器类名的样式 | object | - |
| title | 标题内容 | ReactNode | - |
| Property | Description | Type | Default | 版本 |
| ----------- | ------------------ | --------- | ------- | ---- |
| avatar | 头像/图标 | ReactNode | - | |
| className | 容器类名 | string | - | |
| description | 描述内容 | ReactNode | - | |
| style | 定义容器类名的样式 | object | - | |
| title | 标题内容 | ReactNode | - | |

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

@ -26,10 +26,10 @@ A carousel component. Scales with its container.
## Methods
| Name | Description |
| --- | --- |
| goTo(slideNumber, dontAnimate) | Go to slide index, if dontAnimate=true, it happens without animation |
| next() | Change current slide to next slide |
| prev() | Change current slide to previous slide |
| Name | Description | Version |
| --- | --- | --- |
| goTo(slideNumber, dontAnimate) | Go to slide index, if dontAnimate=true, it happens without animation | 3.9.3 |
| next() | Change current slide to next slide | |
| prev() | Change current slide to previous slide | |
For more info on the parameters, refer to the <https://github.com/akiran/react-slick>

20
components/carousel/index.zh-CN.md
View File

@ -17,20 +17,20 @@ subtitle: 走马灯
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| afterChange | 切换面板的回调 | function(current) | 无 | |
| autoplay | 是否自动切换 | boolean | false | |
| beforeChange | 切换面板的回调 | function(from, to) | 无 | |
| dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | bottom | 3.17.0 |
| dots | 是否显示面板指示点 | boolean | true | |
| easing | 动画效果 | string | linear | |
| effect | 动画效果函数，可取 scrollx, fade | string | scrollx | |
| afterChange | 切换面板的回调 | function(current) | 无 | | |
| autoplay | 是否自动切换 | boolean | false | | |
| beforeChange | 切换面板的回调 | function(from, to) | 无 | | |
| dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | bottom | 3.17.0 | 3.17.0 |
| dots | 是否显示面板指示点 | boolean | true | | |
| easing | 动画效果 | string | linear | | |
| effect | 动画效果函数，可取 scrollx, fade | string | scrollx | | |
## 方法
| 名称 | 描述 |
| ------------------------------ | ------------------------------------------------- |
| goTo(slideNumber, dontAnimate) | 切换到指定面板, dontAnimate = true 时，不使用动画 |
| next() | 切换到下一面板 |
| prev() | 切换到上一面板 |
| goTo(slideNumber, dontAnimate) | 切换到指定面板, dontAnimate = true 时，不使用动画 | 3.9.3 |
| next() | 切换到下一面板 | |
| prev() | 切换到上一面板 | |
更多参数可参考：<https://github.com/akiran/react-slick>

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

@ -18,42 +18,42 @@ Cascade selection box.
<Cascader options={options} onChange={onChange} />
```
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| allowClear | whether allow clear | boolean | true |
| autoFocus | get focus when component mounted | boolean | false |
| changeOnSelect | change value on each selection if set to true, see above demo for details | boolean | false |
| className | additional css class | string | - |
| defaultValue | initial selected value | string\[] | \[] |
| disabled | whether disabled select | boolean | false |
| displayRender | 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' |
| fieldNames | custom field name for label and value and children (before 3.7.0 it calls `filedNames` which is typo）) | 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' |
| options | data options of cascade | [Option](#Option)[] | - |
| placeholder | input placeholder | string | 'Please select' |
| popupClassName | additional className of popup overlay | string | - |
| popupPlacement | use preset popup align config from builtinPlacements：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` |
| popupVisible | set visible of cascader popup | boolean | - |
| showSearch | Whether show search input in single mode. | boolean\|object | false |
| size | input size, one of `large` `default` `small` | string | `default` |
| style | additional style | string | - |
| suffixIcon | The custom suffix icon | ReactNode | - |
| value | selected value | string\[] | - |
| onChange | callback when finishing cascader select | `(value, selectedOptions) => void` | - |
| onPopupVisibleChange | callback when popup shown or hidden | `(value) => void` | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| allowClear | whether allow clear | boolean | true | |
| autoFocus | get focus when component mounted | boolean | false | |
| changeOnSelect | change value on each selection if set to true, see above demo for details | boolean | false | |
| className | additional css class | string | - | |
| defaultValue | initial selected value | string\[] | \[] | |
| disabled | whether disabled select | boolean | false | |
| displayRender | 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' | |
| fieldNames | custom field name for label and value and children (before 3.7.0 it calls `filedNames` which is typo）) | object | `{ label: 'label', value: 'value', children: 'children' }` | 3.7.0 |
| 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' | |
| options | data options of cascade | [Option](#Option)[] | - | |
| placeholder | input placeholder | string | 'Please select' | |
| popupClassName | additional className of popup overlay | string | - | |
| popupPlacement | use preset popup align config from builtinPlacements：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | |
| popupVisible | set visible of cascader popup | boolean | - | |
| showSearch | Whether show search input in single mode. | boolean\|object | false | |
| size | input size, one of `large` `default` `small` | string | `default` | |
| style | additional style | string | - | |
| suffixIcon | The custom suffix icon | ReactNode | - | 3.10.0 |
| value | selected value | string\[] | - | |
| onChange | callback when finishing cascader select | `(value, selectedOptions) => void` | - | |
| onPopupVisibleChange | callback when popup shown or hidden | `(value) => void` | - | |
Fields in `showSearch`:
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| filter | 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. | `function(inputValue, path): boolean` | |
| limit | Set the count of filtered items | number \| false | 50 |
| matchInputWidth | Whether the width of result list equals to input's | boolean | |
| render | Used to render filtered options. | `function(inputValue, path): ReactNode` | |
| sort | Used to sort filtered options. | `function(a, b, inputValue)` | |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| filter | 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. | `function(inputValue, path): boolean` | | |
| limit | Set the count of filtered items | number \| false | 50 | 3.11.0 |
| matchInputWidth | Whether the width of result list equals to input's | boolean | | |
| render | Used to render filtered options. | `function(inputValue, path): ReactNode` | | |
| sort | Used to sort filtered options. | `function(a, b, inputValue)` | | |
### Option
@ -68,10 +68,10 @@ interface Option {
## Methods
| Name | Description |
| ------- | ------------ |
| blur() | remove focus |
| focus() | get focus |
| Name | Description | Version |
| ------- | ------------ | ------- |
| blur() | remove focus | |
| focus() | get focus | |
<style>
.ant-cascader-picker {

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

@ -19,42 +19,42 @@ subtitle: 级联选择
<Cascader options={options} onChange={onChange} />
```
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| allowClear | 是否支持清除 | boolean | true |
| autoFocus | 自动获取焦点 | boolean | false |
| changeOnSelect | 当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | boolean | false |
| className | 自定义类名 | string | - |
| defaultValue | 默认的选中项 | string\[] | \[] |
| disabled | 禁用 | boolean | false |
| displayRender | 选择后展示的渲染函数 | `(label, selectedOptions) => ReactNode` | `label => label.join(' / ')` |
| expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | 'click' |
| fieldNames | 自定义 options 中 label name children 的字段（注意，3.7.0 之前的版本为 `filedNames`） | 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' |
| options | 可选项数据源 | [Option](#Option)[] | - |
| placeholder | 输入框占位文本 | string | '请选择' |
| popupClassName | 自定义浮层类名 | string | - |
| popupPlacement | 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` | Enum | `bottomLeft` |
| popupVisible | 控制浮层显隐 | boolean | - |
| showSearch | 在选择框中显示搜索框 | boolean | false |
| size | 输入框大小，可选 `large` `default` `small` | string | `default` |
| style | 自定义样式 | string | - |
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |
| value | 指定选中项 | string\[] | - |
| onChange | 选择完成后的回调 | `(value, selectedOptions) => void` | - |
| onPopupVisibleChange | 显示/隐藏浮层的回调 | `(value) => void` | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| allowClear | 是否支持清除 | boolean | true | |
| autoFocus | 自动获取焦点 | boolean | false | |
| changeOnSelect | 当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | boolean | false | |
| className | 自定义类名 | string | - | |
| defaultValue | 默认的选中项 | string\[] | \[] | |
| disabled | 禁用 | boolean | false | |
| displayRender | 选择后展示的渲染函数 | `(label, selectedOptions) => ReactNode` | `label => label.join(' / ')` | |
| expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | 'click' | |
| fieldNames | 自定义 options 中 label name children 的字段（注意，3.7.0 之前的版本为 `filedNames`） | object | `{ label: 'label', value: 'value', children: 'children' }` | 3.7.0 |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body | |
| loadData | 用于动态加载选项，无法与 `showSearch` 一起使用 | `(selectedOptions) => void` | - | |
| notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' | |
| options | 可选项数据源 | [Option](#Option)[] | - | |
| placeholder | 输入框占位文本 | string | '请选择' | |
| popupClassName | 自定义浮层类名 | string | - | |
| popupPlacement | 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` | Enum | `bottomLeft` | |
| popupVisible | 控制浮层显隐 | boolean | - | |
| showSearch | 在选择框中显示搜索框 | boolean | false | |
| size | 输入框大小，可选 `large` `default` `small` | string | `default` | |
| style | 自定义样式 | string | - | |
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | 3.10.0 |
| value | 指定选中项 | string\[] | - | |
| onChange | 选择完成后的回调 | `(value, selectedOptions) => void` | - | |
| onPopupVisibleChange | 显示/隐藏浮层的回调 | `(value) => void` | - | |
`showSearch` 为对象时，其中的字段：
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| filter | 接收 `inputValue` `path` 两个参数，当 `path` 符合筛选条件时，应返回 true，反之则返回 false。 | `function(inputValue, path): boolean` | |
| limit | 搜索结果展示数量 | number \| false | 50 |
| matchInputWidth | 搜索结果列表是否与输入框同宽 | boolean | |
| render | 用于渲染 filter 后的选项 | `function(inputValue, path): ReactNode` | |
| sort | 用于排序 filter 后的选项 | `function(a, b, inputValue)` | |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| filter | 接收 `inputValue` `path` 两个参数，当 `path` 符合筛选条件时，应返回 true，反之则返回 false。 | `function(inputValue, path): boolean` | | |
| limit | 搜索结果展示数量 | number \| false | 50 | 3.11.0 |
| matchInputWidth | 搜索结果列表是否与输入框同宽 | boolean | | |
| render | 用于渲染 filter 后的选项 | `function(inputValue, path): ReactNode` | | |
| sort | 用于排序 filter 后的选项 | `function(a, b, inputValue)` | | |
### Option
@ -69,10 +69,10 @@ interface Option {
## 方法
| 名称 | 描述 |
| ------- | -------- |
| blur() | 移除焦点 |
| focus() | 获取焦点 |
| 名称 | 描述 | 版本 |
| ------- | -------- | ---- |
| blur() | 移除焦点 | |
| focus() | 获取焦点 | |
<style>
.ant-cascader-picker {

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

@ -17,31 +17,31 @@ Checkbox component.
#### Checkbox
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| autoFocus | get focus when component mounted | boolean | false |
| checked | Specifies whether the checkbox is selected. | boolean | false |
| defaultChecked | Specifies the initial state: whether or not the checkbox is selected. | boolean | false |
| disabled | Disable checkbox | boolean | false |
| indeterminate | indeterminate checked state of checkbox | boolean | false |
| onChange | The callback function that is triggered when the state changes. | Function(e:Event) | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| autoFocus | get focus when component mounted | boolean | false | 3.6.2 |
| checked | Specifies whether the checkbox is selected. | boolean | false | 3.6.2 |
| defaultChecked | Specifies the initial state: whether or not the checkbox is selected. | boolean | false | 3.6.2 |
| disabled | Disable checkbox | boolean | false | 3.6.2 |
| indeterminate | indeterminate checked state of checkbox | boolean | false | 3.6.2 |
| onChange | The callback function that is triggered when the state changes. | Function(e:Event) | - | 3.6.2 |
#### Checkbox Group
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| defaultValue | Default selected value | string\[] | \[] |
| disabled | Disable all checkboxes | boolean | false |
| name | The `name` property of all `input[type="checkbox"]` children | string | - |
| options | Specifies options | string\[] | \[] |
| value | Used for setting the currently selected value. | string\[] | \[] |
| onChange | The callback function that is triggered when the state changes. | Function(checkedValue) | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| defaultValue | Default selected value | string\[] | \[] | 3.6.2 |
| disabled | Disable all checkboxes | boolean | false | 3.6.2 |
| name | The `name` property of all `input[type="checkbox"]` children | string | - | 3.16.0 |
| options | Specifies options | string\[] | \[] | 3.6.2 |
| value | Used for setting the currently selected value. | string\[] | \[] | 3.6.2 |
| onChange | The callback function that is triggered when the state changes. | Function(checkedValue) | - | 3.6.2 |
### Methods
#### Checkbox
| Name | Description |
| ------- | ------------ |
| blur() | remove focus |
| focus() | get focus |
| Name | Description | Version |
| ------- | ------------ | ------- |
| blur() | remove focus | 3.6.2 |
| focus() | get focus | 3.6.2 |

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

@ -18,31 +18,31 @@ title: Checkbox
#### Checkbox
| 参数 | 说明 | 类型 | 默认值 |
| -------------- | --------------------------------------- | ----------------- | ------ |
| autoFocus | 自动获取焦点 | boolean | false |
| checked | 指定当前是否选中 | boolean | false |
| defaultChecked | 初始是否选中 | boolean | false |
| disabled | 失效状态 | boolean | false |
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false |
| onChange | 变化时回调函数 | Function(e:Event) | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------------- | --------------------------------------- | ----------------- | ------ | ----- |
| autoFocus | 自动获取焦点 | boolean | false | 3.6.2 |
| checked | 指定当前是否选中 | boolean | false | 3.6.2 |
| defaultChecked | 初始是否选中 | boolean | false | 3.6.2 |
| disabled | 失效状态 | boolean | false | 3.6.2 |
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false | 3.6.2 |
| onChange | 变化时回调函数 | Function(e:Event) | - | 3.6.2 |
#### Checkbox Group
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| defaultValue | 默认选中的选项 | string\[] | \[] |
| disabled | 整组失效 | boolean | false |
| name | CheckboxGroup 下所有 `input[type="checkbox"]` 的 `name` 属性 | string | - |
| options | 指定可选项 | string\[] | \[] |
| value | 指定选中的选项 | string\[] | \[] |
| onChange | 变化时回调函数 | Function(checkedValue) | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| defaultValue | 默认选中的选项 | string\[] | \[] | 3.6.2 |
| disabled | 整组失效 | boolean | false | 3.6.2 |
| name | CheckboxGroup 下所有 `input[type="checkbox"]` 的 `name` 属性 | string | - | 3.16.0 |
| options | 指定可选项 | string\[] | \[] | 3.6.2 |
| value | 指定选中的选项 | string\[] | \[] | 3.6.2 |
| onChange | 变化时回调函数 | Function(checkedValue) | - | 3.6.2 |
### 方法
#### Checkbox
| 名称 | 描述 |
| ------- | -------- |
| blur() | 移除焦点 |
| focus() | 获取焦点 |
| 名称 | 描述 | 版本 |
| ------- | -------- | ----- |
| blur() | 移除焦点 | 3.6.2 |
| focus() | 获取焦点 | 3.6.2 |

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

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

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

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

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

@ -13,11 +13,11 @@ Comments can be used to enable discussions on an entity such as a page, blog pos
## API
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| actions | List of action items rendered below the comment content | Array<ReactNode> | - |
| author | The element to display as the comment author | string\|ReactNode | - |
| avatar | The element to display as the comment avatar - generally an antd `Avatar` or src | string\|ReactNode | - |
| children | Nested comments should be provided as children of the Comment | ReactNode | - |
| content | The main content of the comment | string\|ReactNode | - |
| datetime | A datetime element containing the time to be displayed | string\|ReactNode | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| actions | List of action items rendered below the comment content | Array<ReactNode> | - | 3.11.0 |
| author | The element to display as the comment author | string\|ReactNode | - | 3.11.0 |
| avatar | The element to display as the comment avatar - generally an antd `Avatar` or src | string\|ReactNode | - | 3.11.0 |
| children | Nested comments should be provided as children of the Comment | ReactNode | - | 3.11.0 |
| content | The main content of the comment | string\|ReactNode | - | 3.11.0 |
| datetime | A datetime element containing the time to be displayed | string\|ReactNode | - | 3.11.0 |

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

@ -14,11 +14,11 @@ cols: 1
## API
| Property | Description | Type | Default |
| -------- | ------------------------------------------------------ | ----------------- | ------- |
| actions | 在评论内容下面呈现的操作项列表 | Array<ReactNode> | - |
| author | 要显示为注释作者的元素 | string\|ReactNode | - |
| avatar | 要显示为评论头像的元素 - 通常是 antd `Avatar` 或者 src | string\|ReactNode | - |
| children | 嵌套注释应作为注释的子项提供 | ReactNode | - |
| content | 评论的主要内容 | string\|ReactNode | - |
| datetime | 展示时间描述 | string\|ReactNode | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| actions | 在评论内容下面呈现的操作项列表 | Array<ReactNode> | - | 3.11.0 |
| author | 要显示为注释作者的元素 | string\|ReactNode | - | 3.11.0 |
| avatar | 要显示为评论头像的元素 - 通常是 antd `Avatar` 或者 src | string\|ReactNode | - | 3.11.0 |
| children | 嵌套注释应作为注释的子项提供 | ReactNode | - | 3.11.0 |
| content | 评论的主要内容 | string\|ReactNode | - | 3.11.0 |
| datetime | 展示时间描述 | string\|ReactNode | - | 3.11.0 |

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

@ -35,10 +35,10 @@ Some component use dynamic style to support wave effect. You can config `csp` pr
## API
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| autoInsertSpaceInButton | Set `false` to remove space between 2 chinese characters on Button | boolean | true |
| csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - |
| 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` |
| prefixCls | set prefix class | string | ant |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| autoInsertSpaceInButton | Set `false` to remove space between 2 chinese characters on Button | boolean | true | 3.13.0 |
| csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - | 3.13.1 |
| renderEmpty | set empty content of components. Ref [Empty](/components/empty/) | Function(componentName: string): ReactNode | - | 3.12.2 |
| getPopupContainer | to set the container of the popup element. The default is to create a `div` element in `body`. | Function(triggerNode) | `() => document.body` | 3.11.0 |
| prefixCls | set prefix class | string | ant | 3.12.0 |

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

@ -36,10 +36,10 @@ return (
## API
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| autoInsertSpaceInButton | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格 | boolean | true |
| csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - |
| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | Function(componentName: string): ReactNode | - |
| getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | Function(triggerNode) | () => document.body |
| prefixCls | 设置统一样式前缀 | string | ant |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| autoInsertSpaceInButton | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格 | boolean | true | 3.13.0 |
| csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - | 3.13.1 |
| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | Function(componentName: string): ReactNode | - | 3.12.2 |
| getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | Function(triggerNode) | () => document.body | 3.11.0 |
| prefixCls | 设置统一样式前缀 | string | ant | 3.12.0 |

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

@ -45,80 +45,80 @@ import 'moment/locale/zh-cn';
The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicker.
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| allowClear | Whether to show clear button | boolean | true |
| autoFocus | get focus when component mounted | boolean | false |
| className | 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 | - |
| getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |
| locale | localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| mode | 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` | 'date' |
| open | open state of picker | boolean | - |
| placeholder | placeholder of date input | string\|RangePicker\[] | - |
| popupStyle | to customize the style of the popup calendar | object | {} |
| size | determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | string | - |
| suffixIcon | The custom suffix icon | ReactNode | - |
| style | to customize the style of the input box | object | {} |
| onOpenChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) | - |
| onPanelChange | callback when picker panel mode is changed | function(value, mode) | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| allowClear | Whether to show clear button | boolean | true | |
| autoFocus | get focus when component mounted | boolean | false | |
| className | 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 | - | 3.3.0 |
| getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - | |
| locale | localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |
| mode | 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` | 'date' | |
| open | open state of picker | boolean | - | |
| placeholder | placeholder of date input | string\|RangePicker\[] | - | |
| popupStyle | to customize the style of the popup calendar | object | {} | |
| size | determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | string | - | |
| suffixIcon | The custom suffix icon | ReactNode | - | 3.10.0 |
| style | to customize the style of the input box | object | {} | |
| onOpenChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) | - | |
| onPanelChange | callback when picker panel mode is changed | function(value, mode) | - | 3.5.0 |
### Common Methods
| Name | Description |
| ------- | ------------ |
| blur() | remove focus |
| focus() | get focus |
| Name | Description | Version |
| ------- | ------------ | ------- |
| blur() | remove focus | |
| focus() | get focus | |
### DatePicker
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| 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/) | - |
| 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. | string \| string[] | "YYYY-MM-DD" |
| renderExtraFooter | render extra footer in panel | (mode) => React.ReactNode | - |
| 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 | a 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) | - |
| 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/) | - | 3.10.8 |
| 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. | string \| string[] | "YYYY-MM-DD" | |
| renderExtraFooter | render extra footer in panel | (mode) => React.ReactNode | - | |
| 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 | a 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) | - | 3.19.8 |
### MonthPicker
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| defaultValue | to set default date | [moment](http://momentjs.com/) | - |
| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - |
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM" |
| monthCellContentRender | Custom month cell content render method | function(date, locale): ReactNode | - |
| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - |
| value | to set date | [moment](http://momentjs.com/) | - |
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| defaultValue | to set default date | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - | 3.10.8 |
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM" | |
| monthCellContentRender | Custom month cell content render method | function(date, locale): ReactNode | - | |
| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - | |
| value | to set date | [moment](http://momentjs.com/) | - | |
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | |
### WeekPicker
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| defaultValue | to set default date | [moment](http://momentjs.com/) | - |
| defaultPickerValue | to set default picker 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 | a 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 | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| defaultValue | to set default date | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | to set default picker date | [moment](http://momentjs.com/) | - | 3.10.8 |
| 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 | a 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 | - | 3.12.0 |
### RangePicker
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| 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/)\] | - | |
| defaultPickerValue | to set default picker date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)\] | - | 3.10.8 |
| disabledTime | to specify the time that cannot be selected | function(dates: \[moment, 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" | |
| ranges | preseted ranges for quick selection | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - | |
@ -127,7 +127,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
| 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 | a callback function, can be executed when the start time or the end time of the range is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - | |
| onCalendarChange | a callback function, can be executed when the start time or the end time of the range is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - | 3.10.9 |
| onChange | a callback function, can be executed when the selected time is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - | |
| onOk | callback when click ok button | function(dates: [moment](http://momentjs.com/)\[]) | - | |

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

@ -47,80 +47,80 @@ moment.locale('zh-cn');
以下 API 为 DatePicker、MonthPicker、RangePicker, WeekPicker 共享的 API。
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| allowClear | 是否显示清除按钮 | boolean | true |
| autoFocus | 自动获取焦点 | boolean | false |
| className | 选择器 className | string | '' |
| dateRender | 自定义日期单元格的内容 | function(currentDate: moment, today: moment) => React.ReactNode | - |
| disabled | 禁用 | boolean | false |
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 |
| dropdownClassName | 额外的弹出日历 className | string | - |
| getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
| 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` | 'date' |
| open | 控制弹层是否展开 | boolean | - |
| placeholder | 输入框提示文字 | string\|RangePicker\[] | - |
| popupStyle | 额外的弹出日历样式 | object | {} |
| size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | string | 无 |
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |
| style | 自定义输入框样式 | object | {} |
| onOpenChange | 弹出日历和关闭日历的回调 | function(status) | 无 |
| onPanelChange | 日历面板切换的回调 | function(value, mode) | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| allowClear | 是否显示清除按钮 | boolean | true | |
| autoFocus | 自动获取焦点 | boolean | false | |
| className | 选择器 className | string | '' | |
| dateRender | 自定义日期单元格的内容 | function(currentDate: moment, today: moment) => React.ReactNode | - | |
| disabled | 禁用 | boolean | false | |
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 | |
| dropdownClassName | 额外的弹出日历 className | string | - | 3.3.0 |
| getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 | |
| 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` | 'date' | |
| open | 控制弹层是否展开 | boolean | - | |
| placeholder | 输入框提示文字 | string\|RangePicker\[] | - | |
| popupStyle | 额外的弹出日历样式 | object | {} | |
| size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | string | 无 | |
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | 3.10.0 |
| style | 自定义输入框样式 | object | {} | |
| onOpenChange | 弹出日历和关闭日历的回调 | function(status) | 无 | |
| onPanelChange | 日历面板切换的回调 | function(value, mode) | - | 3.12.0 |
### 共同的方法
| 名称 | 描述 |
| ------- | -------- |
| blur() | 移除焦点 |
| focus() | 获取焦点 |
| 名称 | 描述 | 版本 |
| ------- | -------- | ---- |
| blur() | 移除焦点 | |
| focus() | 获取焦点 | |
### DatePicker
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| defaultValue | 默认日期，如果开始时间或结束时间为 `null` 或者 `undefined`，日期范围将是一个开区间 | [moment](http://momentjs.com/) | 无 |
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 |
| disabledTime | 不可选择的时间 | function(date) | 无 |
| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [moment.js](http://momentjs.com/) | string \| string[] | "YYYY-MM-DD" |
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - |
| 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) | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| defaultValue | 默认日期，如果开始时间或结束时间为 `null` 或者 `undefined`，日期范围将是一个开区间 | [moment](http://momentjs.com/) | 无 | |
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 | 3.10.8 |
| disabledTime | 不可选择的时间 | function(date) | 无 | |
| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [moment.js](http://momentjs.com/) | string \| string[] | "YYYY-MM-DD" | |
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
| 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) | - | 3.5.0 |
### MonthPicker
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 |
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM" |
| monthCellContentRender | 自定义的月份内容渲染方法 | function(date, locale): ReactNode | - |
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |
| value | 日期 | [moment](http://momentjs.com/) | 无 |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 | |
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 | 3.10.8 |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM" | |
| monthCellContentRender | 自定义的月份内容渲染方法 | function(date, locale): ReactNode | - | |
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
| value | 日期 | [moment](http://momentjs.com/) | 无 | |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
### WeekPicker
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - |
| defaultPickerValue | 默认面板日期 | [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 | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 | 3.10.8 |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-wo" | |
| value | 日期 | [moment](http://momentjs.com/) | - | |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | 3.12.0 |
### RangePicker
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | 无 | |
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/)\[] | 无 | |
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/)\[] | 无 | 3.10.8 |
| disabledTime | 不可选择的时间 | function(dates: \[moment, moment\], partial: `'start'|'end'`) | 无 | |
| format | 展示的日期格式 | string | "YYYY-MM-DD HH:mm:ss" | |
| ranges | 预设时间范围快捷选择 | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | 无 | |

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

@ -15,17 +15,17 @@ Commonly displayed on the details page.
### Descriptions
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| title | The title of the description list, placed at the top | ReactNode | - |
| 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` | false |
| layout | Define description layout | `horizontal | vertical` | `horizontal` |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| title | The title of the description list, placed at the top | ReactNode | - | 3.19.0 |
| bordered | whether to display the border | boolean | false | 3.19.0 |
| 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 | 3.19.0 |
| size | set the size of the list. Can be set to `middle`,`small`, or not filled | `default | middle | small` | false | 3.19.0 |
| layout | Define description layout | `horizontal | vertical` | `horizontal` | 3.19.8 |
### DescriptionItem
| Property | Description | Type | Default |
| -------- | ------------------------------ | --------- | ------- |
| label | description of the content | ReactNode | - |
| span | The number of columns included | number | 1 |
| Property | Description | Type | Default | Version |
| -------- | ------------------------------ | --------- | ------- | ------- |
| label | description of the content | ReactNode | - | 3.19.0 |
| span | The number of columns included | number | 1 | 3.19.0 |

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

@ -16,17 +16,17 @@ cols: 1
### Descriptions
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| title | 描述列表的标题，显示在最顶部 | ReactNode | - |
| bordered | 是否展示边框 | boolean | false |
| column | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number | 3 |
| size | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效） | `default | middle | small` | false |
| layout | 描述布局 | `horizontal | vertical` | `horizontal` |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| title | 描述列表的标题，显示在最顶部 | ReactNode | - | 3.19.0 |
| bordered | 是否展示边框 | boolean | false | 3.19.0 |
| column | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number | 3 | 3.19.0 |
| size | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效） | `default | middle | small` | false | 3.19.0 |
| layout | 描述布局 | `horizontal | vertical` | `horizontal` | 3.19.8 |
### DescriptionItem
| 参数 | 说明 | 类型 | 默认值 |
| ----- | ------------ | --------- | ------ |
| label | 内容的描述 | ReactNode | - |
| span | 包含列的数量 | number | 1 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----- | ------------ | --------- | ------ | ------ |
| label | 内容的描述 | ReactNode | - | 3.19.0 |
| span | 包含列的数量 | number | 1 | 3.19.0 |

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

@ -16,10 +16,10 @@ A divider line separates different content.
### Divider
| Property | Description | Type | Default |
| ----------- | -------------------------------- | ----------------------------- | ------------ |
| className | className of container | string | - |
| dashed | whether line is dashed | boolean | false |
| orientation | position of title inside divider | enum: `left` `right` `center` | `center` |
| style | style object of container | object | - |
| type | direction type of divider | enum: `horizontal` `vertical` | `horizontal` |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| className | className of container | string | - | 3.5.4 |
| dashed | whether line is dashed | boolean | false | |
| orientation | position of title inside divider | enum: `left` `right` `center` | `center` | 3.3.0 |
| style | style object of container | object | - | 3.5.4 |
| type | direction type of divider | enum: `horizontal` `vertical` | `horizontal` | |

14
components/divider/index.zh-CN.md
View File

@ -14,10 +14,10 @@ subtitle: 分割线
## API
| 参数 | 说明 | 类型 | 默认值 |
| ----------- | ---------------- | ----------------------------- | ------------ |
| className | 分割线样式类 | string | - |
| dashed | 是否虚线 | boolean | false |
| orientation | 分割线标题的位置 | enum: `left` `right` | `center` |
| style | 分割线样式对象 | object | - |
| type | 水平还是垂直类型 | enum: `horizontal` `vertical` | `horizontal` |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----------- | ---------------- | ----------------------------- | ------------ | ----- |
| className | 分割线样式类 | string | - | 3.5.4 |
| dashed | 是否虚线 | boolean | false | |
| orientation | 分割线标题的位置 | enum: `left` `right` | `center` | 3.4.1 |
| style | 分割线样式对象 | object | - | 3.5.4 |
| type | 水平还是垂直类型 | enum: `horizontal` `vertical` | `horizontal` | |

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

@ -17,26 +17,26 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
## API
| Props | Description | Type | Default |
| --- | --- | --- | --- |
| closable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | boolean | true |
| destroyOnClose | Whether to unmount child components on closing drawer or not. | boolean | false |
| getContainer | Return the mounted node for Drawer. | HTMLElement \| `() => HTMLElement` \| Selectors | 'body' |
| 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. | object | {} |
| style | Style of drawer wrapper | object | - |
| bodyStyle | Style of floating layer, typically used for adjusting its position. | object | - |
| title | The title for Drawer. | string\|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 | - |
| 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 |
| Props | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| closable | Whether a close (x) button is visible on top right of the Drawer dialog or not. | boolean | true | 3.7.0 |
| destroyOnClose | Whether to unmount child components on closing drawer or not. | boolean | false | 3.7.0 |
| getContainer | Return the mounted node for Drawer. | HTMLElement \| `() => HTMLElement` \| Selectors | 'body' | 3.7.0 |
| mask | Whether to show mask or not. | Boolean | true | 3.7.0 |
| maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | boolean | true | 3.7.0 |
| maskStyle | Style for Drawer's mask element. | object | {} | 3.7.0 |
| style | Style of drawer wrapper | object | - | 3.7.0 |
| bodyStyle | Style of floating layer, typically used for adjusting its position. | object | - | 3.12.0 |
| title | The title for Drawer. | string\|ReactNode | - | 3.7.0 |
| visible | Whether the Drawer dialog is visible or not. | boolean | false | 3.7.0 |
| width | Width of the Drawer dialog. | string\|number | 256 | 3.7.0 |
| height | placement is `top` or `bottom`, height of the Drawer dialog. | string\|number | - | 3.9.0 |
| className | The class name of the container of the Drawer dialog. | string | - | 3.8.0 |
| zIndex | The `z-index` of the Drawer. | Number | 1000 | 3.7.0 |
| placement | The placement of the Drawer. | 'top' \| 'right' \| 'bottom' \| 'left' | 'right' | 3.7.0 |
| onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button. | function(e) | - | 3.7.0 |
| afterVisibleChange | Callback after the animation ends when switching drawers. | function(visible) | - | 3.17.0 |
| keyboard | Whether support press esc to close | Boolean | true | 3.19.8 |
<style>
#_hj_feedback_container {

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

@ -16,26 +16,26 @@ title: Drawer
## API
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| closable | 是否显示右上角的关闭按钮 | boolean | true |
| destroyOnClose | 关闭时销毁 Drawer 里的子元素 | boolean | false |
| getContainer | 指定 Drawer 挂载的 HTML 节点 | HTMLElement \| `() => HTMLElement` \| Selectors | 'body' |
| maskClosable | 点击蒙层是否允许关闭 | boolean | true |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| closable | 是否显示右上角的关闭按钮 | boolean | true | 3.7.0 |
| destroyOnClose | 关闭时销毁 Drawer 里的子元素 | boolean | false | 3.7.0 |
| getContainer | 指定 Drawer 挂载的 HTML 节点 | HTMLElement \| `() => HTMLElement` \| Selectors | 'body' | 3.7.0 |
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | 3.7.0 | 3.7.0 |
| mask | 是否展示遮罩 | Boolean | true |
| maskStyle | 遮罩样式 | object | {} |
| style | 可用于设置 Drawer 最外层容器的样式 | object | - |
| bodyStyle | 可用于设置 Drawer 的样式，调整浮层位置等 | object | - |
| title | 标题 | string \| 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 |
| maskStyle | 遮罩样式 | object | {} | 3.7.0 |
| style | 可用于设置 Drawer 最外层容器的样式 | object | - | 3.7.0 |
| bodyStyle | 可用于设置 Drawer 的样式，调整浮层位置等 | object | - | 3.12.0 |
| title | 标题 | string \| ReactNode | - | 3.7.0 |
| visible | Drawer 是否可见 | boolean | - | 3.7.0 |
| width | 宽度 | string \| number | 256 | 3.7.0 |
| height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 256 | 3.9.0 |
| className | 对话框外层容器的类名 | string | - | 3.8.0 |
| zIndex | 设置 Drawer 的 `z-index` | Number | 1000 | 3.7.0 |
| placement | 抽屉的方向 | 'top' \| 'right' \| 'bottom' \| 'left' | 'right' | 3.7.0 |
| onClose | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | 无 | 3.7.0 |
| afterVisibleChange | 切换抽屉时动画结束后的回调 | function(visible) | 无 | 3.17.0 |
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | 3.19.8 |
<style>
#_hj_feedback_container {

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

@ -14,17 +14,17 @@ If there are too many operations to display, you can wrap them in a `Dropdown`.
### Dropdown
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| 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`, you can reset it to the scrolling area and make a relative reposition. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | `() => document.body` |
| overlay | the dropdown menu | [Menu](/components/menu) \| () => Menu | - |
| overlayClassName | Class name of the dropdown root element | string | - |
| overlayStyle | Style of the dropdown root element | object | - |
| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
| trigger | the trigger mode which executes the drop-down action, hover doesn't work on mobile device | Array&lt;`click`\|`hover`\|`contextMenu`> | `['hover']` |
| visible | whether the dropdown menu is visible | boolean | - |
| onVisibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | Function(visible) | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| 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`, you can reset it to the scrolling area and make a relative reposition. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | `() => document.body` | |
| overlay | the dropdown menu | [Menu](/components/menu) \| () => Menu | - | |
| overlayClassName | Class name of the dropdown root element | string | - | 3.11.0 |
| overlayStyle | Style of the dropdown root element | object | - | 3.11.0 |
| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | |
| trigger | the trigger mode which executes the drop-down action, hover doesn't work on mobile device | Array&lt;`click`\|`hover`\|`contextMenu`> | `['hover']` | |
| visible | whether the dropdown menu is visible | boolean | - | |
| onVisibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | Function(visible) | - | |
You should use [Menu](/components/menu/) as `overlay`. The menu items and dividers are also available by using `Menu.Item` and `Menu.Divider`.

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

@ -15,17 +15,17 @@ title: Dropdown
属性如下
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| disabled | 菜单是否禁用 | boolean | - |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | `() => document.body` |
| overlay | 菜单 | [Menu](/components/menu) \| () => Menu | - |
| overlayClassName | 下拉根元素的类名称 | string | - |
| overlayStyle | 下拉根元素的样式 | object | - |
| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
| trigger | 触发下拉的行为, 移动端不支持 hover | Array&lt;`click`\|`hover`\|`contextMenu`> | `['hover']` |
| visible | 菜单是否显示 | boolean | - |
| onVisibleChange | 菜单显示状态改变时调用，参数为 visible | Function(visible) | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| disabled | 菜单是否禁用 | boolean | - | |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | `() => document.body` | |
| overlay | 菜单 | [Menu](/components/menu) \| () => Menu | - | |
| overlayClassName | 下拉根元素的类名称 | string | - | 3.11.0 |
| overlayStyle | 下拉根元素的样式 | object | - | 3.11.0 |
| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | |
| trigger | 触发下拉的行为, 移动端不支持 hover | Array&lt;`click`\|`hover`\|`contextMenu`> | `['hover']` | |
| visible | 菜单是否显示 | boolean | - | |
| onVisibleChange | 菜单显示状态改变时调用，参数为 visible | Function(visible) | - | |
`overlay` 菜单使用 [Menu](/components/menu/)，还包括菜单项 `Menu.Item`，分割线 `Menu.Divider`。
@ -37,7 +37,7 @@ title: Dropdown
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| disabled | 菜单是否禁用 | boolean | - | | |
| disabled | 菜单是否禁用 | boolean | - | |
| icon | 右侧的 icon | ReactNode | - | 3.17.0 |
| overlay | 菜单 | [Menu](/components/menu/) | - | |
| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | |

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

@ -20,11 +20,11 @@ Empty state placeholder.
</Empty>
```
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| description | Customize description | string \| ReactNode | - |
| imageStyle | style of image | CSSProperties | - |
| image | Customize image. Will tread as image url when string provided. | string \| ReactNode | `Empty.PRESENTED_IMAGE_DEFAULT` |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| description | Customize description | string \| ReactNode | - | 3.12.0 |
| imageStyle | style of image | CSSProperties | - | 3.16.0 |
| image | Customize image. Will tread as image url when string provided. | string \| ReactNode | `Empty.PRESENTED_IMAGE_DEFAULT` | 3.12.0 |
## Built-in images

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

@ -21,11 +21,11 @@ cols: 1
</Empty>
```
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| description | 自定义描述内容 | string \| ReactNode | - |
| imageStyle | 图片样式 | CSSProperties | - |
| image | 设置显示图片，为 string 时表示自定义图片地址。 | string \| ReactNode | `Empty.PRESENTED_IMAGE_DEFAULT` |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| description | 自定义描述内容 | string \| ReactNode | - | 3.12.0 |
| imageStyle | 图片样式 | CSSProperties | - | 3.16.0 |
| image | 设置显示图片，为 string 时表示自定义图片地址。 | string \| ReactNode | `Empty.PRESENTED_IMAGE_DEFAULT` | 3.12.0 |
## 内置图片 (3.16.0 以上版本)

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

@ -34,16 +34,16 @@ A form consists of one or more form fields whose type includes input, textarea,
**more example [rc-form](http://react-component.github.io/form/)**。
| Property | Description | Type | Default Value |
| --- | --- | --- | --- |
| form | Decorated by `Form.create()` will be automatically set `this.props.form` property | object | n/a |
| hideRequiredMark | Hide required mark of all form items | Boolean | false |
| labelAlign | Label text align | 'left' \| 'right' | 'right' |
| labelCol | (Added in 3.14.0. Previous version can only set on FormItem.) The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](https://ant.design/components/grid/#Col) | |
| layout | Define form layout | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
| onSubmit | Defines a function will be called if form data validation is successful. | Function(e:Event) | |
| wrapperCol | (Added in 3.14.0. Previous version can only set on FormItem.) The layout for input controls, same as `labelCol` | [object](https://ant.design/components/grid/#Col) | |
| colon | change default props colon value of Form.Item | boolean | true |
| Property | Description | Type | Default Value | Version |
| --- | --- | --- | --- | --- |
| form | Decorated by `Form.create()` will be automatically set `this.props.form` property | object | n/a | |
| hideRequiredMark | Hide required mark of all form items | Boolean | false | |
| labelAlign | Label text align | 'left' \| 'right' | 'right' | 3.15.0 |
| labelCol | (Added in 3.14.0. Previous version can only set on FormItem.) The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](https://ant.design/components/grid/#Col) | | 3.14.0 |
| layout | Define form layout | 'horizontal'\|'vertical'\|'inline' | 'horizontal' | |
| onSubmit | Defines a function will be called if form data validation is successful. | Function(e:Event) | | |
| wrapperCol | (Added in 3.14.0. Previous version can only set on FormItem.) The layout for input controls, same as `labelCol` | [object](https://ant.design/components/grid/#Col) | | 3.14.0 |
| colon | change default props colon value of Form.Item | boolean | true | 3.15.0 |
### Form.create(options)
@ -57,13 +57,13 @@ CustomizedForm = Form.create({})(CustomizedForm);
The following `options` are available:
| Property | Description | Type |
| --- | --- | --- |
| mapPropsToFields | Convert props to field value(e.g. reading the values from Redux store). And you must mark returned fields with [`Form.createFormField`](#Form.createFormField). Please note that the form fields will become controlled components. Properties like errors will not be automatically mapped and need to be manually passed in. | (props) => ({ \[fieldName\]: FormField { value } }) |
| name | Set the id prefix of fields under form | - |
| validateMessages | Default validate message. And its format is similar with [newMessages](https://github.com/yiminghe/async-validator/blob/master/src/messages.js)'s returned value | Object { \[nested.path]: String } |
| onFieldsChange | Specify a function that will be called when the fields (including errors) of a `Form.Item` gets changed. Usage example: saving the field's value to Redux store. | Function(props, changedFields, allFields) |
| onValuesChange | A handler while value of any field is changed | (props, changedValues, allValues) => void |
| Property | Description | Type | Version |
| --- | --- | --- | --- |
| mapPropsToFields | Convert props to field value(e.g. reading the values from Redux store). And you must mark returned fields with [`Form.createFormField`](#Form.createFormField). Please note that the form fields will become controlled components. Properties like errors will not be automatically mapped and need to be manually passed in. | (props) => ({ \[fieldName\]: FormField { value } }) | |
| name | Set the id prefix of fields under form | - | 3.12.0 |
| validateMessages | Default validate message. And its format is similar with [newMessages](https://github.com/yiminghe/async-validator/blob/master/src/messages.js)'s returned value | Object { \[nested.path]: String } | |
| onFieldsChange | Specify a function that will be called when the fields (including errors) of a `Form.Item` gets changed. Usage example: saving the field's value to Redux store. | Function(props, changedFields, allFields) | |
| onValuesChange | A handler while value of any field is changed | (props, changedValues, allValues) => void | |
If you want to get `ref` after `Form.create`, you can use `wrappedComponentRef` provided by `rc-form`, [details can be viewed here](https://github.com/react-component/form#note-use-wrappedcomponentref-instead-of-withref-after-rc-form140).
@ -80,21 +80,21 @@ If the form has been decorated by `Form.create` then it has `this.props.form` pr
> Note: Before using `getFieldsValue` `getFieldValue` `setFieldsValue` and so on, please make sure that corresponding field had been registered with `getFieldDecorator`.
| Method | Description | Type |
| --- | --- | --- |
| Method | Description | Type | Version |
| --- | --- | --- | --- |
| getFieldDecorator | Two-way binding for form, please read below for details. | |
| getFieldError | Get the error of a field. | Function(name) |
| getFieldsError | Get the specified fields' error. If you don't specify a parameter, you will get all fields' error. | Function(\[names: string\[]]) |
| getFieldsValue | Get the specified fields' values. If you don't specify a parameter, you will get all fields' values. | Function(\[fieldNames: string\[]]) |
| getFieldValue | Get the value of a field. | Function(fieldName: string) |
| isFieldsTouched | Check whether any of fields is touched by `getFieldDecorator`'s `options.trigger` event | (names?: string\[]) => boolean |
| isFieldTouched | Check whether a field is touched by `getFieldDecorator`'s `options.trigger` event | (name: string) => boolean |
| isFieldValidating | Check if the specified field is being validated. | Function(name) |
| resetFields | Reset the specified fields' value(to `initialValue`) and status. If you don't specify a parameter, all the fields will be reset. | Function(\[names: string\[]]) |
| setFields | Set value and error state of fields. [Code Sample](https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79) | ({<br />&nbsp;&nbsp;\[fieldName\]: {value: any, errors: \[Error\] }<br />}) => void |
| setFieldsValue | Set the value of a field. (Note: please don't use it in `componentWillReceiveProps`, otherwise, it will cause an endless loop, [reason](https://github.com/ant-design/ant-design/issues/2985)) | ({ \[fieldName\]&#x3A; value }) => void |
| validateFields | Validate the specified fields and get theirs values and errors. If you don't specify the parameter of fieldNames, you will validate all fields. | (<br />&nbsp;&nbsp;\[fieldNames: string\[]],<br />&nbsp;&nbsp;\[options: object\],<br />&nbsp;&nbsp;callback(errors, values)<br />) => void |
| validateFieldsAndScroll | This function is similar to `validateFields`, but after validation, if the target field is not in visible area of form, form will be automatically scrolled to the target field area. | same as `validateFields` |
| getFieldError | Get the error of a field. | Function(name) | |
| getFieldsError | Get the specified fields' error. If you don't specify a parameter, you will get all fields' error. | Function(\[names: string\[]]) | |
| getFieldsValue | Get the specified fields' values. If you don't specify a parameter, you will get all fields' values. | Function(\[fieldNames: string\[]]) | |
| getFieldValue | Get the value of a field. | Function(fieldName: string) | |
| isFieldsTouched | Check whether any of fields is touched by `getFieldDecorator`'s `options.trigger` event | (names?: string\[]) => boolean | |
| isFieldTouched | Check whether a field is touched by `getFieldDecorator`'s `options.trigger` event | (name: string) => boolean | |
| isFieldValidating | Check if the specified field is being validated. | Function(name) | |
| resetFields | Reset the specified fields' value(to `initialValue`) and status. If you don't specify a parameter, all the fields will be reset. | Function(\[names: string\[]]) | |
| setFields | Set value and error state of fields. [Code Sample](https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79) | ({<br />&nbsp;&nbsp;\[fieldName\]: {value: any, errors: \[Error\] }<br />}) => void | |
| setFieldsValue | Set the value of a field. (Note: please don't use it in `componentWillReceiveProps`, otherwise, it will cause an endless loop, [reason](https://github.com/ant-design/ant-design/issues/2985)) | ({ \[fieldName\]&#x3A; value }) => void | |
| validateFields | Validate the specified fields and get theirs values and errors. If you don't specify the parameter of fieldNames, you will validate all fields. | (<br />&nbsp;&nbsp;\[fieldNames: string\[]],<br />&nbsp;&nbsp;\[options: object\],<br />&nbsp;&nbsp;callback(errors, values)<br />) => void | |
| validateFieldsAndScroll | This function is similar to `validateFields`, but after validation, if the target field is not in visible area of form, form will be automatically scrolled to the target field area. | same as `validateFields` | |
### validateFields/validateFieldsAndScroll
@ -113,12 +113,12 @@ validateFields(['field1', 'field2'], options, (errors, values) => {
});
```
| Method | Description | Type | Default |
| --- | --- | --- | --- |
| options.first | If `true`, every field will stop validation at first failed rule | boolean | false |
| options.firstFields | Those fields will stop validation at first failed rule | String\[] | \[] |
| options.force | Should validate validated field again when `validateTrigger` is been triggered again | boolean | false |
| options.scroll | Config scroll behavior of `validateFieldsAndScroll`, more: [dom-scroll-into-view's config](https://github.com/yiminghe/dom-scroll-into-view#function-parameter) | Object | {} |
| Method | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| options.first | If `true`, every field will stop validation at first failed rule | boolean | false | 3.9.3 |
| options.firstFields | Those fields will stop validation at first failed rule | String\[] | \[] | 3.9.3 |
| options.force | Should validate validated field again when `validateTrigger` is been triggered again | boolean | false | 3.9.3 |
| options.scroll | Config scroll behavior of `validateFieldsAndScroll`, more: [dom-scroll-into-view's config](https://github.com/yiminghe/dom-scroll-into-view#function-parameter) | Object | {} | 3.9.3 |
#### Callback arguments example of validateFields
@ -172,19 +172,19 @@ If you use `react@<15.3.0`, then, you can't use `getFieldDecorator` in stateless
#### getFieldDecorator(id, options) parameters
| Property | Description | Type | Default Value |
| --- | --- | --- | --- |
| id | The unique identifier is required. support [nested fields format](https://github.com/react-component/form/pull/48). | string | |
| options.getValueFromEvent | Specify how to get value from event or other onChange arguments | function(..args) | [reference](https://github.com/react-component/form#option-object) |
| options.getValueProps | Get the component props according to field value. | function(value): any | [reference](https://github.com/react-component/form#option-object) |
| options.initialValue | You can specify initial value, type, optional value of children node. (Note: Because `Form` will test equality with `===` internally, we recommend to use variable as `initialValue`, instead of literal) | | n/a |
| options.normalize | Normalize value to form component, [a select-all example](https://codepen.io/afc163/pen/JJVXzG?editors=001) | function(value, prevValue, allValues): any | - |
| options.preserve | Keep the field even if field removed | boolean | - |
| options.rules | Includes validation rules. Please refer to "Validation Rules" part for details. | object\[] | n/a |
| options.trigger | When to collect the value of children node | string | 'onChange' |
| options.validateFirst | Whether stop validate on first rule of error for this field. | boolean | false |
| options.validateTrigger | When to validate the value of children node. | string\|string\[] | 'onChange' |
| options.valuePropName | Props of children node, for example, the prop of Switch is 'checked'. | string | 'value' |
| Property | Description | Type | Default Value | Version |
| --- | --- | --- | --- | --- |
| id | The unique identifier is required. support [nested fields format](https://github.com/react-component/form/pull/48). | string | | |
| options.getValueFromEvent | Specify how to get value from event or other onChange arguments | function(..args) | [reference](https://github.com/react-component/form#option-object) | |
| options.getValueProps | Get the component props according to field value. | function(value): any | [reference](https://github.com/react-component/form#option-object) | 3.9.0 |
| options.initialValue | You can specify initial value, type, optional value of children node. (Note: Because `Form` will test equality with `===` internally, we recommend to use variable as `initialValue`, instead of literal) | | n/a | |
| options.normalize | Normalize value to form component, [a select-all example](https://codepen.io/afc163/pen/JJVXzG?editors=001) | function(value, prevValue, allValues): any | - | |
| options.preserve | Keep the field even if field removed | boolean | - | 3.12.0 |
| options.rules | Includes validation rules. Please refer to "Validation Rules" part for details. | object\[] | n/a | |
| options.trigger | When to collect the value of children node | string | 'onChange' | |
| options.validateFirst | Whether stop validate on first rule of error for this field. | boolean | false | |
| options.validateTrigger | When to validate the value of children node. | string\|string\[] | 'onChange' | |
| options.valuePropName | Props of children node, for example, the prop of Switch is 'checked'. | string | 'value' | |
More option at [rc-form option](https://github.com/react-component/form#option-object)。
@ -207,19 +207,19 @@ Note: if Form.Item has multiple children that had been decorated by `getFieldDec
### Validation Rules
| Property | Description | Type | Default Value |
| --- | --- | --- | --- |
| enum | validate a value from a list of possible values | string | - |
| len | validate an exact length of a field | number | - |
| max | validate a max length of a field | number | - |
| message | validation error message | string\|ReactNode | - |
| min | validate a min length of a field | number | - |
| pattern | validate from a regular expression | RegExp | - |
| required | indicates whether field is required | boolean | `false` |
| transform | transform a value before validation | function(value) => transformedValue:any | - |
| type | built-in validation type, [available options](https://github.com/yiminghe/async-validator#type) | string | 'string' |
| validator | custom validate function (Note: [callback must be called](https://github.com/ant-design/ant-design/issues/5155)) | function(rule, value, callback) | - |
| whitespace | treat required fields that only contain whitespace as errors | boolean | `false` |
| Property | Description | Type | Default Value | Version |
| --- | --- | --- | --- | --- |
| enum | validate a value from a list of possible values | string | - | |
| len | validate an exact length of a field | number | - | |
| max | validate a max length of a field | number | - | |
| message | validation error message | string\|ReactNode | - | |
| min | validate a min length of a field | number | - | |
| pattern | validate from a regular expression | RegExp | - | |
| required | indicates whether field is required | boolean | `false` | |
| transform | transform a value before validation | function(value) => transformedValue:any | - | |
| type | built-in validation type, [available options](https://github.com/yiminghe/async-validator#type) | string | 'string' | |
| validator | custom validate function (Note: [callback must be called](https://github.com/ant-design/ant-design/issues/5155)) | function(rule, value, callback) | - | |
| whitespace | treat required fields that only contain whitespace as errors | boolean | `false` | |
See more advanced usage at [async-validator](https://github.com/yiminghe/async-validator).

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

@ -37,16 +37,16 @@ title: Form
**更多示例参考 [rc-form](http://react-component.github.io/form/)**。
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| form | 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性 | object | - |
| hideRequiredMark | 隐藏所有表单项的必选标记 | Boolean | false |
| labelAlign | label 标签的文本对齐方式 | 'left' \| 'right' | 'right' |
| labelCol | （3.14.0 新增，之前的版本只能设置到 FormItem 上。）label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](https://ant.design/components/grid/#Col) | |
| layout | 表单布局 | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
| onSubmit | 数据验证成功后回调事件 | Function(e:Event) | |
| wrapperCol | （3.14.0 新增，之前的版本只能设置到 FormItem 上。）需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](https://ant.design/components/grid/#Col) | |
| colon | 配置 Form.Item 的 colon 的默认值 | boolean | true |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| form | 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性 | object | - | |
| hideRequiredMark | 隐藏所有表单项的必选标记 | Boolean | false | |
| labelAlign | label 标签的文本对齐方式 | 'left' \| 'right' | 'right' | 3.15.0 |
| labelCol | （3.14.0 新增，之前的版本只能设置到 FormItem 上。）label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](https://ant.design/components/grid/#Col) | | 3.14.0 |
| layout | 表单布局 | 'horizontal'\|'vertical'\|'inline' | 'horizontal' | |
| onSubmit | 数据验证成功后回调事件 | Function(e:Event) | | |
| wrapperCol | （3.14.0 新增，之前的版本只能设置到 FormItem 上。）需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](https://ant.design/components/grid/#Col) | | 3.14.0 |
| colon | 配置 Form.Item 的 colon 的默认值 | boolean | true | 3.15.0 |
### Form.create(options)
@ -60,13 +60,13 @@ CustomizedForm = Form.create({})(CustomizedForm);
`options` 的配置项如下。
| 参数 | 说明 | 类型 |
| --- | --- | --- |
| mapPropsToFields | 把父组件的属性映射到表单项上（如：把 Redux store 中的值读出），需要对返回值中的表单域数据用 [`Form.createFormField`](#Form.createFormField) 标记，注意表单项将变成受控组件, error 等也需要一并手动传入 | (props) => ({ \[fieldName\]: FormField { value } }) |
| name | 设置表单域内字段 id 的前缀 | - |
| validateMessages | 默认校验信息，可用于把默认错误信息改为中文等，格式与 [newMessages](https://github.com/yiminghe/async-validator/blob/master/src/messages.js) 返回值一致 | Object { \[nested.path]: String } |
| onFieldsChange | 当 `Form.Item` 子节点的值（包括 error）发生改变时触发，可以把对应的值转存到 Redux store | Function(props, changedFields, allFields) |
| onValuesChange | 任一表单域的值发生改变时的回调 | (props, changedValues, allValues) => void |
| 参数 | 说明 | 类型 | 版本 |
| --- | --- | --- | --- |
| mapPropsToFields | 把父组件的属性映射到表单项上（如：把 Redux store 中的值读出），需要对返回值中的表单域数据用 [`Form.createFormField`](#Form.createFormField) 标记，注意表单项将变成受控组件, error 等也需要一并手动传入 | (props) => ({ \[fieldName\]: FormField { value } }) | |
| name | 设置表单域内字段 id 的前缀 | - | 3.12.0 |
| validateMessages | 默认校验信息，可用于把默认错误信息改为中文等，格式与 [newMessages](https://github.com/yiminghe/async-validator/blob/master/src/messages.js) 返回值一致 | Object { \[nested.path]: String } | |
| onFieldsChange | 当 `Form.Item` 子节点的值（包括 error）发生改变时触发，可以把对应的值转存到 Redux store | Function(props, changedFields, allFields) | |
| onValuesChange | 任一表单域的值发生改变时的回调 | (props, changedValues, allValues) => void | |
经过 `Form.create` 之后如果要拿到 `ref`，可以使用 `rc-form` 提供的 `wrappedComponentRef`，[详细内容可以查看这里](https://github.com/react-component/form#note-use-wrappedcomponentref-instead-of-withref-after-rc-form140)。
@ -83,21 +83,21 @@ this.form // => The instance of CustomizedForm
> 注意：使用 `getFieldsValue` `getFieldValue` `setFieldsValue` 等时，应确保对应的 field 已经用 `getFieldDecorator` 注册过了。
| 方法       | 说明                                     | 类型       |
| --- | --- | --- |
| 方法       | 说明                                     | 类型       | 版本 |
| --- | --- | --- | --- |
| getFieldDecorator | 用于和表单进行双向绑定，详见下方描述 | |
| getFieldError | 获取某个输入控件的 Error | Function(name) |
| getFieldsError | 获取一组输入控件的 Error ，如不传入参数，则获取全部组件的 Error | Function(\[names: string\[]]) |
| getFieldsValue | 获取一组输入控件的值，如不传入参数，则获取全部组件的值 | Function(\[fieldNames: string\[]]) |
| getFieldValue | 获取一个输入控件的值 | Function(fieldName: string) |
| isFieldsTouched | 判断是否任一输入控件经历过 `getFieldDecorator` 的值收集时机 `options.trigger` | (names?: string\[]) => boolean |
| isFieldTouched | 判断一个输入控件是否经历过 `getFieldDecorator` 的值收集时机 `options.trigger` | (name: string) => boolean |
| isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) |
| resetFields | 重置一组输入控件的值（为 `initialValue`）与状态，如不传入参数，则重置所有组件 | Function(\[names: string\[]]) |
| setFields | 设置一组输入控件的值与错误状态：[代码](https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79) | ({<br />&nbsp;&nbsp;\[fieldName\]: {value: any, errors: \[Error\] }<br />}) => void |
| setFieldsValue | 设置一组输入控件的值（注意：不要在 `componentWillReceiveProps` 内使用，否则会导致死循环，[原因](https://github.com/ant-design/ant-design/issues/2985)） | ({ \[fieldName\]&#x3A; value }) => void |
| validateFields | 校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件 | (<br />&nbsp;&nbsp;\[fieldNames: string\[]],<br />&nbsp;&nbsp;\[options: object\],<br />&nbsp;&nbsp;callback(errors, values)<br />) => void |
| validateFieldsAndScroll | 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 | 参考 `validateFields` |
| getFieldError | 获取某个输入控件的 Error | Function(name) | |
| getFieldsError | 获取一组输入控件的 Error ，如不传入参数，则获取全部组件的 Error | Function(\[names: string\[]]) | |
| getFieldsValue | 获取一组输入控件的值，如不传入参数，则获取全部组件的值 | Function(\[fieldNames: string\[]]) | |
| getFieldValue | 获取一个输入控件的值 | Function(fieldName: string) | |
| isFieldsTouched | 判断是否任一输入控件经历过 `getFieldDecorator` 的值收集时机 `options.trigger` | (names?: string\[]) => boolean | |
| isFieldTouched | 判断一个输入控件是否经历过 `getFieldDecorator` 的值收集时机 `options.trigger` | (name: string) => boolean | |
| isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) | |
| resetFields | 重置一组输入控件的值（为 `initialValue`）与状态，如不传入参数，则重置所有组件 | Function(\[names: string\[]]) | |
| setFields | 设置一组输入控件的值与错误状态：[代码](https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79) | ({<br />&nbsp;&nbsp;\[fieldName\]: {value: any, errors: \[Error\] }<br />}) => void | |
| setFieldsValue | 设置一组输入控件的值（注意：不要在 `componentWillReceiveProps` 内使用，否则会导致死循环，[原因](https://github.com/ant-design/ant-design/issues/2985)） | ({ \[fieldName\]&#x3A; value }) => void | |
| validateFields | 校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件 | (<br />&nbsp;&nbsp;\[fieldNames: string\[]],<br />&nbsp;&nbsp;\[options: object\],<br />&nbsp;&nbsp;callback(errors, values)<br />) => void | |
| validateFieldsAndScroll | 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 | 参考 `validateFields` | |
### validateFields/validateFieldsAndScroll
@ -116,12 +116,12 @@ validateFields(['field1', 'field2'], options, (errors, values) => {
});
```
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| options.first | 若为 true，则每一表单域的都会在碰到第一个失败了的校验规则后停止校验 | boolean | false |
| options.firstFields | 指定表单域会在碰到第一个失败了的校验规则后停止校验 | String\[] | \[] |
| options.force | 对已经校验过的表单域，在 validateTrigger 再次被触发时是否再次校验 | boolean | false |
| options.scroll | 定义 validateFieldsAndScroll 的滚动行为，详细配置见 [dom-scroll-into-view config](https://github.com/yiminghe/dom-scroll-into-view#function-parameter) | Object | {} |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| options.first | 若为 true，则每一表单域的都会在碰到第一个失败了的校验规则后停止校验 | boolean | false | 3.9.3 |
| options.firstFields | 指定表单域会在碰到第一个失败了的校验规则后停止校验 | String\[] | \[] | 3.9.3 |
| options.force | 对已经校验过的表单域，在 validateTrigger 再次被触发时是否再次校验 | boolean | false | 3.9.3 |
| options.scroll | 定义 validateFieldsAndScroll 的滚动行为，详细配置见 [dom-scroll-into-view config](https://github.com/yiminghe/dom-scroll-into-view#function-parameter) | Object | {} | 3.9.3 |
#### validateFields 的 callback 参数示例
@ -175,18 +175,18 @@ validateFields(['field1', 'field2'], options, (errors, values) => {
#### getFieldDecorator(id, options) 参数
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| id | 必填输入控件唯一标志。支持嵌套式的[写法](https://github.com/react-component/form/pull/48)。 | string | |
| options.getValueFromEvent | 可以把 onChange 的参数（如 event）转化为控件的值 | function(..args) | [reference](https://github.com/react-component/form#option-object) |
| options.initialValue | 子节点的初始值，类型、可选值均由子节点决定(注意：由于内部校验时使用 `===` 判断是否变化，建议使用变量缓存所需设置的值而非直接使用字面量)) | | |
| options.normalize | 转换默认的 value 给控件，[一个选择全部的例子](https://codepen.io/afc163/pen/JJVXzG?editors=001) | function(value, prevValue, allValues): any | - |
| options.preserve | 即便字段不再使用，也保留该字段的值 | boolean | - |
| options.rules | 校验规则，参考下方文档 | object\[] | |
| options.trigger | 收集子节点的值的时机 | string | 'onChange' |
| options.validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验 | boolean | false |
| options.validateTrigger | 校验子节点值的时机 | string\|string\[] | 'onChange' |
| options.valuePropName | 子节点的值的属性，如 Switch 的是 'checked' | string | 'value' |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| id | 必填输入控件唯一标志。支持嵌套式的[写法](https://github.com/react-component/form/pull/48)。 | string | | |
| options.getValueFromEvent | 可以把 onChange 的参数（如 event）转化为控件的值 | function(..args) | [reference](https://github.com/react-component/form#option-object) | |
| options.initialValue | 子节点的初始值，类型、可选值均由子节点决定(注意：由于内部校验时使用 `===` 判断是否变化，建议使用变量缓存所需设置的值而非直接使用字面量)) | | | |
| options.normalize | 转换默认的 value 给控件，[一个选择全部的例子](https://codepen.io/afc163/pen/JJVXzG?editors=001) | function(value, prevValue, allValues): any | - | |
| options.preserve | 即便字段不再使用，也保留该字段的值 | boolean | - | 3.12.0 |
| options.rules | 校验规则，参考下方文档 | object\[] | | |
| options.trigger | 收集子节点的值的时机 | string | 'onChange' | |
| options.validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验 | boolean | false | |
| options.validateTrigger | 校验子节点值的时机 | string\|string\[] | 'onChange' | |
| options.valuePropName | 子节点的值的属性，如 Switch 的是 'checked' | string | 'value' | |
更多参数请查看 [rc-form option](https://github.com/react-component/form#option-object)。
@ -209,19 +209,19 @@ validateFields(['field1', 'field2'], options, (errors, values) => {
### 校验规则
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| enum | 枚举类型 | string | - |
| len | 字段长度 | number | - |
| max | 最大长度 | number | - |
| message | 校验文案 | string\|ReactNode | - |
| min | 最小长度 | number | - |
| pattern | 正则表达式校验 | RegExp | - |
| required | 是否必选 | boolean | `false` |
| transform | 校验前转换字段值 | function(value) => transformedValue:any | - |
| type | 内建校验类型，[可选项](https://github.com/yiminghe/async-validator#type) | string | 'string' |
| validator | 自定义校验（注意，[callback 必须被调用](https://github.com/ant-design/ant-design/issues/5155)） | function(rule, value, callback) | - |
| whitespace | 必选时，空格是否会被视为错误 | boolean | `false` |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| enum | 枚举类型 | string | - | |
| len | 字段长度 | number | - | |
| max | 最大长度 | number | - | |
| message | 校验文案 | string\|ReactNode | - | |
| min | 最小长度 | number | - | |
| pattern | 正则表达式校验 | RegExp | - | |
| required | 是否必选 | boolean | `false` | |
| transform | 校验前转换字段值 | function(value) => transformedValue:any | - | |
| type | 内建校验类型，[可选项](https://github.com/yiminghe/async-validator#type) | string | 'string' | |
| validator | 自定义校验（注意，[callback 必须被调用](https://github.com/ant-design/ant-design/issues/5155)） | function(rule, value, callback) | - | |
| whitespace | 必选时，空格是否会被视为错误 | boolean | `false` | |
更多高级用法可研究 [async-validator](https://github.com/yiminghe/async-validator)。

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

@ -88,28 +88,28 @@ If the Ant Design grid layout component does not meet your needs, you can use th
### Row
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| align | the vertical alignment of the flex layout: `top` `middle` `bottom` | string | `top` |
| gutter | spacing between grids, could be a number or a object like `{ xs: 8, sm: 16, md: 24}` | number/object | 0 |
| justify | horizontal arrangement of the flex layout: `start` `end` `center` `space-around` `space-between` | string | `start` |
| type | layout mode, optional `flex`, [browser support](http://caniuse.com/#search=flex) | string | |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| align | the vertical alignment of the flex layout: `top` `middle` `bottom` | string | `top` | |
| gutter | spacing between grids, could be a number or a object like `{ xs: 8, sm: 16, md: 24}` | number/object | 0 | |
| justify | horizontal arrangement of the flex layout: `start` `end` `center` `space-around` `space-between` | string | `start` | |
| type | layout mode, optional `flex`, [browser support](http://caniuse.com/#search=flex) | string | | |
### Col
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| offset | the number of cells to offset Col from the left | number | 0 |
| order | raster order, used in `flex` layout mode | 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 | `<576px` and also default setting, could be a `span` value or an object containing above props | number\|object | - |
| sm | `≥576px`, could be a `span` value or an object containing above props | number\|object | - |
| md | `≥768px`, could be a `span` value or an object containing above props | number\|object | - |
| lg | `≥992px`, could be a `span` value or an object containing above props | number\|object | - |
| xl | `≥1200px`, could be a `span` value or an object containing above props | number\|object | - |
| xxl | `≥1600px`, could be a `span` value or an object containing above props | number\|object | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| offset | the number of cells to offset Col from the left | number | 0 | |
| order | raster order, used in `flex` layout mode | 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 | `<576px` and also default setting, could be a `span` value or an object containing above props | number\|object | - | |
| sm | `≥576px`, could be a `span` value or an object containing above props | number\|object | - | |
| md | `≥768px`, could be a `span` value or an object containing above props | number\|object | - | |
| lg | `≥992px`, could be a `span` value or an object containing above props | number\|object | - | |
| xl | `≥1200px`, could be a `span` value or an object containing above props | number\|object | - | |
| xxl | `≥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`).

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

@ -87,28 +87,28 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
### Row
| 成员 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| align | flex 布局下的垂直对齐方式：`top` `middle` `bottom` | string | `top` |
| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number/object | 0 |
| justify | flex 布局下的水平排列方式：`start` `end` `center` `space-around` `space-between` | string | `start` |
| type | 布局模式，可选 `flex`，[现代浏览器](http://caniuse.com/#search=flex) 下有效 | string | |
| 成员 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| align | flex 布局下的垂直对齐方式：`top` `middle` `bottom` | string | `top` | |
| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number/object | 0 | |
| justify | flex 布局下的水平排列方式：`start` `end` `center` `space-around` `space-between` | string | `start` | |
| type | 布局模式，可选 `flex`，[现代浏览器](http://caniuse.com/#search=flex) 下有效 | string | | |
### Col
| 成员 | 说明 | 类型 | 默认值 |
| ------ | -------------------------------------------------------- | -------------- | ------ |
| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 |
| order | 栅格顺序，`flex` 布局模式下有效 | 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 | - |
| xl | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
| xxl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
| 成员 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 | |
| order | 栅格顺序，`flex` 布局模式下有效 | 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 | - | |
| xl | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| xxl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。

40
components/icon/index.en-US.md
View File

@ -16,15 +16,15 @@ ReactDOM.render(<IconDisplay />, mountNode);
## API
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| type | Type of the ant design icon | string | - |
| style | Style properties of icon, like `fontSize` and `color` | CSSProperties | - |
| theme | Theme of the ant design icon | 'filled' \| 'outlined' \| 'twoTone' | 'outlined' |
| spin | Rotate icon with animation | boolean | false |
| rotate | Rotate degrees (added in 3.13.0, not working in IE9) | number | - |
| component | The component used for the root node. This will override the **`type`** property. | ComponentType<CustomIconComponentProps\> | - |
| twoToneColor | Only support the two-tone icon. Specific the primary color. | string (hex color) | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| type | Type of the ant design icon | string | - | |
| style | Style properties of icon, like `fontSize` and `color` | CSSProperties | - | |
| theme | Theme of the ant design icon | 'filled' \| 'outlined' \| 'twoTone' | 'outlined' | 3.9.0 |
| spin | Rotate icon with animation | boolean | false | |
| rotate | Rotate degrees (added in 3.13.0, not working in IE9) | number | - | 3.13.0 |
| component | The component used for the root node. This will override the **`type`** property. | ComponentType<CustomIconComponentProps\> | - | 3.9.0 |
| twoToneColor | Only support the two-tone icon. Specific the primary color. | string (hex color) | - | 3.9.0 |
### SVG icons
@ -80,10 +80,10 @@ It create a component that uses SVG sprites in essence.
The following options are available:
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. | string | - |
| extraCommonProps | Define extra properties to the component | `{ [key: string]: any }` | {} |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. | string | - | 3.9.3 |
| extraCommonProps | Define extra properties to the component | `{ [key: string]: any }` | {} | 3.9.3 |
The property `scriptUrl` should be set to import the SVG sprite symbols.
@ -121,10 +121,10 @@ ReactDOM.render(<Icon component={MessageSvg} />, mountNode);
The following properties are available for the component:
| Property | Description | Type | Default |
| --------- | ------------------------------------------------ | ---------------- | -------------- |
| width | The width of the `svg` element | string \| number | '1em' |
| height | The height of the `svg` element | string \| number | '1em' |
| fill | Define the color used to paint the `svg` element | string | 'currentColor' |
| className | The computed class name of the `svg` element | string | - |
| style | The computed style of the `svg` element | CSSProperties | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| width | The width of the `svg` element | string \| number | '1em' | 3.10.0 |
| height | The height of the `svg` element | string \| number | '1em' | 3.10.0 |
| fill | Define the color used to paint the `svg` element | string | 'currentColor' | 3.10.0 |
| className | The computed class name of the `svg` element | string | - | 3.10.0 |
| style | The computed style of the `svg` element | CSSProperties | - | 3.10.0 |

40
components/icon/index.zh-CN.md
View File

@ -21,15 +21,15 @@ ReactDOM.render(<IconDisplay />, mountNode);
## API
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| type | 图标类型。遵循图标的命名规范 | string | - |
| style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - |
| theme | 图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标 | 'filled' \| 'outlined' \| 'twoTone' | 'outlined' |
| spin | 是否有旋转动画 | boolean | false |
| rotate | 图标旋转角度（3.13.0 后新增，IE9 无效） | number | - |
| component | 控制如何渲染图标，通常是一个渲染根标签为 `<svg>` 的 `React` 组件，**会使 `type` 属性失效** | ComponentType<CustomIconComponentProps\> | - |
| twoToneColor | 仅适用双色图标。设置双色图标的主要颜色 | string (十六进制颜色) | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| type | 图标类型。遵循图标的命名规范 | string | - | |
| style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - | |
| theme | 图标主题风格。可选实心、描线、双色等主题风格，适用于官方图标 | 'filled' \| 'outlined' \| 'twoTone' | 'outlined' | 3.9.0 |
| spin | 是否有旋转动画 | boolean | false | |
| rotate | 图标旋转角度（3.13.0 后新增，IE9 无效） | number | - | 3.13.0 |
| component | 控制如何渲染图标，通常是一个渲染根标签为 `<svg>` 的 `React` 组件，**会使 `type` 属性失效** | ComponentType<CustomIconComponentProps\> | - | 3.9.0 |
| twoToneColor | 仅适用双色图标。设置双色图标的主要颜色 | string (十六进制颜色) | - | 3.9.0 |
### SVG 图标
@ -83,10 +83,10 @@ ReactDOM.render(<MyIcon type="icon-example" />, mountedNode);
`options` 的配置项如下：
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址 | string | - |
| extraCommonProps | 给所有的 `svg` 图标 `<Icon />` 组件设置额外的属性 | `{ [key: string]: any }` | {} |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址 | string | - | 3.9.3 |
| extraCommonProps | 给所有的 `svg` 图标 `<Icon />` 组件设置额外的属性 | `{ [key: string]: any }` | {} | 3.9.3 |
在 `scriptUrl` 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。
@ -124,10 +124,10 @@ ReactDOM.render(<Icon component={MessageSvg} />, mountNode);
`Icon` 中的 `component` 组件的接受的属性如下：
| 字段 | 说明 | 类型 | 只读值 |
| --------- | ----------------------- | ---------------- | -------------- |
| width | `svg` 元素宽度 | string \| number | '1em' |
| height | `svg` 元素高度 | string \| number | '1em' |
| fill | `svg` 元素填充的颜色 | string | 'currentColor' |
| className | 计算后的 `svg` 类名 | string | - |
| style | 计算后的 `svg` 元素样式 | CSSProperties | - |
| 字段 | 说明 | 类型 | 只读值 | 版本 |
| --------- | ----------------------- | ---------------- | -------------- | ------ |
| width | `svg` 元素宽度 | string \| number | '1em' | 3.10.0 |
| height | `svg` 元素高度 | string \| number | '1em' | 3.10.0 |
| fill | `svg` 元素填充的颜色 | string | 'currentColor' | 3.10.0 |
| className | 计算后的 `svg` 类名 | string | - | 3.10.0 |
| style | 计算后的 `svg` 元素样式 | CSSProperties | - | 3.10.0 |

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

@ -12,25 +12,25 @@ When a numeric value needs to be provided.
## API
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| autoFocus | get focus when component mounted | boolean | false |
| defaultValue | initial value | number | |
| disabled | disable the input | boolean | false |
| formatter | Specifies the format of the value presented | function(value: number \| string): string | - |
| max | max value | number | Infinity |
| min | min value | number | -Infinity |
| parser | Specifies the value extracted from formatter | function( string): number | - |
| precision | precision of input value | number | - |
| decimalSeparator | decimal separator | string | - |
| size | height of input box | string | - |
| step | The number to which the current value is increased or decreased. It can be an integer or decimal. | number\|string | 1 |
| value | current value | number | |
| onChange | The callback triggered when the value is changed. | function(value: number \| string) | |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| autoFocus | get focus when component mounted | boolean | false | |
| defaultValue | initial value | number | | |
| disabled | disable the input | boolean | false | |
| formatter | Specifies the format of the value presented | function(value: number \| string): string | - | |
| max | max value | number | Infinity | |
| min | min value | number | -Infinity | |
| parser | Specifies the value extracted from formatter | function( string): number | - | |
| precision | precision of input value | number | - | |
| decimalSeparator | decimal separator | string | - | 3.10.1 |
| size | height of input box | string | - | |
| step | The number to which the current value is increased or decreased. It can be an integer or decimal. | number\|string | 1 | |
| value | current value | number | | |
| onChange | The callback triggered when the value is changed. | function(value: number \| string) | | |
## Methods
| Name | Description |
| ------- | ------------ |
| blur() | remove focus |
| focus() | get focus |
| Name | Description | Version |
| ------- | ------------ | ------- |
| blur() | remove focus | |
| focus() | get focus | |

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

@ -15,25 +15,25 @@ title: InputNumber
属性如下
| 成员 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| autoFocus | 自动获取焦点 | boolean | false |
| defaultValue | 初始值 | number | |
| disabled | 禁用 | boolean | false |
| formatter | 指定输入框展示值的格式 | function(value: number \| string): string | - |
| max | 最大值 | number | Infinity |
| min | 最小值 | number | -Infinity |
| parser | 指定从 formatter 里转换回数字的方式，和 formatter 搭配使用 | function( string): number | - |
| precision | 数值精度 | number | - |
| decimalSeparator | 小数点 | string | - |
| size | 输入框大小 | string | 无 |
| step | 每次改变步数，可以为小数 | number\|string | 1 |
| value | 当前值 | number | |
| onChange | 变化回调 | Function(value: number \| string) | |
| 成员 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| autoFocus | 自动获取焦点 | boolean | false | |
| defaultValue | 初始值 | number | | |
| disabled | 禁用 | boolean | false | |
| formatter | 指定输入框展示值的格式 | function(value: number \| string): string | - | |
| max | 最大值 | number | Infinity | |
| min | 最小值 | number | -Infinity | |
| parser | 指定从 formatter 里转换回数字的方式，和 formatter 搭配使用 | function( string): number | - | |
| precision | 数值精度 | number | - | |
| decimalSeparator | 小数点 | string | - | 3.10.0 |
| size | 输入框大小 | string | 无 | |
| step | 每次改变步数，可以为小数 | number\|string | 1 | |
| value | 当前值 | number | | |
| onChange | 变化回调 | Function(value: number \| string) | | |
## 方法
| 名称 | 描述 |
| ------- | -------- |
| blur() | 移除焦点 |
| focus() | 获取焦点 |
| 名称 | 描述 | 版本 |
| ------- | -------- | ---- |
| blur() | 移除焦点 | |
| focus() | 获取焦点 | |

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

@ -15,21 +15,21 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca
### Input
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| addonAfter | The label text displayed after (on the right side of) the input field. | string\|ReactNode | |
| addonBefore | The label text displayed before (on the left side of) the input field. | string\|ReactNode | |
| defaultValue | The initial input content | string | |
| disabled | Whether the input is disabled. | boolean | false |
| id | The ID for input | string | |
| prefix | The prefix icon for the Input. | string\|ReactNode | |
| size | The size of the input box. Note: in the context of a form, the `large` size is used. Available: `large` `default` `small` | string | `default` |
| suffix | The suffix icon for the Input. | string\|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 | allow to remove input content with clear icon | boolean | |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| addonAfter | The label text displayed after (on the right side of) the input field. | string\|ReactNode | | |
| addonBefore | The label text displayed before (on the left side of) the input field. | string\|ReactNode | | |
| defaultValue | The initial input content | string | | |
| disabled | Whether the input is disabled. | boolean | false | |
| id | The ID for input | string | | |
| prefix | The prefix icon for the Input. | string\|ReactNode | | |
| size | The size of the input box. Note: in the context of a form, the `large` size is used. Available: `large` `default` `small` | string | `default` | |
| suffix | The suffix icon for the Input. | string\|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) | | 3.9.3 |
| onPressEnter | The callback function that is triggered when Enter key is pressed. | function(e) | | |
| allowClear | allow to remove input content with clear icon | boolean | | 3.12.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.
@ -39,12 +39,12 @@ The rest of the props of Input are exactly the same as the original [input](http
> If you are using `antd@<2.12`, please use `Input[type=textarea]`.
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| 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) | |
| 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) | | |
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).
@ -52,19 +52,19 @@ The rest of the props of `Input.TextArea` are the same as the original [textarea
`Added in 2.5.0`
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| enterButton | to show an enter button after input. This prop is conflict with addon. | boolean\|ReactNode | false |
| onSearch | The callback function that is triggered when you click on the search-icon or press Enter key. | function(value, event) | |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| enterButton | to show an enter button after input. This prop is conflict with addon. | boolean\|ReactNode | false | |
| onSearch | The callback function that is triggered when you click on the search-icon or press Enter key. | function(value, event) | | |
Supports all props of `Input`.
#### Input.Group
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| compact | Whether use compact style | boolean | false |
| size | The size of `Input.Group` specifies the size of the included `Input` fields. Available: `large` `default` `small` | string | `default` |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| compact | Whether use compact style | boolean | false | |
| size | The size of `Input.Group` specifies the size of the included `Input` fields. Available: `large` `default` `small` | string | `default` | |
```html
<Input.Group>
@ -75,9 +75,9 @@ Supports all props of `Input`.
#### Input.Password (Added in 3.12.0)
| Property | Description | Type | Default |
| ---------------- | -------------------------- | ------- | ------- |
| visibilityToggle | Whether show toggle button | boolean | true |
| Property | Description | Type | Default | Version |
| ---------------- | -------------------------- | ------- | ------- | ------- |
| visibilityToggle | Whether show toggle button | boolean | true | 3.12.2 |
## FAQ

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

@ -16,21 +16,21 @@ title: Input
### Input
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| addonAfter | 带标签的 input，设置后置标签 | string\|ReactNode | |
| addonBefore | 带标签的 input，设置前置标签 | string\|ReactNode | |
| defaultValue | 输入框默认内容 | string | |
| disabled | 是否禁用状态，默认为 false | boolean | false |
| id | 输入框的 id | string | |
| prefix | 带有前缀图标的 input | string\|ReactNode | |
| size | 控件大小。注：标准表单内的输入框大小限制为 `large`。可选 `large` `default` `small` | string | `default` |
| suffix | 带有后缀图标的 input | string\|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 | |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| addonAfter | 带标签的 input，设置后置标签 | string\|ReactNode | | |
| addonBefore | 带标签的 input，设置前置标签 | string\|ReactNode | | |
| defaultValue | 输入框默认内容 | string | | |
| disabled | 是否禁用状态，默认为 false | boolean | false | |
| id | 输入框的 id | string | | |
| prefix | 带有前缀图标的 input | string\|ReactNode | | |
| size | 控件大小。注：标准表单内的输入框大小限制为 `large`。可选 `large` `default` `small` | string | `default` | |
| suffix | 带有后缀图标的 input | string\|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) | | 3.9.3 |
| onPressEnter | 按下回车的回调 | function(e) | | |
| allowClear | 可以点击清除图标删除内容 | boolean | | 3.12.0 |
> 如果 `Input` 在 `Form.Item` 内，并且 `Form.Item` 设置了 `id` 和 `options` 属性，则 `value` `defaultValue` 和 `id` 属性会被自动设置。
@ -40,30 +40,30 @@ Input 的其他属性和 React 自带的 [input](https://facebook.github.io/reac
> `2.12` 后新增的组件，旧版请使用 `Input[type=textarea]`。
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| autosize | 自适应内容高度，可设置为 `true|false` 或对象：`{ minRows: 2, maxRows: 6 }` | boolean\|object | false |
| defaultValue | 输入框默认内容 | string | |
| value | 输入框内容 | string | |
| onPressEnter | 按下回车的回调 | function(e) | |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| autosize | 自适应内容高度，可设置为 `true|false` 或对象：`{ minRows: 2, maxRows: 6 }` | boolean\|object | false | |
| defaultValue | 输入框默认内容 | string | | |
| value | 输入框内容 | string | | |
| onPressEnter | 按下回车的回调 | function(e) | | |
`Input.TextArea` 的其他属性和浏览器自带的 [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) 一致。
#### Input.Search
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| enterButton | 是否有确认按钮，可设为按钮文字。该属性会与 addon 冲突。 | boolean\|ReactNode | false |
| onSearch | 点击搜索或按下回车键时的回调 | function(value, event) | |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| enterButton | 是否有确认按钮，可设为按钮文字。该属性会与 addon 冲突。 | boolean\|ReactNode | false | |
| onSearch | 点击搜索或按下回车键时的回调 | function(value, event) | | |
其余属性和 Input 一致。
#### Input.Group
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| compact | 是否用紧凑模式 | boolean | false |
| size | `Input.Group` 中所有的 `Input` 的大小，可选 `large` `default` `small` | string | `default` |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| compact | 是否用紧凑模式 | boolean | false | |
| size | `Input.Group` 中所有的 `Input` 的大小，可选 `large` `default` `small` | string | `default` | |
```html
<Input.Group>
@ -74,9 +74,9 @@ Input 的其他属性和 React 自带的 [input](https://facebook.github.io/reac
#### Input.Password (3.12.0 中新增)
| 参数 | 说明 | 类型 | 默认值 |
| ---------------- | ---------------- | ------- | ------ |
| visibilityToggle | 是否显示切换按钮 | boolean | true |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ---------------- | ---------------- | ------- | ------ | ------ |
| visibilityToggle | 是否显示切换按钮 | boolean | true | 3.12.2 |
## FAQ

40
components/layout/index.en-US.md
View File

@ -73,11 +73,11 @@ Style of a navigation should conform to its level.
The wrapper.
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| className | container className | string | - |
| hasSider | whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering | boolean | - |
| style | to customize the styles | object | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| className | container className | string | - | |
| hasSider | whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering | boolean | - | 3.2.0 |
| style | to customize the styles | object | - | |
> APIs of `Layout.Header` `Layout.Footer` `Layout.Content` are the same as that of `Layout`.
@ -85,21 +85,21 @@ The wrapper.
The sidebar.
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| breakpoint | [breakpoints](/components/grid#api) of the responsive layout | Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } | - |
| className | container className | string | - |
| collapsed | to set the current status | boolean | - |
| collapsedWidth | width of the collapsed sidebar, by setting to `0` a special trigger will appear | number | 80 |
| collapsible | whether can be collapsed | boolean | false |
| defaultCollapsed | to set the initial status | boolean | false |
| reverseArrow | reverse direction of arrow, for a sider that expands from the right | boolean | false |
| style | to customize the styles | object | - |
| theme | color theme of the sidebar | string: `light` `dark` | `dark` |
| trigger | specify the customized trigger, set to null to hide the trigger | string\|ReactNode | - |
| width | width of the sidebar | number\|string | 200 |
| onCollapse | the callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - |
| onBreakpoint | the callback function, executed when [breakpoints](/components/grid#api) changed | (broken) => {} | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| breakpoint | [breakpoints](/components/grid#api) of the responsive layout | Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } | - | |
| className | container className | string | - | |
| collapsed | to set the current status | boolean | - | |
| collapsedWidth | width of the collapsed sidebar, by setting to `0` a special trigger will appear | number | 80 | |
| collapsible | whether can be collapsed | boolean | false | |
| defaultCollapsed | to set the initial status | boolean | false | |
| reverseArrow | reverse direction of arrow, for a sider that expands from the right | boolean | false | |
| style | to customize the styles | object | - | |
| theme | color theme of the sidebar | string: `light` `dark` | `dark` | 3.6.0 |
| trigger | specify the customized trigger, set to null to hide the trigger | string\|ReactNode | - | |
| width | width of the sidebar | number\|string | 200 | |
| onCollapse | the callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - | |
| onBreakpoint | the callback function, executed when [breakpoints](/components/grid#api) changed | (broken) => {} | - | 3.7.0 |
#### breakpoint width

40
components/layout/index.zh-CN.md
View File

@ -74,11 +74,11 @@ title: Layout
布局容器。
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| className | 容器 className | string | - |
| hasSider | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - |
| style | 指定样式 | object | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| className | 容器 className | string | - | |
| hasSider | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - | 3.2.0 |
| style | 指定样式 | object | - | |
> `Layout.Header` `Layout.Footer` `Layout.Content` API 与 `Layout` 相同
@ -86,21 +86,21 @@ title: Layout
侧边栏。
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| breakpoint | 触发响应式布局的[断点](/components/grid#api) | Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } | - |
| className | 容器 className | string | - |
| collapsed | 当前收起状态 | boolean | - |
| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 80 |
| collapsible | 是否可收起 | boolean | false |
| defaultCollapsed | 是否默认收起 | boolean | false |
| reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false |
| style | 指定样式 | object | - |
| theme | 主题颜色 | string: `light` `dark` | `dark` |
| trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string\|ReactNode | - |
| width | 宽度 | number\|string | 200 |
| onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - |
| onBreakpoint | 触发响应式布局[断点](/components/grid#api)时的回调 | (broken) => {} | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| breakpoint | 触发响应式布局的[断点](/components/grid#api) | Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' } | - | |
| className | 容器 className | string | - | |
| collapsed | 当前收起状态 | boolean | - | |
| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 80 | |
| collapsible | 是否可收起 | boolean | false | |
| defaultCollapsed | 是否默认收起 | boolean | false | |
| reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false | |
| style | 指定样式 | object | - | |
| theme | 主题颜色 | string: `light` `dark` | `dark` | 3.6.0 |
| trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string\|ReactNode | - | |
| width | 宽度 | number\|string | 200 | |
| onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - | |
| onBreakpoint | 触发响应式布局[断点](/components/grid#api)时的回调 | (broken) => {} | - | 3.7.0 |
#### breakpoint width

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

@ -15,21 +15,21 @@ A list can be used to display content related to a single subject. The content c
### List
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| bordered | Toggles rendering of the border around the list | boolean | false |
| footer | List footer renderer | string\|ReactNode | - |
| grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | object | - |
| header | List header renderer | string\|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\|[object](https://ant.design/components/spin-cn/#API) ([more](https://github.com/ant-design/ant-design/issues/8659)) | false |
| loadMore | Shows a load more content | string\|ReactNode | - |
| locale | i18n text including empty text | object | emptyText: 'No Data' <br> |
| pagination | Pagination [config](https://ant.design/components/pagination/), hide it by setting it to false | boolean \| object | false |
| 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` | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| bordered | Toggles rendering of the border around the list | boolean | false | |
| footer | List footer renderer | string\|ReactNode | - | |
| grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | object | - | |
| header | List header renderer | string\|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` | 3.12.0 |
| loading | Shows a loading indicator while the contents of the list are being fetched | boolean\|[object](https://ant.design/components/spin-cn/#API) ([more](https://github.com/ant-design/ant-design/issues/8659)) | false | |
| loadMore | Shows a load more content | string\|ReactNode | - | |
| locale | i18n text including empty text | object | emptyText: 'No Data' <br> | 3.4.2 |
| pagination | Pagination [config](https://ant.design/components/pagination/), hide it by setting it to false | boolean \| object | false | |
| split | Toggles rendering of the split under the list item | boolean | true | |
| dataSource | dataSource array for list | any[] | - | 3.20.1 |
| renderItem | customize list item when using `dataSource` | `item => ReactNode` | - | 3.20.1 |
### pagination
@ -37,35 +37,35 @@ Properties for pagination.
| Property | Description | Type | Default |
| -------- | ------------------------------------ | --------------------------- | -------- |
| position | specify the position of `Pagination` | 'top' \| 'bottom' \| 'both' | 'bottom' |
| position | specify the position of `Pagination` | 'top' \| 'bottom' \| 'both' | 'bottom' | 3.6.0 |
More about pagination, please check [`Pagination`](/components/pagination/).
### List grid props
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| column | column of grid, [optional number](https://github.com/ant-design/ant-design/blob/a7f17b4cdebbca07b3b9ce5698de61e772d46237/components/list/index.tsx#L16) | number | - |
| gutter | spacing between grid | number | 0 |
| size | Size of list | `default` \| `middle` \| `small` | `default` |
| xs | `<576px` column of grid | number | - |
| sm | `≥576px` column of grid | number | - |
| md | `≥768px` column of grid | number | - |
| lg | `≥992px` column of grid | number | - |
| xl | `≥1200px` column of grid | number | - |
| xxl | `≥1600px` column of grid | number | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| column | column of grid, [optional number](https://github.com/ant-design/ant-design/blob/a7f17b4cdebbca07b3b9ce5698de61e772d46237/components/list/index.tsx#L16) | number | - | |
| gutter | spacing between grid | number | 0 | |
| size | Size of list | `default` \| `middle` \| `small` | `default` | |
| xs | `<576px` column of grid | number | - | |
| sm | `≥576px` column of grid | number | - | |
| md | `≥768px` column of grid | number | - | |
| lg | `≥992px` column of grid | number | - | |
| xl | `≥1200px` column of grid | number | - | |
| xxl | `≥1600px` column of grid | number | - | |
### List.Item
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| actions | The actions content of list item. If `itemLayout` is `vertical`, shows the content on bottom, otherwise shows content on the far right. | Array<ReactNode> | - |
| extra | The extra content of list item. If `itemLayout` is `vertical`, shows the content on right, otherwise shows content on the far right. | string\|ReactNode | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| actions | The actions content of list item. If `itemLayout` is `vertical`, shows the content on bottom, otherwise shows content on the far right. | Array<ReactNode> | - | |
| extra | The extra content of list item. If `itemLayout` is `vertical`, shows the content on right, otherwise shows content on the far right. | string\|ReactNode | - | |
### List.Item.Meta
| Property | Description | Type | Default |
| ----------- | ---------------------------- | ----------------- | ------- |
| avatar | The avatar of list item | ReactNode | - |
| description | The description of list item | string\|ReactNode | - |
| title | The title of list item | string\|ReactNode | - |
| Property | Description | Type | Default | Version |
| ----------- | ---------------------------- | ----------------- | ------- | ------- |
| avatar | The avatar of list item | ReactNode | - | |
| description | The description of list item | string\|ReactNode | - | |
| title | The title of list item | string\|ReactNode | - | |

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

@ -16,21 +16,21 @@ cols: 1
### List
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| bordered | 是否展示边框 | boolean | false |
| footer | 列表底部 | string\|ReactNode | - |
| grid | 列表栅格配置 | object | - |
| header | 列表头部 | string\|ReactNode | - |
| itemLayout | 设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - |
| loading | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位 | boolean\|[object](https://ant.design/components/spin-cn/#API) ([更多](https://github.com/ant-design/ant-design/issues/8659)) | false |
| loadMore | 加载更多 | string\|ReactNode | - |
| locale | 默认文案设置，目前包括空数据文案 | object | emptyText: '暂无数据' |
| pagination | 对应的 `pagination` 配置, 设置 `false` 不显示 | boolean\|object | false |
| size | list 的尺寸 | `default` \| `middle` \| `small` | `default` |
| split | 是否展示分割线 | boolean | true |
| dataSource | 列表数据源 | any[] | - |
| renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项 | `item => ReactNode` | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| bordered | 是否展示边框 | boolean | false | |
| footer | 列表底部 | string\|ReactNode | - | |
| grid | 列表栅格配置 | object | - | |
| header | 列表头部 | string\|ReactNode | - | |
| itemLayout | 设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - | |
| loading | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位 | boolean\|[object](https://ant.design/components/spin-cn/#API) ([更多](https://github.com/ant-design/ant-design/issues/8659)) | false | |
| loadMore | 加载更多 | string\|ReactNode | - | |
| locale | 默认文案设置，目前包括空数据文案 | object | emptyText: '暂无数据' | 3.4.2 |
| pagination | 对应的 `pagination` 配置, 设置 `false` 不显示 | boolean\|object | false | |
| size | list 的尺寸 | `default` \| `middle` \| `small` | `default` | |
| split | 是否展示分割线 | boolean | true | |
| dataSource | 列表数据源 | any[] | - | 3.20.1 |
| renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项 | `item => ReactNode` | - | 3.20.1 |
### pagination
@ -38,34 +38,34 @@ cols: 1
| 参数 | 说明 | 类型 | 默认值 |
| -------- | ------------------ | --------------------------- | -------- |
| position | 指定分页显示的位置 | 'top' \| 'bottom' \| 'both' | 'bottom' |
| position | 指定分页显示的位置 | 'top' \| 'bottom' \| 'both' | 'bottom' | 3.6.0 |
更多配置项，请查看 [`Pagination`](/components/pagination/)。
### List grid props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| column | 列数，[可选值](https://github.com/ant-design/ant-design/blob/a7f17b4cdebbca07b3b9ce5698de61e772d46237/components/list/index.tsx#L16) | number | - |
| gutter | 栅格间隔 | number | 0 |
| xs | `<576px` 展示的列数 | number | - |
| sm | `≥576px` 展示的列数 | number | - |
| md | `≥768px` 展示的列数 | number | - |
| lg | `≥992px` 展示的列数 | number | - |
| xl | `≥1200px` 展示的列数 | number | - |
| xxl | `≥1600px` 展示的列数 | number | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| column | 列数，[可选值](https://github.com/ant-design/ant-design/blob/a7f17b4cdebbca07b3b9ce5698de61e772d46237/components/list/index.tsx#L16) | number | - | |
| gutter | 栅格间隔 | number | 0 | |
| xs | `<576px` 展示的列数 | number | - | |
| sm | `≥576px` 展示的列数 | number | - | |
| md | `≥768px` 展示的列数 | number | - | |
| lg | `≥992px` 展示的列数 | number | - | |
| xl | `≥1200px` 展示的列数 | number | - | |
| xxl | `≥1600px` 展示的列数 | number | - | |
### List.Item
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| actions | 列表操作组，根据 `itemLayout` 的不同, 位置在卡片底部或者最右侧 | Array&lt;ReactNode> | - |
| extra | 额外内容, 通常用在 `itemLayout` 为 `vertical` 的情况下, 展示右侧内容; `horizontal` 展示在列表元素最右侧 | string\|ReactNode | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| actions | 列表操作组，根据 `itemLayout` 的不同, 位置在卡片底部或者最右侧 | Array&lt;ReactNode> | - | |
| extra | 额外内容, 通常用在 `itemLayout` 为 `vertical` 的情况下, 展示右侧内容; `horizontal` 展示在列表元素最右侧 | string\|ReactNode | - | |
### List.Item.Meta
| 参数 | 说明 | 类型 | 默认值 |
| ----------- | ------------------ | ----------------- | ------ |
| avatar | 列表元素的图标 | ReactNode | - |
| description | 列表元素的描述内容 | string\|ReactNode | - |
| title | 列表元素的标题 | string\|ReactNode | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----------- | ------------------ | ----------------- | ------ | ---- |
| avatar | 列表元素的图标 | ReactNode | - | |
| description | 列表元素的描述内容 | string\|ReactNode | - | |
| title | 列表元素的标题 | string\|ReactNode | - | |

6
components/locale-provider/index.en-US.md
View File

@ -45,9 +45,9 @@ This component aims to provide localization of the built-in text. If you want to
## API
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| locale | language package setting, you can find the packages in [antd/lib/locale-provider](http://unpkg.com/antd/lib/locale-provider/) | object | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| locale | language package setting, you can find the packages in [antd/lib/locale-provider](http://unpkg.com/antd/lib/locale-provider/) | object | - | |
## FAQ

6
components/locale-provider/index.zh-CN.md
View File

@ -46,9 +46,9 @@ return <LocaleProvider locale={locales.en_US}><App /></LocaleProvider>;
## API
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| locale | 语言包配置，语言包可到 [antd/lib/locale-provider](http://unpkg.com/antd/lib/locale-provider/) 目录下寻找 | object | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| locale | 语言包配置，语言包可到 [antd/lib/locale-provider](http://unpkg.com/antd/lib/locale-provider/) 目录下寻找 | object | - | |
## FAQ

70
components/mention/index.en-US.md
View File

@ -25,47 +25,47 @@ to measure tips position, which use nearly 11.6% package size. We hope to reduce
### Mention API
| API | Description | Type |
| --- | --- | --- |
| getMentions | get mentioned people in current contentState | Function(ContentState: contentState): string\[] |
| toContentState | convert string to ContentState | Function(value: string): ContentState |
| toString | convert ContentState to string | Function(contentState: ContentState): string |
| API | Description | Type | Version |
| --- | --- | --- | --- |
| getMentions | get mentioned people in current contentState | Function(ContentState: contentState): string\[] | |
| toContentState | convert string to ContentState | Function(value: string): ContentState | |
| toString | convert ContentState to string | Function(contentState: ContentState): string | |
### Mention
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| autoFocus | get focus when component mounted | boolean | false |
| defaultValue | default value | ContentState, you can use `Mention.toContentState` to convert text to `ContentState` | null |
| defaultSuggestions | default suggestion content | Array&lt;string\|Mention.Nav> | \[] |
| disabled | Tell if the input is disabled. | boolean | false |
| getSuggestionContainer | rendered to the root of the menu. Default rendered to the body dom. If gets any problem of the menu while scrolling. Try to make the root the dom scrolled, and make it position relative. | function | () => document.body |
| loading | loading mode | boolean | false |
| multiLines | multilines mode | boolean | false |
| notFoundContent | suggestion when suggestions empty | string | 'No matches found' |
| placeholder | placeholder of input | string | null |
| placement | The position of the suggestion relative to the target, which can be one of `top` and `bottom` | string | 'bottom'. |
| prefix | character which will trigger Mention to show mention list | string or Array&lt;string> | '@' |
| readOnly | Tell if the input is readonly. | boolean | false |
| suggestions | suggestion content | Array&lt;string\|Mention.Nav> | \[] |
| suggestionStyle | style of suggestion container | object | {} |
| value | core state of mention | ContentState | null |
| onBlur | Callback function called when mention component blur | function(e) | null |
| onChange | Callback function called when content of input changes | function(contentState: ContentState) | null |
| onFocus | Callback function called when mention component get focus | function | null |
| onSearchChange | Callback function called when search content changes | function(value:string, trigger: string) | \[] |
| onSelect | Callback function called when select from suggestions | function(suggestion: string, data?: any) | null |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| autoFocus | get focus when component mounted | boolean | false | |
| defaultValue | default value | ContentState, you can use `Mention.toContentState` to convert text to `ContentState` | null | |
| defaultSuggestions | default suggestion content | Array&lt;string\|Mention.Nav> | \[] | 3.12.0 |
| disabled | Tell if the input is disabled. | boolean | false | |
| getSuggestionContainer | rendered to the root of the menu. Default rendered to the body dom. If gets any problem of the menu while scrolling. Try to make the root the dom scrolled, and make it position relative. | function | () => document.body | |
| loading | loading mode | boolean | false | |
| multiLines | multilines mode | boolean | false | |
| notFoundContent | suggestion when suggestions empty | string | 'No matches found' | |
| placeholder | placeholder of input | string | null | |
| placement | The position of the suggestion relative to the target, which can be one of `top` and `bottom` | string | 'bottom'. | |
| prefix | character which will trigger Mention to show mention list | string or Array&lt;string> | '@' | |
| readOnly | Tell if the input is readonly. | boolean | false | |
| suggestions | suggestion content | Array&lt;string\|Mention.Nav> | \[] | |
| suggestionStyle | style of suggestion container | object | {} | |
| value | core state of mention | ContentState | null | |
| onBlur | Callback function called when mention component blur | function(e) | null | |
| onChange | Callback function called when content of input changes | function(contentState: ContentState) | null | |
| onFocus | Callback function called when mention component get focus | function | null | |
| onSearchChange | Callback function called when search content changes | function(value:string, trigger: string) | \[] | |
| onSelect | Callback function called when select from suggestions | function(suggestion: string, data?: any) | null | |
### Mention methods
| Name | Description |
| ------- | ------------ |
| blur() | remove focus |
| focus() | get focus |
| Name | Description | Version |
| ------- | ------------ | ------- |
| blur() | remove focus | |
| focus() | get focus | |
### Nav
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| children | suggestion content | object | {} |
| value | value of suggestion, the value will insert into input filed while selected | string | "" |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| children | suggestion content | object | {} | |
| value | value of suggestion, the value will insert into input filed while selected | string | "" | |

70
components/mention/index.zh-CN.md
View File

@ -26,47 +26,47 @@ Mention 组件使用了
### Mention API
| API | 说明 | 类型 |
| --- | --- | --- |
| getMentions | 获取当前 contentState 中提到的人的列表 | Function(contentState: ContentState): string\[] |
| toContentState | 把字符串转成 ContentState | Function(value: string): ContentState |
| toString | 把 ContentState 转成字符串 | Function(contentState: ContentState): string |
| API | 说明 | 类型 | 版本 |
| --- | --- | --- | --- |
| getMentions | 获取当前 contentState 中提到的人的列表 | Function(contentState: ContentState): string\[] | |
| toContentState | 把字符串转成 ContentState | Function(value: string): ContentState | |
| toString | 把 ContentState 转成字符串 | Function(contentState: ContentState): string | |
### Mention
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| autoFocus | 自动获取焦点 | boolean | false |
| defaultValue | 默认值 | ContentState, 可以用 `Mention.toContentState(text)` 把文字转换成 ContentState | null |
| defaultSuggestions | 默认建议内容 | Array&lt;string\|Mention.Nav> | \[] |
| disabled | 是否禁用状态. | boolean | false |
| getSuggestionContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位 | function() | () => document.body |
| loading | 加载中 | boolean | false |
| multiLines | 多行模式 | boolean | false |
| notFoundContent | 未找到时的内容 | string | '无匹配结果，轻敲空格完成输入' |
| placeholder | 输入框默认文字 | string | null |
| placement | 建议框位置，可选 `top` `bottom` | string | 'bottom' |
| prefix | 触发弹出下拉框的字符 | string or Array&lt;string> | '@' |
| readOnly | 是否只读. | boolean | false |
| suggestions | 建议内容 | Array&lt;string\|Mention.Nav> | \[] |
| suggestionStyle | 弹出下拉框样式 | object | {} |
| value | 值 | ContentState | null |
| onBlur | 失去焦点时回调 | function(e) | null |
| onChange | 输入框内容变化时回调 | function(contentState: ContentState) | null |
| onFocus | 获得焦点时回调 | function(e) | null |
| onSearchChange | 输入框中 @ 变化时回调 | function(value:string, trigger: string) | \[] |
| onSelect | 下拉框选择建议时回调 | function(suggestion: string, data?: any) | null |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| autoFocus | 自动获取焦点 | boolean | false | |
| defaultValue | 默认值 | ContentState, 可以用 `Mention.toContentState(text)` 把文字转换成 ContentState | null | |
| defaultSuggestions | 默认建议内容 | Array&lt;string\|Mention.Nav> | \[] | 3.12.0 |
| disabled | 是否禁用状态. | boolean | false | |
| getSuggestionContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位 | function() | () => document.body | |
| loading | 加载中 | boolean | false | |
| multiLines | 多行模式 | boolean | false | |
| notFoundContent | 未找到时的内容 | string | '无匹配结果，轻敲空格完成输入' | |
| placeholder | 输入框默认文字 | string | null | |
| placement | 建议框位置，可选 `top` `bottom` | string | 'bottom' | |
| prefix | 触发弹出下拉框的字符 | string or Array&lt;string> | '@' | |
| readOnly | 是否只读. | boolean | false | |
| suggestions | 建议内容 | Array&lt;string\|Mention.Nav> | \[] | |
| suggestionStyle | 弹出下拉框样式 | object | {} | |
| value | 值 | ContentState | null | |
| onBlur | 失去焦点时回调 | function(e) | null | |
| onChange | 输入框内容变化时回调 | function(contentState: ContentState) | null | |
| onFocus | 获得焦点时回调 | function(e) | null | |
| onSearchChange | 输入框中 @ 变化时回调 | function(value:string, trigger: string) | \[] | |
| onSelect | 下拉框选择建议时回调 | function(suggestion: string, data?: any) | null | |
### Mention 方法
| 名称 | 描述 |
| ------- | -------- |
| blur() | 移除焦点 |
| focus() | 获取焦点 |
| 名称 | 描述 | 版本 |
| ------- | -------- | ---- |
| blur() | 移除焦点 | |
| focus() | 获取焦点 | |
### Nav
| 参数 | 说明 | 类型 | 默认值 |
| -------- | ---------------------------------------- | ------ | ------ |
| children | 建议内容 | object | {} |
| value | 建议值，选择建议时，用此值插入到输入框中 | string | "" |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | ---------------------------------------- | ------ | ------ | ---- |
| children | 建议内容 | object | {} | |
| value | 建议值，选择建议时，用此值插入到输入框中 | string | "" | |

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

@ -22,33 +22,33 @@ When need to mention someone or something.
### Mention
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| autoFocus | Auto get focus when component mounted | boolean | `false` |
| defaultValue | Default value | string | - |
| filterOption | Customize filter option logic | false \| (input: string, option: OptionProps) => boolean | - |
| notFoundContent | Set mentions content when not match | ReactNode | 'Not Found' |
| 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 | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| autoFocus | Auto get focus when component mounted | boolean | `false` | 3.19.0 |
| defaultValue | Default value | string | - | 3.19.0 |
| filterOption | Customize filter option logic | false \| (input: string, option: OptionProps) => boolean | - | 3.19.0 |
| notFoundContent | Set mentions content when not match | ReactNode | 'Not Found' | 3.19.0 |
| placement | Set popup placement | 'top' \| 'bottom' | 'bottom' | 3.19.0 |
| prefix | Set trigger prefix keyword | string \| string[] | '@' | 3.19.0 |
| split | Set split string before and after selected mention | string | ' ' | 3.19.0 |
| validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - | 3.19.0 |
| value | Set value of mentions | string | - | 3.19.0 |
| onChange | Trigger when value changed | (text: string) => void | - | 3.19.0 |
| onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - | 3.19.0 |
| onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - | 3.19.0 |
| onFocus | Trigger when mentions get focus | () => void | - | 3.19.0 |
| onBlur | Trigger when mentions lose focus | () => void | - | 3.19.0 |
### Mention methods
| Name | Description |
| ------- | ------------ |
| blur() | remove focus |
| focus() | get focus |
| Name | Description | Version |
| ------- | ------------ | ------- |
| blur() | remove focus | 3.19.0 |
| focus() | get focus | 3.19.0 |
### Option
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| children | suggestion content | ReactNode | - |
| value | value of suggestion, the value will insert into input filed while selected | string | '' |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| children | suggestion content | ReactNode | - | 3.19.0 |
| value | value of suggestion, the value will insert into input filed while selected | string | '' | 3.19.0 |

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

@ -32,33 +32,33 @@ title: Mentions
### Mention
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| autoFocus | 自动获得焦点 | boolean | `false` |
| defaultValue | 默认值 | string | - |
| filterOption | 自定义过滤逻辑 | false \| (input: string, option: OptionProps) => boolean | - |
| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | 'Not Found' |
| 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 | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| autoFocus | 自动获得焦点 | boolean | `false` | 3.19.0 |
| defaultValue | 默认值 | string | - | 3.19.0 |
| filterOption | 自定义过滤逻辑 | false \| (input: string, option: OptionProps) => boolean | - | 3.19.0 |
| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | 'Not Found' | 3.19.0 |
| placement | 弹出层展示位置 | 'top' \| 'bottom' | 'bottom' | 3.19.0 |
| prefix | 设置触发关键字 | string \| string[] | '@' | 3.19.0 |
| split | 设置选中项前后分隔符 | string | ' ' | 3.19.0 |
| validateSearch | 自定义触发验证逻辑 | (text: string, props: MentionsProps) => void | - | 3.19.0 |
| value | 设置值 | string | - | 3.19.0 |
| onChange | 值改变时触发 | (text: string) => void | - | 3.19.0 |
| onSelect | 选择选项时触发 | (option: OptionProps, prefix: string) => void | - | 3.19.0 |
| onSearch | 搜索时触发 | (text: string, prefix: string) => void | - | 3.19.0 |
| onFocus | 获得焦点时触发 | () => void | - | 3.19.0 |
| onBlur | 失去焦点时触发 | () => void | - | 3.19.0 |
### Mention 方法
| 名称 | 描述 |
| ------- | -------- |
| blur() | 移除焦点 |
| focus() | 获取焦点 |
| 名称 | 描述 | 版本 |
| ------- | -------- | ------ |
| blur() | 移除焦点 | 3.19.0 |
| focus() | 获取焦点 | 3.19.0 |
### Option
| 参数 | 说明 | 类型 | 默认值 |
| -------- | -------------- | --------- | ------ |
| children | 选项内容 | ReactNode | - |
| value | 选择时填充的值 | string | '' |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | -------------- | --------- | ------ | ------ |
| children | 选项内容 | ReactNode | - | 3.19.0 |
| value | 选择时填充的值 | string | '' | 3.19.0 |

74
components/menu/index.en-US.md
View File

@ -26,54 +26,54 @@ More layouts with navigation: [layout](/components/layout).
### Menu
| Param | Description | Type | Default value |
| --- | --- | --- | --- |
| defaultOpenKeys | array with the keys of default opened sub menus | string\[] | |
| defaultSelectedKeys | array with the keys of default selected menu items | string\[] | |
| forceSubMenuRender | render submenu into DOM before it shows | boolean | false |
| inlineCollapsed | specifies the collapsed status when menu is inline mode | boolean | - |
| inlineIndent | indent px of inline menu item on each level | number | 24 |
| mode | type of the menu; `vertical`, `horizontal`, and `inline` modes are supported | string: `vertical` \| `horizontal` \| `inline` | `vertical` |
| multiple | Allow selection of multiple items | boolean | false |
| openKeys | array with the keys of currently opened sub menus | string\[] | |
| selectable | allow selecting menu items | boolean | true |
| selectedKeys | array with the keys of currently selected menu items | string\[] | |
| style | style of the root node | object | |
| subMenuCloseDelay | delay time to hide submenu when mouse leave, unit: second | number | 0.1 |
| subMenuOpenDelay | delay time to show submenu when mouse enter, unit: second | number | 0 |
| theme | color theme of the menu | string: `light` `dark` | `light` |
| onClick | callback executed when a menu item is clicked | function({ item, key, keyPath, domEvent }) | - |
| onDeselect | callback executed when a menu item is deselected, only supported for multiple mode | function({ item, key, keyPath, selectedKeys, domEvent }) | - |
| onOpenChange | called when open/close sub menu | function(openKeys: string\[]) | noop |
| onSelect | callback executed when a menu item is selected | function({ item, key, keyPath, selectedKeys, domEvent }) | none |
| overflowedIndicator | Customized icon when menu collapsed | ReactNode | - |
| Param | Description | Type | Default value | Version |
| --- | --- | --- | --- | --- |
| defaultOpenKeys | array with the keys of default opened sub menus | string\[] | | |
| defaultSelectedKeys | array with the keys of default selected menu items | string\[] | | |
| forceSubMenuRender | render submenu into DOM before it shows | boolean | false | |
| inlineCollapsed | specifies the collapsed status when menu is inline mode | boolean | - | |
| inlineIndent | indent px of inline menu item on each level | number | 24 | |
| mode | type of the menu; `vertical`, `horizontal`, and `inline` modes are supported | string: `vertical` \| `horizontal` \| `inline` | `vertical` | |
| multiple | Allow selection of multiple items | boolean | false | |
| openKeys | array with the keys of currently opened sub menus | string\[] | | |
| selectable | allow selecting menu items | boolean | true | |
| selectedKeys | array with the keys of currently selected menu items | string\[] | | |
| style | style of the root node | object | | |
| subMenuCloseDelay | delay time to hide submenu when mouse leave, unit: second | number | 0.1 | |
| subMenuOpenDelay | delay time to show submenu when mouse enter, unit: second | number | 0 | |
| theme | color theme of the menu | string: `light` `dark` | `light` | |
| onClick | callback executed when a menu item is clicked | function({ item, key, keyPath, domEvent }) | - | |
| onDeselect | callback executed when a menu item is deselected, only supported for multiple mode | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |
| onOpenChange | called when open/close sub menu | function(openKeys: string\[]) | noop | |
| onSelect | callback executed when a menu item is selected | function({ item, key, keyPath, selectedKeys, domEvent }) | none | |
| overflowedIndicator | Customized icon when menu collapsed | ReactNode | - | 3.16.0 |
> More options in [rc-menu](https://github.com/react-component/menu#api)
### Menu.Item
| Param | Description | Type | Default value |
| -------- | ------------------------------------ | ------- | ------------- |
| disabled | whether menu item is disabled or not | boolean | false |
| key | unique id of the menu item | string | |
| title | set display title for collapsed item | string | |
| Param | Description | Type | Default value | Version |
| -------- | ------------------------------------ | ------- | ------------- | ------- |
| disabled | whether menu item is disabled or not | boolean | false | |
| key | unique id of the menu item | string | | |
| title | set display title for collapsed item | string | | 3.11.0 |
### Menu.SubMenu
| Param | Description | Type | Default value |
| --- | --- | --- | --- |
| children | sub menus or sub menu items | Array&lt;MenuItem\|SubMenu> | |
| disabled | whether sub menu is disabled or not | boolean | false |
| key | unique id of the sub menu | string | |
| title | title of the sub menu | string\|ReactNode | |
| onTitleClick | callback executed when the sub menu title is clicked | function({ key, domEvent }) | |
| Param | Description | Type | Default value | Version |
| --- | --- | --- | --- | --- |
| children | sub menus or sub menu items | Array&lt;MenuItem\|SubMenu> | | |
| disabled | whether sub menu is disabled or not | boolean | false | |
| key | unique id of the sub menu | string | | |
| title | title of the sub menu | string\|ReactNode | | |
| onTitleClick | callback executed when the sub menu title is clicked | function({ key, domEvent }) | | |
### Menu.ItemGroup
| Param | Description | Type | Default value |
| -------- | ------------------ | ----------------- | ------------- |
| children | sub menu items | MenuItem\[] | |
| title | title of the group | string\|ReactNode | |
| Param | Description | Type | Default value | Version |
| -------- | ------------------ | ----------------- | ------------- | ------- |
| children | sub menu items | MenuItem\[] | | |
| title | title of the group | string\|ReactNode | | |
### Menu.Divider

74
components/menu/index.zh-CN.md
View File

@ -27,54 +27,54 @@ subtitle: 导航菜单
### Menu
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | string\[] | |
| defaultSelectedKeys | 初始选中的菜单项 key 数组 | string\[] | |
| forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false |
| inlineCollapsed | inline 时菜单是否收起状态 | boolean | - |
| inlineIndent | inline 模式的菜单缩进宽度 | number | 24 |
| mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | string: `vertical` `horizontal` `inline` | `vertical` |
| multiple | 是否允许多选 | boolean | false |
| openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string\[] | |
| selectable | 是否允许选中 | boolean | true |
| selectedKeys | 当前选中的菜单项 key 数组 | string\[] | |
| style | 根节点样式 | object | |
| subMenuCloseDelay | 用户鼠标离开子菜单后关闭延时，单位：秒 | number | 0.1 |
| subMenuOpenDelay | 用户鼠标进入子菜单后开启延时，单位：秒 | number | 0 |
| theme | 主题颜色 | string: `light` `dark` | `light` |
| onClick | 点击 MenuItem 调用此函数 | function({ item, key, keyPath, domEvent }) | - |
| onDeselect | 取消选中时调用，仅在 multiple 生效 | function({ item, key, keyPath, selectedKeys, domEvent }) | - |
| onOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string\[]) | noop |
| onSelect | 被选中时调用 | function({ item, key, keyPath, selectedKeys, domEvent }) | 无   |
| overflowedIndicator | 自定义 Menu 折叠时的图标 | ReactNode | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | string\[] | | |
| defaultSelectedKeys | 初始选中的菜单项 key 数组 | string\[] | | |
| forceSubMenuRender | 在子菜单展示之前就渲染进 DOM | boolean | false | |
| inlineCollapsed | inline 时菜单是否收起状态 | boolean | - | |
| inlineIndent | inline 模式的菜单缩进宽度 | number | 24 | |
| mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | string: `vertical` `horizontal` `inline` | `vertical` | |
| multiple | 是否允许多选 | boolean | false | |
| openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string\[] | | |
| selectable | 是否允许选中 | boolean | true | |
| selectedKeys | 当前选中的菜单项 key 数组 | string\[] | | |
| style | 根节点样式 | object | | |
| subMenuCloseDelay | 用户鼠标离开子菜单后关闭延时，单位：秒 | number | 0.1 | |
| subMenuOpenDelay | 用户鼠标进入子菜单后开启延时，单位：秒 | number | 0 | |
| theme | 主题颜色 | string: `light` `dark` | `light` | |
| onClick | 点击 MenuItem 调用此函数 | function({ item, key, keyPath, domEvent }) | - | |
| onDeselect | 取消选中时调用，仅在 multiple 生效 | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |
| onOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string\[]) | noop | |
| onSelect | 被选中时调用 | function({ item, key, keyPath, selectedKeys, domEvent }) | 无   | |
| overflowedIndicator | 自定义 Menu 折叠时的图标 | ReactNode | - | 3.16.0 |
> More options in [rc-menu](https://github.com/react-component/menu#api)
### Menu.Item
| 参数 | 说明 | 类型 | 默认值 |
| -------- | ------------------------ | ------- | ------ |
| disabled | 是否禁用 | boolean | false |
| key | item 的唯一标志 | string | |
| title | 设置收缩时展示的悬浮标题 | string | |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | ------------------------ | ------- | ------ | ------ |
| disabled | 是否禁用 | boolean | false | |
| key | item 的唯一标志 | string | | |
| title | 设置收缩时展示的悬浮标题 | string | | 3.11.0 |
### Menu.SubMenu
| 参数 | 说明 | 类型 | 默认值 |
| ------------ | -------------- | --------------------------- | ------ |
| children | 子菜单的菜单项 | Array&lt;MenuItem\|SubMenu> | |
| disabled | 是否禁用 | boolean | false |
| key | 唯一标志 | string | |
| title | 子菜单项值 | string\|ReactNode | |
| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ------------ | -------------- | --------------------------- | ------ | ---- |
| children | 子菜单的菜单项 | Array&lt;MenuItem\|SubMenu> | | |
| disabled | 是否禁用 | boolean | false | |
| key | 唯一标志 | string | | |
| title | 子菜单项值 | string\|ReactNode | | |
| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | | |
### Menu.ItemGroup
| 参数 | 说明 | 类型 | 默认值 |
| -------- | ------------ | ----------------- | ------ |
| children | 分组的菜单项 | MenuItem\[] | |
| title | 分组标题 | string\|ReactNode | |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | ------------ | ----------------- | ------ | ---- |
| children | 分组的菜单项 | MenuItem\[] | | |
| title | 分组标题 | string\|ReactNode | | |
### Menu.Divider

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

@ -23,11 +23,11 @@ This components provides some static methods, with usage and arguments as follow
- `message.warn(content, [duration], onClose)` // alias of warning
- `message.loading(content, [duration], onClose)`
| Argument | Description | Type | Default |
| --- | --- | --- | --- |
| content | content of the message | string\|ReactNode | - |
| duration | time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 1.5 |
| onClose | Specify a function that will be called when the message is closed | Function | - |
| Argument | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| content | content of the message | string\|ReactNode | - | |
| duration | time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 1.5 | |
| onClose | Specify a function that will be called when the message is closed | Function | - | |
`afterClose` can be called in thenable interface:
@ -40,12 +40,12 @@ where `level` refers one static methods of `message`. The result of `then` metho
The properties of config are as follows:
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| content | 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 | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| content | 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 | - | 3.9.0 |
### Global static methods
@ -64,9 +64,9 @@ message.config({
});
```
| Argument | Description | Type | Default |
| --- | --- | --- | --- |
| 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 |
| Argument | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| duration | time before auto-dismiss, in seconds | number | 1.5 | 3.9.0 |
| getContainer | Return the mount node for Message | () => HTMLElement | () => document.body | 3.9.0 |
| maxCount | max message show, drop oldest if exceed limit | number | - | 3.9.0 |
| top | distance from top | number | 24 | 3.9.0 |

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

@ -24,11 +24,11 @@ title: Message
- `message.warn(content, [duration], onClose)` // alias of warning
- `message.loading(content, [duration], onClose)`
| 参数 | 说明 | 类型 | 默认值 |
| -------- | --------------------------------------------- | ----------------- | ------ |
| content | 提示内容 | string\|ReactNode | - |
| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭。 | number | 3 |
| onClose | 关闭时触发的回调函数 | Function | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | --------------------------------------------- | ----------------- | ------ | ---- |
| content | 提示内容 | string\|ReactNode | - | |
| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭。 | number | 3 | |
| onClose | 关闭时触发的回调函数 | Function | - | |
组件同时提供 promise 接口。
@ -39,12 +39,12 @@ title: Message
- `message.open(config)`
| 参数 | 说明 | 类型 | 默认值 |
| -------- | --------------------------------------------- | --------- | ------ |
| content | 提示内容 | ReactNode | - |
| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭。 | number | 3 |
| onClose | 关闭时触发的回调函数 | Function | - |
| icon | 自定义图标 | ReactNode | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | --------------------------------------------- | --------- | ------ | ----- |
| content | 提示内容 | ReactNode | - | |
| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭。 | number | 3 | |
| onClose | 关闭时触发的回调函数 | Function | - | |
| icon | 自定义图标 | ReactNode | - | 3.9.0 |
### 全局方法
@ -63,9 +63,9 @@ message.config({
});
```
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| duration | 默认自动关闭延时，单位秒 | number | 3 |
| getContainer | 配置渲染节点的输出位置 | () => HTMLElement | () => document.body |
| maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - |
| top | 消息距离顶部的位置 | number | 24 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| duration | 默认自动关闭延时，单位秒 | number | 3 | 3.9.0 |
| getContainer | 配置渲染节点的输出位置 | () => HTMLElement | () => document.body | 3.9.0 |
| maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - | 3.9.0 |
| top | 消息距离顶部的位置 | number | 24 | 3.9.0 |

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

@ -12,33 +12,33 @@ When requiring users to interact with the application, but without jumping to a
## API
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| 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. | object | {} |
| cancelText | Text of the Cancel button | string\|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 |
| confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | false |
| destroyOnClose | Whether to unmount child components on onClose | boolean | false |
| footer | Footer content, set as `footer={null}` when you don't need default buttons | string\|ReactNode | OK and Cancel buttons |
| forceRender | Force render Modal | boolean | false |
| getContainer | Return the mount node for Modal | (instance): HTMLElement | () => document.body |
| mask | Whether show mask or not. | Boolean | true |
| maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | boolean | true |
| maskStyle | Style for modal's mask element. | object | {} |
| okText | Text of the OK button | string\|ReactNode | `OK` |
| okType | Button `type` of the OK button | string | `primary` |
| okButtonProps | The ok button props | [ButtonProps](/components/button) | - |
| cancelButtonProps | The cancel button props | [ButtonProps](/components/button) | - |
| style | Style of floating layer, typically used at least for adjusting the position. | object | - |
| title | The modal dialog's title | string\|ReactNode | - |
| visible | Whether the modal dialog is visible or not | boolean | false |
| width | Width of the modal dialog | string\|number | 520 |
| wrapClassName | The class name of the container of the modal dialog | string | - |
| zIndex | The `z-index` of the Modal | Number | 1000 |
| onCancel | Specify a function that will be called when a user clicks mask, close button on top right or Cancel button | function(e) | - |
| onOk | Specify a function that will be called when a user clicks the OK button | function(e) | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| 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. | object | {} | |
| cancelText | Text of the Cancel button | string\|ReactNode | `Cancel` | |
| centered | Centered Modal | Boolean | `false` | 3.8.0 |
| closable | Whether a close (x) button is visible on top right of the modal dialog or not | boolean | true | |
| confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | false | |
| destroyOnClose | Whether to unmount child components on onClose | boolean | false | 3.1.0 |
| footer | Footer content, set as `footer={null}` when you don't need default buttons | string\|ReactNode | OK and Cancel buttons | |
| forceRender | Force render Modal | boolean | false | 3.12.0 |
| getContainer | Return the mount node for Modal | (instance): HTMLElement | () => document.body | |
| mask | Whether show mask or not. | Boolean | true | |
| maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | boolean | true | |
| maskStyle | Style for modal's mask element. | object | {} | |
| okText | Text of the OK button | string\|ReactNode | `OK` | |
| okType | Button `type` of the OK button | string | `primary` | |
| okButtonProps | The ok button props | [ButtonProps](/components/button) | - | 3.7.0 |
| cancelButtonProps | The cancel button props | [ButtonProps](/components/button) | - | 3.7.0 |
| style | Style of floating layer, typically used at least for adjusting the position. | object | - | |
| title | The modal dialog's title | string\|ReactNode | - | |
| visible | Whether the modal dialog is visible or not | boolean | false | |
| width | Width of the modal dialog | string\|number | 520 | |
| wrapClassName | The class name of the container of the modal dialog | string | - | |
| zIndex | The `z-index` of the Modal | Number | 1000 | |
| onCancel | Specify a function that will be called when a user clicks mask, close button on top right or Cancel button | function(e) | - | |
| onOk | Specify a function that will be called when a user clicks the OK button | function(e) | - | |
#### Note
@ -56,27 +56,27 @@ There are five ways to display the information based on the content's nature:
The items listed above are all functions, expecting a settings object as parameter. The properties of the object are follows:
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| autoFocusButton | Specify which button to autofocus | null\|string: `ok` `cancel` | `ok` |
| cancelText | Text of the Cancel button with Modal.confirm | string | `Cancel` |
| centered | Centered Modal | Boolean | `false` |
| className | className of container | string | - |
| content | Content | string\|ReactNode | - |
| icon | custom icon (`Added in 3.12.0`) | string\|ReactNode | `<Icon type="question-circle">` |
| iconType | Icon `type` of the Icon component (deperated after `3.12.0`) | string | `question-circle` |
| keyboard | Whether support press esc to close | Boolean | true |
| mask | Whether show mask or not. | Boolean | true |
| maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | Boolean | `false` |
| okText | Text of the OK button | string | `OK` |
| okType | Button `type` of the OK button | string | `primary` |
| okButtonProps | The ok button props | [ButtonProps](/components/button) | - |
| cancelButtonProps | The cancel button props | [ButtonProps](/components/button) | - |
| title | Title | string\|ReactNode | - |
| width | Width of the modal dialog | string\|number | 416 |
| zIndex | The `z-index` of the Modal | Number | 1000 |
| onCancel | Specify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | - |
| onOk | Specify a function that will be called when the user clicks the OK button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| autoFocusButton | Specify which button to autofocus | null\|string: `ok` `cancel` | `ok` | 3.10.0 |
| cancelText | Text of the Cancel button with Modal.confirm | string | `Cancel` | |
| centered | Centered Modal | Boolean | `false` | 3.8.0 |
| className | className of container | string | - | 3.1.1 |
| content | Content | string\|ReactNode | - | |
| icon | custom icon (`Added in 3.12.0`) | string\|ReactNode | `<Icon type="question-circle">` | 3.12.0 |
| iconType | Icon `type` of the Icon component (deperated after `3.12.0`) | string | `question-circle` | |
| keyboard | Whether support press esc to close | Boolean | true | 3.4.2 |
| mask | Whether show mask or not. | Boolean | true | 3.13.0 |
| maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | Boolean | `false` | |
| okText | Text of the OK button | string | `OK` | |
| okType | Button `type` of the OK button | string | `primary` | |
| okButtonProps | The ok button props | [ButtonProps](/components/button) | - | 3.10.0 |
| cancelButtonProps | The cancel button props | [ButtonProps](/components/button) | - | 3.10.0 |
| title | Title | string\|ReactNode | - | |
| width | Width of the modal dialog | string\|number | 416 | |
| zIndex | The `z-index` of the Modal | Number | 1000 | |
| onCancel | Specify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | - | |
| onOk | Specify a function that will be called when the user clicks the OK button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | - | |
All the `Modal.method`s will return a reference, and then we can update and close the modal dialog by the reference.

96
components/modal/index.zh-CN.md
View File

@ -15,34 +15,34 @@ title: Modal
## API
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| afterClose | Modal 完全关闭后的回调 | function | 无 |
| bodyStyle | Modal body 样式 | object | {} |
| cancelText | 取消按钮文字 | string\|ReactNode | 取消 |
| centered | 垂直居中展示 Modal | Boolean | `false` |
| closable | 是否显示右上角的关闭按钮 | boolean | true |
| confirmLoading | 确定按钮 loading | boolean | 无 |
| destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false |
| footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer={null}` | string\|ReactNode | 确定取消按钮 |
| forceRender | 强制渲染 Modal | boolean | false |
| getContainer | 指定 Modal 挂载的 HTML 节点 | (instance): HTMLElement | () => document.body |
| keyboard | 是否支持键盘 esc 关闭 | boolean | true |
| mask | 是否展示遮罩 | Boolean | true |
| maskClosable | 点击蒙层是否允许关闭 | boolean | true |
| maskStyle | 遮罩样式 | object | {} |
| okText | 确认按钮文字 | string\|ReactNode | 确定 |
| okType | 确认按钮类型 | string | primary |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button) | - |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button) | - |
| style | 可用于设置浮层的样式，调整浮层位置等 | object | - |
| title | 标题 | string\|ReactNode | 无 |
| visible | 对话框是否可见 | boolean | 无 |
| width | 宽度 | string\|number | 520 |
| wrapClassName | 对话框外层容器的类名 | string | - |
| zIndex | 设置 Modal 的 `z-index` | Number | 1000 |
| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | 无 |
| onOk | 点击确定回调 | function(e) | 无 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| afterClose | Modal 完全关闭后的回调 | function | 无 | |
| bodyStyle | Modal body 样式 | object | {} | |
| cancelText | 取消按钮文字 | string\|ReactNode | 取消 | |
| centered | 垂直居中展示 Modal | Boolean | `false` | 3.8.0 |
| closable | 是否显示右上角的关闭按钮 | boolean | true | |
| confirmLoading | 确定按钮 loading | boolean | 无 | |
| destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false | 3.1.0 |
| footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer={null}` | string\|ReactNode | 确定取消按钮 | |
| forceRender | 强制渲染 Modal | boolean | false | 3.12.0 |
| getContainer | 指定 Modal 挂载的 HTML 节点 | (instance): HTMLElement | () => document.body | |
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | 3.4.2 |
| mask | 是否展示遮罩 | Boolean | true | |
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
| maskStyle | 遮罩样式 | object | {} | |
| okText | 确认按钮文字 | string\|ReactNode | 确定 | |
| okType | 确认按钮类型 | string | primary | |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button) | - | 3.7.0 |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button) | - | 3.7.0 |
| style | 可用于设置浮层的样式，调整浮层位置等 | object | - | |
| title | 标题 | string\|ReactNode | 无 | |
| visible | 对话框是否可见 | boolean | 无 | |
| width | 宽度 | string\|number | 520 | |
| wrapClassName | 对话框外层容器的类名 | string | - | |
| zIndex | 设置 Modal 的 `z-index` | Number | 1000 | |
| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | 无 | |
| onOk | 点击确定回调 | function(e) | 无 | |
#### 注意
@ -60,26 +60,26 @@ title: Modal
以上均为一个函数，参数为 object，具体属性如下：
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| autoFocusButton | 指定自动获得焦点的按钮 | null\|string: `ok` `cancel` | `ok` |
| cancelText | 设置 Modal.confirm 取消按钮文字 | string | 取消 |
| centered | 垂直居中展示 Modal | Boolean | `false` |
| className | 容器类名 | string | - |
| content | 内容 | string\|ReactNode | 无 |
| icon | 自定义图标（3.12.0 新增） | string\|ReactNode | `<Icon type="question-circle">` |
| iconType | 图标类型（3.12.0 后废弃，请使用 `icon`） | string | `question-circle` |
| mask | 是否展示遮罩 | Boolean | true |
| maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` |
| okText | 确认按钮文字 | string | 确定 |
| okType | 确认按钮类型 | string | primary |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button) | - |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button) | - |
| title | 标题 | string\|ReactNode | 无 |
| width | 宽度 | string\|number | 416 |
| zIndex | 设置 Modal 的 `z-index` | Number | 1000 |
| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 |
| onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| autoFocusButton | 指定自动获得焦点的按钮 | null\|string: `ok` `cancel` | `ok` | 3.10.0 |
| cancelText | 设置 Modal.confirm 取消按钮文字 | string | 取消 | |
| centered | 垂直居中展示 Modal | Boolean | `false` | 3.8.2 |
| className | 容器类名 | string | - | 3.1.1 |
| content | 内容 | string\|ReactNode | 无 | |
| icon | 自定义图标（3.12.0 新增） | string\|ReactNode | `<Icon type="question-circle">` | 3.12.0 |
| iconType | 图标类型（3.12.0 后废弃，请使用 `icon`） | string | `question-circle` | |
| mask | 是否展示遮罩 | Boolean | true | 3.13.0 |
| maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` | |
| okText | 确认按钮文字 | string | 确定 | |
| okType | 确认按钮类型 | string | primary | |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button) | - | 3.10.0 |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button) | - | 3.10.0 |
| title | 标题 | string\|ReactNode | 无 | |
| width | 宽度 | string\|number | 416 | |
| zIndex | 设置 Modal 的 `z-index` | Number | 1000 | |
| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 | |
| onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 | |
以上函数调用后，会返回一个引用，可以通过该引用更新和关闭弹窗。

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

@ -28,22 +28,22 @@ To display a notification message at any of the four corners of the viewport. Ty
The properties of config are as follows:
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| 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 | - |
| description | The content of notification box (required) | string\|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 | - |
| key | The unique identifier of the Notification | string | - |
| message | The title of notification box (required) | string\|ReactNode | - |
| onClose | Specify a function that will be called when the close button is clicked | Function | - |
| onClick | Specify a function that will be called when the notification is clicked | Function | - |
| placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
| style | Customized inline style | [React.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 |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| 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 | - | |
| description | The content of notification box (required) | string\|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 | - | |
| key | The unique identifier of the Notification | string | - | |
| message | The title of notification box (required) | string\|ReactNode | - | |
| onClose | Specify a function that will be called when the close button is clicked | Function | - | |
| onClick | Specify a function that will be called when the notification is clicked | Function | - | 3.11.0 |
| placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` | |
| style | Customized inline style | [React.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 | |
`notification` also provides a global `config()` method that can be used for specifying the default options. Once this method is used, all the notification boxes will take into account these globally defined options when displaying.
@ -57,10 +57,10 @@ notification.config({
});
```
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| bottom | Distance from the bottom of the viewport, when `placement` is `bottomRight` or `bottomLeft` (unit: pixels). | number | 24 |
| 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 |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| bottom | Distance from the bottom of the viewport, when `placement` is `bottomRight` or `bottomLeft` (unit: pixels). | number | 24 | |
| 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 | |

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

@ -29,22 +29,22 @@ subtitle: 通知提醒框
config 参数如下：
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| btn | 自定义关闭按钮 | ReactNode | - |
| bottom | 消息从底部弹出时，距离底部的位置，单位像素。 | number | 24 |
| className | 自定义 CSS class | string | - |
| description | 通知提醒内容，必选 | string\|ReactNode | - |
| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 |
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body |
| icon | 自定义图标 | ReactNode | - |
| key | 当前通知唯一标志 | string | - |
| message | 通知提醒标题，必选 | string\|ReactNode | - |
| onClose | 点击默认关闭按钮时触发的回调函数 | Function | - |
| onClick | 点击通知时触发的回调函数 | Function | - |
| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | topRight |
| style | 自定义内联样式 | [React.CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |
| top | 消息从顶部弹出时，距离顶部的位置，单位像素。 | number | 24 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| btn | 自定义关闭按钮 | ReactNode | - | |
| bottom | 消息从底部弹出时，距离底部的位置，单位像素。 | number | 24 | |
| className | 自定义 CSS class | string | - | |
| description | 通知提醒内容，必选 | string\|ReactNode | - | |
| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 | |
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body | |
| icon | 自定义图标 | ReactNode | - | |
| key | 当前通知唯一标志 | string | - | |
| message | 通知提醒标题，必选 | string\|ReactNode | - | |
| onClose | 点击默认关闭按钮时触发的回调函数 | Function | - | |
| onClick | 点击通知时触发的回调函数 | Function | - | 3.11.0 |
| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | topRight | |
| style | 自定义内联样式 | [React.CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - | |
| top | 消息从顶部弹出时，距离顶部的位置，单位像素。 | number | 24 | |
还提供了一个全局配置方法，在调用前提前配置，全局一次生效。
@ -58,10 +58,10 @@ notification.config({
});
```
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| bottom | 消息从底部弹出时，距离底部的位置，单位像素。 | number | 24 |
| duration | 默认自动关闭延时，单位秒 | number | 4.5 |
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body |
| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | topRight |
| top | 消息从顶部弹出时，距离顶部的位置，单位像素。 | number | 24 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| bottom | 消息从底部弹出时，距离底部的位置，单位像素。 | number | 24 | |
| duration | 默认自动关闭延时，单位秒 | number | 4.5 | |
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body | |
| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | topRight | |
| top | 消息从顶部弹出时，距离顶部的位置，单位像素。 | number | 24 | |

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

@ -14,13 +14,13 @@ It can also be used as inter-page navigation when it is needed to make the user
## API
| Param | Description | Type | Default value |
| --- | --- | --- | --- |
| title | custom title text | ReactNode | - |
| subTitle | custom subTitle text | ReactNode | - |
| backIcon | custom back icon, if false the back icon will not be displayed | ReactNode | `<Icon type="arrow-left" />` |
| tags | Tag list next to title | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - |
| extra | Operating area, at the end of the line of the title line | ReactNode | - |
| breadcrumb | breadcrumb config | [breadcrumb](https://ant.design/components/breadcrumb-cn/) | - |
| footer | PageHeader's footer, generally used to render TabBar | ReactNode | - |
| onBack | back icon click event | `()=>void` | `()=>history.back()` |
| Param | Description | Type | Default value | Version |
| --- | --- | --- | --- | --- |
| title | custom title text | ReactNode | - | 3.14.0 |
| subTitle | custom subTitle text | ReactNode | - | 3.14.0 |
| backIcon | custom back icon, if false the back icon will not be displayed | ReactNode | `<Icon type="arrow-left" />` | 3.14.0 |
| tags | Tag list next to title | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | 3.14.0 |
| extra | Operating area, at the end of the line of the title line | ReactNode | - | 3.14.0 |
| breadcrumb | breadcrumb config | [breadcrumb](https://ant.design/components/breadcrumb-cn/) | - | 3.14.0 |
| footer | PageHeader's footer, generally used to render TabBar | ReactNode | - | 3.14.0 |
| onBack | back icon click event | `()=>void` | `()=>history.back()` | 3.14.0 |

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

@ -14,13 +14,13 @@ subtitle: 页头
## API
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| title | 自定义标题文字 | ReactNode | - |
| subTitle | 自定义的二级标题文字 | ReactNode | - |
| backIcon | 自定义 back icon ，如果为 false 不渲染 back icon | ReactNode | `<Icon type="arrow-left" />` |
| tags | title 旁的 tag 列表 | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - |
| extra | 操作区，位于 title 行的行尾 | ReactNode | - |
| breadcrumb | 面包屑的配置 | [breadcrumb](https://ant.design/components/breadcrumb-cn/) | - |
| footer | PageHeader 的页脚，一般用于渲染 TabBar | ReactNode | - |
| onBack | 返回按钮的点击事件 | `()=>void` | `()=>history.back()` |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| title | 自定义标题文字 | ReactNode | - | 3.14.0 |
| subTitle | 自定义的二级标题文字 | ReactNode | - | 3.14.0 |
| backIcon | 自定义 back icon ，如果为 false 不渲染 back icon | ReactNode | `<Icon type="arrow-left" />` | 3.14.0 |
| tags | title 旁的 tag 列表 | [Tag](https://ant.design/components/tag-cn/)[] \| [Tag](https://ant.design/components/tag-cn/) | - | 3.14.0 |
| extra | 操作区，位于 title 行的行尾 | ReactNode | - | 3.14.0 |
| breadcrumb | 面包屑的配置 | [breadcrumb](https://ant.design/components/breadcrumb-cn/) | - | 3.14.0 |
| footer | PageHeader 的页脚，一般用于渲染 TabBar | ReactNode | - | 3.14.0 |
| onBack | 返回按钮的点击事件 | `()=>void` | `()=>history.back()` | 3.14.0 |

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

@ -24,14 +24,14 @@ A long list can be divided into several pages by `Pagination`, and only one page
| defaultCurrent | default initial page number | number | 1 | |
| defaultPageSize | default number of data items per page | number | 10 | |
| disabled | disable pagination | boolean | - | 3.18.0 |
| hideOnSinglePage | Whether to hide pager on single page | boolean | false | |
| hideOnSinglePage | Whether to hide pager on single page | boolean | false | 3.1.0 |
| itemRender | to customize item innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | |
| pageSize | number of data items per page | number | - | |
| pageSizeOptions | specify the sizeChanger options | string\[] | \['10', '20', '30', '40'] | |
| showLessItems | show less page items | boolean | false | |
| showLessItems | show less page items | boolean | false | 3.16.3 |
| showQuickJumper | determine whether you can jump to pages directly | boolean \| `{ goButton: ReactNode }` | false | |
| showSizeChanger | determine whether `pageSize` can be changed | boolean | false | |
| showTitle | show page items title | boolean | true | |
| showTitle | show page items title | boolean | true | 3.19.3 |
| showTotal | to display the total number and range | Function(total, range) | - | |
| simple | whether to use simple mode | boolean | - | |
| size | specify the size of `Pagination`, can be set to `small` | string | "" | |

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

@ -24,12 +24,12 @@ cols: 1
| current | 当前页数 | number | - | |
| defaultCurrent | 默认的当前页数 | number | 1 | |
| defaultPageSize | 默认的每页条数 | number | 10 | |
| disabled | 禁用分页 | boolean | - | 3.10.0 |
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | |
| disabled | 禁用分页 | boolean | - | 3.10.0 | 3.18.0 |
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | 3.1.0 |
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | |
| pageSize | 每页条数 | number | - | |
| pageSizeOptions | 指定每页可以显示多少条 | string\[] | \['10', '20', '30', '40'] | |
| showLessItems | show less page items | boolean | false | |
| showLessItems | show less page items | boolean | false | 3.16.3 |
| showQuickJumper | 是否可以快速跳转至某页 | boolean \| `{ goButton: ReactNode }` | false | |
| showSizeChanger | 是否可以改变 pageSize | boolean | false | |
| showTotal | 用于显示数据总量和当前数据顺序 | Function(total, range) | - | |

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

@ -14,16 +14,16 @@ The difference with the `confirm` modal dialog is that it's more lightweight tha
## API
| Param | Description | Type | Default value |
| --- | --- | --- | --- |
| cancelText | text of the Cancel button | string | `Cancel` |
| okText | text of the Confirm button | string | `Confirm` |
| okType | Button `type` of the Confirm button | string | `primary` |
| title | title of the confirmation box | string\|ReactNode | - |
| onCancel | callback of cancel | function(e) | - |
| onConfirm | callback of confirmation | function(e) | - |
| icon | customize icon of confirmation | ReactNode | &lt;Icon type="exclamation-circle" /&gt; |
| disabled | is show popconfirm when click its childrenNode | boolean | false |
| Param | Description | Type | Default value | Version |
| --- | --- | --- | --- | --- |
| cancelText | text of the Cancel button | string | `Cancel` | |
| okText | text of the Confirm button | string | `Confirm` | |
| okType | Button `type` of the Confirm button | string | `primary` | |
| title | title of the confirmation box | string\|ReactNode | - | |
| onCancel | callback of cancel | function(e) | - | |
| onConfirm | callback of confirmation | function(e) | - | |
| icon | customize icon of confirmation | ReactNode | &lt;Icon type="exclamation-circle" /&gt; | 3.8.0 |
| disabled | is show popconfirm when click its childrenNode | boolean | false | 3.19.8 |
Consult [Tooltip's documentation](https://ant.design/components/tooltip/#API) to find more APIs.

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

@ -15,16 +15,16 @@ title: Popconfirm
## API
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| cancelText | 取消按钮文字 | string | 取消 |
| okText | 确认按钮文字 | string | 确定 |
| okType | 确认按钮类型 | string | primary |
| title | 确认框的描述 | string\|ReactNode | 无 |
| onCancel | 点击取消的回调 | function(e) | 无 |
| onConfirm | 点击确认的回调 | function(e) | 无 |
| icon | 自定义弹出气泡 Icon 图标 | ReactNode | &lt;Icon type="exclamation-circle" /&gt; |
| disabled | 点击 Popconfirm 子元素是否弹出气泡确认框 | boolean | false |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| cancelText | 取消按钮文字 | string | 取消 | |
| okText | 确认按钮文字 | string | 确定 | |
| okType | 确认按钮类型 | string | primary | |
| title | 确认框的描述 | string\|ReactNode | 无 | |
| onCancel | 点击取消的回调 | function(e) | 无 | |
| onConfirm | 点击确认的回调 | function(e) | 无 | |
| icon | 自定义弹出气泡 Icon 图标 | ReactNode | &lt;Icon type="exclamation-circle" /&gt; | 3.8.0 |
| disabled | 点击 Popconfirm 子元素是否弹出气泡确认框 | boolean | false | 3.19.8 |
更多属性请参考 [Tooltip](/components/tooltip/#API)。

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

@ -14,10 +14,10 @@ Comparing with `Tooltip`, besides information `Popover` card can also provide ac
## API
| Param | Description | Type | Default value |
| ------- | ------------------- | ----------------- | ------------- |
| content | Content of the card | string\|ReactNode | - |
| title | Title of the card | string\|ReactNode | - |
| Param | Description | Type | Default value | Version |
| ------- | ------------------- | ----------------- | ------------- | ------- |
| content | Content of the card | string\|ReactNode | - | |
| title | Title of the card | string\|ReactNode | - | |
Consult [Tooltip's documentation](https://ant.design/components/tooltip/#API) to find more APIs.

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

@ -15,10 +15,10 @@ title: Popover
## API
| 参数 | 说明 | 类型 | 默认值 |
| ------- | -------- | ----------------- | ------ |
| content | 卡片内容 | string\|ReactNode | 无 |
| title | 卡片标题 | string\|ReactNode | 无 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ------- | -------- | ----------------- | ------ | ---- |
| content | 卡片内容 | string\|ReactNode | 无 | |
| title | 卡片标题 | string\|ReactNode | 无 | |
更多属性请参考 [Tooltip](/components/tooltip/#API)。

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

@ -17,37 +17,37 @@ If it will take a long time to complete an operation, you can use `Progress` to
Properties that shared by all types.
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| type | to set the type, options: `line` `circle` `dashboard` | string | `line` |
| format | template function of the content | function(percent, successPercent) | `percent => percent + '%'` |
| percent | to set the completion percentage | number | 0 |
| showInfo | whether to display the progress value and the status icon | boolean | true |
| status | to set the status of the Progress, options: `success` `exception` `normal` `active`(line only) | string | - |
| strokeLinecap | to set the style of the progress linecap | Enum{ 'round', 'square' } | `round` |
| strokeColor | color of progress bar | string | - |
| successPercent | segmented success percent | number | 0 |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| type | to set the type, options: `line` `circle` `dashboard` | string | `line` | |
| format | template function of the content | function(percent, successPercent) | `percent => percent + '%'` | |
| percent | to set the completion percentage | number | 0 | |
| showInfo | whether to display the progress value and the status icon | boolean | true | |
| status | to set the status of the Progress, options: `success` `exception` `normal` `active`(line only) | string | - | |
| strokeLinecap | to set the style of the progress linecap | Enum{ 'round', 'square' } | `round` | 3.8.0 |
| strokeColor | color of progress bar | string | - | 3.7.0 |
| successPercent | segmented success percent | number | 0 | 3.2.0 |
### `type="line"`
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| strokeWidth | to set the width of the progress bar, unit: `px` | number | 10 |
| strokeColor | color of progress bar, render `linear-gradient` when passing an object | string \| { from: string; to: string; direction: string } | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| strokeWidth | to set the width of the progress bar, unit: `px` | number | 10 | 3.13.1 |
| strokeColor | color of progress bar, render `linear-gradient` when passing an object | string \| { from: string; to: string; direction: string } | - | 3.16.0 |
### `type="circle"`
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| width | to set the canvas width of the circular progress, unit: `px` | number | 132 |
| strokeWidth | to set the width of the circular progress, unit: percentage of the canvas width | number | 6 |
| strokeColor | color of circular progress, render `linear-gradient` when passing an object | string \| object | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| width | to set the canvas width of the circular progress, unit: `px` | number | 132 | 3.13.1 |
| strokeWidth | to set the width of the circular progress, unit: percentage of the canvas width | number | 6 | 3.13.1 |
| strokeColor | color of circular progress, render `linear-gradient` when passing an object | string \| object | - | 3.19.8 |
### `type="dashboard"`
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| width | to set the canvas width of the dashboard progress, unit: `px` | number | 132 |
| strokeWidth | to set the width of the dashboard progress, unit: percentage of the canvas width | number | 6 |
| gapDegree | the gap degree of half circle, 0 ~ 360 | number | 0 |
| gapPosition | the gap position, options: `top` `bottom` `left` `right` | string | `top` |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| width | to set the canvas width of the dashboard progress, unit: `px` | number | 132 | 3.13.1 |
| strokeWidth | to set the width of the dashboard progress, unit: percentage of the canvas width | number | 6 | 3.13.1 |
| gapDegree | the gap degree of half circle, 0 ~ 360 | number | 0 | 3.13.1 |
| gapPosition | the gap position, options: `top` `bottom` `left` `right` | string | `top` | 3.13.1 |

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

@ -18,37 +18,37 @@ title: Progress
各类型共用的属性。
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| type | 类型，可选 `line` `circle` `dashboard` | string | `line` |
| format | 内容的模板函数 | function(percent, successPercent) | `percent => percent + '%'` |
| percent | 百分比 | number | 0 |
| showInfo | 是否显示进度数值或状态图标 | boolean | true |
| status | 状态，可选：`success` `exception` `normal` `active`(仅限 line) | string | - |
| strokeLinecap | | Enum{ 'round', 'square' } | `round` |
| strokeColor | 进度条的色彩 | string | - |
| successPercent | 已完成的分段百分比 | number | 0 |
| 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| type | 类型，可选 `line` `circle` `dashboard` | string | `line` | |
| format | 内容的模板函数 | function(percent, successPercent) | `percent => percent + '%'` | |
| percent | 百分比 | number | 0 | |
| showInfo | 是否显示进度数值或状态图标 | boolean | true | |
| status | 状态，可选：`success` `exception` `normal` `active`(仅限 line) | string | - | |
| strokeLinecap | | Enum{ 'round', 'square' } | `round` | 3.8.0 |
| strokeColor | 进度条的色彩 | string | - | 3.7.0 |
| successPercent | 已完成的分段百分比 | number | 0 | 3.2.0 |
### `type="line"`
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| strokeWidth | 进度条线的宽度，单位 px | number | 10 |
| strokeColor | 进度条的色彩，传入 object 时为渐变 | string \| { from: string; to: string; direction: string } | - |
| 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| strokeWidth | 进度条线的宽度，单位 px | number | 10 | 3.13.1 |
| strokeColor | 进度条的色彩，传入 object 时为渐变 | string \| { from: string; to: string; direction: string } | - | 3.16.0 |
### `type="circle"`
| 属性 | 说明 | 类型 | 默认值 |
| ----------- | ------------------------------------------------ | ------ | ------ |
| width | 圆形进度条画布宽度，单位 px | number | 132 |
| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| object | - |
| 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| width | 圆形进度条画布宽度，单位 px | number | 132 | 3.13.1 |
| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | 3.13.1 |
| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| object | - | 3.19.8 |
### `type="dashboard"`
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| width | 仪表盘进度条画布宽度，单位 px | number | 132 |
| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 360 | number | 0 |
| gapPosition | 仪表盘进度条缺口位置 | Enum{ 'top', 'bottom', 'left', 'right' } | `top` |
| 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| width | 仪表盘进度条画布宽度，单位 px | number | 132 | 3.13.1 |
| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | 3.13.1 |
| gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 360 | number | 0 | 3.13.1 |
| gapPosition | 仪表盘进度条缺口位置 | Enum{ 'top', 'bottom', 'left', 'right' } | `top` | 3.13.1 |

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

@ -15,34 +15,34 @@ Radio.
### Radio
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| autoFocus | get focus when component mounted | boolean | false |
| checked | Specifies whether the radio is selected. | boolean | - |
| defaultChecked | Specifies the initial state: whether or not the radio is selected. | boolean | false |
| disabled | Disable radio | boolean | false |
| value | According to value for comparison, to determine whether the selected | any | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| autoFocus | get focus when component mounted | boolean | false | |
| checked | Specifies whether the radio is selected. | boolean | - | |
| defaultChecked | Specifies the initial state: whether or not the radio is selected. | boolean | false | |
| disabled | Disable radio | boolean | false | |
| value | According to value for comparison, to determine whether the selected | any | - | |
### RadioGroup
Radio group can wrap a group of `Radio`。
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| defaultValue | Default selected value | any | - |
| disabled | Disable all radio buttons | boolean | false |
| name | The `name` property of all `input[type="radio"]` children | string | - |
| options | set children optional | string\[] \| Array&lt;{ label: string value: string disabled?: boolean }> | - |
| size | size for radio button style | `large` \| `default` \| `small` | `default` |
| value | Used for setting the currently selected value. | any | - |
| onChange | The callback function that is triggered when the state changes. | Function(e:Event) | - |
| buttonStyle | style type of radio button | `outline` \| `solid` | `outline` |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| defaultValue | Default selected value | any | - | |
| disabled | Disable all radio buttons | boolean | false | |
| name | The `name` property of all `input[type="radio"]` children | string | - | |
| options | set children optional | string\[] \| Array&lt;{ label: string value: string disabled?: boolean }> | - | |
| size | size for radio button style | `large` \| `default` \| `small` | `default` | |
| value | Used for setting the currently selected value. | any | - | |
| onChange | The callback function that is triggered when the state changes. | Function(e:Event) | - | |
| buttonStyle | style type of radio button | `outline` \| `solid` | `outline` | 3.7.0 |
## Methods
### Radio
| Name | Description |
| ------- | ------------ |
| blur() | remove focus |
| focus() | get focus |
| Name | Description | Version |
| ------- | ------------ | ------- |
| blur() | remove focus | |
| focus() | get focus | |

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

@ -16,33 +16,33 @@ title: Radio
### Radio
| 参数 | 说明 | 类型 | 默认值 |
| -------------- | --------------------------------- | ------- | ------ |
| autoFocus | 自动获取焦点 | boolean | false |
| checked | 指定当前是否选中 | boolean | false |
| defaultChecked | 初始是否选中 | boolean | false |
| value | 根据 value 进行比较，判断是否选中 | any | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------------- | --------------------------------- | ------- | ------ | ---- |
| autoFocus | 自动获取焦点 | boolean | false | |
| checked | 指定当前是否选中 | boolean | false | |
| defaultChecked | 初始是否选中 | boolean | false | |
| value | 根据 value 进行比较，判断是否选中 | any | - | |
### RadioGroup
单选框组合，用于包裹一组 `Radio`。
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| defaultValue | 默认选中的值 | any | - |
| disabled | 禁选所有子单选器 | boolean | false |
| name | RadioGroup 下所有 `input[type="radio"]` 的 `name` 属性 | string | - |
| options | 以配置形式设置子元素 | string\[] \| Array&lt;{ label: string value: string disabled?: boolean }> | - |
| size | 大小，只对按钮样式生效 | `large` \| `default` \| `small` | `default` |
| value | 用于设置当前选中的值 | any | - |
| onChange | 选项变化时的回调函数 | Function(e:Event) | - |
| buttonStyle | RadioButton 的风格样式，目前有描边和填色两种风格 | `outline` \| `solid` | `outline` |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| defaultValue | 默认选中的值 | any | - | |
| disabled | 禁选所有子单选器 | boolean | false | 3.6.5 |
| name | RadioGroup 下所有 `input[type="radio"]` 的 `name` 属性 | string | - | |
| options | 以配置形式设置子元素 | string\[] \| Array&lt;{ label: string value: string disabled?: boolean }> | - | |
| size | 大小，只对按钮样式生效 | `large` \| `default` \| `small` | `default` | |
| value | 用于设置当前选中的值 | any | - | |
| onChange | 选项变化时的回调函数 | Function(e:Event) | - | |
| buttonStyle | RadioButton 的风格样式，目前有描边和填色两种风格 | `outline` \| `solid` | `outline` | 3.7.0 |
## 方法
### Radio
| 名称 | 描述 |
| ------- | -------- |
| blur() | 移除焦点 |
| focus() | 获取焦点 |
| 名称 | 描述 | 版本 |
| ------- | -------- | ---- |
| blur() | 移除焦点 | |
| focus() | 获取焦点 | |

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

@ -13,28 +13,28 @@ Rate component.
## API
| Property | Description | type | Default |
| --- | --- | --- | --- |
| allowClear | whether to allow clear when click again | boolean | true |
| allowHalf | whether to allow semi selection | boolean | false |
| autoFocus | get focus when component mounted | boolean | false |
| character | custom character of rate | ReactNode | `<Icon type="star" />` |
| className | custom class name of rate | string | - |
| count | star count | number | 5 |
| defaultValue | default value | number | 0 |
| disabled | read only, unable to interact | boolean | false |
| style | custom style object of rate | object | - |
| tooltips | Customize tooltip by each character | string\[] | - |
| value | current value | number | - |
| onBlur | callback when component lose focus | Function() | - |
| onChange | callback when select value | Function(value: number) | - |
| onFocus | callback when component get focus | Function() | - |
| onHoverChange | callback when hover item | Function(value: number) | - |
| onKeyDown | callback when keydown on component | Function(event) | - |
| Property | Description | type | Default | Version |
| --- | --- | --- | --- | --- |
| allowClear | whether to allow clear when click again | boolean | true | 3.1.0 |
| allowHalf | whether to allow semi selection | boolean | false | |
| autoFocus | get focus when component mounted | boolean | false | |
| character | custom character of rate | ReactNode | `<Icon type="star" />` | |
| className | custom class name of rate | string | - | |
| count | star count | number | 5 | |
| defaultValue | default value | number | 0 | |
| disabled | read only, unable to interact | boolean | false | |
| style | custom style object of rate | object | - | |
| tooltips | Customize tooltip by each character | string\[] | - | 3.12.0 |
| value | current value | number | - | |
| onBlur | callback when component lose focus | Function() | - | |
| onChange | callback when select value | Function(value: number) | - | |
| onFocus | callback when component get focus | Function() | - | |
| onHoverChange | callback when hover item | Function(value: number) | - | |
| onKeyDown | callback when keydown on component | Function(event) | - | |
## Methods
| Name | Description |
| ------- | ------------ |
| blur() | remove focus |
| focus() | get focus |
| Name | Description | Version |
| ------- | ------------ | ------- |
| blur() | remove focus | |
| focus() | get focus | |

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

@ -14,28 +14,28 @@ title: Rate
## API
| 属性 | 说明 | 类型 | 默认值 |
| ------------- | ------------------------ | ----------------------- | ---------------------- |
| allowClear | 是否允许再次点击后清除 | boolean | true |
| allowHalf | 是否允许半选 | boolean | false |
| autoFocus | 自动获取焦点 | boolean | false |
| character | 自定义字符 | ReactNode | `<Icon type="star" />` |
| className | 自定义样式类名 | string | - |
| count | star 总数 | number | 5 |
| defaultValue | 默认值 | number | 0 |
| disabled | 只读，无法进行交互 | boolean | false |
| style | 自定义样式对象 | object | - |
| tooltips | 自定义每项的提示信息 | string\[] | - |
| value | 当前数，受控值 | number | - |
| onBlur | 失去焦点时的回调 | Function() | - |
| onChange | 选择时的回调 | Function(value: number) | - |
| onFocus | 获取焦点时的回调 | Function() | - |
| onHoverChange | 鼠标经过时数值变化的回调 | Function(value: number) | - |
| onKeyDown | 按键回调 | Function(event) | - |
| 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| allowClear | 是否允许再次点击后清除 | boolean | true | 3.1.0 |
| allowHalf | 是否允许半选 | boolean | false | |
| autoFocus | 自动获取焦点 | boolean | false | |
| character | 自定义字符 | ReactNode | `<Icon type="star" />` | |
| className | 自定义样式类名 | string | - | |
| count | star 总数 | number | 5 | |
| defaultValue | 默认值 | number | 0 | |
| disabled | 只读，无法进行交互 | boolean | false | |
| style | 自定义样式对象 | object | - | |
| tooltips | 自定义每项的提示信息 | string\[] | - | 3.12.0 |
| value | 当前数，受控值 | number | - | |
| onBlur | 失去焦点时的回调 | Function() | - | |
| onChange | 选择时的回调 | Function(value: number) | - | |
| onFocus | 获取焦点时的回调 | Function() | - | |
| onHoverChange | 鼠标经过时数值变化的回调 | Function(value: number) | - | |
| onKeyDown | 按键回调 | Function(event) | - | |
## 方法
| 名称 | 描述 |
| ------- | -------- |
| blur() | 移除焦点 |
| focus() | 获取焦点 |
| 名称 | 描述 | 版本 |
| ------- | -------- | ---- |
| blur() | 移除焦点 | |
| focus() | 获取焦点 | |

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

@ -21,74 +21,74 @@ Select component to select value from options.
### Select props
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| allowClear | Show clear button. | boolean | false |
| autoClearSearchValue | Whether the current search will be cleared on selecting an item. Only applies when `mode` is set to `multiple` or `tags`. | boolean | true |
| autoFocus | Get focus by default | boolean | false |
| defaultActiveFirstOption | Whether active first option by default | boolean | true |
| defaultValue | Initial selected option. | string\|string\[]<br />number\|number\[]<br />LabeledValue\|LabeledValue[] | - |
| disabled | Whether disabled select | boolean | false |
| dropdownClassName | className of dropdown menu | string | - |
| dropdownMatchSelectWidth | Whether dropdown's width is same with select. | boolean | true |
| dropdownRender | Customize dropdown content | (menuNode: ReactNode, props) => ReactNode | - |
| dropdownStyle | style of dropdown menu | object | - |
| 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 or function(inputValue, option) | true |
| firstActiveValue | Value of action option by default | string\|string\[] | - |
| 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://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body |
| labelInValue | whether to embed label in value, turn the format of value from `string` to `{key: string, label: ReactNode}` | boolean | false |
| maxTagCount | Max tag count to show | number | - |
| maxTagTextLength | Max tag count to show | number | - |
| maxTagPlaceholder | Placeholder for not showing tags | ReactNode/function(omittedValues) | - |
| mode | Set mode of Select | 'default' \| 'multiple' \| 'tags' | 'default' |
| notFoundContent | Specify content to show when no result matches.. | string | 'Not Found' |
| optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | value |
| optionLabelProp | Which prop value of option will render as content of select. [Example](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `value` for `combobox`, `children` for other modes |
| placeholder | Placeholder of select | string\|ReactNode | - |
| showArrow | Whether to show the drop-down arrow | boolean | true |
| showSearch | Whether show search input in single mode. | boolean | false |
| size | Size of Select input. `default` `large` `small` | string | default |
| suffixIcon | The custom suffix icon | ReactNode | - |
| removeIcon | The custom remove icon | ReactNode | - |
| clearIcon | The custom clear icon | ReactNode | - |
| menuItemSelectedIcon | The custom menuItemSelected icon with multiple options | ReactNode | - |
| tokenSeparators | Separator used to tokenize on tag/multiple mode | string\[] | |
| value | Current selected option. | string\|string\[]\<br />number\|number\[]\<br />LabeledValue\|LabeledValue[] | - |
| onBlur | Called when blur | function | - |
| onChange | Called when select an option or input value change, or value of input is changed in combobox mode | function(value, option:Option/Array&lt;Option>) | - |
| onDeselect | Called when a option is deselected, param is the selected option's value. Only called for multiple or tags, effective in multiple or tags mode only. | function(string\|number\|LabeledValue) | - |
| onFocus | Called when focus | function | - |
| onInputKeyDown | Called when key pressed | function | - |
| onMouseEnter | Called when mouse enter | function | - |
| onMouseLeave | Called when mouse leave | function | - |
| onPopupScroll | Called when dropdown scrolls | function | - |
| onSearch | Callback function that is fired when input changed. | function(value: string) | |
| onSelect | Called when a option is selected, the params are option's value (or key) and option instance. | function(string\|number\|LabeledValue, option:Option) | - |
| defaultOpen | Initial open state of dropdown | boolean | - |
| open | Controlled open state of dropdown | boolean | - |
| onDropdownVisibleChange | Call when dropdown open (Supported after version 3.9.0) | function(open) | - |
| loading | indicate loading state | Boolean | false |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| allowClear | Show clear button. | boolean | false | |
| autoClearSearchValue | Whether the current search will be cleared on selecting an item. Only applies when `mode` is set to `multiple` or `tags`. | boolean | true | 3.10.0 |
| autoFocus | Get focus by default | boolean | false | |
| defaultActiveFirstOption | Whether active first option by default | boolean | true | |
| defaultValue | Initial selected option. | string\|string\[]<br />number\|number\[]<br />LabeledValue\|LabeledValue[] | - | |
| disabled | Whether disabled select | boolean | false | |
| dropdownClassName | className of dropdown menu | string | - | |
| dropdownMatchSelectWidth | Whether dropdown's width is same with select. | boolean | true | |
| dropdownRender | Customize dropdown content | (menuNode: ReactNode, props) => ReactNode | - | 3.11.0 |
| dropdownStyle | style of dropdown menu | object | - | |
| 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 or function(inputValue, option) | true | |
| firstActiveValue | Value of action option by default | string\|string\[] | - | |
| 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://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body | |
| labelInValue | whether to embed label in value, turn the format of value from `string` to `{key: string, label: ReactNode}` | boolean | false | |
| maxTagCount | Max tag count to show | number | - | |
| maxTagTextLength | Max tag count to show | number | - | 3.18.0 |
| maxTagPlaceholder | Placeholder for not showing tags | ReactNode/function(omittedValues) | - | |
| mode | Set mode of Select | 'default' \| 'multiple' \| 'tags' | 'default' | |
| notFoundContent | Specify content to show when no result matches.. | string | 'Not Found' | |
| optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | value | |
| optionLabelProp | Which prop value of option will render as content of select. [Example](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `value` for `combobox`, `children` for other modes | |
| placeholder | Placeholder of select | string\|ReactNode | - | |
| showArrow | Whether to show the drop-down arrow | boolean | true | 3.2.1 |
| showSearch | Whether show search input in single mode. | boolean | false | |
| size | Size of Select input. `default` `large` `small` | string | default | |
| suffixIcon | The custom suffix icon | ReactNode | - | 3.10.0 |
| removeIcon | The custom remove icon | ReactNode | - | 3.11.0 |
| clearIcon | The custom clear icon | ReactNode | - | 3.11.0 |
| menuItemSelectedIcon | The custom menuItemSelected icon with multiple options | ReactNode | - | 3.11.0 |
| tokenSeparators | Separator used to tokenize on tag/multiple mode | string\[] | | |
| value | Current selected option. | string\|string\[]\<br />number\|number\[]\<br />LabeledValue\|LabeledValue[] | - | |
| onBlur | Called when blur | function | - | |
| onChange | Called when select an option or input value change, or value of input is changed in combobox mode | function(value, option:Option/Array&lt;Option>) | - | |
| onDeselect | Called when a option is deselected, param is the selected option's value. Only called for multiple or tags, effective in multiple or tags mode only. | function(string\|number\|LabeledValue) | - | |
| onFocus | Called when focus | function | - | |
| onInputKeyDown | Called when key pressed | function | - | 3.1.0 |
| onMouseEnter | Called when mouse enter | function | - | |
| onMouseLeave | Called when mouse leave | function | - | |
| onPopupScroll | Called when dropdown scrolls | function | - | |
| onSearch | Callback function that is fired when input changed. | function(value: string) | | |
| onSelect | Called when a option is selected, the params are option's value (or key) and option instance. | function(string\|number\|LabeledValue, option:Option) | - | |
| defaultOpen | Initial open state of dropdown | boolean | - | 3.9.3 |
| open | Controlled open state of dropdown | boolean | - | 3.9.0 |
| onDropdownVisibleChange | Call when dropdown open (Supported after version 3.9.0) | function(open) | - | 3.9.0 |
| loading | indicate loading state | Boolean | false | 3.11.0 |
### Select Methods
| Name | Description |
| ------- | ------------ |
| blur() | Remove focus |
| focus() | Get focus |
| Name | Description | Version |
| ------- | ------------ | ------- |
| blur() | Remove focus | |
| focus() | Get focus | |
### Option props
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| disabled | Disable this option | boolean | false |
| key | Same usage as `value`. If React request you to set this property, you can set it to value of option, and then omit value property. | string | |
| title | `title` of Select after select this Option | string | - |
| value | default to filter with this property | string\|number | - |
| className | additional class to option | string | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| disabled | Disable this option | boolean | false | |
| key | Same usage as `value`. If React request you to set this property, you can set it to value of option, and then omit value property. | string | | |
| title | `title` of Select after select this Option | string | - | |
| value | default to filter with this property | string\|number | - | |
| className | additional class to option | string | - | 3.10.1 |
### OptGroup props
| Property | Description | Type | Default |
| -------- | ----------- | --------------------- | ------- |
| key | | string | - |
| label | Group label | string\|React.Element | - |
| Property | Description | Type | Default | Version |
| -------- | ----------- | --------------------- | ------- | ------- |
| key | | string | - | |
| label | Group label | string\|React.Element | - | |

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

@ -22,75 +22,75 @@ title: Select
### Select props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| allowClear | 支持清除 | boolean | false |
| autoClearSearchValue | 是否在选中项后清空搜索框，只在 `mode` 为 `multiple` 或 `tags` 时有效。 | boolean | true |
| autoFocus | 默认获取焦点 | boolean | false |
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true |
| defaultValue | 指定默认选中的条目 | string\|string\[]\<br />number\|number\[]\<br />LabeledValue\|LabeledValue[] | - |
| disabled | 是否禁用 | boolean | false |
| dropdownClassName | 下拉菜单的 className 属性 | string | - |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true |
| dropdownRender | 自定义下拉框内容 | (menuNode: ReactNode, props) => ReactNode | - |
| dropdownStyle | 下拉菜单的 style 属性 | object | - |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true |
| firstActiveValue | 默认高亮的选项 | string\|string\[] | - |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | Function(triggerNode) | () => document.body |
| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 `{key: string, label: ReactNode}` 的格式 | boolean | false |
| maxTagCount | 最多显示多少个 tag | number | - |
| maxTagTextLength | 最大显示的 tag 文本长度 | number | - |
| maxTagPlaceholder | 隐藏 tag 时显示的内容 | ReactNode/function(omittedValues) | - |
| mode | 设置 Select 的模式为多选或标签 | 'multiple' \| 'tags' | - |
| notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' |
| optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | value |
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` （combobox 模式下为 `value`） |
| placeholder | 选择框默认文字 | string | - |
| showArrow | 是否显示下拉小箭头 | boolean | true |
| showSearch | 使单选模式可搜索 | boolean | false |
| size | 选择框大小，可选 `large` `small` | string | default |
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |
| removeIcon | 自定义的多选框清除图标 | ReactNode | - |
| clearIcon | 自定义的多选框清空图标 | ReactNode | - |
| menuItemSelectedIcon | 自定义多选时当前选中的条目图标 | ReactNode | - |
| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] | |
| value | 指定当前选中的条目 | string\|string\[]\<br />number\|number\[]\<br />LabeledValue\|LabeledValue[] | - |
| onBlur | 失去焦点时回调 | function | - |
| onChange | 选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数 | function(value, option:Option/Array&lt;Option>) | - |
| onDeselect | 取消选中时调用，参数为选中项的 value (或 key) 值，仅在 multiple 或 tags 模式下生效 | function(string\|number\|LabeledValue) | - |
| onFocus | 获得焦点时回调 | function | - |
| onMouseEnter | 鼠标移入时回调 | function | - |
| onMouseLeave | 鼠标移出时回调 | function | - |
| onPopupScroll | 下拉列表滚动时的回调 | function | - |
| onSearch | 文本框值变化时回调 | function(value: string) | |
| onSelect | 被选中时调用，参数为选中项的 value (或 key) 值 | function(string\|number\|LabeledValue, option:Option) | - |
| defaultOpen | 是否默认展开下拉菜单 | boolean | - |
| open | 是否展开下拉菜单 | boolean | - |
| onDropdownVisibleChange | 展开下拉菜单的回调 (3.9.0 后支持) | function(open) | - |
| loading | 加载中状态 | Boolean | false |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| allowClear | 支持清除 | boolean | false | |
| autoClearSearchValue | 是否在选中项后清空搜索框，只在 `mode` 为 `multiple` 或 `tags` 时有效。 | boolean | true | 3.10.0 |
| autoFocus | 默认获取焦点 | boolean | false | |
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true | |
| defaultValue | 指定默认选中的条目 | string\|string\[]\<br />number\|number\[]\<br />LabeledValue\|LabeledValue[] | - | |
| disabled | 是否禁用 | boolean | false | |
| dropdownClassName | 下拉菜单的 className 属性 | string | - | |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true | |
| dropdownRender | 自定义下拉框内容 | (menuNode: ReactNode, props) => ReactNode | - | 3.11.0 |
| dropdownStyle | 下拉菜单的 style 属性 | object | - | |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true | |
| firstActiveValue | 默认高亮的选项 | string\|string\[] | - | |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | Function(triggerNode) | () => document.body | |
| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 `{key: string, label: ReactNode}` 的格式 | boolean | false | |
| maxTagCount | 最多显示多少个 tag | number | - | |
| maxTagTextLength | 最大显示的 tag 文本长度 | number | - | 3.18.0 |
| maxTagPlaceholder | 隐藏 tag 时显示的内容 | ReactNode/function(omittedValues) | - | |
| mode | 设置 Select 的模式为多选或标签 | 'multiple' \| 'tags' | - | |
| notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' | |
| optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | value | |
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` （combobox 模式下为 `value`） | |
| placeholder | 选择框默认文字 | string | - | |
| showArrow | 是否显示下拉小箭头 | boolean | true | 3.2.1 |
| showSearch | 使单选模式可搜索 | boolean | false | |
| size | 选择框大小，可选 `large` `small` | string | default | |
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | 3.10.0 |
| removeIcon | 自定义的多选框清除图标 | ReactNode | - | 3.11.0 |
| clearIcon | 自定义的多选框清空图标 | ReactNode | - | 3.11.0 |
| menuItemSelectedIcon | 自定义多选时当前选中的条目图标 | ReactNode | - | 3.11.0 |
| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] | | |
| value | 指定当前选中的条目 | string\|string\[]\<br />number\|number\[]\<br />LabeledValue\|LabeledValue[] | - | |
| onBlur | 失去焦点时回调 | function | - | |
| onChange | 选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数 | function(value, option:Option/Array&lt;Option>) | - | |
| onDeselect | 取消选中时调用，参数为选中项的 value (或 key) 值，仅在 multiple 或 tags 模式下生效 | function(string\|number\|LabeledValue) | - | |
| onFocus | 获得焦点时回调 | function | - | |
| onMouseEnter | 鼠标移入时回调 | function | - | |
| onMouseLeave | 鼠标移出时回调 | function | - | |
| onPopupScroll | 下拉列表滚动时的回调 | function | - | |
| onSearch | 文本框值变化时回调 | function(value: string) | | |
| onSelect | 被选中时调用，参数为选中项的 value (或 key) 值 | function(string\|number\|LabeledValue, option:Option) | - | |
| defaultOpen | 是否默认展开下拉菜单 | boolean | - | 3.9.3 |
| open | 是否展开下拉菜单 | boolean | - | 3.9.0 |
| onDropdownVisibleChange | 展开下拉菜单的回调 (3.9.0 后支持) | function(open) | - | 3.9.0 |
| loading | 加载中状态 | Boolean | false | 3.11.0 |
> 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentElement}` 将下拉弹层渲染节点固定在触发器的父元素中。
### Select Methods
| 名称 | 说明 |
| ------- | -------- |
| blur() | 取消焦点 |
| focus() | 获取焦点 |
| 名称 | 说明 | 版本 |
| ------- | -------- | ---- |
| blur() | 取消焦点 | |
| focus() | 获取焦点 | |
### Option props
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| disabled | 是否禁用 | boolean | false |
| key | 和 value 含义一致。如果 React 需要你设置此项，此项值与 value 的值相同，然后可以省略 value 设置 | string | |
| title | 选中该 Option 后，Select 的 title | string | - |
| value | 默认根据此属性值进行筛选 | string\|number | - |
| className | Option 器类名 | string | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| disabled | 是否禁用 | boolean | false | |
| key | 和 value 含义一致。如果 React 需要你设置此项，此项值与 value 的值相同，然后可以省略 value 设置 | string | | |
| title | 选中该 Option 后，Select 的 title | string | - | |
| value | 默认根据此属性值进行筛选 | string\|number | - | |
| className | Option 器类名 | string | - | 3.10.1 |
### OptGroup props
| 参数 | 说明 | 类型 | 默认值 |
| ----- | ---- | --------------------- | ------ |
| key | | string | - |
| label | 组名 | string\|React.Element | 无 |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----- | ---- | --------------------- | ------ | ---- |
| key | | string | - | |
| label | 组名 | string\|React.Element | 无 | |

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

@ -18,30 +18,30 @@ Provide a placeholder while you wait for content to load, or to visualise conten
### Skeleton
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| active | Show animation effect | boolean | false |
| avatar | Show avatar placeholder | boolean \| [SkeletonAvatarProps](#SkeletonAvatarProps) | false |
| loading | Display the skeleton when `true` | boolean | - |
| paragraph | Show paragraph placeholder | boolean \| [SkeletonParagraphProps](#SkeletonParagraphProps) | true |
| title | Show title placeholder | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| active | Show animation effect | boolean | false | 3.9.0 |
| avatar | Show avatar placeholder | boolean \| [SkeletonAvatarProps](#SkeletonAvatarProps) | false | 3.9.0 |
| loading | Display the skeleton when `true` | boolean | - | 3.9.0 |
| paragraph | Show paragraph placeholder | boolean \| [SkeletonParagraphProps](#SkeletonParagraphProps) | true | 3.9.0 |
| title | Show title placeholder | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true | 3.9.0 |
### SkeletonAvatarProps
| Property | Description | Type | Default |
| -------- | ----------------------- | --------------------------------------------- | ------- |
| size | Set the size of avatar | number \| Enum{ 'large', 'small', 'default' } | - |
| shape | Set the shape of avatar | Enum{ 'circle', 'square' } | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| size | Set the size of avatar | number \| Enum{ 'large', 'small', 'default' } | - | 3.9.0 |
| shape | Set the shape of avatar | Enum{ 'circle', 'square' } | - | 3.9.0 |
### SkeletonTitleProps
| Property | Description | Type | Default |
| -------- | ---------------------- | ---------------- | ------- |
| width | Set the width of title | number \| string | - |
| Property | Description | Type | Default | Version |
| -------- | ---------------------- | ---------------- | ------- | ------- |
| width | Set the width of title | number \| string | - | 3.9.0 |
### SkeletonParagraphProps
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| rows | Set the row count of paragraph | number | - |
| width | Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width | number \| string \| Array<number \| string> | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| rows | Set the row count of paragraph | number | - | 3.9.0 |
| width | Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width | number \| string \| Array<number \| string> | - | 3.9.0 |

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

@ -19,30 +19,30 @@ cols: 1
### Skeleton
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| active | 是否展示动画效果 | boolean | false |
| avatar | 是否显示头像占位图 | boolean \| [SkeletonAvatarProps](#SkeletonAvatarProps) | false |
| loading | 为 `true` 时，显示占位图。反之则直接展示子组件 | boolean | - |
| paragraph | 是否显示段落占位图 | boolean \| [SkeletonParagraphProps](#SkeletonParagraphProps) | true |
| title | 是否显示标题占位图 | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true |
| 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| active | 是否展示动画效果 | boolean | false | 3.9.0 |
| avatar | 是否显示头像占位图 | boolean \| [SkeletonAvatarProps](#SkeletonAvatarProps) | false | 3.9.0 |
| loading | 为 `true` 时，显示占位图。反之则直接展示子组件 | boolean | - | 3.9.0 |
| paragraph | 是否显示段落占位图 | boolean \| [SkeletonParagraphProps](#SkeletonParagraphProps) | true | 3.9.0 |
| title | 是否显示标题占位图 | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true | 3.9.0 |
### SkeletonAvatarProps
| 属性 | 说明 | 类型 | 默认值 |
| ----- | -------------------- | --------------------------------------------- | ------ |
| size | 设置头像占位图的大小 | number \| Enum{ 'large', 'small', 'default' } | - |
| shape | 指定头像的形状 | Enum{ 'circle', 'square' } | - |
| 属性 | 说明 | 类型 | 默认值 | 版本 |
| ----- | -------------------- | --------------------------------------------- | ------ | ----- |
| size | 设置头像占位图的大小 | number \| Enum{ 'large', 'small', 'default' } | - | 3.9.0 |
| shape | 指定头像的形状 | Enum{ 'circle', 'square' } | - | 3.9.0 |
### SkeletonTitleProps
| 属性 | 说明 | 类型 | 默认值 |
| ----- | -------------------- | ---------------- | ------ |
| width | 设置标题占位图的宽度 | number \| string | - |
| 属性 | 说明 | 类型 | 默认值 | 版本 |
| ----- | -------------------- | ---------------- | ------ | ----- |
| width | 设置标题占位图的宽度 | number \| string | - | 3.9.0 |
### SkeletonParagraphProps
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| rows | 设置段落占位图的行数 | number | - |
| width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \| string \| Array<number \| string> | - |
| 属性 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| rows | 设置段落占位图的行数 | number | - | 3.9.0 |
| width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \| string \| Array<number \| string> | - | 3.9.0 |

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

@ -30,12 +30,12 @@ To input a value in a range.
| onAfterChange | Fire when `onmouseup` is fired. | Function(value) | NOOP | |
| onChange | Callback function that is fired when the user changes the slider's value. | Function(value) | NOOP | |
| tooltipPlacement | Set Tooltip display position. Ref [`Tooltip`](/components/tooltip/). | string | | 3.19.0 |
| tooltipVisible | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering. | Boolean | | |
| tooltipVisible | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering. | Boolean | | 3.11.0 |
| getTooltipPopupContainer | The DOM container of the Tooltip, the default behavior is to create a div element in body. | Function | () => document.body | 3.19.0 |
## Methods
| Name | Description |
| ------- | ------------ |
| blur() | remove focus |
| focus() | get focus |
| Name | Description | Version |
| ------- | ------------ | ------- |
| blur() | remove focus | |
| focus() | get focus | |

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

@ -30,13 +30,13 @@ title: Slider
| vertical | 值为 `true` 时，Slider 为垂直方向 | Boolean | false | |
| onAfterChange | 与 `onmouseup` 触发时机一致，把当前值作为参数传入。 | Function(value) | NOOP | |
| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。 | Function(value) | NOOP | |
| tooltipPlacement | 设置 Tooltip 展示位置。参考 [`Tooltip`](/components/tooltip/)。 | string | | | 3.19.0 |
| tooltipVisible | 值为`true`时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时。 | Boolean | | |
| tooltipPlacement | 设置 Tooltip 展示位置。参考 [`Tooltip`](/components/tooltip/)。 | string | | 3.19.0 |
| tooltipVisible | 值为`true`时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时。 | Boolean | | 3.11.0 |
| getTooltipPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上。 | Function | () => document.body | 3.19.0 |
## 方法
| 名称 | 描述 |
| ------- | -------- |
| blur() | 移除焦点 |
| focus() | 获取焦点 |
| 名称 | 描述 | 版本 |
| ------- | -------- | ---- |
| blur() | 移除焦点 | |
| focus() | 获取焦点 | |

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

@ -12,14 +12,14 @@ When part of the page is waiting for asynchronous data or during a rendering pro
## API
| Property | Description | Type | Default Value |
| --- | --- | --- | --- |
| delay | specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | - |
| indicator | React node of the spinning indicator | ReactElement | - |
| size | size of Spin, options: `small`, `default` and `large` | string | `default` |
| spinning | whether Spin is spinning | boolean | true |
| tip | customize description content when Spin has children | string | - |
| wrapperClassName | className of wrapper when Spin has children | string | - |
| Property | Description | Type | Default Value | Version |
| --- | --- | --- | --- | --- |
| delay | specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | - | |
| indicator | React node of the spinning indicator | ReactElement | - | |
| size | size of Spin, options: `small`, `default` and `large` | string | `default` | |
| spinning | whether Spin is spinning | boolean | true | |
| tip | customize description content when Spin has children | string | - | |
| wrapperClassName | className of wrapper when Spin has children | string | - | |
### Static Method

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

@ -13,14 +13,14 @@ subtitle: 加载中
## API
| 参数 | 说明 | 类型 | 默认值 |
| ---------------- | -------------------------------------------- | ------------- | --------- |
| delay | 延迟显示加载效果的时间（防止闪烁） | number (毫秒) | - |
| indicator | 加载指示符 | ReactElement | - |
| size | 组件大小，可选值为 `small` `default` `large` | string | 'default' |
| spinning | 是否为加载中状态 | boolean | true |
| tip | 当作为包裹元素时，可以自定义描述文案 | string | - |
| wrapperClassName | 包装器的类属性 | string | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| delay | 延迟显示加载效果的时间（防止闪烁） | number (毫秒) | - | |
| indicator | 加载指示符 | ReactElement | - | |
| size | 组件大小，可选值为 `small` `default` `large` | string | 'default' | |
| spinning | 是否为加载中状态 | boolean | true | |
| tip | 当作为包裹元素时，可以自定义描述文案 | string | - | |
| wrapperClassName | 包装器的类属性 | string | - | |
### 静态方法

40
components/statistic/index.en-US.md
View File

@ -15,26 +15,26 @@ Display statistic number.
#### Statistic
| Property | Description | Type | Default |
| ---------------- | ----------------------------- | -------------------- | ------- |
| decimalSeparator | decimal separator | string | . |
| formatter | customize value display logic | (value) => ReactNode | - |
| groupSeparator | group separator | string | , |
| precision | precision of input value | number | - |
| prefix | prefix node of value | string \| ReactNode | - |
| suffix | suffix node of value | string \| ReactNode | - |
| title | Display title | string \| ReactNode | - |
| value | Display value | string \| number | - |
| valueStyle | Set value css style | style | - |
| Property | Description | Type | Default | Version |
| ---------------- | ----------------------------- | -------------------- | ------- | ------- |
| decimalSeparator | decimal separator | string | . | 3.13.0 |
| formatter | customize value display logic | (value) => ReactNode | - | 3.13.0 |
| groupSeparator | group separator | string | , | 3.13.0 |
| precision | precision of input value | number | - | 3.13.0 |
| prefix | prefix node of value | string \| ReactNode | - | 3.13.0 |
| suffix | suffix node of value | string \| ReactNode | - | 3.13.0 |
| title | Display title | string \| ReactNode | - | 3.13.0 |
| value | Display value | string \| number | - | 3.13.0 |
| valueStyle | Set value css style | style | - | 3.13.0 |
#### Statistic.Countdown
| Property | Description | Type | Default |
| ---------- | ---------------------------------------- | ------------------- | ---------- |
| format | Format as [moment](http://momentjs.com/) | string | 'HH:mm:ss' |
| onFinish | Trigger when time's up | () => void | - |
| prefix | prefix node of value | string \| ReactNode | - |
| suffix | suffix node of value | string \| ReactNode | - |
| title | Display title | string \| ReactNode | - |
| value | Set target countdown time | number \| moment | - |
| valueStyle | Set value css style | style | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| format | Format as [moment](http://momentjs.com/) | string | 'HH:mm:ss' | 3.13.0 |
| onFinish | Trigger when time's up | () => void | - | 3.14.0 |
| prefix | prefix node of value | string \| ReactNode | - | 3.13.0 |
| suffix | suffix node of value | string \| ReactNode | - | 3.13.0 |
| title | Display title | string \| ReactNode | - | 3.13.0 |
| value | Set target countdown time | number \| moment | - | 3.13.0 |
| valueStyle | Set value css style | style | - | 3.13.0 |

40
components/statistic/index.zh-CN.md
View File

@ -16,26 +16,26 @@ title: Statistic
#### Statistic
| 参数 | 说明 | 类型 | 默认值 |
| ---------------- | ---------------- | -------------------- | ------ |
| decimalSeparator | 设置小数点 | string | . |
| formatter | 自定义数值展示 | (value) => ReactNode | - |
| groupSeparator | 设置千分位标识符 | string | , |
| precision | 数值精度 | number | - |
| prefix | 设置数值的前缀 | string \| ReactNode | - |
| suffix | 设置数值的后缀 | string \| ReactNode | - |
| title | 数值的标题 | string \| ReactNode | - |
| value | 数值内容 | string \| number | - |
| valueStyle | 设置数值的样式 | style | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ---------------- | ---------------- | -------------------- | ------ | ------ |
| decimalSeparator | 设置小数点 | string | . | 3.13.0 |
| formatter | 自定义数值展示 | (value) => ReactNode | - | 3.13.0 |
| groupSeparator | 设置千分位标识符 | string | , | 3.13.0 |
| precision | 数值精度 | number | - | 3.13.0 |
| prefix | 设置数值的前缀 | string \| ReactNode | - | 3.13.0 |
| suffix | 设置数值的后缀 | string \| ReactNode | - | 3.13.0 |
| title | 数值的标题 | string \| ReactNode | - | 3.13.0 |
| value | 数值内容 | string \| number | - | 3.13.0 |
| valueStyle | 设置数值的样式 | style | - | 3.13.0 |
#### Statistic.Countdown
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| format | 格式化倒计时展示，参考 [moment](http://momentjs.com/) | string | 'HH:mm:ss' |
| onFinish | 倒计时完成时触发 | () => void | - |
| prefix | 设置数值的前缀 | string \| ReactNode | - |
| suffix | 设置数值的后缀 | string \| ReactNode | - |
| title | 数值的标题 | string \| ReactNode | - |
| value | 数值内容 | number \| moment | - |
| valueStyle | 设置数值的样式 | style | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| format | 格式化倒计时展示，参考 [moment](http://momentjs.com/) | string | 'HH:mm:ss' | 3.13.0 |
| onFinish | 倒计时完成时触发 | () => void | - | 3.14.0 |
| prefix | 设置数值的前缀 | string \| ReactNode | - | 3.13.0 |
| suffix | 设置数值的后缀 | string \| ReactNode | - | 3.13.0 |
| title | 数值的标题 | string \| ReactNode | - | 3.13.0 |
| value | 数值内容 | number \| moment | - | 3.13.0 |
| valueStyle | 设置数值的样式 | style | - | 3.13.0 |

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

@ -27,23 +27,23 @@ The whole of the step bar.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| className | additional class to Steps | string | - | |
| className | additional class to Steps | string | - | 3.11.3 |
| current | to set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0 | |
| direction | to specify the direction of the step bar, `horizontal` or `vertical` | string | `horizontal` | |
| labelPlacement | place title and description with `horizontal` or `vertical` direction | string | `horizontal` | |
| labelPlacement | place title and description with `horizontal` or `vertical` direction | string | `horizontal` | 3.7.3 |
| progressDot | Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be `vertical` | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false | |
| size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` | |
| status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` | |
| initial | set the initial step, counting from 0 | number | 0 | |
| initial | set the initial step, counting from 0 | number | 0 | 3.9.0 |
| onChange | Trigger when Step click to change | (current) => void | - | 3.19.0 |
### Steps.Step
A single step in the step bar.
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| description | description of the step, optional property | string\|ReactNode | - |
| icon | icon of the step, optional property | string\|ReactNode | - |
| status | to specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | string | `wait` |
| title | title of the step | string\|ReactNode | - |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| description | description of the step, optional property | string\|ReactNode | - | |
| icon | icon of the step, optional property | string\|ReactNode | - | |
| status | to specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | string | `wait` | |
| title | title of the step | string\|ReactNode | - | |

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

@ -28,23 +28,23 @@ title: Steps
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| className | 步骤条类名 | string | - | |
| className | 步骤条类名 | string | - | 3.11.3 |
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0 | |
| direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | string | horizontal | |
| labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选 `vertical` 放图标下方 | string | `horizontal` | |
| labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选 `vertical` 放图标下方 | string | `horizontal` | 3.7.3 |
| progressDot | 点状步骤条，可以设置为一个 function，labelPlacement 将强制为 `vertical` | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false | |
| size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | default | |
| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process | |
| initial | 起始序号，从 0 开始记数 | number | 0 | |
| initial | 起始序号，从 0 开始记数 | number | 0 | 3.9.0 |
| onChange | 点击切换步骤时触发 | (current) => void | - | 3.19.0 |
### Steps.Step
步骤条内的每一个步骤。
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| description | 步骤的详情描述，可选 | string\|ReactNode | - |
| icon | 步骤图标的类型，可选 | string\|ReactNode | - |
| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | wait |
| title | 标题 | string\|ReactNode | - |
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| description | 步骤的详情描述，可选 | string\|ReactNode | - | |
| icon | 步骤图标的类型，可选 | string\|ReactNode | - | |
| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | wait | |
| title | 标题 | string\|ReactNode | - | |

Some files were not shown because too many files have changed in this diff Show More