mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-11 19:42:54 +08:00
Code Issues Actions 41 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 ## API
| Property | Description | Type | Default | | 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 | - | | 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 | | 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`: **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 ## API
| 成员 | 说明 | 类型 | 默认值 | | 成员 | 说明 | 类型 | 默认值 |
|-------------|----------------|--------------------|--------------| | --- | --- | --- | --- |
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | | offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | |
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | | | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | |
| target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window | | target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |
| onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 | | onChange | 固定状态改变时触发的回调函数 | Function(affixed) | 无 |
**注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位： **注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：

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

@ -13,13 +13,13 @@ Alert component for feedback.
## API ## API
| Property | Description | Type | Default | | Property | Description | Type | Default |
|----------- |--------------------------------------------------------- | ---------- |-------| | -------- | ----------- | ---- | ------- |
| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` | | banner | Whether to show as banner | boolean | false |
| closable | Whether Alert can be closed | boolean | - | | closable | Whether Alert can be closed | boolean | - |
| closeText | Close text to show | string\|ReactNode | - | | closeText | Close text to show | string\|ReactNode | - |
| message | Content of Alert | string\|ReactNode | - |
| description | Additional content of Alert | string\|ReactNode | - | | description | Additional content of Alert | string\|ReactNode | - |
| onClose | Callback when Alert is closed | Function | - | | message | Content of Alert | string\|ReactNode | - |
| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true | | showIcon | Whether to show icon | boolean | false, in `banner` mode default is true |
| banner | Whether to show as banner | boolean | false | | 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 ## API
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------- |--------------------------------------------------------- | ---------- |-------| | --- | --- | --- | --- |
| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` | | banner | 是否用作顶部公告 | boolean | false |
| closable | 默认不显示关闭按钮 | boolean | 无 | | closable | 默认不显示关闭按钮 | boolean | 无 |
| closeText | 自定义关闭按钮 | string\|ReactNode | 无 | | closeText | 自定义关闭按钮 | string\|ReactNode | 无 |
| message | 警告提示内容 | string\|ReactNode | 无 | | description | 警告提示的辅助性文字介绍 | string\|ReactNode | 无 |
| description | 警告提示的辅助性文字介绍 | string\|ReactNode | 无 | | message | 警告提示内容 | string\|ReactNode | 无 |
| onClose | 关闭时触发的回调函数 | Function | 无 | | showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true |
| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true | | type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` |
| banner | 是否用作顶部公告 | boolean | false | | 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 ### Anchor Props
| Property | Description | Type | Default | | 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) |
| affix | Fixed mode of Anchor | boolean | false | | 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 | | showInkInFixed | Whether show ink-balls in Fixed mode | boolean | false |
### Link Props ### Link Props
| Property | Description | Type | Default | | Property | Description | Type | Default |
|-------------|----------------|--------------------|--------------| | -------- | ----------- | ---- | ------- |
| href | target of hyperlink | string | | | href | target of hyperlink | string | |
| title | content of hyperlink | string\|ReactNode | | | title | content of hyperlink | string\|ReactNode | |

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

@ -16,17 +16,17 @@ title: Anchor
### Anchor Props ### Anchor Props
| 成员 | 说明 | 类型 | 默认值 | | 成员 | 说明 | 类型 | 默认值 |
|-------------|----------------|--------------------|--------------| | --- | --- | --- | --- |
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | |
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | |
| bounds | 锚点区域边界 | number | 5(px) |
| affix | 固定模式 | boolean | false | | affix | 固定模式 | boolean | false |
| bounds | 锚点区域边界 | number | 5(px) |
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | |
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | |
| showInkInFixed | 固定模式是否显示小圆点 | boolean | false | | showInkInFixed | 固定模式是否显示小圆点 | boolean | false |
### Link Props ### Link Props
| 成员 | 说明 | 类型 | 默认值 | | 成员 | 说明 | 类型 | 默认值 |
|-------------|----------------|--------------------|--------------| | --- | --- | --- | --- |
| href | 锚点链接 | string | | | href | 锚点链接 | string | |
| title | 文字内容 | string\|ReactNode | | | 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} /> <AutoComplete dataSource={dataSource} />
``` ```
| Property | Description | Type | Default | | Property | Description | Type | Default |
|----------------|----------------------------------|------------|--------| | -------- | ----------- | ---- | ------- |
| dataSource | Data source for autocomplete | [DataSourceItemType](https://git.io/vMMKF)[] | | | allowClear | Show clear button, effective in multiple mode only. | boolean | false |
| value | selected option | string\|string[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode }> | - | | backfill | backfill selected item the input when using keyboard | boolean | false |
| 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>> | - |
| children (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement / React.ReactElement<InputProps> | `<Input />` | | 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` | | 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 | | placeholder | placeholder of input | string | - |
| backfill | backfill selected item the input when using keyboard | boolean | false | | 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} /> <AutoComplete dataSource={dataSource} />
``` ```
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------------|----------------------------------|------------|---------| | --- | --- | --- | --- |
| dataSource | 自动完成的数据源 | [DataSourceItemType](https://git.io/vMMKF)[] | | | allowClear | 支持清除, 单选模式有效 | boolean | false |
| 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 |
| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | 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 ## API
| Property | Description | Type | Default | | Property | Description | Type | Default |
|----------- |--------------------------------------------------------- | ---------- |-------| | -------- | ----------- | ---- | ------- |
| shape | the shape of avatar | `circle` \| `square` | `circle` | | icon | the `Icon` type for an icon avatar, see `Icon` Component | string | - |
| size | the size of the avatar | `large` \| `small` \| `default` | `default` | | shape | the shape of avatar | `circle` \| `square` | `circle` |
| src | the address of the image for an image avatar | string | - | | size | the size of the avatar | `large` \| `small` \| `default` | `default` |
| icon | the `Icon` type for an icon avatar, see `Icon` Component | string | - | | 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 ## API
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------- |--------------------------------------------------------- | ---------- | ------- | | --- | --- | --- | --- |
| shape | 指定头像的形状 | Enum{ 'circle', 'square' } | `circle` | | icon | 设置头像的图标类型，参考 `Icon` 组件 | string | - |
| size | 设置头像的大小 | Enum{ 'large', 'small', 'default' } | `default` | | shape | 指定头像的形状 | Enum{ 'circle', 'square' } | `circle` |
| src | 图片类头像的资源地址 | string | - | | size | 设置头像的大小 | Enum{ 'large', 'small', 'default' } | `default` |
| icon | 设置头像的图标类型，参考 `Icon` 组件 | string | - | | src | 图片类头像的资源地址 | string | - |

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

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

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

@ -15,11 +15,11 @@ title: BackTop
## API ## API
> 有默认样式，距离底部 `50px`，可覆盖。 > 有默认样式，距离底部 `50px`，可覆盖。
>
> 自定义样式宽高不大于 40px \* 40px。
> 自定义样式宽高不大于 40px * 40px。 | 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| 参数 | 说明 | 类型 | 默认值 |
|-------------|----------------|--------------------|--------------|
| visibilityHeight | 滚动高度达到此参数值才出现 `BackTop` | number | 400 |
| onClick | 点击按钮的回调函数 | Function | - |
| target | 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | Function | () => window | | 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> </Badge>
``` ```
```jsx ```jsx
<Badge count={5} /> <Badge count={5} />
``` ```
| Property | Description | Type | Default | | Property | Description | Type | Default |
|----------------|-------------------------|------------|---------| | -------- | ----------- | ---- | ------- |
| count | Number to show in badge | number | | | count | Number to show in badge | number | |
| overflowCount | Max count to show | number | 99 | | dot | Whether to display a red dot instead of `count` | boolean | `false` |
| showZero | Whether to show badge when `count` is zero | boolean | `false` | | overflowCount | Max count to show | number | 99 |
| dot | Whether to display a red dot instead of `count` | boolean | `false` | | showZero | Whether to show badge when `count` is zero | boolean | `false` |
| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` | | 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 | `''` | | 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> </Badge>
``` ```
```jsx ```jsx
<Badge count={5} /> <Badge count={5} />
``` ```
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------------|----------------------------------|------------|---------| | --- | --- | --- | --- |
| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number | | | count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number | |
| overflowCount | 展示封顶的数字值 | number | 99 | | dot | 不展示数字，只有一个小红点 | boolean | false |
| showZero | 当数值为 0 时，是否展示 Badge | boolean | false | | overflowCount | 展示封顶的数字值 | number | 99 |
| dot | 不展示数字，只有一个小红点 | boolean | false | | showZero | 当数值为 0 时，是否展示 Badge | boolean | false |
| status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' | | status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' |
| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | string | '' | | 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 ## API
| Property | Description | Type | Optional | Default | | Property | Description | Type | Optional | Default |
|-----------|-----------------------------------|-----------------|---------|--------| | -------- | ----------- | ---- | -------- | ------- |
| routes | The routing stack information of router | object[] | | - | | itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode | | - |
| params | Routing parameters | object | | - | | params | Routing parameters | object | | - |
| separator | Custom separator | string\|ReactNode | | `/` | | routes | The routing stack information of router | object\[] | | - |
| itemRender | Custom item renderer | (route, params, routes, paths) => ReactNode | | - | | separator | Custom separator | string\|ReactNode | | `/` |
> `linkRender` and `nameRender` were removed after `antd@2.0`, please use `itemRender` instead. > `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 ## API
| 参数 | 说明 | 类型 | 可选值 | 默认值 | | 参数 | 说明 | 类型 | 可选值 | 默认值 |
|-----------|-----------------------------------|-----------------|---------|--------| | --- | --- | --- | --- | --- |
| routes | router 的路由栈信息 | object[] | | - | | itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | | - |
| params | 路由的参数 | object | | - | | params | 路由的参数 | object | | - |
| separator | 分隔符自定义 | string\|ReactNode | | '/' | | routes | router 的路由栈信息 | object\[] | | - |
| itemRender | 自定义链接函数，和 react-router 配置使用 | (route, params, routes, paths) => ReactNode | | - | | separator | 分隔符自定义 | string\|ReactNode | | '/' |
> 2.0 之后，`linkRender` 和 `nameRender` 被移除，请使用 `itemRender` 来代替。 > 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`. To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
Property | Description | Type | Default | Property | Description | Type | Default |
-----|-----|-----|------ | -------- | ----------- | ---- | ------- |
type | can be set to `primary` `ghost` `dashed` `danger`(added in 2.7) or omitted (meaning `default`) | string | `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` | 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 | - | icon | set the icon of button, see: Icon component | string | - |
shape | can be set to `circle` or omitted | string | - | loading | set the loading status of button | boolean \| { delay: number } | false |
size | can be set to `small` `large` or omitted | string | `default` | shape | can be set to `circle` or omitted | string | - |
loading | set the loading status of button | boolean \| { delay: number } | false | size | can be set to `small` `large` or omitted | string | `default` |
onClick | set the handler to handle `click` event | function | - | type | can be set to `primary` `ghost` `dashed` `danger`(added in 2.7) or omitted (meaning `default`) | string | `default` |
ghost | make background transparent and invert text and border colors, added in 2.7 | boolean | false | 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. `<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 | - | ghost | 幽灵属性，使按钮背景透明，版本 2.7 中增加 | boolean | false |
htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |
icon | 设置按钮的图标类型 | string | - | icon | 设置按钮的图标类型 | string | - |
shape | 设置按钮形状，可选值为 `circle` 或者不设 | string | - | loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` |
size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default` | shape | 设置按钮形状，可选值为 `circle` 或者不设 | string | - |
loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` | size | 设置按钮大小，可选值为 `small` `large` 或者不设 | string | `default` |
onClick | `click` 事件的 handler | function | - | type | 设置按钮类型，可选值为 `primary` `dashed` `danger`(版本 2.7 中增加) 或者不设 | string | - |
ghost | 幽灵属性，使按钮背景透明，版本 2.7 中增加 | boolean | false | onClick | `click` 事件的 handler | function | - |
`<Button>Hello world!</Button>` 最终会被渲染为 `<button><span>Hello world!</span></button>`，并且除了上表中的属性，其它属性都会直接传到 `<button></button>`。 `<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 | | Property | Description | Type | Default |
|--------------|----------------|----------|--------------| | -------- | ----------- | ---- | ------- |
| value | The current selected date | [moment](http://momentjs.com/) | current date | | dateCellRender | Customize the display of the date cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |
| defaultValue | The date selected by default | [moment](http://momentjs.com/) | default date | | dateFullCellRender | Customize the display of the date cell, the returned content will override the cell | function(date: moment): ReactNode | - |
| mode | The display mode of the calendar | `month` \| `year` | `month` | | defaultValue | The date selected by default | [moment](http://momentjs.com/) | default date |
| 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） | - |
| disabledDate | Function that specifies the dates that cannot be selected | (currentDate: moment) => boolean | - | | 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 ## API
**注意：**Calendar 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。 **注意：**Calendar 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。
@ -32,17 +31,17 @@ moment.locale('zh-cn');
/> />
``` ```
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------|----------|--------------| | --- | --- | --- | --- |
| value | 展示日期 | [moment](http://momentjs.com/) | 当前日期 | | dateCellRender | 自定义渲染日期单元格，返回内容会被追加到单元格 | function(date: moment): ReactNode | 无 |
| defaultValue | 默认展示的日期 | [moment](http://momentjs.com/) | 默认日期 | | dateFullCellRender | 自定义渲染日期单元格，返回内容覆盖单元格 | function(date: moment): ReactNode | 无 |
| mode | 初始模式，`month/year` | string | month | | defaultValue | 默认展示的日期 | [moment](http://momentjs.com/) | 默认日期 |
| 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） | 无 |
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 | | 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 ### Card
| Property | Description | Type | Default | | Property | Description | Type | Default |
|----------|----------------|----------|--------------| | -------- | ----------- | ---- | ------- |
| title | Card title | string\|ReactNode | - | | bodyStyle | Inline style to apply to the card content | object | - |
| 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` |
| 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 | - |
| bodyStyle | Inline style to apply to the card content | object | - | | 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` | | 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 ### Card.Grid
Property | Description | Type | Default | Property | Description | Type | Default |
---------|-------------|------|--------- | -------- | ----------- | ---- | ------- |
className | className of container | string | - | className | className of container | string | - |
style | style object of container | object | - | style | style object of container | object | - |

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

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

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

@ -14,14 +14,14 @@ A carousel component. Scales with its container.
## API ## API
| Property | Description | Type | Default | | Property | Description | Type | Default |
|------------------|----------------------------------------------|----------|---------------------------------| | -------- | ----------- | ---- | ------- |
| effect | Transition effect | `scrollx` \| `fade` | `scrollx` | | afterChange | Callback function called after the current index changes | function(current) | - |
| dots | Whether to show the dots at the bottom of the gallery | boolean | `true` | | autoplay | Whether to scroll automatically | boolean | `false` |
| vertical | Whether to use a vertical display | boolean | `false` | | beforeChange | Callback function called before the current index changes | function(from, to) | - |
| autoplay | Whether to scroll automatically | boolean | `false` | | dots | Whether to show the dots at the bottom of the gallery | boolean | `true` |
| easing | Transition interpolation function name | string | `linear` | | easing | Transition interpolation function name | string | `linear` |
| beforeChange | Callback function called before the current index changes | function(from, to) | - | | effect | Transition effect | `scrollx` \| `fade` | `scrollx` |
| afterChange | Callback function called after the current index changes | function(current) | - | | 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 ## API
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------------------|----------------------------------------------|----------|---------------------------------| | --- | --- | --- | --- |
| effect | 动画效果函数，可取 scrollx, fade | string | scrollx | | afterChange | 切换面板的回调 | function(current) | 无 |
| dots | 是否显示面板指示点 | boolean | true | | autoplay | 是否自动切换 | boolean | false |
| vertical | 垂直显示 | boolean | false | | beforeChange | 切换面板的回调 | function(from, to) | 无 |
| autoplay | 是否自动切换 | boolean | false | | dots | 是否显示面板指示点 | boolean | true |
| easing | 动画效果 | string | linear | | easing | 动画效果 | string | linear |
| beforeChange | 切换面板的回调 | function(from, to) | 无 | | effect | 动画效果函数，可取 scrollx, fade | string | scrollx |
| afterChange | 切换面板的回调 | function(current) | 无 | | 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. Cascade selection box.
## When To Use ## When To Use
- When you need to select from a set of associated data set. Such as province/city/district, company level, things classification. - 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 | | Property | Description | Type | Default |
|------|------|------|--------| | -------- | ----------- | ---- | ------- |
| options | data options of cascade | object | - | | allowClear | whether allow clear | boolean | true |
| defaultValue | initial selected value | [CascaderOptionType](https://git.io/vMMoK)[] |[] | | changeOnSelect | change value on each selection if set to true, see above demo for details | boolean | false |
| 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 | - |
| className | additional css class | string | - | | 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 | - | | popupClassName | additional className of popup overlay | string | - |
| popupPlacement | use preset popup align config from builtinPlacements：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | | 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 | | showSearch | Whether show search input in single mode. | boolean\|object | false |
| notFoundContent | Specify content to show when no result matches. | string | 'Not Found' | | size | input size, one of `large` `default` `small` | string | `default` |
| loadData | To load option lazily, and it cannot work with `showSearch` | `(selectedOptions) => void` | - | | style | additional style | string | - |
| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative.[example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body | | 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`: Fields in `showSearch`:
| Property | Description | Type | Default | | 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` | | | 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` | | | matchInputWidth | Whether the width of result list equals to input's | boolean | |
| sort | Used to sort filtered options. | `function(a, b, inputValue)` | | | render | Used to render filtered options. | `function(inputValue, path): ReactNode` | |
| matchInputWidth | Whether the width of result list equals to input's | boolean | | | sort | Used to sort filtered options. | `function(a, b, inputValue)` | |
<style> <style>
.ant-cascader-picker { .ant-cascader-picker {

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

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

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

@ -15,19 +15,19 @@ Checkbox.
### Checkbox ### Checkbox
| Property | Description | Type | Default | | Property | Description | Type | Default |
|----------|------------------|----------|--------| | -------- | ----------- | ---- | ------- |
| checked | Specifies whether the checkbox is selected. | boolean | false | | checked | Specifies whether the checkbox is selected. | boolean | false |
| defaultChecked | Specifies the initial state: whether or not the checkbox is selected. | boolean | false | | 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) | - | | onChange | The callback function that is triggered when the state changes. | Function(e:Event) | - |
| disabled | Disable checkbox | boolean | false|
### Checkbox Group ### Checkbox Group
| Property | Description | Type | Default | | Property | Description | Type | Default |
|----------|------------------|----------|--------| | -------- | ----------- | ---- | ------- |
| defaultValue | Default selected value | string[] | [] | | 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) | - |
| disabled | Disable all checkboxes | boolean | false | | 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 ### Checkbox
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------|------------------|----------|--------| | --- | --- | --- | --- |
| checked | 指定当前是否选中 | boolean | false | | checked | 指定当前是否选中 | boolean | false |
| defaultChecked | 初始是否选中 | boolean | false | | defaultChecked | 初始是否选中 | boolean | false |
| onChange | 变化时回调函数 | Function(e:Event) | - |
| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false | | indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false |
| onChange | 变化时回调函数 | Function(e:Event) | - |
### Checkbox Group ### Checkbox Group
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------|------------------|----------|--------| | --- | --- | --- | --- |
| defaultValue | 默认选中的选项 | string[] | [] | | defaultValue | 默认选中的选项 | string\[] | \[] |
| value | 指定选中的选项| string[] | [] | | options | 指定可选项 | string\[] | \[] |
| options | 指定可选项 | string[] | [] | | value | 指定选中的选项 | string\[] | \[] |
| onChange | 变化时回调函数 | Function(checkedValue) | - | | 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 ### Collapse
| Property | Description | Type | Default | | 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. | | 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 | - | | defaultActiveKey | Key of the initial active panel | string | - |
| onChange | Callback function executed when active panel is changed | Function | - | | onChange | Callback function executed when active panel is changed | Function | - |
### Collapse.Panel ### Collapse.Panel
| Property | Description | Type | Default | | Property | Description | Type | Default |
|----------|----------------|----------|--------------| | -------- | ----------- | ---- | ------- |
| key | Unique key identifying the panel from among its siblings | string | - |
| header | Title of the panel | string\|ReactNode | - |
| disabled | If `true`, panel cannot be opened or closed | boolean | `false` | | 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 ### Collapse
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------------------|----------------------------------------------|----------|---------------------------------| | --- | --- | --- | --- |
| activeKey | 当前激活 tab 面板的 key| string[]\|string | 默认无，accordion模式下默认第一个元素| | activeKey | 当前激活 tab 面板的 key | string\[]\|string | 默认无，accordion模式下默认第一个元素 |
| defaultActiveKey | 初始化选中面板的 key | string | 无 | | defaultActiveKey | 初始化选中面板的 key | string | 无 |
| onChange | 切换面板的回调 | Function | 无 | | onChange | 切换面板的回调 | Function | 无 |
### Collapse.Panel ### Collapse.Panel
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------------------|-------------------------|--------| | --- | --- | --- | --- |
| key | 对应 activeKey | string | 无 |
| header | 面板头内容 | string\|ReactNode | 无 |
| disabled | 禁用后的面板展开与否将无法通过用户交互改变 | boolean | false | | 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: There are three kinds of picker:
* DatePicker - DatePicker
* MonthPicker - MonthPicker
* RangePicker - RangePicker
**Note:** Part of locale of DatePicker, MonthPicker, RangePicker is read from value. So, please set the locale of moment correctly. **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. The following APIs are shared by DatePicker, MonthPicker, RangePicker.
| Property | Description | Type | Default | | Property | Description | Type | Default |
|--------------|----------------|----------|--------------| | -------- | ----------- | ---- | ------- |
| allowClear | Whether to show clear button | boolean | true | | allowClear | Whether to show clear button | boolean | true |
| disabled | determine whether the DatePicker is disabled | boolean | false |
| className | picker className | string | '' | | className | picker className | string | '' |
| style | to customize the style of the input box | object | {} | | disabled | determine whether the DatePicker is disabled | boolean | false |
| popupStyle | to customize the style of the popup calendar | object | {} | | disabledDate | specify the date that cannot be selected | (currentDate: moment) => boolean | - |
| 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 | - |
| getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - | | 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 | - | | 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 ### DatePicker
| Property | Description | Type | Default | | Property | Description | Type | Default |
|--------------|----------------|----------|--------------| | -------- | ----------- | ---- | ------- |
| value | to set date | [moment](http://momentjs.com/) | - | | defaultValue | to set default 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 |
| disabledTime | to specify the time that cannot be selected | function(date) | - | | 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 | - | | 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 ### MonthPicker
| Property | Description | Type | Default | | Property | Description | Type | Default |
|--------------|----------------|----------|--------------| | -------- | ----------- | ---- | ------- |
| value | to set date | [moment](http://momentjs.com/) | - | | defaultValue | to set default 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" |
| 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) | - |
| monthCellContentRender | Custom month cell content render method | function(date, locale): ReactNode | - | | 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 ### RangePicker
| Property | Description | Type | Default | | 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/)] | - |
| 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()] |
| disabledTime | to specify the time that cannot be selected | function(dates: [moment, moment], partial: `'start'|'end'`) | - | | 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 | - | | 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() | - | | onOk | callback when click ok button | function() | - |
<style> <style>

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

