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: sort api table

Browse Source
This commit is contained in:
Wei Zhu 2017-10-25 10:25:44 +08:00
parent caeaba68fc
commit 36227a10db
100 changed files with 1674 additions and 1682 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
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 |
|--------------|-----------------------|----------|--------------|
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |
| 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) | - |
| 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`:

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

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

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

@ -13,13 +13,13 @@ Alert component for feedback.
## API
| Property | Description | Type | Default |
|----------- |--------------------------------------------------------- | ---------- |-------|
| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` |
| closable | Whether Alert can be closed | boolean | - |
| closeText | Close text to show | string\|ReactNode | - |
| message | Content of Alert | string\|ReactNode | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| 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 | - |
| onClose | Callback when Alert is closed | Function | - |
| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true |
| banner | Whether to show as banner | boolean | false |
| 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 | Function | - |

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

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

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

@ -15,17 +15,17 @@ For displaying anchor hyperlinks on page and jumping between them.
### Anchor Props
| Property | Description | Type | Default |
|--------------|-----------------------|----------|--------------|
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - |
| bounds | Bounding distance of anchor area | number | 5(px) |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| affix | Fixed mode of Anchor | boolean | false |
| bounds | Bounding distance of anchor area | number | 5(px) |
| 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 |
### Link Props
| Property | Description | Type | Default |
|-------------|----------------|--------------------|--------------|
| href | target of hyperlink | string | |
| title | content of hyperlink | string\|ReactNode | |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| href | target of hyperlink | string | |
| title | content of hyperlink | string\|ReactNode | |

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

@ -16,17 +16,17 @@ title: Anchor
### Anchor Props
| 成员 | 说明 | 类型 | 默认值 |
|-------------|----------------|--------------------|--------------|
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | |
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | |
| bounds | 锚点区域边界 | number | 5(px) |
| 成员 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| affix | 固定模式 | boolean | false |
| bounds | 锚点区域边界 | number | 5(px) |
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | |
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | |
| showInkInFixed | 固定模式是否显示小圆点 | boolean | false |
### Link Props
| 成员 | 说明 | 类型 | 默认值 |
|-------------|----------------|--------------------|--------------|
| href | 锚点链接 | string | |
| title | 文字内容 | string\|ReactNode | |
| 成员 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| href | 锚点链接 | string | |
| title | 文字内容 | string\|ReactNode | |

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

@ -18,20 +18,20 @@ const dataSource = ['12345', '23456', '34567'];
<AutoComplete dataSource={dataSource} />
```
| Property | Description | Type | Default |
|----------------|----------------------------------|------------|--------|
| dataSource | Data source for autocomplete | [DataSourceItemType](https://git.io/vMMKF)[] | |
| value | selected option | string\|string[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode }> | - |
| defaultValue | Initial selected option. | string\|string[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode }> | - |
| allowClear | Show clear button, effective in multiple mode only. | boolean | false |
| onChange | Called when select an option or input value change, or value of input is changed | function(value, label) | - |
| onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | - |
| onSearch | Called when searching items. | function(value) | - |
| disabled | Whether disabled select | boolean | false |
| defaultActiveFirstOption | Whether active first option by default | boolean | true |
| placeholder | placeholder of input | string | - |
| children (for dataSource) | Data source for autocomplet | React.ReactElement<OptionProps> / Array<React.ReactElement<OptionProps>> | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| allowClear | Show clear button, effective in multiple mode only. | 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 autocomplet | 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\[]\|{ key: string, label: string\|ReactNode }\|Array&lt;{ key: string, label: string\|ReactNode }> | - |
| 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` |
| 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 |
| backfill | backfill selected item the input when using keyboard | boolean | false |
| placeholder | placeholder of input | string | - |
| value | selected option | string\|string\[]\|{ key: string, label: string\|ReactNode }\|Array&lt;{ key: string, label: string\|ReactNode }> | - |
| onChange | Called when select an option or input value change, or value of input is changed | function(value, label) | - |
| 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) | - |

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

@ -19,20 +19,20 @@ const dataSource = ['12345', '23456', '34567'];
<AutoComplete dataSource={dataSource} />
```
| 参数 | 说明 | 类型 | 默认值 |
|----------------|----------------------------------|------------|---------|
| dataSource | 自动完成的数据源 | [DataSourceItemType](https://git.io/vMMKF)[] | |
| value | 指定当前选中的条目 | string\|string[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode }> | 无 |
| defaultValue | 指定默认选中的条目 | string\|string[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode}> | 无 |
| allowClear | 支持清除, 单选模式有效 | boolean | false |
| onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | 无 |
| onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | 无 |
| onSearch | 搜索补全项的时候调用 | function(value) | 无 |
| disabled | 是否禁用 | boolean | false |
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true
| placeholder | 输入框提示 | string | - |
| children (自动完成的数据源) | 自动完成的数据源 | React.ReactElement<OptionProps> / Array<React.ReactElement<OptionProps>> | - |
| children (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` |
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| allowClear | 支持清除, 单选模式有效 | 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\[]\|{ key: string, label: string\|ReactNode }\|Array&lt;{ key: string, label: string\|ReactNode}> | 无 |
| disabled | 是否禁用 | boolean | false |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true |
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` |
| placeholder | 输入框提示 | string | - |
| value | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|ReactNode }\|Array&lt;{ key: string, label: string\|ReactNode }> | 无 |
| onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | 无 |
| onSearch | 搜索补全项的时候调用 | function(value) | 无 |
| onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | 无 |

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

@ -8,9 +8,9 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
## API
| Property | Description | Type | Default |
|----------- |--------------------------------------------------------- | ---------- |-------|
| shape | the shape of avatar | `circle` \| `square` | `circle` |
| size | the size of the avatar | `large` \| `small` \| `default` | `default` |
| src | the address of the image for an image avatar | string | - |
| icon | the `Icon` type for an icon avatar, see `Icon` Component | string | - |
| 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 | `large` \| `small` \| `default` | `default` |
| src | the address of the image for an image avatar | string | - |

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

@ -9,9 +9,9 @@ title: Avatar
## API
| 参数 | 说明 | 类型 | 默认值 |
|----------- |--------------------------------------------------------- | ---------- | ------- |
| shape | 指定头像的形状 | Enum{ 'circle', 'square' } | `circle` |
| size | 设置头像的大小 | Enum{ 'large', 'small', 'default' } | `default` |
| src | 图片类头像的资源地址 | string | - |
| icon | 设置头像的图标类型，参考 `Icon` 组件 | string | - |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| icon | 设置头像的图标类型，参考 `Icon` 组件 | string | - |
| shape | 指定头像的形状 | Enum{ 'circle', 'square' } | `circle` |
| size | 设置头像的大小 | Enum{ 'large', 'small', 'default' } | `default` |
| src | 图片类头像的资源地址 | string | - |

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

@ -14,12 +14,11 @@ title: BackTop
## API
> The distance to the bottom is set to `50px` by default, which is overridable.
>
> If you decide to use custom styles, please note the size limit: no more than `40px * 40px`.
Property | Description | Type | Default
-----|-----|-----|------
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 | -
target | specifies the scrollable area dom node | () => HTMLElement | () => window
| 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 | - |

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

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

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

@ -18,16 +18,15 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
</Badge>
```
```jsx
<Badge count={5} />
```
| Property | Description | Type | Default |
|----------------|-------------------------|------------|---------|
| count | Number to show in badge | number | |
| overflowCount | Max count to show | number | 99 |
| showZero | Whether to show badge when `count` is zero | boolean | `false` |
| dot | Whether to display a red dot instead of `count` | 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 | `''` |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| count | Number to show in badge | number | |
| dot | Whether to display a red dot instead of `count` | boolean | `false` |
| overflowCount | Max count to show | number | 99 |
| showZero | Whether to show badge when `count` is zero | boolean | `false` |
| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` |
| text | If `status` is set, `text` sets the display text of the status `dot` | string | `''` |

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

@ -19,16 +19,15 @@ title: Badge
</Badge>
```
```jsx
<Badge count={5} />
```
| 参数 | 说明 | 类型 | 默认值 |
|----------------|----------------------------------|------------|---------|
| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number | |
| overflowCount | 展示封顶的数字值 | number | 99 |
| showZero | 当数值为 0 时，是否展示 Badge | boolean | false |
| dot | 不展示数字，只有一个小红点 | boolean | false |
| status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |
| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | string | '' |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number | |
| dot | 不展示数字，只有一个小红点 | boolean | false |
| overflowCount | 展示封顶的数字值 | number | 99 |
| showZero | 当数值为 0 时，是否展示 Badge | boolean | false |
| status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |
| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | string | '' |

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 |
|-----------|-----------------------------------|-----------------|---------|--------|
| routes | The routing stack information of router | object[] | | - |
| params | Routing parameters | object | | - |
| separator | Custom separator | string\|ReactNode | | `/` |
| itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode | | - |
| 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 | object\[] | | - |
| separator | Custom separator | string\|ReactNode | | `/` |
> `linkRender` and `nameRender` were removed after `antd@2.0`, please use `itemRender` instead.

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

@ -15,12 +15,12 @@ title: Breadcrumb
## API
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|-----------|-----------------------------------|-----------------|---------|--------|
| routes | router 的路由栈信息 | object[] | | - |
| params | 路由的参数 | object | | - |
| separator | 分隔符自定义 | string\|ReactNode | | '/' |
| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | | - |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- |
| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | | - |
| params | 路由的参数 | object | | - |
| routes | router 的路由栈信息 | object\[] | | - |
| separator | 分隔符自定义 | string\|ReactNode | | '/' |
> 2.0 之后，`linkRender` 和 `nameRender` 被移除，请使用 `itemRender` 来代替。

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

