diff --git a/components/affix/index.en-US.md b/components/affix/index.en-US.md index 0d308594cb..9d903b4753 100644 --- a/components/affix/index.en-US.md +++ b/components/affix/index.en-US.md @@ -19,8 +19,8 @@ Please note that Affix should not cover other content on the page, especially wh | --- | --- | --- | --- | | offsetBottom | Offset from the bottom of the viewport (in pixels) | number | - | | offsetTop | Offset from the top of the viewport (in pixels) | number | 0 | -| onChange | Callback for when Affix state is changed | function(affixed) | - | | target | Specifies the scrollable area DOM node | () => HTMLElement | () => window | +| onChange | Callback for when Affix state is changed | function(affixed) | - | **Note:** Children of `Affix` must not have the property `position: absolute`, but you can set `position: absolute` on `Affix` itself: diff --git a/components/affix/index.zh-CN.md b/components/affix/index.zh-CN.md index e053e73c27..22bdacd8bb 100644 --- a/components/affix/index.zh-CN.md +++ b/components/affix/index.zh-CN.md @@ -20,8 +20,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg | --- | --- | --- | --- | | offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | - | | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | - | -| onChange | 固定状态改变时触发的回调函数 | function(affixed) | - | | target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window | +| onChange | 固定状态改变时触发的回调函数 | function(affixed) | - | **注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位： diff --git a/components/alert/index.en-US.md b/components/alert/index.en-US.md index 9ebb00e6c1..52383692b9 100644 --- a/components/alert/index.en-US.md +++ b/components/alert/index.en-US.md @@ -29,7 +29,7 @@ Alert component for feedback. ### Alert.ErrorBoundary -| Property | Description | Type | Default | Version | -| ----------- | -------------------------------- | --------- | ----------------- | ------- | -| message | Custom error message to show | ReactNode | {{ error }} | | -| description | Custom error description to show | ReactNode | {{ error stack }} | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| description | Custom error description to show | ReactNode | {{ error stack }} | | +| message | Custom error message to show | ReactNode | {{ error }} | | diff --git a/components/alert/index.zh-CN.md b/components/alert/index.zh-CN.md index c5fb7294cb..cbbd7288fd 100644 --- a/components/alert/index.zh-CN.md +++ b/components/alert/index.zh-CN.md @@ -32,5 +32,5 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| message | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }} | | | description | 自定义错误内容，如果未指定会展示报错堆栈 | ReactNode | {{ error stack }} | | +| message | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }} | | diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md index ce30064c3c..88cd56c209 100644 --- a/components/anchor/index.en-US.md +++ b/components/anchor/index.en-US.md @@ -21,17 +21,17 @@ For displaying anchor hyperlinks on page and jumping between them. | affix | Fixed mode of Anchor | boolean | true | | | bounds | Bounding distance of anchor area | number | 5 | | | getContainer | Scrolling container | () => HTMLElement | () => window | | +| getCurrentAnchor | Customize the anchor highlight | () => string | - | | | offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | | | showInkInFixed | Whether show ink-balls when `affix={false}` | boolean | false | | -| onClick | Set the handler to handle `click` event | function(e: Event, link: Object) | - | | -| getCurrentAnchor | Customize the anchor highlight | () => string | - | | | targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | - | | | onChange | Listening for anchor link change | (currentActiveLink: string) => void | | | +| onClick | Set the handler to handle `click` event | function(e: Event, link: Object) | - | | ### Link Props -| Property | Description | Type | Default | Version | -| -------- | ----------------------------------------- | --------- | ------- | ------- | -| href | The target of hyperlink | string | | | -| title | The content of hyperlink | ReactNode | | | -| target | Specifies where to display the linked URL | string | | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| href | The target of hyperlink | string | | | +| target | Specifies where to display the linked URL | string | | | +| title | The content of hyperlink | ReactNode | | | diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md index fdd0b2bfc7..e23d113489 100644 --- a/components/anchor/index.zh-CN.md +++ b/components/anchor/index.zh-CN.md @@ -22,17 +22,17 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg | affix | 固定模式 | boolean | true | | | bounds | 锚点区域边界 | number | 5 | | | getContainer | 指定滚动的容器 | () => HTMLElement | () => window | | +| getCurrentAnchor | 自定义高亮的锚点 | () => string | - | | | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | | | showInkInFixed | `affix={false}` 时是否显示小圆点 | boolean | false | | -| onClick | `click` 事件的 handler | function(e: Event, link: Object) | - | | -| getCurrentAnchor | 自定义高亮的锚点 | () => string | - | | | targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | - | | | onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - | | +| onClick | `click` 事件的 handler | function(e: Event, link: Object) | - | | ### Link Props -| 成员 | 说明 | 类型 | 默认值 | 版本 | -| ------ | -------------------------------- | --------- | ------ | ---- | -| href | 锚点链接 | string | - | | -| title | 文字内容 | ReactNode | - | | -| target | 该属性指定在何处显示链接的资源。 | string | - | | +| 成员 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| href | 锚点链接 | string | - | | +| target | 该属性指定在何处显示链接的资源。 | string | - | | +| title | 文字内容 | ReactNode | - | | diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md index 8c99200bae..8e447c8185 100644 --- a/components/auto-complete/index.en-US.md +++ b/components/auto-complete/index.en-US.md @@ -22,30 +22,30 @@ When there is a need for autocomplete functionality. | children (for customize input element) | Customize input element | HTMLInputElement \| HTMLTextAreaElement \| React.ReactElement<InputProps> | <Input /> | | | children (for dataSource) | Data source to auto complete | React.ReactElement<OptionProps> \| Array<React.ReactElement<OptionProps>> | - | | | defaultActiveFirstOption | Whether active first option by default | boolean | true | | +| defaultOpen | Initial open state of dropdown | boolean | - | | | defaultValue | Initial selected option | string | - | | | disabled | Whether disabled select | boolean | false | | | dropdownClassName | The className of dropdown menu | string | - | | | dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true | | | filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded | boolean \| function(inputValue, option) | true | | +| notFoundContent | Specify content to show when no result matches | string | `Not Found` | | +| open | Controlled open state of dropdown | boolean | - | | +| options | Select options. Will get better perf than jsx definition | { label, value }\[] | - | | | placeholder | The placeholder of input | string | - | | | value | Selected option | string | - | | | onBlur | Called when leaving the component | function() | - | | | onChange | Called when select an option or input value change, or value of input is changed | function(value) | - | | +| onDropdownVisibleChange | Call when dropdown open | function(open) | - | | | onFocus | Called when entering the component | function() | - | | | onSearch | Called when searching items | function(value) | - | | | onSelect | Called when a option is selected. param is option's value and option instance | function(value, option) | - | | -| defaultOpen | Initial open state of dropdown | boolean | - | | -| open | Controlled open state of dropdown | boolean | - | | -| options | Select options. Will get better perf than jsx definition | { label, value }[] | - | | -| onDropdownVisibleChange | Call when dropdown open | function(open) | - | | -| notFoundContent | Specify content to show when no result matches | string | `Not Found` | | ## Methods -| Name | Description | Version | -| ------- | ------------ | ------- | -| blur() | Remove focus | | -| focus() | Get focus | | +| Name | Description | Version | +| --- | --- | --- | +| blur() | Remove focus | | +| focus() | Get focus | | ## FAQ diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md index c7e7a78a21..7e9098d70c 100644 --- a/components/auto-complete/index.zh-CN.md +++ b/components/auto-complete/index.zh-CN.md @@ -20,34 +20,34 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg | allowClear | 支持清除, 单选模式有效 | boolean | false | | | autoFocus | 自动获取焦点 | boolean | false | | | backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false | | -| children (自定义输入框) | 自定义输入框 | HTMLInputElement \| HTMLTextAreaElement \| React.ReactElement<InputProps> | <Input /> | | | children (自动完成的数据源) | 自动完成的数据源 | React.ReactElement<OptionProps> \| Array<React.ReactElement<OptionProps>> | - | | +| children (自定义输入框) | 自定义输入框 | HTMLInputElement \| HTMLTextAreaElement \| React.ReactElement<InputProps> | <Input /> | | | defaultActiveFirstOption | 是否默认高亮第一个选项 | boolean | true | | +| defaultOpen | 是否默认展开下拉菜单 | boolean | - | | | defaultValue | 指定默认选中的条目 | string | - | | | disabled | 是否禁用 | boolean | false | | | dropdownClassName | 下拉菜单的 className 属性 | string | - | | | dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true | | | filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false | boolean \| function(inputValue, option) | true | | | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body | | +| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | - | | +| open | 是否展开下拉菜单 | boolean | - | | +| options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }\[] | - | | | placeholder | 输入框提示 | string | - | | | value | 指定当前选中的条目 | string | - | | | onBlur | 失去焦点时的回调 | function() | - | | | onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | - | | +| onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - | | | onFocus | 获得焦点时的回调 | function() | - | | | onSearch | 搜索补全项的时候调用 | function(value) | - | | | onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | - | | -| defaultOpen | 是否默认展开下拉菜单 | boolean | - | | -| open | 是否展开下拉菜单 | boolean | - | | -| options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }[] | - | | -| onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - | | -| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | - | | ## 方法 -| 名称 | 描述 | 版本 | -| ------- | -------- | ---- | -| blur() | 移除焦点 | | -| focus() | 获取焦点 | | +| 名称 | 描述 | 版本 | +| --- | --- | --- | +| blur() | 移除焦点 | | +| focus() | 获取焦点 | | ## FAQ diff --git a/components/avatar/index.en-US.md b/components/avatar/index.en-US.md index 31db6d84a8..c6e46f451a 100644 --- a/components/avatar/index.en-US.md +++ b/components/avatar/index.en-US.md @@ -13,21 +13,21 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s, | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | +| alt | This attribute defines the alternative text describing the image | string | - | | +| gap | Letter type unit distance between left and right sides | number | 4 | 4.3.0 | | icon | Custom icon type for an icon avatar | ReactNode | - | | | shape | The shape of avatar | `circle` \| `square` | `circle` | | | size | The size of the avatar | number \| `large` \| `small` \| `default` \| `{ xs: number, sm: number, ...}` | `default` | 4.7.0 | | src | The address of the image for an image avatar | string | - | | | srcSet | A list of sources to use for different screen resolutions | string | - | | -| alt | This attribute defines the alternative text describing the image | string | - | | | onError | Handler when img load error, return false to prevent default fallback behavior | () => boolean | - | | -| gap | Letter type unit distance between left and right sides | number | 4 | 4.3.0 | > Tip: You can set `icon` or `children` as the fallback for image load error, with the priority of `icon` > `children` ### Avatar.Group (4.5.0+) -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ------------------- | -------------------------------------- | ----------------- | ------ | ---- | -| maxCount | Max avatars to show | number | - | | -| maxStyle | The style of excess avatar style | CSSProperties | - | | -| maxPopoverPlacement | The placement of excess avatar Popover | `top` \| `bottom` | `top` | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| maxCount | Max avatars to show | number | - | | +| maxPopoverPlacement | The placement of excess avatar Popover | `top` \| `bottom` | `top` | | +| maxStyle | The style of excess avatar style | CSSProperties | - | | diff --git a/components/avatar/index.zh-CN.md b/components/avatar/index.zh-CN.md index 32292ba5ec..0d4f3587f7 100644 --- a/components/avatar/index.zh-CN.md +++ b/components/avatar/index.zh-CN.md @@ -18,21 +18,21 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | +| alt | 图像无法显示时的替代文本 | string | - | | +| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 | | icon | 设置头像的自定义图标 | ReactNode | - | | | shape | 指定头像的形状 | `circle` \| `square` | `circle` | | | size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| `{ xs: number, sm: number, ...}` | `default` | 4.7.0 | | src | 图片类头像的资源地址 | string | - | | | srcSet | 设置图片类头像响应式资源地址 | string | - | | -| alt | 图像无法显示时的替代文本 | string | - | | | onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - | | -| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 | > Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fallback 行为，优先级为 `icon` > `children` ### Avatar.Group (4.5.0+) -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ------------------- | -------------------- | ----------------- | ------ | ---- | -| maxCount | 显示的最大头像个数 | number | - | | -| maxStyle | 多余头像样式 | CSSProperties | - | | -| maxPopoverPlacement | 多余头像气泡弹出位置 | `top` \| `bottom` | `top` | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| maxCount | 显示的最大头像个数 | number | - | | +| maxPopoverPlacement | 多余头像气泡弹出位置 | `top` \| `bottom` | `top` | | +| maxStyle | 多余头像样式 | CSSProperties | - | | diff --git a/components/back-top/index.en-US.md b/components/back-top/index.en-US.md index e62514c9b7..6a87a4184e 100644 --- a/components/back-top/index.en-US.md +++ b/components/back-top/index.en-US.md @@ -20,7 +20,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | +| duration | Time to return to top（ms） | number | 450 | 4.4.0 | | target | Specifies the scrollable area dom node | () => HTMLElement | () => window | | | visibilityHeight | The BackTop button will not show until the scroll height reaches this value | number | 400 | | | onClick | A callback function, which can be executed when you click the button | function | - | | -| duration | Time to return to top（ms） | number | 450 | 4.4.0 | diff --git a/components/back-top/index.zh-CN.md b/components/back-top/index.zh-CN.md index fa08ded7ba..7b112dbecc 100644 --- a/components/back-top/index.zh-CN.md +++ b/components/back-top/index.zh-CN.md @@ -21,7 +21,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | +| duration | 回到顶部所需时间（ms） | number | 450 | 4.4.0 | | target | 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window | | | visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 | | | onClick | 点击按钮的回调函数 | function | - | | -| duration | 回到顶部所需时间（ms） | number | 450 | 4.4.0 | diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md index 8035dcaa15..0e86abcfbb 100644 --- a/components/badge/index.en-US.md +++ b/components/badge/index.en-US.md @@ -23,8 +23,8 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca | offset | Set offset of the badge dot | \[number, number] | - | | | overflowCount | Max count to show | number | 99 | | | showZero | Whether to show badge when `count` is zero | boolean | false | | -| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | - | | | size | If `count` is set, `size` sets the size of badge | `default` \| `small` | - | 4.6.0 | +| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | - | | | text | If `status` is set, `text` sets the display text of the status `dot` | ReactNode | - | | | title | Text to show when hovering over the badge | string | - | | diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md index 3aa267c533..00dd75ba1d 100644 --- a/components/badge/index.zh-CN.md +++ b/components/badge/index.zh-CN.md @@ -24,8 +24,8 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg | offset | 设置状态点的位置偏移 | \[number, number] | - | | | overflowCount | 展示封顶的数字值 | number | 99 | | | showZero | 当数值为 0 时，是否展示 Badge | boolean | false | | -| status | 设置 Badge 为状态点 | `success` \| `processing` \| `default` \| `error` \| `warning` | - | | | size | 在设置了 `count` 的前提下有效，设置小圆点的大小 | `default` \| `small` | - | 4.6.0 | +| status | 设置 Badge 为状态点 | `success` \| `processing` \| `default` \| `error` \| `warning` | - | | | text | 在设置了 `status` 的前提下有效，设置状态点的文本 | ReactNode | - | | | title | 设置鼠标放在状态点上时显示的文字 | string | - | | diff --git a/components/breadcrumb/index.en-US.md b/components/breadcrumb/index.en-US.md index 96b2be6417..b0f85401b8 100644 --- a/components/breadcrumb/index.en-US.md +++ b/components/breadcrumb/index.en-US.md @@ -30,14 +30,14 @@ A breadcrumb displays the current location within a hierarchy. It allows going b | --- | --- | --- | --- | --- | | dropdownProps | The dropdown props | [Dropdown](/components/dropdown) | - | | | href | Target of hyperlink | string | - | | -| onClick | Set the handler to handle click event | (e:MouseEvent) => void | - | | | overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - | | +| onClick | Set the handler to handle click event | (e:MouseEvent) => void | - | | ### Breadcrumb.Separator -| Property | Description | Type | Default | Version | -| -------- | ---------------- | --------- | ------- | ------- | -| children | Custom separator | ReactNode | `/` | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| children | Custom separator | ReactNode | `/` | | > When using `Breadcrumb.Separator`,its parent component must be set to `separator=""`, otherwise the default separator of the parent component will appear. diff --git a/components/breadcrumb/index.zh-CN.md b/components/breadcrumb/index.zh-CN.md index f26357d6c0..1188328a84 100644 --- a/components/breadcrumb/index.zh-CN.md +++ b/components/breadcrumb/index.zh-CN.md @@ -31,14 +31,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg | --- | --- | --- | --- | --- | | dropdownProps | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown) | - | | | href | 链接的目的地 | string | - | | -| onClick | 单击事件 | (e:MouseEvent) => void | - | | | overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | - | | +| onClick | 单击事件 | (e:MouseEvent) => void | - | | ### Breadcrumb.Separator -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| -------- | -------------- | --------- | ------ | ---- | -| children | 要显示的分隔符 | ReactNode | `/` | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| children | 要显示的分隔符 | ReactNode | `/` | | > 注意：在使用 `Breadcrumb.Separator` 时，其父组件的分隔符必须设置为 `separator=""`，否则会出现父组件默认的分隔符。 diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md index ab1ec6c2f4..af9ddc68fa 100644 --- a/components/button/index.en-US.md +++ b/components/button/index.en-US.md @@ -40,11 +40,11 @@ Different button styles can be generated by setting Button properties. The recom | 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 component of button | ReactNode | - | | | loading | Set the loading status of button | boolean \| { delay: number } | false | | -| onClick | Set the handler to handle `click` event | (event) => void | - | | | shape | Can be set button shape | `circle` \| `round` | - | | | size | Set the size of button | `large` \| `middle` \| `small` | - | | | target | Same as target attribute of a, works when href is specified | string | - | | | type | Can be set to `primary` `ghost` `dashed` `link` `text` `default` | string | `default` | | +| onClick | Set the handler to handle `click` event | (event) => void | - | | It accepts all props which native buttons support. diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md index 5bc66e2331..2ef9d4d61d 100644 --- a/components/button/index.zh-CN.md +++ b/components/button/index.zh-CN.md @@ -43,11 +43,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg | htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | | | icon | 设置按钮的图标组件 | ReactNode | - | | | loading | 设置按钮载入状态 | boolean \| { delay: number } | false | | -| onClick | 点击按钮时的回调 | (event) => void | - | | | shape | 设置按钮形状 | `circle` \| `round` | - | | | size | 设置按钮大小 | `large` \| `middle` \| `small` | - | | | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - | | | type | 设置按钮类型 | `primary` \| `ghost` \| `dashed` \| `link` \| `text` \| `default` | `default` | | +| onClick | 点击按钮时的回调 | (event) => void | - | | 支持原生 button 的其他所有属性。 diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md index 7397403c61..0f68b576f7 100644 --- a/components/calendar/index.en-US.md +++ b/components/calendar/index.en-US.md @@ -37,16 +37,16 @@ When data is in the form of dates, such as schedules, timetables, prices calenda | defaultValue | The date selected by default | [moment](http://momentjs.com/) | - | | | disabledDate | Function that specifies the dates that cannot be selected | (currentDate: moment) => boolean | - | | | fullscreen | Whether to display in full-screen | boolean | true | | +| headerRender | Render custom header in panel | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | - | | | locale | The calendar's locale | object | [(default)](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | | | mode | The display mode of the calendar | `month` \| `year` | `month` | | | monthCellRender | Customize the display of the month cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - | | | monthFullCellRender | Customize the display of the month cell, the returned content will override the cell | function(date: moment): ReactNode | - | | | validRange | To set valid range | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | | | value | The current selected date | [moment](http://momentjs.com/) | - | | +| onChange | Callback for when date changes | function(date: moment） | - | | | onPanelChange | Callback for when panel changes | function(date: moment, mode: string) | - | | | onSelect | Callback for when a date is selected | function(date: moment） | - | | -| onChange | Callback for when date changes | function(date: moment） | - | | -| headerRender | Render custom header in panel | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | - | | ## FAQ diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md index 37a4edcf94..69abee334f 100644 --- a/components/calendar/index.zh-CN.md +++ b/components/calendar/index.zh-CN.md @@ -38,16 +38,16 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg | defaultValue | 默认展示的日期 | [moment](http://momentjs.com/) | - | | | disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | - | | | fullscreen | 是否全屏显示 | boolean | true | | +| headerRender | 自定义头部内容 | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | - | | | locale | 国际化配置 | object | [(默认配置)](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | | | mode | 初始模式 | `month` \| `year` | `month` | | | monthCellRender | 自定义渲染月单元格，返回内容会被追加到单元格 | function(date: moment): ReactNode | - | | | monthFullCellRender | 自定义渲染月单元格，返回内容覆盖单元格 | function(date: moment): ReactNode | - | | | validRange | 设置可以显示的日期 | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | | | value | 展示日期 | [moment](http://momentjs.com/) | - | | +| onChange | 日期变化回调 | function(date: moment） | - | | | onPanelChange | 日期面板变化回调 | function(date: moment, mode: string) | - | | | onSelect | 点击选择日期回调 | function(date: moment） | - | | -| onChange | 日期变化回调 | function(date: moment） | - | | -| headerRender | 自定义头部内容 | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | - | | ## FAQ diff --git a/components/card/index.en-US.md b/components/card/index.en-US.md index 1632a66493..c5821dd796 100644 --- a/components/card/index.en-US.md +++ b/components/card/index.en-US.md @@ -24,36 +24,36 @@ A card can be used to display content related to a single subject. The content c | --- | --- | --- | --- | --- | | actions | The action list, shows at the bottom of the Card | Array<ReactNode> | - | | | activeTabKey | Current TabPane's key | string | - | | -| headStyle | Inline style to apply to the card head | CSSProperties | - | | | bodyStyle | Inline style to apply to the card content | CSSProperties | - | | | bordered | Toggles rendering of the border around the card | boolean | true | | | cover | Card cover | ReactNode | - | | | defaultActiveTabKey | Initial active TabPane's key, if `activeTabKey` is not set | string | - | | | extra | Content to render in the top-right corner of the card | ReactNode | - | | +| headStyle | Inline style to apply to the card head | CSSProperties | - | | | hoverable | Lift up when hovering card | boolean | false | | | loading | Shows a loading indicator while the contents of the card are being fetched | boolean | false | | -| tabList | List of TabPane's head | Array<{key: string, tab: ReactNode}> | - | | -| tabBarExtraContent | Extra content in tab bar | ReactNode | - | | | size | Size of card | `default` \| `small` | `default` | | +| tabBarExtraContent | Extra content in tab bar | ReactNode | - | | +| tabList | List of TabPane's head | Array<{key: string, tab: ReactNode}> | - | | +| tabProps | [Tabs](/components/tabs/#Tabs) | - | - | | | title | Card title | ReactNode | - | | | type | Card style type, can be set to `inner` or not set | string | - | | | onTabChange | Callback when tab is switched | (key) => void | - | | -| tabProps | [Tabs](/components/tabs/#Tabs) | - | - | | ### Card.Grid -| Property | Description | Type | Default | Version | -| --------- | ------------------------------- | ------------- | ------- | ------- | -| className | The className of container | string | - | | -| hoverable | Lift up when hovering card grid | boolean | true | | -| style | The style object of container | CSSProperties | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| className | The className of container | string | - | | +| hoverable | Lift up when hovering card grid | boolean | true | | +| style | The style object of container | CSSProperties | - | | ### Card.Meta -| Property | Description | Type | Default | Version | -| ----------- | ----------------------------- | ------------- | ------- | ------- | -| avatar | Avatar or icon | ReactNode | - | | -| className | The className of container | string | - | | -| description | Description content | ReactNode | - | | -| style | The style object of container | CSSProperties | - | | -| title | Title content | ReactNode | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| avatar | Avatar or icon | ReactNode | - | | +| className | The className of container | string | - | | +| description | Description content | ReactNode | - | | +| style | The style object of container | CSSProperties | - | | +| title | Title content | ReactNode | - | | diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md index 36719a6537..029e88a8ab 100644 --- a/components/card/index.zh-CN.md +++ b/components/card/index.zh-CN.md @@ -25,36 +25,36 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/NqXt8DJhky/Card.svg | --- | --- | --- | --- | --- | | actions | 卡片操作组，位置在卡片底部 | Array<ReactNode> | - | | | activeTabKey | 当前激活页签的 key | string | - | | -| headStyle | 自定义标题区域样式 | CSSProperties | - | | | bodyStyle | 内容区域自定义样式 | CSSProperties | - | | | bordered | 是否有边框 | boolean | true | | | cover | 卡片封面 | ReactNode | - | | | defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | `第一个页签` | | | extra | 卡片右上角的操作区域 | ReactNode | - | | +| headStyle | 自定义标题区域样式 | CSSProperties | - | | | hoverable | 鼠标移过时可浮起 | boolean | false | | | loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false | | -| tabList | 页签标题列表 | Array<{key: string, tab: ReactNode}> | - | | -| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | | | size | card 的尺寸 | `default` \| `small` | `default` | | +| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - | | +| tabList | 页签标题列表 | Array<{key: string, tab: ReactNode}> | - | | +| tabProps | [Tabs](/components/tabs/#Tabs) | - | - | | | title | 卡片标题 | ReactNode | - | | | type | 卡片类型，可设置为 `inner` 或 不设置 | string | - | | | onTabChange | 页签切换的回调 | (key) => void | - | | -| tabProps | [Tabs](/components/tabs/#Tabs) | - | - | | ### Card.Grid -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --------- | ---------------------- | ------------- | ------ | ---- | -| className | 网格容器类名 | string | - | | -| hoverable | 鼠标移过时可浮起 | boolean | true | | -| style | 定义网格容器类名的样式 | CSSProperties | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| className | 网格容器类名 | string | - | | +| hoverable | 鼠标移过时可浮起 | boolean | true | | +| style | 定义网格容器类名的样式 | CSSProperties | - | | ### Card.Meta -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ----------- | ------------------ | ------------- | ------ | ---- | -| avatar | 头像/图标 | ReactNode | - | | -| className | 容器类名 | string | - | | -| description | 描述内容 | ReactNode | - | | -| style | 定义容器类名的样式 | CSSProperties | - | | -| title | 标题内容 | ReactNode | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| avatar | 头像/图标 | ReactNode | - | | +| className | 容器类名 | string | - | | +| description | 描述内容 | ReactNode | - | | +| style | 定义容器类名的样式 | CSSProperties | - | | +| title | 标题内容 | ReactNode | - | | diff --git a/components/carousel/index.en-US.md b/components/carousel/index.en-US.md index 876a803b65..4bb51fb063 100644 --- a/components/carousel/index.en-US.md +++ b/components/carousel/index.en-US.md @@ -17,13 +17,13 @@ A carousel component. Scales with its container. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| afterChange | Callback function called after the current index changes | function(current) | - | | | autoplay | Whether to scroll automatically | boolean | false | | -| beforeChange | Callback function called before the current index changes | function(from, to) | - | | | dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | `bottom` | | | dots | Whether to show the dots at the bottom of the gallery, `object` for `dotsClass` and any others | boolean \| { className?: string } | true | | | easing | Transition interpolation function name | string | `linear` | | | effect | Transition effect | `scrollx` \| `fade` | `scrollx` | | +| afterChange | Callback function called after the current index changes | function(current) | - | | +| beforeChange | Callback function called before the current index changes | function(from, to) | - | | ## Methods diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md index f30bd7db2c..c4aee00d10 100644 --- a/components/carousel/index.zh-CN.md +++ b/components/carousel/index.zh-CN.md @@ -18,20 +18,20 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/%24C9tmj978R/Carousel.svg | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| afterChange | 切换面板的回调 | function(current) | - | | | -| autoplay | 是否自动切换 | boolean | false | | | -| beforeChange | 切换面板的回调 | function(from, to) | - | | | +| autoplay | 是否自动切换 | boolean | false | | | dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | `bottom` | | -| dots | 是否显示面板指示点，如果为 `object` 则同时可以指定 `dotsClass` 或者 | boolean \| { className?: string } | true | | | -| easing | 动画效果 | string | `linear` | | | -| effect | 动画效果函数 | `scrollx` \| `fade` | `scrollx` | | | +| dots | 是否显示面板指示点，如果为 `object` 则同时可以指定 `dotsClass` 或者 | boolean \| { className?: string } | true | | +| easing | 动画效果 | string | `linear` | | +| effect | 动画效果函数 | `scrollx` \| `fade` | `scrollx` | | +| afterChange | 切换面板的回调 | function(current) | - | | +| beforeChange | 切换面板的回调 | function(from, to) | - | | ## 方法 -| 名称 | 描述 | -| ------------------------------ | ------------------------------------------------- | +| 名称 | 描述 | +| --- | --- | | goTo(slideNumber, dontAnimate) | 切换到指定面板, dontAnimate = true 时，不使用动画 | -| next() | 切换到下一面板 | -| prev() | 切换到上一面板 | +| next() | 切换到下一面板 | +| prev() | 切换到上一面板 | 更多 API 可参考： diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md index b5567be997..0f9e2979a0 100644 --- a/components/cascader/index.en-US.md +++ b/components/cascader/index.en-US.md @@ -29,13 +29,14 @@ Cascade selection box. | defaultValue | Initial selected value | string\[] \| number\[] | \[] | | | disabled | Whether disabled select | boolean | false | | | displayRender | The render function of displaying selected options | (label, selectedOptions) => ReactNode | label => label.join(`/`) | | -| expandTrigger | expand current item when click or hover, one of `click` `hover` | string | `click` | | +| dropdownRender | Customize dropdown content | (menus: ReactNode) => ReactNode | - | 4.4.0 | | expandIcon | Customize the current item expand icon | ReactNode | - | 4.4.0 | +| expandTrigger | expand current item when click or hover, one of `click` `hover` | string | `click` | | | fieldNames | Custom field name for label and value and children | object | { label: `label`, value: `value`, children: `children` } | | | getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body | | | loadData | To load option lazily, and it cannot work with `showSearch` | (selectedOptions) => void | - | | | notFoundContent | Specify content to show when no result matches | string | `Not Found` | | -| options | The data options of cascade | [Option](#Option)[] | - | | +| options | The data options of cascade | [Option](#Option)\[] | - | | | placeholder | The input placeholder | string | `Please select` | | | popupClassName | The additional className of popup overlay | string | - | | | popupPlacement | Use preset popup align config from builtinPlacements：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | | @@ -45,7 +46,6 @@ Cascade selection box. | style | The additional style | CSSProperties | - | | | suffixIcon | The custom suffix icon | ReactNode | - | | | value | The selected value | string\[] \| number\[] | - | | -| dropdownRender | Customize dropdown content | (menus: ReactNode) => ReactNode | - | 4.4.0 | | onChange | Callback when finishing cascader select | (value, selectedOptions) => void | - | | | onPopupVisibleChange | Callback when popup shown or hidden | (value) => void | - | | @@ -72,7 +72,7 @@ interface Option { ## Methods -| Name | Description | Version | -| ------- | ------------ | ------- | -| blur() | Remove focus | | -| focus() | Get focus | | +| Name | Description | Version | +| --- | --- | --- | +| blur() | Remove focus | | +| focus() | Get focus | | diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md index 6db77de3a1..f887784564 100644 --- a/components/cascader/index.zh-CN.md +++ b/components/cascader/index.zh-CN.md @@ -30,13 +30,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg | defaultValue | 默认的选中项 | string\[] \| number\[] | \[] | | | disabled | 禁用 | boolean | false | | | displayRender | 选择后展示的渲染函数 | (label, selectedOptions) => ReactNode | label => label.join(`/`) | | -| expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | `click` | | +| dropdownRender | 自定义下拉框内容 | (menus: ReactNode) => ReactNode | - | 4.4.0 | | expandIcon | 自定义次级菜单展开图标 | ReactNode | - | 4.4.0 | +| expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | `click` | | | fieldNames | 自定义 options 中 label name children 的字段 | object | { label: `label`, value: `value`, children: `children` } | | | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body | | | loadData | 用于动态加载选项，无法与 `showSearch` 一起使用 | (selectedOptions) => void | - | | | notFoundContent | 当下拉列表为空时显示的内容 | string | `Not Found` | | -| options | 可选项数据源 | [Option](#Option)[] | - | | +| options | 可选项数据源 | [Option](#Option)\[] | - | | | placeholder | 输入框占位文本 | string | `请选择` | | | popupClassName | 自定义浮层类名 | string | - | | | popupPlacement | 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | | @@ -46,7 +47,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg | style | 自定义样式 | CSSProperties | - | | | suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | | | value | 指定选中项 | string\[] \| number\[] | - | | -| dropdownRender | 自定义下拉框内容 | (menus: ReactNode) => ReactNode | - | 4.4.0 | | onChange | 选择完成后的回调 | (value, selectedOptions) => void | - | | | onPopupVisibleChange | 显示/隐藏浮层的回调 | (value) => void | - | | @@ -73,9 +73,9 @@ interface Option { ## 方法 -| 名称 | 描述 | 版本 | -| ------- | -------- | ---- | -| blur() | 移除焦点 | | -| focus() | 获取焦点 | | +| 名称 | 描述 | 版本 | +| --- | --- | --- | +| blur() | 移除焦点 | | +| focus() | 获取焦点 | | > 注意，如果需要获得中国省市区数据，可以参考 [china-division](https://gist.github.com/afc163/7582f35654fd03d5be7009444345ea17)。 diff --git a/components/checkbox/index.en-US.md b/components/checkbox/index.en-US.md index e5f1c8dc42..230d188c5e 100644 --- a/components/checkbox/index.en-US.md +++ b/components/checkbox/index.en-US.md @@ -42,7 +42,7 @@ Checkbox component. #### Checkbox -| Name | Description | Version | -| ------- | ------------ | ------- | -| blur() | Remove focus | | -| focus() | Get focus | | +| Name | Description | Version | +| --- | --- | --- | +| blur() | Remove focus | | +| focus() | Get focus | | diff --git a/components/checkbox/index.zh-CN.md b/components/checkbox/index.zh-CN.md index a8c621354d..3bb66a7af8 100644 --- a/components/checkbox/index.zh-CN.md +++ b/components/checkbox/index.zh-CN.md @@ -19,14 +19,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8nbVbHEm_/CheckBox.svg #### Checkbox -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| -------------- | --------------------------------------- | ----------------- | ------ | ---- | -| autoFocus | 自动获取焦点 | boolean | false | | -| checked | 指定当前是否选中 | boolean | false | | -| defaultChecked | 初始是否选中 | boolean | false | | -| disabled | 失效状态 | boolean | false | | -| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false | | -| onChange | 变化时回调函数 | function(e:Event) | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| autoFocus | 自动获取焦点 | boolean | false | | +| checked | 指定当前是否选中 | boolean | false | | +| defaultChecked | 初始是否选中 | boolean | false | | +| disabled | 失效状态 | boolean | false | | +| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false | | +| onChange | 变化时回调函数 | function(e:Event) | - | | #### Checkbox Group @@ -53,7 +53,7 @@ interface Option { #### Checkbox -| 名称 | 描述 | 版本 | -| ------- | -------- | ---- | -| blur() | 移除焦点 | | -| focus() | 获取焦点 | | +| 名称 | 描述 | 版本 | +| --- | --- | --- | +| blur() | 移除焦点 | | +| focus() | 获取焦点 | | diff --git a/components/collapse/index.en-US.md b/components/collapse/index.en-US.md index 7dd42378ce..517b2c29b4 100644 --- a/components/collapse/index.en-US.md +++ b/components/collapse/index.en-US.md @@ -19,23 +19,23 @@ A content area which can be collapsed and expanded. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| activeKey | Key of the active panel | string\[] \| string
number\[] \| number | No default value. In `accordion` mode, it's the key of the first panel | | -| defaultActiveKey | Key of the initial active panel | string\[] \| string
number\[] \| number | - | | -| bordered | Toggles rendering of the border around the collapse block | boolean | true | | | accordion | If true, Collapse renders as Accordion | boolean | false | | -| onChange | Callback function executed when active panel is changed | function | - | | +| activeKey | Key of the active panel | string\[] \| string
number\[] \| number | No default value. In `accordion` mode, it's the key of the first panel | | +| bordered | Toggles rendering of the border around the collapse block | boolean | true | | +| defaultActiveKey | Key of the initial active panel | string\[] \| string
number\[] \| number | - | | +| destroyInactivePanel | Destroy Inactive Panel | boolean | false | | | expandIcon | Allow to customize collapse icon | (panelProps) => ReactNode | - | | | expandIconPosition | Set expand icon position | `left` \| `right` | - | | -| destroyInactivePanel | Destroy Inactive Panel | boolean | false | | | ghost | Make the collapse borderless and its background transparent | boolean | false | 4.4.0 | +| onChange | Callback function executed when active panel is changed | function | - | | ### Collapse.Panel | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | disabled | If true, panel cannot be opened or closed | boolean | false | | +| extra | The extra element in the corner | ReactNode | - | | | forceRender | Forced render of content on panel, instead of lazy rending after clicking on header | boolean | false | | | header | Title of the panel | ReactNode | - | | | key | Unique key identifying the panel from among its siblings | string \| number | - | | | showArrow | If false, panel will not show arrow icon | boolean | true | | -| extra | The extra element in the corner | ReactNode | - | | diff --git a/components/collapse/index.zh-CN.md b/components/collapse/index.zh-CN.md index e128311b3f..0b144647b3 100644 --- a/components/collapse/index.zh-CN.md +++ b/components/collapse/index.zh-CN.md @@ -20,23 +20,23 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| activeKey | 当前激活 tab 面板的 key | string\[] \| string
number\[] \| number | 默认无，accordion 模式下默认第一个元素 | | -| defaultActiveKey | 初始化选中面板的 key | string\[] \| string
number\[] \| number | - | | -| bordered | 带边框风格的折叠面板 | boolean | true | | | accordion | 手风琴模式 | boolean | false | | -| onChange | 切换面板的回调 | function | - | | +| activeKey | 当前激活 tab 面板的 key | string\[] \| string
number\[] \| number | 默认无，accordion 模式下默认第一个元素 | | +| bordered | 带边框风格的折叠面板 | boolean | true | | +| defaultActiveKey | 初始化选中面板的 key | string\[] \| string
number\[] \| number | - | | +| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | false | | | expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | | | expandIconPosition | 设置图标位置 | `left` \| `right` | - | | -| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | false | | | ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 | +| onChange | 切换面板的回调 | function | - | | ### Collapse.Panel -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ----------- | ------------------------------------------ | ---------------- | ------ | ---- | -| disabled | 禁用后的面板展开与否将无法通过用户交互改变 | boolean | false | | -| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | | -| header | 面板头内容 | ReactNode | - | | -| key | 对应 activeKey | string \| number | - | | -| showArrow | 是否展示当前面板上的箭头 | boolean | true | | -| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| disabled | 禁用后的面板展开与否将无法通过用户交互改变 | boolean | false | | +| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - | | +| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | | +| header | 面板头内容 | ReactNode | - | | +| key | 对应 activeKey | string \| number | - | | +| showArrow | 是否展示当前面板上的箭头 | boolean | true | | diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md index 4adc52e58f..2b9e150a32 100644 --- a/components/config-provider/index.en-US.md +++ b/components/config-provider/index.en-US.md @@ -41,18 +41,18 @@ Some components use dynamic style to support wave effect. You can config `csp` p | autoInsertSpaceInButton | Set false to remove space between 2 chinese characters on Button | boolean | true | | | componentSize | Config antd component size | `small` \| `middle` \| `large` | - | | | csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - | | +| direction | Set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | | +| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | - | 4.3.0 | | form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validateMessages) } | - | | -| input | Set Input common props | { autoComplete?: string } | - | 4.2.0 | -| renderEmpty | Set empty content of components. Ref [Empty](/components/empty/) | function(componentName: string): ReactNode | - | | | getPopupContainer | To set the container of the popup element. The default is to create a `div` element in `body` | function(triggerNode) | () => document.body | | | getTargetContainer | Config Affix, Anchor scroll target container | () => HTMLElement | () => window | 4.2.0 | -| locale | Language package setting, you can find the packages in [antd/es/locale](http://unpkg.com/antd/es/locale/) | object | - | -| prefixCls | Set prefix className (cooperated with [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7)) | string | `ant` | | +| input | Set Input common props | { autoComplete?: string } | - | 4.2.0 | +| locale | Language package setting, you can find the packages in [antd/es/locale](http://unpkg.com/antd/es/locale/) | object | - | | | pageHeader | Unify the ghost of PageHeader, ref [PageHeader](/components/page-header) | { ghost: boolean } | true | | -| direction | Set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | | +| prefixCls | Set prefix className (cooperated with [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7)) | string | `ant` | | +| renderEmpty | Set empty content of components. Ref [Empty](/components/empty/) | function(componentName: string): ReactNode | - | | | space | Set Space `size`, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 | | virtual | Disable virtual scroll when set to `false` | boolean | - | 4.3.0 | -| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | - | 4.3.0 | ## FAQ @@ -71,7 +71,7 @@ moment.locale('zh-cn'); #### Modal throw error when setting `getPopupContainer`? -Related issue: https://github.com/ant-design/ant-design/issues/19974 +Related issue: When you config `getPopupContainer` to parentNode globally, Modal will throw error of `triggerNode is undefined` because it did not have a triggerNode. You can try the [fix](https://github.com/afc163/feedback-antd/commit/3e4d1ad1bc1a38460dc3bf3c56517f737fe7d44a) below. diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md index 560245c74a..107acdafef 100644 --- a/components/config-provider/index.zh-CN.md +++ b/components/config-provider/index.zh-CN.md @@ -42,18 +42,18 @@ export default () => ( | autoInsertSpaceInButton | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格 | boolean | true | | | componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - | | | csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - | | +| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | | +| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动 | boolean \| number | - | 4.3.0 | | form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form/#validateMessages) } | - | | -| input | 设置 Input 组件的通用属性 | { autoComplete?: string } | - | 4.2.0 | -| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | function(componentName: string): ReactNode | - | | | getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | function(triggerNode) | () => document.body | | | getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 | +| input | 设置 Input 组件的通用属性 | { autoComplete?: string } | - | 4.2.0 | | locale | 语言包配置，语言包可到 [antd/es/locale](http://unpkg.com/antd/es/locale/) 目录下寻找 | object | - | | -| prefixCls | 设置统一样式前缀。注意：需要配合 `less` 变量 [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7) 使用 | string | `ant` | | | pageHeader | 统一设置 PageHeader 的 ghost，参考 [PageHeader](/components/page-header) | { ghost: boolean } | true | | -| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | | +| prefixCls | 设置统一样式前缀。注意：需要配合 `less` 变量 [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7) 使用 | string | `ant` | | +| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | function(componentName: string): ReactNode | - | | | space | 设置 Space 的 `size`，参考 [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 | | virtual | 设置 `false` 时关闭虚拟滚动 | boolean | - | 4.3.0 | -| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动 | boolean \| number | - | 4.3.0 | ## FAQ @@ -72,7 +72,7 @@ moment.locale('zh-cn'); #### 配置 `getPopupContainer` 导致 Modal 报错？ -相关 issue：https://github.com/ant-design/ant-design/issues/19974 +相关 issue： 当如下全局设置 `getPopupContainer` 为触发节点的 parentNode 时，由于 Modal 的用法不存在 `triggerNode`，这样会导致 `triggerNode is undefined` 的报错，需要增加一个[判断条件](https://github.com/afc163/feedback-antd/commit/3e4d1ad1bc1a38460dc3bf3c56517f737fe7d44a)。 diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md index bc5f6b0493..243d04cd59 100644 --- a/components/date-picker/index.en-US.md +++ b/components/date-picker/index.en-US.md @@ -54,12 +54,14 @@ The following APIs are shared by DatePicker, RangePicker. | --- | --- | --- | --- | --- | | allowClear | Whether to show clear button | boolean | true | | | autoFocus | If get focus when component mounted | boolean | false | | +| bordered | Whether has border style | boolean | true | | | className | The picker className | string | - | | | dateRender | Custom rendering function for date cells | function(currentDate: moment, today: moment) => React.ReactNode | - | | | disabled | Determine whether the DatePicker is disabled | boolean | false | | | disabledDate | Specify the date that cannot be selected | (currentDate: moment) => boolean | - | | | dropdownClassName | To customize the className of the popup calendar | string | - | | | getPopupContainer | To set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - | | +| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | | | locale | Localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | | | mode | The picker panel mode（ [Cannot select year or month anymore?](/docs/react/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?) ) | `time` \| `date` \| `month` \| `year` \| `decade` | - | | | open | The open state of picker | boolean | - | | @@ -68,29 +70,28 @@ The following APIs are shared by DatePicker, RangePicker. | placeholder | The placeholder of date input | string \| \[string,string] | - | | | popupStyle | To customize the style of the popup calendar | CSSProperties | {} | | | size | The determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - | | -| bordered | Whether has border style | boolean | true | | -| suffixIcon | The custom suffix icon | ReactNode | - | | | style | To customize the style of the input box | CSSProperties | {} | | +| suffixIcon | The custom suffix icon | ReactNode | - | | | onOpenChange | Callback function, can be executed whether the popup calendar is popped up or closed | function(open) | - | | | onPanelChange | Callback when picker panel mode is changed | function(value, mode) | - | | -| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false | | ### Common Methods -| Name | Description | Version | -| ------- | ------------ | ------- | -| blur() | Remove focus | | -| focus() | Get focus | | +| Name | Description | Version | +| --- | --- | --- | +| blur() | Remove focus | | +| focus() | Get focus | | ### DatePicker | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| defaultValue | To set default date, if start time or end time is null or undefined, the date range will be an open interval | [moment](http://momentjs.com/) | - | | | defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | | +| defaultValue | To set default date, if start time or end time is null or undefined, the date range will be an open interval | [moment](http://momentjs.com/) | - | | | disabledTime | To specify the time that cannot be selected | function(date) | - | | -| format | To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting, support [Custom Format](#components-date-picker-demo-format) | string \| (value: moment) => string \| (string \| (value: moment) => string)[] | `YYYY-MM-DD` | | +| format | To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting, support [Custom Format](#components-date-picker-demo-format) | string \| (value: moment) => string \| (string \| (value: moment) => string)\[] | `YYYY-MM-DD` | | | renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - | | +| showNow | Whether to show 'Now' button on panel when `showTime` is set | boolean | - | 4.4.0 | | showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#API) | | | showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() | | | showToday | Whether to show `Today` button | boolean | true | | @@ -98,14 +99,13 @@ The following APIs are shared by DatePicker, RangePicker. | onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | | | onOk | Callback when click ok button | function() | - | | | onPanelChange | Callback function for panel changing | function(value, mode) | - | | -| showNow | Whether to show 'Now' button on panel when `showTime` is set | boolean | - | 4.4.0 | ### DatePicker\[picker=year] | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| defaultValue | To set default date | [moment](http://momentjs.com/) | - | | | defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | | +| defaultValue | To set default date | [moment](http://momentjs.com/) | - | | | format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY` | | | renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | | | value | To set date | [moment](http://momentjs.com/) | - | | @@ -117,8 +117,8 @@ Added in `4.1.0`. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| defaultValue | To set default date | [moment](http://momentjs.com/) | - | | | defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | | +| defaultValue | To set default date | [moment](http://momentjs.com/) | - | | | format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY-\QQ` | | | renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | | | value | To set date | [moment](http://momentjs.com/) | - | | @@ -128,8 +128,8 @@ Added in `4.1.0`. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| defaultValue | To set default date | [moment](http://momentjs.com/) | - | | | defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | | +| defaultValue | To set default date | [moment](http://momentjs.com/) | - | | | format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY-MM` | | | monthCellRender | Custom month cell content render method | function(date, locale): ReactNode | - | | | renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | | @@ -140,12 +140,12 @@ Added in `4.1.0`. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| defaultValue | To set default date | [moment](http://momentjs.com/) | - | | | defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - | | +| defaultValue | To set default date | [moment](http://momentjs.com/) | - | | | format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY-wo` | | +| renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - | | | value | To set date | [moment](http://momentjs.com/) | - | | | onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - | | -| renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - | | ### RangePicker @@ -153,11 +153,11 @@ Added in `4.1.0`. | --- | --- | --- | --- | --- | | allowEmpty | Allow start or end input leave empty | \[boolean, boolean] | \[false, false] | | | dateRender | Customize date cell. `info` argument is added in 4.3.0 | function(currentDate: moment, today: moment, info: { range: `start` \| `end` }) => React.ReactNode | - | | +| defaultPickerValue | To set default picker date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | | | defaultValue | To set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | | -| defaultPickerValue | To set default picker date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)\] | - | | | disabled | If disable start or end | \[boolean, boolean] | - | | | disabledTime | To specify the time that cannot be selected | function(date: moment, partial: `start` \| `end`) | - | | -| format | To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting | string \| string[] | `YYYY-MM-DD HH:mm:ss` | | +| format | To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting | string \| string\[] | `YYYY-MM-DD HH:mm:ss` | | | ranges | The preseted ranges for quick selection | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - | | | renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - | | | separator | Set separator between inputs | string | `~` | | @@ -183,7 +183,7 @@ DatePicker default set `locale` as `en` in v4. You can config DatePicker `locale ### How to modify start day of week? -Please use correct [language](/docs/react/i18n) ([#5605](https://github.com/ant-design/ant-design/issues/5605)), or update moment `locale` config: https://codesandbox.io/s/moment-day-of-week-6dby5 +Please use correct [language](/docs/react/i18n) ([#5605](https://github.com/ant-design/ant-design/issues/5605)), or update moment `locale` config: ```js moment.locale('en', { diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md index 8f6a50dfa4..c4bf9ad447 100644 --- a/components/date-picker/index.zh-CN.md +++ b/components/date-picker/index.zh-CN.md @@ -55,12 +55,14 @@ import locale from 'antd/es/locale/zh_CN'; | --- | --- | --- | --- | --- | | allowClear | 是否显示清除按钮 | boolean | true | | | autoFocus | 自动获取焦点 | boolean | false | | +| bordered | 是否有边框 | boolean | true | | | className | 选择器 className | string | - | | | dateRender | 自定义日期单元格的内容 | function(currentDate: moment, today: moment) => React.ReactNode | - | | | disabled | 禁用 | boolean | false | | | disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | - | | | dropdownClassName | 额外的弹出日历 className | string | - | | | getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - | | +| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | | | locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | | | mode | 日期面板的状态（[设置后无法选择年份/月份？](/docs/react/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？)） | `time` \| `date` \| `month` \| `year` \| `decade` | - | | | open | 控制弹层是否展开 | boolean | - | | @@ -69,29 +71,28 @@ import locale from 'antd/es/locale/zh_CN'; | placeholder | 输入框提示文字 | string \| \[string, string] | - | | | popupStyle | 额外的弹出日历样式 | CSSProperties | {} | | | size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | - | | -| bordered | 是否有边框 | boolean | true | | -| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | | | style | 自定义输入框样式 | CSSProperties | {} | | +| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | | | onOpenChange | 弹出日历和关闭日历的回调 | function(open) | - | | | onPanelChange | 日历面板切换的回调 | function(value, mode) | - | | -| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | | ### 共同的方法 -| 名称 | 描述 | 版本 | -| ------- | -------- | ---- | -| blur() | 移除焦点 | | -| focus() | 获取焦点 | | +| 名称 | 描述 | 版本 | +| --- | --- | --- | +| blur() | 移除焦点 | | +| focus() | 获取焦点 | | ### DatePicker | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| defaultValue | 默认日期，如果开始时间或结束时间为 `null` 或者 `undefined`，日期范围将是一个开区间 | [moment](http://momentjs.com/) | - | | | defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | | +| defaultValue | 默认日期，如果开始时间或结束时间为 `null` 或者 `undefined`，日期范围将是一个开区间 | [moment](http://momentjs.com/) | - | | | disabledTime | 不可选择的时间 | function(date) | - | | -| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [moment.js](http://momentjs.com/)，支持[自定义格式](#components-date-picker-demo-format) | string \| (value: moment) => string \| (string \| (value: moment) => string)[] | `YYYY-MM-DD` | | +| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [moment.js](http://momentjs.com/)，支持[自定义格式](#components-date-picker-demo-format) | string \| (value: moment) => string \| (string \| (value: moment) => string)\[] | `YYYY-MM-DD` | | | renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | | +| showNow | 当设定了 `showTime` 的时候，面板是否显示“此刻”按钮 | boolean | - | 4.4.0 | | showTime | 增加时间选择功能 | Object \| boolean | [TimePicker Options](/components/time-picker/#API) | | | showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() | | | showToday | 是否展示“今天”按钮 | boolean | true | | @@ -99,14 +100,13 @@ import locale from 'antd/es/locale/zh_CN'; | onChange | 时间发生变化的回调 | function(date: moment, dateString: string) | - | | | onOk | 点击确定按钮的回调 | function() | - | | | onPanelChange | 日期面板变化时的回调 | function(value, mode) | - | | -| showNow | 当设定了 `showTime` 的时候，面板是否显示“此刻”按钮 | boolean | - | 4.4.0 | ### DatePicker\[picker=year] | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | | | defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | | +| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | | | format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY` | | | renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | | | value | 日期 | [moment](http://momentjs.com/) | - | | @@ -118,8 +118,8 @@ import locale from 'antd/es/locale/zh_CN'; | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | | | defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | | +| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | | | format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY-\QQ` | | | renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | | | value | 日期 | [moment](http://momentjs.com/) | - | | @@ -129,8 +129,8 @@ import locale from 'antd/es/locale/zh_CN'; | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | | | defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | | +| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | | | format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY-MM` | | | monthCellRender | 自定义的月份内容渲染方法 | function(date, locale): ReactNode | - | | | renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | | @@ -141,12 +141,12 @@ import locale from 'antd/es/locale/zh_CN'; | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | | | defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | | +| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | | | format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY-wo` | | +| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | | | value | 日期 | [moment](http://momentjs.com/) | - | | | onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - | | -| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | | ### RangePicker @@ -154,8 +154,8 @@ import locale from 'antd/es/locale/zh_CN'; | --- | --- | --- | --- | --- | | allowEmpty | 允许起始项部分为空 | \[boolean, boolean] | \[false, false] | | | dateRender | 自定义日期单元格的内容。`info` 参数自 4.3.0 添加 | function(currentDate: moment, today: moment, info: { range: `start` \| `end` }) => React.ReactNode | - | | -| defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | - | | | defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/)\[] | - | | +| defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | - | | | disabled | 禁用起始项 | \[boolean, boolean] | - | | | disabledTime | 不可选择的时间 | function(date: moment, partial: `start` \| `end`) | - | | | format | 展示的日期格式 | string | `YYYY-MM-DD HH:mm:ss` | | @@ -165,8 +165,8 @@ import locale from 'antd/es/locale/zh_CN'; | showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) | | | showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] | | | value | 日期 | [moment](http://momentjs.com/)\[] | - | | -| onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[moment, moment\], dateStrings: \[string, string\], info: { range:`start`\|`end` }) | - | | -| onChange | 日期范围发生变化的回调 | function(dates: \[moment, moment\], dateStrings: \[string, string\]) | - | | +| onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[moment, moment], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | | +| onChange | 日期范围发生变化的回调 | function(dates: \[moment, moment], dateStrings: \[string, string]) | - | | ## FAQ @@ -184,7 +184,7 @@ v4 中，DatePicker 默认 `locale` 为 `en`。你可以通过 DatePicker 的 `l ### 如何修改周的起始日？ -请使用正确的[语言包](/docs/react/i18n)（[#5605](https://github.com/ant-design/ant-design/issues/5605)），或者修改 moment 的 `locale` 配置：https://codesandbox.io/s/moment-day-of-week-6dby5 +请使用正确的[语言包](/docs/react/i18n)（[#5605](https://github.com/ant-design/ant-design/issues/5605)），或者修改 moment 的 `locale` 配置： ```js moment.locale('en', { diff --git a/components/descriptions/index.en-US.md b/components/descriptions/index.en-US.md index 32bd3ad5d7..11a48edd1c 100644 --- a/components/descriptions/index.en-US.md +++ b/components/descriptions/index.en-US.md @@ -18,19 +18,19 @@ Commonly displayed on the details page. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| title | The title of the description list, placed at the top | ReactNode | - | | -| extra | The action area of the description list, placed at the top-right | ReactNode | - | 4.5.0 | | bordered | Whether to display the border | boolean | false | | -| column | The number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect) | number | 3 | | -| size | Set the size of the list. Can be set to `middle`,`small`, or not filled | `default` \| `middle` \| `small` | - | | -| layout | Define description layout | `horizontal` \| `vertical` | `horizontal` | | | colon | Change default props `colon` value of Descriptions.Item | boolean | true | | +| column | The number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect) | number | 3 | | +| extra | The action area of the description list, placed at the top-right | ReactNode | - | 4.5.0 | +| layout | Define description layout | `horizontal` \| `vertical` | `horizontal` | | +| size | Set the size of the list. Can be set to `middle`,`small`, or not filled | `default` \| `middle` \| `small` | - | | +| title | The title of the description list, placed at the top | ReactNode | - | | ### DescriptionItem -| Property | Description | Type | Default | Version | -| -------- | ------------------------------ | --------- | ------- | ------- | -| label | The description of the content | ReactNode | - | | -| span | The number of columns included | number | 1 | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| label | The description of the content | ReactNode | - | | +| span | The number of columns included | number | 1 | | > The number of span Description.Item. Span={2} takes up the width of two DescriptionItems. diff --git a/components/descriptions/index.zh-CN.md b/components/descriptions/index.zh-CN.md index c2b9da0d4c..bb2d6c0bbb 100644 --- a/components/descriptions/index.zh-CN.md +++ b/components/descriptions/index.zh-CN.md @@ -19,19 +19,19 @@ cover: https://gw.alipayobjects.com/zos/alicdn/MjtG9_FOI/Descriptions.svg | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| title | 描述列表的标题，显示在最顶部 | ReactNode | - | | -| extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 | | bordered | 是否展示边框 | boolean | false | | -| column | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number | 3 | | -| size | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效） | `default` \| `middle` \| `small` | - | | -| layout | 描述布局 | `horizontal` \| `vertical` | `horizontal` | | | colon | 配置 `Descriptions.Item` 的 `colon` 的默认值 | boolean | true | | +| column | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number | 3 | | +| extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 | +| layout | 描述布局 | `horizontal` \| `vertical` | `horizontal` | | +| size | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效） | `default` \| `middle` \| `small` | - | | +| title | 描述列表的标题，显示在最顶部 | ReactNode | - | | ### DescriptionItem -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ----- | ------------ | --------- | ------ | ---- | -| label | 内容的描述 | ReactNode | - | | -| span | 包含列的数量 | number | 1 | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| label | 内容的描述 | ReactNode | - | | +| span | 包含列的数量 | number | 1 | | > span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。 diff --git a/components/divider/index.zh-CN.md b/components/divider/index.zh-CN.md index 19d81b8830..8d9e4811c2 100644 --- a/components/divider/index.zh-CN.md +++ b/components/divider/index.zh-CN.md @@ -15,11 +15,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5swjECahe/Divider.svg ## API -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ----------- | -------------------------- | ----------------------------- | ------------ | ----- | -| className | 分割线样式类 | string | - | | -| dashed | 是否虚线 | boolean | false | | -| orientation | 分割线标题的位置 | `left` \| `right` \| `center` | `center` | | -| plain | 文字是否显示为普通正文样式 | boolean | false | 4.2.0 | -| style | 分割线样式对象 | CSSProperties | - | | -| type | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| className | 分割线样式类 | string | - | | +| dashed | 是否虚线 | boolean | false | | +| orientation | 分割线标题的位置 | `left` \| `right` \| `center` | `center` | | +| plain | 文字是否显示为普通正文样式 | boolean | false | 4.2.0 | +| style | 分割线样式对象 | CSSProperties | - | | +| type | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` | | diff --git a/components/drawer/index.en-US.md b/components/drawer/index.en-US.md index fa15ca2dd6..14224d4de7 100644 --- a/components/drawer/index.en-US.md +++ b/components/drawer/index.en-US.md @@ -20,28 +20,28 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr | Props | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| closable | Whether a close (x) button is visible on top right of the Drawer dialog or not | boolean | true | -| closeIcon | Custom close icon | ReactNode | <CloseOutlined /> | -| destroyOnClose | Whether to unmount child components on closing drawer or not | boolean | false | -| forceRender | Prerender Drawer component forcely | boolean | false | -| getContainer | Return the mounted node for Drawer | HTMLElement \| () => HTMLElement \| Selectors \| false | body | -| mask | Whether to show mask or not | boolean | true | -| maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not | boolean | true | -| maskStyle | Style for Drawer's mask element | CSSProperties | {} | -| style | Style of wrapper element which **contains mask** compare to `drawerStyle` | CSSProperties | - | -| drawerStyle | Style of the popup layer element | object | - | -| headerStyle | Style of the drawer header part | object | - | -| bodyStyle | Style of the drawer content part | object | - | -| title | The title for Drawer | ReactNode | - | -| visible | Whether the Drawer dialog is visible or not | boolean | false | -| width | Width of the Drawer dialog | string \| number | 256 | -| height | Placement is `top` or `bottom`, height of the Drawer dialog | string \| number | 256 | -| className | The class name of the container of the Drawer dialog | string | - | -| zIndex | The `z-index` of the Drawer | number | 1000 | -| placement | The placement of the Drawer | `top` \| `right` \| `bottom` \| `left` | `right` | -| onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button | function(e) | - | -| afterVisibleChange | Callback after the animation ends when switching drawers | function(visible) | - | -| keyboard | Whether support press esc to close | boolean | true | -| footer | The footer for Drawer | ReactNode | - | -| footerStyle | Style of the drawer footer part | CSSProperties | - | +| afterVisibleChange | Callback after the animation ends when switching drawers | function(visible) | - | | +| bodyStyle | Style of the drawer content part | object | - | | +| className | The class name of the container of the Drawer dialog | string | - | | +| closable | Whether a close (x) button is visible on top right of the Drawer dialog or not | boolean | true | | +| closeIcon | Custom close icon | ReactNode | <CloseOutlined /> | | +| destroyOnClose | Whether to unmount child components on closing drawer or not | boolean | false | | +| drawerStyle | Style of the popup layer element | object | - | | +| footer | The footer for Drawer | ReactNode | - | | +| footerStyle | Style of the drawer footer part | CSSProperties | - | | +| forceRender | Prerender Drawer component forcely | boolean | false | | +| getContainer | Return the mounted node for Drawer | HTMLElement \| () => HTMLElement \| Selectors \| false | body | | +| headerStyle | Style of the drawer header part | object | - | | +| height | Placement is `top` or `bottom`, height of the Drawer dialog | string \| number | 256 | | +| keyboard | Whether support press esc to close | boolean | true | | +| mask | Whether to show mask or not | boolean | true | | +| maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not | boolean | true | | +| maskStyle | Style for Drawer's mask element | CSSProperties | {} | | +| placement | The placement of the Drawer | `top` \| `right` \| `bottom` \| `left` | `right` | | | push | Nested drawers push behavior | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ | +| style | Style of wrapper element which **contains mask** compare to `drawerStyle` | CSSProperties | - | | +| title | The title for Drawer | ReactNode | - | | +| visible | Whether the Drawer dialog is visible or not | boolean | false | | +| width | Width of the Drawer dialog | string \| number | 256 | | +| zIndex | The `z-index` of the Drawer | number | 1000 | | +| onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button | function(e) | - | | diff --git a/components/drawer/index.zh-CN.md b/components/drawer/index.zh-CN.md index b26be668d9..e4fdb889f0 100644 --- a/components/drawer/index.zh-CN.md +++ b/components/drawer/index.zh-CN.md @@ -19,28 +19,28 @@ cover: https://gw.alipayobjects.com/zos/alicdn/7z8NJQhFb/Drawer.svg | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| closable | 是否显示右上角的关闭按钮 | boolean | true | -| closeIcon | 自定义关闭图标 | ReactNode | <CloseOutlined /> | -| destroyOnClose | 关闭时销毁 Drawer 里的子元素 | boolean | false | -| forceRender | 预渲染 Drawer 内元素 | boolean | false | -| getContainer | 指定 Drawer 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| () => HTMLElement \| Selectors \| false | body | -| maskClosable | 点击蒙层是否允许关闭 | boolean | true | -| mask | 是否展示遮罩 | boolean | true | -| maskStyle | 遮罩样式 | CSSProperties | {} | -| style | 可用于设置 Drawer 最外层容器的样式，和 `drawerStyle` 的区别是作用节点包括 `mask` | CSSProperties | - | -| drawerStyle | 用于设置 Drawer 弹出层的样式 | CSSProperties | - | -| headerStyle | 用于设置 Drawer 头部的样式 | CSSProperties | - | -| bodyStyle | 可用于设置 Drawer 内容部分的样式 | CSSProperties | - | -| title | 标题 | ReactNode | - | -| visible | Drawer 是否可见 | boolean | - | -| width | 宽度 | string \| number | 256 | -| height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 256 | -| className | 对话框外层容器的类名 | string | - | -| zIndex | 设置 Drawer 的 `z-index` | number | 1000 | -| placement | 抽屉的方向 | `top` \| `right` \| `bottom` \| `left` | `right` | -| onClose | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | - | -| afterVisibleChange | 切换抽屉时动画结束后的回调 | function(visible) | - | -| keyboard | 是否支持键盘 esc 关闭 | boolean | true | -| footer | 抽屉的页脚 | ReactNode | - | -| footerStyle | 抽屉页脚部件的样式 | CSSProperties | - | +| afterVisibleChange | 切换抽屉时动画结束后的回调 | function(visible) | - | | +| bodyStyle | 可用于设置 Drawer 内容部分的样式 | CSSProperties | - | | +| className | 对话框外层容器的类名 | string | - | | +| closable | 是否显示右上角的关闭按钮 | boolean | true | | +| closeIcon | 自定义关闭图标 | ReactNode | <CloseOutlined /> | | +| destroyOnClose | 关闭时销毁 Drawer 里的子元素 | boolean | false | | +| drawerStyle | 用于设置 Drawer 弹出层的样式 | CSSProperties | - | | +| footer | 抽屉的页脚 | ReactNode | - | | +| footerStyle | 抽屉页脚部件的样式 | CSSProperties | - | | +| forceRender | 预渲染 Drawer 内元素 | boolean | false | | +| getContainer | 指定 Drawer 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| () => HTMLElement \| Selectors \| false | body | | +| headerStyle | 用于设置 Drawer 头部的样式 | CSSProperties | - | | +| height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 256 | | +| keyboard | 是否支持键盘 esc 关闭 | boolean | true | | +| mask | 是否展示遮罩 | boolean | true | | +| maskClosable | 点击蒙层是否允许关闭 | boolean | true | | +| maskStyle | 遮罩样式 | CSSProperties | {} | | +| placement | 抽屉的方向 | `top` \| `right` \| `bottom` \| `left` | `right` | | | push | 用于设置多层 Drawer 的推动行为 | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ | +| style | 可用于设置 Drawer 最外层容器的样式，和 `drawerStyle` 的区别是作用节点包括 `mask` | CSSProperties | - | | +| title | 标题 | ReactNode | - | | +| visible | Drawer 是否可见 | boolean | - | | +| width | 宽度 | string \| number | 256 | | +| zIndex | 设置 Drawer 的 `z-index` | number | 1000 | | +| onClose | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | - | | diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md index ee7dec1263..e8a54c5269 100644 --- a/components/dropdown/index.en-US.md +++ b/components/dropdown/index.en-US.md @@ -23,10 +23,10 @@ When there are more than a few options to choose from, you can wrap them in a `D | overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - | | | overlayClassName | The class name of the dropdown root element | string | - | | | overlayStyle | The style of the dropdown root element | CSSProperties | - | | -| onVisibleChange | Called when the visible state is changed | (visible: boolean) => void | - | | | placement | Placement of popup menu: `bottomLeft`, `bottomCenter`, `bottomRight`, `topLeft`, `topCenter` or `topRight` | string | `bottomLeft` | | | trigger | The trigger mode which executes the dropdown action. Note that hover can't be used on touchscreens | Array<`click`\|`hover`\|`contextMenu`> | \[`hover`] | | | visible | Whether the dropdown menu is currently visible | boolean | - | | +| onVisibleChange | Called when the visible state is changed | (visible: boolean) => void | - | | You should use [Menu](/components/menu/) as `overlay`. The menu items and dividers are also available by using `Menu.Item` and `Menu.Divider`. @@ -38,14 +38,14 @@ You should use [Menu](/components/menu/) as `overlay`. The menu items and divide | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| buttonsRender | Custom buttons inside Dropdown.Button | (buttons: ReactNode[]) => ReactNode[] | - | | +| buttonsRender | Custom buttons inside Dropdown.Button | (buttons: ReactNode\[]) => ReactNode\[] | - | | | disabled | Whether the dropdown menu is disabled | boolean | - | | | icon | Icon (appears on the right) | ReactNode | - | | -| onClick | The same as [Button](/components/button/#API): called when you click the button on the left | (event) => void | - | | -| onVisibleChange | Called when the visible state is changed | (visible: boolean) => void | - | | | overlay | The dropdown menu | [Menu](/components/menu) | - | | | placement | Placement of popup menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | string | `bottomLeft` | | | size | Size of the button, the same as [Button](/components/button/#API) | string | `default` | | | trigger | The trigger mode which executes the dropdown action | Array<`click`\|`hover`\|`contextMenu`> | \[`hover`] | | | type | Type of the button, the same as [Button](/components/button/#API) | string | `default` | | | visible | Whether the dropdown menu is currently visible | boolean | - | | +| onClick | The same as [Button](/components/button/#API): called when you click the button on the left | (event) => void | - | | +| onVisibleChange | Called when the visible state is changed | (visible: boolean) => void | - | | diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md index 125234aa9e..239f01cc04 100644 --- a/components/dropdown/index.zh-CN.md +++ b/components/dropdown/index.zh-CN.md @@ -27,10 +27,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg | overlay | 菜单 | [Menu](/components/menu) \| () => Menu | - | | | overlayClassName | 下拉根元素的类名称 | string | - | | | overlayStyle | 下拉根元素的样式 | CSSProperties | - | | -| onVisibleChange | 菜单显示状态改变时调用，参数为 `visible` | (visible: boolean) => void | - | | | placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | string | `bottomLeft` | | | trigger | 触发下拉的行为, 移动端不支持 hover | Array<`click`\|`hover`\|`contextMenu`> | \[`hover`] | | | visible | 菜单是否显示 | boolean | - | | +| onVisibleChange | 菜单显示状态改变时调用，参数为 `visible` | (visible: boolean) => void | - | | `overlay` 菜单使用 [Menu](/components/menu/)，还包括菜单项 `Menu.Item`，分割线 `Menu.Divider`。 @@ -42,14 +42,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| buttonsRender | 自定义左右两个按钮 | (buttons: ReactNode[]) => ReactNode[] | - | | +| buttonsRender | 自定义左右两个按钮 | (buttons: ReactNode\[]) => ReactNode\[] | - | | | disabled | 菜单是否禁用 | boolean | - | | | icon | 右侧的 icon | ReactNode | - | | -| onClick | 点击左侧按钮的回调，和 [Button](/components/button/#API) 一致 | (event) => void | - | | -| onVisibleChange | 菜单显示状态改变时调用，参数为 `visible` | (visible: boolean) => void | - | | | overlay | 菜单 | [Menu](/components/menu/) | - | | | placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | string | `bottomLeft` | | | size | 按钮大小，和 [Button](/components/button/#API) 一致 | string | `default` | | | trigger | 触发下拉的行为 | Array<`click`\|`hover`\|`contextMenu`> | \[`hover`] | | | type | 按钮类型，和 [Button](/components/button/#API) 一致 | string | `default` | | | visible | 菜单是否显示 | boolean | - | | +| onClick | 点击左侧按钮的回调，和 [Button](/components/button/#API) 一致 | (event) => void | - | | +| onVisibleChange | 菜单显示状态改变时调用，参数为 `visible` | (visible: boolean) => void | - | | diff --git a/components/empty/index.en-US.md b/components/empty/index.en-US.md index c9a187eb3b..9c7cd06530 100644 --- a/components/empty/index.en-US.md +++ b/components/empty/index.en-US.md @@ -24,8 +24,8 @@ Empty state placeholder. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | description | Customize description | ReactNode | - | | -| imageStyle | The style of image | CSSProperties | - | | | image | Customize image. Will treat as image url when string provided | ReactNode | `Empty.PRESENTED_IMAGE_DEFAULT` | | +| imageStyle | The style of image | CSSProperties | - | | ## Built-in images diff --git a/components/empty/index.zh-CN.md b/components/empty/index.zh-CN.md index 013468debe..ef887fb9a1 100644 --- a/components/empty/index.zh-CN.md +++ b/components/empty/index.zh-CN.md @@ -25,8 +25,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/MNbKfLBVb/Empty.svg | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | description | 自定义描述内容 | ReactNode | - | | -| imageStyle | 图片样式 | CSSProperties | - | | | image | 设置显示图片，为 string 时表示自定义图片地址。 | ReactNode | `Empty.PRESENTED_IMAGE_DEFAULT` | | +| imageStyle | 图片样式 | CSSProperties | - | | ## 内置图片 diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md index 578f035199..373412ce08 100644 --- a/components/form/index.en-US.md +++ b/components/form/index.en-US.md @@ -19,8 +19,8 @@ High performance Form component with data scope management. Including data colle | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| component | Set the Form rendering element. Do not create a DOM node for `false` | ComponentType \| false | form | | | colon | Configure the default value of `colon` for Form.Item. Indicates whether the colon after the label is displayed (only effective when prop layout is horizontal) | boolean | true | | +| component | Set the Form rendering element. Do not create a DOM node for `false` | ComponentType \| false | form | | | fields | Control of form fields through state management (such as redux). Not recommended for non-strong demand. View [example](#components-form-demo-global-state) | [FieldData](#FieldData)\[] | - | | | form | Form control instance created by `Form.useForm()`. Automatically created when not provided | [FormInstance](#FormInstance) | - | | | initialValues | Set value by Form initialization or reset | object | - | | @@ -33,11 +33,11 @@ High performance Form component with data scope management. Including data colle | scrollToFirstError | Auto scroll to first failed field when submit | boolean | false | | | size | Set field component size (antd components only) | `small` \| `middle` \| `large` | - | | | validateMessages | Validation prompt template, description [see below](#validateMessages) | [ValidateMessages](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts) | - | | -| validateTrigger | Config field validate trigger | string \| string[] | `onChange` | 4.3.0 | +| validateTrigger | Config field validate trigger | string \| string\[] | `onChange` | 4.3.0 | | wrapperCol | The layout for input controls, same as `labelCol` | [object](/components/grid/#Col) | - | | +| onFieldsChange | Trigger when field updated | function(changedFields, allFields) | - | | | onFinish | Trigger after submitting the form and verifying data successfully | function(values) | - | | | onFinishFailed | Trigger after submitting the form and verifying data failed | function({ values, errorFields, outOfDate }) | - | | -| onFieldsChange | Trigger when field updated | function(changedFields, allFields) | - | | | onValuesChange | Trigger when value updated | function(changedValues, allValues) | - | | ### validateMessages @@ -73,33 +73,33 @@ Form field component for data bidirectional binding, validation, layout, and so | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | colon | Used with `label`, whether to display `:` after label text. | boolean | true | | -| dependencies | Set the dependency field. See [below](#dependencies) | [NamePath](#NamePath)[] | - | | +| dependencies | Set the dependency field. See [below](#dependencies) | [NamePath](#NamePath)\[] | - | | | extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time | ReactNode | - | | -| getValueFromEvent | Specify how to get value from event or other onChange arguments | (..args: any[]) => any | - | | +| getValueFromEvent | Specify how to get value from event or other onChange arguments | (..args: any\[]) => any | - | | | getValueProps | Additional props with sub component | (value: any) => any | - | 4.2.0 | | hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input` | boolean | false | | | help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | ReactNode | - | | +| hidden | Whether to hide Form.Item (still collect and validate value) | boolean | false | | | htmlFor | Set sub label `htmlFor` | string | - | | | initialValue | Config sub default value. Form `initialValues` get higher priority when conflict | string | - | 4.2.0 | -| noStyle | No style for `true`, used as a pure field control | boolean | false | | | label | Label text | ReactNode | - | | | labelAlign | The text align of label | `left` \| `right` | `right` | | | labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with ``. You can set `labelCol` on Form which will not affect nest Item. If both exists, use Item first | [object](/components/grid/#Col) | - | | -| messageVariables | default validate filed info | Record | - | 4.7.0 | +| messageVariables | default validate filed info | Record<string, string> | - | 4.7.0 | | name | Field name, support array | [NamePath](#NamePath) | - | | | normalize | Normalize value from component value before passing to Form instance | (value, prevValue, prevValues) => any | - | | +| noStyle | No style for `true`, used as a pure field control | boolean | false | | | preserve | Keep field value even when field removed | boolean | true | 4.4.0 | | required | Display required style. It will be generated by the validation rule | boolean | false | | -| rules | Rules for field validation. Click [here](#components-form-demo-basic) to see an example | [Rule](#Rule)[] | - | | +| rules | Rules for field validation. Click [here](#components-form-demo-basic) to see an example | [Rule](#Rule)\[] | - | | | shouldUpdate | Custom field update logic. See [below](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false | | | tooltip | Config tooltip info | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip#API) | - | 4.7.0 | | trigger | When to collect the value of children node | string | `onChange` | | | validateFirst | Whether stop validate on first rule of error for this field. Will parallel validate when `parallel` cofigured | boolean \| `parallel` | false | `parallel`: 4.5.0 | | validateStatus | The validation status. If not provided, it will be generated by validation rule. options: `success` `warning` `error` `validating` | string | - | | -| validateTrigger | When to validate the value of children node | string \| string[] | `onChange` | | +| validateTrigger | When to validate the value of children node | string \| string\[] | `onChange` | | | valuePropName | Props of children node, for example, the prop of Switch is 'checked'. This prop is an encapsulation of `getValueProps`, which will be invalid after customizing `getValueProps` | string | `value` | | | wrapperCol | The layout for input controls, same as `labelCol`. You can set `wrapperCol` on Form which will not affect nest Item. If both exists, use Item first | [object](/components/grid/#Col) | - | | -| hidden | Whether to hide Form.Item (still collect and validate value) | boolean | false | | After wrapped by `Form.Item` with `name` property, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls, the flow of form data will be handled by Form which will cause: @@ -168,9 +168,9 @@ Provides array management for fields. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | +| children | Render function | (fields: Field\[], operation: { add, remove, move }) => React.ReactNode | - | | | name | Field name, support array | [NamePath](#NamePath) | - | | -| children | Render function | (fields: Field[], operation: { add, remove, move }) => React.ReactNode | - | | -| rules | Validate rules, only support customize validator. Should work with [ErrorList](#Form.ErrorList) | { validator, message }[] | - | 4.7.0 | +| rules | Validate rules, only support customize validator. Should work with [ErrorList](#Form.ErrorList) | { validator, message }\[] | - | 4.7.0 | ```tsx @@ -193,16 +193,16 @@ Some operator functions in render form of Form.List. | Property | Description | Type | Default | | --- | --- | --- | --- | | add | add form item | (defaultValue?: any, insertIndex?: number) => void | insertIndex: 4.6.0 | -| remove | remove form item | (index: number \| number[]) => void | number[]: 4.5.0 | | move | move form item | (from: number, to: number) => void | - | +| remove | remove form item | (index: number \| number\[]) => void | number\[]: 4.5.0 | ## Form.ErrorList New in 4.7.0. Show error messages, should only work with `rules` of Form.List. -| Property | Description | Type | Default | -| -------- | ----------- | ----------- | ------- | -| errors | Error list | ReactNode[] | - | +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| errors | Error list | ReactNode\[] | - | ## Form.Provider @@ -230,20 +230,20 @@ Provide linkage between forms. If a sub form with `name` prop update, it will au | Name | Description | Type | Version | | --- | --- | --- | --- | +| getFieldError | Get the error messages by the field name | (name: [NamePath](#NamePath)) => string\[] | | | getFieldInstance | Get field instance | (name: [NamePath](#NamePath)) => any | 4.4.0 | +| getFieldsError | Get the error messages by the fields name. Return as an array | (nameList?: [NamePath](#NamePath)\[]) => FieldError\[] | | +| getFieldsValue | Get values by a set of field names. Return according to the corresponding structure | (nameList?: [NamePath](#NamePath)\[], filterFunc?: (meta: { touched: boolean, validating: boolean }) => boolean) => any | | | getFieldValue | Get the value by the field name | (name: [NamePath](#NamePath)) => any | | -| getFieldsValue | Get values by a set of field names. Return according to the corresponding structure | (nameList?: [NamePath](#NamePath)[], filterFunc?: (meta: { touched: boolean, validating: boolean }) => boolean) => any | | -| getFieldError | Get the error messages by the field name | (name: [NamePath](#NamePath)) => string[] | | -| getFieldsError | Get the error messages by the fields name. Return as an array | (nameList?: [NamePath](#NamePath)[]) => FieldError[] | | +| isFieldsTouched | Check if fields have been operated. Check if all fields is touched when `allTouched` is `true` | (nameList?: [NamePath](#NamePath)\[], allTouched?: boolean) => boolean | | | isFieldTouched | Check if a field has been operated | (name: [NamePath](#NamePath)) => boolean | | -| isFieldsTouched | Check if fields have been operated. Check if all fields is touched when `allTouched` is `true` | (nameList?: [NamePath](#NamePath)[], allTouched?: boolean) => boolean | | | isFieldValidating | Check fields if is in validating | (name: [NamePath](#NamePath)) => boolean | | -| resetFields | Reset fields to `initialValues` | (fields?: [NamePath](#NamePath)[]) => void | | -| scrollToField | Scroll to field position | (name: [NamePath](#NamePath), options: [[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void | | -| setFields | Set fields status | (fields: [FieldData](#FieldData)[]) => void | | +| resetFields | Reset fields to `initialValues` | (fields?: [NamePath](#NamePath)\[]) => void | | +| scrollToField | Scroll to field position | (name: [NamePath](#NamePath), options: \[[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void | | +| setFields | Set fields status | (fields: [FieldData](#FieldData)\[]) => void | | | setFieldsValue | Set fields value | (values) => void | | | submit | Submit the form. It's same as click `submit` button | () => void | | -| validateFields | Validate fields | (nameList?: [NamePath](#NamePath)[]) => Promise | | +| validateFields | Validate fields | (nameList?: [NamePath](#NamePath)\[]) => Promise | | #### validateFields return sample @@ -283,13 +283,13 @@ validateFields() #### FieldData -| Name | Description | Type | -| ---------- | ------------------------ | ----------------------- | -| touched | Whether is operated | boolean | -| validating | Whether is in validating | boolean | -| errors | Error messages | string[] | -| name | Field name path | [NamePath](#NamePath)[] | -| value | Field value | any | +| Name | Description | Type | +| --- | --- | --- | +| errors | Error messages | string\[] | +| name | Field name path | [NamePath](#NamePath)\[] | +| touched | Whether is operated | boolean | +| validating | Whether is in validating | boolean | +| value | Field value | any | #### Rule @@ -301,7 +301,7 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig); | Name | Description | Type | | --- | --- | --- | -| enum | Match enum value. You need to set `type` to `enum` to enable this | any[] | +| enum | Match enum value. You need to set `type` to `enum` to enable this | any\[] | | len | Length of string, number, array | number | | max | `type` required: max length of `string`, `number`, `array` | number | | message | Error message. Will auto generate by [template](#validateMessages) if not provided | string | @@ -310,9 +310,9 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig); | required | Required field | boolean | | transform | Transform value to the rule before validation | (value) => any | | type | Normally `string` \|`number` \|`boolean` \|`url` \| `email`. More type to ref [here](https://github.com/yiminghe/async-validator#type) | string | +| validateTrigger | Set validate trigger event. Must be the sub set of `validateTrigger` in Form.Item | string \| string\[] | | validator | Customize validation rule. Accept Promise as return. See [example](#components-form-demo-register) | ([rule](#Rule), value) => Promise | | whitespace | Failed if only has whitespace | boolean | -| validateTrigger | Set validate trigger event. Must be the sub set of `validateTrigger` in Form.Item | string \| string[] | ## Migrate to v4 @@ -366,7 +366,7 @@ Components inside Form.Item with name property will turn into controlled mode, w ### Why can not call `ref` of Form at first time? -`ref` only receives the mounted instance. please ref React official doc: https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs +`ref` only receives the mounted instance. please ref React official doc: ### Why `resetFields` will re-mount component? diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md index 142c52cdee..fd425364b8 100644 --- a/components/form/index.zh-CN.md +++ b/components/form/index.zh-CN.md @@ -20,8 +20,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| component | 设置 Form 渲染元素，为 `false` 则不创建 DOM 节点 | ComponentType \| false | form | | | colon | 配置 Form.Item 的 `colon` 的默认值。表示是否显示 label 后面的冒号 (只有在属性 layout 为 horizontal 时有效) | boolean | true | | +| component | 设置 Form 渲染元素，为 `false` 则不创建 DOM 节点 | ComponentType \| false | form | | | fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。查看[示例](#components-form-demo-global-state) | [FieldData](#FieldData)\[] | - | | | form | 经 `Form.useForm()` 创建的 form 控制实例，不提供时会自动创建 | [FormInstance](#FormInstance) | - | | | initialValues | 表单默认值，只有初始化以及重置时生效 | object | - | | @@ -34,11 +34,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg | scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean | false | | | size | 设置字段组件的尺寸（仅限 antd 组件） | `small` \| `middle` \| `large` | - | | | validateMessages | 验证提示模板，说明[见下](#validateMessages) | [ValidateMessages](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts) | - | | -| validateTrigger | 统一设置字段校验规则 | string \| string[] | `onChange` | 4.3.0 | +| validateTrigger | 统一设置字段校验规则 | string \| string\[] | `onChange` | 4.3.0 | | wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/components/grid/#Col) | - | | +| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | - | | | onFinish | 提交表单且数据验证成功后回调事件 | function(values) | - | | | onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | - | | -| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | - | | | onValuesChange | 字段值更新时触发回调事件 | function(changedValues, allValues) | - | | ### validateMessages @@ -74,33 +74,33 @@ const validateMessages = { | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | colon | 配合 `label` 属性使用，表示是否显示 `label` 后面的冒号 | boolean | true | | -| dependencies | 设置依赖字段，说明[见下](#dependencies) | [NamePath](#NamePath)[] | - | | +| dependencies | 设置依赖字段，说明[见下](#dependencies) | [NamePath](#NamePath)\[] | - | | | extra | 额外的提示信息，和 `help` 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | ReactNode | - | | -| getValueFromEvent | 设置如何将 event 的值转换成字段值 | (..args: any[]) => any | - | | +| getValueFromEvent | 设置如何将 event 的值转换成字段值 | (..args: any\[]) => any | - | | | getValueProps | 为子元素添加额外的属性 | (value: any) => any | - | 4.2.0 | | hasFeedback | 配合 `validateStatus` 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false | | | help | 提示信息，如不设置，则会根据校验规则自动生成 | ReactNode | - | | +| hidden | 是否隐藏字段（依然会收集和校验字段） | boolean | false | | | htmlFor | 设置子元素 label `htmlFor` 属性 | string | - | | | initialValue | 设置子元素默认值，如果与 Form 的 `initialValues` 冲突则以 Form 为准 | string | - | 4.2.0 | -| noStyle | 为 `true` 时不带样式，作为纯字段控件使用 | boolean | false | | | label | `label` 标签的文本 | ReactNode | - | | | labelAlign | 标签文本对齐方式 | `left` \| `right` | `right` | | | labelCol | `label` 标签布局，同 `` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置，，不会作用于嵌套 Item。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid/#Col) | - | | -| messageVariables | 默认验证字段的信息 | Record | - | 4.7.0 | +| messageVariables | 默认验证字段的信息 | Record<string, string> | - | 4.7.0 | | name | 字段名，支持数组 | [NamePath](#NamePath) | - | | -| preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 | | normalize | 组件获取值后进行转换，再放入 Form 中 | (value, prevValue, prevValues) => any | - | | +| noStyle | 为 `true` 时不带样式，作为纯字段控件使用 | boolean | false | | +| preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 | | required | 必填样式设置。如不设置，则会根据校验规则自动生成 | boolean | false | | -| rules | 校验规则，设置字段的校验逻辑。点击[此处](#components-form-demo-basic)查看示例 | [Rule](#Rule)[] | - | | +| rules | 校验规则，设置字段的校验逻辑。点击[此处](#components-form-demo-basic)查看示例 | [Rule](#Rule)\[] | - | | | shouldUpdate | 自定义字段更新逻辑，说明[见下](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false | | | tooltip | 配置提示信息 | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip#API) | - | 4.7.0 | | trigger | 设置收集字段值变更的时机 | string | `onChange` | | | validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验。设置 `parallel` 时会并行校验 | boolean \| `parallel` | false | `parallel`: 4.5.0 | | validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | - | | -| validateTrigger | 设置字段校验的时机 | string \| string[] | `onChange` | | +| validateTrigger | 设置字段校验的时机 | string \| string\[] | `onChange` | | | valuePropName | 子节点的值的属性，如 Switch 的是 'checked'。该属性为 `getValueProps` 的封装，自定义 `getValueProps` 后会失效 | string | `value` | | | wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 `labelCol`。你可以通过 Form 的 `wrapperCol` 进行统一设置，不会作用于嵌套 Item。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid/#Col) | - | | -| hidden | 是否隐藏字段（依然会收集和校验字段） | boolean | false | | 被设置了 `name` 属性的 `Form.Item` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果： @@ -169,9 +169,9 @@ Form 通过增量更新方式，只更新被修改的字段相关组件以达到 | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | +| children | 渲染函数 | (fields: Field\[], operation: { add, remove, move }) => React.ReactNode | - | | | name | 字段名，支持数组 | [NamePath](#NamePath) | - | | -| children | 渲染函数 | (fields: Field[], operation: { add, remove, move }) => React.ReactNode | - | | -| rules | 校验规则，仅支持自定义规则。需要配合 [ErrorList](#Form.ErrorList) 一同使用。 | { validator, message }[] | - | 4.7.0 | +| rules | 校验规则，仅支持自定义规则。需要配合 [ErrorList](#Form.ErrorList) 一同使用。 | { validator, message }\[] | - | 4.7.0 | ```tsx @@ -192,19 +192,19 @@ Form 通过增量更新方式，只更新被修改的字段相关组件以达到 Form.List 渲染表单相关操作函数。 -| 参数 | 说明 | 类型 | 默认值 | -| ------ | ---------- | -------------------------------------------------- | ------------------ | -| add | 新增表单项 | (defaultValue?: any, insertIndex?: number) => void | insertIndex: 4.6.0 | -| remove | 删除表单项 | (index: number \| number[]) => void | number[]: 4.5.0 | -| move | 移动表单项 | (from: number, to: number) => void | - | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| add | 新增表单项 | (defaultValue?: any, insertIndex?: number) => void | insertIndex: 4.6.0 | +| move | 移动表单项 | (from: number, to: number) => void | - | +| remove | 删除表单项 | (index: number \| number\[]) => void | number\[]: 4.5.0 | ## Form.ErrorList 4.7.0 新增。错误展示组件，仅限配合 Form.List 的 rules 一同使用。 -| 参数 | 说明 | 类型 | 默认值 | -| ------ | -------- | ----------- | ------ | -| errors | 错误列表 | ReactNode[] | - | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| errors | 错误列表 | ReactNode\[] | - | ## Form.Provider @@ -232,20 +232,20 @@ Form.List 渲染表单相关操作函数。 | 名称 | 说明 | 类型 | 版本 | | --- | --- | --- | --- | +| getFieldError | 获取对应字段名的错误信息 | (name: [NamePath](#NamePath)) => string\[] | | | getFieldInstance | 获取对应字段实例 | (name: [NamePath](#NamePath)) => any | 4.4.0 | +| getFieldsError | 获取一组字段名对应的错误信息，返回为数组形式 | (nameList?: [NamePath](#NamePath)\[]) => FieldError\[] | | +| getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回 | (nameList?: [NamePath](#NamePath)\[], filterFunc?: (meta: { touched: boolean, validating: boolean }) => boolean) => any | | | getFieldValue | 获取对应字段名的值 | (name: [NamePath](#NamePath)) => any | | -| getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回 | (nameList?: [NamePath](#NamePath)[], filterFunc?: (meta: { touched: boolean, validating: boolean }) => boolean) => any | | -| getFieldError | 获取对应字段名的错误信息 | (name: [NamePath](#NamePath)) => string[] | | -| getFieldsError | 获取一组字段名对应的错误信息，返回为数组形式 | (nameList?: [NamePath](#NamePath)[]) => FieldError[] | | +| isFieldsTouched | 检查一组字段是否被用户操作过，`allTouched` 为 `true` 时检查是否所有字段都被操作过 | (nameList?: [NamePath](#NamePath)\[], allTouched?: boolean) => boolean | | | isFieldTouched | 检查对应字段是否被用户操作过 | (name: [NamePath](#NamePath)) => boolean | | -| isFieldsTouched | 检查一组字段是否被用户操作过，`allTouched` 为 `true` 时检查是否所有字段都被操作过 | (nameList?: [NamePath](#NamePath)[], allTouched?: boolean) => boolean | | | isFieldValidating | 检查一组字段是否正在校验 | (name: [NamePath](#NamePath)) => boolean | | -| resetFields | 重置一组字段到 `initialValues` | (fields?: [NamePath](#NamePath)[]) => void | | -| scrollToField | 滚动到对应字段位置 | (name: [NamePath](#NamePath), options: [[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void | | -| setFields | 设置一组字段状态 | (fields: [FieldData](#FieldData)[]) => void | | +| resetFields | 重置一组字段到 `initialValues` | (fields?: [NamePath](#NamePath)\[]) => void | | +| scrollToField | 滚动到对应字段位置 | (name: [NamePath](#NamePath), options: \[[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void | | +| setFields | 设置一组字段状态 | (fields: [FieldData](#FieldData)\[]) => void | | | setFieldsValue | 设置表单的值 | (values) => void | | | submit | 提交表单，与点击 `submit` 按钮效果相同 | () => void | | -| validateFields | 触发表单验证 | (nameList?: [NamePath](#NamePath)[]) => Promise | | +| validateFields | 触发表单验证 | (nameList?: [NamePath](#NamePath)\[]) => Promise | | #### validateFields 返回示例 @@ -285,13 +285,13 @@ validateFields() #### FieldData -| 名称 | 说明 | 类型 | -| ---------- | ---------------- | ----------------------- | -| touched | 是否被用户操作过 | boolean | -| validating | 是否正在校验 | boolean | -| errors | 错误信息 | string[] | -| name | 字段名称 | [NamePath](#NamePath)[] | -| value | 字段对应值 | any | +| 名称 | 说明 | 类型 | +| --- | --- | --- | +| errors | 错误信息 | string\[] | +| name | 字段名称 | [NamePath](#NamePath)\[] | +| touched | 是否被用户操作过 | boolean | +| validating | 是否正在校验 | boolean | +| value | 字段对应值 | any | #### Rule @@ -303,7 +303,7 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig); | 名称 | 说明 | 类型 | | --- | --- | --- | -| enum | 是否匹配枚举中的值（需要将 `type` 设置为 `enum`） | any[] | +| enum | 是否匹配枚举中的值（需要将 `type` 设置为 `enum`） | any\[] | | len | string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度 | number | | max | 必须设置 `type`：string 类型为字符串最大长度；number 类型时为最大值；array 类型时为数组最大长度 | number | | message | 错误信息，不设置时会通过[模板](#validateMessages)自动生成 | string | @@ -312,9 +312,9 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig); | required | 是否为必选字段 | boolean | | transform | 将字段值转换成目标值后进行校验 | (value) => any | | type | 类型，常见有 `string` \|`number` \|`boolean` \|`url` \| `email`。更多请参考[此处](https://github.com/yiminghe/async-validator#type) | string | +| validateTrigger | 设置触发验证时机，必须是 Form.Item 的 `validateTrigger` 的子集 | string \| string\[] | | validator | 自定义校验，接收 Promise 作为返回值。[示例](#components-form-demo-register)参考 | ([rule](#Rule), value) => Promise | | whitespace | 如果字段仅包含空格则校验不通过 | boolean | -| validateTrigger | 设置触发验证时机，必须是 Form.Item 的 `validateTrigger` 的子集 | string \| string[] | ## 从 v3 升级到 v4 @@ -368,7 +368,7 @@ validator(rule, value, callback) => { ### 为什么第一次调用 `ref` 的 From 为空？ -`ref` 仅在节点被加载时才会被赋值，请参考 React 官方文档：https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs +`ref` 仅在节点被加载时才会被赋值，请参考 React 官方文档： ### 为什么 `resetFields` 会重新 mount 组件？ diff --git a/components/grid/index.en-US.md b/components/grid/index.en-US.md index 4a00fec1df..efff5f91a2 100644 --- a/components/grid/index.en-US.md +++ b/components/grid/index.en-US.md @@ -87,11 +87,11 @@ If the Ant Design grid layout component does not meet your needs, you can use th ### Row -| Property | Description | Type | Default | Version | -| --- | --- | --- | --- | --- | -| align | Vertical alignment | `top` \| `middle` \| `bottom` | `top` | | +| Property | Description | Type | Default | Version | | +| --- | --- | --- | --- | --- | --- | +| align | Vertical alignment | `top` \| `middle` \| `bottom` | `top` | | | | gutter | Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}. Or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` | number \| object \| array | 0 | | | -| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` | `start` | | +| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` | `start` | | | ### Col diff --git a/components/icon/index.en-US.md b/components/icon/index.en-US.md index e9912aeb8a..2711dae984 100644 --- a/components/icon/index.en-US.md +++ b/components/icon/index.en-US.md @@ -14,7 +14,7 @@ npm install --save @ant-design/icons ## List of icons -```__react +```_\_react import IconDisplay from 'site/theme/template/IconDisplay'; ReactDOM.render(, mountNode); ``` @@ -45,7 +45,7 @@ import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons'; | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| component | The component used for the root node | ComponentType | - | | +| component | The component used for the root node | ComponentType<CustomIconComponentProps> | - | | | rotate | Rotate degrees (not working in IE9) | number | - | | | spin | Rotate icon with animation | boolean | false | | | style | The style properties of icon, like `fontSize` and `color` | CSSProperties | - | | @@ -113,7 +113,7 @@ The following options are available: | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | extraCommonProps | Define extra properties to the component | { \[key: string]: any } | {} | | -| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. Support `string[]` after `@ant-design/icons@4.1.0` | string \| string[] | - | | +| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. Support `string[]` after `@ant-design/icons@4.1.0` | string \| string\[] | - | | The property `scriptUrl` should be set to import the SVG sprite symbols. diff --git a/components/icon/index.zh-CN.md b/components/icon/index.zh-CN.md index b763df94d4..cc85feb603 100644 --- a/components/icon/index.zh-CN.md +++ b/components/icon/index.zh-CN.md @@ -19,7 +19,7 @@ npm install --save @ant-design/icons ## 图标列表 -```__react +```_\_react import IconDisplay from 'site/theme/template/IconDisplay'; ReactDOM.render(, mountNode); ``` @@ -52,7 +52,7 @@ import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons'; | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| component | 控制如何渲染图标，通常是一个渲染根标签为 `` 的 React 组件 | ComponentType | - | | +| component | 控制如何渲染图标，通常是一个渲染根标签为 `` 的 React 组件 | ComponentType<CustomIconComponentProps> | - | | | rotate | 图标旋转角度（IE9 无效） | number | - | | | spin | 是否有旋转动画 | boolean | false | | | style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - | | @@ -108,7 +108,7 @@ options 的配置项如下： | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | extraCommonProps | 给所有的 `svg` 图标 `` 组件设置额外的属性 | { \[key: string]: any } | {} | | -| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 js 地址，`@ant-design/icons@4.1.0` 之后支持 `string[]` 类型 | string \| string[] | - | | +| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 js 地址，`@ant-design/icons@4.1.0` 之后支持 `string[]` 类型 | string \| string\[] | - | | 在 `scriptUrl` 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。 @@ -148,10 +148,10 @@ ReactDOM.render(, mountNode); `Icon` 中的 `component` 组件的接受的属性如下： -| 字段 | 说明 | 类型 | 只读值 | 版本 | -| --------- | ----------------------- | ---------------- | -------------- | ---- | -| className | 计算后的 `svg` 类名 | string | - | | -| fill | `svg` 元素填充的颜色 | string | `currentColor` | | -| height | `svg` 元素高度 | string \| number | `1em` | | -| style | 计算后的 `svg` 元素样式 | CSSProperties | - | | -| width | `svg` 元素宽度 | string \| number | `1em` | | +| 字段 | 说明 | 类型 | 只读值 | 版本 | +| --- | --- | --- | --- | --- | +| className | 计算后的 `svg` 类名 | string | - | | +| fill | `svg` 元素填充的颜色 | string | `currentColor` | | +| height | `svg` 元素高度 | string \| number | `1em` | | +| style | 计算后的 `svg` 元素样式 | CSSProperties | - | | +| width | `svg` 元素宽度 | string \| number | `1em` | | diff --git a/components/image/index.en-US.md b/components/image/index.en-US.md index a7e2794d05..918011c690 100644 --- a/components/image/index.en-US.md +++ b/components/image/index.en-US.md @@ -34,4 +34,4 @@ Previewable image. } ``` -Other attributes [](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes) +Other attributes [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes) diff --git a/components/image/index.zh-CN.md b/components/image/index.zh-CN.md index 6051ac8bf1..3c852bc593 100644 --- a/components/image/index.zh-CN.md +++ b/components/image/index.zh-CN.md @@ -35,4 +35,4 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg } ``` -其他属性见 [](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes) +其他属性见 [<img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes) diff --git a/components/input-number/index.en-US.md b/components/input-number/index.en-US.md index 870949ef78..63a786b2fe 100644 --- a/components/input-number/index.en-US.md +++ b/components/input-number/index.en-US.md @@ -16,28 +16,28 @@ When a numeric value needs to be provided. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | autoFocus | If get focus when component mounted | boolean | false | - | +| decimalSeparator | Decimal separator | string | - | - | | defaultValue | The initial value | number | - | - | | disabled | If disable the input | boolean | false | - | -| readOnly | If readonly the input | boolean | false | - | | formatter | Specifies the format of the value presented | function(value: number \| string): string | - | - | | max | The max value | number | [Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) | - | | min | The min value | number | [Number.MIN_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER) | - | | parser | Specifies the value extracted from formatter | function(string): number | - | - | | precision | The precision of input value | number | - | - | -| decimalSeparator | Decimal separator | string | - | - | +| readOnly | If readonly the input | boolean | false | - | | size | The height of input box | `large` \| `middle` \| `small` | - | - | | step | The number to which the current value is increased or decreased. It can be an integer or decimal | number \| string | 1 | - | | value | The current value | number | - | - | | onChange | The callback triggered when the value is changed | function(value: number \| string) | - | - | | onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | - | -| onStep | The callback function that is triggered when click up or down buttons | `(value: number, info: { offset: number, type: 'up' | 'down' }) => void` | - | 4.7.0 | +| onStep | The callback function that is triggered when click up or down buttons | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 | ## Methods -| Name | Description | -| ------- | ------------ | -| blur() | Remove focus | -| focus() | Get focus | +| Name | Description | +| --- | --- | +| blur() | Remove focus | +| focus() | Get focus | ## Notes diff --git a/components/input-number/index.zh-CN.md b/components/input-number/index.zh-CN.md index 5766f32f3f..eb00ec9eb6 100644 --- a/components/input-number/index.zh-CN.md +++ b/components/input-number/index.zh-CN.md @@ -19,25 +19,25 @@ cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg | 成员 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | autoFocus | 自动获取焦点 | boolean | false | - | +| decimalSeparator | 小数点 | string | - | - | | defaultValue | 初始值 | number | - | - | | disabled | 禁用 | boolean | false | - | -| readOnly | 只读 | boolean | false | - | | formatter | 指定输入框展示值的格式 | function(value: number \| string): string | - | - | | max | 最大值 | number | [Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) | - | | min | 最小值 | number | [Number.MIN_SAFE_INTEGER](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER) | - | | parser | 指定从 `formatter` 里转换回数字的方式，和 `formatter` 搭配使用 | function(string): number | - | - | | precision | 数值精度 | number | - | - | -| decimalSeparator | 小数点 | string | - | - | +| readOnly | 只读 | boolean | false | - | | size | 输入框大小 | `large` \| `middle` \| `small` | - | - | | step | 每次改变步数，可以为小数 | number \| string | 1 | - | | value | 当前值 | number | - | - | | onChange | 变化回调 | function(value: number \| string) | - | - | | onPressEnter | 按下回车的回调 | function(e) | - | - | -| onStep | 点击上下箭头的回调 | `(value: number, info: { offset: number, type: 'up' | 'down' }) => void` | - | 4.7.0 | +| onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 | ## 方法 -| 名称 | 描述 | -| ------- | -------- | -| blur() | 移除焦点 | +| 名称 | 描述 | +| --- | --- | +| blur() | 移除焦点 | | focus() | 获取焦点 | diff --git a/components/input/index.en-US.md b/components/input/index.en-US.md index 7fe9cece2d..4b8dc257f1 100644 --- a/components/input/index.en-US.md +++ b/components/input/index.en-US.md @@ -20,6 +20,8 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca | --- | --- | --- | --- | --- | | addonAfter | The label text displayed after (on the right side of) the input field | ReactNode | - | | | addonBefore | The label text displayed before (on the left side of) the input field | ReactNode | - | | +| allowClear | If allow to remove input content with clear icon | boolean | false | | +| bordered | Whether has border style | boolean | true | 4.5.0 | | defaultValue | The initial input content | string | - | | | disabled | Whether the input is disabled | boolean | false | | | id | The ID for input | string | - | | @@ -31,8 +33,6 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca | value | The input content value | string | - | | | onChange | Callback when user input | function(e) | - | | | onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | | -| allowClear | If allow to remove input content with clear icon | boolean | false | | -| bordered | Whether has border style | boolean | true | 4.5.0 | > When `Input` is used in a `Form.Item` context, if the `Form.Item` has the `id` and `options` props defined then `value`, `defaultValue`, and `id` props of `Input` are automatically set. @@ -42,15 +42,15 @@ The rest of the props of Input are exactly the same as the original [input](http | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | +| allowClear | If allow to remove input content with clear icon | boolean | false | | | autoSize | Height autosize feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | boolean \| object | false | | +| bordered | Whether has border style | boolean | true | 4.5.0 | | defaultValue | The initial input content | string | - | | +| maxLength | The max length | number | - | 4.7.0 | +| showCount | Whether show text count | boolean | false | 4.7.0 | | value | The input content value | string | - | | | onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | | -| allowClear | If allow to remove input content with clear icon | boolean | false | | | onResize | The callback function that is triggered when resize | function({ width, height }) | - | | -| bordered | Whether has border style | boolean | true | 4.5.0 | -| showCount | Whether show text count | boolean | false | 4.7.0 | -| maxLength | The max length | number | - | 4.7.0 | The rest of the props of `Input.TextArea` are the same as the original [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea). @@ -59,8 +59,8 @@ The rest of the props of `Input.TextArea` are the same as the original [textarea | Property | Description | Type | Default | | --- | --- | --- | --- | | enterButton | Whether to show an enter button after input. This property conflicts with the `addonAfter` property | boolean \| ReactNode | false | -| onSearch | The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key | function(value, event) | - | | loading | Search box with loading | boolean | false | +| onSearch | The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key | function(value, event) | - | Supports all props of `Input`. @@ -82,8 +82,8 @@ Supports all props of `Input`. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| visibilityToggle | Whether show toggle button | boolean | true | | | iconRender | Custom toggle button | (visible) => ReactNode | (visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />) | 4.3.0 | +| visibilityToggle | Whether show toggle button | boolean | true | | ## FAQ diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md index 67d9903227..9cb0d04465 100644 --- a/components/input/index.zh-CN.md +++ b/components/input/index.zh-CN.md @@ -21,6 +21,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg | --- | --- | --- | --- | --- | | addonAfter | 带标签的 input，设置后置标签 | ReactNode | - | | | addonBefore | 带标签的 input，设置前置标签 | ReactNode | - | | +| allowClear | 可以点击清除图标删除内容 | boolean | - | | +| bordered | 是否有边框 | boolean | true | 4.5.0 | | defaultValue | 输入框默认内容 | string | - | | | disabled | 是否禁用状态，默认为 false | boolean | false | | | id | 输入框的 id | string | - | | @@ -32,8 +34,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg | value | 输入框内容 | string | - | | | onChange | 输入框内容变化时的回调 | function(e) | - | | | onPressEnter | 按下回车的回调 | function(e) | - | | -| allowClear | 可以点击清除图标删除内容 | boolean | - | | -| bordered | 是否有边框 | boolean | true | 4.5.0 | > 如果 `Input` 在 `Form.Item` 内，并且 `Form.Item` 设置了 `id` 和 `options` 属性，则 `value` `defaultValue` 和 `id` 属性会被自动设置。 @@ -43,15 +43,15 @@ Input 的其他属性和 React 自带的 [input](https://facebook.github.io/reac | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | +| allowClear | 可以点击清除图标删除内容 | boolean | false | | | autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false | | +| bordered | 是否有边框 | boolean | true | 4.5.0 | | defaultValue | 输入框默认内容 | string | - | | +| maxLength | 内容最大长度 | number | - | 4.7.0 | +| showCount | 是否展示字数 | boolean | false | 4.7.0 | | value | 输入框内容 | string | - | | | onPressEnter | 按下回车的回调 | function(e) | - | | -| allowClear | 可以点击清除图标删除内容 | boolean | false | | | onResize | resize 回调 | function({ width, height }) | - | | -| bordered | 是否有边框 | boolean | true | 4.5.0 | -| showCount | 是否展示字数 | boolean | false | 4.7.0 | -| maxLength | 内容最大长度 | number | - | 4.7.0 | `Input.TextArea` 的其他属性和浏览器自带的 [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) 一致。 @@ -60,8 +60,8 @@ Input 的其他属性和 React 自带的 [input](https://facebook.github.io/reac | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | enterButton | 是否有确认按钮，可设为按钮文字。该属性会与 `addonAfter` 冲突。 | boolean \| ReactNode | false | -| onSearch | 点击搜索图标、清除图标，或按下回车键时的回调 | function(value, event) | - | | loading | 搜索 loading | boolean | false | +| onSearch | 点击搜索图标、清除图标，或按下回车键时的回调 | function(value, event) | - | 其余属性和 Input 一致。 @@ -83,8 +83,8 @@ Input 的其他属性和 React 自带的 [input](https://facebook.github.io/reac | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| visibilityToggle | 是否显示切换按钮 | boolean | true | | | iconRender | 自定义切换按钮 | (visible) => ReactNode | (visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />) | 4.3.0 | +| visibilityToggle | 是否显示切换按钮 | boolean | true | | ## FAQ diff --git a/components/layout/index.en-US.md b/components/layout/index.en-US.md index 990a2bb788..e372075de5 100644 --- a/components/layout/index.en-US.md +++ b/components/layout/index.en-US.md @@ -94,14 +94,14 @@ The sidebar. | collapsedWidth | Width of the collapsed sidebar, by setting to 0 a special trigger will appear | number | 80 | | collapsible | Whether can be collapsed | boolean | false | | defaultCollapsed | To set the initial status | boolean | false | -| onBreakpoint | The callback function, executed when [breakpoints](/components/grid/#API) changed | (broken) => {} | - | -| onCollapse | The callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - | | reverseArrow | Reverse direction of arrow, for a sider that expands from the right | boolean | false | | style | To customize the styles | CSSProperties | - | | theme | Color theme of the sidebar | `light` \| `dark` | `dark` | | trigger | Specify the customized trigger, set to null to hide the trigger | ReactNode | - | | width | Width of the sidebar | number \| string | 200 | | zeroWidthTriggerStyle | To customize the styles of the special trigger that appears when `collapsedWidth` is 0 | object | - | +| onBreakpoint | The callback function, executed when [breakpoints](/components/grid/#API) changed | (broken) => {} | - | +| onCollapse | The callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - | #### breakpoint width diff --git a/components/layout/index.zh-CN.md b/components/layout/index.zh-CN.md index d033099c13..54d10cfcf3 100644 --- a/components/layout/index.zh-CN.md +++ b/components/layout/index.zh-CN.md @@ -95,14 +95,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/hzEndUVEx/Layout.svg | collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 80 | | collapsible | 是否可收起 | boolean | false | | defaultCollapsed | 是否默认收起 | boolean | false | -| onBreakpoint | 触发响应式布局[断点](/components/grid/#API)时的回调 | (broken) => {} | - | -| onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - | | reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false | | style | 指定样式 | CSSProperties | - | | theme | 主题颜色 | `light` \| `dark` | `dark` | | trigger | 自定义 trigger，设置为 null 时隐藏 trigger | ReactNode | - | | width | 宽度 | number \| string | 200 | | zeroWidthTriggerStyle | 指定当 `collapsedWidth` 为 0 时出现的特殊 trigger 的样式 | object | - | +| onBreakpoint | 触发响应式布局[断点](/components/grid/#API)时的回调 | (broken) => {} | - | +| onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - | #### breakpoint width diff --git a/components/list/index.en-US.md b/components/list/index.en-US.md index d8e872b700..d594253f8b 100644 --- a/components/list/index.en-US.md +++ b/components/list/index.en-US.md @@ -19,42 +19,42 @@ A list can be used to display content related to a single subject. The content c | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | bordered | Toggles rendering of the border around the list | boolean | false | | +| dataSource | DataSource array for list | any\[] | - | | | footer | List footer renderer | ReactNode | - | | | grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | [object](#List-grid-props) | - | | | header | List header renderer | ReactNode | - | | | itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - | | -| rowKey | Item's unique key, could be a string or function that returns a string | string \| Function(record): string | `key` | | | loading | Shows a loading indicator while the contents of the list are being fetched | boolean \| [SpinProps](/components/spin/#API) ([more](https://github.com/ant-design/ant-design/issues/8659)) | false | | | loadMore | Shows a load more content | ReactNode | - | | | locale | The i18n text including empty text | object | {emptyText: `No Data`} | | | pagination | Pagination [config](/components/pagination/), hide it by setting it to false | boolean \| object | false | | +| renderItem | Customize list item when using `dataSource` | (item) => ReactNode | - | | +| rowKey | Item's unique key, could be a string or function that returns a string | string \| Function(record): string | `key` | | | size | Size of list | `default` \| `large` \| `small` | `default` | | | split | Toggles rendering of the split under the list item | boolean | true | | -| dataSource | DataSource array for list | any[] | - | | -| renderItem | Customize list item when using `dataSource` | (item) => ReactNode | - | | ### pagination Properties for pagination. -| Property | Description | Type | Default | -| -------- | ---------------------------------------- | --------------------------- | -------- | +| Property | Description | Type | Default | +| --- | --- | --- | --- | | position | The specify the position of `Pagination` | `top` \| `bottom` \| `both` | `bottom` | More about pagination, please check [`Pagination`](/components/pagination/). ### List grid props -| Property | Description | Type | Default | Version | -| -------- | ------------------------ | ------ | ------- | ------- | -| column | The column of grid | number | - | | -| gutter | The spacing between grid | number | 0 | | -| xs | `<576px` column of grid | number | - | | -| sm | `≥576px` column of grid | number | - | | -| md | `≥768px` column of grid | number | - | | -| lg | `≥992px` column of grid | number | - | | -| xl | `≥1200px` column of grid | number | - | | -| xxl | `≥1600px` column of grid | number | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| column | The column of grid | number | - | | +| gutter | The spacing between grid | number | 0 | | +| xs | `<576px` column of grid | number | - | | +| sm | `≥576px` column of grid | number | - | | +| md | `≥768px` column of grid | number | - | | +| lg | `≥992px` column of grid | number | - | | +| xl | `≥1200px` column of grid | number | - | | +| xxl | `≥1600px` column of grid | number | - | | ### List.Item @@ -65,8 +65,8 @@ More about pagination, please check [`Pagination`](/components/pagination/). ### List.Item.Meta -| Property | Description | Type | Default | Version | -| ----------- | ---------------------------- | --------- | ------- | ------- | -| avatar | The avatar of list item | ReactNode | - | | -| description | The description of list item | ReactNode | - | | -| title | The title of list item | ReactNode | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| avatar | The avatar of list item | ReactNode | - | | +| description | The description of list item | ReactNode | - | | +| title | The title of list item | ReactNode | - | | diff --git a/components/list/index.zh-CN.md b/components/list/index.zh-CN.md index ce68ff35e3..05508ada30 100644 --- a/components/list/index.zh-CN.md +++ b/components/list/index.zh-CN.md @@ -22,6 +22,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | bordered | 是否展示边框 | boolean | false | | +| dataSource | 列表数据源 | any\[] | - | | | footer | 列表底部 | ReactNode | - | | | grid | 列表栅格配置 | [object](#List-grid-props) | - | | | header | 列表头部 | ReactNode | - | | @@ -30,33 +31,32 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg | loadMore | 加载更多 | ReactNode | - | | | locale | 默认文案设置，目前包括空数据文案 | object | {emptyText: `暂无数据`} | | | pagination | 对应的 `pagination` 配置, 设置 false 不显示 | boolean \| object | false | | +| renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项 | (item) => ReactNode | - | | | size | list 的尺寸 | `default` \| `large` \| `small` | `default` | | | split | 是否展示分割线 | boolean | true | | -| dataSource | 列表数据源 | any[] | - | | -| renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项 | (item) => ReactNode | - | | ### pagination 分页的配置项。 -| 参数 | 说明 | 类型 | 默认值 | -| -------- | ------------------ | --------------------------- | -------- | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | | position | 指定分页显示的位置 | `top` \| `bottom` \| `both` | `bottom` | 更多配置项，请查看 [`Pagination`](/components/pagination/)。 ### List grid props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ------ | -------------------- | ------ | ------ | ---- | -| column | 列数 | number | - | | -| gutter | 栅格间隔 | number | 0 | | -| xs | `<576px` 展示的列数 | number | - | | -| sm | `≥576px` 展示的列数 | number | - | | -| md | `≥768px` 展示的列数 | number | - | | -| lg | `≥992px` 展示的列数 | number | - | | -| xl | `≥1200px` 展示的列数 | number | - | | -| xxl | `≥1600px` 展示的列数 | number | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| column | 列数 | number | - | | +| gutter | 栅格间隔 | number | 0 | | +| xs | `<576px` 展示的列数 | number | - | | +| sm | `≥576px` 展示的列数 | number | - | | +| md | `≥768px` 展示的列数 | number | - | | +| lg | `≥992px` 展示的列数 | number | - | | +| xl | `≥1200px` 展示的列数 | number | - | | +| xxl | `≥1600px` 展示的列数 | number | - | | ### List.Item @@ -67,8 +67,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg ### List.Item.Meta -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ----------- | ------------------ | --------- | ------ | ---- | -| avatar | 列表元素的图标 | ReactNode | - | | -| description | 列表元素的描述内容 | ReactNode | - | | -| title | 列表元素的标题 | ReactNode | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| avatar | 列表元素的图标 | ReactNode | - | | +| description | 列表元素的描述内容 | ReactNode | - | | +| title | 列表元素的标题 | ReactNode | - | | diff --git a/components/mentions/index.en-US.md b/components/mentions/index.en-US.md index d9fdf77880..e413737749 100644 --- a/components/mentions/index.en-US.md +++ b/components/mentions/index.en-US.md @@ -24,29 +24,29 @@ When need to mention someone or something. | Property | Description | Type | Default | | --- | --- | --- | --- | | autoFocus | Auto get focus when component mounted | boolean | false | +| autoSize | Textarea height autosize feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | boolean \| object | false | | defaultValue | Default value | string | - | | filterOption | Customize filter option logic | false \| (input: string, option: OptionProps) => boolean | - | +| getPopupContainer | Set the mount HTML node for suggestions | () => HTMLElement | - | | notFoundContent | Set mentions content when not match | ReactNode | `Not Found` | | placement | Set popup placement | `top` \| `bottom` | `bottom` | -| prefix | Set trigger prefix keyword | string \| string[] | `@` | -| split | Set split string before and after selected mention | string | `` | +| prefix | Set trigger prefix keyword | string \| string\[] | `@` | +| split | Set split string before and after selected mention | string | ` ` | | validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - | | value | Set value of mentions | string | - | -| onChange | Trigger when value changed | (text: string) => void | - | -| onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - | -| onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - | -| onFocus | Trigger when mentions get focus | () => void | - | | onBlur | Trigger when mentions lose focus | () => void | - | -| getPopupContainer | Set the mount HTML node for suggestions | () => HTMLElement | - | -| autoSize | Textarea height autosize feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | boolean \| object | false | +| onChange | Trigger when value changed | (text: string) => void | - | +| onFocus | Trigger when mentions get focus | () => void | - | | onResize | The callback function that is triggered when textarea resize | function({ width, height }) | - | +| onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - | +| onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - | ### Mention methods -| Name | Description | -| ------- | ------------ | -| blur() | Remove focus | -| focus() | Get focus | +| Name | Description | +| --- | --- | +| blur() | Remove focus | +| focus() | Get focus | ### Option diff --git a/components/mentions/index.zh-CN.md b/components/mentions/index.zh-CN.md index 0fdff80861..7876603712 100644 --- a/components/mentions/index.zh-CN.md +++ b/components/mentions/index.zh-CN.md @@ -25,33 +25,33 @@ cover: https://gw.alipayobjects.com/zos/alicdn/jPE-itMFM/Mentions.svg | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | autoFocus | 自动获得焦点 | boolean | false | +| autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false | | defaultValue | 默认值 | string | - | | filterOption | 自定义过滤逻辑 | false \| (input: string, option: OptionProps) => boolean | - | +| getPopupContainer | 指定建议框挂载的 HTML 节点 | () => HTMLElement | - | | notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | `Not Found` | | placement | 弹出层展示位置 | `top` \| `bottom` | `bottom` | -| prefix | 设置触发关键字 | string \| string[] | `@` | -| split | 设置选中项前后分隔符 | string | `` | +| prefix | 设置触发关键字 | string \| string\[] | `@` | +| split | 设置选中项前后分隔符 | string | ` ` | | validateSearch | 自定义触发验证逻辑 | (text: string, props: MentionsProps) => void | - | | value | 设置值 | string | - | -| onChange | 值改变时触发 | (text: string) => void | - | -| onSelect | 选择选项时触发 | (option: OptionProps, prefix: string) => void | - | -| onSearch | 搜索时触发 | (text: string, prefix: string) => void | - | -| onFocus | 获得焦点时触发 | () => void | - | | onBlur | 失去焦点时触发 | () => void | - | -| getPopupContainer | 指定建议框挂载的 HTML 节点 | () => HTMLElement | - | -| autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false | +| onChange | 值改变时触发 | (text: string) => void | - | +| onFocus | 获得焦点时触发 | () => void | - | | onResize | resize 回调 | function({ width, height }) | - | +| onSearch | 搜索时触发 | (text: string, prefix: string) => void | - | +| onSelect | 选择选项时触发 | (option: OptionProps, prefix: string) => void | - | ### Mentions 方法 -| 名称 | 描述 | -| ------- | -------- | -| blur() | 移除焦点 | +| 名称 | 描述 | +| --- | --- | +| blur() | 移除焦点 | | focus() | 获取焦点 | ### Option -| 参数 | 说明 | 类型 | 默认值 | -| -------- | -------------- | --------- | ------ | -| children | 选项内容 | ReactNode | - | -| value | 选择时填充的值 | string | - | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| children | 选项内容 | ReactNode | - | +| value | 选择时填充的值 | string | - | diff --git a/components/menu/index.en-US.md b/components/menu/index.en-US.md index bc53fc19e4..38fd8af004 100644 --- a/components/menu/index.en-US.md +++ b/components/menu/index.en-US.md @@ -36,10 +36,6 @@ More layouts with navigation: [Layout](/components/layout). | inlineIndent | Indent (in pixels) of inline menu items on each level | number | 24 | | | mode | Type of menu | `vertical` \| `horizontal` \| `inline` | `vertical` | | | multiple | Allows selection of multiple items | boolean | false | | -| onClick | Called when a menu item is clicked | function({ item, key, keyPath, domEvent }) | - | | -| onDeselect | Called when a menu item is deselected (multiple mode only) | function({ item, key, keyPath, selectedKeys, domEvent }) | - | | -| onOpenChange | Called when sub-menus are opened or closed | function(openKeys: string\[]) | - | | -| onSelect | Called when a menu item is selected | function({ item, key, keyPath, selectedKeys, domEvent }) | - | | | openKeys | Array with the keys of currently opened sub-menus | string\[] | - | | | overflowedIndicator | Customized icon when menu is collapsed | ReactNode | - | | | selectable | Allows selecting menu items | boolean | true | | @@ -49,18 +45,22 @@ More layouts with navigation: [Layout](/components/layout). | subMenuOpenDelay | Delay time to show submenu when mouse enters, (in seconds) | number | 0 | | | theme | Color theme of the menu | `light` \| `dark` | `light` | | | triggerSubMenuAction | Which action can trigger submenu open/close | `hover` \| `click` | `hover` | | +| onClick | Called when a menu item is clicked | function({ item, key, keyPath, domEvent }) | - | | +| onDeselect | Called when a menu item is deselected (multiple mode only) | function({ item, key, keyPath, selectedKeys, domEvent }) | - | | +| onOpenChange | Called when sub-menus are opened or closed | function(openKeys: string\[]) | - | | +| onSelect | Called when a menu item is selected | function({ item, key, keyPath, selectedKeys, domEvent }) | - | | > More options in [rc-menu](https://github.com/react-component/menu#api) ### Menu.Item -| Param | Description | Type | Default value | Version | -| -------- | ------------------------------------ | --------- | ------------- | ------- | -| danger | Display the danger style | boolean | false | 4.3.0 | -| disabled | Whether menu item is disabled | boolean | false | | -| icon | The icon of the menu item | ReactNode | - | 4.2.0 | -| key | Unique ID of the menu item | string | - | | -| title | Set display title for collapsed item | string | - | | +| Param | Description | Type | Default value | Version | +| --- | --- | --- | --- | --- | +| danger | Display the danger style | boolean | false | 4.3.0 | +| disabled | Whether menu item is disabled | boolean | false | | +| icon | The icon of the menu item | ReactNode | - | 4.2.0 | +| key | Unique ID of the menu item | string | - | | +| title | Set display title for collapsed item | string | - | | > Note: `icon` is a newly added prop in`4.2.0`. For previous versions, please use the following method to define the icon. > @@ -89,17 +89,17 @@ More layouts with navigation: [Layout](/components/layout). | disabled | Whether sub-menu is disabled | boolean | false | | | icon | Icon of sub menu | ReactNode | - | 4.2.0 | | key | Unique ID of the sub-menu | string | - | | -| onTitleClick | Callback executed when the sub-menu title is clicked | function({ key, domEvent }) | - | | | popupClassName | Sub-menu class name | string | - | | | popupOffset | Sub-menu offset | \[number, number] | - | | | title | Title of sub menu | ReactNode | - | | +| onTitleClick | Callback executed when the sub-menu title is clicked | function({ key, domEvent }) | - | | ### Menu.ItemGroup -| Param | Description | Type | Default value | Version | -| -------- | ---------------------- | ----------- | ------------- | ------- | -| children | Sub-menu items | MenuItem\[] | - | | -| title | The title of the group | ReactNode | - | | +| Param | Description | Type | Default value | Version | +| --- | --- | --- | --- | --- | +| children | Sub-menu items | MenuItem\[] | - | | +| title | The title of the group | ReactNode | - | | ### Menu.Divider diff --git a/components/menu/index.zh-CN.md b/components/menu/index.zh-CN.md index ed048c4274..91df958d4c 100644 --- a/components/menu/index.zh-CN.md +++ b/components/menu/index.zh-CN.md @@ -37,10 +37,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg | inlineIndent | inline 模式的菜单缩进宽度 | number | 24 | | | mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | `vertical` \| `horizontal` \| `inline` | `vertical` | | | multiple | 是否允许多选 | boolean | false | | -| onClick | 点击 MenuItem 调用此函数 | function({ item, key, keyPath, domEvent }) | - | | -| onDeselect | 取消选中时调用，仅在 multiple 生效 | function({ item, key, keyPath, selectedKeys, domEvent }) | - | | -| onOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string\[]) | - | | -| onSelect | 被选中时调用 | function({ item, key, keyPath, selectedKeys, domEvent }) | -   | | | openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string\[] | - | | | overflowedIndicator | 自定义 Menu 折叠时的图标 | ReactNode | - | | | selectable | 是否允许选中 | boolean | true | | @@ -50,18 +46,22 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg | subMenuOpenDelay | 用户鼠标进入子菜单后开启延时，单位：秒 | number | 0 | | | theme | 主题颜色 | `light` \| `dark` | `light` | | | triggerSubMenuAction | SubMenu 展开/关闭的触发行为 | `hover` \| `click` | `hover` | | +| onClick | 点击 MenuItem 调用此函数 | function({ item, key, keyPath, domEvent }) | - | | +| onDeselect | 取消选中时调用，仅在 multiple 生效 | function({ item, key, keyPath, selectedKeys, domEvent }) | - | | +| onOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string\[]) | - | | +| onSelect | 被选中时调用 | function({ item, key, keyPath, selectedKeys, domEvent }) | -   | | > 更多属性查看 [rc-menu](https://github.com/react-component/menu#api) ### Menu.Item -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| -------- | ------------------------ | --------- | ------ | ----- | -| danger | 展示错误状态样式 | boolean | false | 4.3.0 | -| disabled | 是否禁用 | boolean | false | | -| icon | 菜单图标 | ReactNode | - | 4.2.0 | -| key | item 的唯一标志 | string | - | | -| title | 设置收缩时展示的悬浮标题 | string | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| danger | 展示错误状态样式 | boolean | false | 4.3.0 | +| disabled | 是否禁用 | boolean | false | | +| icon | 菜单图标 | ReactNode | - | 4.2.0 | +| key | item 的唯一标志 | string | - | | +| title | 设置收缩时展示的悬浮标题 | string | - | | > 注意：`icon` 是 `4.2.0` 新增的属性，之前的版本请使用下面的方式定义图标。 > @@ -84,23 +84,23 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg ### Menu.SubMenu -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| -------------- | -------------- | ----------------------------- | ------ | ----- | -| children | 子菜单的菜单项 | Array<MenuItem \| SubMenu> | - | | -| disabled | 是否禁用 | boolean | false | | -| icon | 菜单图标 | ReactNode | - | 4.2.0 | -| key | 唯一标志 | string | - | | -| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | - | | -| popupClassName | 子菜单样式 | string | - | | -| popupOffset | 子菜单偏移量 | \[number, number] | - | | -| title | 子菜单项值 | ReactNode | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| children | 子菜单的菜单项 | Array<MenuItem \| SubMenu> | - | | +| disabled | 是否禁用 | boolean | false | | +| icon | 菜单图标 | ReactNode | - | 4.2.0 | +| key | 唯一标志 | string | - | | +| popupClassName | 子菜单样式 | string | - | | +| popupOffset | 子菜单偏移量 | \[number, number] | - | | +| title | 子菜单项值 | ReactNode | - | | +| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | - | | ### Menu.ItemGroup -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| -------- | ------------ | ----------- | ------ | ---- | -| children | 分组的菜单项 | MenuItem\[] | - | | -| title | 分组标题 | ReactNode | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| children | 分组的菜单项 | MenuItem\[] | - | | +| title | 分组标题 | ReactNode | - | | ### Menu.Divider diff --git a/components/message/index.en-US.md b/components/message/index.en-US.md index 83e8e3169d..e9a7beae7c 100644 --- a/components/message/index.en-US.md +++ b/components/message/index.en-US.md @@ -51,13 +51,13 @@ The properties of config are as follows: | Property | Description | Type | Default | | --- | --- | --- | --- | +| className | Customized CSS class | string | - | | content | The content of the message | ReactNode | - | | duration | Time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 3 | -| onClose | Specify a function that will be called when the message is closed | function | - | | icon | Customized Icon | ReactNode | - | | key | The unique identifier of the Message | string \| number | - | -| className | Customized CSS class | string | - | | style | Customized inline style | [CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - | +| onClose | Specify a function that will be called when the message is closed | function | - | ### Global static methods @@ -89,9 +89,9 @@ message.config({ | duration | Time before auto-dismiss, in seconds | number | 1.5 | | | getContainer | Return the mount node for Message | () => HTMLElement | () => document.body | | | maxCount | Max message show, drop oldest if exceed limit | number | - | | -| top | Distance from top | number | 24 | | -| rtl | Whether to enable RTL mode | boolean | false | | | prefixCls | The prefix className of message node | string | `ant-message` | 4.5.0 | +| rtl | Whether to enable RTL mode | boolean | false | | +| top | Distance from top | number | 24 | | ## FAQ diff --git a/components/message/index.zh-CN.md b/components/message/index.zh-CN.md index a27b5ed8bb..b1ffe1cf45 100644 --- a/components/message/index.zh-CN.md +++ b/components/message/index.zh-CN.md @@ -25,11 +25,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/hAkKTIW0K/Message.svg - `message.warn(content, [duration], onClose)` // alias of warning - `message.loading(content, [duration], onClose)` -| 参数 | 说明 | 类型 | 默认值 | -| -------- | ------------------------------------------- | ------------------- | ------ | -| content | 提示内容 | ReactNode \| config | - | -| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number | 3 | -| onClose | 关闭时触发的回调函数 | function | - | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| content | 提示内容 | ReactNode \| config | - | +| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number | 3 | +| onClose | 关闭时触发的回调函数 | function | - | 组件同时提供 promise 接口。 @@ -52,13 +52,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/hAkKTIW0K/Message.svg | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | +| className | 自定义 CSS class | string | - | | content | 提示内容 | ReactNode | - | | duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number | 3 | -| onClose | 关闭时触发的回调函数 | function | - | | icon | 自定义图标 | ReactNode | - | | key | 当前提示的唯一标志 | string \| number | - | -| className | 自定义 CSS class | string | - | | style | 自定义内联样式 | [CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - | +| onClose | 关闭时触发的回调函数 | function | - | ### 全局方法 @@ -90,9 +90,9 @@ message.config({ | duration | 默认自动关闭延时，单位秒 | number | 3 | | | getContainer | 配置渲染节点的输出位置 | () => HTMLElement | () => document.body | | | maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - | | -| top | 消息距离顶部的位置 | number | 24 | | -| rtl | 是否开启 RTL 模式 | boolean | false | | | prefixCls | 消息节点的 className 前缀 | string | `ant-message` | 4.5.0 | +| rtl | 是否开启 RTL 模式 | boolean | false | | +| top | 消息距离顶部的位置 | number | 24 | | ## FAQ diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md index 3f8e71f1f9..d6b7493150 100644 --- a/components/modal/index.en-US.md +++ b/components/modal/index.en-US.md @@ -17,8 +17,8 @@ When requiring users to interact with the application, but without jumping to a | --- | --- | --- | --- | --- | | afterClose | Specify a function that will be called when modal is closed completely | function | - | | | bodyStyle | Body style for modal body element. Such as height, padding etc | CSSProperties | {} | | -| cancelText | Text of the Cancel button | ReactNode | `Cancel` | | | cancelButtonProps | The cancel button props | [ButtonProps](/components/button/#API) | - | | +| cancelText | Text of the Cancel button | ReactNode | `Cancel` | | | centered | Centered Modal | boolean | false | | | closable | Whether a close (x) button is visible on top right of the modal dialog or not | boolean | true | | | closeIcon | Custom close icon | ReactNode | <CloseOutlined /> | | @@ -35,14 +35,14 @@ When requiring users to interact with the application, but without jumping to a | okButtonProps | The ok button props | [ButtonProps](/components/button/#API) | - | | | okText | Text of the OK button | ReactNode | `OK` | | | okType | Button `type` of the OK button | string | `primary` | | -| 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) | - | | | style | Style of floating layer, typically used at least for adjusting the position | CSSProperties | - | | | title | The modal dialog's title | ReactNode | - | | | visible | Whether the modal dialog is visible or not | boolean | false | | | width | Width of the modal dialog | string \| number | 520 | | | wrapClassName | The class name of the container of the modal dialog | string | - | | | zIndex | The `z-index` of the Modal | number | 1000 | | +| onCancel | Specify a function that will be called when a user clicks mask, close button on top right or Cancel button | function(e) | - | | +| onOk | Specify a function that will be called when a user clicks the OK button | function(e) | - | | #### Note @@ -79,12 +79,12 @@ The items listed above are all functions, expecting a settings object as paramet | okButtonProps | The ok button props | [ButtonProps](/components/button/#API) | - | | | okText | Text of the OK button | string | `OK` | | | okType | Button `type` of the OK button | string | `primary` | | -| 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(close) | - | | -| 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(close) | - | | | style | Style of floating layer, typically used at least for adjusting the position | CSSProperties | - | | | title | Title | ReactNode | - | | | width | Width of the modal dialog | string \| number | 416 | | | zIndex | The `z-index` of the Modal | number | 1000 | | +| onCancel | Specify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function(close) | - | | +| 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(close) | - | | All the `Modal.method`s will return a reference, and then we can update and close the modal dialog by the reference. @@ -114,7 +114,7 @@ browserHistory.listen(() => { ### Modal.useModal() -When you need using Context, you can use `contextHolder` which created by `Modal.useModal` to insert into children. Modal created by hooks will get all the context where `contextHolder` are. Created `modal` has the same creating function with `Modal.method`](<#Modal.method()>). +When you need using Context, you can use `contextHolder` which created by `Modal.useModal` to insert into children. Modal created by hooks will get all the context where `contextHolder` are. Created `modal` has the same creating function with `Modal.method`](<#Modal.method()>). ```jsx const [modal, contextHolder] = Modal.useModal(); diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md index 0c98ecfc67..45b5882805 100644 --- a/components/modal/index.zh-CN.md +++ b/components/modal/index.zh-CN.md @@ -38,14 +38,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg | okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - | | | okText | 确认按钮文字 | ReactNode | `确定` | | | okType | 确认按钮类型 | string | `primary` | | -| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | - | | -| onOk | 点击确定回调 | function(e) | - | | | style | 可用于设置浮层的样式，调整浮层位置等 | CSSProperties | - | | | title | 标题 | ReactNode | - | | | visible | 对话框是否可见 | boolean | - | | | width | 宽度 | string \| number | 520 | | | wrapClassName | 对话框外层容器的类名 | string | - | | | zIndex | 设置 Modal 的 `z-index` | number | 1000 | | +| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | - | | +| onOk | 点击确定回调 | function(e) | - | | #### 注意 @@ -82,12 +82,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg | okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - | | | okText | 确认按钮文字 | string | `确定` | | | okType | 确认按钮类型 | string | `primary` | | -| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function(close) | - | | -| onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function(close) | - | | | style | 可用于设置浮层的样式，调整浮层位置等 | CSSProperties | - | | | title | 标题 | ReactNode | - | | | width | 宽度 | string \| number | 416 | | | zIndex | 设置 Modal 的 `z-index` | number | 1000 | | +| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function(close) | - | | +| onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function(close) | - | | 以上函数调用后，会返回一个引用，可以通过该引用更新和关闭弹窗。 @@ -117,7 +117,7 @@ browserHistory.listen(() => { ### Modal.useModal() -当你需要使用 Context 时，可以通过 `Modal.useModal` 创建一个 `contextHolder` 插入子节点中。通过 hooks 创建的临时 Modal 将会得到 `contextHolder` 所在位置的所有上下文。创建的 `modal` 对象拥有与 [`Modal.method`](<#Modal.method()>) 相同的创建通知方法。 +当你需要使用 Context 时，可以通过 `Modal.useModal` 创建一个 `contextHolder` 插入子节点中。通过 hooks 创建的临时 Modal 将会得到 `contextHolder` 所在位置的所有上下文。创建的 `modal` 对象拥有与 [`Modal.method`](#Modal.method()) 相同的创建通知方法。 ```jsx const [modal, contextHolder] = Modal.useModal(); diff --git a/components/notification/index.en-US.md b/components/notification/index.en-US.md index d137cccb41..1bb945c747 100644 --- a/components/notification/index.en-US.md +++ b/components/notification/index.en-US.md @@ -34,18 +34,18 @@ The properties of config are as follows: | bottom | Distance from the bottom of the viewport, when `placement` is `bottomRight` or `bottomLeft` (unit: pixels) | number | 24 | | btn | Customized close button | ReactNode | - | | className | Customized CSS class | string | - | +| closeIcon | Custom close icon | ReactNode | - | | description | The content of notification box (required) | ReactNode | - | | duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 | | getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body | | icon | Customized icon | ReactNode | - | -| closeIcon | Custom close icon | ReactNode | - | | key | The unique identifier of the Notification | string | - | | message | The title of notification box (required) | ReactNode | - | -| onClose | Trigger when notification closed | function | - | -| onClick | Specify a function that will be called when the notification is clicked | function | - | | placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` | | style | Customized inline style | [CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - | | top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels) | number | 24 | +| onClick | Specify a function that will be called when the notification is clicked | function | - | +| onClose | Trigger when notification closed | 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. @@ -71,8 +71,8 @@ notification.config({ | duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 | | getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body | | placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` | -| top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels) | number | 24 | | rtl | Whether to enable RTL mode | boolean | false | +| top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels) | number | 24 | ## FAQ diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md index 6fab9482bc..31817a357c 100644 --- a/components/notification/index.zh-CN.md +++ b/components/notification/index.zh-CN.md @@ -32,8 +32,8 @@ config 参数如下： | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | -| btn | 自定义关闭按钮 | ReactNode | - | | bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 | +| btn | 自定义关闭按钮 | ReactNode | - | | className | 自定义 CSS class | string | - | | closeIcon | 自定义关闭图标 | ReactNode | - | | description | 通知提醒内容，必选 | ReactNode | - | @@ -42,11 +42,11 @@ config 参数如下： | icon | 自定义图标 | ReactNode | - | | key | 当前通知唯一标志 | string | - | | message | 通知提醒标题，必选 | ReactNode | - | -| onClose | 当通知关闭时触发 | function | - | -| onClick | 点击通知时触发的回调函数 | function | - | | placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` | | style | 自定义内联样式 | [CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - | | top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | +| onClick | 点击通知时触发的回调函数 | function | - | +| onClose | 当通知关闭时触发 | function | - | 还提供了一个全局配置方法，在调用前提前配置，全局一次生效。 @@ -72,8 +72,8 @@ notification.config({ | duration | 默认自动关闭延时，单位秒 | number | 4.5 | | getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body | | placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` | -| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | | rtl | 是否开启 RTL 模式 | boolean | false | +| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 | ## FAQ diff --git a/components/page-header/index.en-US.md b/components/page-header/index.en-US.md index 1b2f59b538..7cbbefbf19 100644 --- a/components/page-header/index.en-US.md +++ b/components/page-header/index.en-US.md @@ -17,15 +17,15 @@ PageHeader can be used to highlight the page topic, display important informatio | Param | Description | Type | Default value | Version | | --- | --- | --- | --- | --- | -| title | Custom title text | ReactNode | - | | -| subTitle | Custom subtitle text | ReactNode | - | | -| ghost | PageHeader type, will change background color | boolean | true | | | avatar | Avatar next to the title bar | [AvatarProps](/components/avatar/) | - | | | backIcon | Custom back icon, if false the back icon will not be displayed | ReactNode \| boolean | <ArrowLeft /> | | -| tags | Tag list next to title | [Tag](/components/tag/)[] \| [Tag](/components/tag/) | - | | -| extra | Operating area, at the end of the line of the title line | ReactNode | - | | | breadcrumb | Breadcrumb configuration | [Breadcrumb](/components/breadcrumb/) | - | | +| extra | Operating area, at the end of the line of the title line | ReactNode | - | | | footer | PageHeader's footer, generally used to render TabBar | ReactNode | - | | +| ghost | PageHeader type, will change background color | boolean | true | | +| subTitle | Custom subtitle text | ReactNode | - | | +| tags | Tag list next to title | [Tag](/components/tag/)\[] \| [Tag](/components/tag/) | - | | +| title | Custom title text | ReactNode | - | | | onBack | Back icon click event | () => void | - | |
number \| number\[]
LabeledValue \| LabeledValue[] | - | | +| defaultValue | Initial selected option | string \| string\[]
number \| number\[]
LabeledValue \| LabeledValue\[] | - | | | disabled | Whether disabled select | boolean | false | | | dropdownClassName | The className of dropdown menu | string | - | | | dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true | | @@ -48,6 +48,20 @@ Select component to select value from options. | menuItemSelectedIcon | The custom menuItemSelected icon with multiple options | ReactNode | - | | | mode | Set mode of Select | `multiple` \| `tags` | - | | | notFoundContent | Specify content to show when no result matches | ReactNode | `Not Found` | | +| open | Controlled open state of dropdown | boolean | - | | +| optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | `value` | | +| optionLabelProp | Which prop value of option will render as content of select. [Example](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `children` | | +| options | Select options. Will get better perf than jsx definition | { label, value }\[] | - | | +| placeholder | Placeholder of select | ReactNode | - | | +| removeIcon | The custom remove icon | ReactNode | - | | +| showArrow | Whether to show the drop-down arrow | boolean | true(for single select), false(for multiple select) | | +| showSearch | Whether show search input in single mode | boolean | false | | +| size | Size of Select input | `large` \| `middle` \| `small` | - | | +| suffixIcon | The custom suffix icon | ReactNode | - | | +| tagRender | Customize tag render | (props) => ReactNode | - | | +| tokenSeparators | Separator used to tokenize on `tag` and `multiple` mode | string\[] | - | | +| value | Current selected option | string \| string\[]
number \| number\[]
LabeledValue \| LabeledValue\[] | - | | +| virtual | Disable virtual scroll when set to false | boolean | true | 4.1.0 | | onBlur | Called when blur | function | - | | | onChange | Called when select an option or input value change | function(value, option:Option \| Array<Option>) | - | | | onClear | Called when clear | function | - | 4.6.0 | @@ -60,45 +74,31 @@ Select component to select value from options. | onPopupScroll | Called when dropdown scrolls | function | - | | | onSearch | Callback function that is fired when input changed | function(value: string) | - | | | onSelect | Called when a option is selected, the params are option's value (or key) and option instance | function(string \| number \| LabeledValue, option: Option) | - | | -| open | Controlled open state of dropdown | boolean | - | | -| options | Select options. Will get better perf than jsx definition | { label, value }[] | - | | -| optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | `value` | | -| optionLabelProp | Which prop value of option will render as content of select. [Example](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `children` | | -| placeholder | Placeholder of select | ReactNode | - | | -| removeIcon | The custom remove icon | ReactNode | - | | -| showArrow | Whether to show the drop-down arrow | boolean | true(for single select), false(for multiple select) | | -| showSearch | Whether show search input in single mode | boolean | false | | -| size | Size of Select input | `large` \| `middle` \| `small` | - | | -| suffixIcon | The custom suffix icon | ReactNode | - | | -| tagRender | Customize tag render | (props) => ReactNode | - | | -| tokenSeparators | Separator used to tokenize on `tag` and `multiple` mode | string\[] | - | | -| value | Current selected option | string \| string\[]
number \| number\[]
LabeledValue \| LabeledValue[] | - | | -| virtual | Disable virtual scroll when set to false | boolean | true | 4.1.0 | > Note, if you find that the drop-down menu scrolls with the page, or you need to trigger Select in other popup layers, please try to use `getPopupContainer={triggerNode => triggerNode.parentElement}` to fix the drop-down popup rendering node in the parent element of the trigger . ### Select Methods -| Name | Description | Version | -| ------- | ------------ | ------- | -| blur() | Remove focus | | -| focus() | Get focus | | +| Name | Description | Version | +| --- | --- | --- | +| blur() | Remove focus | | +| focus() | Get focus | | ### Option props -| Property | Description | Type | Default | Version | -| --------- | ------------------------------------------ | ---------------- | ------- | ------- | -| className | The additional class to option | string | - | | -| disabled | Disable this option | boolean | false | | -| title | `title` of Select after select this Option | string | - | | -| value | Default to filter with this property | string \| number | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| className | The additional class to option | string | - | | +| disabled | Disable this option | boolean | false | | +| title | `title` of Select after select this Option | string | - | | +| value | Default to filter with this property | string \| number | - | | ### OptGroup props -| Property | Description | Type | Default | Version | -| -------- | ----------- | ----------------------- | ------- | ------- | -| key | Group key | string | - | | -| label | Group label | string \| React.Element | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| key | Group key | string | - | | +| label | Group label | string \| React.Element | - | | ## FAQ diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md index 14750e5d98..13bc131f32 100644 --- a/components/select/index.zh-CN.md +++ b/components/select/index.zh-CN.md @@ -32,7 +32,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg | clearIcon | 自定义的多选框清空图标 | ReactNode | - | | | defaultActiveFirstOption | 是否默认高亮第一个选项 | boolean | true | | | defaultOpen | 是否默认展开下拉菜单 | boolean | - | | -| defaultValue | 指定默认选中的条目 | string \| string\[]
number \| number\[]
LabeledValue \| LabeledValue[] | - | | +| defaultValue | 指定默认选中的条目 | string \| string\[]
number \| number\[]
LabeledValue \| LabeledValue\[] | - | | | disabled | 是否禁用 | boolean | false | | | dropdownClassName | 下拉菜单的 className 属性 | string | - | | | dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true | | @@ -49,6 +49,20 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg | menuItemSelectedIcon | 自定义多选时当前选中的条目图标 | ReactNode | - | | | mode | 设置 Select 的模式为多选或标签 | `multiple` \| `tags` | - | | | notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | `Not Found` | | +| open | 是否展开下拉菜单 | boolean | - | | +| optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `value` | | +| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value` | string | `children` | | +| options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }\[] | - | | +| placeholder | 选择框默认文字 | string | - | | +| removeIcon | 自定义的多选框清除图标 | ReactNode | - | | +| showArrow | 是否显示下拉小箭头 | boolean | 单选为 true，多选为 false | | +| showSearch | 使单选模式可搜索 | boolean | false | | +| size | 选择框大小 | `large` \| `middle` \| `small` | - | | +| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | | +| tagRender | 自定义 tag 内容 render | (props) => ReactNode | - | | +| tokenSeparators | 在 `tags` 和 `multiple` 模式下自动分词的分隔符 | string\[] | - | | +| value | 指定当前选中的条目 | string \| string\[]
number \| number\[]
LabeledValue \| LabeledValue\[] | - | | +| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 | | onBlur | 失去焦点时回调 | function | - | | | onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value, option:Option \| Array<Option>) | - | | | onClear | 清除内容时回调 | function | - | 4.6.0 | @@ -61,45 +75,31 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg | onPopupScroll | 下拉列表滚动时的回调 | function | - | | | onSearch | 文本框值变化时回调 | function(value: string) | - | | | onSelect | 被选中时调用，参数为选中项的 value (或 key) 值 | function(string \| number \| LabeledValue, option: Option) | - | | -| open | 是否展开下拉菜单 | boolean | - | | -| options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }[] | - | | -| optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `value` | | -| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value` | string | `children` | | -| placeholder | 选择框默认文字 | string | - | | -| removeIcon | 自定义的多选框清除图标 | ReactNode | - | | -| showArrow | 是否显示下拉小箭头 | boolean | 单选为 true，多选为 false | | -| showSearch | 使单选模式可搜索 | boolean | false | | -| size | 选择框大小 | `large` \| `middle` \| `small` | - | | -| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | | -| tagRender | 自定义 tag 内容 render | (props) => ReactNode | - | | -| tokenSeparators | 在 `tags` 和 `multiple` 模式下自动分词的分隔符 | string\[] | - | | -| value | 指定当前选中的条目 | string \| string\[]
number \| number\[]
LabeledValue \| LabeledValue[] | - | | -| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 | > 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentElement}` 将下拉弹层渲染节点固定在触发器的父元素中。 ### Select Methods -| 名称 | 说明 | 版本 | -| ------- | -------- | ---- | -| blur() | 取消焦点 | | -| focus() | 获取焦点 | | +| 名称 | 说明 | 版本 | +| --- | --- | --- | +| blur() | 取消焦点 | | +| focus() | 获取焦点 | | ### Option props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --------- | --------------------------------- | ---------------- | ------ | ---- | -| className | Option 器类名 | string | - | | -| disabled | 是否禁用 | boolean | false | | -| title | 选中该 Option 后，Select 的 title | string | - | | -| value | 默认根据此属性值进行筛选 | string \| number | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| className | Option 器类名 | string | - | | +| disabled | 是否禁用 | boolean | false | | +| title | 选中该 Option 后，Select 的 title | string | - | | +| value | 默认根据此属性值进行筛选 | string \| number | - | | ### OptGroup props -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ----- | ---- | ----------------------- | ------ | ---- | -| key | Key | string | - | | -| label | 组名 | string \| React.Element | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| key | Key | string | - | | +| label | 组名 | string \| React.Element | - | | ## FAQ diff --git a/components/skeleton/index.en-US.md b/components/skeleton/index.en-US.md index 87f4963820..4507aa96fb 100644 --- a/components/skeleton/index.en-US.md +++ b/components/skeleton/index.en-US.md @@ -25,41 +25,41 @@ Provide a placeholder while you wait for content to load, or to visualise conten | avatar | Show avatar placeholder | boolean \| [SkeletonAvatarProps](#SkeletonAvatarProps) | false | | loading | Display the skeleton when true | boolean | - | | paragraph | Show paragraph placeholder | boolean \| [SkeletonParagraphProps](#SkeletonParagraphProps) | true | -| title | Show title placeholder | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true | | round | Show paragraph and title radius when true | boolean | false | +| title | Show title placeholder | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true | ### SkeletonAvatarProps | Property | Description | Type | Default | | --- | --- | --- | --- | | active | Show animation effect, only valid when used avatar independently | boolean | false | -| size | Set the size of avatar | number \| `large` \| `small` \| `default` | - | | shape | Set the shape of avatar | `circle` \| `square` | - | +| size | Set the size of avatar | number \| `large` \| `small` \| `default` | - | ### SkeletonTitleProps -| Property | Description | Type | Default | -| -------- | ---------------------- | ---------------- | ------- | -| width | Set the width of title | number \| string | - | +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| width | Set the width of title | number \| string | - | ### SkeletonParagraphProps | Property | Description | Type | Default | | --- | --- | --- | --- | | rows | Set the row count of paragraph | number | - | -| width | Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width | number \| string \| Array | - | +| width | Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width | number \| string \| Array<number \| string> | - | ### SkeletonButtonProps -| Property | Description | Type | Default | -| -------- | ----------------------- | -------------------------------- | ------- | -| active | Show animation effect | boolean | false | -| size | Set the size of button | `large` \| `small` \| `default` | - | -| shape | Set the shape of button | `circle` \| `round` \| `default` | - | +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| active | Show animation effect | boolean | false | +| shape | Set the shape of button | `circle` \| `round` \| `default` | - | +| size | Set the size of button | `large` \| `small` \| `default` | - | ### SkeletonInputProps -| Property | Description | Type | Default | -| -------- | --------------------- | ------------------------------- | ------- | -| active | Show animation effect | boolean | false | -| size | Set the size of input | `large` \| `small` \| `default` | - | +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| active | Show animation effect | boolean | false | +| size | Set the size of input | `large` \| `small` \| `default` | - | diff --git a/components/skeleton/index.zh-CN.md b/components/skeleton/index.zh-CN.md index 1971781985..1e580da146 100644 --- a/components/skeleton/index.zh-CN.md +++ b/components/skeleton/index.zh-CN.md @@ -26,41 +26,41 @@ cover: https://gw.alipayobjects.com/zos/alicdn/KpcciCJgv/Skeleton.svg | avatar | 是否显示头像占位图 | boolean \| [SkeletonAvatarProps](#SkeletonAvatarProps) | false | | loading | 为 true 时，显示占位图。反之则直接展示子组件 | boolean | - | | paragraph | 是否显示段落占位图 | boolean \| [SkeletonParagraphProps](#SkeletonParagraphProps) | true | -| title | 是否显示标题占位图 | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true | | round | 为 true 时，段落和标题显示圆角 | boolean | false | +| title | 是否显示标题占位图 | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true | ### SkeletonAvatarProps | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | active | 是否展示动画效果，仅在单独使用头像骨架时生效 | boolean | false | -| size | 设置头像占位图的大小 | number \| `large` \| `small` \| `default` | - | | shape | 指定头像的形状 | `circle` \| `square` | - | +| size | 设置头像占位图的大小 | number \| `large` \| `small` \| `default` | - | ### SkeletonTitleProps -| 属性 | 说明 | 类型 | 默认值 | -| ----- | -------------------- | ---------------- | ------ | -| width | 设置标题占位图的宽度 | number \| string | - | +| 属性 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| width | 设置标题占位图的宽度 | number \| string | - | ### SkeletonParagraphProps | 属性 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | | rows | 设置段落占位图的行数 | number | - | -| width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \| string \| Array | - | +| width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \| string \| Array<number \| string> | - | ### SkeletonButtonProps -| 属性 | 说明 | 类型 | 默认值 | -| ------ | ---------------- | -------------------------------- | ------ | -| active | 是否展示动画效果 | boolean | false | -| size | 设置按钮的大小 | `large` \| `small` \| `default` | - | -| shape | 指定按钮的形状 | `circle` \| `round` \| `default` | - | +| 属性 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| active | 是否展示动画效果 | boolean | false | +| shape | 指定按钮的形状 | `circle` \| `round` \| `default` | - | +| size | 设置按钮的大小 | `large` \| `small` \| `default` | - | ### SkeletonInputProps -| 属性 | 说明 | 类型 | 默认值 | -| ------ | ---------------- | ------------------------------- | ------ | -| active | 是否展示动画效果 | boolean | false | -| size | 设置输入框的大小 | `large` \| `small` \| `default` | - | +| 属性 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| active | 是否展示动画效果 | boolean | false | +| size | 设置输入框的大小 | `large` \| `small` \| `default` | - | diff --git a/components/slider/index.en-US.md b/components/slider/index.en-US.md index 5b131d03d1..8c3423ac26 100644 --- a/components/slider/index.en-US.md +++ b/components/slider/index.en-US.md @@ -19,6 +19,7 @@ To input a value in a range. | defaultValue | The default value of slider. When `range` is false, use number, otherwise, use \[number, number] | number \| \[number, number] | 0 \| \[0, 0] | | | disabled | If true, the slider will not be interactable | boolean | false | | | dots | Whether the thumb can drag over tick only | boolean | false | | +| getTooltipPopupContainer | The DOM container of the Tooltip, the default behavior is to create a div element in body | (triggerNode) => HTMLElement | () => document.body | | | included | Make effect when `marks` not null, true means containment and false means coordinative | boolean | true | | | marks | Tick mark of Slider, type of key must be `number`, and must in closed interval \[min, max], each mark can declare its own style | object | { number: ReactNode } \| { number: { style: object, label: ReactNode } } | | | max | The maximum value the slider can slide to | number | 100 | | @@ -27,17 +28,16 @@ To input a value in a range. | reverse | Reverse the component | boolean | false | | | step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be null | number \| null | 1 | | | tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null | value => ReactNode \| null | IDENTITY | | -| value | The value of slider. When `range` is false, use number, otherwise, use \[number, number] | number \| \[number, number] | - | +| tooltipPlacement | Set Tooltip display position. Ref [Tooltip](/components/tooltip/) | string | - | | +| tooltipVisible | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering | boolean | - | | +| value | The value of slider. When `range` is false, use number, otherwise, use \[number, number] | number \| \[number, number] | - | | | vertical | If true, the slider will be vertical | boolean | false | | | onAfterChange | Fire when onmouseup is fired | (value) => void | - | | | onChange | Callback function that is fired when the user changes the slider's value | (value) => void | - | | -| tooltipPlacement | Set Tooltip display position. Ref [Tooltip](/components/tooltip/) | string | - | | -| tooltipVisible | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering | boolean | - | | -| getTooltipPopupContainer | The DOM container of the Tooltip, the default behavior is to create a div element in body | (triggerNode) => HTMLElement | () => document.body | | ## Methods -| Name | Description | Version | -| ------- | ------------ | ------- | -| blur() | Remove focus | | -| focus() | Get focus | | +| Name | Description | Version | +| --- | --- | --- | +| blur() | Remove focus | | +| focus() | Get focus | | diff --git a/components/slider/index.zh-CN.md b/components/slider/index.zh-CN.md index 03827f1ce5..377396b7e1 100644 --- a/components/slider/index.zh-CN.md +++ b/components/slider/index.zh-CN.md @@ -20,6 +20,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg | defaultValue | 设置初始取值。当 `range` 为 false 时，使用 number，否则用 \[number, number] | number \| \[number, number] | 0 \| \[0, 0] | | | disabled | 值为 true 时，滑块为禁用状态 | boolean | false | | | dots | 是否只能拖拽到刻度上 | boolean | false | | +| getTooltipPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | | | included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | boolean | true | | | marks | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 \[min, max] 内，每个标签可以单独设置样式 | object | { number: ReactNode } or { number: { style: object, label: ReactNode } } | | | max | 最大值 | number | 100 | | @@ -28,17 +29,16 @@ cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg | reverse | 反向坐标轴 | boolean | false | | | step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 null，此时 Slider 的可选值仅有 marks 标出来的部分 | number \| null | 1 | | | tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip | value => ReactNode \| null | IDENTITY | | +| tooltipPlacement | 设置 Tooltip 展示位置。参考 [Tooltip](/components/tooltip/) | string | - | | +| tooltipVisible | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时 | boolean | - | | | value | 设置当前取值。当 `range` 为 false 时，使用 number，否则用 \[number, number] | number \| \[number, number] | - | | | vertical | 值为 true 时，Slider 为垂直方向 | boolean | false | | | onAfterChange | 与 `onmouseup` 触发时机一致，把当前值作为参数传入 | (value) => void | - | | | onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | (value) => void | - | | -| tooltipPlacement | 设置 Tooltip 展示位置。参考 [Tooltip](/components/tooltip/) | string | - | | -| tooltipVisible | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时 | boolean | - | | -| getTooltipPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | | ## 方法 -| 名称 | 描述 | 版本 | -| ------- | -------- | ---- | -| blur() | 移除焦点 | | -| focus() | 获取焦点 | | +| 名称 | 描述 | 版本 | +| --- | --- | --- | +| blur() | 移除焦点 | | +| focus() | 获取焦点 | | diff --git a/components/space/index.zh-CN.md b/components/space/index.zh-CN.md index fd6f888cff..b06fd7023f 100644 --- a/components/space/index.zh-CN.md +++ b/components/space/index.zh-CN.md @@ -18,9 +18,9 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/wc6%263gJ0Y8/Space.svg ## API -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --------- | -------- | ------------------------------------------ | ------------ | ----- | -| align | 对齐方式 | `start` \| `end` \|`center` \|`baseline` | - | 4.2.0 | -| direction | 间距方向 | `vertical` \| `horizontal` | `horizontal` | 4.1.0 | -| size | 间距大小 | `small` \| `middle` \| `large` \| `number` | `small` | 4.1.0 | -| split | 设置拆分 | ReactNode | - | 4.7.0 | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| align | 对齐方式 | `start` \| `end` \|`center` \|`baseline` | - | 4.2.0 | +| direction | 间距方向 | `vertical` \| `horizontal` | `horizontal` | 4.1.0 | +| size | 间距大小 | `small` \| `middle` \| `large` \| `number` | `small` | 4.1.0 | +| split | 设置拆分 | ReactNode | - | 4.7.0 | diff --git a/components/spin/index.zh-CN.md b/components/spin/index.zh-CN.md index 99b46c8536..eed77c70e3 100644 --- a/components/spin/index.zh-CN.md +++ b/components/spin/index.zh-CN.md @@ -14,14 +14,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/LBcJqCPRv/Spin.svg ## API -| 参数 | 说明 | 类型 | 默认值 | -| ---------------- | -------------------------------------------- | ------------- | --------- | -| delay | 延迟显示加载效果的时间（防止闪烁） | number (毫秒) | - | -| indicator | 加载指示符 | ReactNode | - | -| size | 组件大小，可选值为 `small` `default` `large` | string | `default` | -| spinning | 是否为加载中状态 | boolean | true | -| tip | 当作为包裹元素时，可以自定义描述文案 | string | - | -| wrapperClassName | 包装器的类属性 | string | - | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| delay | 延迟显示加载效果的时间（防止闪烁） | number (毫秒) | - | +| indicator | 加载指示符 | ReactNode | - | +| size | 组件大小，可选值为 `small` `default` `large` | string | `default` | +| spinning | 是否为加载中状态 | boolean | true | +| tip | 当作为包裹元素时，可以自定义描述文案 | string | - | +| wrapperClassName | 包装器的类属性 | string | - | ### 静态方法 diff --git a/components/statistic/index.en-US.md b/components/statistic/index.en-US.md index aed663198c..4377d8ec99 100644 --- a/components/statistic/index.en-US.md +++ b/components/statistic/index.en-US.md @@ -16,26 +16,26 @@ Display statistic number. #### Statistic -| Property | Description | Type | Default | Version | -| ---------------- | ----------------------------- | -------------------- | ------- | ------- | -| decimalSeparator | The decimal separator | string | `.` | | -| formatter | Customize value display logic | (value) => ReactNode | - | | -| groupSeparator | Group separator | string | `,` | | -| precision | The precision of input value | number | - | | -| prefix | The prefix node of value | ReactNode | - | | -| suffix | The suffix node of value | ReactNode | - | | -| title | Display title | ReactNode | - | | -| value | Display value | string \| number | - | | -| valueStyle | Set value css style | CSSProperties | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| decimalSeparator | The decimal separator | string | `.` | | +| formatter | Customize value display logic | (value) => ReactNode | - | | +| groupSeparator | Group separator | string | `,` | | +| precision | The precision of input value | number | - | | +| prefix | The prefix node of value | ReactNode | - | | +| suffix | The suffix node of value | ReactNode | - | | +| title | Display title | ReactNode | - | | +| value | Display value | string \| number | - | | +| valueStyle | Set value css style | CSSProperties | - | | #### Statistic.Countdown -| Property | Description | Type | Default | Version | -| ---------- | ---------------------------------------- | ---------------- | ---------- | ------- | -| format | Format as [moment](http://momentjs.com/) | string | `HH:mm:ss` | | -| onFinish | Trigger when time's up | () => void | - | | -| prefix | The prefix node of value | ReactNode | - | | -| suffix | The suffix node of value | ReactNode | - | | -| title | Display title | ReactNode | - | | -| value | Set target countdown time | number \| moment | - | | -| valueStyle | Set value css style | CSSProperties | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| format | Format as [moment](http://momentjs.com/) | string | `HH:mm:ss` | | +| prefix | The prefix node of value | ReactNode | - | | +| suffix | The suffix node of value | ReactNode | - | | +| title | Display title | ReactNode | - | | +| value | Set target countdown time | number \| moment | - | | +| valueStyle | Set value css style | CSSProperties | - | | +| onFinish | Trigger when time's up | () => void | - | | diff --git a/components/statistic/index.zh-CN.md b/components/statistic/index.zh-CN.md index d7ca5316c3..f93bc0a023 100644 --- a/components/statistic/index.zh-CN.md +++ b/components/statistic/index.zh-CN.md @@ -17,26 +17,26 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/rcBNhLBrKbE/Statistic.svg #### Statistic -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| ---------------- | ---------------- | -------------------- | ------ | ---- | -| decimalSeparator | 设置小数点 | string | `.` | | -| formatter | 自定义数值展示 | (value) => ReactNode | - | | -| groupSeparator | 设置千分位标识符 | string | `,` | | -| precision | 数值精度 | number | - | | -| prefix | 设置数值的前缀 | ReactNode | - | | -| suffix | 设置数值的后缀 | ReactNode | - | | -| title | 数值的标题 | ReactNode | - | | -| value | 数值内容 | string \| number | - | | -| valueStyle | 设置数值的样式 | CSSProperties | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| decimalSeparator | 设置小数点 | string | `.` | | +| formatter | 自定义数值展示 | (value) => ReactNode | - | | +| groupSeparator | 设置千分位标识符 | string | `,` | | +| precision | 数值精度 | number | - | | +| prefix | 设置数值的前缀 | ReactNode | - | | +| suffix | 设置数值的后缀 | ReactNode | - | | +| title | 数值的标题 | ReactNode | - | | +| value | 数值内容 | string \| number | - | | +| valueStyle | 设置数值的样式 | CSSProperties | - | | #### Statistic.Countdown | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | format | 格式化倒计时展示，参考 [moment](http://momentjs.com/) | string | `HH:mm:ss` | | -| onFinish | 倒计时完成时触发 | () => void | - | | | prefix | 设置数值的前缀 | ReactNode | - | | | suffix | 设置数值的后缀 | ReactNode | - | | | title | 数值的标题 | ReactNode | - | | | value | 数值内容 | number \| moment | - | | | valueStyle | 设置数值的样式 | CSSProperties | - | | +| onFinish | 倒计时完成时触发 | () => void | - | | diff --git a/components/steps/index.en-US.md b/components/steps/index.en-US.md index c1f76b5bd1..f96beeac5d 100644 --- a/components/steps/index.en-US.md +++ b/components/steps/index.en-US.md @@ -29,16 +29,16 @@ The whole of the step bar. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | className | Additional class to Steps | string | - | | -| type | Type of steps, can be set to one of the following values: `default`, `navigation` | string | `default` | | | current | To set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0 | | | direction | To specify the direction of the step bar, `horizontal` or `vertical` | string | `horizontal` | | +| initial | Set the initial step, counting from 0 | number | 0 | | | labelPlacement | Place title and description with `horizontal` or `vertical` direction | string | `horizontal` | | +| percent | Progress circle percentage of current step in `process` status (only works on basic Steps) | number | - | 4.5.0 | | progressDot | Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be `vertical` | boolean \| (iconDot, {index, status, title, description}) => ReactNode | false | | | size | To specify the size of the step bar, `default` and `small` are currently supported | string | `default` | | | status | To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` | | -| initial | Set the initial step, counting from 0 | number | 0 | | +| type | Type of steps, can be set to one of the following values: `default`, `navigation` | string | `default` | | | onChange | Trigger when Step is changed | (current) => void | - | | -| percent | Progress circle percentage of current step in `process` status (only works on basic Steps) | number | - | 4.5.0 | ### Steps.Step @@ -47,8 +47,8 @@ A single step in the step bar. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | description | Description of the step, optional property | ReactNode | - | | +| disabled | Disable click | boolean | false | | | icon | Icon of the step, optional property | ReactNode | - | | | status | To specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | string | `wait` | | -| title | Title of the step | ReactNode | - | | | subTitle | Subtitle of the step | ReactNode | - | | -| disabled | Disable click | boolean | false | | +| title | Title of the step | ReactNode | - | | diff --git a/components/steps/index.zh-CN.md b/components/steps/index.zh-CN.md index f49aaa1376..956d302530 100644 --- a/components/steps/index.zh-CN.md +++ b/components/steps/index.zh-CN.md @@ -30,16 +30,16 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | className | 步骤条类名 | string | - | | -| type | 步骤条类型，有 `default` 和 `navigation` 两种 | string | `default` | | | current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0 | | | direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | string | `horizontal` | | +| initial | 起始序号，从 0 开始记数 | number | 0 | | | labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选 `vertical` 放图标下方 | string | `horizontal` | | +| percent | 当前 `process` 步骤显示的进度条进度（只对基本类型的 Steps 生效） | number | - | 4.5.0 | | progressDot | 点状步骤条，可以设置为一个 function，labelPlacement 将强制为 `vertical` | boolean \| (iconDot, {index, status, title, description}) => ReactNode | false | | | size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | `default` | | | status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | `process` | | -| initial | 起始序号，从 0 开始记数 | number | 0 | | +| type | 步骤条类型，有 `default` 和 `navigation` 两种 | string | `default` | | | onChange | 点击切换步骤时触发 | (current) => void | - | | -| percent | 当前 `process` 步骤显示的进度条进度（只对基本类型的 Steps 生效） | number | - | 4.5.0 | ### Steps.Step @@ -48,8 +48,8 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | description | 步骤的详情描述，可选 | ReactNode | - | | +| disabled | 禁用点击 | boolean | false | | | icon | 步骤图标的类型，可选 | ReactNode | - | | | status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | `wait` | | -| title | 标题 | ReactNode | - | | | subTitle | 子标题 | ReactNode | - | | -| disabled | 禁用点击 | boolean | false | | +| title | 标题 | ReactNode | - | | diff --git a/components/switch/index.en-US.md b/components/switch/index.en-US.md index 08884739ab..1014eb7fb0 100644 --- a/components/switch/index.en-US.md +++ b/components/switch/index.en-US.md @@ -19,6 +19,7 @@ Switching Selector. | autoFocus | Whether get focus when component mounted | boolean | false | | checked | Determine whether the Switch is checked | boolean | false | | checkedChildren | The content to be shown when the state is checked | ReactNode | - | +| className | The additional class to Switch | string | - | | defaultChecked | Whether to set the initial state | boolean | false | | disabled | Disable switch | boolean | false | | loading | Loading state of switch | boolean | false | @@ -26,11 +27,10 @@ Switching Selector. | unCheckedChildren | The content to be shown when the state is unchecked | ReactNode | - | | onChange | Trigger when the checked state is changing | function(checked: boolean, event: Event) | - | | onClick | Trigger when clicked | function(checked: boolean, event: Event) | - | -| className | The additional class to Switch | string | - | ## Methods -| Name | Description | -| ------- | ------------ | -| blur() | Remove focus | -| focus() | Get focus | +| Name | Description | +| --- | --- | +| blur() | Remove focus | +| focus() | Get focus | diff --git a/components/switch/index.zh-CN.md b/components/switch/index.zh-CN.md index 219f692b61..9bc1971abd 100644 --- a/components/switch/index.zh-CN.md +++ b/components/switch/index.zh-CN.md @@ -20,6 +20,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/zNdJQMhfm/Switch.svg | autoFocus | 组件自动获取焦点 | boolean | false | | checked | 指定当前是否选中 | boolean | false | | checkedChildren | 选中时的内容 | ReactNode | - | +| className | Switch 器类名 | string | - | | defaultChecked | 初始是否选中 | boolean | false | | disabled | 是否禁用 | boolean | false | | loading | 加载中的开关 | boolean | false | @@ -27,11 +28,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/zNdJQMhfm/Switch.svg | unCheckedChildren | 非选中时的内容 | ReactNode | - | | onChange | 变化时回调函数 | function(checked: boolean, event: Event) | - | | onClick | 点击时回调函数 | function(checked: boolean, event: Event) | - | -| className | Switch 器类名 | string | - | ## 方法 -| 名称 | 描述 | -| ------- | -------- | -| blur() | 移除焦点 | +| 名称 | 描述 | +| --- | --- | +| blur() | 移除焦点 | | focus() | 获取焦点 | diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md index 790bbb33d4..344150f3d1 100644 --- a/components/table/index.en-US.md +++ b/components/table/index.en-US.md @@ -60,13 +60,13 @@ const columns = [ | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| tableLayout | The [table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) attribute of table element | - \| `auto` \| `fixed` | -
`fixed` when header/columns are fixed, or using `column.ellipsis` | | | bordered | Whether to show all table borders | boolean | false | | | columns | Columns of table | [ColumnsType](#Column)\[] | - | | | components | Override default table elements | [TableComponents](https://git.io/fANxz) | - | | | dataSource | Data record array to be displayed | object\[] | - | | | expandable | Config expandable content | [expandable](#expandable) | - | | | footer | Table footer renderer | function(currentPageData) | - | | +| getPopupContainer | The render container of dropdowns in table | (triggerNode) => HTMLElement | () => TableHtmlElement | | | loading | Loading status of table | boolean \| [object](/components/spin/#API) ([more](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | false | | | locale | The i18n text including filter, sort, empty text, etc | object | filterConfirm: `Ok`
filterReset: `Reset`
emptyText: `No Data`
[Default](https://github.com/ant-design/ant-design/blob/4ad1ccac277782d7ed14f7e5d02d6346aae0db67/components/locale/default.tsx#L19) | | | pagination | Config of pagination. You can ref table pagination [config](#pagination) or full [`pagination`](/components/pagination/) document, hide it by setting it to `false` | object | - | | @@ -75,16 +75,16 @@ const columns = [ | rowSelection | Row selection [config](#rowSelection) | object | - | | | scroll | Whether the table can be scrollable, [config](#scroll) | object | - | | | showHeader | Whether to show table header | boolean | true | | +| showSorterTooltip | The header show next sorter direction tooltip | boolean | true | | | size | Size of table | `default` \| `middle` \| `small` | `default` | | +| sortDirections | Supported sort way, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] | | +| sticky | Set sticky header and scroll bar | boolean \| `{offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}` | - | 4.6.0 (getContainer: 4.7.0) | | summary | Summary content | (currentData) => ReactNode | - | | +| tableLayout | The [table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) attribute of table element | - \| `auto` \| `fixed` | -
`fixed` when header/columns are fixed, or using `column.ellipsis` | | | title | Table title renderer | function(currentPageData) | - | | -| onChange | Callback executed when pagination, filters or sorter is changed | function(pagination, filters, sorter, extra: { currentDataSource: [], action: `paginate` \| `sort` \| `filter` }) | - | | +| onChange | Callback executed when pagination, filters or sorter is changed | function(pagination, filters, sorter, extra: { currentDataSource: \[], action: `paginate` \| `sort` \| `filter` }) | - | | | onHeaderRow | Set props on per header row | function(column, index) | - | | | onRow | Set props on per row | function(record, index) | - | | -| getPopupContainer | The render container of dropdowns in table | (triggerNode) => HTMLElement | () => TableHtmlElement | | -| sortDirections | Supported sort way, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] | | -| showSorterTooltip | The header show next sorter direction tooltip | boolean | true | | -| sticky | Set sticky header and scroll bar | boolean \| `{offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}` | - | 4.6.0 (getContainer: 4.7.0) | #### onRow usage @@ -113,43 +113,43 @@ Same as `onRow` `onHeaderRow` `onCell` `onHeaderCell` One of the Table `columns` prop for describing the table's columns, Column has the same API. -| Property | Description | Type | Default | Version | -| --- | --- | --- | --- | --- | -| align | The specify which way that column is aligned | `left` \| `right` \| `center` | `left` | | -| ellipsis | The ellipsis cell content, not working with sorter and filters for now.
tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }` | boolean \| {showTitle?: boolean } | false | showTitle: 4.3.0 | -| className | The className of this column | string | - | | -| colSpan | Span of this column's title | number | - | | -| dataIndex | Display field of the data record, support nest path by string array | string \| string\[] | - | | +| Property | Description | Type | Default | Version | | +| --- | --- | --- | --- | --- | --- | +| align | The specify which way that column is aligned | `left` \| `right` \| `center` | `left` | | | +| className | The className of this column | string | - | | | +| colSpan | Span of this column's title | number | - | | | +| dataIndex | Display field of the data record, support nest path by string array | string \| string\[] | - | | | | defaultFilteredValue | Default filtered values | string\[] | - | | | -| defaultSortOrder | Default order of sorted values | `ascend` \| `descend` | - | | -| filterDropdown | Customized filter overlay | ReactNode \| (props: [FilterDropdownProps](https://git.io/fjP5h)) => ReactNode | - | | -| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - | | -| filtered | Whether the `dataSource` is filtered | boolean | false | | -| filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - | | -| filterIcon | Customized filter icon | ReactNode \| (filtered: boolean) => ReactNode | - | | -| filterMultiple | Whether multiple filters can be selected | boolean | true | | -| filters | Filter menu config | object\[] | - | | -| fixed | (IE not support) Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean \| string | false | | -| key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - | | -| render | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | function(text, record, index) {} | - | | -| responsive | The list of breakpoints at which to display this column. Always visible if not set. | [Breakpoint](https://github.com/ant-design/ant-design/blob/015109b42b85c63146371b4e32b883cf97b088e8/components/_util/responsiveObserve.ts#L1)\[] | - | 4.2.0 | -| shouldCellUpdate | Control cell render logic | (record, prevRecord) => boolean | - | 4.3.0 | -| sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | function \| boolean | - | | -| sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean \| string | - | | -| sortDirections | Supported sort way, override `sortDirections` in `Table`, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] | | -| title | Title of this column | ReactNode \| ({ sortOrder, sortColumn, filters }) => ReactNode | - | | -| width | Width of this column ([width not working?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)) | string \| number | - | | -| onCell | Set props on per cell | function(record, rowIndex) | - | | -| onFilter | Function that determines if the row is displayed when filtered | function(value, record) => boolean | - | | -| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | function(visible) {} | - | | -| onHeaderCell | Set props on per header cell | function(column) | - | | -| showSorterTooltip | If header show next sorter direction tooltip, override `showSorterTooltip` in table | boolean | true | | +| defaultSortOrder | Default order of sorted values | `ascend` \| `descend` | - | | | +| ellipsis | The ellipsis cell content, not working with sorter and filters for now.
tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }` | boolean \| {showTitle?: boolean } | false | showTitle: 4.3.0 | | +| filterDropdown | Customized filter overlay | ReactNode \| (props: [FilterDropdownProps](https://git.io/fjP5h)) => ReactNode | - | | | +| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - | | | +| filtered | Whether the `dataSource` is filtered | boolean | false | | | +| filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - | | | +| filterIcon | Customized filter icon | ReactNode \| (filtered: boolean) => ReactNode | - | | | +| filterMultiple | Whether multiple filters can be selected | boolean | true | | | +| filters | Filter menu config | object\[] | - | | | +| fixed | (IE not support) Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean \| string | false | | | +| key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - | | | +| render | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | function(text, record, index) {} | - | | | +| responsive | The list of breakpoints at which to display this column. Always visible if not set. | [Breakpoint](https://github.com/ant-design/ant-design/blob/015109b42b85c63146371b4e32b883cf97b088e8/components/_util/responsiveObserve.ts#L1)\[] | - | 4.2.0 | | +| shouldCellUpdate | Control cell render logic | (record, prevRecord) => boolean | - | 4.3.0 | | +| showSorterTooltip | If header show next sorter direction tooltip, override `showSorterTooltip` in table | boolean | true | | | +| sortDirections | Supported sort way, override `sortDirections` in `Table`, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] | | | +| sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | function \| boolean | - | | | +| sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean \| string | - | | | +| title | Title of this column | ReactNode \| ({ sortOrder, sortColumn, filters }) => ReactNode | - | | | +| width | Width of this column ([width not working?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)) | string \| number | - | | | +| onCell | Set props on per cell | function(record, rowIndex) | - | | | +| onFilter | Function that determines if the row is displayed when filtered | function(value, record) => boolean | - | | | +| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | function(visible) {} | - | | | +| onHeaderCell | Set props on per header cell | function(column) | - | | | ### ColumnGroup -| Property | Description | Type | Default | -| -------- | ------------------------- | --------- | ------- | -| title | Title of the column group | ReactNode | - | +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| title | Title of the column group | ReactNode | - | ### pagination @@ -170,11 +170,11 @@ Properties for expandable. | childrenColumnName | The column contains children to display | string\[] | children | | defaultExpandAllRows | Expand all rows initially | boolean | false | | defaultExpandedRowKeys | Initial expanded row keys | string\[] | - | -| expandIcon | Customize row expand Icon. Ref [example](https://codesandbox.io/s/fervent-bird-nuzpr) | function(props): ReactNode | - | -| expandIconColumnIndex | Customize expand icon column index. Not render when `-1` | number | - | | expandedRowClassName | Expanded row's className | function(record, index, indent): string | - | | expandedRowKeys | Current expanded row keys | string\[] | - | | expandedRowRender | Expanded container render for each row | function(record, index, indent, expanded): ReactNode | - | +| expandIcon | Customize row expand Icon. Ref [example](https://codesandbox.io/s/fervent-bird-nuzpr) | function(props): ReactNode | - | +| expandIconColumnIndex | Customize expand icon column index. Not render when `-1` | number | - | | expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | false | | indentSize | Indent size in pixels of tree data | number | 15 | | rowExpandable | Enable row can be expandable | (record) => boolean | - | @@ -188,14 +188,14 @@ Properties for row selection. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | | checkStrictly | Check table row precisely; parent row and children rows are not associated | boolean | true | 4.4.0 | -| columnWidth | Set the width of the selection column | string \| number | `60px` | | | columnTitle | Set the title of the selection column | ReactNode | - | | +| columnWidth | Set the width of the selection column | string \| number | `60px` | | | fixed | Fixed selection column on the left | boolean | - | | | getCheckboxProps | Get Checkbox or Radio props | function(record) | - | | | hideSelectAll | Hide the selectAll checkbox and custom selection | boolean | false | 4.3.0 | | preserveSelectedRowKeys | Keep selection `key` even when it removed from `dataSource` | boolean | - | 4.4.0 | | renderCell | Renderer of the table cell. Same as `render` in column | function(checked, record, index, originNode) {} | - | 4.1.0 | -| selectedRowKeys | Controlled selected row keys | string\[] \| number[] | \[] | | +| selectedRowKeys | Controlled selected row keys | string\[] \| number\[] | \[] | | | selections | Custom selection [config](#rowSelection), only displays default selections when set to `true` | object\[] \| boolean | - | | | type | `checkbox` or `radio` | `checkbox` \| `radio` | `checkbox` | | | onChange | Callback executed when selected rows change | function(selectedRowKeys, selectedRows) | - | | @@ -207,9 +207,9 @@ Properties for row selection. | Property | Description | Type | Default | | --- | --- | --- | --- | +| scrollToFirstRowOnChange | Whether to scroll to the top of the table when paging, sorting, filtering changes | boolean | - | | x | Set horizontal scrolling, can also be used to specify the width of the scroll area, could be number, percent value, true and ['max-content'](https://developer.mozilla.org/zh-CN/docs/Web/CSS/width#max-content) | number \| true | - | | y | Set vertical scrolling, can also be used to specify the height of the scroll area, could be number | number | - | -| scrollToFirstRowOnChange | Whether to scroll to the top of the table when paging, sorting, filtering changes | boolean | - | ### selection diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md index 460b50db07..65d7f79a27 100644 --- a/components/table/index.zh-CN.md +++ b/components/table/index.zh-CN.md @@ -67,13 +67,13 @@ const columns = [ | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | -| tableLayout | 表格元素的 [table-layout](https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout) 属性，设为 `fixed` 表示内容不会影响列的布局 | - \| `auto` \| `fixed` | 无
固定表头/列或使用了 `column.ellipsis` 时，默认值为 `fixed` | | | bordered | 是否展示外边框和列边框 | boolean | false | | | columns | 表格列的配置描述，具体项见下表 | [ColumnsType](#Column)\[] | - | | | components | 覆盖默认的 table 元素 | [TableComponents](https://git.io/fANxz) | - | | | dataSource | 数据数组 | object\[] | - | | | expandable | 配置展开属性 | [expandable](#expandable) | - | | | footer | 表格尾部 | function(currentPageData) | - | | +| getPopupContainer | 设置表格内各类浮层的渲染节点，如筛选菜单 | (triggerNode) => HTMLElement | () => TableHtmlElement | | | loading | 页面是否加载中 | boolean \| [object](/components/spin/#API) ([更多](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | false | | | locale | 默认文案设置，目前包括排序、过滤、空数据文案 | object | filterConfirm: `确定`
filterReset: `重置`
emptyText: `暂无数据`
[默认值](https://github.com/ant-design/ant-design/blob/4ad1ccac277782d7ed14f7e5d02d6346aae0db67/components/locale/default.tsx#L19) | | | pagination | 分页器，参考[配置项](#pagination)或 [pagination](/components/pagination/) 文档，设为 false 时不展示和进行分页 | object | - | | @@ -82,16 +82,16 @@ const columns = [ | rowSelection | 表格行是否可选择，[配置项](#rowSelection) | object | - | | | scroll | 表格是否可滚动，也可以指定滚动区域的宽、高，[配置项](#scroll) | object | - | | | showHeader | 是否显示表头 | boolean | true | | +| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示 | boolean | true | | | size | 表格大小 | `default` \| `middle` \| `small` | default | | +| sortDirections | 支持的排序方式，取值为 `ascend` `descend` | Array | \[`ascend`, `descend`] | | +| sticky | 设置粘性头部和滚动条 | boolean \| `{offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}` | - | 4.6.0 (getContainer: 4.7.0) | | summary | 总结栏 | (currentData) => ReactNode | - | | +| tableLayout | 表格元素的 [table-layout](https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout) 属性，设为 `fixed` 表示内容不会影响列的布局 | - \| `auto` \| `fixed` | 无
固定表头/列或使用了 `column.ellipsis` 时，默认值为 `fixed` | | | title | 表格标题 | function(currentPageData) | - | | -| onChange | 分页、排序、筛选变化时触发 | function(pagination, filters, sorter, extra: { currentDataSource: [], action: `paginate` \| `sort` \| `filter` }) | - | | +| onChange | 分页、排序、筛选变化时触发 | function(pagination, filters, sorter, extra: { currentDataSource: \[], action: `paginate` \| `sort` \| `filter` }) | - | | | onHeaderRow | 设置头部行属性 | function(column, index) | - | | | onRow | 设置行属性 | function(record, index) | - | | -| getPopupContainer | 设置表格内各类浮层的渲染节点，如筛选菜单 | (triggerNode) => HTMLElement | () => TableHtmlElement | | -| sortDirections | 支持的排序方式，取值为 `ascend` `descend` | Array | \[`ascend`, `descend`] | | -| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示 | boolean | true | | -| sticky | 设置粘性头部和滚动条 | boolean \| `{offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}` | - | 4.6.0 (getContainer: 4.7.0) | #### onRow 用法 @@ -123,12 +123,12 @@ const columns = [ | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | align | 设置列的对齐方式 | `left` \| `right` \| `center` | `left` | | -| ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。
设置为 `true` 或 `{ showTitle?: boolean }` 时，表格布局将变成 `tableLayout="fixed"`。 | boolean \| { showTitle?: boolean } | false | showTitle: 4.3.0 | | className | 列样式类名 | string | - | | | colSpan | 表头列合并,设置为 0 时，不渲染 | number | - | | | dataIndex | 列数据在数据项中对应的路径，支持通过数组查询嵌套路径 | string \| string\[] | - | | | defaultFilteredValue | 默认筛选值 | string\[] | - | | | defaultSortOrder | 默认排序顺序 | `ascend` \| `descend` | - | | +| ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。
设置为 `true` 或 `{ showTitle?: boolean }` 时，表格布局将变成 `tableLayout="fixed"`。 | boolean \| { showTitle?: boolean } | false | showTitle: 4.3.0 | | filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | ReactNode \| (props: [FilterDropdownProps](https://git.io/fjP5h)) => ReactNode | - | | | filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - | | | filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false | | @@ -141,22 +141,22 @@ const columns = [ | render | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return 里面可以设置表格[行/列合并](#components-table-demo-colspan-rowspan) | function(text, record, index) {} | - | | | responsive | 响应式 breakpoint 配置列表。未设置则始终可见。 | [Breakpoint](https://github.com/ant-design/ant-design/blob/015109b42b85c63146371b4e32b883cf97b088e8/components/_util/responsiveObserve.ts#L1)\[] | - | 4.2.0 | | shouldCellUpdate | 自定义单元格渲染时机 | (record, prevRecord) => boolean | - | 4.3.0 | +| showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中`showSorterTooltip` | boolean | true | | +| sortDirections | 支持的排序方式，覆盖`Table`中`sortDirections`， 取值为 `ascend` `descend` | Array | \[`ascend`, `descend`] | | | sorter | 排序函数，本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction)，需要服务端排序可设为 true | function \| boolean | - | | | sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 `ascend` `descend` false | boolean \| string | - | | -| sortDirections | 支持的排序方式，覆盖`Table`中`sortDirections`， 取值为 `ascend` `descend` | Array | \[`ascend`, `descend`] | | | title | 列头显示文字（函数用法 `3.10.0` 后支持） | ReactNode \| ({ sortOrder, sortColumn, filters }) => ReactNode | - | | | width | 列宽度（[指定了也不生效？](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)） | string \| number | - | | | onCell | 设置单元格属性 | function(record, rowIndex) | - | | | onFilter | 本地模式下，确定筛选的运行函数 | function | - | | | onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - | | | onHeaderCell | 设置头部单元格属性 | function(column) | - | | -| showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中`showSorterTooltip` | boolean | true | | ### ColumnGroup -| 参数 | 说明 | 类型 | 默认值 | -| ----- | ------------ | --------- | ------ | -| title | 列头显示文字 | ReactNode | - | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| title | 列头显示文字 | ReactNode | - | ### pagination @@ -177,11 +177,11 @@ const columns = [ | childrenColumnName | 指定树形结构的列名 | string\[] | children | | defaultExpandAllRows | 初始时，是否展开所有行 | boolean | false | | defaultExpandedRowKeys | 默认展开的行 | string\[] | - | -| expandIcon | 自定义展开图标，参考[示例](https://codesandbox.io/s/fervent-bird-nuzpr) | function(props): ReactNode | - | -| expandIconColumnIndex | 自定义展开按钮的列顺序，`-1` 时不展示 | number | - | | expandedRowClassName | 展开行的 className | function(record, index, indent): string | - | | expandedRowKeys | 展开的行，控制属性 | string\[] | - | | expandedRowRender | 额外的展开行 | function(record, index, indent, expanded): ReactNode | - | +| expandIcon | 自定义展开图标，参考[示例](https://codesandbox.io/s/fervent-bird-nuzpr) | function(props): ReactNode | - | +| expandIconColumnIndex | 自定义展开按钮的列顺序，`-1` 时不展示 | number | - | | expandRowByClick | 通过点击行来展开子行 | boolean | false | | indentSize | 展示树形数据时，每层缩进的宽度，以 px 为单位 | number | 15 | | rowExpandable | 设置是否允许行展开 | (record) => boolean | - | @@ -195,14 +195,14 @@ const columns = [ | 参数 | 说明 | 类型 | 默认值 | 版本 | | --- | --- | --- | --- | --- | | checkStrictly | checkable 状态下节点选择完全受控（父子数据选中状态不再关联） | boolean | true | 4.4.0 | -| columnWidth | 自定义列表选择框宽度 | string \| number | `60px` | | | columnTitle | 自定义列表选择框标题 | ReactNode | - | | +| columnWidth | 自定义列表选择框宽度 | string \| number | `60px` | | | fixed | 把选择框列固定在左边 | boolean | - | | | getCheckboxProps | 选择框的默认属性配置 | function(record) | - | | | hideSelectAll | 隐藏全选勾选框与自定义选择项 | boolean | false | 4.3.0 | | preserveSelectedRowKeys | 当数据被删除时仍然保留选项的 `key` | boolean | - | 4.4.0 | | renderCell | 渲染勾选框，用法与 Column 的 `render` 相同 | function(checked, record, index, originNode) {} | - | 4.1.0 | -| selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | string\[] \| number[] | \[] | | +| selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | string\[] \| number\[] | \[] | | | selections | 自定义选择项 [配置项](#selection), 设为 `true` 时使用默认选择项 | object\[] \| boolean | true | | | type | 多选/单选，`checkbox` or `radio` | string | `checkbox` | | | onChange | 选中项发生变化时的回调 | function(selectedRowKeys, selectedRows) | - | | @@ -214,17 +214,17 @@ const columns = [ | 参数 | 说明 | 类型 | 默认值 | | --- | --- | --- | --- | +| scrollToFirstRowOnChange | 当分页、排序、筛选变化后是否滚动到表格顶部 | boolean | - | | x | 设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比，true 和 ['max-content'](https://developer.mozilla.org/zh-CN/docs/Web/CSS/width#max-content) | number \| true | - | | y | 设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值 | number | - | -| scrollToFirstRowOnChange | 当分页、排序、筛选变化后是否滚动到表格顶部 | boolean | - | ### selection -| 参数 | 说明 | 类型 | 默认值 | -| -------- | -------------------------- | --------------------------- | ------ | -| key | React 需要的 key，建议设置 | string | - | -| text | 选择项显示的文字 | ReactNode | - | -| onSelect | 选择项点击回调 | function(changeableRowKeys) | - | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| key | React 需要的 key，建议设置 | string | - | +| text | 选择项显示的文字 | ReactNode | - | +| onSelect | 选择项点击回调 | function(changeableRowKeys) | - | ## 在 TypeScript 中使用 diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md index 58884e0960..ed45b4fff2 100644 --- a/components/tabs/index.en-US.md +++ b/components/tabs/index.en-US.md @@ -22,14 +22,15 @@ Ant Design has 3 types of Tabs for different situations. | Property | Description | Type | Default | Version | | --- | --- | --- | --- | --- | -| addIcon | Customize add icon | ReactNode | - | 4.4.0 | | activeKey | Current TabPane's key | string | - | | -| animated | Whether to change tabs with animation. Only works while `tabPosition="top" | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` | | -| renderTabBar | Replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | | +| addIcon | Customize add icon | ReactNode | - | 4.4.0 | +| animated | Whether to change tabs with animation. Only works while \`tabPosition="top" | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` | | +| centered | Centers tabs | boolean | false | 4.4.0 | | defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | - | | | hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false | | +| keyboard | Whether to turn on keyboard navigation | boolean | true | | +| renderTabBar | Replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | | | size | Preset tab bar size | `large` \| `default` \| `small` | `default` | | -| centered | Centers tabs | boolean | false | 4.4.0 | | tabBarExtraContent | Extra content in tab bar | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | | | tabBarGutter | The gap between tabs | number | - | | | tabBarStyle | Tab bar style object | object | - | | @@ -39,7 +40,6 @@ Ant Design has 3 types of Tabs for different situations. | onEdit | Callback executed when tab is added or removed. Only works while `type="editable-card"` | (targetKey, action) => void | - | | | onTabClick | Callback executed when tab is clicked | function(key: string, event: MouseEvent) | - | | | onTabScroll | Trigger when tab scroll | function({ direction: `left` \| `right` \| `top` \| `bottom` }) | - | 4.3.0 | -| keyboard | Whether to turn on keyboard navigation | boolean | true | | More option at [rc-tabs option](https://github.com/react-component/tabs#tabs) @@ -47,9 +47,9 @@ More option at [rc-tabs option](https://github.com/react-component/tabs#tabs) | Property | Description | Type | Default | | --- | --- | --- | --- | +| closeIcon | Customize close icon in TabPane's head. Only works while `type="editable-card"` | ReactNode | - | | forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false | | key | TabPane's key | string | - | | tab | Show text in TabPane's head | ReactNode | - | -| closeIcon | Customize close icon in TabPane's head. Only works while `type="editable-card"` | ReactNode | - | More option at [rc-tabs option](https://github.com/react-component/tabs#tabpane) diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md index e1ff7a3d73..995658a8a7 100644 --- a/components/tabs/index.zh-CN.md +++ b/components/tabs/index.zh-CN.md @@ -23,32 +23,32 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。 ### Tabs -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --- | --- | --- | --- | --- | -| addIcon | 自定义添加按钮 | ReactNode | - | 4.4.0 | -| activeKey | 当前激活 tab 面板的 key | string | - | | -| animated | 是否使用动画切换 Tabs，在 `tabPosition="top" | "bottom"` 时有效 | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` | | -| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | | -| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` | | -| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | | -| size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | `default` | | -| centered | 标签居中展示 | boolean | false | 4.4.0 | -| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | | -| tabBarGutter | tabs 之间的间隙 | number | - | | -| tabBarStyle | tab bar 的样式对象 | object | - | | -| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | `top` | | -| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | `line` | | -| onChange | 切换面板的回调 | function(activeKey) {} | - | | -| onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void | - | | -| onTabClick | tab 被点击的回调 | function(key: string, event: MouseEvent) | - | | -| onTabScroll | tab 滚动时触发 | function({ direction: `left` \| `right` \| `top` \| `bottom` }) | - | 4.3.0 | -| keyboard | 开启键盘切换功能 | boolean | true | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | | +| --- | --- | --- | --- | --- | --- | +| activeKey | 当前激活 tab 面板的 key | string | - | | | +| addIcon | 自定义添加按钮 | ReactNode | - | 4.4.0 | | +| animated | 是否使用动画切换 Tabs，在 \`tabPosition="top" | "bottom"\` 时有效 | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` | | +| centered | 标签居中展示 | boolean | false | 4.4.0 | | +| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` | | | +| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | | | +| keyboard | 开启键盘切换功能 | boolean | true | | | +| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | | | +| size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | `default` | | | +| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | | | +| tabBarGutter | tabs 之间的间隙 | number | - | | | +| tabBarStyle | tab bar 的样式对象 | object | - | | | +| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | `top` | | | +| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | `line` | | | +| onChange | 切换面板的回调 | function(activeKey) {} | - | | | +| onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void | - | | | +| onTabClick | tab 被点击的回调 | function(key: string, event: MouseEvent) | - | | | +| onTabScroll | tab 滚动时触发 | function({ direction: `left` \| `right` \| `top` \| `bottom` }) | - | 4.3.0 | | ### Tabs.TabPane -| 参数 | 说明 | 类型 | 默认值 | -| ----------- | ----------------------------------------------- | --------- | ------ | -| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | -| key | 对应 activeKey | string | - | -| tab | 选项卡头显示文字 | ReactNode | - | -| closeIcon | 自定义关闭图标，`在 type="editable-card"`时有效 | ReactNode | - | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| closeIcon | 自定义关闭图标，`在 type="editable-card"`时有效 | ReactNode | - | +| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | +| key | 对应 activeKey | string | - | +| tab | 选项卡头显示文字 | ReactNode | - | diff --git a/components/tag/index.en-US.md b/components/tag/index.en-US.md index f8d5190904..17c5ee8c2b 100644 --- a/components/tag/index.en-US.md +++ b/components/tag/index.en-US.md @@ -17,18 +17,18 @@ Tag for categorizing or markup. ### Tag -| Property | Description | Type | Default | Version | -| --------- | ------------------------------------ | ----------- | ------- | ------- | -| closable | Whether the Tag can be closed | boolean | false | | -| color | Color of the Tag | string | - | | -| closeIcon | Custom close icon | ReactNode | - | 4.4.0 | -| onClose | Callback executed when tag is closed | (e) => void | - | | -| visible | Whether the Tag is closed or not | boolean | true | | -| icon | Set the icon of tag | ReactNode | - | | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| closable | Whether the Tag can be closed | boolean | false | | +| closeIcon | Custom close icon | ReactNode | - | 4.4.0 | +| color | Color of the Tag | string | - | | +| icon | Set the icon of tag | ReactNode | - | | +| visible | Whether the Tag is closed or not | boolean | true | | +| onClose | Callback executed when tag is closed | (e) => void | - | | ### Tag.CheckableTag -| Property | Description | Type | Default | -| -------- | ----------------------------------------------- | ----------------- | ------- | -| checked | Checked status of Tag | boolean | false | -| onChange | Callback executed when Tag is checked/unchecked | (checked) => void | - | +| Property | Description | Type | Default | +| --- | --- | --- | --- | +| checked | Checked status of Tag | boolean | false | +| onChange | Callback executed when Tag is checked/unchecked | (checked) => void | - | diff --git a/components/tag/index.zh-CN.md b/components/tag/index.zh-CN.md index 92544f82bc..690364c690 100644 --- a/components/tag/index.zh-CN.md +++ b/components/tag/index.zh-CN.md @@ -17,18 +17,18 @@ cover: https://gw.alipayobjects.com/zos/alicdn/cH1BOLfxC/Tag.svg ### Tag -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| --------- | ---------------- | ----------- | ------ | ----- | -| closable | 标签是否可以关闭 | boolean | false | | -| color | 标签色 | string | - | | -| closeIcon | 自定义关闭按钮 | ReactNode | - | 4.4.0 | -| onClose | 关闭时的回调 | (e) => void | - | | -| visible | 是否显示标签 | boolean | true | | -| icon | 设置图标 | ReactNode | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| --- | --- | --- | --- | --- | +| closable | 标签是否可以关闭 | boolean | false | | +| closeIcon | 自定义关闭按钮 | ReactNode | - | 4.4.0 | +| color | 标签色 | string | - | | +| icon | 设置图标 | ReactNode | - | | +| visible | 是否显示标签 | boolean | true | | +| onClose | 关闭时的回调 | (e) => void | - | | ### Tag.CheckableTag -| 参数 | 说明 | 类型 | 默认值 | -| -------- | -------------------- | ----------------- | ------ | -| checked | 设置标签的选中状态 | boolean | false | -| onChange | 点击标签时触发的回调 | (checked) => void | - | +| 参数 | 说明 | 类型 | 默认值 | +| --- | --- | --- | --- | +| checked | 设置标签的选中状态 | boolean | false | +| onChange | 点击标签时触发的回调 | (checked) => void | - | diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md index 5f4cf6953c..c5190a6f71 100644 --- a/components/time-picker/index.en-US.md +++ b/components/time-picker/index.en-US.md @@ -29,6 +29,7 @@ import moment from 'moment'; | autoFocus | If get focus when component mounted | boolean | false | | | bordered | Whether has border style | boolean | true | | | className | The className of picker | string | - | | +| clearIcon | The custom clear icon | ReactNode | - | | | clearText | The clear tooltip of icon | string | clear | | | defaultValue | To set default time | [moment](http://momentjs.com/) | - | | | disabled | Determine whether the TimePicker is disabled | boolean | false | | @@ -45,31 +46,30 @@ import moment from 'moment'; | placeholder | Display when there's no value | string \| \[string, string] | `Select a time` | | | popupClassName | The className of panel | string | - | | | popupStyle | The style of panel | CSSProperties | - | | -| secondStep | Interval between seconds in picker | number | 1 | | -| suffixIcon | The custom suffix icon | ReactNode | - | | -| clearIcon | The custom clear icon | ReactNode | - | | -| use12Hours | Display as 12 hours format, with default format `h:mm:ss a` | boolean | false | | | renderExtraFooter | Called from time picker panel to render some addon to its bottom | () => ReactNode | - | | +| secondStep | Interval between seconds in picker | number | 1 | | +| showNow | Whether to show `Now` button on panel | boolean | - | 4.4.0 | +| suffixIcon | The custom suffix icon | ReactNode | - | | +| use12Hours | Display as 12 hours format, with default format `h:mm:ss a` | boolean | false | | | value | To set time | [moment](http://momentjs.com/) | - | | | onChange | A callback function, can be executed when the selected time is changing | function(time: moment, timeString: string): void | - | | | onOpenChange | A callback function which will be called while panel opening/closing | (open: boolean) => void | - | | | onSelect | A callback function, executes when a value is selected | function(time: moment): void | - | | -| showNow | Whether to show `Now` button on panel | boolean | - | 4.4.0 | ## Methods -| Name | Description | Version | -| ------- | ------------ | ------- | -| blur() | Remove focus | | -| focus() | Get focus | | +| Name | Description | Version | +| --- | --- | --- | +| blur() | Remove focus | | +| focus() | Get focus | | ### RangePicker Same props from [RangePicker](/components/date-picker/#RangePicker) of DatePicker. And includes additional props: -| Property | Description | Type | Default | Version | -| -------- | ------------------------ | ------- | ------- | ------- | -| order | Order start and end time | boolean | true | 4.1.0 | +| Property | Description | Type | Default | Version | +| --- | --- | --- | --- | --- | +| order | Order start and end time | boolean | true | 4.1.0 |