@ -15,9 +15,9 @@ subtitle: 日期选择框
日期类组件包括以下三种形式。 日期类组件包括以下三种形式。
* DatePicker - DatePicker
* MonthPicker - MonthPicker
* RangePicker - RangePicker
**注意：**DatePicker、MonthPicker、RangePicker 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。 **注意：**DatePicker、MonthPicker、RangePicker 部分 locale 是从 value 中读取，所以请先正确设置 moment 的 locale。
@ -35,59 +35,59 @@ moment.locale('zh-cn');
以下 API 为 DatePicker、MonthPicker、RangePicker 共享的 API。 以下 API 为 DatePicker、MonthPicker、RangePicker 共享的 API。
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------|----------|--------------| | --- | --- | --- | --- |
| allowClear | 是否显示清除按钮 | boolean | true | | allowClear | 是否显示清除按钮 | boolean | true |
| disabled | 禁用 | boolean | false | | className | 选择器 className | string | '' |
| className | 选择器 className | string | '' | | disabled | 禁用 | boolean | false |
| style | 自定义输入框样式 | object | {} | | disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 |
| 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 | 无 |
| getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 | | getCalendarContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | 无 |
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
| open | 控制弹层是否展开 | boolean | - | | 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 ### DatePicker
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------|----------|--------------| | --- | --- | --- | --- |
| value | 日期 | [moment](http://momentjs.com/) | 无 | | defaultValue | 默认日期 | [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 |
| disabledTime | 不可选择的时间 | function(date) | 无 | | disabledTime | 不可选择的时间 | function(date) | 无 |
| onOk | 点击确定按钮的回调 | function() | - | | format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | | 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 ### MonthPicker
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------|----------|--------------| | --- | --- | --- | --- |
| value | 日期 | [moment](http://momentjs.com/) | 无 | | defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 |
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 | | format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM" |
| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM" |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - |
| monthCellContentRender | 自定义的月份内容渲染方法 | function(date, locale): ReactNode | - | | monthCellContentRender | 自定义的月份内容渲染方法 | function(date, locale): ReactNode | - |
| value | 日期 | [moment](http://momentjs.com/) | 无 |
| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - |
### RangePicker ### RangePicker
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|--------------|----------------|----------|--------------| | --- | --- | --- | --- |
| value | 日期 | [moment](http://momentjs.com/)[] | 无 | | defaultValue | 默认日期 | [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()] |
| disabledTime | 不可选择的时间 | function(dates: [moment, moment], partial: `'start'|'end'`) | 无 | | 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 | - | | 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() | - | | onOk | 点击确定按钮的回调 | function() | - |
<style> <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 ### Dropdown
| Property | Description | Type | Default | | Property | Description | Type | Default |
|--------------|----------------|----------|--------------| | -------- | ----------- | ---- | ------- |
| trigger | the trigger mode which executes the drop-down action | Array<`click`\|`hover`> | [`hover`] | | disabled | whether the dropdown menu is disabled | boolean | - |
| 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 |
| 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) | - |
| 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) | - |
| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | | 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`. 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`. > 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>`. > Menu of Dropdown is unselectable by default, you can make it selectable via `<Menu selectable>`.
### Dropdown.Button ### Dropdown.Button
| Property | Description | Type | Default | | Property | Description | Type | Default |
|--------------|----------------|----------|--------------| | -------- | ----------- | ---- | ------- |
| type | type of the button, the same as [Button](/components/button) | string | `default` | | disabled | whether the dropdown menu is disabled | boolean | - |
| size | size of the button, the same as [Button](/components/button) | string | `default` | | overlay | the dropdown menu | [Menu](/components/menu) | - |
| 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 | - |
| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | | 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'] | | disabled | 菜单是否禁用 | boolean | - |
| overlay | 菜单 | [Menu](/components/menu) | - |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body | | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body |
| visible | 菜单是否显示 | boolean | - | | overlay | 菜单 | [Menu](/components/menu) | - |
| disabled | 菜单是否禁用 | boolean | - |
| onVisibleChange | 菜单显示状态改变时调用，参数为 visible | Function(visible) | - |
| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | | 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`。 `overlay` 菜单使用 [Menu](/components/menu/)，还包括菜单项 `Menu.Item`，分割线 `Menu.Divider`。
> 注意： Menu.Item 必须设置唯一的 key 属性。 > 注意： Menu.Item 必须设置唯一的 key 属性。
>
> Dropdown 下的 Menu 默认不可选中。如果需要菜单可选中，可以指定 `<Menu selectable>`. > Dropdown 下的 Menu 默认不可选中。如果需要菜单可选中，可以指定 `<Menu selectable>`.
### Dropdown.Button ### Dropdown.Button
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-------------|------------------|--------------------|--------------| | --- | --- | --- | --- |
| type | 按钮类型，和 [Button](/components/button/) 一致 | string | 'default' | | disabled | 菜单是否禁用 | boolean | - |
| size | 按钮大小，和 [Button](/components/button/) 一致 | string | 'default' | | overlay | 菜单 | [Menu](/components/menu/) | - |
| onClick | 点击左侧按钮的回调，和 [Button](/components/button/) 一致 | Function | - |
| trigger | 触发下拉的行为 | Array<'click'\|'hover'> | ['hover'] |
| overlay | 菜单 | [Menu](/components/menu/) | - |
| visible | 菜单是否显示 | boolean | - |
| disabled | 菜单是否禁用 | boolean | - |
| onVisibleChange | 菜单显示状态改变时调用，参数为 visible | Function | - |
| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | | 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/)**。 **more example [rc-form](http://react-component.github.io/form/)**。
| Property | Description | Type | Default Value | | 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 | 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) | |
| hideRequiredMark | Hide required mark of all form items | Boolean | false | | 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) ### Form.create(options)
@ -56,43 +56,42 @@ CustomizedForm = Form.create({})(CustomizedForm);
The following `options` are available: The following `options` are available:
| Property | Description | Type | | 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) |
| mapPropsToFields | Convert props to field value. Usage example: reading the values from Redux store. | Function(props): Object{ fieldName: Object{ value } } | | 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 | | 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: 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`. > Note: Before using `getFieldsValue` `getFieldValue` `setFieldsValue` and so on, please make sure that corresponding field had been registered with `getFieldDecorator`.
| Method | Description | Type | | Method | Description | Type |
|-----------|------------------------------------------|------------| | ------ | ----------- | ---- |
| getFieldsValue | Get the specified fields' values. If you don't specify a parameter, you will get all fields' values. | Function([fieldNames: string[]]) | | getFieldDecorator | Two-way binding for form, please read below for details. | |
| 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` |
| getFieldError | Get the error of a field. | Function(name) | | 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[]]) | | 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) | | 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 | | 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 | | 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[]]) | | 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. | | | 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 | | Method | Description | Type | Default |
|-----|-----|------|-------| | ------ | ----------- | ---- | ------- |
| options.first | If `true`, every field will stop validation at first failed rule | boolean | false | | 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.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 | {} | | 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) ### 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: 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 #### Special attention
1. `getFieldDecorator` can not be used to decorate stateless component. 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 #### getFieldDecorator(id, options) parameters
| Property | Description | Type | Default Value | | Property | Description | Type | Default Value |
|-----------|-----------------------------------------|------|---------------| | -------- | ----------- | ---- | ------------- |
| id | The unique identifier is required. support [nested fields format](https://github.com/react-component/form/pull/48). | string | | | 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 |
| options.exclusive | Whether it is exclusive with other controls, particularly for Radio. | boolean | false | | 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.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)。 More option at [rc-form option](https://github.com/react-component/form#option-object)。
### Form.Item ### Form.Item
Note: 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 | - 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.
| 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) | | | Property | Description | Type | Default Value |
| 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 | | | 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 | | | 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 | | 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 | | | 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 | | wrapperCol | The layout for input controls, same as `labelCol` | [object](https://ant.design/components/grid/#Col) | |
| colon | Used with `label`, whether to display `:` after label text. | boolean | true |
### Validation Rules ### Validation Rules
Property | Description | Type | Default Value | Property | Description | Type | Default Value |
---------|-------------|------|-------------- | -------- | ----------- | ---- | ------------- |
message | validation error message | string | - | enum | validate a value from a list of possible values | string | - |
type | built-in validation type, [available options](https://github.com/yiminghe/async-validator#type) | string | 'string' | len | validate an exact length of a field | number | - |
required | indicates whether field is required | boolean | `false` | max | validate a max length of a field | number | - |
whitespace | treat required fields that only contain whitespace as errors | boolean | `false` | message | validation error message | string | - |
len | validate an exact length of a field | number | - | min | validate a min length of a field | number | - |
min | validate a min length of a field | number | - | pattern | validate from a regular expression | RegExp | - |
max | validate a max length of a field | number | - | required | indicates whether field is required | boolean | `false` |
enum | validate a value from a list of possible values | string | - | transform | transform a value before validation | function(value) => transformedValue:any | - |
pattern | validate from a regular expression | RegExp | - | type | built-in validation type, [available options](https://github.com/yiminghe/async-validator#type) | string | 'string' |
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) | - |
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). 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> </style>
## Using in TypeScript ## Using in TypeScript
```jsx ```jsx
@ -180,4 +179,4 @@ interface UserFormProps extends FormComponentProps {
class UserForm extends React.Component<UserFormProps, any> { 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/)**。 **更多示例参考 [rc-form](http://react-component.github.io/form/)**。
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|-------| | --- | --- | --- | --- |
| form | 经 `Form.create()` 包装过的组件会自带 `this.props.form` 属性，直接传给 Form 即可。1.7.0 之后无需设置 | object | 无 | | 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 | | 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) ### Form.create(options)
@ -58,10 +58,10 @@ CustomizedForm = Form.create({})(CustomizedForm);
`options` 的配置项如下。 `options` 的配置项如下。
| 参数 | 说明 | 类型 | | 参数 | 说明 | 类型 |
|-----------|------------------------------------------|------------| | --- | --- | --- |
| onFieldsChange | 当 `Form.Item` 子节点的值发生改变时触发，可以把对应的值转存到 Redux store | Function(props, fields) |
| mapPropsToFields | 把父组件的属性映射到表单项上（可用于把 Redux store 中的值读出） | Function(props): Object{ fieldName: Object{ value } } | | mapPropsToFields | 把父组件的属性映射到表单项上（可用于把 Redux store 中的值读出） | Function(props): Object{ fieldName: Object{ value } } |
| onFieldsChange | 当 `Form.Item` 子节点的值发生改变时触发，可以把对应的值转存到 Redux store | Function(props, fields) |
| onValuesChange | 任一表单域的值发生改变时的回调 | (props, values) => void | | onValuesChange | 任一表单域的值发生改变时的回调 | (props, values) => void |
经过 `Form.create` 包装的组件将会自带 `this.props.form` 属性，`this.props.form` 提供的 API 如下： 经过 `Form.create` 包装的组件将会自带 `this.props.form` 属性，`this.props.form` 提供的 API 如下：
@ -69,27 +69,27 @@ CustomizedForm = Form.create({})(CustomizedForm);
> 注意：使用 `getFieldsValue` `getFieldValue` `setFieldsValue` 等时，应确保对应的 field 已经用 `getFieldDecorator` 注册过了。 > 注意：使用 `getFieldsValue` `getFieldValue` `setFieldsValue` 等时，应确保对应的 field 已经用 `getFieldDecorator` 注册过了。
| 方法      | 说明                                     | 类型       | | 方法      | 说明                                     | 类型       |
|-----------|------------------------------------------|------------| | ------- | -------------------------------------- | -------- |
| getFieldsValue | 获取一组输入控件的值，如不传入参数，则获取全部组件的值 | Function([fieldNames: string[]]) | | getFieldDecorator | 用于和表单进行双向绑定，详见下方描述 | |
| 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` |
| getFieldError | 获取某个输入控件的 Error | Function(name) | | getFieldError | 获取某个输入控件的 Error | Function(name) |
| getFieldsError | 获取一组输入控件的 Error ，如不传入参数，则获取全部组件的 Error | Function([names: string[]]) | | getFieldsError | 获取一组输入控件的 Error ，如不传入参数，则获取全部组件的 Error | Function(\[names: string\[]]) |
| isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) | | getFieldsValue | 获取一组输入控件的值，如不传入参数，则获取全部组件的值 | Function(\[fieldNames: string\[]]) |
| getFieldValue | 获取一个输入控件的值 | Function(fieldName: string) |
| isFieldsTouched | 判断是否任一输入控件经历过 `getFieldDecorator` 的值收集时机 `options.trigger` | (names?: string\[]) => boolean |
| isFieldTouched | 判断一个输入控件是否经历过 `getFieldDecorator` 的值收集时机 `options.trigger` | (name: string) => boolean | | isFieldTouched | 判断一个输入控件是否经历过 `getFieldDecorator` 的值收集时机 `options.trigger` | (name: string) => boolean |
| isFieldsTouched | 判断是否任一输入控件经历过 `getFieldDecorator` 的值收集时机 `options.trigger` | (names?: string[]) => boolean | | isFieldValidating | 判断一个输入控件是否在校验状态 | Function(name) |
| resetFields | 重置一组输入控件的值（为 `initialValue`）与状态，如不传入参数，则重置所有组件 | Function([names: string[]]) | | resetFields | 重置一组输入控件的值（为 `initialValue`）与状态，如不传入参数，则重置所有组件 | Function(\[names: string\[]]) |
| getFieldDecorator | 用于和表单进行双向绑定，详见下方描述 | | | 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.first | 若为 true，则每一表单域的都会在碰到第一个失败了的校验规则后停止校验 | boolean | false |
| options.firstFields | 指定表单域会在碰到第一个失败了的校验规则后停止校验 | String[] | [] | | options.firstFields | 指定表单域会在碰到第一个失败了的校验规则后停止校验 | String\[] | \[] |
| options.force | 对已经校验过的表单域，在 validateTrigger 再次被触发时是否再次校验 | boolean | false | | options.force | 对已经校验过的表单域，在 validateTrigger 再次被触发时是否再次校验 | boolean | false |
| options.scroll | 定义 validateFieldsAndScroll 的滚动行为，详细配置见 [dom-scroll-into-view config](https://github.com/yiminghe/dom-scroll-into-view#function-parameter) | Object | {} | | options.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. `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) 参数 #### getFieldDecorator(id, options) 参数
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------------------------------------|-----|--------| | --- | --- | --- | --- |
| id | 必填输入控件唯一标志。支持嵌套式的[写法](https://github.com/react-component/form/pull/48)。 | string | | | 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 |
| options.exclusive | 是否和其他控件互斥，特别用于 Radio 单选控件 | boolean | false | | 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.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)。 更多参数请查看 [rc-form option](https://github.com/react-component/form#option-object)。
### Form.Item ### 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 | | | 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) | | | 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 | |
| required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | false | | required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | false |
| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | | | validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | |
| hasFeedback | 配合 validateStatus 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false | | wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](https://ant.design/components/grid/#Col) | |
| colon | 配合 label 属性使用，表示是否显示 label 后面的冒号 | boolean | true |
### 校验规则 ### 校验规则
参数 | 说明 | 类型 | 默认值 | 参数 | 说明 | 类型 | 默认值 |
-----|------|------|------ | --- | --- | --- | --- |
message | 校验文案 | string | - | enum | 枚举类型 | string | - |
type | 内建校验类型，[可选项](https://github.com/yiminghe/async-validator#type) | string | 'string' | len | 字段长度 | number | - |
required | 是否必选 | boolean | `false` | max | 最大长度 | number | - |
whitespace | 必选时，空格是否会被视为错误 | boolean | `false` | message | 校验文案 | string | - |
len | 字段长度 | number | - | min | 最小长度 | number | - |
min | 最小长度 | number | - | pattern | 正则表达式校验 | RegExp | - |
max | 最大长度 | number | - | required | 是否必选 | boolean | `false` |
enum | 枚举类型 | string | - | transform | 校验前转换字段值 | function(value) => transformedValue:any | - |
pattern | 正则表达式校验 | RegExp | - | type | 内建校验类型，[可选项](https://github.com/yiminghe/async-validator#type) | string | 'string' |
transform | 校验前转换字段值 | function(value) => transformedValue:any | - | validator | 自定义校验（注意，[callback 必须被调用](https://github.com/ant-design/ant-design/issues/5155)） | function(rule, value, callback) | - |
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)。 更多高级用法可研究 [async-validator](https://github.com/yiminghe/async-validator)。
@ -165,7 +166,6 @@ validator | 自定义校验（注意，[callback 必须被调用](https://github
} }
</style> </style>
## 在 TypeScript 中使用 ## 在 TypeScript 中使用
```jsx ```jsx
@ -180,3 +180,4 @@ interface UserFormProps extends FormComponentProps {
class UserForm extends React.Component<UserFormProps, any> { 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: Following is a brief look at how it works:
* Establish a set of `column` in the horizontal space defined by `row` (abbreviated col) - 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` - 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`). - 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. - 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 ## Flex layout
@ -88,26 +88,26 @@ If the Ant Design grid layout component does not meet your needs, you can use th
### Row ### Row
| Property | Description | Type | Default | | Property | Description | Type | Default |
|------------|-----------------|--------------------|-------------| | -------- | ----------- | ---- | ------- |
| gutter | spacing between grids | number | 0 | | align | the vertical alignment of the flex layout: `top` `middle` `bottom` | string | `top` |
| type | layout mode, optional `flex`, [browser support](http://caniuse.com/#search=flex) | string | | | gutter | spacing between grids | number | 0 |
| 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` |
| 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 ### Col
| Property | Description | Type | Default | | Property | Description | Type | Default |
|------------|-----------------|--------------------|-------------| | -------- | ----------- | ---- | ------- |
| span | raster number of cells to occupy, 0 corresponds to `display: none` | number | none | | offset | the number of cells to offset Col from the left | number | 0 |
| order | raster order, used in `flex` layout mode | number | 0 | | order | raster order, used in `flex` layout mode | number | 0 |
| offset | the number of cells to offset Col from the left | 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 | | 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 | | 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 | - | | 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 | - | | 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 | - | | 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 | - | | 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 | - | | 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`). 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）和列（col）来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。下面简单介绍一下它的工作原理：
* 通过`row`在水平方向建立一组`column`（简写col） - 通过`row`在水平方向建立一组`column`（简写col）
* 你的内容应当放置于`col`内，并且，只有`col`可以作为`row`的直接元素 - 你的内容应当放置于`col`内，并且，只有`col`可以作为`row`的直接元素
* 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用`.col-8`来创建 - 栅格系统中的列是指1到24的值来表示其跨越的范围。例如，三个等宽的列可以使用`.col-8`来创建
* 如果一个`row`中的`col`总和超过 24，那么多余的`col`会作为一个整体另起一行排列 - 如果一个`row`中的`col`总和超过 24，那么多余的`col`会作为一个整体另起一行排列
## Flex 布局 ## Flex 布局
@ -87,26 +87,26 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
### Row ### Row
| 成员 | 说明 | 类型 | 默认值 | | 成员 | 说明 | 类型 | 默认值 |
|-----------|-----------------|--------------------|-------------| | --- | --- | --- | --- |
| gutter | 栅格间隔 | number | 0 | | align | flex 布局下的垂直对齐方式：`top` `middle` `bottom` | string | `top` |
| type | 布局模式，可选 `flex`，[现代浏览器](http://caniuse.com/#search=flex) 下有效 | string | | | gutter | 栅格间隔 | number | 0 |
| align | flex 布局下的垂直对齐方式：`top` `middle` `bottom` | string | `top` | | justify | flex 布局下的水平排列方式：`start` `end` `center` `space-around` `space-between` | string | `start` |
| justify | flex 布局下的水平排列方式：`start` `end` `center` `space-around` `space-between` | string | `start` | | type | 布局模式，可选 `flex`，[现代浏览器](http://caniuse.com/#search=flex) 下有效 | string | |
### Col ### Col
| 成员 | 说明 | 类型 | 默认值 | | 成员 | 说明 | 类型 | 默认值 |
|----------|-----------------|--------------------|-------------| | --- | --- | --- | --- |
| span | 栅格占位格数，为 0 时相当于 `display: none` | number | - | | offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 |
| order | 栅格顺序，`flex` 布局模式下有效 | number | 0 | | order | 栅格顺序，`flex` 布局模式下有效 | number | 0 |
| offset | 栅格左侧的间隔格数，间隔内不可以有栅格 | number | 0 | | pull | 栅格向左移动格数 | number | 0 |
| push | 栅格向右移动格数 | number | 0 | | push | 栅格向右移动格数 | number | 0 |
| pull | 栅格向左移动格数 | number | 0 | | span | 栅格占位格数，为 0 时相当于 `display: none` | number | - |
| xs | `<768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | | xs | `<768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
| sm | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | | sm | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
| md | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | | md | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
| lg | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | | lg | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
| xl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | | xl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - |
响应式栅格的断点遵循了 [BootStrap 3 的规则](https://getbootstrap.com/docs/3.3/css/#responsive-utilities-classes)（不包含链接里 `occasionally` 的部分)。 响应式栅格的断点遵循了 [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' }} /> <Icon type="question" style={{ fontSize: 16, color: '#08c' }} />
``` ```
| Property | Description | Type | Default | | Property | Description | Type | Default |
|----------|------------------|------- |---------| | -------- | ----------- | ---- | ------- |
| type | Type of ant design icon | string | - |
| spin | Rotate icon with animation | boolean | false | | spin | Rotate icon with animation | boolean | false |
| style | style properties of icon, like fontSize and color | object | - | | 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' }} /> <Icon type="question" style={{ fontSize: 16, color: '#08c' }} />
``` ```
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------|------------------|----------|--------| | --- | --- | --- | --- |
| type | 图标类型 | string | - |
| spin | 是否有旋转动画 | boolean | false | | spin | 是否有旋转动画 | boolean | false |
| style | 设置图标的样式，例如 fontSize 和 color | object | - | | 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 ## API
| property | description | type | default | | property | description | type | default |
|-------------|----------------|--------------------|--------------| | -------- | ----------- | ---- | ------- |
| min | min value | number | -Infinity | | defaultValue | initial value | number | |
| max | max vale | number | Infinity | | disabled | disable the input | boolean | false |
| 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 | - |
| formatter | Specifies the format of the value presented | function(value: number \| string): string | - | | 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 | - | | 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 | | defaultValue | 初始值 | number | |
| max | 最大值 | number | Infinity | | disabled | 禁用 | boolean | false |
| value | 当前值 | number | |
| step | 每次改变步数，可以为小数 | number\|string | 1 |
| precision | 数值精度 | number | - |
| defaultValue | 初始值 | number | |
| onChange | 变化回调 | Function(value: number \| string) | |
| disabled | 禁用 | boolean | false |
| size | 输入框大小 | string | 无 |
| formatter | 指定输入框展示值的格式 | function(value: number \| string): string | - | | formatter | 指定输入框展示值的格式 | function(value: number \| string): string | - |
| max | 最大值 | number | Infinity |
| min | 最小值 | number | -Infinity |
| parser | 指定从 formatter 里转换回数字的方式，和 formatter 搭配使用 | function( string): number | - | | 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 ### Input
| Property | Description | Type | Default | | 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` | | addonAfter | The label text displayed after (on the right side of) the input field. | string\|ReactNode | |
| id | The ID for input | string | | | addonBefore | The label text displayed before (on the left side of) the input field. | string\|ReactNode | |
| value | The input content value | string | | | defaultValue | The initial input content | 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` |
| disabled | Whether the input is disabled. | boolean | false | | disabled | Whether the input is disabled. | boolean | false |
| addonBefore | The label text displayed before (on the left side of) the input field. | string\|ReactNode | | | id | The ID for input | string | |
| 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 | |
| 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 | | | suffix | The suffix icon for the Input. | string\|ReactNode | |
| onPressEnter | The callback function that is triggered when Enter key is pressed. | function(e) | | | 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 > 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). 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]`. > If you are using `antd@<2.12`, please use `Input[type=textarea]`.
| Property | Description | Type | Default | | 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) | |
| autosize | Height autosize feature, can be set to `true|false` or an object `{ minRows: 2, maxRows: 6 }` | boolean\|object | false | | 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). 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` `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) | | | 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`. Supports all props of `Input`.
#### Input.Group #### Input.Group
| Property | Description | Type | Default | | 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 |
| 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 ```html
<Input.Group> <Input.Group>

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

@ -16,19 +16,19 @@ title: Input
### Input ### Input
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------------------------------------|------------|-------| | --- | --- | --- | --- |
| type | 声明 input 类型，同原生 input 标签的 type 属性。另外提供 `type="textarea"`(该 type `2.12` 后废弃，请直接使用 `Input.TextArea`)。 | string | `text` | | addonAfter | 带标签的 input，设置后置标签 | string\|ReactNode | |
| id | 输入框的 id | string | | | addonBefore | 带标签的 input，设置前置标签 | string\|ReactNode | |
| value | 输入框内容 | string | | | defaultValue | 输入框默认内容 | string | |
| defaultValue | 输入框默认内容 | string | |
| size | 控件大小。注：标准表单内的输入框大小限制为 `large`。可选 `large` `default` `small` | string | `default` |
| disabled | 是否禁用状态，默认为 false | boolean | false | | disabled | 是否禁用状态，默认为 false | boolean | false |
| addonBefore | 带标签的 input，设置前置标签 | string\|ReactNode | | | id | 输入框的 id | string | |
| addonAfter | 带标签的 input，设置后置标签 | string\|ReactNode | | | prefix | 带有前缀图标的 input | string\|ReactNode | |
| prefix | 带有前缀图标的 input | string\|ReactNode | | | size | 控件大小。注：标准表单内的输入框大小限制为 `large`。可选 `large` `default` `small` | string | `default` |
| suffix | 带有后缀图标的 input | string\|ReactNode | | | suffix | 带有后缀图标的 input | string\|ReactNode | |
| onPressEnter | 按下回车的回调 | function(e) | | | 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` 属性会被自动设置。 > 如果 `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]`。 > `2.12` 后新增的组件，旧版请使用 `Input[type=textarea]`。
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------------------------------------|------------|-------| | --- | --- | --- | --- |
| defaultValue | 输入框默认内容 | string | |
| value | 输入框内容 | string | |
| onPressEnter | 按下回车的回调 | function(e) | |
| autosize | 自适应内容高度，可设置为 `true|false` 或对象：`{ minRows: 2, maxRows: 6 }` | boolean\|object | false | | autosize | 自适应内容高度，可设置为 `true|false` 或对象：`{ minRows: 2, maxRows: 6 }` | boolean\|object | false |
| defaultValue | 输入框默认内容 | string | |
| value | 输入框内容 | string | |
| onPressEnter | 按下回车的回调 | function(e) | |
`Input.TextArea` 的其他属性和浏览器自带的 [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) 一致。 `Input.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` `Added in 2.5.0`
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|-----------------------------------------|-----------|-------| | --- | --- | --- | --- |
| onSearch | 点击搜索或按下回车键时的回调 | function(value) | | | onSearch | 点击搜索或按下回车键时的回调 | function(value) | |
其余属性和 Input 一致。 其余属性和 Input 一致。
#### Input.Group #### 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 ```html
<Input.Group> <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. The wrapper.
Property | Description | Type | Default | Property | Description | Type | Default |
-----|-----|-----|------ | -------- | ----------- | ---- | ------- |
style | to customize the styles | object | - | className | container className | string | - |
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`. > 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. The sidebar.
Property | Description | Type | Default | Property | Description | Type | Default |
-----|-----|-----|------ | -------- | ----------- | ---- | ------- |
collapsible | whether can be collapsed | boolean | false | breakpoint | breakpoint of the responsive layout | Enum { 'xs', 'sm', 'md', 'lg', 'xl' } | - |
defaultCollapsed | to set the initial status | boolean | false | | className | container className | string | - |
reverseArrow | reverse direction of arrow, for a sider that expands from the right | boolean | false | | collapsed | to set the current status | boolean | - |
collapsed | to set the current status | boolean | - | collapsedWidth | width of the collapsed sidebar, by setting to `0` a special trigger will appear | number | 64 |
onCollapse | the callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - | collapsible | whether can be collapsed | boolean | false |
trigger | specify the customized trigger, set to null to hide the trigger | string\|ReactNode| - | | defaultCollapsed | to set the initial status | boolean | false |
width | width of the sidebar | number\|string | 200 | reverseArrow | reverse direction of arrow, for a sider that expands from the right | boolean | false |
collapsedWidth | width of the collapsed sidebar, by setting to `0` a special trigger will appear | number | 64 | style | to customize the styles | object | - |
breakpoint | breakpoint of the responsive layout | Enum { 'xs', 'sm', 'md', 'lg', 'xl' } | - | | trigger | specify the customized trigger, set to null to hide the trigger | string\|ReactNode | - |
style | to customize the styles | object | - | width | width of the sidebar | number\|string | 200 |
className | container className | string | - | onCollapse | the callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - |
#### breakpoint width #### breakpoint width

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

@ -74,10 +74,10 @@ title: Layout
布局容器。 布局容器。
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|-------------|-------| | --- | --- | --- | --- |
| style | 指定样式 | object | - |
| className | 容器 className | string | - | | className | 容器 className | string | - |
| style | 指定样式 | object | - |
> `Layout.Header` `Layout.Footer` `Layout.Content` API 与 `Layout` 相同 > `Layout.Header` `Layout.Footer` `Layout.Content` API 与 `Layout` 相同
@ -85,19 +85,19 @@ title: Layout
侧边栏。 侧边栏。
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------|-----------------------------------------|------------|-------| | --- | --- | --- | --- |
| collapsible | 是否可收起 | boolean | false | | breakpoint | 触发响应式布局的断点 | Enum { 'xs', 'sm', 'md', 'lg', 'xl' } | - |
| defaultCollapsed | 是否默认收起 | boolean | false | | className | 容器 className | string | - |
| reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false |
| collapsed | 当前收起状态 | boolean | - | | 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 | - | | trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string\|ReactNode | - |
| width | 宽度 | number\|string | 200 | | width | 宽度 | number\|string | 200 |
| collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 64 | | onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - |
| breakpoint | 触发响应式布局的断点 | Enum { 'xs', 'sm', 'md', 'lg', 'xl' } | - |
| style | 指定样式 | object | - |
| className | 容器 className | string | - |
#### breakpoint width #### 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. `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 ```jsx
import { LocaleProvider } from 'antd'; import { LocaleProvider } from 'antd';
import enUS from 'antd/lib/locale-provider/en_US'; 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 ## API
Property | Description | Type | Default | Property | Description | Type | Default |
-----|-----|-----|------ | -------- | ----------- | ---- | ------- |
locale | language package setting, you can find the packages in this path: `antd/lib/locale-provider/` | object | - | 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) 特性，只需在应用外围包裹一次即可全局生效。 LocaleProvider 使用 React 的 [context](https://facebook.github.io/react/docs/context.html) 特性，只需在应用外围包裹一次即可全局生效。
```jsx ```jsx
import enUS from 'antd/lib/locale-provider/en_US'; import enUS from 'antd/lib/locale-provider/en_US';
@ -43,6 +42,6 @@ return <LocaleProvider locale={locales.en_US}><App /></LocaleProvider>;
## API ## API
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|--------|----------------|------------------|--------------| | --- | --- | --- | --- |
| locale | 语言包配置，语言包可到 `antd/lib/locale-provider/` 目录下寻找 | object | - | | 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 ### Mention API
| API | Description | Type | | API | Description | Type |
|----------|---------------|----------|--------------| | --- | ----------- | ---- |
| toString | convert ContentState to string | Function(contentState: ContentState): string | | getMentions | get mentioned people in current contentState | Function(ContentState: contentState): string\[] |
| toContentState (recommended) | convert string to ContentState | Function(value: string): ContentState | | toContentState (recommended) | convert string to ContentState | Function(value: string): ContentState |
| toEditorState (Backward compatible) | 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[] | | toString | convert ContentState to string | Function(contentState: ContentState): string |
### Mention ### Mention
| Property | Description | Type | Default | | Property | Description | Type | Default |
|----------|---------------|----------|--------------| | -------- | ----------- | ---- | ------- |
| suggestions | suggestion content | Array<string\|Mention.Nav> | [] | | defaultValue | default value | ContentState, you can use `Mention.toContentState` or `Mention.toEditorState` to convert text to `ContentState` | null |
| suggestionStyle | style of suggestion container | object | {} | | disabled | Tell if the input is disabled. | boolean | false |
| onSearchChange | Callback function called when search content changes | function(value:string, trigger: string) | [] | | 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 |
| 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 | '无匹配结果，轻敲空格完成输入' |
| loading | loading mode | boolean | false | | loading | loading mode | boolean | false |
| multiLines | multilines mode | boolean | false | | multiLines | multilines mode | boolean | false |
| prefix | character which will trigger Mention to show mention list | string or Array<string> | '@' | | notFoundContent | suggestion when suggestions empty | 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 |
| placeholder | placeholder of input | string | null | | 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 | | prefix | character which will trigger Mention to show mention list | string or Array<string> | '@' |
| onFocus | Callback function called when mention component get focus | functione) | null |
| onBlur | Callback function called when mention component blur | function(e) | null |
| readOnly | Tell if the input is readonly. | boolean | false | | 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 ### Mention methods
| Property | Description | Type | Default | | Property | Description | Type | Default |
|----------|---------------|----------|--------------| | -------- | ----------- | ---- | ------- |
| focus | Force focus back onto the editor node. | - | - | | focus | Force focus back onto the editor node. | - | - |
### Nav ### Nav
| Property | Description | Type | Default | | Property | Description | Type | Default |
|----------|---------------|----------|--------------| | -------- | ----------- | ---- | ------- |
| value | value of suggestion，the value will insert into input filed while selected | string | "" |
| children | suggestion content | object | {} | | 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 ### Mention API
| API | 说明 | 类型 | | API | 说明 | 类型 |
|----------|---------------|----------| | --- | --- | --- |
| toString | 把 ContentState 转成字符串 | Function(contentState: ContentState): string | | getMentions | 获取当前 contentState 中提到的人的列表 | Function(contentState: ContentState): string\[] |
| toContentState(推荐) | 把字符串转成 ContentState | Function(value: string): ContentState | | toContentState(推荐) | 把字符串转成 ContentState | Function(value: string): ContentState |
| toEditorState(兼容) | 把字符串转成 ContentState | Function(value: string): ContentState | | toEditorState(兼容) | 把字符串转成 ContentState | Function(value: string): ContentState |
| getMentions | 获取当前 contentState 中提到的人的列表 | Function(contentState: ContentState): string[] | | toString | 把 ContentState 转成字符串 | Function(contentState: ContentState): string |
### Mention ### Mention
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------|---------------|----------|--------------| | --- | --- | --- | --- |
| suggestions | 建议内容 | Array<string\|Mention.Nav> | [] | | defaultValue | 默认值 | ContentState, 可以用 `Mention.toContentState(text)` 或 `Mention.toEditorState(text)` 把文字转换成 ContentState | null |
| suggestionStyle | 弹出下拉框样式 | object | {} | | disabled | 是否禁用状态. | boolean | false |
| onSearchChange | 输入框中 @ 变化时回调 | function(value:string, trigger: string) | [] | | getSuggestionContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位 | function() | () => document.body |
| onChange | 输入框内容变化时回调 | function(contentState: ContentState) | null |
| onSelect | 下拉框选择建议时回调 | function(suggestion: string, data?: any) | null |
| notFoundContent| 未找到时的内容 | string | '无匹配结果，轻敲空格完成输入' |
| loading | 加载中 | boolean | false | | loading | 加载中 | boolean | false |
| multiLines | 多行模式 | boolean | false | | multiLines | 多行模式 | boolean | false |
| prefix | 触发弹出下拉框的字符 | string or Array<string> | '@' | | notFoundContent | 未找到时的内容 | string | '无匹配结果，轻敲空格完成输入' |
| placeholder | 输入框默认文字 | string | null | | placeholder | 输入框默认文字 | string | null |
| defaultValue | 默认值 | ContentState, 可以用 `Mention.toContentState(text)` 或 `Mention.toEditorState(text)` 把文字转换成 ContentState | null | | prefix | 触发弹出下拉框的字符 | string or Array<string> | '@' |
| value | 值 | ContentState | null |
| getSuggestionContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位| function() | () => document.body |
| onFocus | 获得焦点时回调 | function(e) | null |
| onBlur | 失去焦点时回调 | function(e) | null |
| readOnly | 是否只读. | boolean | false | | 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 ### Mention methods
| Property | Description | Type | Default | | Property | Description | Type | Default |
|----------|---------------|----------|--------------| | -------- | ----------- | ---- | ------- |
| focus | 强制获得焦点. | - | - | | focus | 强制获得焦点. | - | - |
### Nav ### Nav
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------|---------------|----------|--------------| | --- | --- | --- | --- |
| value | 建议值，选择建议时，用此值插入到输入框中 | string | "" |
| children | 建议内容 | object | {} | | 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 ### Menu
| Param | Description | Type | Default value | | Param | Description | Type | Default value |
|----------|---------------|----------|--------------| | ----- | ----------- | ---- | ------------- |
| theme | color theme of the menu | string: `light` `dark` | `light` | | defaultOpenKeys | array with the keys of default opened sub menus | | |
| mode | type of the menu; `vertical`, `horizontal`, and `inline` modes are supported | string: `vertical` \| `horizontal` \| `inline` | `vertical` | | defaultSelectedKeys | array with the keys of default selected menu items | string\[] | |
| 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 |
| inlineCollapsed | specifies the collapsed status when menu is inline mode | boolean | - | | 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 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) > More options in [rc-menu](https://github.com/react-component/menu#api)
### Menu.Item ### Menu.Item
| Param | Description | Type | Default value | | Param | Description | Type | Default value |
|----------|----------------|----------|--------------| | ----- | ----------- | ---- | ------------- |
| disabled | whether menu item is disabled or not | boolean | false | | disabled | whether menu item is disabled or not | boolean | false |
| key | unique id of the menu item | string | | | key | unique id of the menu item | string | |
### Menu.SubMenu ### Menu.SubMenu
| Param | Description | Type | Default value | | Param | Description | Type | Default value |
|----------|----------------|----------|--------------| | ----- | ----------- | ---- | ------------- |
| disabled | whether sub menu is disabled or not | boolean | false | | children | sub menus or sub menu items | Array&lt;MenuItem\|SubMenu> | |
| key | unique id of the sub menu | string | | | disabled | whether sub menu is disabled or not | boolean | false |
| title | title of the sub menu | string\|ReactNode | | | key | unique id of the sub menu | string | |
| children | sub menus or sub menu items | Array<MenuItem\|SubMenu> | | | title | title of the sub menu | string\|ReactNode | |
| onTitleClick | callback executed when the sub menu title is clicked | function({ key, domEvent }) | | | onTitleClick | callback executed when the sub menu title is clicked | function({ key, domEvent }) | |
### Menu.ItemGroup ### Menu.ItemGroup
| Param | Description | Type | Default value | | Param | Description | Type | Default value |
|----------|----------------|----------|--------------| | ----- | ----------- | ---- | ------------- |
| title | title of the group | string\|ReactNode | | | children | sub menu items | MenuItem\[] | |
| children | sub menu items | MenuItem[] | | | title | title of the group | string\|ReactNode | |
### Menu.Divider ### Menu.Divider

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

@ -27,49 +27,49 @@ subtitle: 导航菜单
### Menu ### Menu
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------|---------------|----------|--------------| | --- | --- | --- | --- |
| theme | 主题颜色 | string: `light` `dark` | `light` | | defaultOpenKeys | 初始展开的 SubMenu 菜单项 key 数组 | | |
| mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | string: `vertical` `horizontal` `inline` | `vertical` | | defaultSelectedKeys | 初始选中的菜单项 key 数组 | string\[] | |
| 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 |
| inlineCollapsed | inline 时菜单是否收起状态 | boolean | - | | inlineCollapsed | inline 时菜单是否收起状态 | boolean | - |
| inlineIndent | inline 模式的菜单缩进宽度 | number | 24 |
| mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | string: `vertical` `horizontal` `inline` | `vertical` |
| multiple | 是否允许多选 | boolean | false |
| openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string\[] | |
| selectable | 是否允许选中 | boolean | true | | 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) > More options in [rc-menu](https://github.com/react-component/menu#api)
### Menu.Item ### Menu.Item
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------| | --- | --- | --- | --- |
| disabled | 是否禁用 | boolean | false | | disabled | 是否禁用 | boolean | false |
| key | item 的唯一标志 | string | | | key | item 的唯一标志 | string | |
### Menu.SubMenu ### Menu.SubMenu
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------| | --- | --- | --- | --- |
| disabled | 是否禁用 | boolean | false | | children | 子菜单的菜单项 | Array&lt;MenuItem\|SubMenu> | |
| key | 唯一标志 | string | | | disabled | 是否禁用 | boolean | false |
| title | 子菜单项值 | string\|ReactNode | | | key | 唯一标志 | string | |
| children | 子菜单的菜单项 | Array<MenuItem\|SubMenu> | | | title | 子菜单项值 | string\|ReactNode | |
| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | | | onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | |
### Menu.ItemGroup ### Menu.ItemGroup
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------| | --- | --- | --- | --- |
| title | 分组标题 | string\|ReactNode | | | children | 分组的菜单项 | MenuItem\[] | |
| children | 分组的菜单项 | MenuItem[] | | | title | 分组标题 | string\|ReactNode | |
### Menu.Divider ### 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.warn(content, duration, onClose)` // alias of warning
- `message.loading(content, duration, onClose)` - `message.loading(content, duration, onClose)`
| Argument | Description | Type | Default | | Argument | Description | Type | Default |
|------------|------------------------------------|--------------------------|--------------| | -------- | ----------- | ---- | ------- |
| content | content of the message | string\|ReactNode | - | | content | content of the message | string\|ReactNode | - |
| duration | time before auto-dismiss, in seconds | number | 1.5 | | duration | time before auto-dismiss, in seconds | number | 1.5 |
| onClose | Specify a function that will be called when the message is closed| Function | - | | onClose | Specify a function that will be called when the message is closed | Function | - |
Methods for global configuration and destruction are also provided: Methods for global configuration and destruction are also provided:
@ -43,8 +43,8 @@ message.config({
}); });
``` ```
| Argument | Description | Type | Default | | Argument | Description | Type | Default |
|------------|------------------------------------|--------------------------|-------------| | -------- | ----------- | ---- | ------- |
| top | distance from top | number | 24px | | duration | time before auto-dismiss, in seconds | number | 1.5 |
| duration | time before auto-dismiss, in seconds | number | 1.5 |
| getContainer | Return the mount node for Message | () => HTMLElement | () => document.body | | 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.warn(content, duration, onClose)` // alias of warning
- `message.loading(content, duration, onClose)` - `message.loading(content, duration, onClose)`
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------------|----------------|--------------------------|--------------| | --- | --- | --- | --- |
| content | 提示内容 | string\|ReactNode | - | | content | 提示内容 | string\|ReactNode | - |
| duration | 自动关闭的延时，单位秒 | number | 3 | | duration | 自动关闭的延时，单位秒 | number | 3 |
| onClose | 关闭时触发的回调函数 | Function | - | | onClose | 关闭时触发的回调函数 | Function | - |
还提供了全局配置和全局销毁方法： 还提供了全局配置和全局销毁方法：
@ -44,8 +44,8 @@ message.config({
}); });
``` ```
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------------|--------------------|--------------------------|-------------| | --- | --- | --- | --- |
| top | 消息距离顶部的位置 | number | 24px | | duration | 默认自动关闭延时，单位秒 | number | 3 |
| duration | 默认自动关闭延时，单位秒 | number | 3 |
| getContainer | 配置渲染节点的输出位置 | () => HTMLElement | () => document.body | | getContainer | 配置渲染节点的输出位置 | () => HTMLElement | () => document.body |
| top | 消息距离顶部的位置 | number | 24px |

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

@ -16,28 +16,28 @@ and so on.
## API ## API
| Property | Description | Type | Default | | 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 |
| afterClose | Specify a function that will be called when modal is closed completely. | function | - | | 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 | | 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 | | 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 #### 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 items listed above are all functions, expecting a settings object as parameter.
The properties of the object are follows: The properties of the object are follows:
| Property | Description | Type | Default | | Property | Description | Type | Default |
|------------|----------------|------------------|---------------| | -------- | ----------- | ---- | ------- |
| title | Title | string\|ReactNode | - | | cancelText | Text of the Cancel button | string | `Cancel` |
| content | Content | 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 | - | | iconType | Icon `type` of the Icon component | string | `question-circle` |
| 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 | - | | maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | Boolean | `false` |
| width | Width of the modal dialog | string\|number | 416 | | okText | Text of the OK button | string | `OK` |
| iconType | Icon `type` of the Icon component | string | `question-circle` | | okType | Button `type` of the OK button | string | `primary` |
| okText | Text of the OK button | string | `OK` | | title | Title | string\|ReactNode | - |
| okType | Button `type` of the OK button | string | `primary` | | width | Width of the modal dialog | string\|number | 416 |
| 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` |
| zIndex | The `z-index` of the Modal | Number | 1000 | | 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. 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 ## 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 | 无 | | 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 | | 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 | | zIndex | 设置 Modal 的 `z-index` | Number | 1000 |
| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | 无 |
| onOk | 点击确定回调 | function(e) | 无 |
#### 清空旧数据 #### 清空旧数据
@ -55,19 +55,19 @@ title: Modal
以上均为一个函数，参数为 object，具体属性如下： 以上均为一个函数，参数为 object，具体属性如下：
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------------|----------------|------------------|--------------| | --- | --- | --- | --- |
| title | 标题 | string\|ReactNode | 无 | | cancelText | 取消按钮文字 | string | 取消 |
| content | 内容 | string\|ReactNode | 无 | | content | 内容 | string\|ReactNode | 无 |
| onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 | | iconType | 图标 Icon 类型 | string | question-circle |
| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 | | maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` |
| width | 宽度 | string\|number | 416 | | okText | 确认按钮文字 | string | 确定 |
| iconType | 图标 Icon 类型 | string | question-circle | | okType | 确认按钮类型 | string | primary |
| okText | 确认按钮文字 | string | 确定 | | title | 标题 | string\|ReactNode | 无 |
| okType | 确认按钮类型 | string | primary | | width | 宽度 | string\|number | 416 |
| cancelText | 取消按钮文字 | string | 取消 |
| maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` |
| zIndex | 设置 Modal 的 `z-index` | Number | 1000 | | 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. Display a notification message globally.
## When To Use ## When To Use
To display a notification message at any of the four corners of the viewport. Typically it can be To display a notification message at any of the four corners of the viewport. Typically it can be
used in the following cases: used in the following cases:
- A notification with complex content. - A notification with complex content.
- A notification providing a feedback based on the user interaction. Or it may show some details - 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. - A notification that is pushed by the application.
## API ## API
@ -28,22 +29,23 @@ about upcoming steps the user may have to follow.
The properties of config are as follows: The properties of config are as follows:
| Property | Description | Type | Default | | Property | Description | Type | Default |
| ----------- | ---------------------------------------- | ----------------- | -------- | | -------- | ----------- | ---- | ------- |
| message | The title of notification box (required) | string\|ReactNode | - | | btn | Customized close button | ReactNode | - |
| description | The content of notification box (required) | string\|ReactNode | - | | className | Customized CSS class | string | - |
| className | Customized CSS class | string | - | | description | The content of notification box (required) | string\|ReactNode | - |
| style | Customized inline style | [React.CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - | | duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 |
| btn | Customized close button | ReactNode | - | | icon | Customized icon | ReactNode | - |
| icon | Customized icon | ReactNode | - | | key | The unique identifier of the Notification | string | - |
| key | The unique identifier of the Notification | string | - | | message | The title of notification box (required) | string\|ReactNode | - |
| onClose | Specify a function that will be called when the close button is clicked | Function | - | | placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
| duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 | | style | Customized inline style | [React.CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |
| placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` | | 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` 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)` - `notification.config(options)`
```js ```js
notification.config({ notification.config({
placement: 'bottomRight', placement: 'bottomRight',
@ -52,10 +54,10 @@ notification.config({
}); });
``` ```
| Property | Description | Type | Default | | Property | Description | Type | Default |
| ------------ | ---------------------------------------- | -------------- | ------------------- | | -------- | ----------- | ---- | ------- |
| placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` | | bottom | Distance from the bottom of the viewport, when `placement` is `bottomRight` or `bottomLeft` (unit: pixels). | number | 24 |
| top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (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 |
| bottom | Distance from the bottom of the viewport, when `placement` is `bottomRight` or `bottomLeft` (unit: pixels). | number | 24 | | getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body |
| 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` |
| getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body | | 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 参数如下： config 参数如下：
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| ----------- | ---------------------------------------- | ----------------- | -------- | | --- | --- | --- | --- |
| message | 通知提醒标题，必选 | string\|ReactNode | - | | btn | 自定义关闭按钮 | ReactNode | - |
| description | 通知提醒内容，必选 | string\|ReactNode | - | | className | 自定义 CSS class | string | - |
| className | 自定义 CSS class | string | - | | description | 通知提醒内容，必选 | string\|ReactNode | - |
| style | 自定义内联样式 | [React.CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - | | duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 |
| btn | 自定义关闭按钮 | ReactNode | - | | icon | 自定义图标 | ReactNode | - |
| icon | 自定义图标 | ReactNode | - | | key | 当前通知唯一标志 | string | - |
| key | 当前通知唯一标志 | string | - | | message | 通知提醒标题，必选 | string\|ReactNode | - |
| onClose | 点击默认关闭按钮时触发的回调函数 | Function | - | | placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | topRight |
| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 | | style | 自定义内联样式 | [React.CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |
| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | topRight | | onClose | 点击默认关闭按钮时触发的回调函数 | Function | - |
还提供了一个全局配置方法，在调用前提前配置，全局一次生效。 还提供了一个全局配置方法，在调用前提前配置，全局一次生效。
@ -53,10 +53,10 @@ notification.config({
}); });
``` ```
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
| ------------ | ---------------------------------------- | -------------- | ------------------- | | --- | --- | --- | --- |
| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | topRight | | bottom | 消息从底部弹出时，距离底部的位置，单位像素。 | number | 24 |
| top | 消息从顶部弹出时，距离顶部的位置，单位像素。 | number | 24 | | duration | 默认自动关闭延时，单位秒 | number | 4.5 |
| bottom | 消息从底部弹出时，距离底部的位置，单位像素。 | number | 24 | | getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body |
| duration | 默认自动关闭延时，单位秒 | number | 4.5 | | placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | topRight |
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body | | 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} /> <Pagination onChange={onChange} total={50} />
``` ```
Property | Description | Type | Default | Property | Description | Type | Default |
-----|-----|-----|------ | -------- | ----------- | ---- | ------- |
current | current page number | number | - | current | current page number | number | - |
defaultCurrent | default initial page number | number | 1 | 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 |
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 | - | 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 | pageSizeOptions | specify the sizeChanger options | string\[] | ['10', '20', '30', '40'] |
showSizeChanger | determine whether `pageSize` can be changed | boolean | false | showQuickJumper | determine whether you can jump to pages directly | boolean | false |
pageSizeOptions | specify the sizeChanger options | string[] | ['10', '20', '30', '40'] | showSizeChanger | determine whether `pageSize` can be changed | boolean | false |
onShowSizeChange | a callback function, executed when `pageSize` is changed | Function(current, size) | noop | showTotal | to display the total number and range | Function(total, range) | - |
showQuickJumper | determine whether you can jump to pages directly | boolean | false | simple | whether to use simple mode | boolean | - |
size | specify the size of `Pagination`, can be set to `small` | string | "" | size | specify the size of `Pagination`, can be set to `small` | string | "" |
simple | whether to use simple mode | boolean | - | total | total number of data items | number | 0 |
showTotal | to display the total number and range | Function(total, range) | - | 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 |
itemRender | to customize item innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | | 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} /> <Pagination onChange={onChange} total={50} />
``` ```
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------------------|------------------------------------|---------------|--------------------------| | --- | --- | --- | --- |
| current | 当前页数 | number | - | | current | 当前页数 | number | - |
| defaultCurrent | 默认的当前页数 | number | 1 | | defaultCurrent | 默认的当前页数 | number | 1 |
| total | 数据总数 | number | 0 | | defaultPageSize | 默认的每页条数 | number | 10 |
| defaultPageSize | 默认的每页条数 | number | 10 | | itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - |
| pageSize | 每页条数 | number | - | | pageSize | 每页条数 | number | - |
| onChange | 页码改变的回调，参数是改变后的页码及每页条数 | Function(page, pageSize) | noop | | pageSizeOptions | 指定每页可以显示多少条 | string\[] | ['10', '20', '30', '40'] |
| showSizeChanger | 是否可以改变 pageSize | boolean | false | | showQuickJumper | 是否可以快速跳转至某页 | boolean | false |
| pageSizeOptions | 指定每页可以显示多少条 | string[] | ['10', '20', '30', '40'] | | showSizeChanger | 是否可以改变 pageSize | boolean | false |
| onShowSizeChange | pageSize 变化的回调 | Function(current, size) | noop | | showTotal | 用于显示数据总量和当前数据顺序 | Function(total, range) | - |
| showQuickJumper | 是否可以快速跳转至某页 | boolean | false | | simple | 当添加该属性时，显示为简单分页 | boolean | - |
| size | 当为「small」时，是小尺寸分页 | string | "" | | size | 当为「small」时，是小尺寸分页 | string | "" |
| simple | 当添加该属性时，显示为简单分页 | boolean | - | | total | 数据总数 | number | 0 |
| showTotal | 用于显示数据总量和当前数据顺序 | Function(total, range) | - | | onChange | 页码改变的回调，参数是改变后的页码及每页条数 | Function(page, pageSize) | noop |
| itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - | | 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 ## API
| Param | Description | Type | Default value | | Param | Description | Type | Default value |
|-----------|------------------------------------------|---------------|--------| | ----- | ----------- | ---- | ------------- |
| title | title of the confirmation box | string\|ReactNode | - | | cancelText | text of the Cancel button | string | `Cancel` |
| onConfirm | callback of confirmation | function(e) | - | | okText | text of the Confirm button | string | `Confirm` |
| onCancel | callback of cancel | function(e) | - | | okType | Button `type` of the Confirm button | string | `primary` |
| okText | text of the Confirm button | string | `Confirm` | | title | title of the confirmation box | string\|ReactNode | - |
| okType | Button `type` of the Confirm button | string | `primary` | | onCancel | callback of cancel | function(e) | - |
| cancelText| text of the Cancel button | string | `Cancel` | | onConfirm | callback of confirmation | function(e) | - |
Consult [Tooltip's documentation](https://ant.design/components/tooltip/#API) to find more APIs. 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 ## API
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|---------------|--------| | --- | --- | --- | --- |
| title | 确认框的描述 | string\|ReactNode | 无 | | cancelText | 取消按钮文字 | string | 取消 |
| onConfirm | 点击确认的回调 | function(e) | 无 | | okText | 确认按钮文字 | string | 确定 |
| onCancel | 点击取消的回调 | function(e) | 无 | | okType | 确认按钮类型 | string | primary |
| okText | 确认按钮文字 | string | 确定 | | title | 确认框的描述 | string\|ReactNode | 无 |
| okType | 确认按钮类型 | string | primary | | onCancel | 点击取消的回调 | function(e) | 无 |
| cancelText| 取消按钮文字 | string | 取消 | | onConfirm | 点击确认的回调 | function(e) | 无 |
更多属性请参考 [Tooltip](/components/tooltip/#API)。 更多属性请参考 [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 ## API
| Param | Description | Type | Default value | | Param | Description | Type | Default value |
|-----------|------------------------------------------|---------------|--------| | ----- | ----------- | ---- | ------------- |
| title | Title of the card | string\|ReactNode | - | | content | Content of the card | string\|ReactNode | - |
| 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. 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 ## API
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|---------------|--------| | --- | --- | --- | --- |
| title | 卡片标题 | string\|ReactNode | 无 | | content | 卡片内容 | string\|ReactNode | 无 |
| content | 卡片内容 | string\|ReactNode | 无 | | title | 卡片标题 | string\|ReactNode | 无 |
更多属性请参考 [Tooltip](/components/tooltip/#API)。 更多属性请参考 [Tooltip](/components/tooltip/#API)。
## 注意 ## 注意
请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。 请确保 `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 ## API
Property | Description | Type | Default | Property | Description | Type | Default |
-----|-----|-----|------ | -------- | ----------- | ---- | ------- |
type | to set the type, options: `line` `circle` `dashboard`| string | `line` | format | template function of the content | function(percent) | `percent => percent + '%'` |
percent | to set the completion percentage | number | 0 | gapDegree `(type=circle)` | the gap degree of half circle, 0 ~ 360 | number | 0 |
format | template function of the content | function(percent) | `percent => percent + '%'` | gapPosition `(type=circle)` | the gap position, options: `top` `bottom` `left` `right` | string | `top` |
status | to set the status of the Progress, options: `success` `exception` `active` | string | - | percent | to set the completion percentage | number | 0 |
showInfo | whether to display the progress value and the status icon | boolean | true | 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 | status | to set the status of the Progress, options: `success` `exception` `active` | string | - |
strokeWidth `(type=circle)` | to set the width of the circular progress bar, unit: percentage of the canvas width | number | 6 | strokeWidth `(type=line)` | to set the width of the progress bar, unit: `px` | number | 10 |
width `(type=circle)` | to set the canvas width of the circular progress bar, unit: `px` | number | 132 | strokeWidth `(type=circle)` | to set the width of the circular progress bar, unit: percentage of the canvas width | number | 6 |
gapDegree `(type=circle)` | the gap degree of half circle, 0 ~ 360 | number | 0 | type | to set the type, options: `line` `circle` `dashboard` | string | `line` |
gapPosition `(type=circle)` | the gap position, options: `top` `bottom` `left` `right` | string | `top` | 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秒时； - 当一个操作会打断当前界面，或者需要在后台运行，且耗时可能超过2秒时；
- 当需要显示一个操作完成的百分比时。 - 当需要显示一个操作完成的百分比时。
## API ## API
| 属性 | 说明 | 类型 | 默认值 | | 属性 | 说明 | 类型 | 默认值 |
|----------|---------------|----------|---------------| | --- | --- | --- | --- |
| type | 类型，可选 `line` `circle` `dashboard` | string | line | | format | 内容的模板函数 | function(percent) | `percent => percent + '%'` |
| 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 |
| gapDegree `(type=circle)` | 圆形进度条缺口角度，可取值 0 ~ 360 | number | 0 | | gapDegree `(type=circle)` | 圆形进度条缺口角度，可取值 0 ~ 360 | number | 0 |
| gapPosition `(type=circle)` | 圆形进度条缺口位置 | Enum{ 'top', 'bottom', 'left', 'right' } | `top` | | 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 ### Radio
| Property | Description | Type | optional | Default | | Property | Description | Type | optional | Default |
|----------------|------------------------------------------|------------|---------|--------| | -------- | ----------- | ---- | -------- | ------- |
| checked | Specifies whether the radio is selected. | boolean | | false | | checked | Specifies whether the radio is selected. | boolean | | false |
| defaultChecked | Specifies the initial state: whether or not 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 |
| disabled | Disable radio | boolean | | false | | value | According to value for comparison, to determine whether the selected | any | | none |
### RadioGroup ### RadioGroup
radio group，wrap a group of `Radio`。 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 | | 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 | | options | set children optional | string\[] \| Array&lt;{ label: string value: string disabled?: boolean }> | 无 | 无 |
| value | Used for setting the currently selected value. | any | none | none | | size | Size, only on radio style | string | `large` `default` `small` | `default` |
| defaultValue | Default selected value | any | none | none | | value | Used for setting the currently selected value. | any | none | none |
| size | Size, only on radio style | string | `large` `default` `small` | `default` | | onChange | The callback function that is triggered when the state changes. | Function(e:Event) | none | none |
| options | set children optional | string[] \| Array<{ label: string value: string disabled?: boolean }> | 无 | 无 |
| disabled | Disable all radio buttons | boolean | | false |

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

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

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

@ -13,15 +13,15 @@ Rate component.
## API ## API
| Property | Description | type | Default | | Property | Description | type | Default |
|------------|----------------|-------------------|-------------| | -------- | ----------- | ---- | ------- |
| count | star count | number | 5 | | allowHalf | whether to allow semi selection | boolean | false |
| 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 |
| character | custom character of rate | ReactNode | `<Icon type="star" />` | | character | custom character of rate | ReactNode | `<Icon type="star" />` |
| className | custom class name of rate | string | - | | 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 | - | | 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 ## API
| 属性 | 说明 | 类型 | 默认值 | | 属性 | 说明 | 类型 | 默认值 |
|------------|----------------|-------------------|-------------| | --- | --- | --- | --- |
| count | star 总数 | number | 5 | | allowHalf | 是否允许半选 | boolean | false |
| value | 当前数，受控值 | number | - |
| defaultValue | 默认值 | number | 0 |
| onChange | 选择时的回调 | Function(value: number) | - |
| onHoverChange | 鼠标经过时数值变化的回调 | Function(value: number) | - |
| allowHalf | 是否允许半选 | boolean | false |
| disabled | 只读，无法进行交互 | boolean | false |
| character | 自定义字符 | ReactNode | `<Icon type="star" />` | | character | 自定义字符 | ReactNode | `<Icon type="star" />` |
| className | 自定义样式类名 | string | - | | className | 自定义样式类名 | string | - |
| count | star 总数 | number | 5 |
| defaultValue | 默认值 | number | 0 |
| disabled | 只读，无法进行交互 | boolean | false |
| style | 自定义样式对象 | object | - | | 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 ### Select props
| Property | Description | Type | Default | | Property | Description | Type | Default |
|----------|----------------|----------|--------------| | -------- | ----------- | ---- | ------- |
| value | Current selected option. | string\|string[] | - | | allowClear | Show clear button. | boolean | false |
| 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 |
| combobox | Enable combobox mode (can not set multiple at the same time). (Deprecated after 2.9, use `mode` instead) | 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 | | 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 | - | | 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 | | 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 | | 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[] | | | mode | Set mode of Select (Support after 2.9) | 'multiple' \| 'tags' \| 'combobox' | - |
| firstActiveValue | Value of action option by default | string\|string[] | - | | 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 ### Option props
| Property | Description | Type | Default | | Property | Description | Type | Default |
|----------|----------------|----------|--------------| | -------- | ----------- | ---- | ------- |
| disabled | Disable this option | boolean | false | | 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 | |
| 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 | - | | title | `title` of Select after select this Option | string | - |
| value | default to filter with this property | string | - |
### OptGroup props ### OptGroup props
| Property | Description | Type | Default | | Property | Description | Type | Default |
|----------|----------------|----------|-----------------| | -------- | ----------- | ---- | ------- |
| label | Group label | string\|React.Element | - | | key | | string | - |
| 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 ### Select props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------| | --- | --- | --- | --- |
| value | 指定当前选中的条目 | string\|string[] | - | | allowClear | 支持清除 | boolean | false |
| defaultValue | 指定默认选中的条目 | string\|string[] | - |
| mode | 设置 Select 的模式（2.9 之后支持） | 'multiple' \| 'tags' \| 'combobox' | - |
| multiple | 支持多选（2.9 之后废弃，请使用 `mode`） | boolean | false |
| tags | 可以把随意输入的条目作为 tag，输入项不需要与下拉选项匹配（2.9 之后废弃，请使用 `mode`） | boolean | false |
| combobox | 输入框自动提示模式（2.9 之后废弃，请使用 `mode`） | boolean | false | | combobox | 输入框自动提示模式（2.9 之后废弃，请使用 `mode`） | boolean | false |
| allowClear | 支持清除 | boolean | false | | defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true | | defaultValue | 指定默认选中的条目 | string\|string\[] | - |
| 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 |
| disabled | 是否禁用 | boolean | false | | disabled | 是否禁用 | boolean | false |
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true
| dropdownStyle | 下拉菜单的 style 属性 | object | - |
| dropdownClassName | 下拉菜单的 className 属性 | string | - | | 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 | | 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 | | labelInValue | 是否把每个选项的 label 包装到 value 中，会把 Select 的 value 类型从 `string` 变为 `{key: string, label: ReactNode}` 的格式 | boolean | false |
| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string[] | | | mode | 设置 Select 的模式（2.9 之后支持） | 'multiple' \| 'tags' \| 'combobox' | - |
| firstActiveValue | 默认高亮的选项 | string\|string[] | - | | 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}` 将下拉弹层渲染节点固定在触发器的父元素中。 > 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentNode}` 将下拉弹层渲染节点固定在触发器的父元素中。
### Option props ### Option props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------|----------------|----------|--------------| | --- | --- | --- | --- |
| disabled | 是否禁用 | boolean | false | | disabled | 是否禁用 | boolean | false |
| value | 默认根据此属性值进行筛选 | string | - | | key | 和 value 含义一致。如果 React 需要你设置此项，此项值与 value 的值相同，然后可以省略 value 设置 | string | |
| key | 和 value 含义一致。如果 React 需要你设置此项，此项值与 value 的值相同，然后可以省略 value 设置 | string | |
| title | 选中该 Option 后，Select 的 title | string | - | | title | 选中该 Option 后，Select 的 title | string | - |
| value | 默认根据此属性值进行筛选 | string | - |
### OptGroup props ### 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 ## API
| Property | Description | Type | Default | | Property | Description | Type | Default |
|------------|----------------|-------------|--------------| | -------- | ----------- | ---- | ------- |
| range | dual thumb mode | boolean | false | defaultValue | The default value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] | 0 or [0, 0] |
| min | The minimum value the slider can slide to. | number | 0 | disabled | If true, the slider will not be interactable. | boolean | false |
| max | The maximum value the slider can slide to | number | 100 | dots | Whether the thumb can drag over tick only. | 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 | 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 } } | 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 | max | The maximum value the slider can slide to | number | 100 |
| value | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number[] | | min | The minimum value the slider can slide to. | number | 0 |
| defaultValue | The default value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number[] | 0 or [0, 0] | range | dual thumb mode | boolean | false |
| included | Make effect when `marks` not null，`true` means containment and `false` means coordinative | boolean | true | 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 |
| disabled | If true, the slider will not be interactable. | boolean | false | 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 |
| vertical | If true, the slider will be vertical. | Boolean | false | value | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] | |
| onChange | Callback function that is fired when the user changes the slider's value. | Function(value) | NOOP | vertical | If true, the slider will be vertical. | Boolean | false |
| onAfterChange | Fire when `onmouseup` is fired. | 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 | 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 ## API
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------------|----------------|-------------|--------------| | --- | --- | --- | --- |
| range | 双滑块模式 | boolean | false | defaultValue | 设置初始取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number\[] | 0 or [0, 0] |
| min | 最小值 | number | 0 | disabled | 值为 `true` 时，滑块为禁用状态 | boolean | false |
| max | 最大值 | number | 100 | dots | 是否只能拖拽到刻度上 | boolean | false |
| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 | number\|null | 1 | included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | boolean | true |
| marks | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式 | object | { number: string\|ReactNode } or { number: { style: object, label: string\|ReactNode } } | marks | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 [min, max] 内，每个标签可以单独设置样式 | object | { number: string\|ReactNode } or { number: { style: object, label: string\|ReactNode } } |
| dots | 是否只能拖拽到刻度上 | boolean | false | max | 最大值 | number | 100 |
| value | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number[] | | min | 最小值 | number | 0 |
| defaultValue | 设置初始取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number[] | 0 or [0, 0] | range | 双滑块模式 | boolean | false |
| included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | boolean | true | step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 | number\|null | 1 |
| disabled | 值为 `true` 时，滑块为禁用状态 | boolean | false | tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | Function\|null | IDENTITY |
| vertical | 值为 `true` 时，Slider 为垂直方向 | Boolean | false | value | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number\[] | |
| onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入。 | Function(value) | NOOP | vertical | 值为 `true` 时，Slider 为垂直方向 | Boolean | false |
| onAfterChange | 与 `onmouseup` 触发时机一致，把当前值作为参数传入。 | Function(value) | NOOP | onAfterChange | 与 `onmouseup` 触发时机一致，把当前值作为参数传入。 | Function(value) | NOOP |
| tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | Function\|null | IDENTITY | 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 ## API
Property | Description | Type | Default Value | Property | Description | Type | Default Value |
---------|-------------|------|-------------- | -------- | ----------- | ---- | ------------- |
size | size of Spin, options: `small`, `default` and `large` | string | `default` | delay | specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | - |
spinning | whether Spin is spinning | boolean | true | size | size of Spin, options: `small`, `default` and `large` | string | `default` |
tip | customize description content when Spin has children | string | - | spinning | whether Spin is spinning | boolean | true |
delay | specifies a delay in milliseconds for loading state (prevent flush) | number (milliseconds) | - | tip | customize description content when Spin has children | string | - |
wrapperClassName | className of wrapper 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 ## API
参数 | 说明 | 类型 | 默认值 | 参数 | 说明 | 类型 | 默认值 |
----|------|-----|------ | --- | --- | --- | --- |
size | 组件大小，可选值为 `small` `default` `large` | string | 'default' | delay | 延迟显示加载效果的时间（防止闪烁） | number (毫秒) | - |
spinning | 是否旋转 | boolean | true | size | 组件大小，可选值为 `small` `default` `large` | string | 'default' |
tip | 当作为包裹元素时，可以自定义描述文案 | string | - | spinning | 是否旋转 | boolean | true |
delay | 延迟显示加载效果的时间（防止闪烁） | number (毫秒) | - | tip | 当作为包裹元素时，可以自定义描述文案 | string | - |
wrapperClassName | 包装器的类属性 | 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. The whole of the step bar.
Property | Description | Type | Default | 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 | 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` | direction | to specify the direction of the step bar, `horizontal` and `vertical` are currently supported | string | `horizontal` |
size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` | 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 |
direction | to specify the direction of the step bar, `horizontal` and `vertical` are currently supported | string | `horizontal` | size | to specify the size of the step bar, `default` and `small` are currently supported | string | `default` |
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 | 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 ### Steps.Step
A single step in the step bar. A single step in the step bar.
Property | Description | Type | Default | 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` | description | description of the step, optional property | string\|ReactNode | - |
title | title of the step | string\|ReactNode | - | icon | icon of the step, optional property | string\|ReactNode | - |
description | description 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` |
icon | icon of the step, optional property | string\|ReactNode | - | 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 | | current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0 |
| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process | | direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | string | horizontal |
| size | 指定大小，目前支持普通（`default`）和迷你（`small`）| string | default |
| direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | string | horizontal |
| progressDot | 点状步骤条，可以设置为一个 function | Boolean or (iconDot, {index, status, title, description}) => ReactNode | false | | 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 ### Steps.Step
步骤条内的每一个步骤。 步骤条内的每一个步骤。
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------|-----------------------------------------|------------|-------| | --- | --- | --- | --- |
| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | wait | | description | 步骤的详情描述，可选 | string\|ReactNode | - |
| title | 标题 | string\|ReactNode | - |
| description | 步骤的详情描述，可选 | string\|ReactNode | - |
| icon | 步骤图标的类型，可选 | 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. - 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. - 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 ## API
### Switch ### Switch
| Property | Description | Type | Default | | 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 | | defaultChecked | to set the initial state | boolean | false |
| onChange | a callback function, can be executed when the checked state is changing | Function(checked:Boolean) | | | disabled | Disable switch | boolean | false |
| checkedChildren | content to be shown when the state is checked | string\|ReactNode | |
| unCheckedChildren | content to be shown when the state is unchecked | string\|ReactNode | |
| size | the size of the `Switch`, options: `default` `small` | string | default | | 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 ## API
### Switch ### Switch
| 参数 | 说明 | 类型 |默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|--------| | --- | --- | --- | --- |
| checked | 指定当前是否选中 | boolean | false | | checked | 指定当前是否选中 | boolean | false |
| defaultChecked | 初始是否选中 | boolean | false | | checkedChildren | 选中时的内容 | string\|ReactNode | |
| onChange | 变化时回调函数 | Function(checked:Boolean) | | | defaultChecked | 初始是否选中 | boolean | false |
| checkedChildren | 选中时的内容 | string\|ReactNode | | | size | 开关大小，可选值：`default` `small` | string | default |
| unCheckedChildren | 非选中时的内容 | string\|ReactNode | | | 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 ### Table
| Property | Description | Type | Default | | Property | Description | Type | Default |
|---------------|--------------------------|-----------------|--------------| | -------- | ----------- | ---- | ------- |
| rowSelection | Row selection [config](#rowSelection) | object | null | | bordered | Whether to show all table borders | boolean | `false` |
| pagination | Pagination [config](/components/pagination/), hide it by setting it to `false` | object | | | columns | Columns of table | [ColumnProps](https://git.io/vMMXC)\[] | - |
| size | Size of table | `default` \| `middle` \| `small` | `default` | | dataSource | Data record array to be displayed | any\[] | - |
| 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[] | - |
| defaultExpandAllRows | Expand all rows initially | boolean | `false` | | defaultExpandAllRows | Expand all rows initially | boolean | `false` |
| onExpandedRowsChange | Callback executed when the expanded rows change | Function(expandedRows) | | | defaultExpandedRowKeys | Initial expanded row keys | string\[] | - |
| onExpand | Callback executed when the row expand icon is clicked | Function(expanded, record) | | | expandedRowKeys | Current expanded row keys | string\[] | - |
| onChange | Callback executed when pagination, filters or sorter is changed | Function(pagination, filters, sorter) | | | expandedRowRender | Expanded container render for each row | Function(record):ReactNode | - |
| 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` | | footer | Table footer renderer | Function(currentPageData) | |
| 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 |
| 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` |
| onRowClick | Callback executed when a row is clicked | Function(record, index, event) | - | | 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) |
| onRowDoubleClick| Callback executed when a row is double clicked | Function(record, index, event) | - | | pagination | Pagination [config](/components/pagination/), hide it by setting it to `false` | object | |
| onRowMouseEnter | Callback executed when mouse enters a row | Function(record, index, event) | - | | rowClassName | Row's className | Function(record, index):string | - |
| onRowMouseLeave | Callback executed when mouse leaves a row | Function(record, index, event) | - | | 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) | - | | onRowContextMenu | Callback executed when right click on a row | Function(record, index, event) | - |
| bordered | Whether to show all table borders | boolean | `false` | | onRowDoubleClick | Callback executed when a row is double clicked | Function(record, index, event) | - |
| showHeader | Whether to show table header | boolean | `true` | | onRowMouseEnter | Callback executed when mouse enters a row | Function(record, index, event) | - |
| footer | Table footer renderer | Function(currentPageData) | | | onRowMouseLeave | Callback executed when mouse leaves a row | Function(record, index, event) | - |
| 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 | - |
### Column ### Column
One of the Table `columns` prop for describing the table's columns, Column has the same API. One of the Table `columns` prop for describing the table's columns, Column has the same API.
| Property | Description | Type | Default | | Property | Description | Type | Default |
|---------------|--------------------------|-----------------|--------------| | -------- | ----------- | ---- | ------- |
| title | Title of this column | string\|ReactNode | - | | className | className of this column | string | - |
| key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - | | colSpan | Span of this column's title | number | |
| dataIndex | Display field of the data record, could be set like `a.b.c` | 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` |
| filterDropdown | Customized filter overlay | ReactNode | - | | filterDropdown | Customized filter overlay | ReactNode | - |
| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - | | 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` | | filtered | Whether the `dataSource` is filtered | boolean | `false` |
| filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - |
| filterIcon | Customized filter icon | ReactNode | `false` | | 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 | - | | filterMultiple | Whether multiple filters can be selected | boolean | `true` |
| colSpan | Span of this column's title | number | | | filters | Filter menu config | object\[] | - |
| width | Width of this column | string\|number | - | | fixed | Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean\|string | `false` |
| className | className of this column | string | - | | key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - |
| fixed | Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean\|string | `false` | | 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 | - | | 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) | - | | 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 ### ColumnGroup
| Property | Description | Type | Default | | Property | Description | Type | Default |
|---------------|--------------------------|-----------------|--------------| | -------- | ----------- | ---- | ------- |
| title | Title of the column group | string\|ReactNode | - | | title | Title of the column group | string\|ReactNode | - |
### rowSelection ### rowSelection
Properties for row selection. Properties for row selection.
| Property | Description | Type | Default | | Property | Description | Type | Default |
|---------------|--------------------------|-----------------|--------------| | -------- | ----------- | ---- | ------- |
| type | `checkbox` or `radio` | `checkbox` \| `radio` | `checkbox` | | getCheckboxProps | Get Checkbox or Radio props | Function(record) | - |
| 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 | - |
| hideDefaultSelections | Remove the default `Select All` and `Select Invert` selections | boolean | `false` | | 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 ### selection
| Property | Description | Type | Default | | Property | Description | Type | Default |
|---------------|--------------------------|-----------------|--------------| | -------- | ----------- | ---- | ------- |
| key | Unique key of this selection | string | - | | key | Unique key of this selection | string | - |
| text | Display text of this selection | string\|React.ReactNode | - | | text | Display text of this selection | string\|React.ReactNode | - |
| onSelect | Callback executed when this selection is clicked | Function(changeableRowKeys) | - | | onSelect | Callback executed when this selection is clicked | Function(changeableRowKeys) | - |
## Using in TypeScript ## Using in TypeScript

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