@ -14,16 +14,16 @@ 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
-----|-----|-----|------
type | can be set to `primary` `ghost` `dashed` `danger`(added in 2.7) or omitted (meaning `default`) | string | `default`
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 | -
shape | can be set to `circle` or omitted | string | -
size | can be set to `small` `large` or omitted | string | `default`
loading | set the loading status of button | boolean \| { delay: number } | false
onClick | set the handler to handle `click` event | function | -
ghost | make background transparent and invert text and border colors, added in 2.7 | boolean | false
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| ghost | make background transparent and invert text and border colors, added in 2.7 | boolean | false |
| 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` or omitted | string | - |
| size | can be set to `small` `large` or omitted | string | `default` |
| type | can be set to `primary` `ghost` `dashed` `danger`(added in 2.7) or omitted (meaning `default`) | string | `default` |
| onClick | set the handler to handle `click` event | function | - |
`<Button>Hello world!</Button>` will be rendered into `<button><span>Hello world!</span></button>`, and all the properties which are not listed above will be transferred to the `<button>` tag.

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

@ -17,16 +17,16 @@ subtitle: 按钮
按钮的属性说明如下：
属性 | 说明 | 类型 | 默认值
-----|-----|-----|------
type | 设置按钮类型，可选值为 `primary` `dashed` `danger`(版本 2.7 中增加) 或者不设 | string | -
htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button`
icon | 设置按钮的图标类型 | string | -
shape | 设置按钮形状，可选值为 `circle` 或者不设 | string | -
size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default`
loading | 设置按钮载入状态 | boolean \| { delay: number } | `false`
onClick | `click` 事件的 handler | function | -
ghost | 幽灵属性，使按钮背景透明，版本 2.7 中增加 | boolean | false
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| ghost | 幽灵属性，使按钮背景透明，版本 2.7 中增加 | boolean | false |
| 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` 或者不设 | string | - |
| size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default` |
| type | 设置按钮类型，可选值为 `primary` `dashed` `danger`(版本 2.7 中增加) 或者不设 | string | - |
| onClick | `click` 事件的 handler | function | - |
`<Button>Hello world!</Button>` 最终会被渲染为 `<button><span>Hello world!</span></button>`，并且除了上表中的属性，其它属性都会直接传到 `<button></button>`。

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

@ -30,17 +30,17 @@ moment.locale('zh-cn');
/>
```
| Property | Description | Type | Default |
|--------------|----------------|----------|--------------|
| value | The current selected date | [moment](http://momentjs.com/) | current date |
| defaultValue | The date selected by default | [moment](http://momentjs.com/) | default date |
| mode | The display mode of the calendar | `month` \| `year` | `month` |
| fullscreen | Whether to display in full-screen | boolean | `true` |
| dateCellRender | Customize the display of the date cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |
| monthCellRender | Customize the display of the month cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |
| dateFullCellRender | Customize the display of the date cell, the returned content will override 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 | - |
| locale | The calendar's locale | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| onPanelChange| Callback for when panel changes | function(date: moment, mode: string) | - |
| onSelect | Callback for when a date is selected | function(date: moment） | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| dateCellRender | Customize the display of the date cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |
| dateFullCellRender | Customize the display of the date cell, the returned content will override the cell | function(date: moment): ReactNode | - |
| defaultValue | The date selected by default | [moment](http://momentjs.com/) | default date |
| disabledDate | Function that specifies the dates that cannot be selected | (currentDate: moment) => boolean | - |
| fullscreen | Whether to display in full-screen | boolean | `true` |
| locale | The calendar's locale | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| mode | The display mode of the calendar | `month` \| `year` | `month` |
| monthCellRender | Customize the display of the month cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |
| monthFullCellRender | Customize the display of the month cell, the returned content will override the cell | function(date: moment): ReactNode | - |
| 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） | - |

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

@ -12,7 +12,6 @@ title: Calendar
当数据是日期或按照日期划分时，例如日程、课表、价格日历等，农历等。目前支持年/月切换。
## API
**注意：**Calendar 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。
@ -32,17 +31,17 @@ moment.locale('zh-cn');
/>
```
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------|----------|--------------|
| value | 展示日期 | [moment](http://momentjs.com/) | 当前日期 |
| defaultValue | 默认展示的日期 | [moment](http://momentjs.com/) | 默认日期 |
| mode | 初始模式，`month/year` | string | month |
| fullscreen | 是否全屏显示 | boolean | true |
| dateCellRender | 自定义渲染日期单元格，返回内容会被追加到单元格| function(date: moment): ReactNode | 无 |
| monthCellRender | 自定义渲染月单元格，返回内容会被追加到单元格 | function(date: moment): ReactNode | 无 |
| dateFullCellRender | 自定义渲染日期单元格，返回内容覆盖单元格| function(date: moment): ReactNode | 无 |
| monthFullCellRender | 自定义渲染月单元格，返回内容覆盖单元格 | function(date: moment): ReactNode | 无 |
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| onPanelChange| 日期面板变化回调 | function(date: moment, mode: string) | 无 |
| onSelect | 点击选择日期回调 | function(date: moment） | 无 |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| dateCellRender | 自定义渲染日期单元格，返回内容会被追加到单元格 | function(date: moment): ReactNode | 无 |
| dateFullCellRender | 自定义渲染日期单元格，返回内容覆盖单元格 | function(date: moment): ReactNode | 无 |
| 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 |
| monthCellRender | 自定义渲染月单元格，返回内容会被追加到单元格 | function(date: moment): ReactNode | 无 |
| monthFullCellRender | 自定义渲染月单元格，返回内容覆盖单元格 | function(date: moment): ReactNode | 无 |
| value | 展示日期 | [moment](http://momentjs.com/) | 当前日期 |
| onPanelChange | 日期面板变化回调 | function(date: moment, mode: string) | 无 |
| onSelect | 点击选择日期回调 | function(date: moment） | 无 |

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

@ -19,18 +19,18 @@ A card can be used to display content related to a single subject. The content c
### Card
| Property | Description | Type | Default |
|----------|----------------|----------|--------------|
| title | Card title | string\|ReactNode | - |
| extra | Content to render in the top-right corner of the card | string\|ReactNode | - |
| bordered | Toggles rendering of the border around the card | boolean | `true` |
| bodyStyle | Inline style to apply to the card content | object | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| bodyStyle | Inline style to apply to the card content | object | - |
| bordered | Toggles rendering of the border around the card | boolean | `true` |
| extra | Content to render in the top-right corner of the card | string\|ReactNode | - |
| loading | Shows a loading indicator while the contents of the card are being fetched | boolean | `false` |
| noHovering | Whether to disable hover effect on mouse over | boolean | `false` |
| loading | Shows a loading indicator while the contents of the card are being fetched | boolean | `false` |
| title | Card title | string\|ReactNode | - |
### Card.Grid
Property | Description | Type | Default
---------|-------------|------|---------
className | className of container | string | -
style | style object of container | object | -
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| className | className of container | string | - |
| style | style object of container | object | - |

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

@ -20,18 +20,18 @@ cols: 1
### Card
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------|
| title | 卡片标题 | string\|ReactNode | - |
| extra | 卡片右上角的操作区域 | string\|ReactNode | - |
| bordered | 是否有边框 | boolean | true |
| bodyStyle | 内容区域自定义样式 | object | - |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| bodyStyle | 内容区域自定义样式 | object | - |
| bordered | 是否有边框 | boolean | true |
| extra | 卡片右上角的操作区域 | string\|ReactNode | - |
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false |
| noHovering | 取消鼠标移过浮起 | boolean | false |
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false |
| title | 卡片标题 | string\|ReactNode | - |
### Card.Grid
Property | Description | Type | Default
---------|-------------|------|---------
className | 网格容器类名 | string | -
style | 定义网格容器类名的样式 | object | -
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| className | 网格容器类名 | string | - |
| style | 定义网格容器类名的样式 | object | - |

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

@ -14,14 +14,14 @@ A carousel component. Scales with its container.
## API
| Property | Description | Type | Default |
|------------------|----------------------------------------------|----------|---------------------------------|
| effect | Transition effect | `scrollx` \| `fade` | `scrollx` |
| dots | Whether to show the dots at the bottom of the gallery | boolean | `true` |
| vertical | Whether to use a vertical display | boolean | `false` |
| autoplay | Whether to scroll automatically | boolean | `false` |
| easing | Transition interpolation function name | string | `linear` |
| beforeChange | Callback function called before the current index changes | function(from, to) | - |
| afterChange | Callback function called after the current index changes | function(current) | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| afterChange | Callback function called after the current index changes | function(current) | - |
| autoplay | Whether to scroll automatically | boolean | `false` |
| beforeChange | Callback function called before the current index changes | function(from, to) | - |
| dots | Whether to show the dots at the bottom of the gallery | boolean | `true` |
| easing | Transition interpolation function name | string | `linear` |
| effect | Transition effect | `scrollx` \| `fade` | `scrollx` |
| vertical | Whether to use a vertical display | boolean | `false` |
For more info on the parameters, refer to the https://github.com/akiran/react-slick
For more info on the parameters, refer to the <https://github.com/akiran/react-slick>

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

@ -15,14 +15,14 @@ subtitle: 走马灯
## API
| 参数 | 说明 | 类型 | 默认值 |
|------------------|----------------------------------------------|----------|---------------------------------|
| effect | 动画效果函数，可取 scrollx, fade | string | scrollx |
| dots | 是否显示面板指示点 | boolean | true |
| vertical | 垂直显示 | boolean | false |
| autoplay | 是否自动切换 | boolean | false |
| easing | 动画效果 | string | linear |
| beforeChange | 切换面板的回调 | function(from, to) | 无 |
| afterChange | 切换面板的回调 | function(current) | 无 |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| afterChange | 切换面板的回调 | function(current) | 无 |
| autoplay | 是否自动切换 | boolean | false |
| beforeChange | 切换面板的回调 | function(from, to) | 无 |
| dots | 是否显示面板指示点 | boolean | true |
| easing | 动画效果 | string | linear |
| effect | 动画效果函数，可取 scrollx, fade | string | scrollx |
| vertical | 垂直显示 | boolean | false |
更多参数可参考：https://github.com/akiran/react-slick
更多参数可参考：<https://github.com/akiran/react-slick>

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

@ -6,7 +6,6 @@ title: Cascader
Cascade selection box.
## When To Use
- When you need to select from a set of associated data set. Such as province/city/district, company level, things classification.
@ -20,36 +19,36 @@ Cascade selection box.
```
| Property | Description | Type | Default |
|------|------|------|--------|
| options | data options of cascade | object | - |
| defaultValue | initial selected value | [CascaderOptionType](https://git.io/vMMoK)[] |[] |
| value | selected value | [CascaderOptionType](https://git.io/vMMoK)[] | - |
| onChange | callback when finishing cascader select | `(value, selectedOptions) => void` | - |
| onPopupVisibleChange | callback when popup shown or hidden | `(value) => void` | - |
| displayRender | render function of displaying selected options | `(label, selectedOptions) => ReactNode` | `label => label.join(' / ')` |
| style | additional style | string | - |
| -------- | ----------- | ---- | ------- |
| allowClear | whether allow clear | boolean | true |
| 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 | [CascaderOptionType](https://git.io/vMMoK)\[] | \[] |
| 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' |
| 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 | object | - |
| 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` |
| placeholder | input placeholder | string | 'Please select' |
| size | input size, one of `large` `default` `small` | string | `default` |
| disabled | whether disabled select | boolean | false |
| allowClear | whether allow clear | boolean | true |
| expandTrigger | expand current item when click or hover, one of 'click' 'hover' | string | 'click' |
| changeOnSelect | change value on each selection if set to true, see above demo for details | boolean | false |
| showSearch | Whether show search input in single mode. | boolean\|object | false |
| notFoundContent | Specify content to show when no result matches. | string | 'Not Found' |
| loadData | To load option lazily, and it cannot work with `showSearch` | `(selectedOptions) => void` | - |
| 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 |
| size | input size, one of `large` `default` `small` | string | `default` |
| style | additional style | string | - |
| value | selected value | [CascaderOptionType](https://git.io/vMMoK)\[] | - |
| 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` | |
| render | Used to render filtered options. | `function(inputValue, path): ReactNode` | |
| sort | Used to sort filtered options. | `function(a, b, inputValue)` | |
| matchInputWidth | Whether the width of result list equals to input's | boolean | |
| -------- | ----------- | ---- | ------- |
| 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` | |
| 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)` | |
<style>
.ant-cascader-picker {

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

@ -7,7 +7,6 @@ subtitle: 级联选择
级联选择框。
## 何时使用
- 需要从一组相关联的数据集合进行选择，例如省市区，公司层级，事物分类等。
@ -21,36 +20,36 @@ subtitle: 级联选择
```
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| options | 可选项数据源 | object | - |
| defaultValue | 默认的选中项 | [CascaderOptionType](https://git.io/vMMoK)[] |[] |
| value | 指定选中项 | [CascaderOptionType](https://git.io/vMMoK)[] | - |
| onChange | 选择完成后的回调 | `(value, selectedOptions) => void` | - |
| onPopupVisibleChange | 显示/隐藏浮层的回调 | `(value) => void` | - |
| displayRender | 选择后展示的渲染函数 | `(label, selectedOptions) => ReactNode` | `label => label.join(' / ')` |
| style | 自定义样式 | string | - |
| --- | --- | --- | --- |
| allowClear | 是否支持清除 | boolean | true |
| changeOnSelect | 当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | boolean | false |
| className | 自定义类名 | string | - |
| defaultValue | 默认的选中项 | [CascaderOptionType](https://git.io/vMMoK)\[] | \[] |
| disabled | 禁用 | boolean | false |
| displayRender | 选择后展示的渲染函数 | `(label, selectedOptions) => ReactNode` | `label => label.join(' / ')` |
| expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | 'click' |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body |
| loadData | 用于动态加载选项，无法与 `showSearch` 一起使用 | `(selectedOptions) => void` | - |
| notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' |
| options | 可选项数据源 | object | - |
| placeholder | 输入框占位文本 | string | '请选择' |
| popupClassName | 自定义浮层类名 | string | - |
| popupPlacement | 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` | Enum | `bottomLeft` |
| placeholder | 输入框占位文本 | string | '请选择' |
| size | 输入框大小，可选 `large` `default` `small` | string | `default` |
| disabled | 禁用 | boolean | false |
| allowClear | 是否支持清除 | boolean | true |
| expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | 'click' |
| changeOnSelect | 当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | boolean | false |
| showSearch | 在选择框中显示搜索框 | boolean | false |
| notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' |
| loadData | 用于动态加载选项，无法与 `showSearch` 一起使用 | `(selectedOptions) => void` | - |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body |
| size | 输入框大小，可选 `large` `default` `small` | string | `default` |
| style | 自定义样式 | string | - |
| value | 指定选中项 | [CascaderOptionType](https://git.io/vMMoK)\[] | - |
| onChange | 选择完成后的回调 | `(value, selectedOptions) => void` | - |
| onPopupVisibleChange | 显示/隐藏浮层的回调 | `(value) => void` | - |
`showSearch` 为对象时，其中的字段：
| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| filter | 接收 `inputValue` `path` 两个参数，当 `path` 符合筛选条件时，应返回 true，反之则返回 false。 | `function(inputValue, path): boolean` | |
| render | 用于渲染 filter 后的选项 | `function(inputValue, path): ReactNode` | |
| sort | 用于排序 filter 后的选项 | `function(a, b, inputValue)` | |
| matchInputWidth | 搜索结果列表是否与输入框同宽 | boolean | |
| --- | --- | --- | --- |
| filter | 接收 `inputValue` `path` 两个参数，当 `path` 符合筛选条件时，应返回 true，反之则返回 false。 | `function(inputValue, path): boolean` | |
| matchInputWidth | 搜索结果列表是否与输入框同宽 | boolean | |
| render | 用于渲染 filter 后的选项 | `function(inputValue, path): ReactNode` | |
| sort | 用于排序 filter 后的选项 | `function(a, b, inputValue)` | |
<style>
.ant-cascader-picker {

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

@ -15,19 +15,19 @@ Checkbox.
### Checkbox
| Property | Description | Type | Default |
|----------|------------------|----------|--------|
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| 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 |
| onChange | The callback function that is triggered when the state changes. | Function(e:Event) | - |
| disabled | Disable checkbox | boolean | false|
### Checkbox Group
| Property | Description | Type | Default |
|----------|------------------|----------|--------|
| defaultValue | Default selected value | string[] | [] |
| value | Used for setting the currently selected value. | string[] | [] |
| options | Specifies options | string[] | [] |
| onChange | The callback function that is triggered when the state changes. | Function(checkedValue) | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| defaultValue | Default selected value | string\[] | \[] |
| disabled | Disable all checkboxes | boolean | false |
| 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) | - |

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

@ -16,18 +16,18 @@ title: Checkbox
### Checkbox
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------|----------|--------|
| checked | 指定当前是否选中 | boolean | false |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| checked | 指定当前是否选中 | boolean | false |
| defaultChecked | 初始是否选中 | boolean | false |
| onChange | 变化时回调函数 | Function(e:Event) | - |
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false |
| onChange | 变化时回调函数 | Function(e:Event) | - |
### Checkbox Group
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------|----------|--------|
| defaultValue | 默认选中的选项 | string[] | [] |
| value | 指定选中的选项| string[] | [] |
| options | 指定可选项 | string[] | [] |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| defaultValue | 默认选中的选项 | string\[] | \[] |
| options | 指定可选项 | string\[] | \[] |
| value | 指定选中的选项 | string\[] | \[] |
| onChange | 变化时回调函数 | Function(checkedValue) | - |

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

@ -16,16 +16,16 @@ A content area which can be collapsed and expanded.
### Collapse
| Property | Description | Type | Default |
|----------|----------------|----------|--------------|
| 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 | - |
| onChange | Callback function executed when active panel is changed | Function | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| 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 | - |
| onChange | Callback function executed when active panel is changed | Function | - |
### Collapse.Panel
| Property | Description | Type | Default |
|----------|----------------|----------|--------------|
| key | Unique key identifying the panel from among its siblings | string | - |
| header | Title of the panel | string\|ReactNode | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| disabled | If `true`, panel cannot be opened or closed | boolean | `false` |
| header | Title of the panel | string\|ReactNode | - |
| key | Unique key identifying the panel from among its siblings | string | - |

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

@ -17,17 +17,16 @@ cols: 1
### Collapse
| 参数 | 说明 | 类型 | 默认值 |
|------------------|----------------------------------------------|----------|---------------------------------|
| activeKey | 当前激活 tab 面板的 key| string[]\|string | 默认无，accordion模式下默认第一个元素|
| defaultActiveKey | 初始化选中面板的 key | string | 无 |
| onChange | 切换面板的回调 | Function | 无 |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| activeKey | 当前激活 tab 面板的 key | string\[]\|string | 默认无，accordion模式下默认第一个元素 |
| defaultActiveKey | 初始化选中面板的 key | string | 无 |
| onChange | 切换面板的回调 | Function | 无 |
### Collapse.Panel
| 参数 | 说明 | 类型 | 默认值 |
|------|------------------|-------------------------|--------|
| key | 对应 activeKey | string | 无 |
| header | 面板头内容 | string\|ReactNode | 无 |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| disabled | 禁用后的面板展开与否将无法通过用户交互改变 | boolean | false |
| header | 面板头内容 | string\|ReactNode | 无 |
| key | 对应 activeKey | string | 无 |

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

@ -14,9 +14,9 @@ By clicking the input box, you can select a date from a popup calendar.
There are three kinds of picker:
* DatePicker
* MonthPicker
* RangePicker
- DatePicker
- MonthPicker
- RangePicker
**Note:** Part of locale of DatePicker, MonthPicker, RangePicker is read from value. So, please set the locale of moment correctly.
@ -34,59 +34,59 @@ moment.locale('zh-cn');
The following APIs are shared by DatePicker, MonthPicker, RangePicker.
| Property | Description | Type | Default |
|--------------|----------------|----------|--------------|
| allowClear | Whether to show clear button | boolean | true |
| disabled | determine whether the DatePicker is disabled | boolean | false |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| allowClear | Whether to show clear button | boolean | true |
| className | picker className | string | '' |
| style | to customize the style of the input box | object | {} |
| 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 32px and 22px respectively, while default size is 28px | string | - |
| locale | localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| disabledDate | specify the date that cannot be selected | (currentDate: moment) => boolean | - |
| disabled | determine whether the DatePicker is disabled | boolean | false |
| disabledDate | specify the date that cannot be selected | (currentDate: moment) => boolean | - |
| 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) |
| open | open state of picker | boolean | - |
| onOpenChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) | - |
| placeholder | placeholder of date input | string\|RangePicker[] | - |
| 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 32px and 22px respectively, while default size is 28px | string | - |
| 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) | - |
### DatePicker
| Property | Description | Type | Default |
|--------------|----------------|----------|--------------|
| value | to set date | [moment](http://momentjs.com/) | - |
| defaultValue | to set default date | [moment](http://momentjs.com/) | - |
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - |
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) |
| showTime.defaultValue | to set default time of selected date, [demo](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() |
| showToday | whether to show "Today" button | boolean | true |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| defaultValue | to set default date | [moment](http://momentjs.com/) | - |
| disabledTime | to specify the time that cannot be selected | function(date) | - |
| onOk | callback when click ok button | function() | - |
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
| renderExtraFooter | render extra footer in panel | () => 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](https://ant.design/components/date-picker/#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() | - |
### MonthPicker
| Property | Description | Type | Default |
|--------------|----------------|----------|--------------|
| value | to set date | [moment](http://momentjs.com/) | - |
| defaultValue | to set default date | [moment](http://momentjs.com/) | - |
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM" |
| onChange | a callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| defaultValue | to set default date | [moment](http://momentjs.com/) | - |
| format | to set the date format, refer to [moment.js](http://momentjs.com/) | string | "YYYY-MM" |
| monthCellContentRender | Custom month cell content render method | function(date, locale): 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) | - |
### RangePicker
| Property | Description | Type | Default |
|--------------|----------------|----------|--------------|
| value | to set date | [[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
| defaultValue | to set default date | [[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
| format | to set the date format | string | "YYYY-MM-DD HH:mm:ss" |
| onChange | a callback function, can be executed when the selected time is changing | function(dates: [moment, moment], dateStrings: [string, string]) | - |
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) |
| showTime.defaultValue | to set default time of selected date, [demo](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)[] | [moment(), moment()] |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| defaultValue | to set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
| disabledTime | to specify the time that cannot be selected | function(dates: [moment, moment], partial: `'start'|'end'`) | - |
| ranges | preseted ranges for quick selection | { [range: string]: [moment](http://momentjs.com/)[] } | - |
| format | to set the date format | string | "YYYY-MM-DD HH:mm:ss" |
| ranges | preseted ranges for quick selection | { [range: string]&#x3A; [moment](http://momentjs.com/)\[] } | - |
| renderExtraFooter | render extra footer in panel | () => 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](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | [moment(), moment()] |
| value | to set date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
| 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() | - |
<style>

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

@ -15,9 +15,9 @@ subtitle: 日期选择框
日期类组件包括以下三种形式。
* DatePicker
* MonthPicker
* RangePicker
- DatePicker
- MonthPicker
- RangePicker
**注意：**DatePicker、MonthPicker、RangePicker 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。
@ -35,59 +35,59 @@ moment.locale('zh-cn');
以下 API 为 DatePicker、MonthPicker、RangePicker 共享的 API。
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------|----------|--------------|
| allowClear | 是否显示清除按钮 | boolean | true |
| disabled | 禁用 | boolean | false |
| className | 选择器 className | string | '' |
| style | 自定义输入框样式 | object | {} |
| popupStyle | 格外的弹出日历样式 | object | {} |
| size | 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px | string | 无 |
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| allowClear | 是否显示清除按钮 | boolean | true |
| className | 选择器 className | string | '' |
| disabled | 禁用 | boolean | false |
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 |
| getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| open | 控制弹层是否展开 | boolean | - |
| onOpenChange | 弹出日历和关闭日历的回调 | function(status) | 无 |
| placeholder | 输入框提示文字 | string\|RangePicker[] | - |
| placeholder | 输入框提示文字 | string\|RangePicker\[] | - |
| popupStyle | 格外的弹出日历样式 | object | {} |
| size | 输入框大小，`large` 高度为 32px，`small` 为 22px，默认是 28px | string | 无 |
| style | 自定义输入框样式 | object | {} |
| onOpenChange | 弹出日历和关闭日历的回调 | function(status) | 无 |
### DatePicker
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------|----------|--------------|
| value | 日期 | [moment](http://momentjs.com/) | 无 |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
| onChange | 时间发生变化的回调 | function(date: moment, dateString: string) | 无 |
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) |
| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() |
| showToday | 是否展示“今天”按钮 | boolean | true |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 |
| disabledTime | 不可选择的时间 | function(date) | 无 |
| onOk | 点击确定按钮的回调 | function() | - |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) |
| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](https://ant.design/components/date-picker/#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() | - |
### MonthPicker
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------|----------|--------------|
| value | 日期 | [moment](http://momentjs.com/) | 无 |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM" |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM" |
| monthCellContentRender | 自定义的月份内容渲染方法 | function(date, locale): ReactNode | - |
| value | 日期 | [moment](http://momentjs.com/) | 无 |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - |
### RangePicker
| 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------|----------|--------------|
| value | 日期 | [moment](http://momentjs.com/)[] | 无 |
| defaultValue | 默认日期 | [moment](http://momentjs.com/)[] | 无 |
| format | 展示的日期格式 | string | "YYYY-MM-DD HH:mm:ss" |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(dates: [moment, moment], dateStrings: [string, string]) | 无 |
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) |
| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)[] | [moment(), moment()] |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | 无 |
| disabledTime | 不可选择的时间 | function(dates: [moment, moment], partial: `'start'|'end'`) | 无 |
| ranges       | 预设时间范围快捷选择 | { [range: string]: [moment](http://momentjs.com/)[] } | 无 |
| format | 展示的日期格式 | string | "YYYY-MM-DD HH:mm:ss" |
| ranges       | 预设时间范围快捷选择 | { [range: string]&#x3A; [moment](http://momentjs.com/)\[] } | 无 |
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) |
| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | [moment(), moment()] |
| value | 日期 | [moment](http://momentjs.com/)\[] | 无 |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(dates: [moment, moment], dateStrings: [string, string]) | 无 |
| onOk | 点击确定按钮的回调 | function() | - |
<style>

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

@ -14,32 +14,32 @@ If there are too many operations to display, you can wrap them in a `Dropdown`.
### Dropdown
| Property | Description | Type | Default |
|--------------|----------------|----------|--------------|
| trigger | the trigger mode which executes the drop-down action | Array<`click`\|`hover`> | [`hover`] |
| overlay | the dropdown menu | [Menu](/components/menu) | - |
| 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 |
| visible | whether the dropdown menu is visible | boolean | - |
| disabled| whether the dropdown menu is disabled| boolean | - |
| onVisibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | Function(visible) | - |
| 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) | - |
| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
| trigger | the trigger mode which executes the drop-down action | Array&lt;`click`\|`hover`> | [`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`.
> Warning: You must set a unique `key` for `Menu.Item`.
>
> Menu of Dropdown is unselectable by default, you can make it selectable via `<Menu selectable>`.
### Dropdown.Button
| Property | Description | Type | Default |
|--------------|----------------|----------|--------------|
| type | type of the button, the same as [Button](/components/button) | string | `default` |
| size | size of the button, the same as [Button](/components/button) | string | `default` |
| onClick | a callback function, the same as [Button](/components/button), which will be executed when you click the button on the left | Function | - |
| trigger | the trigger mode which executes the drop-down action | Array<'click'\|`hover`> | [`hover`] |
| overlay | the dropdown menu | [Menu](/components/menu) | - |
| visible | whether the dropdown menu is visible | boolean | - |
| disabled | whether the dropdown menu is disabled| boolean | - |
| onVisibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | Function | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| disabled | whether the dropdown menu is disabled | boolean | - |
| overlay | the dropdown menu | [Menu](/components/menu) | - |
| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
| size | size of the button, the same as [Button](/components/button) | string | `default` |
| trigger | the trigger mode which executes the drop-down action | Array&lt;'click'\|`hover`> | [`hover`] |
| type | type of the button, the same as [Button](/components/button) | string | `default` |
| visible | whether the dropdown menu is visible | boolean | - |
| onClick | a callback function, the same as [Button](/components/button), which will be executed when you click the button on the left | Function | - |
| onVisibleChange | a callback function takes an argument: `visible`, is executed when the visible state is changed | Function | - |

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

@ -15,32 +15,32 @@ title: Dropdown
属性如下
| 参数 | 说明 | 类型 | 默认值 |
|-------------|------------------|--------------------|--------------|
| trigger | 触发下拉的行为 | Array<'click'\|'hover'> | ['hover'] |
| overlay | 菜单 | [Menu](/components/menu) | - |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| disabled | 菜单是否禁用 | boolean | - |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body |
| visible | 菜单是否显示 | boolean | - |
| disabled | 菜单是否禁用 | boolean | - |
| onVisibleChange | 菜单显示状态改变时调用，参数为 visible | Function(visible) | - |
| overlay | 菜单 | [Menu](/components/menu) | - |
| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
| trigger | 触发下拉的行为 | Array&lt;'click'\|'hover'> | ['hover'] |
| visible | 菜单是否显示 | boolean | - |
| onVisibleChange | 菜单显示状态改变时调用，参数为 visible | Function(visible) | - |
`overlay` 菜单使用 [Menu](/components/menu/)，还包括菜单项 `Menu.Item`，分割线 `Menu.Divider`。
> 注意： Menu.Item 必须设置唯一的 key 属性。
>
> Dropdown 下的 Menu 默认不可选中。如果需要菜单可选中，可以指定 `<Menu selectable>`.
### Dropdown.Button
| 参数 | 说明 | 类型 | 默认值 |
|-------------|------------------|--------------------|--------------|
| type | 按钮类型，和 [Button](/components/button/) 一致 | string | 'default' |
| size | 按钮大小，和 [Button](/components/button/) 一致 | string | 'default' |
| onClick | 点击左侧按钮的回调，和 [Button](/components/button/) 一致 | Function | - |
| trigger | 触发下拉的行为 | Array<'click'\|'hover'> | ['hover'] |
| overlay | 菜单 | [Menu](/components/menu/) | - |
| visible | 菜单是否显示 | boolean | - |
| disabled | 菜单是否禁用 | boolean | - |
| onVisibleChange | 菜单显示状态改变时调用，参数为 visible | Function | - |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| disabled | 菜单是否禁用 | boolean | - |
| overlay | 菜单 | [Menu](/components/menu/) | - |
| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
| size | 按钮大小，和 [Button](/components/button/) 一致 | string | 'default' |
| trigger | 触发下拉的行为 | Array&lt;'click'\|'hover'> | ['hover'] |
| type | 按钮类型，和 [Button](/components/button/) 一致 | string | 'default' |
| visible | 菜单是否显示 | boolean | - |
| onClick | 点击左侧按钮的回调，和 [Button](/components/button/) 一致 | Function | - |
| onVisibleChange | 菜单显示状态改变时调用，参数为 visible | Function | - |

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

@ -34,15 +34,15 @@ A form field is defined using `<Form.Item />`.
**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, so just pass to form, you don't need to set it by yourself after 1.7.0. | object | n/a
| layout | Define form layout(Support after 2.8) | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
| horizontal | Use horizontal layout(Deprecated after 2.8) | boolean | true |
| vertical | Use vertical layout(Deprecated after 2.8) | boolean | false |
| inline | Use inline alignment(Deprecated after 2.8) | boolean | false |
| onSubmit | Defines a function will be called if form data validation is successful. | Function(e:Event) | |
| Property | Description | Type | Default Value |
| -------- | ----------- | ---- | ------------- |
| form | Decorated by `Form.create()` will be automatically set `this.props.form` property, so just pass to form, you don't need to set it by yourself after 1.7.0. | object | n/a |
| hideRequiredMark | Hide required mark of all form items | Boolean | false |
| horizontal | Use horizontal layout(Deprecated after 2.8) | boolean | true |
| inline | Use inline alignment(Deprecated after 2.8) | boolean | false |
| layout | Define form layout(Support after 2.8) | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
| vertical | Use vertical layout(Deprecated after 2.8) | boolean | false |
| onSubmit | Defines a function will be called if form data validation is successful. | Function(e:Event) | |
### Form.create(options)
@ -56,43 +56,42 @@ CustomizedForm = Form.create({})(CustomizedForm);
The following `options` are available:
| Property | Description | Type |
|-----------|------------------------------------------|------------|
| onFieldsChange | Specify a function that will be called when the value a `Form.Item` gets changed. Usage example: saving the field's value to Redux store. | Function(props, fields) |
| Property | Description | Type |
| -------- | ----------- | ---- |
| mapPropsToFields | Convert props to field value. Usage example: reading the values from Redux store. | Function(props): Object{ fieldName: Object{ value } } |
| onFieldsChange | Specify a function that will be called when the value a `Form.Item` gets changed. Usage example: saving the field's value to Redux store. | Function(props, fields) |
| onValuesChange | A handler while value of any field is changed | (props, values) => void |
If the form has been decorated by `Form.create` then it has `this.props.form` property. `this.props.form` provides some APIs as follows:
> Note: Before using `getFieldsValue` `getFieldValue` `setFieldsValue` and so on, please make sure that corresponding field had been registered with `getFieldDecorator`.
| Method | Description | Type |
|-----------|------------------------------------------|------------|
| 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) |
| setFieldsValue | Set the value of a field.(Note: please don't use it in `componentWillReceiveProps`, otherwise, it will cause an endless loop, [more](https://github.com/ant-design/ant-design/issues/2985)) | Function({ [fieldName]: value } |
| setFields | | Function(obj: object) |
| setFields | Set the value and error of a field. [Code Sample](https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79) | Function({ [fieldName]: { value: any, errors: [Error] } }) |
| validateFields | Validate the specified fields and get theirs values and errors. If you don't specify the parameter of fieldNames, you will vaildate all fields. | Function([fieldNames: string[]], [options: object], callback: Function(errors, values)) |
| 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` |
| Method | Description | Type |
| ------ | ----------- | ---- |
| 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[]]) |
| isFieldValidating | Check if the specified field is being validated. | 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 |
| isFieldsTouched | Check whether any of fields is touched by `getFieldDecorator`'s `options.trigger` event | (names?: string[]) => boolean |
| 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[]]) |
| getFieldDecorator | Two-way binding for form, please read below for details. | |
| 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 the value and error of a field. [Code Sample](https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79) | Function({ [fieldName]&#x3A; { value: any, errors: [Error] } }) |
| setFields | | Function(obj: object) |
| setFieldsValue | Set the value of a field.(Note: please don't use it in `componentWillReceiveProps`, otherwise, it will cause an endless loop, [more](https://github.com/ant-design/ant-design/issues/2985)) | Function({ [fieldName]&#x3A; value } |
| validateFields | Validate the specified fields and get theirs values and errors. If you don't specify the parameter of fieldNames, you will vaildate all fields. | Function(\[fieldNames: string\[]], [options: object], callback: Function(errors, values)) |
| 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` |
### this.props.form.validateFields/validateFieldsAndScroll([fieldNames: string[]], [options: object], callback: Function(errors, values))
### this.props.form.validateFields/validateFieldsAndScroll(\[fieldNames: string\[]], [options: object], callback: Function(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.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 | {} |
### this.props.form.getFieldDecorator(id, options)
After wrapped by `getFieldDecorator`, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls，the flow of form data will be handled by Form which will cause:
@ -104,58 +103,59 @@ After wrapped by `getFieldDecorator`, `value`(or other property defined by `valu
#### Special attention
1. `getFieldDecorator` can not be used to decorate stateless component.
1. If you use `react@<15.3.0`, then, you can't use `getFieldDecorator` in stateless component: https://github.com/facebook/react/pull/6534
2. If you use `react@<15.3.0`, then, you can't use `getFieldDecorator` in stateless component: <https://github.com/facebook/react/pull/6534>
#### 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.valuePropName | Props of children node, for example, the prop of Switch is 'checked'. | string | 'value' |
| options.initialValue | You can specify initial value, type, optional value of children node. (Note: Because `Form` will test equality with `===` internaly, we recommend to use vairable as `initialValue`, instead of literal) | | n/a |
| options.trigger | When to collect the value of children node | string | 'onChange' |
| 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.validateTrigger | When to validate the value of children node. | string\|string[] | 'onChange' |
| options.rules | Includes validation rules. Please refer to "Validation Rules" part for details. | object[] | n/a |
| options.validateFirst | Whether stop validate on first rule of error for this field. | boolean | false |
| 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.exclusive | Whether it is exclusive with other controls, particularly for Radio. | boolean | false |
| 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.initialValue | You can specify initial value, type, optional value of children node. (Note: Because `Form` will test equality with `===` internaly, we recommend to use vairable 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.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)。
### Form.Item
Note:
* If Form.Item has multiple children that had been decorated by `getFieldDecorator`, `help` and `required` and `validateStatus` can't be generated automatically.
* Before `2.2.0`, form controls must be child of Form.Item, otherwise, you need to set `help`, `required` and `validateStatus` by yourself.
| Property | Description | Type | Default Value |
|---------------|--------------------------------------|--------|---------------|
| label | Label text | string\|ReactNode | |
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](https://ant.design/components/grid/#Col) | |
| wrapperCol | The layout for input controls, same as `labelCol` | [object](https://ant.design/components/grid/#Col) | |
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|ReactNode | |
- If Form.Item has multiple children that had been decorated by `getFieldDecorator`, `help` and `required` and `validateStatus` can't be generated automatically.
- Before `2.2.0`, form controls must be child of Form.Item, otherwise, you need to set `help`, `required` and `validateStatus` by yourself.
| Property | Description | Type | Default Value |
| -------- | ----------- | ---- | ------------- |
| colon | Used with `label`, whether to display `:` after label text. | boolean | true |
| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time. | string\|ReactNode | |
| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false |
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|ReactNode | |
| label | Label text | string\|ReactNode | |
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](https://ant.design/components/grid/#Col) | |
| required | Whether provided or not, it will be generated by the validation rule. | boolean | false |
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | |
| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false |
| colon | Used with `label`, whether to display `:` after label text. | boolean | true |
| wrapperCol | The layout for input controls, same as `labelCol` | [object](https://ant.design/components/grid/#Col) | |
### Validation Rules
Property | Description | Type | Default Value
---------|-------------|------|--------------
message | validation error message | string | -
type | built-in validation type, [available options](https://github.com/yiminghe/async-validator#type) | string | 'string'
required | indicates whether field is required | boolean | `false`
whitespace | treat required fields that only contain whitespace as errors | boolean | `false`
len | validate an exact length of a field | number | -
min | validate a min length of a field | number | -
max | validate a max length of a field | number | -
enum | validate a value from a list of possible values | string | -
pattern | validate from a regular expression | RegExp | -
transform | transform a value before validation | function(value) => transformedValue:any | -
validator | custom validate function (Note: [callback must be called](https://github.com/ant-design/ant-design/issues/5155)) | function(rule, value, callback) | -
| 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 | - |
| 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).
@ -165,7 +165,6 @@ See more advanced usage at [async-validator](https://github.com/yiminghe/async-v
}
</style>
## Using in TypeScript
```jsx
@ -180,4 +179,4 @@ interface UserFormProps extends FormComponentProps {
class UserForm extends React.Component<UserFormProps, any> {
}
```

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

@ -36,15 +36,15 @@ title: Form
**更多示例参考 [rc-form](http://react-component.github.io/form/)**。
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|-------|
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| form | 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性，直接传给 Form 即可。1.7.0 之后无需设置 | object | 无 |
| layout | 表单布局(2.8 之后支持) | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
| horizontal | 水平排列布局(2.8 之后废弃) | boolean | true |
| vertical | 垂直排列布局(2.8 之后废弃) | boolean | false |
| inline | 行内排列布局(2.8 之后废弃) | boolean | false |
| onSubmit | 数据验证成功后回调事件 | Function(e:Event) | |
| hideRequiredMark | 隐藏所有表单项的必选标记 | Boolean | false |
| horizontal | 水平排列布局(2.8 之后废弃) | boolean | true |
| inline | 行内排列布局(2.8 之后废弃) | boolean | false |
| layout | 表单布局(2.8 之后支持) | 'horizontal'\|'vertical'\|'inline' | 'horizontal' |
| vertical | 垂直排列布局(2.8 之后废弃) | boolean | false |
| onSubmit | 数据验证成功后回调事件 | Function(e:Event) | |
### Form.create(options)
@ -58,10 +58,10 @@ CustomizedForm = Form.create({})(CustomizedForm);
`options` 的配置项如下。
| 参数 | 说明 | 类型 |
|-----------|------------------------------------------|------------|
| onFieldsChange | 当 `Form.Item` 子节点的值发生改变时触发，可以把对应的值转存到 Redux store | Function(props, fields) |
| 参数 | 说明 | 类型 |
| --- | --- | --- |
| mapPropsToFields | 把父组件的属性映射到表单项上（可用于把 Redux store 中的值读出） | Function(props): Object{ fieldName: Object{ value } } |
| onFieldsChange | 当 `Form.Item` 子节点的值发生改变时触发，可以把对应的值转存到 Redux store | Function(props, fields) |
| onValuesChange | 任一表单域的值发生改变时的回调 | (props, values) => void |
经过 `Form.create` 包装的组件将会自带 `this.props.form` 属性，`this.props.form` 提供的 API 如下：
@ -69,27 +69,27 @@ CustomizedForm = Form.create({})(CustomizedForm);
> 注意：使用 `getFieldsValue` `getFieldValue` `setFieldsValue` 等时，应确保对应的 field 已经用 `getFieldDecorator` 注册过了。
| 方法      | 说明                                     | 类型       |
|-----------|------------------------------------------|------------|
| getFieldsValue | 获取一组输入控件的值，如不传入参数，则获取全部组件的值 | Function([fieldNames: string[]]) |
| getFieldValue | 获取一个输入控件的值 | Function(fieldName: string) |
| setFieldsValue | 设置一组输入控件的值（注意：不要在 `componentWillReceiveProps` 内使用，否则会导致死循环，[更多](https://github.com/ant-design/ant-design/issues/2985)） | Function({ [fieldName]: value } |
| setFields | 设置一组输入控件的值与 Error。 [代码](https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79) | Function({ [fieldName]: { value: any, errors: [Error] } }) |
| validateFields | 校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件 | Function([fieldNames: string[]], [options: object], callback: Function(errors, values)) |
| validateFieldsAndScroll | 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 | 参考 `validateFields` |
| ------- | -------------------------------------- | -------- |
| getFieldDecorator | 用于和表单进行双向绑定，详见下方描述 | |
| getFieldError | 获取某个输入控件的 Error | Function(name) |
| getFieldsError | 获取一组输入控件的 Error ，如不传入参数，则获取全部组件的 Error | Function([names: string[]]) |
| isFieldValidating | 判断一个输入控件是否在校验状态 | 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 |
| isFieldsTouched | 判断是否任一输入控件经历过 `getFieldDecorator` 的值收集时机 `options.trigger` | (names?: string[]) => boolean |
| resetFields | 重置一组输入控件的值（为 `initialValue`）与状态，如不传入参数，则重置所有组件 | Function([names: string[]]) |
| getFieldDecorator | 用于和表单进行双向绑定，详见下方描述 | |
| isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) |
| resetFields | 重置一组输入控件的值（为 `initialValue`）与状态，如不传入参数，则重置所有组件 | Function(\[names: string\[]]) |
| setFields | 设置一组输入控件的值与 Error。 [代码](https://github.com/react-component/form/blob/3b9959b57ab30b41d8890ff30c79a7e7c383cad3/examples/server-validate.js#L74-L79) | Function({ [fieldName]&#x3A; { value: any, errors: [Error] } }) |
| setFieldsValue | 设置一组输入控件的值（注意：不要在 `componentWillReceiveProps` 内使用，否则会导致死循环，[更多](https://github.com/ant-design/ant-design/issues/2985)） | Function({ [fieldName]&#x3A; value } |
| validateFields | 校验并获取一组输入域的值与 Error，若 fieldNames 参数为空，则校验全部组件 | Function(\[fieldNames: string\[]], [options: object], callback: Function(errors, values)) |
| validateFieldsAndScroll | 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 | 参考 `validateFields` |
### this.props.form.validateFields/validateFieldsAndScroll([fieldNames: string[]], [options: object], callback: Function(errors, values))
### this.props.form.validateFields/validateFieldsAndScroll(\[fieldNames: string\[]], [options: object], callback: Function(errors, values))
| 参数 | 说明 | 类型 | 默认值 |
|-----|-----|------|-------|
| --- | --- | --- | --- |
| options.first | 若为 true，则每一表单域的都会在碰到第一个失败了的校验规则后停止校验 | boolean | false |
| options.firstFields | 指定表单域会在碰到第一个失败了的校验规则后停止校验 | String[] | [] |
| 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 | {} |
@ -104,58 +104,59 @@ CustomizedForm = Form.create({})(CustomizedForm);
#### 特别注意
1. `getFieldDecorator` 不能用于装饰纯函数组件。
1. 如果使用的是 `react@<15.3.0`，则 `getFieldDecorator` 调用不能位于纯函数组件中: https://github.com/facebook/react/pull/6534
2. 如果使用的是 `react@<15.3.0`，则 `getFieldDecorator` 调用不能位于纯函数组件中: <https://github.com/facebook/react/pull/6534>
#### getFieldDecorator(id, options) 参数
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------------------------------------|-----|--------|
| id | 必填输入控件唯一标志。支持嵌套式的[写法](https://github.com/react-component/form/pull/48)。 | string | |
| options.valuePropName | 子节点的值的属性，如 Switch 的是 'checked' | string | 'value' |
| options.initialValue | 子节点的初始值，类型、可选值均由子节点决定(注意：由于内部校验时使用 `===` 判断是否变化，建议使用变量缓存所需设置的值而非直接使用字面量)) | | |
| options.trigger | 收集子节点的值的时机 | string | 'onChange' |
| options.getValueFromEvent | 可以把 onChange 的参数（如 event）转化为控件的值 | function(..args) | [reference](https://github.com/react-component/form#option-object) |
| options.validateTrigger | 校验子节点值的时机 | string\|string[] | 'onChange' |
| options.rules | 校验规则，参考下方文档 | object[] | |
| options.validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验 | boolean | false |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| id | 必填输入控件唯一标志。支持嵌套式的[写法](https://github.com/react-component/form/pull/48)。 | string | |
| options.exclusive | 是否和其他控件互斥，特别用于 Radio 单选控件 | boolean | false |
| 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.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)。
### Form.Item
注意：
* 一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child，当有多个被装饰过的 child 时，`help` `required` `validateStatus` 无法自动生成。
* `2.2.0` 之前，只有当表单域为 Form.Item 的子元素时，才会自动生成 `help` `required` `validateStatus`，嵌套情况需要自行设置。
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------------------------------------|-----------|--------|
- 一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child，当有多个被装饰过的 child 时，`help` `required` `validateStatus` 无法自动生成。
- `2.2.0` 之前，只有当表单域为 Form.Item 的子元素时，才会自动生成 `help` `required` `validateStatus`，嵌套情况需要自行设置。
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| colon | 配合 label 属性使用，表示是否显示 label 后面的冒号 | boolean | true |
| extra | 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string\|ReactNode | |
| hasFeedback | 配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false |
| help | 提示信息，如不设置，则会根据校验规则自动生成 | string\|ReactNode | |
| label | label 标签的文本 | string\|ReactNode | |
| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](https://ant.design/components/grid/#Col) | |
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](https://ant.design/components/grid/#Col) | |
| help | 提示信息，如不设置，则会根据校验规则自动生成 | string\|ReactNode | |
| extra | 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string\|ReactNode | |
| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](https://ant.design/components/grid/#Col) | |
| required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | false |
| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | |
| hasFeedback | 配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false |
| colon | 配合 label 属性使用，表示是否显示 label 后面的冒号 | boolean | true |
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](https://ant.design/components/grid/#Col) | |
### 校验规则
参数 | 说明 | 类型 | 默认值
-----|------|------|------
message | 校验文案 | string | -
type | 内建校验类型，[可选项](https://github.com/yiminghe/async-validator#type) | string | 'string'
required | 是否必选 | boolean | `false`
whitespace | 必选时，空格是否会被视为错误 | boolean | `false`
len | 字段长度 | number | -
min | 最小长度 | number | -
max | 最大长度 | number | -
enum | 枚举类型 | string | -
pattern | 正则表达式校验 | RegExp | -
transform | 校验前转换字段值 | function(value) => transformedValue:any | -
validator | 自定义校验（注意，[callback 必须被调用](https://github.com/ant-design/ant-design/issues/5155)） | function(rule, value, callback) | -
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| enum | 枚举类型 | string | - |
| len | 字段长度 | number | - |
| max | 最大长度 | number | - |
| message | 校验文案 | string | - |
| 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)。
@ -165,7 +166,6 @@ validator | 自定义校验（注意，[callback 必须被调用](https://github
}
</style>
## 在 TypeScript 中使用
```jsx
@ -180,3 +180,4 @@ interface UserFormProps extends FormComponentProps {
class UserForm extends React.Component<UserFormProps, any> {
}
```

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

@ -68,10 +68,10 @@ In the grid system, we define the frame outside the information area based on `r
Following is a brief look at how it works:
* Establish a set of `column` in the horizontal space defined by `row` (abbreviated col)
* Your content elements should be placed directly in the `col`, and only `col` should be placed directly in `row`
* The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by `.col-8` (`span=8`).
* If the sum of `col` spans in a `row` are more than 24, then the overflowing `col` as a whole will start a new line arrangement.
- Establish a set of `column` in the horizontal space defined by `row` (abbreviated col)
- Your content elements should be placed directly in the `col`, and only `col` should be placed directly in `row`
- The column grid system is a value of 1-24 to represent its range spans. For example, three columns of equal width can be created by `.col-8` (`span=8`).
- If the sum of `col` spans in a `row` are more than 24, then the overflowing `col` as a whole will start a new line arrangement.
## Flex layout
@ -88,26 +88,26 @@ If the Ant Design grid layout component does not meet your needs, you can use th
### Row
| Property | Description | Type | Default |
|------------|-----------------|--------------------|-------------|
| gutter | spacing between grids | number | 0 |
| type | layout mode, optional `flex`, [browser support](http://caniuse.com/#search=flex) | string | |
| align | the vertical alignment of the flex layout: `top` `middle` `bottom` | string | `top` |
| justify | horizontal arrangement of the flex layout: `start` `end` `center` `space-around` `space-between` | string | `start` |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| align | the vertical alignment of the flex layout: `top` `middle` `bottom` | string | `top` |
| gutter | spacing between grids | number | 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 |
|------------|-----------------|--------------------|-------------|
| span | raster number of cells to occupy, 0 corresponds to `display: none` | number | none |
| order | raster order, used in `flex` layout mode | number | 0 |
| offset | the number of cells to offset Col from the left | number | 0 |
| push | the number of cells that raster is moved to the right | number | 0 |
| pull | the number of cells that raster is moved to the left | number | 0 |
| xs | `<768px` and also default setting, could be a `span` value or an object containing above props | number\|object | - |
| sm | `≥768px`, could be a `span` value or an object containing above props | number\|object | - |
| md | `≥992px`, could be a `span` value or an object containing above props | number\|object | - |
| lg | `≥1200px`, could be a `span` value or an object containing above props | number\|object | - |
| xl | `≥1600px`, could be a `span` value or an object containing above props | number\|object | - |
| 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 | `<768px` and also default setting, could be a `span` value or an object containing above props | number\|object | - |
| sm | `≥768px`, could be a `span` value or an object containing above props | number\|object | - |
| md | `≥992px`, could be a `span` value or an object containing above props | number\|object | - |
| lg | `≥1200px`, could be a `span` value or an object containing above props | number\|object | - |
| xl | `≥1600px`, could be a `span` value or an object containing above props | number\|object | - |
The breakpoints of responsive grid follow [BootStrap 3 media queries rules](https://getbootstrap.com/docs/3.3/css/#responsive-utilities-classes)(not including `occasionally part`).

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

@ -67,10 +67,10 @@ title: Grid
布局的栅格化系统，我们是基于行（row）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：
* 通过`row`在水平方向建立一组`column`（简写col）
* 你的内容应当放置于`col`内，并且，只有`col`可以作为`row`的直接元素
* 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用`.col-8`来创建
* 如果一个`row`中的`col`总和超过 24，那么多余的`col`会作为一个整体另起一行排列
- 通过`row`在水平方向建立一组`column`（简写col）
- 你的内容应当放置于`col`内，并且，只有`col`可以作为`row`的直接元素
- 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用`.col-8`来创建
- 如果一个`row`中的`col`总和超过 24，那么多余的`col`会作为一个整体另起一行排列
## Flex 布局
@ -87,26 +87,26 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
### Row
| 成员 | 说明 | 类型 | 默认值 |
|-----------|-----------------|--------------------|-------------|
| gutter | 栅格间隔 | number | 0 |
| type | 布局模式，可选 `flex`，[现代浏览器](http://caniuse.com/#search=flex) 下有效 | string | |
| align | flex 布局下的垂直对齐方式：`top` `middle` `bottom` | string | `top` |
| justify | flex 布局下的水平排列方式：`start` `end` `center` `space-around` `space-between` | string | `start` |
| 成员 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| align | flex 布局下的垂直对齐方式：`top` `middle` `bottom` | string | `top` |
| gutter | 栅格间隔 | number | 0 |
| justify | flex 布局下的水平排列方式：`start` `end` `center` `space-around` `space-between` | string | `start` |
| type | 布局模式，可选 `flex`，[现代浏览器](http://caniuse.com/#search=flex) 下有效 | string | |
### Col
| 成员 | 说明 | 类型 | 默认值 |
|----------|-----------------|--------------------|-------------|
| span | 栅格占位格数，为 0 时相当于 `display: none` | number | - |
| order | 栅格顺序，`flex` 布局模式下有效 | number | 0 |
| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 |
| push | 栅格向右移动格数 | number | 0 |
| pull | 栅格向左移动格数 | number | 0 |
| xs | `<768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
| sm | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
| md | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
| lg | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
| xl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
| 成员 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 |
| order | 栅格顺序，`flex` 布局模式下有效 | number | 0 |
| pull | 栅格向左移动格数 | number | 0 |
| push | 栅格向右移动格数 | number | 0 |
| span | 栅格占位格数，为 0 时相当于 `display: none` | number | - |
| xs | `<768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
| sm | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
| md | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
| lg | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
| xl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
响应式栅格的断点遵循了 [BootStrap 3 的规则](https://getbootstrap.com/docs/3.3/css/#responsive-utilities-classes)（不包含链接里 `occasionally` 的部分)。

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

@ -70,8 +70,8 @@ You can set `style` and `className` for size and color of icons because they are
<Icon type="question" style={{ fontSize: 16, color: '#08c' }} />
```
| Property | Description | Type | Default |
|----------|------------------|------- |---------|
| type | Type of ant design icon | string | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| spin | Rotate icon with animation | boolean | false |
| style | style properties of icon, like fontSize and color | object | - |
| type | Type of ant design icon | string | - |

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

@ -71,8 +71,8 @@ ReactDOM.render(<IconSet className="icons" catigory="logo" />, mountNode);
<Icon type="question" style={{ fontSize: 16, color: '#08c' }} />
```
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------|----------|--------|
| type | 图标类型 | string | - |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| spin | 是否有旋转动画 | boolean | false |
| style | 设置图标的样式，例如 fontSize 和 color | object | - |
| type | 图标类型 | string | - |

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

@ -12,16 +12,16 @@ When a numeric value needs to be provided.
## API
| property | description | type | default |
|-------------|----------------|--------------------|--------------|
| min | min value | number | -Infinity |
| max | max vale | number | Infinity |
| value | current value | number | |
| step | The number to which the current value is increased or decreased. It can be an integer or decimal. | number\|string | 1 |
| precision | precision of input value | number | - |
| defaultValue | initial value | number | |
| onChange | The callback triggered when the value is changed. | function(value: number \| string) | |
| disabled | disable the input | boolean | false |
| size | width of input box | string | - |
| property | description | type | default |
| -------- | ----------- | ---- | ------- |
| 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 vale | number | Infinity |
| min | min value | number | -Infinity |
| parser | Specifies the value extracted from formatter | function( string): number | - |
| precision | precision of input value | number | - |
| size | width 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) | |

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

@ -15,16 +15,16 @@ title: InputNumber
属性如下
| 成员 | 说明 | 类型 | 默认值 |
|-------------|----------------|--------------------|--------------|
| min | 最小值 | number | -Infinity |
| max | 最大值 | number | Infinity |
| value | 当前值 | number | |
| step | 每次改变步数，可以为小数 | number\|string | 1 |
| precision | 数值精度 | number | - |
| defaultValue | 初始值 | number | |
| onChange | 变化回调 | Function(value: number \| string) | |
| disabled | 禁用 | boolean | false |
| size | 输入框大小 | string | 无 |
| 成员 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| 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 | - |
| size | 输入框大小 | string | 无 |
| step | 每次改变步数，可以为小数 | number\|string | 1 |
| value | 当前值 | number | |
| onChange | 变化回调 | Function(value: number \| string) | |

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

@ -16,22 +16,22 @@ Keyboard and mouse can be used for providing or changing data.
### Input
| Property | Description | Type | Default |
|----------------|-----------------------|----------|---------------|
| type | The type of input, `text` or `textarea`(`type=textarea` are deprecated after `2.12`, please use `Input.TextArea`) | string | `text` |
| id | The ID for input | string | |
| value | The input content value | string | |
| defaultValue | The initial input content | string | |
| 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` |
| 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 |
| addonBefore | The label text displayed before (on the left side of) the input field. | string\|ReactNode | |
| addonAfter | The label text displayed after (on the right side of) the input field. | string\|ReactNode | |
| prefix | The prefix icon for the Input. | string\|ReactNode | |
| suffix | The suffix icon for the Input. | string\|ReactNode | |
| onPressEnter | The callback function that is triggered when Enter key is pressed. | function(e) | |
| 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, `text` or `textarea`(`type=textarea` are deprecated after `2.12`, please use `Input.TextArea`) | string | `text` |
| value | The input content value | string | |
| onPressEnter | The callback function that is triggered when Enter key is pressed. | function(e) | |
> 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.
> then `value`, `defaultValue`, and `id` props of `Input` are automatically set.
The rest of the props of Input are exactly the same as the original [input](https://facebook.github.io/react/docs/events.html#supported-events).
@ -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 |
|----------------|-----------------------|----------|---------------|
| 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 |
| -------- | ----------- | ---- | ------- |
| 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,18 @@ The rest of the props of `Input.TextArea` are the same as the original [textarea
`Added in 2.5.0`
| Property | Description | Type | Default |
|-----------|--------------------------------------|------------|---------|
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| onSearch | The callback function that is triggered when you click on the search-icon or press Enter key. | function(value) | |
Supports all props of `Input`.
#### Input.Group
| Property | Description | Type | Default |
|-----------|----------------------------------|--------|-----------|
| size | The size of `Input.Group` specifies the size of the included `Input` fields. Available: `large` `default` `small` | string | `default` |
| compact | Whether use compact style | boolean | false |
| 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` |
```html
<Input.Group>

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

@ -16,19 +16,19 @@ title: Input
### Input
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------------------------------------|------------|-------|
| type | 声明 input 类型，同原生 input 标签的 type 属性。另外提供 `type="textarea"`(该 type `2.12` 后废弃，请直接使用 `Input.TextArea`)。 | string | `text` |
| id | 输入框的 id | string | |
| value | 输入框内容 | string | |
| defaultValue | 输入框默认内容 | string | |
| size | 控件大小。注：标准表单内的输入框大小限制为 `large`。可选 `large` `default` `small` | string | `default` |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| addonAfter | 带标签的 input，设置后置标签 | string\|ReactNode | |
| addonBefore | 带标签的 input，设置前置标签 | string\|ReactNode | |
| defaultValue | 输入框默认内容 | string | |
| disabled | 是否禁用状态，默认为 false | boolean | false |
| addonBefore | 带标签的 input，设置前置标签 | string\|ReactNode | |
| addonAfter | 带标签的 input，设置后置标签 | string\|ReactNode | |
| prefix | 带有前缀图标的 input | string\|ReactNode | |
| suffix | 带有后缀图标的 input | string\|ReactNode | |
| onPressEnter | 按下回车的回调 | function(e) | |
| id | 输入框的 id | string | |
| prefix | 带有前缀图标的 input | string\|ReactNode | |
| size | 控件大小。注：标准表单内的输入框大小限制为 `large`。可选 `large` `default` `small` | string | `default` |
| suffix | 带有后缀图标的 input | string\|ReactNode | |
| type | 声明 input 类型，同原生 input 标签的 type 属性。另外提供 `type="textarea"`(该 type `2.12` 后废弃，请直接使用 `Input.TextArea`)。 | string | `text` |
| value | 输入框内容 | string | |
| onPressEnter | 按下回车的回调 | function(e) | |
> 如果 `Input` 在 `Form.Item` 内，并且 `Form.Item` 设置了 `id` 和 `options` 属性，则 `value` `defaultValue` 和 `id` 属性会被自动设置。
@ -38,12 +38,12 @@ Input 的其他属性和 React 自带的 [input](https://facebook.github.io/reac
> `2.12` 后新增的组件，旧版请使用 `Input[type=textarea]`。
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------------------------------------|------------|-------|
| 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) 一致。
@ -51,19 +51,18 @@ Input 的其他属性和 React 自带的 [input](https://facebook.github.io/reac
`Added in 2.5.0`
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------------------------------------|-----------|-------|
| onSearch | 点击搜索或按下回车键时的回调 | function(value) | |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| onSearch | 点击搜索或按下回车键时的回调 | function(value) | |
其余属性和 Input 一致。
#### Input.Group
| 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------------------------------------|-------------|-------|
| size | `Input.Group` 中所有的 `Input` 的大小，可选 `large` `default` `small` | string | `default` |
| compact | 是否用紧凑模式 | boolean | false |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| compact | 是否用紧凑模式 | boolean | false |
| size | `Input.Group` 中所有的 `Input` 的大小，可选 `large` `default` `small` | string | `default` |
```html
<Input.Group>

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

@ -73,10 +73,10 @@ The first level navigation is inclined left near a logo, and the secondary menu
The wrapper.
Property | Description | Type | Default
-----|-----|-----|------
style | to customize the styles | object | -
className | container className | string | -
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| className | container className | string | - |
| style | to customize the styles | object | - |
> APIs of `Layout.Header` `Layout.Footer` `Layout.Content` are the same as that of `Layout`.
@ -84,19 +84,19 @@ className | container className | string | -
The sidebar.
Property | Description | Type | Default
-----|-----|-----|------
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 |
collapsed | to set the current status | boolean | -
onCollapse | the callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | -
trigger | specify the customized trigger, set to null to hide the trigger | string\|ReactNode| - |
width | width of the sidebar | number\|string | 200
collapsedWidth | width of the collapsed sidebar, by setting to `0` a special trigger will appear | number | 64
breakpoint | breakpoint of the responsive layout | Enum { 'xs', 'sm', 'md', 'lg', 'xl' } | - |
style | to customize the styles | object | -
className | container className | string | -
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| breakpoint | breakpoint of the responsive layout | Enum { 'xs', 'sm', 'md', 'lg', 'xl' } | - |
| 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 | 64 |
| 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 | - |
| 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) => {} | - |
#### breakpoint width

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

@ -74,10 +74,10 @@ title: Layout
布局容器。
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| style | 指定样式 | object | - |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| className | 容器 className | string | - |
| style | 指定样式 | object | - |
> `Layout.Header` `Layout.Footer` `Layout.Content` API 与 `Layout` 相同
@ -85,19 +85,19 @@ title: Layout
侧边栏。
| 参数 | 说明 | 类型 | 默认值 |
|----------|-----------------------------------------|------------|-------|
| collapsible | 是否可收起 | boolean | false |
| defaultCollapsed | 是否默认收起 | boolean | false |
| reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| breakpoint | 触发响应式布局的断点 | Enum { 'xs', 'sm', 'md', 'lg', 'xl' } | - |
| className | 容器 className | string | - |
| collapsed | 当前收起状态 | boolean | - |
| onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - |
| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 64 |
| collapsible | 是否可收起 | boolean | false |
| defaultCollapsed | 是否默认收起 | boolean | false |
| reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false |
| style | 指定样式 | object | - |
| trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string\|ReactNode | - |
| width | 宽度 | number\|string | 200 |
| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 64 |
| breakpoint | 触发响应式布局的断点 | Enum { 'xs', 'sm', 'md', 'lg', 'xl' } | - |
| style | 指定样式 | object | - |
| className | 容器 className | string | - |
| onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - |
#### breakpoint width

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

@ -11,7 +11,6 @@ title: LocaleProvider
`LocaleProvider` takes use of [context](https://facebook.github.io/react/docs/context.html), a feature of React, to accomplish global effectiveness by wrapping the app only once.
```jsx
import { LocaleProvider } from 'antd';
import enUS from 'antd/lib/locale-provider/en_US';
@ -43,6 +42,6 @@ This component aims for localization of the built-in text, if you want to suppor
## API
Property | Description | Type | Default
-----|-----|-----|------
locale | language package setting, you can find the packages in this path: `antd/lib/locale-provider/` | object | -
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| locale | language package setting, you can find the packages in this path: `antd/lib/locale-provider/` | object | - |

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

@ -12,7 +12,6 @@ title: LocaleProvider
LocaleProvider 使用 React 的 [context](https://facebook.github.io/react/docs/context.html) 特性，只需在应用外围包裹一次即可全局生效。
```jsx
import enUS from 'antd/lib/locale-provider/en_US';
@ -43,6 +42,6 @@ return <LocaleProvider locale={locales.en_US}><App /></LocaleProvider>;
## API
| 参数 | 说明 | 类型 | 默认值 |
|--------|----------------|------------------|--------------|
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| locale | 语言包配置，语言包可到 `antd/lib/locale-provider/` 目录下寻找 | object | - |

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

@ -21,45 +21,44 @@ When need to mention someone or something.
### Mention API
| API | Description | Type |
|----------|---------------|----------|--------------|
| toString | convert ContentState to string | Function(contentState: ContentState): string |
| toContentState (recommended) | convert string to ContentState | Function(value: string): ContentState |
| toEditorState (Backward compatible) | convert string to ContentState | Function(value: string): ContentState |
| getMentions | get mentioned people in current contentState | Function(ContentState: contentState): string[] |
| API | Description | Type |
| --- | ----------- | ---- |
| getMentions | get mentioned people in current contentState | Function(ContentState: contentState): string\[] |
| toContentState (recommended) | convert string to ContentState | Function(value: string): ContentState |
| toEditorState (Backward compatible) | convert string to ContentState | Function(value: string): ContentState |
| toString | convert ContentState to string | Function(contentState: ContentState): string |
### Mention
| Property | Description | Type | Default |
|----------|---------------|----------|--------------|
| suggestions | suggestion content | Array<string\|Mention.Nav> | [] |
| suggestionStyle | style of suggestion container | object | {} |
| onSearchChange | Callback function called when search content changes | function(value:string, trigger: string) | [] |
| onChange | Callback function called when content of input changes | function(contentState: ContentState) | null |
| onSelect | Callback function called when select from suggestions | function(suggestion: string, data?: any) | null |
| notFoundContent| suggestion when suggestions empty | string | '无匹配结果，轻敲空格完成输入' |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| defaultValue | default value | ContentState, you can use `Mention.toContentState` or `Mention.toEditorState` to convert text to `ContentState` | null |
| 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 |
| prefix | character which will trigger Mention to show mention list | string or Array<string> | '@' |
| defaultValue | default value | ContentState, you can use `Mention.toContentState` or `Mention.toEditorState` to convert text to `ContentState` | null |
| value | core state of mention | ContentState | null |
| notFoundContent | suggestion when suggestions empty | string | '无匹配结果，轻敲空格完成输入' |
| placeholder | placeholder of input | string | null |
| 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 |
| onFocus | Callback function called when mention component get focus | functione) | null |
| onBlur | Callback function called when mention component blur | function(e) | null |
| prefix | character which will trigger Mention to show mention list | string or Array<string> | '@' |
| readOnly | Tell if the input is readonly. | boolean | false |
| disabled | Tell if the input is disabled. | 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 | functione) | 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
| Property | Description | Type | Default |
|----------|---------------|----------|--------------|
| focus | Force focus back onto the editor node. | - | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| focus | Force focus back onto the editor node. | - | - |
### Nav
| Property | Description | Type | Default |
|----------|---------------|----------|--------------|
| value | value of suggestion，the value will insert into input filed while selected | string | "" |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| children | suggestion content | object | {} |
| value | value of suggestion，the value will insert into input filed while selected | string | "" |

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

@ -22,44 +22,44 @@ title: Mention
### Mention API
| API | 说明 | 类型 |
|----------|---------------|----------|
| toString | 把 ContentState 转成字符串 | Function(contentState: ContentState): string |
| toContentState(推荐) | 把字符串转成 ContentState | Function(value: string): ContentState |
| toEditorState(兼容) | 把字符串转成 ContentState | Function(value: string): ContentState |
| getMentions | 获取当前 contentState 中提到的人的列表 | Function(contentState: ContentState): string[] |
| API | 说明 | 类型 |
| --- | --- | --- |
| getMentions | 获取当前 contentState 中提到的人的列表 | Function(contentState: ContentState): string\[] |
| toContentState(推荐) | 把字符串转成 ContentState | Function(value: string): ContentState |
| toEditorState(兼容) | 把字符串转成 ContentState | Function(value: string): ContentState |
| toString | 把 ContentState 转成字符串 | Function(contentState: ContentState): string |
### Mention
| 参数 | 说明 | 类型 | 默认值 |
|----------|---------------|----------|--------------|
| suggestions | 建议内容 | Array<string\|Mention.Nav> | [] |
| suggestionStyle | 弹出下拉框样式 | object | {} |
| onSearchChange | 输入框中 @ 变化时回调 | function(value:string, trigger: string) | [] |
| onChange | 输入框内容变化时回调 | function(contentState: ContentState) | null |
| onSelect | 下拉框选择建议时回调 | function(suggestion: string, data?: any) | null |
| notFoundContent| 未找到时的内容 | string | '无匹配结果，轻敲空格完成输入' |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| defaultValue | 默认值 | ContentState, 可以用 `Mention.toContentState(text)` 或 `Mention.toEditorState(text)` 把文字转换成 ContentState | null |
| disabled | 是否禁用状态. | boolean | false |
| getSuggestionContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位 | function() | () => document.body |
| loading | 加载中 | boolean | false |
| multiLines | 多行模式 | boolean | false |
| prefix | 触发弹出下拉框的字符 | string or Array<string> | '@' |
| notFoundContent | 未找到时的内容 | string | '无匹配结果，轻敲空格完成输入' |
| placeholder | 输入框默认文字 | string | null |
| defaultValue | 默认值 | ContentState, 可以用 `Mention.toContentState(text)` 或 `Mention.toEditorState(text)` 把文字转换成 ContentState | null |
| value | 值 | ContentState | null |
| getSuggestionContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位| function() | () => document.body |
| onFocus | 获得焦点时回调 | function(e) | null |
| onBlur | 失去焦点时回调 | function(e) | null |
| prefix | 触发弹出下拉框的字符 | string or Array<string> | '@' |
| readOnly | 是否只读. | boolean | false |
| disabled | 是否禁用状态. | 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 methods
| Property | Description | Type | Default |
|----------|---------------|----------|--------------|
| focus | 强制获得焦点. | - | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| focus | 强制获得焦点. | - | - |
### Nav
| 参数 | 说明 | 类型 | 默认值 |
|----------|---------------|----------|--------------|
| value | 建议值，选择建议时，用此值插入到输入框中 | string | "" |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| children | 建议内容 | object | {} |
| value | 建议值，选择建议时，用此值插入到输入框中 | string | "" |

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

@ -26,50 +26,50 @@ More layouts with navigation: [layout](/components/layout).
### Menu
| Param | Description | Type | Default value |
|----------|---------------|----------|--------------|
| theme | color theme of the menu | string: `light` `dark` | `light` |
| mode | type of the menu; `vertical`, `horizontal`, and `inline` modes are supported | string: `vertical` \| `horizontal` \| `inline` | `vertical` |
| selectable | allow selecting menu items | boolean | true |
| selectedKeys | array with the keys of currently selected menu items | string[] | |
| defaultSelectedKeys | array with the keys of default selected menu items | string[] | |
| openKeys | array with the keys of currently opened sub menus | string[] | |
| defaultOpenKeys | array with the keys of default opened sub menus | | |
| onOpenChange | called when open/close sub menu | function(openKeys: string[]) | noop |
| onSelect | callback executed when a menu item is selected | function({ item, key, selectedKeys }) | none |
| onDeselect | callback executed when a menu item is deselected, only supported for multiple mode | function({ item, key, selectedKeys }) | - |
| onClick | callback executed when a menu item is clicked | function({ item, key, keyPath }) | - |
| style | style of the root node | object | |
| inlineIndent | indent px of inline menu item on each level | number | 24 |
| multiple | Allow selection of multiple items | boolean | false |
| Param | Description | Type | Default value |
| ----- | ----------- | ---- | ------------- |
| defaultOpenKeys | array with the keys of default opened sub menus | | |
| defaultSelectedKeys | array with the keys of default selected menu items | string\[] | |
| 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 to be selected | boolean | true |
| 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 | |
| theme | color theme of the menu | string: `light` `dark` | `light` |
| onClick | callback executed when a menu item is clicked | function({ item, key, keyPath }) | - |
| onDeselect | callback executed when a menu item is deselected, only supported for multiple mode | function({ item, key, selectedKeys }) | - |
| onOpenChange | called when open/close sub menu | function(openKeys: string\[]) | noop |
| onSelect | callback executed when a menu item is selected | function({ item, key, selectedKeys }) | none |
> 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 | |
| Param | Description | Type | Default value |
| ----- | ----------- | ---- | ------------- |
| disabled | whether menu item is disabled or not | boolean | false |
| key | unique id of the menu item | string | |
### Menu.SubMenu
| Param | Description | Type | Default value |
|----------|----------------|----------|--------------|
| 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 | |
| children | sub menus or sub menu items | Array<MenuItem\|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 }) | |
### Menu.ItemGroup
| Param | Description | Type | Default value |
|----------|----------------|----------|--------------|
| title | title of the group | string\|ReactNode | |
| children | sub menu items | MenuItem[] | |
| Param | Description | Type | Default value |
| ----- | ----------- | ---- | ------------- |
| children | sub menu items | MenuItem\[] | |
| title | title of the group | string\|ReactNode | |
### Menu.Divider

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

@ -27,49 +27,49 @@ subtitle: 导航菜单
### Menu
| 参数 | 说明 | 类型 | 默认值 |
|----------|---------------|----------|--------------|
| theme | 主题颜色 | string: `light` `dark` | `light` |
| mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | string: `vertical` `horizontal` `inline` | `vertical` |
| selectedKeys | 当前选中的菜单项 key 数组 | string[] | |
| defaultSelectedKeys | 初始选中的菜单项 key 数组 | string[] | |
| openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string[] | |
| defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | | |
| onOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string[]) | noop |
| onSelect | 被选中时调用 | function({ item, key, selectedKeys }) | 无   |
| onDeselect | 取消选中时调用，仅在 multiple 生效 | function({ item, key, selectedKeys }) | - |
| onClick | 点击 MenuItem 调用此函数 | function({ item, key, keyPath }) | - |
| style | 根节点样式 | object | |
| inlineIndent | inline 模式的菜单缩进宽度 | number | 24 |
| multiple | 是否允许多选 | boolean | false |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | | |
| defaultSelectedKeys | 初始选中的菜单项 key 数组 | string\[] | |
| 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 | |
| theme | 主题颜色 | string: `light` `dark` | `light` |
| onClick | 点击 MenuItem 调用此函数 | function({ item, key, keyPath }) | - |
| onDeselect | 取消选中时调用，仅在 multiple 生效 | function({ item, key, selectedKeys }) | - |
| onOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string\[]) | noop |
| onSelect | 被选中时调用 | function({ item, key, selectedKeys }) | 无   |
> More options in [rc-menu](https://github.com/react-component/menu#api)
### Menu.Item
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------|
| disabled | 是否禁用 | boolean | false |
| key | item 的唯一标志 | string | |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| disabled | 是否禁用 | boolean | false |
| key | item 的唯一标志 | string | |
### Menu.SubMenu
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------|
| disabled | 是否禁用 | boolean | false |
| key | 唯一标志 | string | |
| title | 子菜单项值 | string\|ReactNode | |
| children | 子菜单的菜单项 | Array<MenuItem\|SubMenu> | |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| children | 子菜单的菜单项 | Array&lt;MenuItem\|SubMenu> | |
| disabled | 是否禁用 | boolean | false |
| key | 唯一标志 | string | |
| title | 子菜单项值 | string\|ReactNode | |
| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | |
### Menu.ItemGroup
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------|
| title | 分组标题 | string\|ReactNode | |
| children | 分组的菜单项 | MenuItem[] | |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| children | 分组的菜单项 | MenuItem\[] | |
| title | 分组标题 | string\|ReactNode | |
### Menu.Divider

18
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 before auto-dismiss, in seconds | number | 1.5 |
| onClose | Specify a function that will be called when the message is closed| Function | - |
| Argument | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| content | content of the message | string\|ReactNode | - |
| duration | time before auto-dismiss, in seconds | number | 1.5 |
| onClose | Specify a function that will be called when the message is closed | Function | - |
Methods for global configuration and destruction are also provided:
@ -43,8 +43,8 @@ message.config({
});
```
| Argument | Description | Type | Default |
|------------|------------------------------------|--------------------------|-------------|
| top | distance from top | number | 24px |
| duration | time before auto-dismiss, in seconds | number | 1.5 |
| Argument | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| duration | time before auto-dismiss, in seconds | number | 1.5 |
| getContainer | Return the mount node for Message | () => HTMLElement | () => document.body |
| top | distance from top | number | 24px |

18
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 | 自动关闭的延时，单位秒 | number | 3 |
| onClose | 关闭时触发的回调函数 | Function | - |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| content | 提示内容 | string\|ReactNode | - |
| duration | 自动关闭的延时，单位秒 | number | 3 |
| onClose | 关闭时触发的回调函数 | Function | - |
还提供了全局配置和全局销毁方法：
@ -44,8 +44,8 @@ message.config({
});
```
| 参数 | 说明 | 类型 | 默认值 |
|------------|--------------------|--------------------------|-------------|
| top | 消息距离顶部的位置 | number | 24px |
| duration | 默认自动关闭延时，单位秒 | number | 3 |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| duration | 默认自动关闭延时，单位秒 | number | 3 |
| getContainer | 配置渲染节点的输出位置 | () => HTMLElement | () => document.body |
| top | 消息距离顶部的位置 | number | 24px |

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

@ -16,28 +16,28 @@ and so on.
## API
| Property | Description | Type | Default |
|------------|----------------|------------------|--------------|
| visible | Whether the modal dialog is visible or not | boolean | false |
| confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | false |
| title | The modal dialog's title | string\|ReactNode | - |
| closable | Whether a close (x) button is visible on top right of the modal dialog or not | boolean | true |
| onOk | Specify a function that will be called when a user clicks the OK button | function(e) | - |
| onCancel | Specify a function that will be called when a user clicks mask, close button on top right or Cancel button | function(e) | - |
| width | Width of the modal dialog | string\|number | 520 |
| footer | Footer content, set as `footer={null}` when you don't need default buttons | string\|ReactNode | OK and Cancel buttons |
| okText | Text of the OK button | string | `OK` |
| okType | Button `type` of the OK button | string | `primary` |
| cancelText | Text of the Cancel button | string | `Cancel` |
| maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | boolean | true |
| style | Style of floating layer, typically used at least for adjusting the position. | object | - |
| wrapClassName | The class name of the container of the modal dialog | string | - |
| bodyStyle | Body style for modal body element. Such as height, padding etc. | object | {} |
| maskStyle | Style for modal's mask element. | object | {} |
| mask | Whether show mask or not. | Boolean | true |
| 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 | `Cancel` |
| 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 |
| footer | Footer content, set as `footer={null}` when you don't need default buttons | string\|ReactNode | OK and Cancel buttons |
| 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 | `OK` |
| okType | Button `type` of the OK button | string | `primary` |
| 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) | - |
#### Destroy on close
@ -57,19 +57,19 @@ 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 |
|------------|----------------|------------------|---------------|
| title | Title | string\|ReactNode | - |
| content | Content | string\|ReactNode | - |
| 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 | - |
| 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 | - |
| width | Width of the modal dialog | string\|number | 416 |
| iconType | Icon `type` of the Icon component | string | `question-circle` |
| okText | Text of the OK button | string | `OK` |
| okType | Button `type` of the OK button | string | `primary` |
| cancelText | Text of the Cancel button | string | `Cancel` |
| maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | Boolean | `false` |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| cancelText | Text of the Cancel button | string | `Cancel` |
| content | Content | string\|ReactNode | - |
| iconType | Icon `type` of the Icon component | string | `question-circle` |
| 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` |
| 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 close the modal dialog by the reference.

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

@ -15,28 +15,28 @@ title: Modal
## API
| 参数 | 说明 | 类型 | 默认值 |
|------------|----------------|------------------|--------------|
| visible | 对话框是否可见 | boolean | 无 |
| confirmLoading | 确定按钮 loading | boolean | 无 |
| title | 标题 | string\|ReactNode | 无 |
| closable | 是否显示右上角的关闭按钮 | boolean | true |
| onOk | 点击确定回调 | function(e) | 无 |
| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | 无 |
| width | 宽度 | string\|number | 520 |
| footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer={null}` | string\|ReactNode | 确定取消按钮 |
| okText | 确认按钮文字 | string | 确定 |
| okType | 确认按钮类型 | string | primary |
| cancelText | 取消按钮文字 | string | 取消 |
| maskClosable | 点击蒙层是否允许关闭 | boolean | true |
| style | 可用于设置浮层的样式，调整浮层位置等 | object | - |
| wrapClassName | 对话框外层容器的类名 | string | - |
| bodyStyle | Modal body 样式 | object | {} |
| maskStyle | 遮罩样式 | object | {} |
| mask | 是否展示遮罩 | Boolean | true |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| afterClose | Modal 完全关闭后的回调 | function | 无 |
| bodyStyle | Modal body 样式 | object | {} |
| cancelText | 取消按钮文字 | string | 取消 |
| closable | 是否显示右上角的关闭按钮 | boolean | true |
| confirmLoading | 确定按钮 loading | boolean | 无 |
| footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer={null}` | string\|ReactNode | 确定取消按钮 |
| getContainer | 指定 Modal 挂载的 HTML 节点 | (instance): HTMLElement | () => document.body |
| mask | 是否展示遮罩 | Boolean | true |
| maskClosable | 点击蒙层是否允许关闭 | boolean | true |
| maskStyle | 遮罩样式 | object | {} |
| okText | 确认按钮文字 | string | 确定 |
| okType | 确认按钮类型 | string | primary |
| 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) | 无 |
#### 清空旧数据
@ -55,19 +55,19 @@ title: Modal
以上均为一个函数，参数为 object，具体属性如下：
| 参数 | 说明 | 类型 | 默认值 |
|------------|----------------|------------------|--------------|
| title | 标题 | string\|ReactNode | 无 |
| content | 内容 | string\|ReactNode | 无 |
| onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 |
| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 |
| width | 宽度 | string\|number | 416 |
| iconType | 图标 Icon 类型 | string | question-circle |
| okText | 确认按钮文字 | string | 确定 |
| okType | 确认按钮类型 | string | primary |
| cancelText | 取消按钮文字 | string | 取消 |
| maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| cancelText | 取消按钮文字 | string | 取消 |
| content | 内容 | string\|ReactNode | 无 |
| iconType | 图标 Icon 类型 | string | question-circle |
| maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` |
| okText | 确认按钮文字 | string | 确定 |
| okType | 确认按钮类型 | string | primary |
| title | 标题 | string\|ReactNode | 无 |
| width | 宽度 | string\|number | 416 |
| zIndex | 设置 Modal 的 `z-index` | Number | 1000 |
| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 |
| onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 |
以上函数调用后，会返回一个引用，可以通过该引用关闭弹窗。

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

@ -8,12 +8,13 @@ title: Notification
Display a notification message globally.
## When To Use
To display a notification message at any of the four corners of the viewport. Typically it can be
used in the following cases:
- A notification with complex content.
- A notification providing a feedback based on the user interaction. Or it may show some details
about upcoming steps the user may have to follow.
about upcoming steps the user may have to follow.
- A notification that is pushed by the application.
## API
@ -28,22 +29,23 @@ about upcoming steps the user may have to follow.
The properties of config are as follows:
| Property | Description | Type | Default |
| ----------- | ---------------------------------------- | ----------------- | -------- |
| message | The title of notification box (required) | string\|ReactNode | - |
| description | The content of notification box (required) | string\|ReactNode | - |
| className | Customized CSS class | string | - |
| style | Customized inline style | [React.CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |
| btn | Customized close button | ReactNode | - |
| icon | Customized icon | ReactNode | - |
| key | The unique identifier of the Notification | string | - |
| onClose | Specify a function that will be called when the close button is clicked | Function | - |
| duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 |
| placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| 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 |
| icon | Customized icon | ReactNode | - |
| key | The unique identifier of the Notification | string | - |
| message | The title of notification box (required) | string\|ReactNode | - |
| 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) | - |
| onClose | Specify a function that will be called when the close button is clicked | Function | - |
`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.
- `notification.config(options)`
```js
notification.config({
placement: 'bottomRight',
@ -52,10 +54,10 @@ notification.config({
});
```
| Property | Description | Type | Default |
| ------------ | ---------------------------------------- | -------------- | ------------------- |
| 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 |
| 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 |
| 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 |

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

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

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

@ -18,19 +18,19 @@ A long list can be divided into several pages by `Pagination`, and only one page
<Pagination onChange={onChange} total={50} />
```
Property | Description | Type | Default
-----|-----|-----|------
current | current page number | number | -
defaultCurrent | default initial page number | number | 1
total | total number of data items | number | 0
defaultPageSize | default number of data items per page | number | 10
pageSize | number of data items per page | number | -
onChange | a callback function, executed when the page number is changed, and it takes the resulting page number and pageSize as its arguments | Function(page, pageSize) | noop
showSizeChanger | determine whether `pageSize` can be changed | boolean | false
pageSizeOptions | specify the sizeChanger options | string[] | ['10', '20', '30', '40']
onShowSizeChange | a callback function, executed when `pageSize` is changed | Function(current, size) | noop
showQuickJumper | determine whether you can jump to pages directly | boolean | false
size | specify the size of `Pagination`, can be set to `small` | string | ""
simple | whether to use simple mode | boolean | -
showTotal | to display the total number and range | Function(total, range) | -
itemRender | to customize item innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| current | current page number | number | - |
| defaultCurrent | default initial page number | number | 1 |
| defaultPageSize | default number of data items per page | number | 10 |
| 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'] |
| showQuickJumper | determine whether you can jump to pages directly | boolean | false |
| showSizeChanger | determine whether `pageSize` can be changed | boolean | false |
| 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 | "" |
| total | total number of data items | number | 0 |
| onChange | a callback function, executed when the page number is changed, and it takes the resulting page number and pageSize as its arguments | Function(page, pageSize) | noop |
| onShowSizeChange | a callback function, executed when `pageSize` is changed | Function(current, size) | noop |

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

@ -19,19 +19,19 @@ cols: 1
<Pagination onChange={onChange} total={50} />
```
| 参数 | 说明 | 类型 | 默认值 |
|------------------|------------------------------------|---------------|--------------------------|
| current | 当前页数 | number | - |
| defaultCurrent | 默认的当前页数 | number | 1 |
| total | 数据总数 | number | 0 |
| defaultPageSize | 默认的每页条数 | number | 10 |
| pageSize | 每页条数 | number | - |
| onChange | 页码改变的回调，参数是改变后的页码及每页条数 | Function(page, pageSize) | noop |
| showSizeChanger | 是否可以改变 pageSize | boolean | false |
| pageSizeOptions | 指定每页可以显示多少条 | string[] | ['10', '20', '30', '40'] |
| onShowSizeChange | pageSize 变化的回调 | Function(current, size) | noop |
| showQuickJumper | 是否可以快速跳转至某页 | boolean | false |
| size | 当为「small」时，是小尺寸分页 | string | "" |
| simple | 当添加该属性时，显示为简单分页 | boolean | - |
| showTotal | 用于显示数据总量和当前数据顺序 | Function(total, range) | - |
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| current | 当前页数 | number | - |
| defaultCurrent | 默认的当前页数 | number | 1 |
| defaultPageSize | 默认的每页条数 | number | 10 |
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - |
| pageSize | 每页条数 | number | - |
| pageSizeOptions | 指定每页可以显示多少条 | string\[] | ['10', '20', '30', '40'] |
| showQuickJumper | 是否可以快速跳转至某页 | boolean | false |
| showSizeChanger | 是否可以改变 pageSize | boolean | false |
| showTotal | 用于显示数据总量和当前数据顺序 | Function(total, range) | - |
| simple | 当添加该属性时，显示为简单分页 | boolean | - |
| size | 当为「small」时，是小尺寸分页 | string | "" |
| total | 数据总数 | number | 0 |
| onChange | 页码改变的回调，参数是改变后的页码及每页条数 | Function(page, pageSize) | noop |
| onShowSizeChange | pageSize 变化的回调 | Function(current, size) | noop |

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

@ -14,14 +14,14 @@ The difference with the `confirm` modal dialog is that it's more lightweight tha
## API
| Param | Description | Type | Default value |
|-----------|------------------------------------------|---------------|--------|
| title | title of the confirmation box | string\|ReactNode | - |
| onConfirm | callback of confirmation | function(e) | - |
| onCancel | callback of cancel | function(e) | - |
| okText | text of the Confirm button | string | `Confirm` |
| okType | Button `type` of the Confirm button | string | `primary` |
| cancelText| text of the Cancel button | string | `Cancel` |
| 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) | - |
Consult [Tooltip's documentation](https://ant.design/components/tooltip/#API) to find more APIs.

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

@ -15,14 +15,14 @@ title: Popconfirm
## API
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|---------------|--------|
| title | 确认框的描述 | string\|ReactNode | 无 |
| onConfirm | 点击确认的回调 | function(e) | 无 |
| onCancel | 点击取消的回调 | function(e) | 无 |
| okText | 确认按钮文字 | string | 确定 |
| okType | 确认按钮类型 | string | primary |
| cancelText| 取消按钮文字 | string | 取消 |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| cancelText | 取消按钮文字 | string | 取消 |
| okText | 确认按钮文字 | string | 确定 |
| okType | 确认按钮类型 | string | primary |
| title | 确认框的描述 | string\|ReactNode | 无 |
| onCancel | 点击取消的回调 | function(e) | 无 |
| onConfirm | 点击确认的回调 | function(e) | 无 |
更多属性请参考 [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 |
|-----------|------------------------------------------|---------------|--------|
| title | Title of the card | string\|ReactNode | - |
| content | Content of the card | string\|ReactNode | - |
| Param | Description | Type | Default value |
| ----- | ----------- | ---- | ------------- |
| 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.

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

@ -15,14 +15,13 @@ title: Popover
## API
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|---------------|--------|
| title | 卡片标题 | string\|ReactNode | 无 |
| content | 卡片内容 | string\|ReactNode | 无 |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| content | 卡片内容 | string\|ReactNode | 无 |
| title | 卡片标题 | string\|ReactNode | 无 |
更多属性请参考 [Tooltip](/components/tooltip/#API)。
## 注意
请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。

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

@ -15,16 +15,15 @@ If it will take a long time to complete an operation, you can use `Progress` to
## API
Property | Description | Type | Default
-----|-----|-----|------
type | to set the type, options: `line` `circle` `dashboard`| string | `line`
percent | to set the completion percentage | number | 0
format | template function of the content | function(percent) | `percent => percent + '%'`
status | to set the status of the Progress, options: `success` `exception` `active` | string | -
showInfo | whether to display the progress value and the status icon | boolean | true
strokeWidth `(type=line)` | to set the width of the progress bar, unit: `px` | number | 10
strokeWidth `(type=circle)` | to set the width of the circular progress bar, unit: percentage of the canvas width | number | 6
width `(type=circle)` | to set the canvas width of the circular progress bar, unit: `px` | number | 132
gapDegree `(type=circle)` | the gap degree of half circle, 0 ~ 360 | number | 0
gapPosition `(type=circle)` | the gap position, options: `top` `bottom` `left` `right` | string | `top`
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| format | template function of the content | function(percent) | `percent => percent + '%'` |
| gapDegree `(type=circle)` | the gap degree of half circle, 0 ~ 360 | number | 0 |
| gapPosition `(type=circle)` | the gap position, options: `top` `bottom` `left` `right` | string | `top` |
| 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` `active` | string | - |
| strokeWidth `(type=line)` | to set the width of the progress bar, unit: `px` | number | 10 |
| strokeWidth `(type=circle)` | to set the width of the circular progress bar, unit: percentage of the canvas width | number | 6 |
| type | to set the type, options: `line` `circle` `dashboard` | string | `line` |
| width `(type=circle)` | to set the canvas width of the circular progress bar, unit: `px` | number | 132 |

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

@ -14,18 +14,17 @@ title: Progress
- 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过2秒时；
- 当需要显示一个操作完成的百分比时。
## API
| 属性 | 说明 | 类型 | 默认值 |
|----------|---------------|----------|---------------|
| type | 类型，可选 `line` `circle` `dashboard` | string | line |
| percent | 百分比 | number | 0 |
| format | 内容的模板函数 | function(percent) | `percent => percent + '%'` |
| status | 状态，可选：`success` `exception` `active` | string | - |
| showInfo | 是否显示进度数值或状态图标 | boolean | true |
| strokeWidth `(type=line)` | 进度条线的宽度，单位 px | number | 10 |
| strokeWidth `(type=circle)` | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
| width `(type=circle)` | 圆形进度条画布宽度，单位 px | number | 132 |
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| format | 内容的模板函数 | function(percent) | `percent => percent + '%'` |
| gapDegree `(type=circle)` | 圆形进度条缺口角度，可取值 0 ~ 360 | number | 0 |
| gapPosition `(type=circle)` | 圆形进度条缺口位置 | Enum{ 'top', 'bottom', 'left', 'right' } | `top` |
| percent | 百分比 | number | 0 |
| showInfo | 是否显示进度数值或状态图标 | boolean | true |
| status | 状态，可选：`success` `exception` `active` | string | - |
| strokeWidth `(type=line)` | 进度条线的宽度，单位 px | number | 10 |
| strokeWidth `(type=circle)` | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
| type | 类型，可选 `line` `circle` `dashboard` | string | line |
| width `(type=circle)` | 圆形进度条画布宽度，单位 px | number | 132 |

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

@ -15,22 +15,23 @@ Radio.
### Radio
| Property | Description | Type | optional | Default |
|----------------|------------------------------------------|------------|---------|--------|
| checked | Specifies whether the radio is selected. | boolean | | false |
| defaultChecked | Specifies the initial state: whether or not the radio is selected. | boolean | | false |
| value | According to value for comparison, to determine whether the selected | any | | none |
| disabled | Disable radio | boolean | | false |
| Property | Description | Type | optional | Default |
| -------- | ----------- | ---- | -------- | ------- |
| checked | Specifies whether the radio is selected. | boolean | | false |
| 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 | | none |
### RadioGroup
radio group，wrap a group of `Radio`。
| Property | Description | Type | optional | Default |
|----------------|----------------------------------|-------------------|--------|--------|
| Property | Description | Type | optional | Default |
| -------- | ----------- | ---- | -------- | ------- |
| defaultValue | Default selected value | any | none | none |
| disabled | Disable all radio buttons | boolean | | false |
| name | The `name` property of all `input[type="radio"]` children | string | | none |
| onChange | The callback function that is triggered when the state changes. | Function(e:Event) | none | none |
| value | Used for setting the currently selected value. | any | none | none |
| defaultValue | Default selected value | any | none | none |
| size | Size, only on radio style | string | `large` `default` `small` | `default` |
| options | set children optional | string[] \| Array<{ label: string value: string disabled?: boolean }> | 无 | 无 |
| disabled | Disable all radio buttons | boolean | | false |
| options | set children optional | string\[] \| Array&lt;{ label: string value: string disabled?: boolean }> | 无 | 无 |
| size | Size, only on radio style | string | `large` `default` `small` | `default` |
| value | Used for setting the currently selected value. | any | none | none |
| onChange | The callback function that is triggered when the state changes. | Function(e:Event) | none | none |

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

@ -16,21 +16,21 @@ title: Radio
### Radio
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|----------------|------------------------------------------|------------|---------|--------|
| checked | 指定当前是否选中 | boolean | | false |
| defaultChecked | 初始是否选中 | boolean | | false |
| value | 根据 value 进行比较，判断是否选中 | any | | 无 |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- |
| checked | 指定当前是否选中 | boolean | | false |
| defaultChecked | 初始是否选中 | boolean | | false |
| value | 根据 value 进行比较，判断是否选中 | any | | 无 |
### RadioGroup
单选框组合，用于包裹一组 `Radio`。
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
|----------------|----------------------------------|-------------------|--------|--------|
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| --- | --- | --- | --- | --- |
| defaultValue | 默认选中的值 | any | 无 | 无 |
| name | RadioGroup 下所有 `input[type="radio"]` 的 `name` 属性 | string | | 无 |
| onChange | 选项变化时的回调函数 | Function(e:Event) | 无 | 无 |
| value | 用于设置当前选中的值 | any | 无 | 无 |
| defaultValue | 默认选中的值 | any | 无 | 无 |
| size | 大小，只对按钮样式生效 | string | `large` `default` `small` | `default` |
| options | 以配置形式设置子元素 | string[] \| Array<{ label: string value: string disabled?: boolean }> | 无 | 无 |
| options | 以配置形式设置子元素 | string\[] \| Array&lt;{ label: string value: string disabled?: boolean }> | 无 | 无 |
| size | 大小，只对按钮样式生效 | string | `large` `default` `small` | `default` |
| value | 用于设置当前选中的值 | any | 无 | 无 |
| onChange | 选项变化时的回调函数 | Function(e:Event) | 无 | 无 |

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

@ -13,15 +13,15 @@ Rate component.
## API
| Property | Description | type | Default |
|------------|----------------|-------------------|-------------|
| count | star count | number | 5 |
| value | current value | number | - |
| defaultValue | default value | number | 0 |
| onChange | callback when select value | Function(value: number) | - |
| onHoverChange | callback when hover item | Function(value: number) | - |
| allowHalf | whether to allow semi selection | boolean | false |
| disabled | read only, unable to interact | boolean | false |
| Property | Description | type | Default |
| -------- | ----------- | ---- | ------- |
| allowHalf | whether to allow semi selection | 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 | - |
| value | current value | number | - |
| onChange | callback when select value | Function(value: number) | - |
| onHoverChange | callback when hover item | Function(value: number) | - |

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

@ -14,15 +14,15 @@ title: Rate
## API
| 属性 | 说明 | 类型 | 默认值 |
|------------|----------------|-------------------|-------------|
| count | star 总数 | number | 5 |
| value | 当前数，受控值 | number | - |
| defaultValue | 默认值 | number | 0 |
| onChange | 选择时的回调 | Function(value: number) | - |
| onHoverChange | 鼠标经过时数值变化的回调 | Function(value: number) | - |
| allowHalf | 是否允许半选 | boolean | false |
| disabled | 只读，无法进行交互 | boolean | false |
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| allowHalf | 是否允许半选 | boolean | false |
| character | 自定义字符 | ReactNode | `<Icon type="star" />` |
| className | 自定义样式类名 | string | - |
| count | star 总数 | number | 5 |
| defaultValue | 默认值 | number | 0 |
| disabled | 只读，无法进行交互 | boolean | false |
| style | 自定义样式对象 | object | - |
| value | 当前数，受控值 | number | - |
| onChange | 选择时的回调 | Function(value: number) | - |
| onHoverChange | 鼠标经过时数值变化的回调 | Function(value: number) | - |

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

@ -21,50 +21,50 @@ Select component to select value from options.
### Select props
| Property | Description | Type | Default |
|----------|----------------|----------|--------------|
| value | Current selected option. | string\|string[] | - |
| defaultValue | Initial selected option. | string\|string[] | - |
| mode | Set mode of Select (Support after 2.9) | 'multiple' \| 'tags' \| 'combobox' | - |
| multiple | Allow multiple select (Deprecated after 2.9, use `mode` instead) | boolean | false |
| tags | When tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. (Deprecated after 2.9, use `mode` instead) | boolean |false |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| allowClear | Show clear button. | boolean | false |
| combobox | Enable combobox mode (can not set multiple at the same time). (Deprecated after 2.9, use `mode` instead) | boolean | false |
| allowClear | Show clear button. | 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 |
| onSelect | Called when a option is selected, the params are option's value (or key) and option instance. | function(value, option) | - |
| onDeselect | Called when a option is deselected, the params are option's value (or key) . only called for multiple or tags, effective in multiple or tags mode only. | function(value) | - |
| onChange | Called when select an option or input value change, or value of input is changed in combobox mode | function(value, label) | - |
| onSearch | Callback function that is fired when input changed. | function(value: string) | |
| onBlur | Called when blur | function | - |
| onFocus | Called when focus | function | - |
| placeholder | Placeholder of select | string\|ReactNode | - |
| notFoundContent | Specify content to show when no result matches..| string | 'Not Found' |
| dropdownMatchSelectWidth | Whether dropdown's with is same with select. | boolean | true |
| 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. | string | `children` |
| size | Size of Select input. `default` `large` `small` | string | default |
| showSearch | Whether show search input in single mode.| boolean | false |
| disabled | Whether disabled select | boolean | false |
| defaultActiveFirstOption | Whether active first option by default | boolean | true |
| dropdownStyle | style of dropdown menu | object | - |
| defaultValue | Initial selected option. | string\|string\[] | - |
| disabled | Whether disabled select | boolean | false |
| dropdownClassName | className of dropdown menu | string | - |
| dropdownMatchSelectWidth | Whether dropdown's with is same with select. | boolean | true |
| 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](http://codepen.io/anon/pen/xVBOVQ?editors=001) | 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 |
| tokenSeparators | Separator used to tokenize on tag/multiple mode | string[] | |
| firstActiveValue | Value of action option by default | string\|string[] | - |
| mode | Set mode of Select (Support after 2.9) | 'multiple' \| 'tags' \| 'combobox' | - |
| multiple | Allow multiple select (Deprecated after 2.9, use `mode` instead) | boolean | false |
| 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. | string | `children` |
| placeholder | Placeholder of select | string\|ReactNode | - |
| showSearch | Whether show search input in single mode. | boolean | false |
| size | Size of Select input. `default` `large` `small` | string | default |
| tags | When tagging is enabled the user can select from pre-existing options or create a new tag by picking the first choice, which is what the user has typed into the search box so far. (Deprecated after 2.9, use `mode` instead) | boolean | false |
| tokenSeparators | Separator used to tokenize on tag/multiple mode | string\[] | |
| value | Current selected option. | string\|string\[] | - |
| 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, label) | - |
| onDeselect | Called when a option is deselected, the params are option's value (or key) . only called for multiple or tags, effective in multiple or tags mode only. | function(value) | - |
| onFocus | Called when focus | 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(value, option) | - |
### Option props
| Property | Description | Type | Default |
|----------|----------------|----------|--------------|
| disabled | Disable this option | boolean | false |
| value | default to filter with this property | string | - |
| 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 | |
| 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 | - |
### OptGroup props
| Property | Description | Type | Default |
|----------|----------------|----------|-----------------|
| label | Group label | string\|React.Element | - |
| key | | string | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| key | | string | - |
| label | Group label | string\|React.Element | - |

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

@ -22,52 +22,52 @@ title: Select
### Select props
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------|
| value | 指定当前选中的条目 | string\|string[] | - |
| defaultValue | 指定默认选中的条目 | string\|string[] | - |
| mode | 设置 Select 的模式（2.9 之后支持） | 'multiple' \| 'tags' \| 'combobox' | - |
| multiple | 支持多选（2.9 之后废弃，请使用 `mode`） | boolean | false |
| tags | 可以把随意输入的条目作为 tag，输入项不需要与下拉选项匹配（2.9 之后废弃，请使用 `mode`） | boolean | false |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| allowClear | 支持清除 | boolean | false |
| combobox | 输入框自动提示模式（2.9 之后废弃，请使用 `mode`） | boolean | false |
| allowClear | 支持清除 | boolean | false |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true |
| onSelect | 被选中时调用，参数为选中项的 value (或 key) 值 | function(value, option) | - |
| onDeselect | 取消选中时调用，参数为选中项的 value (或 key) 值，仅在 multiple 或 tags 模式下生效 | function(value) | - |
| onChange | 选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数 | function(value) | - |
| onSearch | 文本框值变化时回调 | function(value: string) | |
| onBlur | 失去焦点的时回调 | function | - |
| onFocus | 获得焦点时回调 | function | - |
| placeholder | 选择框默认文字 | string | - |
| notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true |
| optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索 | string | value |
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` （combobox 模式下为 `value`） |
| size | 选择框大小，可选 `large` `small` | string | default |
| showSearch | 使单选模式可搜索 | boolean | false |
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true |
| defaultValue | 指定默认选中的条目 | string\|string\[] | - |
| disabled | 是否禁用 | boolean | false |
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true
| dropdownStyle | 下拉菜单的 style 属性 | object | - |
| dropdownClassName | 下拉菜单的 className 属性 | string | - |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true |
| dropdownStyle | 下拉菜单的 style 属性 | object | - |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true |
| firstActiveValue | 默认高亮的选项 | string\|string\[] | - |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body |
| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 `{key: string, label: ReactNode}` 的格式 | boolean | false |
| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string[] | |
| firstActiveValue | 默认高亮的选项 | string\|string[] | - |
| mode | 设置 Select 的模式（2.9 之后支持） | 'multiple' \| 'tags' \| 'combobox' | - |
| multiple | 支持多选（2.9 之后废弃，请使用 `mode`） | boolean | false |
| notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' |
| optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索 | string | value |
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` （combobox 模式下为 `value`） |
| placeholder | 选择框默认文字 | string | - |
| showSearch | 使单选模式可搜索 | boolean | false |
| size | 选择框大小，可选 `large` `small` | string | default |
| tags | 可以把随意输入的条目作为 tag，输入项不需要与下拉选项匹配（2.9 之后废弃，请使用 `mode`） | boolean | false |
| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] | |
| value | 指定当前选中的条目 | string\|string\[] | - |
| onBlur | 失去焦点的时回调 | function | - |
| onChange | 选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数 | function(value) | - |
| onDeselect | 取消选中时调用，参数为选中项的 value (或 key) 值，仅在 multiple 或 tags 模式下生效 | function(value) | - |
| onFocus | 获得焦点时回调 | function | - |
| onSearch | 文本框值变化时回调 | function(value: string) | |
| onSelect | 被选中时调用，参数为选中项的 value (或 key) 值 | function(value, option) | - |
> 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentNode}` 将下拉弹层渲染节点固定在触发器的父元素中。
### Option props
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------|
| disabled | 是否禁用 | boolean | false |
| value | 默认根据此属性值进行筛选 | string | - |
| key | 和 value 含义一致。如果 React 需要你设置此项，此项值与 value 的值相同，然后可以省略 value 设置 | string | |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| disabled | 是否禁用 | boolean | false |
| key | 和 value 含义一致。如果 React 需要你设置此项，此项值与 value 的值相同，然后可以省略 value 设置 | string | |
| title | 选中该 Option 后，Select 的 title | string | - |
| value | 默认根据此属性值进行筛选 | string | - |
### OptGroup props
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|-----------------|
| label | 组名 | string\|React.Element | 无 |
| key | | string | - |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| key | | string | - |
| label | 组名 | string\|React.Element | 无 |

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

@ -12,19 +12,19 @@ To input a value in a range.
## API
| Property | Description | Type | Default |
|------------|----------------|-------------|--------------|
| range | dual thumb mode | boolean | false
| min | The minimum value the slider can slide to. | number | 0
| max | The maximum value the slider can slide to | number | 100
| step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be `null`. | number\|null | 1
| marks | Tick mark of Slider, type of key must be `number`, and must in closed interval [min, max] ，each mark can declare its own style. | object | { number: string\|ReactNode } or { number: { style: object, label: string\|ReactNode } }
| dots | Whether the thumb can drag over tick only. | boolean | false
| value | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number[] |
| defaultValue | The default value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number[] | 0 or [0, 0]
| included | Make effect when `marks` not null，`true` means containment and `false` means coordinative | boolean | true
| disabled | If true, the slider will not be interactable. | boolean | false
| vertical | If true, the slider will be vertical. | Boolean | false
| onChange | Callback function that is fired when the user changes the slider's value. | Function(value) | NOOP
| onAfterChange | Fire when `onmouseup` is fired. | Function(value) | NOOP
| tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | Function\|null | IDENTITY
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| defaultValue | The default value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] | 0 or [0, 0] |
| disabled | If true, the slider will not be interactable. | boolean | false |
| dots | Whether the thumb can drag over tick only. | boolean | false |
| included | Make effect when `marks` not null，`true` means containment and `false` means coordinative | boolean | true |
| marks | Tick mark of Slider, type of key must be `number`, and must in closed interval [min, max] ，each mark can declare its own style. | object | { number: string\|ReactNode } or { number: { style: object, label: string\|ReactNode } } |
| max | The maximum value the slider can slide to | number | 100 |
| min | The minimum value the slider can slide to. | number | 0 |
| range | dual thumb mode | boolean | false |
| step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be `null`. | number\|null | 1 |
| tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | Function\|null | IDENTITY |
| value | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] | |
| vertical | If true, the slider will be vertical. | Boolean | false |
| 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 |

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

@ -13,19 +13,19 @@ title: Slider
## API
| 参数 | 说明 | 类型 | 默认值 |
|------------|----------------|-------------|--------------|
| range | 双滑块模式 | boolean | false
| min | 最小值 | number | 0
| max | 最大值 | number | 100
| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 | number\|null | 1
| marks | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式 | object | { number: string\|ReactNode } or { number: { style: object, label: string\|ReactNode } }
| dots | 是否只能拖拽到刻度上 | boolean | false
| value | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number[] |
| defaultValue | 设置初始取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number[] | 0 or [0, 0]
| included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | boolean | true
| disabled | 值为 `true` 时，滑块为禁用状态 | boolean | false
| vertical | 值为 `true` 时，Slider 为垂直方向 | Boolean | false
| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。 | Function(value) | NOOP
| onAfterChange | 与 `onmouseup` 触发时机一致，把当前值作为参数传入。 | Function(value) | NOOP
| tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | Function\|null | IDENTITY
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| defaultValue | 设置初始取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number\[] | 0 or [0, 0] |
| disabled | 值为 `true` 时，滑块为禁用状态 | boolean | false |
| dots | 是否只能拖拽到刻度上 | boolean | false |
| included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | boolean | true |
| marks | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式 | object | { number: string\|ReactNode } or { number: { style: object, label: string\|ReactNode } } |
| max | 最大值 | number | 100 |
| min | 最小值 | number | 0 |
| range | 双滑块模式 | boolean | false |
| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 | number\|null | 1 |
| tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | Function\|null | IDENTITY |
| value | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number\[] | |
| vertical | 值为 `true` 时，Slider 为垂直方向 | Boolean | false |
| onAfterChange | 与 `onmouseup` 触发时机一致，把当前值作为参数传入。 | Function(value) | NOOP |
| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。 | Function(value) | NOOP |

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

@ -12,10 +12,10 @@ When part of the page is waiting for asynchronous data or during a rendering pro
## API
Property | Description | Type | Default Value
---------|-------------|------|--------------
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 | -
delay | specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | -
wrapperClassName | className of wrapper when Spin has children | string | -
| Property | Description | Type | Default Value |
| -------- | ----------- | ---- | ------------- |
| delay | specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | - |
| 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 | - |

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

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

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

@ -25,21 +25,21 @@ When the task is complicated or has a certain sequence in the series of subtasks
The whole of the step bar.
Property | Description | Type | Default
-----|-----|-----|------
current | to set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0
status | to specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process`
size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default`
direction | to specify the direction of the step bar, `horizontal` and `vertical` are currently supported | string | `horizontal`
progressDot | Steps with progress dot style, customize the progress dot by setting it to a function | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| current | to set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0 |
| direction | to specify the direction of the step bar, `horizontal` and `vertical` are currently supported | string | `horizontal` |
| progressDot | Steps with progress dot style, customize the progress dot by setting it to a function | 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` |
### Steps.Step
A single step in the step bar.
Property | Description | Type | Default
-----|-----|-----|------
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 | -
description | description of the step, optional property | string\|ReactNode | -
icon | icon of the step, optional property | string\|ReactNode | -
| 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 | - |

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

@ -26,21 +26,21 @@ title: Steps
整体步骤条。
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------|
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0 |
| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process |
| size | 指定大小，目前支持普通（`default`）和迷你（`small`）| string | default |
| direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | string | horizontal |
| direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | string | horizontal |
| progressDot | 点状步骤条，可以设置为一个 function | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false |
| size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | default |
| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process |
### Steps.Step
步骤条内的每一个步骤。
| 参数 | 说明 | 类型 | 默认值 |
|----------|-----------------------------------------|------------|-------|
| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | wait |
| title | 标题 | string\|ReactNode | - |
| description | 步骤的详情描述，可选 | string\|ReactNode | - |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| description | 步骤的详情描述，可选 | string\|ReactNode | - |
| icon | 步骤图标的类型，可选 | string\|ReactNode | - |
| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | wait |
| title | 标题 | string\|ReactNode | - |

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

@ -11,17 +11,16 @@ Switching Selector.
- If you need to represent the switching between two states or on-off state.
- The difference between `Switch` and `Checkbox` is that `Switch` will trigger a state change directly when you toggle it, while `Checkbox` is generally used for state marking, which should work in conjunction with submit operation.
## API
### Switch
| Property | Description | Type | Default |
| -----|-----|-----|------|
| checked | determine whether the `Switch` is checked | boolean | false |
| -------- | ----------- | ---- | ------- |
| checked | determine whether the `Switch` is checked | boolean | false |
| checkedChildren | content to be shown when the state is checked | string\|ReactNode | |
| defaultChecked | to set the initial state | boolean | false |
| onChange | a callback function, can be executed when the checked state is changing | Function(checked:Boolean) | |
| checkedChildren | content to be shown when the state is checked | string\|ReactNode | |
| unCheckedChildren | content to be shown when the state is unchecked | string\|ReactNode | |
| disabled | Disable switch | boolean | false |
| size | the size of the `Switch`, options: `default` `small` | string | default |
| disabled | Disable switch | boolean | false|
| unCheckedChildren | content to be shown when the state is unchecked | string\|ReactNode | |
| onChange | a callback function, can be executed when the checked state is changing | Function(checked:Boolean) | |

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

@ -10,17 +10,17 @@ title: Switch
## 何时使用
- 需要表示开关状态/两种状态之间的切换时；
- 和 `checkbox `的区别是，切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。
- 和 `checkbox`的区别是，切换 `switch` 会直接触发状态改变，而 `checkbox` 一般用于状态标记，需要和提交操作配合。
## API
### Switch
| 参数 | 说明 | 类型 |默认值 |
|-----------|------------------------------------------|------------|--------|
| checked | 指定当前是否选中 | boolean | false |
| defaultChecked | 初始是否选中 | boolean | false |
| onChange | 变化时回调函数 | Function(checked:Boolean) | |
| checkedChildren | 选中时的内容 | string\|ReactNode | |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| checked | 指定当前是否选中 | boolean | false |
| checkedChildren | 选中时的内容 | string\|ReactNode | |
| defaultChecked | 初始是否选中 | boolean | false |
| size | 开关大小，可选值：`default` `small` | string | default |
| unCheckedChildren | 非选中时的内容 | string\|ReactNode | |
| size | 开关大小，可选值：`default` `small` | string | default |
| onChange | 变化时回调函数 | Function(checked:Boolean) | |

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

@ -50,92 +50,92 @@ const columns = [{
### Table
| Property | Description | Type | Default |
|---------------|--------------------------|-----------------|--------------|
| rowSelection | Row selection [config](#rowSelection) | object | null |
| pagination | Pagination [config](/components/pagination/), hide it by setting it to `false` | object | |
| size | Size of table | `default` \| `middle` \| `small` | `default` |
| dataSource | Data record array to be displayed | any[] | - |
| columns | Columns of table | [ColumnProps](https://git.io/vMMXC)[] | - |
| rowKey | Row's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` |
| rowClassName | Row's className | Function(record, index):string | - |
| expandedRowRender | Expanded container render for each row | Function(record):ReactNode | - |
| defaultExpandedRowKeys | Initial expanded row keys | string[] | - |
| expandedRowKeys | Current expanded row keys | string[] | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| bordered | Whether to show all table borders | boolean | `false` |
| columns | Columns of table | [ColumnProps](https://git.io/vMMXC)\[] | - |
| dataSource | Data record array to be displayed | any\[] | - |
| defaultExpandAllRows | Expand all rows initially | boolean | `false` |
| onExpandedRowsChange | Callback executed when the expanded rows change | Function(expandedRows) | |
| onExpand | Callback executed when the row expand icon is clicked | Function(expanded, record) | |
| onChange | Callback executed when pagination, filters or sorter is changed | Function(pagination, filters, sorter) | |
| loading | Loading status of table | boolean\|[object](https://ant.design/components/spin-cn/#API) ([more](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | `false` |
| locale | i18n text including filter, sort, empty text, etc | object | filterConfirm: 'Ok' <br> filterReset: 'Reset' <br> emptyText: 'No Data' <br> [Default](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) |
| indentSize | Indent size in pixels of tree data | number | 15 |
| onRowClick | Callback executed when a row is clicked | Function(record, index, event) | - |
| onRowDoubleClick| Callback executed when a row is double clicked | Function(record, index, event) | - |
| onRowMouseEnter | Callback executed when mouse enters a row | Function(record, index, event) | - |
| onRowMouseLeave | Callback executed when mouse leaves a row | Function(record, index, event) | - |
| defaultExpandedRowKeys | Initial expanded row keys | string\[] | - |
| expandedRowKeys | Current expanded row keys | string\[] | - |
| expandedRowRender | Expanded container render for each row | Function(record):ReactNode | - |
| footer | Table footer renderer | Function(currentPageData) | |
| indentSize | Indent size in pixels of tree data | number | 15 |
| loading | Loading status of table | boolean\|[object](https://ant.design/components/spin-cn/#API) ([more](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | `false` |
| locale | i18n text including filter, sort, empty text, etc | object | filterConfirm: 'Ok' <br> filterReset: 'Reset' <br> emptyText: 'No Data' <br> [Default](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) |
| pagination | Pagination [config](/components/pagination/), hide it by setting it to `false` | object | |
| rowClassName | Row's className | Function(record, index):string | - |
| rowKey | Row's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` |
| rowSelection | Row selection [config](#rowSelection) | object | null |
| scroll | Whether table can be scrolled in x/y direction, `x` or `y` can be a number that indicates the width and height of table body | object | - |
| showHeader | Whether to show table header | boolean | `true` |
| size | Size of table | `default` \| `middle` \| `small` | `default` |
| title | Table title renderer | Function(currentPageData) | |
| onChange | Callback executed when pagination, filters or sorter is changed | Function(pagination, filters, sorter) | |
| onExpand | Callback executed when the row expand icon is clicked | Function(expanded, record) | |
| onExpandedRowsChange | Callback executed when the expanded rows change | Function(expandedRows) | |
| onRowClick | Callback executed when a row is clicked | Function(record, index, event) | - |
| onRowContextMenu | Callback executed when right click on a row | Function(record, index, event) | - |
| bordered | Whether to show all table borders | boolean | `false` |
| showHeader | Whether to show table header | boolean | `true` |
| footer | Table footer renderer | Function(currentPageData) | |
| title | Table title renderer | Function(currentPageData) | |
| scroll | Whether table can be scrolled in x/y direction, `x` or `y` can be a number that indicates the width and height of table body | object | - |
| onRowDoubleClick | Callback executed when a row is double clicked | Function(record, index, event) | - |
| onRowMouseEnter | Callback executed when mouse enters a row | Function(record, index, event) | - |
| onRowMouseLeave | Callback executed when mouse leaves a row | Function(record, index, event) | - |
### Column
One of the Table `columns` prop for describing the table's columns, Column has the same API.
| Property | Description | Type | Default |
|---------------|--------------------------|-----------------|--------------|
| title | Title of this column | string\|ReactNode | - |
| key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - |
| dataIndex | Display field of the data record, could be set like `a.b.c` | string | - |
| render | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | Function(text, record, index) {} | - |
| filters | Filter menu config | object[] | - |
| onFilter | Callback executed when the confirm filter button is clicked | Function | - |
| filterMultiple | Whether multiple filters can be selected | boolean | `true` |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| className | className of this column | string | - |
| colSpan | Span of this column's title | number | |
| dataIndex | Display field of the data record, could be set like `a.b.c` | string | - |
| filterDropdown | Customized filter overlay | ReactNode | - |
| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - |
| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | function(visible) {} | - |
| filteredValue | Controlled filtered value, filter icon will highlight | string[] | - |
| filtered | Whether the `dataSource` is filtered | boolean | `false` |
| filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - |
| filterIcon | Customized filter icon | ReactNode | `false` |
| sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | Function\|boolean | - |
| colSpan | Span of this column's title | number | |
| width | Width of this column | string\|number | - |
| className | className of this column | string | - |
| fixed | Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean\|string | `false` |
| filterMultiple | Whether multiple filters can be selected | boolean | `true` |
| filters | Filter menu config | object\[] | - |
| fixed | Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean\|string | `false` |
| key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - |
| render | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | Function(text, record, index) {} | - |
| sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | Function\|boolean | - |
| sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean\|string | - |
| title | Title of this column | string\|ReactNode | - |
| width | Width of this column | string\|number | - |
| onCellClick | Callback executed when table cell is clicked | Function(record, event) | - |
| onFilter | Callback executed when the confirm filter button is clicked | Function | - |
| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | function(visible) {} | - |
### ColumnGroup
| Property | Description | Type | Default |
|---------------|--------------------------|-----------------|--------------|
| title | Title of the column group | string\|ReactNode | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| title | Title of the column group | string\|ReactNode | - |
### rowSelection
Properties for row selection.
| Property | Description | Type | Default |
|---------------|--------------------------|-----------------|--------------|
| type | `checkbox` or `radio` | `checkbox` \| `radio` | `checkbox` |
| selectedRowKeys | Controlled selected row keys | string[] | [] |
| onChange | Callback executed when selected rows change | Function(selectedRowKeys, selectedRows) | - |
| getCheckboxProps | Get Checkbox or Radio props | Function(record) | - |
| onSelect | Callback executed when select/deselect one row | Function(record, selected, selectedRows) | - |
| onSelectAll | Callback executed when select/deselect all rows | Function(selected, selectedRows, changeRows) | - |
| onSelectInvert | Callback executed when row selection is inverted | Function(selectedRows) | - |
| selections | Custom selection [config](#rowSelection), only displays default selections when set to `true` | object[]\|boolean | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| getCheckboxProps | Get Checkbox or Radio props | Function(record) | - |
| hideDefaultSelections | Remove the default `Select All` and `Select Invert` selections | boolean | `false` |
| selectedRowKeys | Controlled selected row keys | string\[] | \[] |
| selections | Custom selection [config](#rowSelection), only displays default selections when set to `true` | object\[]\|boolean | - |
| type | `checkbox` or `radio` | `checkbox` \| `radio` | `checkbox` |
| onChange | Callback executed when selected rows change | Function(selectedRowKeys, selectedRows) | - |
| onSelect | Callback executed when select/deselect one row | Function(record, selected, selectedRows) | - |
| onSelectAll | Callback executed when select/deselect all rows | Function(selected, selectedRows, changeRows) | - |
| onSelectInvert | Callback executed when row selection is inverted | Function(selectedRows) | - |
### selection
| Property | Description | Type | Default |
|---------------|--------------------------|-----------------|--------------|
| key | Unique key of this selection | string | - |
| text | Display text of this selection | string\|React.ReactNode | - |
| onSelect | Callback executed when this selection is clicked | Function(changeableRowKeys) | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| key | Unique key of this selection | string | - |
| text | Display text of this selection | string\|React.ReactNode | - |
| onSelect | Callback executed when this selection is clicked | Function(changeableRowKeys) | - |
## Using in TypeScript

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

@ -51,92 +51,92 @@ const columns = [{
### Table
| 参数 | 说明 | 类型 | 默认值 |
|---------------|--------------------------|-----------------|---------|
| rowSelection | 列表项是否可选择，[配置项](#rowSelection) | object | null |
| pagination | 分页器，配置项参考 [pagination](/components/pagination/)，设为 false 时不展示和进行分页 | object | |
| size | 正常或迷你类型，`default` or `small` | string | default |
| dataSource | 数据数组 | any[] | |
| columns | 表格列的配置描述，具体项见下表 | [ColumnProps](https://git.io/vMMXC)[] | - |
| rowKey | 表格行 key 的取值，可以是字符串或一个函数 | string\|Function(record):string | 'key' |
| rowClassName | 表格行的类名 | Function(record, index):string | - |
| expandedRowRender | 额外的展开行 | Function(record):ReactNode | - |
| defaultExpandedRowKeys | 默认展开的行 | string[] | - |
| expandedRowKeys | 展开的行，控制属性 | string[] | - |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| bordered | 是否展示外边框和列边框 | boolean | false |
| columns | 表格列的配置描述，具体项见下表 | [ColumnProps](https://git.io/vMMXC)\[] | - |
| dataSource | 数据数组 | any\[] | |
| defaultExpandAllRows | 初始时，是否展开所有行 | boolean | false |
| onExpandedRowsChange | 展开的行变化时触发 | Function(expandedRows) | |
| onExpand | 点击展开图标时触发 | Function(expanded, record) | |
| onChange | 分页、排序、筛选变化时触发 | Function(pagination, filters, sorter) | |
| loading | 页面是否加载中 | boolean\|[object](https://ant.design/components/spin-cn/#API) ([更多](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | false |
| locale | 默认文案设置，目前包括排序、过滤、空数据文案 | object | filterConfirm: '确定' <br> filterReset: '重置' <br> emptyText: '暂无数据' <br> [默认值](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) |
| indentSize | 展示树形数据时，每层缩进的宽度，以 px 为单位 | number | 15 |
| onRowClick | 点击行时触发 | Function(record, index, event) | - |
| onRowDoubleClick| 双击行时触发 | Function(record, index, event) | - |
| onRowMouseEnter | 鼠标移入行时触发 | Function(record, index, event) | - |
| onRowMouseLeave | 鼠标移出行时触发 | Function(record, index, event) | - |
| defaultExpandedRowKeys | 默认展开的行 | string\[] | - |
| expandedRowKeys | 展开的行，控制属性 | string\[] | - |
| expandedRowRender | 额外的展开行 | Function(record):ReactNode | - |
| footer | 表格尾部 | Function(currentPageData) | |
| indentSize | 展示树形数据时，每层缩进的宽度，以 px 为单位 | number | 15 |
| loading | 页面是否加载中 | boolean\|[object](https://ant.design/components/spin-cn/#API) ([更多](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | false |
| locale | 默认文案设置，目前包括排序、过滤、空数据文案 | object | filterConfirm: '确定' <br> filterReset: '重置' <br> emptyText: '暂无数据' <br> [默认值](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) |
| pagination | 分页器，配置项参考 [pagination](/components/pagination/)，设为 false 时不展示和进行分页 | object | |
| rowClassName | 表格行的类名 | Function(record, index):string | - |
| rowKey | 表格行 key 的取值，可以是字符串或一个函数 | string\|Function(record):string | 'key' |
| rowSelection | 列表项是否可选择，[配置项](#rowSelection) | object | null |
| scroll | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度：`{{ x: true, y: 300 }}` | object | - |
| showHeader | 是否显示表头 | boolean | true |
| size | 正常或迷你类型，`default` or `small` | string | default |
| title | 表格标题 | Function(currentPageData) | |
| onChange | 分页、排序、筛选变化时触发 | Function(pagination, filters, sorter) | |
| onExpand | 点击展开图标时触发 | Function(expanded, record) | |
| onExpandedRowsChange | 展开的行变化时触发 | Function(expandedRows) | |
| onRowClick | 点击行时触发 | Function(record, index, event) | - |
| onRowContextMenu | 右键行时触发 | Function(record, index, event) | - |
| bordered | 是否展示外边框和列边框 | boolean | false |
| showHeader | 是否显示表头 | boolean | true |
| footer | 表格尾部 | Function(currentPageData) | |
| title | 表格标题 | Function(currentPageData) | |
| scroll | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度：`{{ x: true, y: 300 }}` | object | - |
| onRowDoubleClick | 双击行时触发 | Function(record, index, event) | - |
| onRowMouseEnter | 鼠标移入行时触发 | Function(record, index, event) | - |
| onRowMouseLeave | 鼠标移出行时触发 | Function(record, index, event) | - |
### Column
列描述数据对象，是 columns 中的一项，Column 使用相同的 API。
| 参数 | 说明 | 类型 | 默认值 |
|-----------|----------------------------|-----------------|---------|
| title | 列头显示文字 | string\|ReactNode | - |
| key | React 需要的 key，如果已经设置了唯一的 `dataIndex`，可以忽略这个属性 | string | - |
| dataIndex | 列数据在数据项中对应的 key，支持 `a.b.c` 的嵌套写法 | string | - |
| render | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return里面可以设置表格[行/列合并](#components-table-demo-colspan-rowspan) | Function(text, record, index) {} | - |
| filters | 表头的筛选菜单项 | object[] | - |
| onFilter | 本地模式下，确定筛选的运行函数 | Function | - |
| filterMultiple | 是否多选 | boolean | true |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| className | 列的 className | string | - |
| colSpan | 表头列合并,设置为 0 时，不渲染 | number | |
| dataIndex | 列数据在数据项中对应的 key，支持 `a.b.c` 的嵌套写法 | string | - |
| filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | ReactNode | - |
| filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - |
| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - |
| filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string[] | - |
| filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false |
| filterIcon | 自定义 fiter 图标。| ReactNode | false |
| sorter | 排序函数，本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction)，需要服务端排序可设为 true | Function\|boolean | - |
| colSpan | 表头列合并,设置为 0 时，不渲染 | number | |
| width | 列宽度 | string\|number | - |
| className | 列的 className | string | - |
| fixed | 列是否固定，可选 `true`(等效于 left) `'left'` `'right'` | boolean\|string | false |
| filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string\[] | - |
| filterIcon | 自定义 fiter 图标。 | ReactNode | false |
| filterMultiple | 是否多选 | boolean | true |
| filters | 表头的筛选菜单项 | object\[] | - |
| fixed | 列是否固定，可选 `true`(等效于 left) `'left'` `'right'` | boolean\|string | false |
| key | React 需要的 key，如果已经设置了唯一的 `dataIndex`，可以忽略这个属性 | string | - |
| render | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return里面可以设置表格[行/列合并](#components-table-demo-colspan-rowspan) | Function(text, record, index) {} | - |
| sorter | 排序函数，本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction)，需要服务端排序可设为 true | Function\|boolean | - |
| sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 `'ascend'` `'descend'` `false` | boolean\|string | - |
| title | 列头显示文字 | string\|ReactNode | - |
| width | 列宽度 | string\|number | - |
| onCellClick | 单元格点击回调 | Function(record, event) | - |
| onFilter | 本地模式下，确定筛选的运行函数 | Function | - |
| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - |
### ColumnGroup
| 参数 | 说明 | 类型 | 默认值 |
|-----------|----------------------------|-----------------|---------|
| title | 列头显示文字 | string\|ReactNode | - |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| title | 列头显示文字 | string\|ReactNode | - |
### rowSelection
选择功能的配置。
| 参数 | 说明 | 类型 | 默认值 |
|------------------|--------------------------|-----------------|---------------------|
| type | 多选/单选，`checkbox` or `radio` | string | `checkbox` |
| selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | string[] | [] |
| onChange | 选中项发生变化的时的回调 | Function(selectedRowKeys, selectedRows) | - |
| getCheckboxProps | 选择框的默认属性配置 | Function(record) | - |
| onSelect | 用户手动选择/取消选择某列的回调 | Function(record, selected, selectedRows) | - |
| onSelectAll | 用户手动选择/取消选择所有列的回调 | Function(selected, selectedRows, changeRows) | - |
| onSelectInvert | 用户手动选择反选的回调 | Function(selectedRows) | - |
| selections | 自定义选择项 [配置项](#selection), 设为 `true` 时使用默认选择项 | object[]\|boolean | true |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| getCheckboxProps | 选择框的默认属性配置 | Function(record) | - |
| hideDefaultSelections | 去掉『全选』『反选』两个默认选项 | boolean | false |
| selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | string\[] | \[] |
| selections | 自定义选择项 [配置项](#selection), 设为 `true` 时使用默认选择项 | object\[]\|boolean | true |
| type | 多选/单选，`checkbox` or `radio` | string | `checkbox` |
| onChange | 选中项发生变化的时的回调 | Function(selectedRowKeys, selectedRows) | - |
| onSelect | 用户手动选择/取消选择某列的回调 | Function(record, selected, selectedRows) | - |
| onSelectAll | 用户手动选择/取消选择所有列的回调 | Function(selected, selectedRows, changeRows) | - |
| onSelectInvert | 用户手动选择反选的回调 | Function(selectedRows) | - |
### selection
| 参数 | 说明 | 类型 | 默认值 |
|------------------|--------------------------|-----------------|---------------------|
| key | React 需要的 key，建议设置 | string | - |
| text | 选择项显示的文字 | string\|React.ReactNode | - |
| onSelect | 选择项点击回调 | Function(changeableRowKeys) | - |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| key | React 需要的 key，建议设置 | string | - |
| text | 选择项显示的文字 | string\|React.ReactNode | - |
| onSelect | 选择项点击回调 | Function(changeableRowKeys) | - |
## 在 TypeScript 中使用

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

@ -19,26 +19,27 @@ Ant Design has 3 types of Tabs for different situations.
### Tabs
| Property | Description | Type | Default |
|--------------|-----------------------|----------|--------------|
| activeKey | Current TabPane's key| string | - |
| defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set. | string | - |
| onChange | Callback executed when active tab is changed | Function | - |
| onTabClick | Callback executed when tab is clicked | Function | - |
| onPrevClick | Callback executed when prev button is clicked | Function | - |
| onNextClick | Callback executed when next button is clicked | Function | - |
| tabBarExtraContent | Extra content in tab bar | React.ReactNode | - |
| tabBarStyle | Tab bar style object | object | - |
| type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` |
| size | Tab bar size. Only works while `type="line"`. | `default` \| `small` | `default` |
| tabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` |
| onEdit | Callback executed when tab is added or removed. Only works while `type="editable-card"` | (targetKey, action): void | - |
| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | `false` |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| activeKey | Current TabPane's key | string | - |
| animated | Whether to change tabs with animation. Only works while `tabPosition="top"\|"bottom"` | boolean \| {inkBar:boolean, tabPane:boolean} | `true`, `false` when `type="card"` |
| defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set. | string | - |
| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | `false` |
| size | Tab bar size. Only works while `type="line"`. | `default` \| `small` | `default` |
| tabBarExtraContent | Extra content in tab bar | React.ReactNode | - |
| tabBarStyle | Tab bar style object | object | - |
| tabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` |
| type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` |
| onChange | Callback executed when active tab is changed | Function | - |
| onEdit | Callback executed when tab is added or removed. Only works while `type="editable-card"` | (targetKey, action): void | - |
| onNextClick | Callback executed when next button is clicked | Function | - |
| onPrevClick | Callback executed when prev button is clicked | Function | - |
| onTabClick | Callback executed when tab is clicked | Function | - |
### Tabs.TabPane
| Property | Description | Type | Default |
|--------------|-----------------------|----------|--------------|
| key | TabPane's key | string | - |
| tab | Show text in TabPane's head | string\|ReactNode | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false |
| key | TabPane's key | string | - |
| tab | Show text in TabPane's head | string\|ReactNode | - |

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

@ -22,27 +22,27 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
### Tabs
| 参数 | 说明 | 类型 | 默认值 |
|------------------|----------------------------------------------|----------|---------------|
| activeKey | 当前激活 tab 面板的 key | string | 无 |
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板 |
| onChange | 切换面板的回调 | Function | 无 |
| onTabClick | tab 被点击的回调 | Function | 无 |
| onPrevClick | prev 按钮被点击的回调 | Function | 无 |
| onNextClick | next 按钮被点击的回调 | Function | 无 |
| tabBarExtraContent | tab bar 上额外的元素 | React.ReactNode | 无 |
| tabBarStyle | tab bar 的样式对象 | object | - |
| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | 'line' |
| size | 大小，提供 `default` 和 `small` 两种大小，仅当 `type="line"` 时生效。 | string | 'default' |
| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | 'top' |
| onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void | 无 |
| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| activeKey | 当前激活 tab 面板的 key | string | 无 |
| animated | 是否使用动画切换 Tabs，在 `tabPosition=top|bottom` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | true, 当 type="card" 时为 false |
| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | 第一个面板 |
| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |
| size | 大小，提供 `default` 和 `small` 两种大小，仅当 `type="line"` 时生效。 | string | 'default' |
| tabBarExtraContent | tab bar 上额外的元素 | React.ReactNode | 无 |
| tabBarStyle | tab bar 的样式对象 | object | - |
| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | 'top' |
| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | 'line' |
| onChange | 切换面板的回调 | Function | 无 |
| onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void | 无 |
| onNextClick | next 按钮被点击的回调 | Function | 无 |
| onPrevClick | prev 按钮被点击的回调 | Function | 无 |
| onTabClick | tab 被点击的回调 | Function | 无 |
### Tabs.TabPane
| 参数 | 说明 | 类型 | 默认值 |
|------|------------------|-------------------------|--------|
| key | 对应 activeKey | string | 无 |
| tab | 选项卡头显示文字 | string\|ReactNode | 无 |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
| key | 对应 activeKey | string | 无 |
| tab | 选项卡头显示文字 | string\|ReactNode | 无 |

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

@ -16,16 +16,16 @@ Tag for categorizing or markup.
### Tag
| Property | Description | Type | Default |
|--------------|-----------------------|----------|--------------|
| color | Color of the Tag | string | - |
| closable | Whether Tag can be closed | boolean | `false` |
| onClose | Callback executed when tag is closed | (e) => void | - |
| afterClose | Callback executed when close animation is completed | () => void | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| afterClose | Callback executed when close animation is completed | () => void | - |
| closable | Whether Tag can be closed | boolean | `false` |
| color | Color of the Tag | string | - |
| onClose | Callback executed when tag is closed | (e) => void | - |
### Tag.CheckableTag
| Property | Description | Type | Default |
|--------------|-----------------------|----------|--------------|
| checked | Checked status of Tag | boolean | `false` |
| onChange | Callback executed when Tag is checked/unchecked | (checked) => void | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| checked | Checked status of Tag | boolean | `false` |
| onChange | Callback executed when Tag is checked/unchecked | (checked) => void | - |

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

@ -16,16 +16,16 @@ title: Tag
### Tag
| 参数 | 说明 | 类型 | 默认值 |
|----------------|-------------------------------|------|-------|
| color | 标签色 | string | - |
| closable | 标签是否可以关闭 | boolean | false |
| onClose | 关闭时的回调 | (e) => void | - |
| afterClose | 关闭动画完成后的回调 | () => void | - |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| afterClose | 关闭动画完成后的回调 | () => void | - |
| closable | 标签是否可以关闭 | boolean | false |
| color | 标签色 | string | - |
| onClose | 关闭时的回调 | (e) => void | - |
### Tag.CheckableTag
| 参数 | 说明 | 类型 | 默认值 |
|----------------|-------------------------------|------|--------|
| checked | 设置标签的选中状态 | boolean | false |
| onChange | 点击标签时触发的回调 | (checked) => void | - |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| checked | 设置标签的选中状态 | boolean | false |
| onChange | 点击标签时触发的回调 | (checked) => void | - |

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

@ -7,37 +7,39 @@ title: TimePicker
To select/input a time.
## When To Use
--------
* * *
By clicking the input box, you can select a time from a popup panel.
## API
---
* * *
```jsx
import moment from 'moment';
<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />
```
| Property | Description | Type | Default |
|---------------------|-----|-----|-------|
| defaultValue | to set default time | [moment](http://momentjs.com/) | - |
| value | to set time | [moment](http://momentjs.com/) | - |
| defaultOpenValue | to highlight values in panel when there is no selected value | [moment](http://momentjs.com/) | moment() |
| open | whether to popup panel | boolean | false |
| onOpenChange | a callback function which will be called while panel opening/closing | (open: boolean): void | - |
| placeholder | display when there's no value | string | "Select a time" |
| onChange | a callback function, can be executed when the selected time is changing | function(time: moment, timeString: string): void | - |
| format | to set the time format | string | "HH:mm:ss" |
| disabled | determine whether the TimePicker is disabled | boolean | false |
| disabledHours | to specify the hours that cannot be selected | function() | - |
| disabledMinutes | to specify the minutes that cannot be selected | function(selectedHour) | - |
| disabledSeconds | to specify the seconds that cannot be selected | function(selectedHour, selectedMinute) | - |
| hideDisabledOptions | hide the options that can not be selected | boolean | false |
| getPopupContainer | to set the container of the floating layer, while the default is to create a div element in body | function(trigger) | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| addon | called from timepicker panel to render some addon to its bottom | function | - |
| use12Hours | display as 12 hours format, with default format `h:mm:ss a` | boolean | false |
| className | className of picker | string | '' |
| defaultOpenValue | to highlight values in panel when there is no selected value | [moment](http://momentjs.com/) | moment() |
| defaultValue | to set default time | [moment](http://momentjs.com/) | - |
| disabled | determine whether the TimePicker is disabled | boolean | false |
| disabledHours | to specify the hours that cannot be selected | function() | - |
| disabledMinutes | to specify the minutes that cannot be selected | function(selectedHour) | - |
| disabledSeconds | to specify the seconds that cannot be selected | function(selectedHour, selectedMinute) | - |
| format | to set the time format | string | "HH:mm:ss" |
| getPopupContainer | to set the container of the floating layer, while the default is to create a div element in body | function(trigger) | - |
| hideDisabledOptions | hide the options that can not be selected | boolean | false |
| open | whether to popup panel | boolean | false |
| placeholder | display when there's no value | string | "Select a time" |
| popupClassName | className of panel | string | '' |
| use12Hours | display as 12 hours format, with default format `h:mm:ss a` | boolean | false |
| value | to set time | [moment](http://momentjs.com/) | - |
| onChange | a callback function, can be executed when the selected time is changing | function(time: moment, timeString: string): void | - |
| onOpenChange | a callback function which will be called while panel opening/closing | (open: boolean): void | - |
<style>.code-box-demo .ant-time-picker { margin: 0 8px 12px 0; }</style>

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

@ -8,37 +8,39 @@ title: TimePicker
输入或选择时间的控件。
## 何时使用
--------
* * *
当用户需要输入一个时间，可以点击标准输入框，弹出时间面板进行选择。
## API
---
* * *
```jsx
import moment from 'moment';
<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />
```
| 参数 | 说明 | 类型 | 默认值 |
|---------------------|-----|-----|-------|
| defaultValue | 默认时间 | [moment](http://momentjs.com/) | 无 |
| value | 当前时间 | [moment](http://momentjs.com/) | 无 |
| defaultOpenValue | 无选中值时，面板打开时高亮的值 | [moment](http://momentjs.com/) | moment() |
| open | 面板是否打开 | boolean | false |
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean): void | 无 |
| placeholder | 没有值的时候显示的内容 | string | "请选择时间" |
| onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | 无 |
| format | 展示的时间格式 | string | "HH:mm:ss" |
| disabled | 禁用全部操作 | boolean | false |
| disabledHours | 禁止选择部分小时选项 | function() | 无 |
| disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour) | 无 |
| disabledSeconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | 无 |
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false |
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| addon | 选择框底部显示自定义的内容 | function | 无 |
| use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false |
| className | 选择器类名 | string | '' |
| defaultOpenValue | 无选中值时，面板打开时高亮的值 | [moment](http://momentjs.com/) | moment() |
| defaultValue | 默认时间 | [moment](http://momentjs.com/) | 无 |
| disabled | 禁用全部操作 | boolean | false |
| disabledHours | 禁止选择部分小时选项 | function() | 无 |
| disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour) | 无 |
| disabledSeconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | 无 |
| format | 展示的时间格式 | string | "HH:mm:ss" |
| getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false |
| open | 面板是否打开 | boolean | false |
| placeholder | 没有值的时候显示的内容 | string | "请选择时间" |
| popupClassName | 弹出层类名 | string | '' |
| use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false |
| value | 当前时间 | [moment](http://momentjs.com/) | 无 |
| onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | 无 |
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean): void | 无 |
<style>.code-box-demo .ant-time-picker { margin: 0 8px 12px 0; }</style>

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

@ -26,15 +26,15 @@ Vertical display timeline.
Timeline
| Property | Description | Type | Default |
|----------|----------------------------------------|------------|-------|
| pending | Set the last ghost node's existence or its content | boolean\|string\|ReactNode | `false` |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| pending | Set the last ghost node's existence or its content | boolean\|string\|ReactNode | `false` |
### Timeline.Item
Node of timeline
| Property | Description | Type | Default |
|----------|------------------------------------------|------------|-------|
| color | Set the circle's color to `blue`, `red`, `green` or other custom colors | string | `blue` |
| dot | Customize timeline dot | string\|ReactNode | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| color | Set the circle's color to `blue`, `red`, `green` or other custom colors | string | `blue` |
| dot | Customize timeline dot | string\|ReactNode | - |

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

@ -27,15 +27,15 @@ title: Timeline
时间轴。
| 参数 | 说明 | 类型 | 默认值 |
|----------|----------------------------------------|------------|-------|
| pending | 指定最后一个幽灵节点是否存在或内容 | boolean\|string\|ReactNode | false |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| pending | 指定最后一个幽灵节点是否存在或内容 | boolean\|string\|ReactNode | false |
### Timeline.Item
时间轴的每一个节点。
| 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|------------|-------|
| color | 指定圆圈颜色 `blue, red, green`，或自定义的色值 | string | blue |
| dot | 自定义时间轴点 | string\|ReactNode | - |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| color | 指定圆圈颜色 `blue, red, green`，或自定义的色值 | string | blue |
| dot | 自定义时间轴点 | string\|ReactNode | - |

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

@ -13,28 +13,27 @@ A simple text popup tip.
## API
| Property | Description | Type | Default |
|-----------|------------------------------------------|------------|--------|
| title | The text shown in the tooltip | string\|React.Element | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| title | The text shown in the tooltip | string\|React.Element | - |
### Common API
The following APIs are shared by Tooltip, Popconfirm, Popover.
| Property | Description | Type | Default |
|-----------|------------------------------------------|------------|--------|
| placement | The position of the tooltip relative to the target, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` |
| getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body`. Use `getTooltipContainer` if you are using `antd@<2.5.2` | Function(triggerNode) | () => document.body |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| arrowPointAtCenter | Whether the arrow is pointed at the center of target, supported after `antd@1.11+` | boolean | `false` |
| autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | `true` |
| visible | Whether the floating tooltip card is visible or not | boolean | `false` |
| onVisibleChange | Callback executed when visibility of the tooltip card is changed | (visible) => void | - |
| getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body`. Use `getTooltipContainer` if you are using `antd@<2.5.2` | Function(triggerNode) | () => document.body |
| mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0 |
| mouseLeaveDelay | Delay in seconds, before tooltip is hidden on mouse leave | number | 0.1 |
| trigger | Tooltip trigger mode | `hover` \| `focus` \| `click` | `hover` |
| overlayClassName | Class name of the tooltip card | string | - |
| overlayStyle | Style of the tooltip card | object | - |
| overlayClassName | Class name of the tooltip card | string | - |
| overlayStyle | Style of the tooltip card | object | - |
| placement | The position of the tooltip relative to the target, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` |
| trigger | Tooltip trigger mode | `hover` \| `focus` \| `click` | `hover` |
| visible | Whether the floating tooltip card is visible or not | boolean | `false` |
| onVisibleChange | Callback executed when visibility of the tooltip card is changed | (visible) => void | - |
## Note

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

@ -15,27 +15,27 @@ title: Tooltip
## API
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|--------|
| title | 提示文字 | React.ReactNode | 无 |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| title | 提示文字 | React.ReactNode | 无 |
### 共同的 API
以下 API 为 Tooltip、Popconfirm、Popover 共享的 API。
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|--------|
| placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | top |
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上。`2.5.2` 之前请使用 `getTooltipContainer` | Function(triggerNode) | () => document.body |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| arrowPointAtCenter | 箭头是否指向目标元素中心，`antd@1.11+` 支持 | boolean | `false` |
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | `true` |
| visible | 用于手动控制浮层显隐 | boolean | false |
| onVisibleChange | 显示隐藏的回调 | (visible) => void | 无 |
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | `true` |
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上。`2.5.2` 之前请使用 `getTooltipContainer` | Function(triggerNode) | () => document.body |
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0 |
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 |
| trigger | 触发行为，可选 `hover/focus/click` | string | hover |
| overlayClassName | 卡片类名 | string | 无 |
| overlayStyle | 卡片样式 | object | 无 |
| overlayClassName | 卡片类名 | string | 无 |
| overlayStyle | 卡片样式 | object | 无 |
| placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | top |
| trigger | 触发行为，可选 `hover/focus/click` | string | hover |
| visible | 用于手动控制浮层显隐 | boolean | false |
| onVisibleChange | 显示隐藏的回调 | (visible) => void | 无 |
## 注意

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

@ -15,32 +15,33 @@ One or more elements can be selected from either column, one click on the proper
## API
| Property | Description | Type | Default |
|-----------|------------------------------------------|------------|--------|
| dataSource | Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in `targetKeys` prop. | [TransferItem](https://git.io/vMM64)[] | [] |
| render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a React element which is generated from that record. | Function(record) | |
| targetKeys | A set of keys of elements that are listed on the right column. | string[] | [] |
| selectedKeys | A set of keys of selected items. | string[] | [] |
| onChange | A callback function that is executed when the transfer between columns is complete. | (targetKeys, direction, moveKeys): void | |
| onSelectChange | A callback function which is executed when selected items are changed. | (sourceSelectedKeys, targetSelectedKeys): void | |
| onScroll | A callback function which is executed when scroll options list | (direction, event): void | |
| listStyle | A custom CSS style used for rendering the transfer columns. | object | |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| className | A custom CSS class. | string | ['', ''] |
| titles | A set of titles that are sorted from left to right. | string[] | - |
| operations | A set of operations that are sorted from bottom to top. | string[] | ['>', '<'] |
| showSearch | If included, a search box is shown on each column. | boolean | false |
| filterOption | A function to determine whether an item should show in search result list | (inputValue, option): boolean | |
| searchPlaceholder | The hint text of the search box. | string | 'Search here' |
| notFoundContent | Text to display when a column is empty. | string\|ReactNode | 'The list is empty' |
| dataSource | Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in `targetKeys` prop. | [TransferItem](https://git.io/vMM64)\[] | \[] |
| filterOption | A function to determine whether an item should show in search result list | (inputValue, option): boolean | |
| footer | A function used for rendering the footer. | (props): ReactNode | |
| lazy | property of [react-lazy-load](https://github.com/loktar00/react-lazy-load) for lazy rendering items. Turn off it by set to `false`. | object\|boolean | `{ height: 32, offset: 32 }` |
| listStyle | A custom CSS style used for rendering the transfer columns. | object | |
| notFoundContent | Text to display when a column is empty. | string\|ReactNode | 'The list is empty' |
| operations | A set of operations that are sorted from bottom to top. | string\[] | ['>', '<'] |
| render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a React element which is generated from that record. | Function(record) | |
| searchPlaceholder | The hint text of the search box. | string | 'Search here' |
| selectedKeys | A set of keys of selected items. | string\[] | \[] |
| showSearch | If included, a search box is shown on each column. | boolean | false |
| targetKeys | A set of keys of elements that are listed on the right column. | string\[] | \[] |
| titles | A set of titles that are sorted from left to right. | string\[] | - |
| onChange | A callback function that is executed when the transfer between columns is complete. | (targetKeys, direction, moveKeys): void | |
| onScroll | A callback function which is executed when scroll options list | (direction, event): void | |
| onSearchChange | A callback function which is executed when search field are changed | (direction: 'left'\|'right', event: Event): void | - |
| onSelectChange | A callback function which is executed when selected items are changed. | (sourceSelectedKeys, targetSelectedKeys): void | |
## Warning
According the [standard](http://facebook.github.io/react/docs/lists-and-keys.html#keys) of React, the key should always be supplied directly to the elements in the array. In Transfer, the keys should be set on the elements included in `dataSource` array. By default, `key` property is used as an unique identifier.
If there's no `key` in your data, you should use `rowKey` to specify the key that will be used for uniquely identify each element.
```jsx
// eg. your primary key is `uid`
return <Transfer rowKey={record => record.uid} />;

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

@ -17,26 +17,26 @@ title: Transfer
## API
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|--------|
| dataSource | 数据源，其中的数据将会被渲染到左边一栏中，`targetKeys` 中指定的除外。 | [TransferItem](https://git.io/vMM64)[] | [] |
| render | 每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 ReactElement | Function(record) | |
| targetKeys | 显示在右侧框数据的key集合 | string[] | [] |
| selectedKeys | 设置哪些项应该被选中 | string[] | [] |
| onChange | 选项在两栏之间转移时的回调函数 | (targetKeys, direction, moveKeys): void | |
| onSelectChange | 选中项发生改变时的回调函数 | (sourceSelectedKeys, targetSelectedKeys): void | |
| onScroll | 选项列表滚动时的回调函数 | (direction, event): void | |
| listStyle | 两个穿梭框的自定义样式 | object | |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| className | 自定义类 | string | |
| titles | 标题集合，顺序从左至右 | string[] | ['', ''] |
| operations | 操作文案集合，顺序从下至上 | string[] | ['>', '<'] |
| showSearch | 是否显示搜索框 | boolean | false |
| filterOption | 接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。| (inputValue, option): boolean | |
| searchPlaceholder | 搜索框的默认值 | string | '请输入搜索内容' |
| notFoundContent | 当列表为空时显示的内容 | string\|ReactNode | '列表为空' |
| dataSource | 数据源，其中的数据将会被渲染到左边一栏中，`targetKeys` 中指定的除外。 | [TransferItem](https://git.io/vMM64)\[] | \[] |
| filterOption | 接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | (inputValue, option): boolean | |
| footer | 底部渲染函数 | (props): ReactNode | |
| lazy | Transfer 使用了 [react-lazy-load](https://github.com/loktar00/react-lazy-load) 优化性能，这里可以设置相关参数。设为 `false` 可以关闭懒加载。 | object\|boolean | `{ height: 32, offset: 32 }` |
| listStyle | 两个穿梭框的自定义样式 | object | |
| notFoundContent | 当列表为空时显示的内容 | string\|ReactNode | '列表为空' |
| operations | 操作文案集合，顺序从下至上 | string\[] | ['>', '<'] |
| render | 每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 ReactElement | Function(record) | |
| searchPlaceholder | 搜索框的默认值 | string | '请输入搜索内容' |
| selectedKeys | 设置哪些项应该被选中 | string\[] | \[] |
| showSearch | 是否显示搜索框 | boolean | false |
| targetKeys | 显示在右侧框数据的key集合 | string\[] | \[] |
| titles | 标题集合，顺序从左至右 | string\[] | ['', ''] |
| onChange | 选项在两栏之间转移时的回调函数 | (targetKeys, direction, moveKeys): void | |
| onScroll | 选项列表滚动时的回调函数 | (direction, event): void | |
| onSearchChange | 搜索框内容时改变时的回调函数 | (direction: 'left'\|'right', event: Event): void | - |
| onSelectChange | 选中项发生改变时的回调函数 | (sourceSelectedKeys, targetSelectedKeys): void | |
## 注意

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

@ -11,50 +11,49 @@ Tree selection control.
`TreeSelect` is similar to `Select`, but the values are provided in a tree like structure.
Any data whose entries are defined in a hierarchical manner is fit to use this control. Examples of such case may include a corporate hierarchy, a directory structure, and so on.
## API
### Tree props
Property | Description | Type | Default
-----|-----|-----|------
value | To set the current selected treeNode(s). | string\|string[] | -
labelInValue | whether to embed label in value, turn the format of value from `string` to `{key: string, label: ReactNode, halfChecked: string[]} | boolean | false
defaultValue | To set the initial selected treeNode(s). | string\|string[] | -
multiple | Support multiple or not, will be `true` when enable `treeCheckable`. | boolean | false
onSelect | A callback function, can be executed when you select a treeNode. | function(value, node, extra) | -
onChange | A callback function, can be executed when selected treeNodes or input value change | function(value, label, extra) | -
allowClear | Whether allow clear | boolean | false
onSearch | A callback function, can be executed when the search input changes. | function(value: string) | -
placeholder | Placeholder of the select input | string | -
searchPlaceholder | Placeholder of the search input | string | -
dropdownStyle | To set the style of the dropdown menu | object | -
dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width | boolean | true
size | To set the size of the select input, options: `large` `small` | string | 'default'
showSearch | Whether to display a search input in the dropdown menu(valid only in the single mode) | boolean | false
disabled | Disabled or not | boolean | false
showCheckedStrategy | The way show selected item in box. __Default:__ just show child nodes. __`TreeSelect.SHOW_ALL`:__ show all checked treeNodes (include parent treeNode). __`TreeSelect.SHOW_PARENT`:__ show checked treeNodes (just show parent treeNode). | enum { TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD
treeDefaultExpandAll | Whether to expand all treeNodes by default | boolean | false
treeDefaultExpandedKeys | Default expanded treeNodes | string[] | -
treeCheckable | Whether to show checkbox on the treeNodes | boolean | false
treeCheckStrictly | Whether to check nodes precisely (in the `checkable` mode), means parent and child nodes are not associated, and it will make `labelInValue` be true | boolean | false
filterTreeNode | Whether to filter treeNodes by input value. The value of `treeNodeFilterProp` is used for filtering by default. | boolean\|Function(inputValue: string, treeNode: TreeNode) (should return boolean) | Function
treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | 'value'
treeNodeLabelProp | Will render as content of select | string | 'title'
treeData | Data of the treeNodes, manual construction work is no longer needed if this property has been set(ensure the Uniqueness of each value) | array<{ value, label, children, [disabled, disableCheckbox, selectable] }> | []
treeDataSimpleMode | Enable simple mode of treeData.(treeData should like this: [{id:1, pId:0, value:'1', label:"test1",...},...], pId is parent node's id) | false\|Array<{ id: string, pId: string, rootPId: null }> | false
loadData | Load data asynchronously. | function(node) | -
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
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| allowClear | Whether allow clear | boolean | false |
| defaultValue | To set the initial selected treeNode(s). | string\|string\[] | - |
| disabled | Disabled or not | boolean | false |
| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width | boolean | true |
| dropdownStyle | To set the style of the dropdown menu | object | - |
| filterTreeNode | Whether to filter treeNodes by input value. The value of `treeNodeFilterProp` is used for filtering by default. | boolean\|Function(inputValue: string, treeNode: TreeNode) (should return boolean) | Function |
| 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 |
| labelInValue | whether to embed label in value, turn the format of value from `string` to \`{key: string, label: ReactNode, halfChecked: string\[]} \| boolean \| false | | |
| loadData | Load data asynchronously. | function(node) | - |
| multiple | Support multiple or not, will be `true` when enable `treeCheckable`. | boolean | false |
| placeholder | Placeholder of the select input | string | - |
| searchPlaceholder | Placeholder of the search input | string | - |
| showCheckedStrategy | The way show selected item in box. **Default:** just show child nodes. **`TreeSelect.SHOW_ALL`:** show all checked treeNodes (include parent treeNode). **`TreeSelect.SHOW_PARENT`:** show checked treeNodes (just show parent treeNode). | enum { TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD |
| showSearch | Whether to display a search input in the dropdown menu(valid only in the single mode) | boolean | false |
| size | To set the size of the select input, options: `large` `small` | string | 'default' |
| treeCheckable | Whether to show checkbox on the treeNodes | boolean | false |
| treeCheckStrictly | Whether to check nodes precisely (in the `checkable` mode), means parent and child nodes are not associated, and it will make `labelInValue` be true | boolean | false |
| treeData | Data of the treeNodes, manual construction work is no longer needed if this property has been set(ensure the Uniqueness of each value) | array&lt;{ value, label, children, [disabled, disableCheckbox, selectable] }> | \[] |
| treeDataSimpleMode | Enable simple mode of treeData.(treeData should like this: [{id:1, pId:0, value:'1', label:"test1",...},...], pId is parent node's id) | false\|Array&lt;{ id: string, pId: string, rootPId: null }> | false |
| treeDefaultExpandAll | Whether to expand all treeNodes by default | boolean | false |
| treeDefaultExpandedKeys | Default expanded treeNodes | string\[] | - |
| treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | 'value' |
| treeNodeLabelProp | Will render as content of select | string | 'title' |
| value | To set the current selected treeNode(s). | string\|string\[] | - |
| onChange | A callback function, can be executed when selected treeNodes or input value change | function(value, label, extra) | - |
| onSearch | A callback function, can be executed when the search input changes. | function(value: string) | - |
| onSelect | A callback function, can be executed when you select a treeNode. | function(value, node, extra) | - |
### TreeNode props
> We recommend you to use `treeData` rather than `TreeNode`, to avoid the trouble of manual construction.
Property | Description | Type | Default
-----|-----|-----|------
disabled | Disabled or not | boolean | false
disableCheckbox | Disables the checkbox of the treeNode | boolean | false
key | Required property, should be unique in the tree | string | -
value | Will be treated as `treeNodeFilterProp` by default, should be unique in the tree | string | -
title | Content showed on the treeNodes | string\|ReactNode | '---'
isLeaf | Leaf node or not | boolean | false
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| disableCheckbox | Disables the checkbox of the treeNode | boolean | false |
| disabled | Disabled or not | boolean | false |
| isLeaf | Leaf node or not | boolean | false |
| key | Required property, should be unique in the tree | string | - |
| title | Content showed on the treeNodes | string\|ReactNode | '---' |
| value | Will be treated as `treeNodeFilterProp` by default, should be unique in the tree | string | - |

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

@ -15,45 +15,45 @@ title: TreeSelect
### Tree props
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|--------|
| value | 指定当前选中的条目 | string/string[] | - |
| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 value 类型从 `string` 变为 `{key: string, label: ReactNode, halfChecked(treeCheckStrictly 时有效): string[] }` 的格式 | boolean | false |
| defaultValue | 指定默认选中的条目 | string/string[] | - |
| multiple | 支持多选（当设置 treeCheckable 时自动变为true） | boolean | false |
| onSelect | 被选中时调用 | function(value, node, extra) | - |
| onChange | 选中树节点时调用此函数 | function(value, label, extra) | - |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| allowClear | 显示清除按钮 | boolean | false |
| onSearch | 文本框值变化时回调 | function(value: string) | - |
| defaultValue | 指定默认选中的条目 | string/string\[] | - |
| disabled | 是否禁用 | boolean | false |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true |
| dropdownStyle | 下拉菜单的样式 | object | - |
| filterTreeNode | 是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值 | boolean\|Function(inputValue: string, treeNode: TreeNode) (函数需要返回bool值) | Function |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body |
| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 value 类型从 `string` 变为 `{key: string, label: ReactNode, halfChecked(treeCheckStrictly 时有效): string[] }` 的格式 | boolean | false |
| loadData | 异步加载数据 | function(node) | - |
| multiple | 支持多选（当设置 treeCheckable 时自动变为true） | boolean | false |
| placeholder | 选择框默认文字 | string | - |
| searchPlaceholder | 搜索框默认文字 | string | - |
| dropdownStyle | 下拉菜单的样式 | object | - |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽 | boolean | true |
| size | 选择框大小，可选 `large` `small` | string | 'default' |
| showSearch | 在下拉中显示搜索框(仅在单选模式下生效) | boolean | false |
| disabled | 是否禁用 | boolean | false |
| showCheckedStrategy | 定义选中项回填的方式。`TreeSelect.SHOW_ALL`: 显示所有选中节点(包括父节点). `TreeSelect.SHOW_PARENT`: 只显示父节点(当父节点下所有子节点都选中时). 默认只显示子节点. | enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD |
| treeDefaultExpandAll | 默认展开所有树节点 | boolean | false |
| treeDefaultExpandedKeys | 默认展开的树节点 | string[] | - |
| showSearch | 在下拉中显示搜索框(仅在单选模式下生效) | boolean | false |
| size | 选择框大小，可选 `large` `small` | string | 'default' |
| treeCheckable | 显示 checkbox | boolean | false |
| treeCheckStrictly | checkable 状态下节点选择完全受控（父子节点选中状态不再关联），会使得 `labelInValue` 强制为 true | boolean | false |
| filterTreeNode | 是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值 | boolean\|Function(inputValue: string, treeNode: TreeNode) (函数需要返回bool值) | Function |
| treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（value 在整个树范围内唯一） | array&lt;{value, label, children, [disabled, disableCheckbox, selectable]}> | \[] |
| treeDataSimpleMode | 使用简单格式的 treeData，具体设置参考可设置的类型 (此时 treeData 应变为这样的数据结构: [{id:1, pId:0, value:'1', label:"test1",...},...], `pId` 是父节点的 id) | false\|Array&lt;{ id: string, pId: string, rootPId: null }> | false |
| treeDefaultExpandAll | 默认展开所有树节点 | boolean | false |
| treeDefaultExpandedKeys | 默认展开的树节点 | string\[] | - |
| treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | string | 'value' |
| treeNodeLabelProp | 作为显示的 prop 设置 | string | 'title' |
| treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（value 在整个树范围内唯一）| array<{value, label, children, [disabled, disableCheckbox, selectable]}> | [] |
|treeDataSimpleMode | 使用简单格式的 treeData，具体设置参考可设置的类型 (此时 treeData 应变为这样的数据结构: [{id:1, pId:0, value:'1', label:"test1",...},...], `pId` 是父节点的 id) | false\|Array<{ id: string, pId: string, rootPId: null }> | false |
| loadData | 异步加载数据 | function(node) | - |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body |
| value | 指定当前选中的条目 | string/string\[] | - |
| onChange | 选中树节点时调用此函数 | function(value, label, extra) | - |
| onSearch | 文本框值变化时回调 | function(value: string) | - |
| onSelect | 被选中时调用 | function(value, node, extra) | - |
### TreeNode props
> 建议使用 treeData 来代替 TreeNode，免去手工构造麻烦
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|--------|
| disabled | 是否禁用 | boolean | false |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| disableCheckbox | 禁掉 checkbox | boolean | false |
| key | 此项必须设置（其值在整个树范围内唯一） | string | - |
| value | 默认根据此属性值进行筛选（其值在整个树范围内唯一） | string | - |
| title | 树节点显示的内容 | string\|ReactNode | '---' |
| disabled | 是否禁用 | boolean | false |
| isLeaf | 是否是叶子节点 | boolean | false |
| key | 此项必须设置（其值在整个树范围内唯一） | string | - |
| title | 树节点显示的内容 | string\|ReactNode | '---' |
| value | 默认根据此属性值进行筛选（其值在整个树范围内唯一） | string | - |

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

@ -12,44 +12,44 @@ Almost anything can be represented in a tree structure. Examples include directo
### Tree props
| Property | Description | Type | Default |
|----------------|--------------------------------------------------|------------|---------|
|multiple | Allows selecting multiple treeNodes | boolean | false |
|checkable | Adds a `Checkbox` before the treeNodes | boolean | false |
|defaultExpandAll | Whether to expand all treeNodes by default | boolean | false |
|defaultExpandedKeys | Specify the keys of the default expanded treeNodes | string[] | [] |
|expandedKeys |(Controlled) Specifies the keys of the expanded treeNodes | string[] | [] |
|autoExpandParent | Whether to automatically expand a parent treeNode | boolean | true |
|defaultCheckedKeys | Specifies the keys of the default checked treeNodes | string[] | [] |
|checkedKeys |(Controlled) Specifies the keys of the checked treeNodes (PS: When this specifies the key of a treeNode which is also a parent treeNode, all the children treeNodes of will be checked; and vice versa, when it specifies the key of a treeNode which is a child treeNode, its parent treeNode will also be checked. When `checkable` and `checkStrictly` is true, its object has `checked` and `halfChecked` property. Regardless of whether the child or parent treeNode is checked, they won't impact each other. | string[] \| {checked: string[], halfChecked: string[]} | [] |
|checkStrictly| Check treeNode precisely; parent treeNode and children treeNodes are not associated | boolean | false |
|defaultSelectedKeys | Specifies the keys of the default selected treeNodes | string[] | [] |
|selectedKeys |(Controlled) Specifies the keys of the selected treeNodes | string[] | - |
|onExpand | Callback function for when a treeNode is expanded or collapsed | function(expandedKeys, {expanded: bool, node}) | - |
|onCheck | Callback function for when the onCheck event occurs | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | - |
|onSelect | Callback function for when the user clicks a treeNode | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |
|filterTreeNode | Defines a function to filter (highlight) treeNodes. When the function returns `true`, the corresponding treeNode will be highlighted | function(node) | - |
|loadData | Load data asynchronously | function(node)| - |
|onRightClick | Callback function for when the user right clicks a treeNode | function({event, node}) | - |
|draggable | Specifies whether this Tree is draggable (IE > 8) | boolean | false |
|onDragStart | Callback function for when the onDragStart event occurs | function({event, node}) | - |
|onDragEnter | Callback function for when the onDragEnter event occurs | function({event, node, expandedKeys}) | - |
|onDragOver | Callback function for when the onDragOver event occurs | function({event, node}) | - |
|onDragLeave | Callback function for when the onDragLeave event occurs | function({event, node}) | - |
|onDragEnd | Callback function for when the onDragEnd event occurs | function({event, node}) | - |
|onDrop | Callback function for when the onDrop event occurs | function({event, node, dragNode, dragNodesKeys}) | - |
|showLine | Shows a connecting line | boolean | false |
|showIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| autoExpandParent | Whether to automatically expand a parent treeNode | boolean | true |
| checkable | Adds a `Checkbox` before the treeNodes | boolean | false |
| checkedKeys | (Controlled) Specifies the keys of the checked treeNodes (PS: When this specifies the key of a treeNode which is also a parent treeNode, all the children treeNodes of will be checked; and vice versa, when it specifies the key of a treeNode which is a child treeNode, its parent treeNode will also be checked. When `checkable` and `checkStrictly` is true, its object has `checked` and `halfChecked` property. Regardless of whether the child or parent treeNode is checked, they won't impact each other. | string\[] \| {checked: string\[], halfChecked: string\[]} | \[] |
| checkStrictly | Check treeNode precisely; parent treeNode and children treeNodes are not associated | boolean | false |
| defaultCheckedKeys | Specifies the keys of the default checked treeNodes | string\[] | \[] |
| defaultExpandAll | Whether to expand all treeNodes by default | boolean | false |
| defaultExpandedKeys | Specify the keys of the default expanded treeNodes | string\[] | \[] |
| defaultSelectedKeys | Specifies the keys of the default selected treeNodes | string\[] | \[] |
| draggable | Specifies whether this Tree is draggable (IE > 8) | boolean | false |
| expandedKeys | (Controlled) Specifies the keys of the expanded treeNodes | string\[] | \[] |
| filterTreeNode | Defines a function to filter (highlight) treeNodes. When the function returns `true`, the corresponding treeNode will be highlighted | function(node) | - |
| loadData | Load data asynchronously | function(node) | - |
| multiple | Allows selecting multiple treeNodes | boolean | false |
| selectedKeys | (Controlled) Specifies the keys of the selected treeNodes | string\[] | - |
| showIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false |
| showLine | Shows a connecting line | boolean | false |
| onCheck | Callback function for when the onCheck event occurs | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | - |
| onDragEnd | Callback function for when the onDragEnd event occurs | function({event, node}) | - |
| onDragEnter | Callback function for when the onDragEnter event occurs | function({event, node, expandedKeys}) | - |
| onDragLeave | Callback function for when the onDragLeave event occurs | function({event, node}) | - |
| onDragOver | Callback function for when the onDragOver event occurs | function({event, node}) | - |
| onDragStart | Callback function for when the onDragStart event occurs | function({event, node}) | - |
| onDrop | Callback function for when the onDrop event occurs | function({event, node, dragNode, dragNodesKeys}) | - |
| onExpand | Callback function for when a treeNode is expanded or collapsed | function(expandedKeys, {expanded: bool, node}) | - |
| onRightClick | Callback function for when the user right clicks a treeNode | function({event, node}) | - |
| onSelect | Callback function for when the user clicks a treeNode | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |
### TreeNode props
| Property | Description | Type | Default |
|-----------|------------------------------------------|---------|---------|
|disabled | Disables the treeNode | boolean | false |
|disableCheckbox | Disables the checkbox of the treeNode | boolean | false |
|title | Title | string\|ReactNode | '---' |
|key | Used with (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. P.S.: It must be unique in all of treeNodes of the tree! | string | internal calculated position of treeNode |
|isLeaf | Determines if this is a leaf node(effective when `loadData` is specified) | boolean | false |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| disableCheckbox | Disables the checkbox of the treeNode | boolean | false |
| disabled | Disables the treeNode | boolean | false |
| isLeaf | Determines if this is a leaf node(effective when `loadData` is specified) | boolean | false |
| key | Used with (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. P.S.: It must be unique in all of treeNodes of the tree! | string | internal calculated position of treeNode |
| title | Title | string\|ReactNode | '---' |
## Note

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

@ -13,44 +13,44 @@ subtitle: 树形控件
### Tree props
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|--------|
|multiple | 支持点选多个节点（节点本身） | boolean | false |
|checkable | 节点前添加 Checkbox 复选框 | boolean | false |
|defaultExpandAll | 默认展开所有树节点 | boolean | false |
|defaultExpandedKeys | 默认展开指定的树节点 | string[] | [] |
|expandedKeys | （受控）展开指定的树节点 | string[] | [] |
|autoExpandParent | 是否自动展开父节点 | boolean | true |
|defaultCheckedKeys | 默认选中复选框的树节点 | string[] | [] |
|checkedKeys | （受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点key，则子节点自动选中；相应当子节点key都传入，父节点也自动选中。当设置`checkable`和`checkStrictly`，它是一个有`checked`和`halfChecked`属性的对象，并且父子节点的选中与否不再关联 | string[] \| {checked: string[], halfChecked: string[]} | [] |
|checkStrictly| checkable状态下节点选择完全受控（父子节点选中状态不再关联）| boolean | false |
|defaultSelectedKeys | 默认选中的树节点 | string[] | [] |
|selectedKeys | （受控）设置选中的树节点 | string[] | - |
|onExpand | 展开/收起节点时触发 | function(expandedKeys, {expanded: bool, node}) | - |
|onCheck | 点击复选框触发 | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | - |
|onSelect | 点击树节点触发 | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |
|filterTreeNode | 按需筛选树节点（高亮），返回true | function(node) | - |
|loadData | 异步加载数据 | function(node)| - |
|onRightClick | 响应右键点击 | function({event, node}) | - |
|draggable | 设置节点可拖拽（IE>8） | boolean | false |
|onDragStart | 开始拖拽时调用 | function({event, node}) | - |
|onDragEnter | dragenter 触发时调用 | function({event, node, expandedKeys}) | - |
|onDragOver | dragover 触发时调用 | function({event, node}) | - |
|onDragLeave | dragleave 触发时调用 | function({event, node}) | - |
|onDragEnd | dragend 触发时调用 | function({event, node}) | - |
|onDrop | drop 触发时调用 | function({event, node, dragNode, dragNodesKeys}) | - |
|showLine | 是否展示连接线 | boolean | false |
|showIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| autoExpandParent | 是否自动展开父节点 | boolean | true |
| checkable | 节点前添加 Checkbox 复选框 | boolean | false |
| checkedKeys | （受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点key，则子节点自动选中；相应当子节点key都传入，父节点也自动选中。当设置`checkable`和`checkStrictly`，它是一个有`checked`和`halfChecked`属性的对象，并且父子节点的选中与否不再关联 | string\[] \| {checked: string\[], halfChecked: string\[]} | \[] |
| checkStrictly | checkable状态下节点选择完全受控（父子节点选中状态不再关联） | boolean | false |
| defaultCheckedKeys | 默认选中复选框的树节点 | string\[] | \[] |
| defaultExpandAll | 默认展开所有树节点 | boolean | false |
| defaultExpandedKeys | 默认展开指定的树节点 | string\[] | \[] |
| defaultSelectedKeys | 默认选中的树节点 | string\[] | \[] |
| draggable | 设置节点可拖拽（IE>8） | boolean | false |
| expandedKeys | （受控）展开指定的树节点 | string\[] | \[] |
| filterTreeNode | 按需筛选树节点（高亮），返回true | function(node) | - |
| loadData | 异步加载数据 | function(node) | - |
| multiple | 支持点选多个节点（节点本身） | boolean | false |
| selectedKeys | （受控）设置选中的树节点 | string\[] | - |
| showIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false |
| showLine | 是否展示连接线 | boolean | false |
| onCheck | 点击复选框触发 | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | - |
| onDragEnd | dragend 触发时调用 | function({event, node}) | - |
| onDragEnter | dragenter 触发时调用 | function({event, node, expandedKeys}) | - |
| onDragLeave | dragleave 触发时调用 | function({event, node}) | - |
| onDragOver | dragover 触发时调用 | function({event, node}) | - |
| onDragStart | 开始拖拽时调用 | function({event, node}) | - |
| onDrop | drop 触发时调用 | function({event, node, dragNode, dragNodesKeys}) | - |
| onExpand | 展开/收起节点时触发 | function(expandedKeys, {expanded: bool, node}) | - |
| onRightClick | 响应右键点击 | function({event, node}) | - |
| onSelect | 点击树节点触发 | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |
### TreeNode props
| 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|--------|
|disabled | 禁掉响应 | boolean | false |
|disableCheckbox | 禁掉 checkbox | boolean | false |
|title | 标题 | string\|ReactNode | '---' |
|key | 被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意：整个树范围内的所有节点的 key 值不能重复！ | string | 内部计算出的节点位置 |
|isLeaf | 设置为叶子节点(设置了`loadData`时有效) | boolean | false |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| disableCheckbox | 禁掉 checkbox | boolean | false |
| disabled | 禁掉响应 | boolean | false |
| isLeaf | 设置为叶子节点(设置了`loadData`时有效) | boolean | false |
| key | 被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意：整个树范围内的所有节点的 key 值不能重复！ | string | 内部计算出的节点位置 |
| title | 标题 | string\|ReactNode | '---' |
## 注意

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

@ -18,26 +18,26 @@ Uploading is the process of publishing information (web pages, text, pictures, v
> You can consult [jQuery-File-Upload](https://github.com/blueimp/jQuery-File-Upload/wiki) about how to implement server side upload interface.
| Property | Description | Type | Default|
|------------|----------------------------------------------------| ----------- |--------|
| name | The name of uploading file | string | 'file' |
| defaultFileList | Default list of files that have been uploaded. | object[] | - |
| fileList | List of files that have been uploaded (controlled). Here is a common issue [#2423](https://github.com/ant-design/ant-design/issues/2423) when using it | object[] | - |
| action | Required. Uploading URL | string | - |
| data | Uploading params or function which can return uploading params. | object\|function(file) | - |
| headers | Set request headers, valid above IE10. | object | - |
| showUploadList | Whether to show default upload list, could be an object to specify `showPreviewIcon` and `showRemoveIcon` individually | Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean } | true |
| multiple | Whether to support selected multiple file. `IE10+` supported. You can select multiple files with CTRL holding down while multiple is set to be true | boolean | false |
| accept | File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept) | string | - |
| beforeUpload | Hook function which will be executed before uploading. Uploading will be stopped with `false` or a rejected Promise returned. **Warning：this function is not supported in IE9**。 | (file, fileList) => `boolean | Promise` | - |
| Property | Description | Type | Default |
| -------- | ----------- | ---- | ------- |
| accept | File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept) | string | - |
| action | Required. Uploading URL | string | - |
| beforeUpload | Hook function which will be executed before uploading. Uploading will be stopped with `false` or a rejected Promise returned. **Warning：this function is not supported in IE9**。 | (file, fileList) => `boolean | Promise` | - |
| customRequest | override for the default xhr behavior allowing for additional customization and ability to implement your own XMLHttpRequest | Function | - |
| onChange | A callback function, can be executed when uploading state is changing. See [onChange](#onChange) | Function | - |
| listType | Built-in stylesheets, support for three types: `text`, `picture` or `picture-card` | string | 'text'|
| onPreview | A callback function, will be executed when file link or preview icon is clicked. | Function(file) | - |
| onRemove | A callback function, will be executed when removing file button is clicked, remove event will be prevented when return value is `false` or a Promise which resolve(false) or reject. | Function(file): `boolean | Promise` | - |
| supportServerRender | Need to be turned on while the server side is rendering.| boolean | false |
| disabled | disable upload button | boolean | false |
| data | Uploading params or function which can return uploading params. | object\|function(file) | - |
| defaultFileList | Default list of files that have been uploaded. | object\[] | - |
| disabled | disable upload button | boolean | false |
| fileList | List of files that have been uploaded (controlled). Here is a common issue [#2423](https://github.com/ant-design/ant-design/issues/2423) when using it | object\[] | - |
| headers | Set request headers, valid above IE10. | object | - |
| listType | Built-in stylesheets, support for three types: `text`, `picture` or `picture-card` | string | 'text' |
| multiple | Whether to support selected multiple file. `IE10+` supported. You can select multiple files with CTRL holding down while multiple is set to be true | boolean | false |
| name | The name of uploading file | string | 'file' |
| showUploadList | Whether to show default upload list, could be an object to specify `showPreviewIcon` and `showRemoveIcon` individually | Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean } | true |
| supportServerRender | Need to be turned on while the server side is rendering. | boolean | false |
| withCredentials | ajax upload with cookie sent | boolean | false |
| onChange | A callback function, can be executed when uploading state is changing. See [onChange](#onChange) | Function | - |
| onPreview | A callback function, will be executed when file link or preview icon is clicked. | Function(file) | - |
| onRemove | A callback function, will be executed when removing file button is clicked, remove event will be prevented when return value is `false` or a Promise which resolve(false) or reject. | Function(file): `boolean | Promise` | - |
### onChange
@ -75,8 +75,8 @@ Please set property `url` of property `fileList` to control content of link
## customRequest
* https://github.com/react-component/upload#customrequest
- <https://github.com/react-component/upload#customrequest>
## IE note
- [https://github.com/react-component/upload#ie89-note](https://github.com/react-component/upload#ie89-note)
- <https://github.com/react-component/upload#ie89-note>

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

@ -19,26 +19,26 @@ title: Upload
> 服务端上传接口实现可以参考 [jQuery-File-Upload](https://github.com/blueimp/jQuery-File-Upload/wiki)。
| 参数 | 说明 | 类型 | 默认值|
|------------|--------------------------------------------------------------| ----------- |-------|
| name | 发到后台的文件参数名 | string | 'file' |
| defaultFileList | 默认已经上传的文件列表 | object[] | 无 |
| fileList | 已经上传的文件列表（受控），使用此参数时，如果遇到 `onChange` 只调用一次的问题，请参考 [#2423](https://github.com/ant-design/ant-design/issues/2423) | object[] | 无 |
| action | 必选参数, 上传的地址 | string | 无 |
| data | 上传所需参数或返回上传参数的方法 | object\|function(file) | 无 |
| headers | 设置上传的请求头部，IE10 以上有效 | object | 无 |
| showUploadList | 是否展示 uploadList, 可设为一个对象，用于单独设定 showPreviewIcon 和 showRemoveIcon | Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean } | true |
| multiple | 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件。 | boolean | false |
| accept | 接受上传的文件类型, 详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept) | string | 无 |
| beforeUpload | 上传文件之前的钩子，参数为上传的文件，若返回 `false` 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传。**注意：IE9 不支持该方法**。 | (file, fileList) => `boolean | Promise` | 无 |
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| accept | 接受上传的文件类型, 详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept) | string | 无 |
| action | 必选参数, 上传的地址 | string | 无 |
| beforeUpload | 上传文件之前的钩子，参数为上传的文件，若返回 `false` 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传。**注意：IE9 不支持该方法**。 | (file, fileList) => `boolean | Promise` | 无 |
| customRequest | 通过覆盖默认的上传行为，可以自定义自己的上传实现 | Function | 无 |
| onChange | 上传文件改变时的状态，详见 [onChange](#onChange) | Function | 无 |
| listType | 上传列表的内建样式，支持三种基本样式 `text`, `picture` 和 `picture-card` | string | 'text'|
| onPreview | 点击文件链接或预览图标时的回调 | Function(file) | 无 |
| onRemove   | 点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除。               | Function(file): `boolean | Promise` | 无   |
| supportServerRender | 服务端渲染时需要打开这个 | boolean | false |
| disabled | 是否禁用 | boolean | false |
| data | 上传所需参数或返回上传参数的方法 | object\|function(file) | 无 |
| defaultFileList | 默认已经上传的文件列表 | object\[] | 无 |
| disabled | 是否禁用 | boolean | false |
| fileList | 已经上传的文件列表（受控），使用此参数时，如果遇到 `onChange` 只调用一次的问题，请参考 [#2423](https://github.com/ant-design/ant-design/issues/2423) | object\[] | 无 |
| headers | 设置上传的请求头部，IE10 以上有效 | object | 无 |
| listType | 上传列表的内建样式，支持三种基本样式 `text`, `picture` 和 `picture-card` | string | 'text' |
| multiple | 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件。 | boolean | false |
| name | 发到后台的文件参数名 | string | 'file' |
| showUploadList | 是否展示 uploadList, 可设为一个对象，用于单独设定 showPreviewIcon 和 showRemoveIcon | Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean } | true |
| supportServerRender | 服务端渲染时需要打开这个 | boolean | false |
| withCredentials | 上传请求时是否携带 cookie | boolean | false |
| onChange | 上传文件改变时的状态，详见 [onChange](#onChange) | Function | 无 |
| onPreview | 点击文件链接或预览图标时的回调 | Function(file) | 无 |
| onRemove   | 点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除。               | Function(file): `boolean | Promise` | 无   |
### onChange
@ -64,6 +64,7 @@ title: Upload
response: '{"status": "success"}', // 服务端响应内容
}
```
> `antd@1.9.0` 之前，multiple 模式下，此参数为一个对象数组 `[file, ...]`，`antd@1.9.0` 开始无论是否多选，均为一个对象。
2. `fileList` 当前的文件列表。
@ -75,8 +76,8 @@ title: Upload
## customRequest
* https://github.com/react-component/upload#customrequest
- <https://github.com/react-component/upload#customrequest>
## IE note
- [https://github.com/react-component/upload#ie89-note](https://github.com/react-component/upload#ie89-note)
- <https://github.com/react-component/upload#ie89-note>