@ -51,92 +51,92 @@ const columns = [{
### Table ### Table
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|---------------|--------------------------|-----------------|---------| | --- | --- | --- | --- |
| rowSelection | 列表项是否可选择，[配置项](#rowSelection) | object | null | | bordered | 是否展示外边框和列边框 | boolean | false |
| pagination | 分页器，配置项参考 [pagination](/components/pagination/)，设为 false 时不展示和进行分页 | object | | | columns | 表格列的配置描述，具体项见下表 | [ColumnProps](https://git.io/vMMXC)\[] | - |
| size | 正常或迷你类型，`default` or `small` | string | default | | dataSource | 数据数组 | any\[] | |
| 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[] | - |
| defaultExpandAllRows | 初始时，是否展开所有行 | boolean | false | | defaultExpandAllRows | 初始时，是否展开所有行 | boolean | false |
| onExpandedRowsChange | 展开的行变化时触发 | Function(expandedRows) | | | defaultExpandedRowKeys | 默认展开的行 | string\[] | - |
| onExpand | 点击展开图标时触发 | Function(expanded, record) | | | expandedRowKeys | 展开的行，控制属性 | string\[] | - |
| onChange | 分页、排序、筛选变化时触发 | Function(pagination, filters, sorter) | | | expandedRowRender | 额外的展开行 | Function(record):ReactNode | - |
| loading | 页面是否加载中 | boolean\|[object](https://ant.design/components/spin-cn/#API) ([更多](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | false | | footer | 表格尾部 | Function(currentPageData) | |
| locale | 默认文案设置，目前包括排序、过滤、空数据文案 | object | filterConfirm: '确定' <br> filterReset: '重置' <br> emptyText: '暂无数据' <br> [默认值](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) | | indentSize | 展示树形数据时，每层缩进的宽度，以 px 为单位 | number | 15 |
| 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 |
| onRowClick | 点击行时触发 | Function(record, index, event) | - | | locale | 默认文案设置，目前包括排序、过滤、空数据文案 | object | filterConfirm: '确定' <br> filterReset: '重置' <br> emptyText: '暂无数据' <br> [默认值](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) |
| onRowDoubleClick| 双击行时触发 | Function(record, index, event) | - | | pagination | 分页器，配置项参考 [pagination](/components/pagination/)，设为 false 时不展示和进行分页 | object | |
| onRowMouseEnter | 鼠标移入行时触发 | Function(record, index, event) | - | | rowClassName | 表格行的类名 | Function(record, index):string | - |
| onRowMouseLeave | 鼠标移出行时触发 | Function(record, index, event) | - | | 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) | - | | onRowContextMenu | 右键行时触发 | Function(record, index, event) | - |
| bordered | 是否展示外边框和列边框 | boolean | false | | onRowDoubleClick | 双击行时触发 | Function(record, index, event) | - |
| showHeader | 是否显示表头 | boolean | true | | onRowMouseEnter | 鼠标移入行时触发 | Function(record, index, event) | - |
| footer | 表格尾部 | Function(currentPageData) | | | onRowMouseLeave | 鼠标移出行时触发 | Function(record, index, event) | - |
| title | 表格标题 | Function(currentPageData) | |
| scroll | 横向或纵向支持滚动，也可用于指定滚动区域的宽高度：`{{ x: true, y: 300 }}` | object | - |
### Column ### Column
列描述数据对象，是 columns 中的一项，Column 使用相同的 API。 列描述数据对象，是 columns 中的一项，Column 使用相同的 API。
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|----------------------------|-----------------|---------| | --- | --- | --- | --- |
| title | 列头显示文字 | string\|ReactNode | - | | className | 列的 className | string | - |
| key | React 需要的 key，如果已经设置了唯一的 `dataIndex`，可以忽略这个属性 | string | - | | colSpan | 表头列合并,设置为 0 时，不渲染 | number | |
| dataIndex | 列数据在数据项中对应的 key，支持 `a.b.c` 的嵌套写法 | 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 |
| filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | ReactNode | - | | filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | ReactNode | - |
| filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - | | filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - |
| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - |
| filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string[] | - |
| filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false | | filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false |
| filterIcon | 自定义 fiter 图标。| ReactNode | false | | filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string\[] | - |
| sorter | 排序函数，本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction)，需要服务端排序可设为 true | Function\|boolean | - | | filterIcon | 自定义 fiter 图标。 | ReactNode | false |
| colSpan | 表头列合并,设置为 0 时，不渲染 | number | | | filterMultiple | 是否多选 | boolean | true |
| width | 列宽度 | string\|number | - | | filters | 表头的筛选菜单项 | object\[] | - |
| className | 列的 className | string | - | | fixed | 列是否固定，可选 `true`(等效于 left) `'left'` `'right'` | boolean\|string | false |
| 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 | - | | sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 `'ascend'` `'descend'` `false` | boolean\|string | - |
| title | 列头显示文字 | string\|ReactNode | - |
| width | 列宽度 | string\|number | - |
| onCellClick | 单元格点击回调 | Function(record, event) | - | | onCellClick | 单元格点击回调 | Function(record, event) | - |
| onFilter | 本地模式下，确定筛选的运行函数 | Function | - |
| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - |
### ColumnGroup ### ColumnGroup
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|----------------------------|-----------------|---------| | --- | --- | --- | --- |
| title | 列头显示文字 | string\|ReactNode | - | | title | 列头显示文字 | string\|ReactNode | - |
### rowSelection ### rowSelection
选择功能的配置。 选择功能的配置。
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------------------|--------------------------|-----------------|---------------------| | --- | --- | --- | --- |
| type | 多选/单选，`checkbox` or `radio` | string | `checkbox` | | getCheckboxProps | 选择框的默认属性配置 | Function(record) | - |
| 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 |
| hideDefaultSelections | 去掉『全选』『反选』两个默认选项 | boolean | false | | 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 ### selection
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------------------|--------------------------|-----------------|---------------------| | --- | --- | --- | --- |
| key | React 需要的 key，建议设置 | string | - | | key | React 需要的 key，建议设置 | string | - |
| text | 选择项显示的文字 | string\|React.ReactNode | - | | text | 选择项显示的文字 | string\|React.ReactNode | - |
| onSelect | 选择项点击回调 | Function(changeableRowKeys) | - | | onSelect | 选择项点击回调 | Function(changeableRowKeys) | - |
## 在 TypeScript 中使用 ## 在 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 ### Tabs
| Property | Description | Type | Default | | Property | Description | Type | Default |
|--------------|-----------------------|----------|--------------| | -------- | ----------- | ---- | ------- |
| activeKey | Current TabPane's key| string | - | | 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` |
| animated | Whether to change tabs with animation. Only works while `tabPosition="top"\|"bottom"` | boolean \| {inkBar:boolean, tabPane:boolean} | `true`, `false` when `type="card"` | | 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 ### Tabs.TabPane
| Property | Description | Type | Default |
|--------------|-----------------------|----------|--------------| | Property | Description | Type | Default |
| key | TabPane's key | string | - | | -------- | ----------- | ---- | ------- |
| tab | Show text in TabPane's head | string\|ReactNode | - |
| forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false | | 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 ### Tabs
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------------------|----------------------------------------------|----------|---------------| | --- | --- | --- | --- |
| activeKey | 当前激活 tab 面板的 key | string | 无 | | 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 |
| animated | 是否使用动画切换 Tabs，在 `tabPosition=top|bottom` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | true, 当 type="card" 时为 false | | 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 ### Tabs.TabPane
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|------|------------------|-------------------------|--------| | --- | --- | --- | --- |
| key | 对应 activeKey | string | 无 |
| tab | 选项卡头显示文字 | string\|ReactNode | 无 |
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | | 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 ### Tag
| Property | Description | Type | Default | | Property | Description | Type | Default |
|--------------|-----------------------|----------|--------------| | -------- | ----------- | ---- | ------- |
| color | Color of the Tag | string | - | | afterClose | Callback executed when close animation is completed | () => void | - |
| closable | Whether Tag can be closed | boolean | `false` | | closable | Whether Tag can be closed | boolean | `false` |
| onClose | Callback executed when tag is closed | (e) => void | - | | color | Color of the Tag | string | - |
| afterClose | Callback executed when close animation is completed | () => void | - | | onClose | Callback executed when tag is closed | (e) => void | - |
### Tag.CheckableTag ### Tag.CheckableTag
| Property | Description | Type | Default | | Property | Description | Type | Default |
|--------------|-----------------------|----------|--------------| | -------- | ----------- | ---- | ------- |
| checked | Checked status of Tag | boolean | `false` | | checked | Checked status of Tag | boolean | `false` |
| onChange | Callback executed when Tag is checked/unchecked | (checked) => void | - | | 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 ### Tag
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------------|-------------------------------|------|-------| | --- | --- | --- | --- |
| color | 标签色 | string | - | | afterClose | 关闭动画完成后的回调 | () => void | - |
| closable | 标签是否可以关闭 | boolean | false | | closable | 标签是否可以关闭 | boolean | false |
| onClose | 关闭时的回调 | (e) => void | - | | color | 标签色 | string | - |
| afterClose | 关闭动画完成后的回调 | () => void | - | | onClose | 关闭时的回调 | (e) => void | - |
### Tag.CheckableTag ### Tag.CheckableTag
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------------|-------------------------------|------|--------| | --- | --- | --- | --- |
| checked | 设置标签的选中状态 | boolean | false | | checked | 设置标签的选中状态 | boolean | false |
| onChange | 点击标签时触发的回调 | (checked) => void | - | | onChange | 点击标签时触发的回调 | (checked) => void | - |

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

@ -7,37 +7,39 @@ title: TimePicker
To select/input a time. To select/input a time.
## When To Use ## When To Use
--------
* * *
By clicking the input box, you can select a time from a popup panel. By clicking the input box, you can select a time from a popup panel.
## API ## API
---
* * *
```jsx ```jsx
import moment from 'moment'; import moment from 'moment';
<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} /> <TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />
``` ```
| Property | Description | Type | Default | | 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) | - |
| addon | called from timepicker panel to render some addon to its bottom | function | - | | 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 | '' | | 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 | '' | | 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> <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 ## API
---
* * *
```jsx ```jsx
import moment from 'moment'; import moment from 'moment';
<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} /> <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 | 无 | | addon | 选择框底部显示自定义的内容 | function | 无 |
| use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false |
| className | 选择器类名 | string | '' | | 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 | '' | | 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> <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 Timeline
| Property | Description | Type | Default | | Property | Description | Type | Default |
|----------|----------------------------------------|------------|-------| | -------- | ----------- | ---- | ------- |
| pending | Set the last ghost node's existence or its content | boolean\|string\|ReactNode | `false` | | pending | Set the last ghost node's existence or its content | boolean\|string\|ReactNode | `false` |
### Timeline.Item ### Timeline.Item
Node of timeline Node of timeline
| Property | Description | Type | Default | | Property | Description | Type | Default |
|----------|------------------------------------------|------------|-------| | -------- | ----------- | ---- | ------- |
| color | Set the circle's color to `blue`, `red`, `green` or other custom colors | string | `blue` | | color | Set the circle's color to `blue`, `red`, `green` or other custom colors | string | `blue` |
| dot | Customize timeline dot | string\|ReactNode | - | | 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 ### Timeline.Item
时间轴的每一个节点。 时间轴的每一个节点。
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|----------|------------------------------------------|------------|-------| | --- | --- | --- | --- |
| color | 指定圆圈颜色 `blue, red, green`，或自定义的色值 | string | blue | | color | 指定圆圈颜色 `blue, red, green`，或自定义的色值 | string | blue |
| dot | 自定义时间轴点 | string\|ReactNode | - | | dot | 自定义时间轴点 | string\|ReactNode | - |

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

@ -13,28 +13,27 @@ A simple text popup tip.
## API ## API
| Property | Description | Type | Default | | Property | Description | Type | Default |
|-----------|------------------------------------------|------------|--------| | -------- | ----------- | ---- | ------- |
| title | The text shown in the tooltip | string\|React.Element | - | | title | The text shown in the tooltip | string\|React.Element | - |
### Common API ### Common API
The following APIs are shared by Tooltip, Popconfirm, Popover. The following APIs are shared by Tooltip, Popconfirm, Popover.
| Property | Description | Type | Default | | 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 |
| arrowPointAtCenter | Whether the arrow is pointed at the center of target, supported after `antd@1.11+` | boolean | `false` | | 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` | | 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` | | 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 |
| onVisibleChange | Callback executed when visibility of the tooltip card is changed | (visible) => void | - |
| mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0 | | 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 | | 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 | - |
| overlayClassName | Class name of the tooltip card | string | - | | overlayStyle | Style of the tooltip card | object | - |
| 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 ## Note

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

@ -15,27 +15,27 @@ title: Tooltip
## API ## API
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|--------| | --- | --- | --- | --- |
| title | 提示文字 | React.ReactNode | 无 | | title | 提示文字 | React.ReactNode | 无 |
### 共同的 API ### 共同的 API
以下 API 为 Tooltip、Popconfirm、Popover 共享的 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` | | arrowPointAtCenter | 箭头是否指向目标元素中心，`antd@1.11+` 支持 | boolean | `false` |
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | `true` | | autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | `true` |
| visible | 用于手动控制浮层显隐 | boolean | false | | getPopupContainer | 浮层渲染父节点，默认渲染到 body 上。`2.5.2` 之前请使用 `getTooltipContainer` | Function(triggerNode) | () => document.body |
| onVisibleChange | 显示隐藏的回调 | (visible) => void | 无 |
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0 | | mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0 |
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 | | mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 |
| trigger | 触发行为，可选 `hover/focus/click` | string | hover | | overlayClassName | 卡片类名 | string | 无 |
| overlayClassName | 卡片类名 | string | 无 | | overlayStyle | 卡片样式 | object | 无 |
| 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 ## API
| Property | Description | Type | Default | | 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 | |
| className | A custom CSS class. | string | ['', ''] | | className | A custom CSS class. | string | ['', ''] |
| titles | A set of titles that are sorted from left to right. | string[] | - | | 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)\[] | \[] |
| operations | A set of operations that are sorted from bottom to top. | string[] | ['>', '<'] | | filterOption | A function to determine whether an item should show in search result list | (inputValue, option): boolean | |
| 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' |
| footer | A function used for rendering the footer. | (props): ReactNode | | | 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 }` | | 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 | - | | 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 ## 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. 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. 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 ```jsx
// eg. your primary key is `uid` // eg. your primary key is `uid`
return <Transfer rowKey={record => record.uid} />; return <Transfer rowKey={record => record.uid} />;

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

@ -17,26 +17,26 @@ title: Transfer
## API ## 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 | | | className | 自定义类 | string | |
| titles | 标题集合，顺序从左至右 | string[] | ['', ''] | | dataSource | 数据源，其中的数据将会被渲染到左边一栏中，`targetKeys` 中指定的除外。 | [TransferItem](https://git.io/vMM64)\[] | \[] |
| operations | 操作文案集合，顺序从下至上 | string[] | ['>', '<'] | | filterOption | 接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | (inputValue, option): boolean | |
| showSearch | 是否显示搜索框 | boolean | false |
| filterOption | 接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。| (inputValue, option): boolean | |
| searchPlaceholder | 搜索框的默认值 | string | '请输入搜索内容' |
| notFoundContent | 当列表为空时显示的内容 | string\|ReactNode | '列表为空' |
| footer | 底部渲染函数 | (props): ReactNode | | | footer | 底部渲染函数 | (props): ReactNode | |
| lazy | Transfer 使用了 [react-lazy-load](https://github.com/loktar00/react-lazy-load) 优化性能，这里可以设置相关参数。设为 `false` 可以关闭懒加载。 | object\|boolean | `{ height: 32, offset: 32 }` | | 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 | - | | 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. `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. 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 ## API
### Tree props ### Tree props
Property | Description | Type | Default | Property | Description | Type | Default |
-----|-----|-----|------ | -------- | ----------- | ---- | ------- |
value | To set the current selected treeNode(s). | string\|string[] | - | allowClear | Whether allow clear | boolean | false |
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\[] | - |
defaultValue | To set the initial selected treeNode(s). | string\|string[] | - | disabled | Disabled or not | boolean | false |
multiple | Support multiple or not, will be `true` when enable `treeCheckable`. | boolean | false | dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width | boolean | true |
onSelect | A callback function, can be executed when you select a treeNode. | function(value, node, extra) | - | dropdownStyle | To set the style of the dropdown menu | object | - |
onChange | A callback function, can be executed when selected treeNodes or input value change | function(value, label, extra) | - | 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 |
allowClear | Whether allow clear | boolean | false | 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 |
onSearch | A callback function, can be executed when the search input changes. | function(value: string) | - | labelInValue | whether to embed label in value, turn the format of value from `string` to \`{key: string, label: ReactNode, halfChecked: string\[]} \| boolean \| false | | |
placeholder | Placeholder of the select input | string | - | loadData | Load data asynchronously. | function(node) | - |
searchPlaceholder | Placeholder of the search input | string | - | multiple | Support multiple or not, will be `true` when enable `treeCheckable`. | boolean | false |
dropdownStyle | To set the style of the dropdown menu | object | - | placeholder | Placeholder of the select input | string | - |
dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width | boolean | true | searchPlaceholder | Placeholder of the search input | string | - |
size | To set the size of the select input, options: `large` `small` | string | 'default' | 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 | 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 | size | To set the size of the select input, options: `large` `small` | string | 'default' |
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 | treeCheckable | Whether to show checkbox on the treeNodes | boolean | false |
treeDefaultExpandAll | Whether to expand all treeNodes by default | 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 |
treeDefaultExpandedKeys | Default expanded treeNodes | string[] | - | 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] }> | \[] |
treeCheckable | Whether to show checkbox on the treeNodes | boolean | false | 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 |
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 | treeDefaultExpandAll | Whether to expand all treeNodes by default | 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 | treeDefaultExpandedKeys | Default expanded treeNodes | string\[] | - |
treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | 'value' | treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | 'value' |
treeNodeLabelProp | Will render as content of select | string | 'title' | 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] }> | [] | value | To set the current selected treeNode(s). | string\|string\[] | - |
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 | onChange | A callback function, can be executed when selected treeNodes or input value change | function(value, label, extra) | - |
loadData | Load data asynchronously. | function(node) | - | onSearch | A callback function, can be executed when the search input changes. | function(value: string) | - |
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 | onSelect | A callback function, can be executed when you select a treeNode. | function(value, node, extra) | - |
### TreeNode props ### TreeNode props
> We recommend you to use `treeData` rather than `TreeNode`, to avoid the trouble of manual construction. > We recommend you to use `treeData` rather than `TreeNode`, to avoid the trouble of manual construction.
Property | Description | Type | Default | Property | Description | Type | Default |
-----|-----|-----|------ | -------- | ----------- | ---- | ------- |
disabled | Disabled or not | boolean | false | disableCheckbox | Disables the checkbox of the treeNode | boolean | false |
disableCheckbox | Disables the checkbox of the treeNode | boolean | false | disabled | Disabled or not | boolean | false |
key | Required property, should be unique in the tree | string | - | isLeaf | Leaf node or not | boolean | false |
value | Will be treated as `treeNodeFilterProp` by default, should be unique in the tree | string | - | key | Required property, should be unique in the tree | string | - |
title | Content showed on the treeNodes | string\|ReactNode | '---' | title | Content showed on the treeNodes | string\|ReactNode | '---' |
isLeaf | Leaf node or not | boolean | false | 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 ### 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 | | 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 | - | | placeholder | 选择框默认文字 | string | - |
| searchPlaceholder | 搜索框默认文字 | 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 | | showCheckedStrategy | 定义选中项回填的方式。`TreeSelect.SHOW_ALL`: 显示所有选中节点(包括父节点). `TreeSelect.SHOW_PARENT`: 只显示父节点(当父节点下所有子节点都选中时). 默认只显示子节点. | enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD |
| treeDefaultExpandAll | 默认展开所有树节点 | boolean | false | | showSearch | 在下拉中显示搜索框(仅在单选模式下生效) | boolean | false |
| treeDefaultExpandedKeys | 默认展开的树节点 | string[] | - | | size | 选择框大小，可选 `large` `small` | string | 'default' |
| treeCheckable | 显示 checkbox | boolean | false | | treeCheckable | 显示 checkbox | boolean | false |
| treeCheckStrictly | checkable 状态下节点选择完全受控（父子节点选中状态不再关联），会使得 `labelInValue` 强制为 true | 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' | | treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | string | 'value' |
| treeNodeLabelProp | 作为显示的 prop 设置 | string | 'title' | | treeNodeLabelProp | 作为显示的 prop 设置 | string | 'title' |
| treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（value 在整个树范围内唯一）| array<{value, label, children, [disabled, disableCheckbox, selectable]}> | [] | | value | 指定当前选中的条目 | string/string\[] | - |
|treeDataSimpleMode | 使用简单格式的 treeData，具体设置参考可设置的类型 (此时 treeData 应变为这样的数据结构: [{id:1, pId:0, value:'1', label:"test1",...},...], `pId` 是父节点的 id) | false\|Array<{ id: string, pId: string, rootPId: null }> | false | | onChange | 选中树节点时调用此函数 | function(value, label, extra) | - |
| loadData | 异步加载数据 | function(node) | - | | onSearch | 文本框值变化时回调 | function(value: string) | - |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body | | onSelect | 被选中时调用 | function(value, node, extra) | - |
### TreeNode props ### TreeNode props
> 建议使用 treeData 来代替 TreeNode，免去手工构造麻烦 > 建议使用 treeData 来代替 TreeNode，免去手工构造麻烦
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|--------| | --- | --- | --- | --- |
| disabled | 是否禁用 | boolean | false |
| disableCheckbox | 禁掉 checkbox | boolean | false | | disableCheckbox | 禁掉 checkbox | boolean | false |
| key | 此项必须设置（其值在整个树范围内唯一） | string | - | | disabled | 是否禁用 | boolean | false |
| value | 默认根据此属性值进行筛选（其值在整个树范围内唯一） | string | - |
| title | 树节点显示的内容 | string\|ReactNode | '---' |
| isLeaf | 是否是叶子节点 | 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 ### Tree props
| Property | Description | Type | Default | | Property | Description | Type | Default |
|----------------|--------------------------------------------------|------------|---------| | -------- | ----------- | ---- | ------- |
|multiple | Allows selecting multiple treeNodes | boolean | false | | autoExpandParent | Whether to automatically expand a parent treeNode | boolean | true |
|checkable | Adds a `Checkbox` before the treeNodes | boolean | false | | checkable | Adds a `Checkbox` before the treeNodes | boolean | false |
|defaultExpandAll | Whether to expand all treeNodes by default | 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\[]} | \[] |
|defaultExpandedKeys | Specify the keys of the default expanded treeNodes | string[] | [] | | checkStrictly | Check treeNode precisely; parent treeNode and children treeNodes are not associated | boolean | false |
|expandedKeys |(Controlled) Specifies the keys of the expanded treeNodes | string[] | [] | | defaultCheckedKeys | Specifies the keys of the default checked treeNodes | string\[] | \[] |
|autoExpandParent | Whether to automatically expand a parent treeNode | boolean | true | | defaultExpandAll | Whether to expand all treeNodes by default | boolean | false |
|defaultCheckedKeys | Specifies the keys of the default checked treeNodes | string[] | [] | | defaultExpandedKeys | Specify the keys of the default expanded 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[]} | [] | | defaultSelectedKeys | Specifies the keys of the default selected treeNodes | string\[] | \[] |
|checkStrictly| Check treeNode precisely; parent treeNode and children treeNodes are not associated | boolean | false | | draggable | Specifies whether this Tree is draggable (IE > 8) | boolean | false |
|defaultSelectedKeys | Specifies the keys of the default selected treeNodes | string[] | [] | | expandedKeys | (Controlled) Specifies the keys of the expanded treeNodes | string\[] | \[] |
|selectedKeys |(Controlled) Specifies the keys of the selected treeNodes | string[] | - | | filterTreeNode | Defines a function to filter (highlight) treeNodes. When the function returns `true`, the corresponding treeNode will be highlighted | function(node) | - |
|onExpand | Callback function for when a treeNode is expanded or collapsed | function(expandedKeys, {expanded: bool, node}) | - | | loadData | Load data asynchronously | function(node) | - |
|onCheck | Callback function for when the onCheck event occurs | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | - | | multiple | Allows selecting multiple treeNodes | boolean | false |
|onSelect | Callback function for when the user clicks a treeNode | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - | | selectedKeys | (Controlled) Specifies the keys of the selected treeNodes | string\[] | - |
|filterTreeNode | Defines a function to filter (highlight) treeNodes. When the function returns `true`, the corresponding treeNode will be highlighted | function(node) | - | | 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 |
|loadData | Load data asynchronously | function(node)| - | | showLine | Shows a connecting line | boolean | false |
|onRightClick | Callback function for when the user right clicks a treeNode | function({event, node}) | - | | onCheck | Callback function for when the onCheck event occurs | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | - |
|draggable | Specifies whether this Tree is draggable (IE > 8) | boolean | false | | onDragEnd | Callback function for when the onDragEnd event occurs | function({event, node}) | - |
|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}) | - |
|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}) | - | | onDragOver | Callback function for when the onDragOver event occurs | function({event, node}) | - |
|onDragLeave | Callback function for when the onDragLeave event occurs | function({event, node}) | - | | onDragStart | Callback function for when the onDragStart 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}) | - |
|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}) | - |
|showLine | Shows a connecting line | boolean | false | | onRightClick | Callback function for when the user right clicks a treeNode | function({event, node}) | - |
|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 | | onSelect | Callback function for when the user clicks a treeNode | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |
### TreeNode props ### TreeNode props
| Property | Description | Type | Default | | Property | Description | Type | Default |
|-----------|------------------------------------------|---------|---------| | -------- | ----------- | ---- | ------- |
|disabled | Disables the treeNode | boolean | false | | disableCheckbox | Disables the checkbox of the treeNode | boolean | false |
|disableCheckbox | Disables the checkbox of the treeNode | boolean | false | | disabled | Disables the treeNode | boolean | false |
|title | Title | string\|ReactNode | '---' | | 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 | | 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 | | title | Title | string\|ReactNode | '---' |
## Note ## Note

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

@ -13,44 +13,44 @@ subtitle: 树形控件
### Tree props ### Tree props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|--------| | --- | --- | --- | --- |
|multiple | 支持点选多个节点（节点本身） | boolean | false | | autoExpandParent | 是否自动展开父节点 | boolean | true |
|checkable | 节点前添加 Checkbox 复选框 | boolean | false | | checkable | 节点前添加 Checkbox 复选框 | boolean | false |
|defaultExpandAll | 默认展开所有树节点 | boolean | false | | checkedKeys | （受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点key，则子节点自动选中；相应当子节点key都传入，父节点也自动选中。当设置`checkable`和`checkStrictly`，它是一个有`checked`和`halfChecked`属性的对象，并且父子节点的选中与否不再关联 | string\[] \| {checked: string\[], halfChecked: string\[]} | \[] |
|defaultExpandedKeys | 默认展开指定的树节点 | string[] | [] | | checkStrictly | checkable状态下节点选择完全受控（父子节点选中状态不再关联） | boolean | false |
|expandedKeys | （受控）展开指定的树节点 | string[] | [] | | defaultCheckedKeys | 默认选中复选框的树节点 | string\[] | \[] |
|autoExpandParent | 是否自动展开父节点 | boolean | true | | defaultExpandAll | 默认展开所有树节点 | boolean | false |
|defaultCheckedKeys | 默认选中复选框的树节点 | string[] | [] | | defaultExpandedKeys | 默认展开指定的树节点 | string\[] | \[] |
|checkedKeys | （受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点key，则子节点自动选中；相应当子节点key都传入，父节点也自动选中。当设置`checkable`和`checkStrictly`，它是一个有`checked`和`halfChecked`属性的对象，并且父子节点的选中与否不再关联 | string[] \| {checked: string[], halfChecked: string[]} | [] | | defaultSelectedKeys | 默认选中的树节点 | string\[] | \[] |
|checkStrictly| checkable状态下节点选择完全受控（父子节点选中状态不再关联）| boolean | false | | draggable | 设置节点可拖拽（IE>8） | boolean | false |
|defaultSelectedKeys | 默认选中的树节点 | string[] | [] | | expandedKeys | （受控）展开指定的树节点 | string\[] | \[] |
|selectedKeys | （受控）设置选中的树节点 | string[] | - | | filterTreeNode | 按需筛选树节点（高亮），返回true | function(node) | - |
|onExpand | 展开/收起节点时触发 | function(expandedKeys, {expanded: bool, node}) | - | | loadData | 异步加载数据 | function(node) | - |
|onCheck | 点击复选框触发 | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | - | | multiple | 支持点选多个节点（节点本身） | boolean | false |
|onSelect | 点击树节点触发 | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - | | selectedKeys | （受控）设置选中的树节点 | string\[] | - |
|filterTreeNode | 按需筛选树节点（高亮），返回true | function(node) | - | | showIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false |
|loadData | 异步加载数据 | function(node)| - | | showLine | 是否展示连接线 | boolean | false |
|onRightClick | 响应右键点击 | function({event, node}) | - | | onCheck | 点击复选框触发 | function(checkedKeys, e:{checked: bool, checkedNodes, node, event}) | - |
|draggable | 设置节点可拖拽（IE>8） | boolean | false | | onDragEnd | dragend 触发时调用 | function({event, node}) | - |
|onDragStart | 开始拖拽时调用 | function({event, node}) | - | | onDragEnter | dragenter 触发时调用 | function({event, node, expandedKeys}) | - |
|onDragEnter | dragenter 触发时调用 | function({event, node, expandedKeys}) | - | | onDragLeave | dragleave 触发时调用 | function({event, node}) | - |
|onDragOver | dragover 触发时调用 | function({event, node}) | - | | onDragOver | dragover 触发时调用 | function({event, node}) | - |
|onDragLeave | dragleave 触发时调用 | function({event, node}) | - | | onDragStart | 开始拖拽时调用 | function({event, node}) | - |
|onDragEnd | dragend 触发时调用 | function({event, node}) | - | | onDrop | drop 触发时调用 | function({event, node, dragNode, dragNodesKeys}) | - |
|onDrop | drop 触发时调用 | function({event, node, dragNode, dragNodesKeys}) | - | | onExpand | 展开/收起节点时触发 | function(expandedKeys, {expanded: bool, node}) | - |
|showLine | 是否展示连接线 | boolean | false | | onRightClick | 响应右键点击 | function({event, node}) | - |
|showIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false | | onSelect | 点击树节点触发 | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |
### TreeNode props ### TreeNode props
| 参数 | 说明 | 类型 | 默认值 | | 参数 | 说明 | 类型 | 默认值 |
|-----------|------------------------------------------|------------|--------| | --- | --- | --- | --- |
|disabled | 禁掉响应 | boolean | false | | disableCheckbox | 禁掉 checkbox | boolean | false |
|disableCheckbox | 禁掉 checkbox | boolean | false | | disabled | 禁掉响应 | boolean | false |
|title | 标题 | string\|ReactNode | '---' | | isLeaf | 设置为叶子节点(设置了`loadData`时有效) | boolean | false |
|key | 被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意：整个树范围内的所有节点的 key 值不能重复！ | string | 内部计算出的节点位置 | | key | 被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意：整个树范围内的所有节点的 key 值不能重复！ | string | 内部计算出的节点位置 |
|isLeaf | 设置为叶子节点(设置了`loadData`时有效) | boolean | false | | 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. > 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| | Property | Description | Type | Default |
|------------|----------------------------------------------------| ----------- |--------| | -------- | ----------- | ---- | ------- |
| name | The name of uploading file | string | 'file' | | 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 | - |
| defaultFileList | Default list of files that have been uploaded. | object[] | - | | action | Required. Uploading URL | string | - |
| 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[] | - | | 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` | - |
| 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` | - |
| customRequest | override for the default xhr behavior allowing for additional customization and ability to implement your own XMLHttpRequest | Function | - | | 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 | - | | data | Uploading params or function which can return uploading params. | object\|function(file) | - |
| listType | Built-in stylesheets, support for three types: `text`, `picture` or `picture-card` | string | 'text'| | defaultFileList | Default list of files that have been uploaded. | object\[] | - |
| onPreview | A callback function, will be executed when file link or preview icon is clicked. | Function(file) | - | | disabled | disable upload button | boolean | false |
| 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` | - | | 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\[] | - |
| supportServerRender | Need to be turned on while the server side is rendering.| boolean | false | | headers | Set request headers, valid above IE10. | object | - |
| disabled | disable upload button | boolean | false | | 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 | | 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 ### onChange
@ -75,8 +75,8 @@ Please set property `url` of property `fileList` to control content of link
## customRequest ## customRequest
* https://github.com/react-component/upload#customrequest - <https://github.com/react-component/upload#customrequest>
## IE note ## 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)。 > 服务端上传接口实现可以参考 [jQuery-File-Upload](https://github.com/blueimp/jQuery-File-Upload/wiki)。
| 参数 | 说明 | 类型 | 默认值| | 参数 | 说明 | 类型 | 默认值 |
|------------|--------------------------------------------------------------| ----------- |-------| | --- | --- | --- | --- |
| name | 发到后台的文件参数名 | string | 'file' | | accept | 接受上传的文件类型, 详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-accept) | string | 无 |
| defaultFileList | 默认已经上传的文件列表 | object[] | 无 | | action | 必选参数, 上传的地址 | string | 无 |
| fileList | 已经上传的文件列表（受控），使用此参数时，如果遇到 `onChange` 只调用一次的问题，请参考 [#2423](https://github.com/ant-design/ant-design/issues/2423) | object[] | 无 | | beforeUpload | 上传文件之前的钩子，参数为上传的文件，若返回 `false` 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传。**注意：IE9 不支持该方法**。 | (file, fileList) => `boolean | Promise` | 无 |
| 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` | 无 |
| customRequest | 通过覆盖默认的上传行为，可以自定义自己的上传实现 | Function | 无 | | customRequest | 通过覆盖默认的上传行为，可以自定义自己的上传实现 | Function | 无 |
| onChange | 上传文件改变时的状态，详见 [onChange](#onChange) | Function | 无 | | data | 上传所需参数或返回上传参数的方法 | object\|function(file) | 无 |
| listType | 上传列表的内建样式，支持三种基本样式 `text`, `picture` 和 `picture-card` | string | 'text'| | defaultFileList | 默认已经上传的文件列表 | object\[] | 无 |
| onPreview | 点击文件链接或预览图标时的回调 | Function(file) | 无 | | disabled | 是否禁用 | boolean | false |
| onRemove   | 点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除。               | Function(file): `boolean | Promise` | 无   | | fileList | 已经上传的文件列表（受控），使用此参数时，如果遇到 `onChange` 只调用一次的问题，请参考 [#2423](https://github.com/ant-design/ant-design/issues/2423) | object\[] | 无 |
| supportServerRender | 服务端渲染时需要打开这个 | boolean | false | | headers | 设置上传的请求头部，IE10 以上有效 | object | 无 |
| disabled | 是否禁用 | boolean | false | | 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 | | withCredentials | 上传请求时是否携带 cookie | boolean | false |
| onChange | 上传文件改变时的状态，详见 [onChange](#onChange) | Function | 无 |
| onPreview | 点击文件链接或预览图标时的回调 | Function(file) | 无 |
| onRemove   | 点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除。               | Function(file): `boolean | Promise` | 无   |
### onChange ### onChange
@ -64,6 +64,7 @@ title: Upload
response: '{"status": "success"}', // 服务端响应内容 response: '{"status": "success"}', // 服务端响应内容
} }
``` ```
> `antd@1.9.0` 之前，multiple 模式下，此参数为一个对象数组 `[file, ...]`，`antd@1.9.0` 开始无论是否多选，均为一个对象。 > `antd@1.9.0` 之前，multiple 模式下，此参数为一个对象数组 `[file, ...]`，`antd@1.9.0` 开始无论是否多选，均为一个对象。
2. `fileList` 当前的文件列表。 2. `fileList` 当前的文件列表。
@ -75,8 +76,8 @@ title: Upload
## customRequest ## customRequest
* https://github.com/react-component/upload#customrequest - <https://github.com/react-component/upload#customrequest>
## IE note ## 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>