github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

doc: sort api

feat-css-var
tangjinzhou 2022-03-10 21:50:27 +08:00
parent d3a1be04fb
commit eef66b153a
103 changed files with 845 additions and 842 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -78,3 +78,4 @@ report.html
site/src/router/demoRoutes.js
components/version/version.tsx
~component-api.json

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

@ -24,7 +24,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
### 事件
| 事件名称 | 说明 | 回调参数 | 版本 |
| 事件名称 | 说明 | 回调参数 | 版本 | |
| -------- | ---------------------------- | --------------------------- | ---- | --- |
| change | 固定状态改变时触发的回调函数 | (affixed?: boolean) => void | - | |

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

@ -19,8 +19,8 @@ Alert component for feedback.
| afterClose | Called when close animation is finished | () => void | - | |
| banner | Whether to show as banner | boolean | false | |
| closable | Whether Alert can be closed | boolean | | |
| closeText | Close text to show | string\|slot | - | |
| closeIcon | Custom close icon | slot | <CloseOutlined /> | 3.0 |
| closeText | Close text to show | string\|slot | - | |
| description | Additional content of Alert | string\|slot | - | |
| icon | Custom icon, effective when `showIcon` is `true` | vnode \| slot | - | |
| message | Content of Alert | string\|slot | - | |

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

@ -20,8 +20,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
| afterClose | 关闭动画结束后触发的回调函数 | () => void | - | |
| banner | 是否用作顶部公告 | boolean | false | |
| closable | 默认不显示关闭按钮 | boolean | 无 | |
| closeText | 自定义关闭按钮 | string\|slot | 无 | |
| closeIcon | 自定义关闭 Icon | slot | <CloseOutlined /> | 3.0 |
| closeText | 自定义关闭按钮 | string\|slot | 无 | |
| description | 警告提示的辅助性文字介绍 | string\|slot | 无 | |
| icon | 自定义图标，`showIcon` 为 `true` 时有效 | vnode\|slot | - | |
| message | 警告提示内容 | string\|slot | 无 | |

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

@ -21,25 +21,25 @@ 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(px) | |
| getContainer | Scrolling container | () => HTMLElement | () => window | |
| getCurrentAnchor | Customize the anchor highlight | () => string | - | 1.5.0 |
| offsetBottom | Pixels to offset from bottom when calculating position of scroll | number | - | |
| offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 | |
| showInkInFixed | Whether show ink-balls when `：affix="false"` | boolean | false | |
| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | `offsetTop` | 1.5.0 |
| wrapperClass | The class name of the container | string | - | |
| wrapperStyle | The style of the container | object | - | |
| getCurrentAnchor | Customize the anchor highlight | () => string | - | 1.5.0 |
| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | `offsetTop` | 1.5.0 |
### Events
| Events Name | Description | Arguments | Version |
| Events Name | Description | Arguments | Version | |
| --- | --- | --- | --- | --- |
| click | set the handler to handle `click` event | Function(e: Event, link: Object) | |
| change | Listening for anchor link change | (currentActiveLink: string) => void | | 1.5.0 |
| click | set the handler to handle `click` event | Function(e: Event, link: Object) | | |
### Link Props
| Property | Description | Type | Default | Version |
| -------- | ----------------------------------------- | ------------ | ------- | ------- |
| href | target of hyperlink | string | | |
| title | content of hyperlink | string\|slot | | |
| target | Specifies where to display the linked URL | string | | 1.5.0 |
| title | content of hyperlink | string\|slot | | |

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

@ -22,25 +22,25 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
| affix | 固定模式 | boolean | true | |
| bounds | 锚点区域边界 | number | 5(px) | |
| getContainer | 指定滚动的容器 | () => HTMLElement | () => window | |
| getCurrentAnchor | 自定义高亮的锚点 | () => string | - | 1.5.0 |
| offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | | |
| offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | | |
| showInkInFixed | `:affix="false"` 时是否显示小圆点 | boolean | false | |
| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | `offsetTop` | 1.5.0 |
| wrapperClass | 容器的类名 | string | - | |
| wrapperStyle | 容器样式 | object | - | |
| getCurrentAnchor | 自定义高亮的锚点 | () => string | - | 1.5.0 |
| targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | `offsetTop` | 1.5.0 |
### 事件
| 事件名称 | 说明 | 回调参数 | 版本 |
| 事件名称 | 说明 | 回调参数 | 版本 | |
| -------- | ---------------------- | ----------------------------------- | ---- | ----- |
| click | `click` 事件的 handler | Function(e: Event, link: Object) | |
| change | 监听锚点链接改变 | (currentActiveLink: string) => void | | 1.5.0 |
| click | `click` 事件的 handler | Function(e: Event, link: Object) | | |
### Link Props
| 成员 | 说明 | 类型 | 默认值 | 版本 |
| ------ | -------------------------------- | ------------ | ------ | ----- |
| href | 锚点链接 | string | | |
| title | 文字内容 | string\|slot | | |
| target | 该属性指定在何处显示链接的资源。 | string | | 1.5.0 |
| title | 文字内容 | string\|slot | | |

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

@ -26,32 +26,32 @@ The differences with Select are:
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| #default (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement | `<Input />` | |
| allowClear | Show clear button, effective in multiple mode only. | boolean | false | |
| autofocus | get focus when component mounted | boolean | false | |
| backfill | backfill selected item the input when using keyboard | boolean | false | |
| #default (for customize input element) | customize input element | HTMLInputElement / HTMLTextAreaElement | `<Input />` | |
| options | Data source for autocomplete | [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] | | |
| option | custom render option by slot | v-slot:option="{value, label, [disabled, key, title]}" | - | 3.0 |
| dropdownMenuStyle | additional style applied to dropdown menu | object | | 1.5.0 |
| defaultActiveFirstOption | Whether active first option by default | boolean | true | |
| defaultOpen | Initial open state of dropdown | boolean | - | |
| disabled | Whether disabled select | boolean | false | |
| 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 | |
| dropdownMenuStyle | additional style applied to dropdown menu | object | | 1.5.0 |
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true | |
| open | Controlled open state of dropdown | boolean | - | |
| option | custom render option by slot | v-slot:option="{value, label, [disabled, key, title]}" | - | 3.0 |
| options | Data source for autocomplete | [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] | | |
| placeholder | placeholder of input | string | - | |
| v-model:value | selected option | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | - | |
| defaultOpen | Initial open state of dropdown | boolean | - | |
| open | Controlled open state of dropdown | boolean | - | |
### events
| Events Name | Description | Arguments | Version |
| Events Name | Description | Arguments | Version | |
| --- | --- | --- | --- | --- |
| change | Called when select an option or input value change, or value of input is changed | function(value) | |
| blur | Called when leaving the component. | function() | |
| focus | Called when entering the component | function() | |
| blur | Called when leaving the component. | function() | | |
| change | Called when select an option or input value change, or value of input is changed | function(value) | | |
| dropdownVisibleChange | Call when dropdown open | function(open) | | |
| focus | Called when entering the component | function() | | |
| search | Called when searching items. | function(value) | - | |
| select | Called when a option is selected. param is option's value and option instance. | function(value, option) | |
| dropdownVisibleChange | Call when dropdown open | function(open) | |
| select | Called when a option is selected. param is option's value and option instance. | function(value, option) | | |
## Methods

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

@ -27,39 +27,39 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| #default (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement | `<Input />` | |
| allowClear | 支持清除, 单选模式有效 | boolean | false | |
| autofocus | 自动获取焦点 | boolean | false | |
| backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false | |
| #default (自定义输入框) | 自定义输入框 | HTMLInputElement / HTMLTextAreaElement | `<Input />` | |
| options | 自动完成的数据源 | [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] | | |
| option | 通过 option 插槽，自定义节点 | v-slot:option="{value, label, [disabled, key, title]}" | - | 3.0 |
| dropdownMenuStyle | dropdown 菜单自定义样式 | object | | 1.5.0 |
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true | |
| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |
| disabled | 是否禁用 | boolean | false | |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true | |
| dropdownMenuStyle | dropdown 菜单自定义样式 | object | | 1.5.0 |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true | |
| open | 是否展开下拉菜单 | boolean | - | |
| option | 通过 option 插槽，自定义节点 | v-slot:option="{value, label, [disabled, key, title]}" | - | 3.0 |
| options | 自动完成的数据源 | [DataSourceItemType](https://github.com/vueComponent/ant-design-vue/blob/724d53b907e577cf5880c1e6742d4c3f924f8f49/components/auto-complete/index.vue#L9)\[] | | |
| placeholder | 输入框提示 | string \| slot | - | |
| v-model:value | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|vNodes }\|Array&lt;{ key: string, label: string\|vNodes }> | 无 | |
| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |
| open | 是否展开下拉菜单 | boolean | - | |
### 事件
| 事件名称 | 说明 | 回调参数 | 版本 |
| --- | --- | --- | --- |
| change | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) |
| blur | 失去焦点时的回调 | function() |
| focus | 获得焦点时的回调 | function() |
| search | 搜索补全项的时候调用 | function(value) |
| select | 被选中时调用，参数为选中项的 value 值 | function(value, option) |
| dropdownVisibleChange | 展开下拉菜单的回调 | function(open) |
| blur | 失去焦点时的回调 | function() | |
| change | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | |
| dropdownVisibleChange | 展开下拉菜单的回调 | function(open) | |
| focus | 获得焦点时的回调 | function() | |
| search | 搜索补全项的时候调用 | function(value) | |
| select | 被选中时调用，参数为选中项的 value 值 | function(value, option) | |
## 方法
| 名称 | 描述 | 版本 |
| ------- | -------- | ---- |
| blur() | 移除焦点 |
| focus() | 获取焦点 |
| blur() | 移除焦点 | |
| focus() | 获取焦点 | |
## FAQ

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

@ -13,16 +13,16 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| icon | the `Icon` type for an icon avatar, see `Icon` Component | VNode \| slot | - |
| shape | the shape of avatar | `circle` \| `square` | `circle` |
| size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 2.2.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 | - |
| gap | Letter type unit distance between left and right sides | number | 4 | 2.2.0 |
| draggable | Whether the picture is allowed to be dragged | boolean \| `'true'` \| `'false'` | - | 2.2.0 |
| alt | This attribute defines the alternative text describing the image | string | - | |
| crossOrigin | CORS settings attributes | `'anonymous'` \| `'use-credentials'` \| `''` | - | 3.0 |
| loadError | handler when img load error, return false to prevent default fallback behavior | () => boolean | - |
| draggable | Whether the picture is allowed to be dragged | boolean \| `'true'` \| `'false'` | - | 2.2.0 |
| gap | Letter type unit distance between left and right sides | number | 4 | 2.2.0 |
| icon | the `Icon` type for an icon avatar, see `Icon` Component | VNode \| slot | - | |
| loadError | handler when img load error, return false to prevent default fallback behavior | () => boolean | - | |
| shape | the shape of avatar | `circle` \| `square` | `circle` | |
| size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 2.2.0 |
| src | the address of the image for an image avatar | string | - | |
| srcset | a list of sources to use for different screen resolutions | string | - | |
### Avatar.Group (2.2.0)

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

@ -18,16 +18,16 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| icon | 设置头像的图标类型，可设为 Icon 的 `type` 或 VNode | VNode \| slot | - |
| alt | 图像无法显示时的替代文本 | string | - | |
| crossOrigin | CORS 属性设置 | `'anonymous'` \| `'use-credentials'` \| `''` | - | 3.0 |
| draggable | 图片是否允许拖动 | boolean \| `'true'` \| `'false'` | - | 2.2.0 |
| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 2.2.0 |
| icon | 设置头像的图标类型，可设为 Icon 的 `type` 或 VNode | VNode \| slot | - | |
| loadError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - | |
| shape | 指定头像的形状 | `circle` \| `square` | `circle` | |
| size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 2.2.0 |
| src | 图片类头像的资源地址 | string | - |
| srcset | 设置图片类头像响应式资源地址 | string | - |
| alt | 图像无法显示时的替代文本 | string | - |
| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 2.2.0 |
| draggable | 图片是否允许拖动 | boolean \| `'true'` \| `'false'` | - | 2.2.0 |
| loadError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - |
| crossOrigin | CORS 属性设置 | `'anonymous'` \| `'use-credentials'` \| `''` | - | 3.0 |
| src | 图片类头像的资源地址 | string | - | |
| srcset | 设置图片类头像响应式资源地址 | string | - | |
### Avatar.Group (2.2.0)

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

@ -31,12 +31,12 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
| color | 自定义小圆点的颜色 | string | - | 1.5.0 |
| count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | number \| string \| slot | | |
| dot | 不展示数字，只有一个小红点 | boolean | false | |
| numberStyle | 设置状态点的样式 | object | '' | |
| offset | 设置状态点的位置偏移，格式为 [x, y] | [number\|string, number\|string] | - | |
| overflowCount | 展示封顶的数字值 | number | 99 | |
| showZero | 当数值为 0 时，是否展示 Badge | boolean | false | |
| status | 设置 Badge 为状态点 | Enum{ 'success', 'processing, 'default', 'error', 'warning' } | '' | |
| text | 在设置了 `status` 的前提下有效，设置状态点的文本 | string | '' | |
| numberStyle | 设置状态点的样式 | object | '' | |
| title | 设置鼠标放在状态点上时显示的文字 | string | `count` | |
### Badge.Ribbon (2.0.1+)

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

@ -31,7 +31,7 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
#### Events
| Events Name | Description | Arguments | Version |
| Events Name | Description | Arguments | Version | |
| ----------- | ----------------------------- | -------------------- | ------- | ----- |
| click | handler to handle click event | (e:MouseEvent)=>void | - | 1.5.0 |

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

@ -32,7 +32,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
#### 事件
| 事件名称 | 说明 | 回调参数 | 版本 |
| 事件名称 | 说明 | 回调参数 | 版本 | |
| -------- | -------- | -------------------- | ---- | ----- |
| click | 单击事件 | (e:MouseEvent)=>void | - | 1.5.0 |

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

@ -28,21 +28,21 @@ customize the progress dot by setting a scoped slot
| --- | --- | --- | --- | --- |
| dateCellRender | Customize the display of the date cell by setting a scoped slot, the returned content will be appended to the cell | v-slot:dateCellRender="{current: dayjs}" | - | |
| dateFullCellRender | Customize the display of the date cell by setting a scoped slot, the returned content will override the cell | v-slot:dateFullCellRender="{current: dayjs}" | - | |
| disabledDate | Function that specifies the dates that cannot be selected | (currentDate: dayjs) => boolean | - |
| disabledDate | Function that specifies the dates that cannot be selected | (currentDate: dayjs) => boolean | - | |
| fullscreen | Whether to display in full-screen | boolean | `true` | |
| headerRender | render custom header in panel | v-slot:headerRender="{value: dayjs, type: string, onChange: f(), onTypeChange: f()}" | - | 1.5.0 |
| locale | The calendar's locale | object | [default](https://github.com/vueComponent/ant-design-vue/blob/next/components/date-picker/locale/example.json) | |
| mode | The display mode of the calendar | `month` \| `year` | `month` | |
| monthCellRender | Customize the display of the month cell by setting a scoped slot, the returned content will be appended to the cell | v-slot:monthCellRender="{current: dayjs}" | - | |
| monthFullCellRender | Customize the display of the month cell by setting a scoped slot, the returned content will override the cell | v-slot:monthFullCellRender="{current: dayjs}" | - | |
| validRange | to set valid range | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - | |
| value(v-model) | The current selected date | [dayjs](https://day.js.org/) | current date | |
| headerRender | render custom header in panel | v-slot:headerRender="{value: dayjs, type: string, onChange: f(), onTypeChange: f()}" | - | 1.5.0 |
| valueFormat | optional, format of binding value. If not specified, the binding value will be a Date object | string，[date formats](https://day.js.org/docs/en/display/format) | - | |
### events
| Events Name | Description | Arguments | Version |
| Events Name | Description | Arguments | Version | |
| --- | --- | --- | --- | --- |
| change | Callback for when value change | function(date: dayjs \| string） | - | |
| panelChange | Callback for when panel changes | function(date: dayjs \| string, mode: string) | - | |
| select | Callback for when a date is selected | function(date: dayjs \| string） | - | |
| change | Callback for when value change | function(date: dayjs \| string） | - | |

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

@ -29,19 +29,19 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
| dateFullCellRender | 作用域插槽，自定义渲染日期单元格，返回内容覆盖单元格 | v-slot:dateFullCellRender="{current: dayjs}" | 无 | |
| disabledDate | 不可选择的日期 | (currentDate: dayjs) => boolean | 无 | |
| fullscreen | 是否全屏显示 | boolean | true | |
| headerRender | 自定义头部内容 | v-slot:headerRender="{value: dayjs, type: string, onChange: f(), onTypeChange: f()}" | - | |
| locale | 国际化配置 | object | [默认配置](https://github.com/vueComponent/ant-design-vue/blob/next/components/date-picker/locale/example.json) | |
| mode | 初始模式，`month/year` | string | month | |
| monthCellRender | 作用域插槽，自定义渲染月单元格，返回内容会被追加到单元格 | v-slot:monthCellRender="{current: dayjs}" | 无 | |
| monthFullCellRender | 作用域插槽，自定义渲染月单元格，返回内容覆盖单元格 | v-slot:monthFullCellRender="{current: dayjs}" | 无 | |
| validRange | 设置可以显示的日期 | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | 无 | |
| value(v-model) | 展示日期 | [dayjs](https://day.js.org/) | 当前日期 | |
| headerRender | 自定义头部内容 | v-slot:headerRender="{value: dayjs, type: string, onChange: f(), onTypeChange: f()}" | - | |
| valueFormat | 可选，绑定值的格式，对 value、defaultValue 起作用。不指定则绑定值为 dayjs 对象 | string，[具体格式](https://day.js.org/docs/zh-CN/display/format) | - | |
### 事件
| 事件名称 | 说明 | 回调参数 |
| 事件名称 | 说明 | 回调参数 | |
| --- | --- | --- | --- |
| change | 日期变化时的回调, 面板变化有可能导致日期变化 | function(date: dayjs \| string） | 无 |
| panelChange | 日期面板变化回调 | function(date: dayjs \| string, mode: string) | 无 |
| select | 点击选择日期回调 | function(date: dayjs \| string） | 无 |
| change | 日期变化时的回调, 面板变化有可能导致日期变化 | function(date: dayjs \| string） | 无 |

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

@ -18,32 +18,32 @@ A card can be used to display content related to a single subject. The content c
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| activeTabKey | Current TabPane's key | string | - | |
| headStyle | Inline style to apply to the card head | object | - | |
| bodyStyle | Inline style to apply to the card content | object | - | |
| bordered | Toggles rendering of the border around the card | boolean | `true` | |
| defaultActiveTabKey | Initial active TabPane's key, if `activeTabKey` is not set. | string | - | |
| extra | Content to render in the top-right corner of the card | string\|slot | - | |
| headStyle | Inline style to apply to the card head | object | - | |
| 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, Custom tabs with the customTab(v3.0) slot | Array&lt;{key: string, tab: any}&gt; | - | |
| size | Size of card | `default` \| `small` | `default` | |
| tabList | List of TabPane's head, Custom tabs with the customTab(v3.0) slot | Array&lt;{key: string, tab: any}> | - | |
| title | Card title | string\|slot | - | |
| type | Card style type, can be set to `inner` or not set | string | - | |
### Card Slots
| Slot Name | Description | Type |
| Slot Name | Description | Type | |
| --- | --- | --- | --- |
| customTab | custom tabList tab | { item: tabList[number] } | |
| title | Card title | - | |
| extra | Content to render in the top-right corner of the card | - | |
| tabBarExtraContent | Extra content in tab bar | - | |
| actions | The action list, shows at the bottom of the Card. | - | |
| cover | Card cover | - | |
| customTab | custom tabList tab | { item: tabList[number] } | |
| extra | Content to render in the top-right corner of the card | - | |
| tabBarExtraContent | Extra content in tab bar | - | |
| title | Card title | - | |
### events
| Events Name | Description | Arguments | Version |
| Events Name | Description | Arguments | Version | |
| ----------- | ----------------------------- | ------------- | ------- | --- |
| tabChange | Callback when tab is switched | (key) => void | - | |

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

@ -19,32 +19,32 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/NqXt8DJhky/Card.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| activeTabKey | 当前激活页签的 key | string | - | |
| headStyle | 自定义标题区域样式 | object | - | |
| bodyStyle | 内容区域自定义样式 | object | - | |
| bordered | 是否有边框 | boolean | true | |
| defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | 第一个页签 | |
| extra | 卡片右上角的操作区域 | string\|slot | - | |
| headStyle | 自定义标题区域样式 | object | - | |
| hoverable | 鼠标移过时可浮起 | boolean | false | |
| loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false | |
| tabList | 页签标题列表, 可以通过 customTab(v3.0) 插槽自定义 tab | Array&lt;{key: string, tab: any}&gt; | - | |
| size | card 的尺寸 | `default` \| `small` | `default` | |
| tabList | 页签标题列表, 可以通过 customTab(v3.0) 插槽自定义 tab | Array&lt;{key: string, tab: any}> | - | |
| title | 卡片标题 | string\|slot | - | |
| type | 卡片类型，可设置为 `inner` 或 不设置 | string | - | |
### Card 插槽
| 插槽名称 | 说明 | 参数 |
| 插槽名称 | 说明 | 参数 | |
| ------------------ | -------------------------- | ------------------------- | --- |
| customTab | 自定义 tabList tab 标签 | { item: tabList[number] } | |
| title | 卡片标题 | - | |
| extra | 卡片右上角的操作区域 | - | |
| tabBarExtraContent | tab bar 上额外的元素 | - | |
| actions | 卡片操作组，位置在卡片底部 | - | |
| cover | 卡片封面 | - | |
| customTab | 自定义 tabList tab 标签 | { item: tabList[number] } | |
| extra | 卡片右上角的操作区域 | - | |
| tabBarExtraContent | tab bar 上额外的元素 | - | |
| title | 卡片标题 | - | |
### 事件
| 事件名称 | 说明 | 回调参数 | 版本 |
| 事件名称 | 说明 | 回调参数 | 版本 | |
| --------- | -------------- | ------------- | ---- | --- |
| tabChange | 页签切换的回调 | (key) => void | - | |

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

@ -18,8 +18,8 @@ A carousel component. Scales with its container.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| autoplay | Whether to scroll automatically | boolean | `false` | |
| dots | Whether to show the dots at the bottom of the gallery | boolean | `true` | |
| dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | `bottom` | 1.5.0 |
| dots | Whether to show the dots at the bottom of the gallery | boolean | `true` | |
| dotsClass | Class name of the dots | string | `slick-dots` | |
| easing | Transition interpolation function name | string | `linear` | |
| effect | Transition effect | `scrollx` \| `fade` | `scrollx` | |

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

@ -26,27 +26,27 @@ Cascade selection box.
| changeOnSelect | (Work on single select) change value on each selection if set to true, see above demo for details | boolean | false | |
| disabled | whether disabled select | boolean | false | |
| displayRender | render function of displaying selected options, you can use #displayRender="{labels, selectedOptions}". | `({labels, selectedOptions}) => VNode` | `labels => labels.join(' / ')` | |
| dropdownClassName | additional className of popup overlay | string | - | 3.0 |
| dropdownStyle | additional style of popup overlay | CSSProperties | {} | 3.0 |
| expandIcon | Customize the current item expand icon | slot | - | 3.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. | Function(triggerNode) | () => document.body | |
| loadData | To load option lazily, and it cannot work with `showSearch` | `(selectedOptions) => void` | - | |
| maxTagCount | Max tag count to show. `responsive` will cost render performance | number \| `responsive` | - | 3.0 |
| maxTagPlaceholder | Placeholder for not showing tags | v-slot \| function(omittedValues) | - | 3.0 |
| multiple | Support multiple or not | boolean | - | 3.0 |
| notFoundContent | Specify content to show when no result matches. | string \| slot | 'Not Found' | |
| options | data options of cascade | [Option](#option)[] | - | |
| open | set visible of cascader popup | boolean | - | 3.0 |
| options | data options of cascade | [Option](#option)\[] | - | |
| placeholder | input placeholder | string | 'Please select' | |
| placement | use preset popup align config from builtinPlacements：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | 3.0 |
| searchValue | Set search value，Need work with `showSearch` | string | - | 3.0 |
| showSearch | Whether show search input in single mode. | boolean \| [object](#showsearch) | false | |
| size | input size, one of `large` `default` `small` | string | `default` | |
| suffixIcon | The custom suffix icon | string \| VNode \| slot | - | |
| value(v-model) | selected value | string\[] \| number\[] | - | |
| expandIcon | Customize the current item expand icon | slot | - | 3.0 |
| maxTagCount | Max tag count to show. `responsive` will cost render performance | number \| `responsive` | - | 3.0 |
| maxTagPlaceholder | Placeholder for not showing tags | v-slot \| function(omittedValues) | - | 3.0 |
| dropdownClassName | additional className of popup overlay | string | - | 3.0 |
| dropdownStyle | additional style of popup overlay | CSSProperties | {} | 3.0 |
| open | set visible of cascader popup | boolean | - | 3.0 |
| placement | use preset popup align config from builtinPlacements：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | 3.0 |
| tagRender | Customize tag render when `multiple` | slot | - | 3.0 |
| multiple | Support multiple or not | boolean | - | 3.0 |
| searchValue | Set search value，Need work with `showSearch` | string | - | 3.0 |
| value(v-model) | selected value | string\[] \| number\[] | - | |
### showSearch
@ -62,7 +62,7 @@ Fields in `showSearch`:
### events
| Events Name | Description | Arguments | version |
| Events Name | Description | Arguments | version | |
| --- | --- | --- | --- | --- |
| change | callback when finishing cascader select | `(value, selectedOptions) => void` | - | |
| dropdownVisibleChange | callback when popup shown or hidden | `(value) => void` | - | 3.0 |

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

@ -28,27 +28,27 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
| defaultValue | 默认的选中项 | string\[] \| number\[] | \[] | |
| disabled | 禁用 | boolean | false | |
| displayRender | 选择后展示的渲染函数,可使用 #displayRender="{labels, selectedOptions}" | `({labels, selectedOptions}) => VNode` | `labels => labels.join(' / ')` | |
| dropdownClassName | 自定义浮层类名 | string | - | 3.0 |
| dropdownStyle | 自定义浮层样式 | CSSProperties | {} | 3.0 |
| expandIcon | 自定义次级菜单展开图标 | slot | - | 3.0 |
| expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | 'click' | |
| fieldNames | 自定义 options 中 label name children 的字段 | object | `{ label: 'label', value: 'value', children: 'children' }` | |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | Function(triggerNode) | () => document.body | |
| loadData | 用于动态加载选项，无法与 `showSearch` 一起使用 | `(selectedOptions) => void` | - | |
| maxTagCount | 最多显示多少个 tag，响应式模式会对性能产生损耗 | number \| `responsive` | - | 3.0 |
| maxTagPlaceholder | 隐藏 tag 时显示的内容 | v-slot \| function(omittedValues) | - | 3.0 |
| multiple | 支持多选节点 | boolean | - | 3.0 |
| notFoundContent | 当下拉列表为空时显示的内容 | string \| slot | 'Not Found' | |
| options | 可选项数据源 | [Option](#option)[] | - | |
| open | 控制浮层显隐 | boolean | - | 3.0 |
| options | 可选项数据源 | [Option](#option)\[] | - | |
| placeholder | 输入框占位文本 | string | '请选择' | |
| placement | 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | 3.0 |
| searchValue | 设置搜索的值，需要与 `showSearch` 配合使用 | string | - | 3.0 |
| showSearch | 在选择框中显示搜索框 | boolean \| [object](#showsearch) | false | |
| size | 输入框大小，可选 `large` `default` `small` | string | `default` | |
| suffixIcon | 自定义的选择框后缀图标 | string \| VNode \| slot | - | |
| value(v-model) | 指定选中项 | string\[] \| number\[] | - | |
| expandIcon | 自定义次级菜单展开图标 | slot | - | 3.0 |
| maxTagCount | 最多显示多少个 tag，响应式模式会对性能产生损耗 | number \| `responsive` | - | 3.0 |
| maxTagPlaceholder | 隐藏 tag 时显示的内容 | v-slot \| function(omittedValues) | - | 3.0 |
| dropdownClassName | 自定义浮层类名 | string | - | 3.0 |
| dropdownStyle | 自定义浮层样式 | CSSProperties | {} | 3.0 |
| open | 控制浮层显隐 | boolean | - | 3.0 |
| placement | 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | 3.0 |
| tagRender | 自定义 tag 内容，多选时生效 | (props) => ReactNode | - | 3.0 |
| multiple | 支持多选节点 | boolean | - | 3.0 |
| searchValue | 设置搜索的值，需要与 `showSearch` 配合使用 | string | - | 3.0 |
| value(v-model) | 指定选中项 | string\[] \| number\[] | - | |
### showSearch
@ -64,7 +64,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
### 事件
| 事件名称 | 说明 | 回调参数 | 版本 |
| 事件名称 | 说明 | 回调参数 | 版本 | |
| --------------------- | ---------------------- | ---------------------------------- | ---- | --- |
| change | 选择完成后的回调 | `(value, selectedOptions) => void` | - | |
| dropdownVisibleChange | 显示/隐藏浮层的回调 | `(value) => void` | - | 3.0 |

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

@ -29,7 +29,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8nbVbHEm_/CheckBox.svg
#### 事件
| 事件名称 | 说明 | 回调参数 | 版本 |
| 事件名称 | 说明 | 回调参数 | 版本 | |
| -------- | -------------- | ----------------- | ---- | --- |
| change | 变化时回调函数 | Function(e:Event) | - | |
@ -44,7 +44,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8nbVbHEm_/CheckBox.svg
#### 事件
| 事件名称 | 说明 | 回调参数 | 版本 |
| 事件名称 | 说明 | 回调参数 | 版本 | |
| -------- | -------------- | ---------------------- | ---- | --- |
| change | 变化时回调函数 | Function(checkedValue) | - | |

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

@ -18,13 +18,13 @@ A content area which can be collapsed and expanded.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| accordion | If `true`, `Collapse` renders as `Accordion` | boolean | `false` | |
| activeKey(v-model) | Key of the active panel | string\[]\|string | 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` | |
| collapsible | Specify whether the panels of children be collapsible or the trigger area of collapsible | `header` \| `disabled` | - | 3.0 |
| accordion | If `true`, `Collapse` renders as `Accordion` | boolean | `false` | |
| expandIcon | allow to customize collapse icon | Function(props):VNode \| v-slot:expandIcon="props" | |
| expandIconPosition | Set expand icon position: `left`, `right` | `left` | - | 1.5.0 |
| destroyInactivePanel | Destroy Inactive Panel | boolean | `false` | |
| expandIcon | allow to customize collapse icon | Function(props):VNode \| v-slot:expandIcon="props" | | |
| expandIconPosition | Set expand icon position: `left`, `right` | `left` | - | 1.5.0 |
| ghost | Make the collapse borderless and its background transparent | boolean | false | 3.0 |
### events
@ -39,8 +39,8 @@ A content area which can be collapsed and expanded.
| --- | --- | --- | --- | --- |
| collapsible | Specify whether the panel be collapsible or the trigger area of collapsible | `header` \| `disabled` | - | 3.0 |
| disabled | If `true`, panel cannot be opened or closed | boolean | `false` | |
| extra | extra element in the corner | VNode \| slot | - | 1.5.0 |
| forceRender | Forced render of content on panel, instead of lazy rending after clicking on header | boolean | `false` | |
| header | Title of the panel | string \| slot | - | |
| key | Unique key identifying the panel from among its siblings | string \| number | - | |
| showArrow | If `false`, panel will not show arrow icon | boolean | `true` | |
| extra | extra element in the corner | VNode \| slot | - | 1.5.0 |

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

@ -19,14 +19,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| accordion | 手风琴模式 | boolean | `false` | |
| activeKey(v-model) | 当前激活 tab 面板的 key | string\[]\|string | 默认无，accordion 模式下默认第一个元素 | |
| bordered | 带边框风格的折叠面板 | boolean | `true` | |
| collapsible | 所有子面板是否可折叠或指定可折叠触发区域 | `header` \| `disabled` | - | 3.0 |
| accordion | 手风琴模式 | boolean | `false` | |
| expandIcon | 自定义切换图标 | Function(props):VNode \| slot="expandIcon" slot-scope="props"\|#expandIcon="props" | |
| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | `false` | |
| expandIcon | 自定义切换图标 | Function(props):VNode \| slot="expandIcon" slot-scope="props"\|#expandIcon="props" | | |
| expandIconPosition | 设置图标位置： `left`, `right` | `left` | - | 1.5.0 |
| ghost | 使折叠面板透明且无边框 | boolean | false | 3.0 |
| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | `false` | |
### 事件
@ -39,8 +39,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----------- | ------------------------------ | ---------------------- | ------ | ----- |
| collapsible | 是否可折叠或指定可折叠触发区域 | `header` \| `disabled` | - | 3.0 |
| extra | 自定义渲染每个面板右上角的内容 | VNode \| slot | - | 1.5.0 |
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
| header | 面板头内容 | string\|slot | 无 | |
| key | 对应 activeKey | string \| number | 无 | |
| showArrow | 是否展示当前面板上的箭头 | boolean | `true` | |
| extra | 自定义渲染每个面板右上角的内容 | VNode \| slot | - | 1.5.0 |

24
components/color-picker/index.en-US.md
View File

@ -2,26 +2,26 @@
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| defaultValue | default color | string | - |
| config | pickr config | [pickr options](https://github.com/Simonwep/pickr) | - |
| value | color value | string | - |
| locale | locale package | [default setting](https://github.com/vueComponent/ant-design-vue/blob/next/components/color-picker/locale) | - |
| colorRounded | precision of color | number | 0 |
| size | size of pickr | 'large'\|'small'\|'default' | 'default' |
| getPopupContainer | to set the container of the floating layer, while the default is to create a div element in body | Function(triggerNode) | () => document.body |
| config | pickr config | [pickr options](https://github.com/Simonwep/pickr) | - |
| defaultValue | default color | string | - |
| disabled | whether disabled picker | boolean | false |
| format | Color format | 'HEXA' \|'RGBA' \|'HSVA' \|'HSLA' \|'CMYK' | 'HEXA' |
| getPopupContainer | to set the container of the floating layer, while the default is to create a div element in body | Function(triggerNode) | () => document.body |
| locale | locale package | [default setting](https://github.com/vueComponent/ant-design-vue/blob/next/components/color-picker/locale) | - |
| size | size of pickr | 'large'\|'small'\|'default' | 'default' |
| value | color value | string | - |
### Event
| Event | Description | Arguments |
| --- | --- | --- |
| `init` | Initialization done - pickr can be used | `PickrInstance` |
| `hide` | Pickr got closed | `PickrInstance` |
| `show` | Pickr got opened | `PickrInstance` |
| `save` | User clicked the save / clear button. Also fired on clear with `null` as color. | `HSVaColorObject or null, PickrInstance` |
| `clear` | User cleared the color. | `PickrInstance` |
| `cancel` | User clicked the cancel button (return to previous color). | `PickrInstance` |
| `change` | Color has changed (but not saved). Also fired on `swatchselect` | `HSVaColorObject, PickrInstance` |
| `changestop` | User stopped to change the color | `PickrInstance` |
| `cancel` | User clicked the cancel button (return to previous color). | `PickrInstance` |
| `clear` | User cleared the color. | `PickrInstance` |
| `hide` | Pickr got closed | `PickrInstance` |
| `init` | Initialization done - pickr can be used | `PickrInstance` |
| `save` | User clicked the save / clear button. Also fired on clear with `null` as color. | `HSVaColorObject or null, PickrInstance` |
| `show` | Pickr got opened | `PickrInstance` |
| `swatchselect` | User clicked one of the swatches | `HSVaColorObject, PickrInstance` |

24
components/color-picker/index.zh-CN.md
View File

@ -2,26 +2,26 @@
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| defaultValue | 默认颜色 | string | - |
| config | pickr 配置项 | [pickr options](https://github.com/Simonwep/pickr) | - |
| value | 颜色值 | string | - |
| locale | 语言包 | [默认配置](https://github.com/vueComponent/ant-design-vue/blob/next/components/color-picker/locale) | - |
| colorRounded | 颜色数值精度 | number | 0 |
| size | 取色器尺寸 | 'large'\|'small'\|'default' | 'default' |
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | Function(triggerNode) | () => document.body |
| config | pickr 配置项 | [pickr options](https://github.com/Simonwep/pickr) | - |
| defaultValue | 默认颜色 | string | - |
| disabled | 是否禁用 | boolean | false |
| format | 定义返回的颜色格式 | 'HEXA' \|'RGBA' \|'HSVA' \|'HSLA' \|'CMYK' | 'HEXA' |
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | Function(triggerNode) | () => document.body |
| locale | 语言包 | [默认配置](https://github.com/vueComponent/ant-design-vue/blob/next/components/color-picker/locale) | - |
| size | 取色器尺寸 | 'large'\|'small'\|'default' | 'default' |
| value | 颜色值 | string | - |
### 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| `init` | 初始化完成,可以使用 pickr | `PickrInstance` |
| `hide` | Pickr 关闭时 | `PickrInstance` |
| `show` | Pickr 开启时 | `PickrInstance` |
| `save` | 用户点击保存/清空按钮时 | `HSVaColorObject or null, PickrInstance` |
| `clear` | 清空颜色时 | `PickrInstance` |
| `cancel` | 用户点击取消时(颜色返回至上个颜色) | `PickrInstance` |
| `change` | 颜色值发生变更时(非保存).`swatchselect`也会触发 | `HSVaColorObject, PickrInstance` |
| `changestop` | 用户不再改变颜色时 | `PickrInstance` |
| `cancel` | 用户点击取消时(颜色返回至上个颜色) | `PickrInstance` |
| `clear` | 清空颜色时 | `PickrInstance` |
| `hide` | Pickr 关闭时 | `PickrInstance` |
| `init` | 初始化完成,可以使用 pickr | `PickrInstance` |
| `save` | 用户点击保存/清空按钮时 | `HSVaColorObject or null, PickrInstance` |
| `show` | Pickr 开启时 | `PickrInstance` |
| `swatchselect` | 用户切换了色板 | `HSVaColorObject, PickrInstance` |

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

@ -53,15 +53,15 @@ Some components use dynamic style to support wave effect. You can config `csp` p
| direction | Set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | 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 | - | 3.0 |
| form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validateMessages), requiredMark?: boolean \| `optional` } | - | 3.0 |
| renderEmpty | set empty content of components. Ref [Empty](/components/empty/) | slot-scope \| 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, dialogContext) | `() => document.body` | |
| getTargetContainer | Config Affix, Anchor scroll target container | () => HTMLElement | () => window | 3.0 |
| input | Set Input common props | { autocomplete?: string } | - | 3.0 |
| locale | language package setting, you can find the packages in [ant-design-vue/es/locale](http://unpkg.com/ant-design-vue/es/locale/) | object | - | 1.5.0 |
| pageHeader | Unify the ghost of pageHeader ,Ref [pageHeader]\(&lt;(/components/page-header)> | { ghost:boolean } | 'true' | 1.5.0 |
| prefixCls | set prefix class | string | ant | |
| pageHeader | Unify the ghost of pageHeader ,Ref [pageHeader](<(/components/page-header)> | { ghost:boolean } | 'true' | 1.5.0 |
| transformCellText | Table data can be changed again before rendering. The default configuration of general user empty data. | Function({ text, column, record, index }) => any | - | 1.5.4 ｜ |
| renderEmpty | set empty content of components. Ref [Empty](/components/empty/) | slot-scope \| Function(componentName: string): ReactNode | - | |
| space | Set Space `size`, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 3.0 |
| transformCellText | Table data can be changed again before rendering. The default configuration of general user empty data. | Function({ text, column, record, index }) => any | - | 1.5.4 ｜ |
| virtual | Disable virtual scroll when set to false | boolean | true | 3.0 |
### ConfigProvider.config() `3.0.0+`

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

@ -54,15 +54,15 @@ ConfigProvider 使用 Vue 的 [provide / inject](https://vuejs.org/v2/api/#provi
| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | 3.0 |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动 | boolean \| number | - | |
| form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form/#validateMessages), requiredMark?: boolean \| `optional`, colon?: boolean} | - | 3.0 |
| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | slot \| Function(componentName: string): VNode | - | |
| getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | Function(triggerNode, dialogContext) | () => document.body | |
| getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 3.0 |
| input | 设置 Input 组件的通用属性 | { autocomplete?: string } | - | 3.0 |
| locale | 语言包配置，语言包可到 [ant-design-vue/es/locale](http://unpkg.com/ant-design-vue/es/locale/) 目录下寻找 | object | - | 1.5.0 |
| pageHeader | 统一设置 pageHeader 的 ghost，参考 [pageHeader](<(/components/page-header)>) | { ghost: boolean } | 'true' | 1.5.0 |
| prefixCls | 设置统一样式前缀。注意：需要配合 `less` 变量 `@ant-prefix` 使用 | string | `ant` | |
| transformCellText | Table 数据渲染前可以再次改变，一般用户空数据的默认配置 | Function({ text, column, record, index }) => any | - | 1.5.4 ｜ |
| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | slot \| Function(componentName: string): VNode | - | |
| space | 设置 Space 的 `size`，参考 [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 3.0 |
| transformCellText | Table 数据渲染前可以再次改变，一般用户空数据的默认配置 | Function({ text, column, record, index }) => any | - | 1.5.4 ｜ |
| virtual | 设置 `false` 时关闭虚拟滚动 | boolean | - | 3.0 |
### ConfigProvider.config() `3.0.0+`

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

@ -88,17 +88,17 @@ The following APIs are shared by DatePicker, RangePicker.
| 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/vueComponent/ant-design-vue/blob/next/components/date-picker/locale/example.json) | |
| mode | The picker panel mode | `time` \| `date` \| `month` \| `year` \| `decade` | - | |
| nextIcon | The custom next icon | slot | - | 3.0 |
| open | The open state of picker | boolean | - | |
| picker | Set picker type | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter` |
| placeholder | The placeholder of date input | string \| \[string,string] | - | |
| popupStyle | To customize the style of the popup calendar | CSSProperties | {} | |
| prevIcon | The custom prev icon | slot | - | 3.0 |
| size | To 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` | - | |
| suffixIcon | The custom suffix icon | v-slot:suffixIcon | - | |
| valueFormat | optional, format of binding value. If not specified, the binding value will be a Date object | string，[date formats](https://day.js.org/docs/en/display/format) | - | |
| nextIcon | The custom next icon | slot | - | 3.0 |
| prevIcon | The custom prev icon | slot | - | 3.0 |
| superNextIcon | The custom super next icon | slot | - | 3.0 |
| superPrevIcon | The custom super prev icon | slot | - | 3.0 |
| valueFormat | optional, format of binding value. If not specified, the binding value will be a Date object | string，[date formats](https://day.js.org/docs/en/display/format) | - | |
### Common Events
@ -179,11 +179,11 @@ The following APIs are shared by DatePicker, RangePicker.
### RangePicker Events
| Events Name | Description | Arguments | Version |
| Events Name | Description | Arguments | Version | |
| --- | --- | --- | --- | --- |
| calendarChange | Callback function, can be executed when the start time or the end time of the range is changing. | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - | |
| change | a callback function, can be executed when the selected time is changing | function(dates: \[dayjs, dayjs\] \| \[string, string\], dateStrings: \[string, string\]) | |
| ok | callback when click ok button | function(dates: \[dayjs, dayjs\] \| \[string, string\]) | |
| change | a callback function, can be executed when the selected time is changing | function(dates: \[dayjs, dayjs] \| \[string, string], dateStrings: \[string, string]) | | |
| ok | callback when click ok button | function(dates: \[dayjs, dayjs] \| \[string, string]) | | |
## FAQ

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

@ -89,23 +89,23 @@ cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg
| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false | |
| locale | 国际化配置 | object | [默认配置](https://github.com/vueComponent/ant-design-vue/blob/next/components/date-picker/locale/example.json) | - |
| mode | 日期面板的状态 | `time` \| `date` \| `month` \| `year` \| `decade` | - | |
| nextIcon | 自定义下一个图标 | slot | - | 3.0 |
| open | 控制弹层是否展开 | boolean | - | |
| picker | 设置选择器类型 | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter` |
| placeholder | 输入框提示文字 | string \| \[string, string] | - | |
| popupStyle | 额外的弹出日历样式 | CSSProperties | {} | |
| prevIcon | 自定义上一个图标 | slot | - | 3.0 |
| size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | - | |
| suffixIcon | 自定义的选择框后缀图标 | v-slot:suffixIcon | - | |
| valueFormat | 可选，绑定值的格式，对 value、defaultValue、defaultPickerValue 起作用。不指定则绑定值为 dayjs 对象 | string，[具体格式](https://day.js.org/docs/zh-CN/display/format) | - | |
| nextIcon | 自定义下一个图标 | slot | - | 3.0 |
| prevIcon | 自定义上一个图标 | slot | - | 3.0 |
| superNextIcon | 自定义 `<<` 切换图标 | slot | - | 3.0 |
| superPrevIcon | 自定义 `>>` 切换图标 | slot | - | 3.0 |
| valueFormat | 可选，绑定值的格式，对 value、defaultValue、defaultPickerValue 起作用。不指定则绑定值为 dayjs 对象 | string，[具体格式](https://day.js.org/docs/zh-CN/display/format) | - | |
### 共有的事件
| 事件名称 | 说明 | 回调参数 |
| 事件名称 | 说明 | 回调参数 | |
| ----------- | ------------------------ | --------------------- | --- |
| openChange | 弹出日历和关闭日历的回调 | function(status) |
| openChange | 弹出日历和关闭日历的回调 | function(status) | |
| panelChange | 日期面板变化时的回调 | function(value, mode) | - |
### 共同的方法
@ -182,9 +182,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| calendarChange | 待选日期发生变化的回调 | function(dates: \[dayjs, dayjs\] \| \[string, string\], dateStrings: \[string, string\], info: { range:`start`\|`end` }) |
| change | 日期范围发生变化的回调 | function(dates: \[dayjs, dayjs\] \| \[string, string\], dateStrings: \[string, string\]) |
| ok | 点击确定按钮的回调 | function(dates: \[dayjs, dayjs\] \| \[string, string\]) |
| calendarChange | 待选日期发生变化的回调 | function(dates: \[dayjs, dayjs] \| \[string, string], dateStrings: \[string, string], info: { range:`start`\|`end` }) |
| change | 日期范围发生变化的回调 | function(dates: \[dayjs, dayjs] \| \[string, string], dateStrings: \[string, string]) |
| ok | 点击确定按钮的回调 | function(dates: \[dayjs, dayjs] \| \[string, string]) |
## FAQ

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

@ -15,25 +15,25 @@ Commonly displayed on the details page.
### Descriptions props
| Property | Description | Type | Default | Version |
| Property | Description | Type | Default | Version | | |
| --- | --- | --- | --- | --- | --- | --- |
| bordered | whether to display the border | boolean | false | |
| 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 | string \| VNode \| slot | - | 2.0.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` | `default` | |
| title | The title of the description list, placed at the top | string \| VNode \| slot | - | |
| labelStyle | Customize label style | CSSProperties | - | 2.2.0 |
| contentStyle | Customize content style | CSSProperties | - | 2.2.0 |
| bordered | whether to display the border | boolean | false | | | |
| 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 | | | |
| contentStyle | Customize content style | CSSProperties | - | 2.2.0 | | |
| extra | The action area of the description list, placed at the top-right | string \| VNode \| slot | - | 2.0.0 | | |
| labelStyle | Customize label style | CSSProperties | - | 2.2.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\` | `default` | |
| title | The title of the description list, placed at the top | string \| VNode \| slot | - | | | |
### Item props
| Property | Description | Type | Default | Version |
| ------------ | ------------------------------ | ----------------------- | ------- | ------- |
| label | description of the content | string \| VNode \| slot | - | |
| span | The number of columns included | number | 1 | |
| labelStyle | Customize label style | CSSProperties | - | 2.2.0 |
| contentStyle | Customize content style | CSSProperties | - | 2.2.0 |
| label | description of the content | string \| VNode \| slot | - | |
| labelStyle | Customize label style | CSSProperties | - | 2.2.0 |
| span | The number of columns included | number | 1 | |
> The number of span Descriptions.Item. span={2} takes up the width of two DescriptionsItems.

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

@ -16,25 +16,25 @@ cover: https://gw.alipayobjects.com/zos/alicdn/MjtG9_FOI/Descriptions.svg
### Descriptions props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| 参数 | 说明 | 类型 | 默认值 | 版本 | | |
| --- | --- | --- | --- | --- | --- | --- |
| bordered | 是否展示边框 | boolean | false | |
| colon | 配置 `Descriptions.Item` 的 `colon` 的默认值 | boolean | true | |
| column | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number | 3 | |
| extra | 描述列表的操作区域，显示在右上方 | string \| VNode \| slot | - | 2.0.0 |
| layout | 描述布局 | `horizontal | vertical` | `horizontal` | |
| size | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效） | `default | middle | small` | `default` | |
| title | 描述列表的标题，显示在最顶部 | string \| VNode \| slot | - | |
| labelStyle | 自定义标签样式 | CSSProperties | - | 2.2.0 |
| contentStyle | 自定义内容样式 | CSSProperties | - | 2.2.0 |
| bordered | 是否展示边框 | boolean | false | | | |
| colon | 配置 `Descriptions.Item` 的 `colon` 的默认值 | boolean | true | | | |
| column | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number | 3 | | | |
| contentStyle | 自定义内容样式 | CSSProperties | - | 2.2.0 | | |
| extra | 描述列表的操作区域，显示在右上方 | string \| VNode \| slot | - | 2.0.0 | | |
| labelStyle | 自定义标签样式 | CSSProperties | - | 2.2.0 | | |
| layout | 描述布局 | \`horizontal | vertical\` | `horizontal` | | |
| size | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效） | \`default | middle | small\` | `default` | |
| title | 描述列表的标题，显示在最顶部 | string \| VNode \| slot | - | | | |
### Item props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ------------ | -------------- | ----------------------- | ------ | ----- |
| label | 内容的描述 | string \| VNode \| slot | - |
| span | 包含列的数量 | number | 1 |
| labelStyle | 自定义标签样式 | CSSProperties | - | 2.2.0 |
| contentStyle | 自定义内容样式 | CSSProperties | - | 2.2.0 |
| label | 内容的描述 | string \| VNode \| slot | - | |
| labelStyle | 自定义标签样式 | CSSProperties | - | 2.2.0 |
| span | 包含列的数量 | number | 1 | |
> span 是 Descriptions.Item 的数量。 span={2} 会占用两个 DescriptionsItem 的宽度。

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

@ -18,6 +18,6 @@ A divider line separates different content.
| --- | --- | --- | --- | --- |
| dashed | whether line is dashed | Boolean | false | |
| orientation | position of title inside divider | enum: `left` `right` `center` | `center` | |
| type | direction type of divider | enum: `horizontal` `vertical` | `horizontal` | |
| plain | Divider text show as plain style | boolean | true | 2.2.0 |
| orientationMargin | The margin-left/right between the title and its closest border, while the `orientation` must be `left` or `right` | string \| number | - | 3.0 |
| plain | Divider text show as plain style | boolean | true | 2.2.0 |
| type | direction type of divider | enum: `horizontal` `vertical` | `horizontal` | |

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

@ -19,6 +19,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5swjECahe/Divider.svg
| --- | --- | --- | --- | --- |
| dashed | 是否虚线 | Boolean | false | |
| orientation | 分割线标题的位置 | enum: `left` `right` | `center` | |
| type | 水平还是垂直类型 | enum: `horizontal` `vertical` | `horizontal` | |
| plain | 文字是否显示为普通正文样式 | boolean | false | 2.2.0 |
| orientationMargin | 标题和最近 left/right 边框之间的距离，去除了分割线，同时 `orientation` 必须为 `left` 或 `right` | string \| number | - | 3.0 |
| plain | 文字是否显示为普通正文样式 | boolean | false | 2.2.0 |
| type | 水平还是垂直类型 | enum: `horizontal` `vertical` | `horizontal` | |

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

@ -15,17 +15,17 @@ When there are more than a few options to choose from, you can wrap them in a `D
### Dropdown
| Property | Description | Type | Default |
| Property | Description | Type | Default | |
| --- | --- | --- | --- | --- |
| disabled | whether the dropdown menu is disabled | boolean | - |
| destroyPopupOnHide | Whether destroy dropdown when hidden | boolean | false | |
| getPopupContainer | to set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | `() => document.body` |
| overlay(v-slot) | the dropdown menu | [Menu](/components/menu) | - |
| overlayClassName | Class name of the dropdown root element | string | - |
| overlayStyle | Style of the dropdown root element | object | - |
| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
| trigger | the trigger mode which executes the drop-down action, hover doesn't work on mobile device | Array&lt;`click`\|`hover`\|`contextmenu`> | `['hover']` |
| visible(v-model) | whether the dropdown menu is visible | boolean | - |
| disabled | whether the dropdown menu is disabled | boolean | - | |
| getPopupContainer | to set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | `() => document.body` | |
| overlay(v-slot) | the dropdown menu | [Menu](/components/menu) | - | |
| overlayClassName | Class name of the dropdown root element | string | - | |
| overlayStyle | Style of the dropdown root element | object | - | |
| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | |
| trigger | the trigger mode which executes the drop-down action, hover doesn't work on mobile device | Array&lt;`click`\|`hover`\|`contextmenu`> | `['hover']` | |
| visible(v-model) | whether the dropdown menu is visible | boolean | - | |
### events
@ -44,8 +44,8 @@ You should use [Menu](/components/menu/) as `overlay`. The menu items and divide
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| disabled | whether the dropdown menu is disabled | boolean | - | |
| loading | Set the loading status of button | boolean \| { delay: number } | false | 3.0 |
| icon | Icon (appears on the right) | vNode \| slot | - | 1.5.0 |
| loading | Set the loading status of button | boolean \| { delay: number } | false | 3.0 |
| overlay(v-slot) | the dropdown menu | [Menu](/components/menu) | - | |
| placement | placement of pop menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | |
| size | size of the button, the same as [Button](/components/button) | string | `default` | |

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

@ -19,17 +19,17 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
属性如下
| 参数 | 说明 | 类型 | 默认值 |
| 参数 | 说明 | 类型 | 默认值 | |
| --- | --- | --- | --- | --- |
| disabled | 菜单是否禁用 | boolean | - |
| destroyPopupOnHide | 关闭后是否销毁 Dropdown | boolean | false | 3.0 |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | Function(triggerNode) | `() => document.body` |
| overlay(v-slot) | 菜单 | [Menu](/components/menu-cn) | - |
| overlayClassName | 下拉根元素的类名称 | string | - |
| overlayStyle | 下拉根元素的样式 | object | - |
| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` |
| trigger | 触发下拉的行为, 移动端不支持 hover | Array&lt;`click`\|`hover`\|`contextmenu`> | `['hover']` |
| visible(v-model) | 菜单是否显示 | boolean | - |
| disabled | 菜单是否禁用 | boolean | - | |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | Function(triggerNode) | `() => document.body` | |
| overlay(v-slot) | 菜单 | [Menu](/components/menu-cn) | - | |
| overlayClassName | 下拉根元素的类名称 | string | - | |
| overlayStyle | 下拉根元素的样式 | object | - | |
| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | |
| trigger | 触发下拉的行为, 移动端不支持 hover | Array&lt;`click`\|`hover`\|`contextmenu`> | `['hover']` | |
| visible(v-model) | 菜单是否显示 | boolean | - | |
`overlay` 菜单使用 [Menu](/components/menu-cn/)，还包括菜单项 `Menu.Item`，分割线 `Menu.Divider`。
@ -48,8 +48,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| disabled | 菜单是否禁用 | boolean | - | |
| loading | 设置按钮载入状态 | boolean \| { delay: number } | false | 3.0 |
| icon | 右侧的 icon | VNode \| slot | - | 1.5.0 |
| loading | 设置按钮载入状态 | boolean \| { delay: number } | false | 3.0 |
| overlay(v-slot) | 菜单 | [Menu](/components/menu-cn/) | - | |
| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | String | `bottomLeft` | |
| size | 按钮大小，和 [Button](/components/button-cn/) 一致 | string | 'default' | |

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

@ -23,8 +23,8 @@ Empty state placeholder.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| description | Customize description | string \| v-slot | - | |
| imageStyle | style of image | CSSProperties | - | |
| image | Customize image. Will tread as image url when string provided | string \| v-slot | false | |
| imageStyle | style of image | CSSProperties | - | |
## Built-in images

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

@ -24,8 +24,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/MNbKfLBVb/Empty.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| ----------- | -------------------------------------------- | ---------------- | ------ | ---- |
| description | 自定义描述内容 | string \| v-slot | - | |
| imageStyle | 图片样式 | CSSProperties | - | |
| image | 设置显示图片，为 string 时表示自定义图片地址 | string \| v-slot | false | |
| imageStyle | 图片样式 | CSSProperties | - | |
## 内置图片

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

@ -31,46 +31,44 @@ A form consists of one or more form fields whose type includes input, textarea,
| Property | Description | Type | Default Value | Version |
| --- | --- | --- | --- | --- |
| model | data of form component | object | | |
| rules | validation rules of form | object | | |
| hideRequiredMark | Hide required mark of all form items | Boolean | false | |
| layout | Define form layout | 'horizontal'\|'vertical'\|'inline' | 'horizontal' | |
| labelAlign | text align of label of all items | 'left' \| 'right' | 'right' | |
| labelWrap | whether label can be wrap | boolean | false | 3.0 |
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](/components/grid/#Col) | | |
| wrapperCol | The layout for input controls, same as `labelCol` | [object](/components/grid/#Col) | | |
| colon | change default props colon value of Form.Item (only effective when prop layout is horizontal) | boolean | true | |
| validateOnRuleChange | whether to trigger validation when the `rules` prop is changed | boolean | true | |
| hideRequiredMark | Hide required mark of all form items | Boolean | false | |
| labelAlign | text align of label of all items | '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 `<Col>` | [object](/components/grid/#Col) | | |
| labelWrap | whether label can be wrap | boolean | false | 3.0 |
| layout | Define form layout | 'horizontal'\|'vertical'\|'inline' | 'horizontal' | |
| model | data of form component | object | | |
| name | Form name. Will be the prefix of Field `id` | string | - | 2.0.0 |
| scrollToFirstError | Auto scroll to first failed field when submit | boolean \| [options](https://github.com/stipsan/scroll-into-view-if-needed/#options) | false | 2.0.0 |
| validateTrigger | Config field validate trigger | string \| string[] | `change` | 2.0.0 |
| noStyle | No style for `true`, used as a pure field control | boolean | false | 3.0 |
| rules | validation rules of form | object | | |
| scrollToFirstError | Auto scroll to first failed field when submit | boolean \| [options](https://github.com/stipsan/scroll-into-view-if-needed/#options) | false | 2.0.0 |
| validateOnRuleChange | whether to trigger validation when the `rules` prop is changed | boolean | true | |
| validateTrigger | Config field validate trigger | string \| string\[] | `change` | 2.0.0 |
| wrapperCol | The layout for input controls, same as `labelCol` | [object](/components/grid/#Col) | | |
### Events
| Events Name | Description | Arguments | Version |
| Events Name | Description | Arguments | Version | |
| --- | --- | --- | --- | --- |
| submit | Defines a function will be called if form data validation is successful. | Function(e:Event) | |
| validate | triggers after a form item is validated | Function(name, status, errorMsgs) | | |
| finish | Trigger after submitting the form and verifying data successfully | function(values) | - | 2.0.0 |
| finishFailed | Trigger after submitting the form and verifying data failed | function({ values, errorFields, outOfDate }) | - | 2.0.0 |
| submit | Defines a function will be called if form data validation is successful. | Function(e:Event) | | |
| validate | triggers after a form item is validated | Function(name, status, errorMsgs) | | |
### Methods
| Method | Description | Parameters |
| Method | Description | Parameters | |
| --- | --- | --- | --- |
| validate | Validate fields, it is same as validateFields | (nameList?: [NamePath](#NamePath)[]) => Promise | |
| validateFields | Validate fields | (nameList?: [NamePath](#NamePath)[]) => Promise | |
| scrollToField | Scroll to field position | (name: [NamePath](#NamePath), options: [[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void | |
| resetFields | reset all the fields and remove validation result | — |
| clearValidate | clear validation message for certain fields. The parameter is name or an array of names of the form items whose validation messages will be removed. When omitted, all fields' validation messages will be cleared | Function(props: string \| array) |
| clearValidate | clear validation message for certain fields. The parameter is name or an array of names of the form items whose validation messages will be removed. When omitted, all fields' validation messages will be cleared | Function(props: string \| array) | |
| resetFields | reset all the fields and remove validation result | — | |
| scrollToField | Scroll to field position | (name: [NamePath](#NamePath), options: \[[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void | |
| validate | Validate fields, it is same as validateFields | (nameList?: [NamePath](#NamePath)\[]) => Promise | |
| validateFields | Validate fields | (nameList?: [NamePath](#NamePath)\[]) => Promise | |
### Form.Item
| Property | Description | Type | Default Value | Version |
| --- | --- | --- | --- | --- |
| name | a key of `model`. In the use of validate and resetFields method, the attribute is required | string | | 2.0.0 |
| rules | validation rules of form | object \| array | | |
| autoLink | Whether to automatically associate form fields. In most cases, you can use automatic association. If the conditions for automatic association are not met, you can manually associate them. See the notes below. | boolean | true | |
| colon | Used with `label`, whether to display `:` after label text. | boolean | true | |
| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time. | string\|slot | | |
@ -78,13 +76,15 @@ A form consists of one or more form fields whose type includes input, textarea,
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|slot | | |
| htmlFor | Set sub label `htmlFor`. | string | | |
| label | Label text | string\|slot | | |
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](/components/grid/#Col) | | |
| labelAlign | 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 `<Col>` | [object](/components/grid/#Col) | | |
| name | a key of `model`. In the use of validate and resetFields method, the attribute is required | string | | 2.0.0 |
| required | Whether provided or not, it will be generated by the validation rule. | boolean | false | |
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | | |
| wrapperCol | The layout for input controls, same as `labelCol` | [object](/components/grid/#Col) | | |
| rules | validation rules of form | object \| array | | |
| validateFirst | Whether stop validate on first rule of error for this field. | boolean | false | |
| validateTrigger | When to validate the value of children node | string \| string[] | `change` | |
| 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\[] | `change` | |
| wrapperCol | The layout for input controls, same as `labelCol` | [object](/components/grid/#Col) | | |
### Note
@ -107,7 +107,7 @@ But it also has some disadvantages:
</a-form-item>
```
As above Form.Item does not know whether to collect `name="a"` or `name=`b``, you can solve this kind of problem in the following two ways:
As above Form.Item does not know whether to collect `name="a"` or `name=`b\`\`, you can solve this kind of problem in the following two ways:
The first is to use multiple `a-form-item`:
@ -175,7 +175,6 @@ If the form field to be monitored does not meet the conditions of automatic moni
| Property | Description | Type | Default Value |
| --- | --- | --- | --- |
| trigger | When to validate the value of children node. | 'blur' \| 'change' \| `['change', 'blur']` | - |
| enum | validate a value from a list of possible values | string | - |
| len | validate an exact length of a field | number | - |
| max | validate a max length of a field | number | - |
@ -184,6 +183,7 @@ If the form field to be monitored does not meet the conditions of automatic moni
| pattern | validate from a regular expression | RegExp | - |
| required | indicates whether field is required | boolean | `false` |
| transform | transform a value before validation | function(value) => transformedValue:any | - |
| trigger | When to validate the value of children node. | 'blur' \| 'change' \| `['change', 'blur']` | - |
| type | built-in validation type, [available options](https://github.com/yiminghe/async-validator#type) | string | 'string' |
| validator | custom validate function (Note: [callback must be called](https://github.com/ant-design/ant-design/issues/5155)) | function(rule, value, callback) | - |
| whitespace | treat required fields that only contain whitespace as errors | boolean | `false` |

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

@ -32,46 +32,44 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| model | 表单数据对象 | object | | |
| rules | 表单验证规则 | object | | |
| colon | 配置 Form.Item 的 colon 的默认值 (只有在属性 layout 为 horizontal 时有效) | boolean | true | |
| hideRequiredMark | 隐藏所有表单项的必选标记 | Boolean | false | |
| labelAlign | label 标签的文本对齐方式 | 'left' \| 'right' | 'right' | |
| labelWrap | label 标签的文本换行方式 | boolean | false | 3.0 |
| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/components/grid-cn/#Col) | | |
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/components/grid-cn/#Col) | | |
| labelWrap | label 标签的文本换行方式 | boolean | false | 3.0 |
| layout | 表单布局 | 'horizontal'\|'vertical'\|'inline' | 'horizontal' | |
| colon | 配置 Form.Item 的 colon 的默认值 (只有在属性 layout 为 horizontal 时有效) | boolean | true | |
| validateOnRuleChange | 是否在 rules 属性改变后立即触发一次验证 | boolean | true | |
| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean \| [options](https://github.com/stipsan/scroll-into-view-if-needed/#options) | false | 2.0.0 |
| model | 表单数据对象 | object | | |
| name | 表单名称，会作为表单字段 `id` 前缀使用 | string | - | 2.0.0 |
| validateTrigger | 统一设置字段校验规则 | string \| string[] | `change` | 2.0.0 |
| noStyle | 为 `true` 时不带样式，作为纯字段控件使用 | boolean | false | 3.0 |
| rules | 表单验证规则 | object | | |
| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean \| [options](https://github.com/stipsan/scroll-into-view-if-needed/#options) | false | 2.0.0 |
| validateOnRuleChange | 是否在 rules 属性改变后立即触发一次验证 | boolean | true | |
| validateTrigger | 统一设置字段校验规则 | string \| string\[] | `change` | 2.0.0 |
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/components/grid-cn/#Col) | | |
### 事件
| 事件名称 | 说明 | 回调参数 | 版本 |
| 事件名称 | 说明 | 回调参数 | 版本 | |
| --- | --- | --- | --- | --- |
| submit | 数据验证成功后回调事件 | Function(e:Event) | ｜ |
| validate | 任一表单项被校验后触发 | Function(name, status, errorMsgs) | |
| finish | 提交表单且数据验证成功后回调事件 | function(values) | - | 2.0.0 |
| finishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | - | 2.0.0 |
| submit | 数据验证成功后回调事件 | Function(e:Event) | ｜ | |
| validate | 任一表单项被校验后触发 | Function(name, status, errorMsgs) | | |
### 方法
| 方法名 | 说明 | 参数 |
| 方法名 | 说明 | 参数 | | |
| --- | --- | --- | --- | --- |
| validate | 触发表单验证, 同 validateFields | (nameList?: [NamePath](#NamePath)[]) => Promise |
| validateFields | 触发表单验证 | (nameList?: [NamePath](#NamePath)[]) => Promise |
| scrollToField | 滚动到对应字段位置 | (name: [NamePath](#NamePath), options: [[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void | | |
| resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | — |
| clearValidate | 移除表单项的校验结果。传入待移除的表单项的 name 属性或者 name 组成的数组，如不传则移除整个表单的校验结果 | Function(name: array \| string) |
| clearValidate | 移除表单项的校验结果。传入待移除的表单项的 name 属性或者 name 组成的数组，如不传则移除整个表单的校验结果 | Function(name: array \| string) | | |
| resetFields | 对整个表单进行重置，将所有字段值重置为初始值并移除校验结果 | — | | |
| scrollToField | 滚动到对应字段位置 | (name: [NamePath](#NamePath), options: \[[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void | | |
| validate | 触发表单验证, 同 validateFields | (nameList?: [NamePath](#NamePath)\[]) => Promise | | |
| validateFields | 触发表单验证 | (nameList?: [NamePath](#NamePath)\[]) => Promise | | |
### Form.Item
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| name | 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 | string | | |
| rules | 表单验证规则 | object \| array | | |
| autoLink | 是否自动关联表单域，对于大部分情况都可以使用自动关联，如果不满足自动关联的条件，可以手动关联，参见下方注意事项 | boolean | true | |
| colon | 配合 label 属性使用，表示是否显示 label 后面的冒号 | boolean | true | |
| extra | 额外的提示信息，和 help 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string\|slot | | |
@ -79,13 +77,15 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
| help | 提示信息，如不设置，则会根据校验规则自动生成 | string\|slot | | |
| htmlFor | 设置子元素 label `htmlFor` 属性 | string | | |
| label | label 标签的文本 | string\|slot | | |
| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/components/grid-cn/#Col) | | |
| labelAlign | 标签文本对齐方式 | 'left' \| 'right' | 'right' | |
| labelCol | label 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/components/grid-cn/#Col) | | |
| name | 表单域 model 字段，在使用 validate、resetFields 方法的情况下，该属性是必填的 | string | | |
| required | 是否必填，如不设置，则会根据校验规则自动生成 | boolean | false | |
| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | | |
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/components/grid-cn/#Col) | | |
| rules | 表单验证规则 | object \| array | | |
| validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验。 | boolean | false | 2.0.0 |
| validateTrigger | 设置字段校验的时机 | string \| string[] | `change` | 2.0.0 |
| validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | | |
| validateTrigger | 设置字段校验的时机 | string \| string\[] | `change` | 2.0.0 |
| wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/components/grid-cn/#Col) | | |
### 注意：
@ -106,7 +106,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
</a-form-item>
```
如上 Form.Item 并不知道需要收集 `name="a"` 还是 `name=`b``，你可以通过如下三种方式去解决此类问题：
如上 Form.Item 并不知道需要收集 `name="a"` 还是 `name=`b\`\`，你可以通过如下三种方式去解决此类问题：
第一种，使用多个 `a-form-item`:
@ -173,7 +173,6 @@ Form.Item 会对唯一子元素进行劫持，并监听 `blur` 和 `change` 事
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| trigger | 校验触发的时机 | 'blur' \| 'change' \| `['change', 'blur']` | - |
| enum | 枚举类型 | string | - |
| len | 字段长度 | number | - |
| max | 最大长度 | number | - |
@ -182,6 +181,7 @@ Form.Item 会对唯一子元素进行劫持，并监听 `blur` 和 `change` 事
| pattern | 正则表达式校验 | RegExp | - |
| required | 是否必选 | boolean | `false` |
| transform | 校验前转换字段值 | function(value) => transformedValue:any | - |
| trigger | 校验触发的时机 | 'blur' \| 'change' \| `['change', 'blur']` | - |
| type | 内建校验类型，[可选项](https://github.com/yiminghe/async-validator#type) | string | 'string' |
| validator | 自定义校验（注意，[callback 必须被调用](https://github.com/ant-design/ant-design/issues/5155)） | function(rule, value, callback) | - |
| whitespace | 必选时，空格是否会被视为错误 | boolean | `false` |

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

@ -50,12 +50,12 @@ Our grid systems support Flex layout to allow the elements within the parent to
| pull | the number of cells that raster is moved to the left | number | 0 |
| push | the number of cells that raster is moved to the right | number | 0 |
| span | raster number of cells to occupy, 0 corresponds to `display: none` | number | none |
| xxxl | `≥2000px`, could be a `span` value or an object containing above props | number\|object | - |
| xs | `<576px` and also default setting, could be a `span` value or an object containing above props | number\|object | - |
| sm | `≥576px`, could be a `span` value or an object containing above props | number\|object | - |
| md | `≥768px`, could be a `span` value or an object containing above props | number\|object | - |
| lg | `≥992px`, could be a `span` value or an object containing above props | number\|object | - |
| xl | `≥1200px`, could be a `span` value or an object containing above props | number\|object | - |
| xxl | `≥1600px`, could be a `span` value or an object containing above props | number\|object | - |
| xxxl | `≥2000px`, could be a `span` value or an object containing above props | number\|object | - |
The breakpoints of responsive grid follow [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)(not including `occasionally part`).

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

@ -47,12 +47,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg
| pull | 栅格向左移动格数 | number | 0 | |
| push | 栅格向右移动格数 | number | 0 | |
| span | 栅格占位格数，为 0 时相当于 `display: none` | number | - | |
| xxxl | `≥2000px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | 3.0 |
| xs | `<576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| sm | `≥576px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| md | `≥768px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| lg | `≥992px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| xl | `≥1200px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| xxl | `≥1600px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | |
| xxxl | `≥2000px` 响应式栅格，可为栅格数或一个包含其他属性的对象 | number\|object | - | 3.0 |
响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。

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

@ -17,9 +17,9 @@ npm install --save @ant-design/icons-vue
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| style | Style properties of icon, like `fontSize` and `color` | CSSProperties | - | |
| spin | Rotate icon with animation | boolean | false | |
| rotate | Rotate by n degrees (not working in IE9) | number | - | |
| spin | Rotate icon with animation | boolean | false | |
| style | Style properties of icon, like `fontSize` and `color` | CSSProperties | - | |
| twoToneColor | Only supports the two-tone icon. Specify the primary color. | string (hex color) | - | |
We still have three different themes for icons, icon component name is the icon name suffixed by the theme name.
@ -36,10 +36,10 @@ import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons-vue';
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| style | Style properties of icon, like `fontSize` and `color` | CSSProperties | - | |
| spin | Rotate icon with animation | boolean | false | |
| component | The component used for the root node. | ComponentType&lt;CustomIconComponentProps> | - | |
| rotate | Rotate degrees (not working in IE9) | number | - | |
| component | The component used for the root node. | ComponentType<CustomIconComponentProps\> | - | |
| spin | Rotate icon with animation | boolean | false | |
| style | Style properties of icon, like `fontSize` and `color` | CSSProperties | - | |
### About SVG icons
@ -112,8 +112,8 @@ The following options are available:
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. | string | - |
| extraCommonProps | Define extra properties to the component | `{ class, attrs, props, on, style }` | {} |
| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. | string | - |
The property `scriptUrl` should be set to import the SVG sprite symbols.
@ -152,8 +152,8 @@ The following properties are available for the component:
| Property | Description | Type | Default |
| -------- | ------------------------------------------------ | ---------------- | -------------- |
| width | The width of the `svg` element | string \| number | '1em' |
| height | The height of the `svg` element | string \| number | '1em' |
| fill | Define the color used to paint the `svg` element | string | 'currentColor' |
| class | The computed class name of the `svg` element | string | - |
| fill | Define the color used to paint the `svg` element | string | 'currentColor' |
| height | The height of the `svg` element | string \| number | '1em' |
| style | The computed style of the `svg` element | CSSProperties | - |
| width | The width of the `svg` element | string \| number | '1em' |

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

@ -22,9 +22,9 @@ npm install --save @ant-design/icons-vue
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - | |
| spin | 是否有旋转动画 | boolean | false | |
| rotate | 图标旋转角度（IE9 无效） | number | - | |
| spin | 是否有旋转动画 | boolean | false | |
| style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - | |
| twoToneColor | 仅适用双色图标。设置双色图标的主要颜色 | string (十六进制颜色) | - | |
其中我们提供了三种主题的图标，不同主题的 Icon 组件名为图标名加主题做为后缀。
@ -41,10 +41,10 @@ import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons-vue';
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - | |
| spin | 是否有旋转动画 | boolean | false | |
| component | 控制如何渲染图标，通常是一个渲染根标签为 `<svg>` 的 `Vue` 组件 | ComponentType&lt;CustomIconComponentProps> | - | |
| rotate | 图标旋转角度（IE9 无效） | number | - | |
| component | 控制如何渲染图标，通常是一个渲染根标签为 `<svg>` 的 `Vue` 组件 | ComponentType<CustomIconComponentProps\> | - | |
| spin | 是否有旋转动画 | boolean | false | |
| style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - | |
### SVG 图标
@ -109,8 +109,8 @@ export default defineComponent({
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址 | string | - |
| extraCommonProps | 给所有的 `svg` 图标 `<Icon />` 组件设置额外的属性 | `{ class, attrs, props, on, style }` | {} |
| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 `js` 地址 | string | - |
在 `scriptUrl` 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。
@ -149,8 +149,8 @@ export default defineComponent({
| 字段 | 说明 | 类型 | 只读值 |
| ------ | ----------------------- | ---------------- | -------------- |
| width | `svg` 元素宽度 | string \| number | '1em' |
| height | `svg` 元素高度 | string \| number | '1em' |
| fill | `svg` 元素填充的颜色 | string | 'currentColor' |
| class | 计算后的 `svg` 类名 | string | - |
| fill | `svg` 元素填充的颜色 | string | 'currentColor' |
| height | `svg` 元素高度 | string \| number | '1em' |
| style | 计算后的 `svg` 元素样式 | CSSProperties | - |
| width | `svg` 元素宽度 | string \| number | '1em' |

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

@ -13,36 +13,36 @@ When a numeric value needs to be provided.
## API
| property | description | type | default |
| property | description | type | default | |
| --- | --- | --- | --- | --- |
| autofocus | get focus when component mounted | boolean | false |
| defaultValue | initial value | number | |
| disabled | disable the input | boolean | false |
| formatter | Specifies the format of the value presented | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - | info: 3.0 |
| max | max value | number | Infinity |
| min | min value | number | -Infinity |
| parser | Specifies the value extracted from formatter | function( string): number | - |
| precision | precision of input value | number | - |
| decimalSeparator | decimal separator | string | - |
| size | height of input box | string | - |
| step | The number to which the current value is increased or decreased. It can be an integer or decimal. | number\|string | 1 |
| value(v-model) | current value | number | |
| bordered | Whether has border style | boolean | true | 3.0 |
| addonAfter | The label text displayed after (on the right side of) the input field | slot | - | 3.0 |
| addonBefore | The label text displayed before (on the left side of) the input field | slot | - | 3.0 |
| autofocus | get focus when component mounted | boolean | false | |
| bordered | Whether has border style | boolean | true | 3.0 |
| controls | Whether to show `+-` controls | boolean | true | 3.0 |
| controls | Whether to show `+-` controls | boolean | true | 3.0 |
| decimalSeparator | decimal separator | string | - | |
| defaultValue | initial value | number | | |
| disabled | disable the input | boolean | false | |
| formatter | Specifies the format of the value presented | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - | info: 3.0 |
| keyboard | If enable keyboard behavior | boolean | true | 3.0 |
| stringMode | Set value as string to support high precision decimals. Will return string value by `change` | boolean | false | 3.0 |
| controls | Whether to show `+-` controls | boolean | true | 3.0 |
| max | max value | number | Infinity | |
| min | min value | number | -Infinity | |
| parser | Specifies the value extracted from formatter | function( string): number | - | |
| precision | precision of input value | number | - | |
| prefix | The prefix icon for the Input | slot | - | 3.0 |
| size | height of input box | string | - | |
| step | The number to which the current value is increased or decreased. It can be an integer or decimal. | number\|string | 1 | |
| stringMode | Set value as string to support high precision decimals. Will return string value by `change` | boolean | false | 3.0 |
| value(v-model) | current value | number | | |
### events
| Events Name | Description | Arguments | Version |
| Events Name | Description | Arguments | Version | |
| --- | --- | --- | --- | --- |
| change | The callback triggered when the value is changed. | function(value: number \| string) | | |
| pressEnter | The callback function that is triggered when Enter key is pressed. | function(e) | | 1.5.0 |
| step | The callback function that is triggered when click up or down buttons | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | 3.0 |
| step | The callback function that is triggered when click up or down buttons | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | 3.0 | |
## Methods

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

@ -18,26 +18,26 @@ cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
| 成员 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| addonAfter | 带标签的 input，设置后置标签 | slot | - | 3.0 |
| addonBefore | 带标签的 input，设置前置标签 | slot | - | 3.0 |
| autofocus | 自动获取焦点 | boolean | false | |
| bordered | 是否有边框 | boolean | true | 3.0 |
| controls | 是否显示增减按钮 | boolean | true | 3.0 |
| controls | 是否显示增减按钮 | boolean | true | 3.0 |
| decimalSeparator | 小数点 | string | - | |
| defaultValue | 初始值 | number | | |
| disabled | 禁用 | boolean | false | |
| formatter | 指定输入框展示值的格式 | function(value: number \| string, info: { userTyping: boolean, input: string }): string | - | info: 3.0 |
| keyboard | 是否启用键盘快捷行为 | boolean | true | 3.0 |
| max | 最大值 | number | Infinity | |
| min | 最小值 | number | -Infinity | |
| parser | 指定从 formatter 里转换回数字的方式，和 formatter 搭配使用 | function( string): number | - | |
| precision | 数值精度 | number | - | |
| decimalSeparator | 小数点 | string | - | |
| prefix | 带有前缀图标的 input | slot | - | 3.0 |
| size | 输入框大小 | string | 无 | |
| step | 每次改变步数，可以为小数 | number\|string | 1 | |
| value(v-model) | 当前值 | number | | |
| bordered | 是否有边框 | boolean | true | 3.0 |
| addonAfter | 带标签的 input，设置后置标签 | slot | - | 3.0 |
| addonBefore | 带标签的 input，设置前置标签 | slot | - | 3.0 |
| controls | 是否显示增减按钮 | boolean | true | 3.0 |
| keyboard | 是否启用键盘快捷行为 | boolean | true | 3.0 |
| stringMode | 字符值模式，开启后支持高精度小数。同时 `change` 事件将返回 string 类型 | boolean | false | 3.0 |
| controls | 是否显示增减按钮 | boolean | true | 3.0 |
| prefix | 带有前缀图标的 input | slot | - | 3.0 |
| value(v-model) | 当前值 | number | | |
### 事件

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

@ -20,37 +20,37 @@ 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. | string\|slot | | |
| addonBefore | The label text displayed before (on the left side of) the input field. | string\|slot | | |
| defaultValue | The initial input content | string | | |
| allowClear | allow to remove input content with clear icon | boolean | | |
| bordered | Whether has border style | boolean | true | 4.5.0 |
| defaultValue | The initial input content | string | | |
| disabled | Whether the input is disabled. | boolean | false | |
| id | The ID for input | string | | |
| maxlength | max length | number | | 1.5.0 |
| showCount | Whether show text count | boolean | false | 3.0 |
| prefix | The prefix icon for the Input. | string\|slot | | |
| showCount | Whether show text count | boolean | false | 3.0 |
| size | The size of the input box. Note: in the context of a form, the `large` size is used. Available: `large` `default` `small` | string | `default` | |
| suffix | The suffix icon for the Input. | string\|slot | | |
| type | The type of input, see: [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)(use `<a-textarea />` instead of `type="textarea"`) | string | `text` | |
| value(v-model) | The input content value | string | | |
| allowClear | allow to remove input content with clear icon | boolean | | |
### Input Events
| Events Name | Description | Arguments |
| ----------- | ------------------------------------------------------------------ | ----------- | --- |
| change | callback when user input | function(e) | |
| pressEnter | The callback function that is triggered when Enter key is pressed. | function(e) |
| Events Name | Description | Arguments | |
| --- | --- | --- | --- |
| change | callback when user input | function(e) | |
| pressEnter | The callback function that is triggered when Enter key is pressed. | function(e) | |
> When `Input` is used in a `Form.Item` context, if the `Form.Item` has the `id` and `options` props defined then `value`, `defaultValue`, and `id` props of `Input` are automatically set.
### TextArea
| Property | Description | Type | Default | Version |
| Property | Description | Type | Default | Version | |
| --- | --- | --- | --- | --- | --- |
| autosize | Height autosize feature, can be set to `true | false`or an object`{ minRows: 2, maxRows: 6 }` | boolean\|object | false | |
| defaultValue | The initial input content | string | | |
| value(v-model) | The input content value | string | | |
| allowClear | allow to remove input content with clear icon | boolean | | 1.5.0 |
| showCount | Whether show text count | boolean | false | |
| allowClear | allow to remove input content with clear icon | boolean | | 1.5.0 | |
| autosize | Height autosize feature, can be set to \`true | false`or an object`{ minRows: 2, maxRows: 6 }\` | boolean\|object | false | |
| defaultValue | The initial input content | string | | | |
| showCount | Whether show text count | boolean | false | | |
| value(v-model) | The input content value | string | | | |
### TextArea Events
@ -68,10 +68,10 @@ The rest of the props of `TextArea` are the same as the original [textarea](http
### Input.Search Events
| Events Name | Description | Arguments | Version |
| Events Name | Description | Arguments | Version | |
| --- | --- | --- | --- | --- |
| search | The callback function that is triggered when you click on the search-icon or press Enter key. | function(value, event) | |
| loading | Search box with loading. | boolean | | |
| search | The callback function that is triggered when you click on the search-icon or press Enter key. | function(value, event) | | |
Supports all props of `Input`.

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

@ -21,37 +21,37 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg
| --- | --- | --- | --- | --- |
| addonAfter | 带标签的 input，设置后置标签 | string\|slot | | |
| addonBefore | 带标签的 input，设置前置标签 | string\|slot | | |
| allowClear | 可以点击清除图标删除内容 | boolean | | |
| bordered | 是否有边框 | boolean | true | 3.0 |
| defaultValue | 输入框默认内容 | string | | |
| disabled | 是否禁用状态，默认为 false | boolean | false | |
| id | 输入框的 id | string | | |
| maxlength | 最大长度 | number | | 1.5.0 |
| showCount | 是否展示字数 | boolean | false | 3.0 |
| prefix | 带有前缀图标的 input | string\|slot | | |
| showCount | 是否展示字数 | boolean | false | 3.0 |
| size | 控件大小。注：标准表单内的输入框大小限制为 `large`。可选 `large` `default` `small` | string | `default` | |
| suffix | 带有后缀图标的 input | string\|slot | | |
| type | 声明 input 类型，同原生 input 标签的 type 属性，见：[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#属性)(请直接使用 `<a-textarea />` 代替 `type="textarea"`)。 | string | `text` | |
| value(v-model) | 输入框内容 | string | | |
| allowClear | 可以点击清除图标删除内容 | boolean | | |
### Input 事件
| 事件名称 | 说明 | 回调参数 |
| 事件名称 | 说明 | 回调参数 | |
| ---------- | ---------------------- | ----------- | --- |
| change | 输入框内容变化时的回调 | function(e) | |
| pressEnter | 按下回车的回调 | function(e) |
| pressEnter | 按下回车的回调 | function(e) | |
> 如果 `Input` 在 `Form.Item` 内，并且 `Form.Item` 设置了 `id` 和 `options` 属性，则 `value` `defaultValue` 和 `id` 属性会被自动设置。
### TextArea
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| 参数 | 说明 | 类型 | 默认值 | 版本 | |
| --- | --- | --- | --- | --- | --- |
| autosize | 自适应内容高度，可设置为 `true | false` 或对象：`{ minRows: 2, maxRows: 6 }` | boolean\|object | false | |
| defaultValue | 输入框默认内容 | string | | |
| value(v-model) | 输入框内容 | string | | |
| allowClear | 可以点击清除图标删除内容 | boolean | | 1.5.0 |
| showCount | 是否展示字数 | boolean | false | |
| allowClear | 可以点击清除图标删除内容 | boolean | | 1.5.0 | |
| autosize | 自适应内容高度，可设置为 \`true | false` 或对象：`{ minRows: 2, maxRows: 6 }\` | boolean\|object | false | |
| defaultValue | 输入框默认内容 | string | | | |
| showCount | 是否展示字数 | boolean | false | | |
| value(v-model) | 输入框内容 | string | | | |
### TextArea 事件

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

@ -77,8 +77,8 @@ The wrapper.
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| class | container className | string | - |
| style | to customize the styles | object\|string | - |
| hasSider | whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering | boolean | - |
| style | to customize the styles | object\|string | - |
### Layout.Sider
@ -101,10 +101,10 @@ The sidebar.
### Events
| Events Name | Description | Arguments |
| Events Name | Description | Arguments | |
| --- | --- | --- | --- |
| collapse | the callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} |
| breakpoint | the callback function, executed when [breakpoints](/components/grid#api) changed | (broken) => {} | - |
| collapse | the callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | |
#### breakpoint width

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

@ -78,8 +78,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/hzEndUVEx/Layout.svg
| 参数 | 说明 | 类型 | 默认值 |
| -------- | ------------------------------------------------------------------ | ------- | ------ |
| class | 容器 class | string | - |
| style | 指定样式 | object | - |
| hasSider | 表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - |
| style | 指定样式 | object | - |
### Layout.Sider
@ -96,7 +96,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/hzEndUVEx/Layout.svg
| reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false | |
| style | 指定样式 | object\|string | - | |
| theme | 主题颜色 | string: `light` `dark` | `dark` | |
| trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string\|slot | - |
| trigger | 自定义 trigger，设置为 null 时隐藏 trigger | string\|slot | - | |
| width | 宽度 | number\|string | 200 | |
| zeroWidthTriggerStyle | 指定当 `collapsedWidth` 为 0 时出现的特殊 trigger 的样式 | object | - | 1.5.0 |
@ -104,8 +104,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/hzEndUVEx/Layout.svg
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| collapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} |
| breakpoint | 触发响应式布局[断点](/components/grid#api)时的回调 | (broken) => {} |
| collapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} |
#### breakpoint width

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

@ -15,21 +15,21 @@ A list can be used to display content related to a single subject. The content c
### List
| Property | Description | Type | Default | Version |
| Property | Description | Type | Default | Version | |
| --- | --- | --- | --- | --- | --- |
| bordered | Toggles rendering of the border around the list | boolean | false | |
| footer | List footer renderer | string\|slot | - | |
| grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | object | - | |
| header | List header renderer | string\|slot | - | |
| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - | |
| rowKey | Item's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` | |
| loading | Shows a loading indicator while the contents of the list are being fetched | boolean\|[object](https://www.antdv.com/components/spin/#API) | false | |
| loadMore | Shows a load more content | string\|slot | - | |
| locale | i18n text including empty text | object | emptyText: 'No Data' <br> | |
| pagination | Pagination [config](https://www.antdv.com/components/pagination/#API), hide it by setting it to false | boolean \| object | false | |
| split | Toggles rendering of the split under the list item | boolean | true | |
| dataSource | dataSource array for list | any[] | - | 3.20.1 |
| bordered | Toggles rendering of the border around the list | boolean | false | | |
| dataSource | dataSource array for list | any\[] | - | 3.20.1 | |
| footer | List footer renderer | string\|slot | - | | |
| grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | object | - | | |
| header | List header renderer | string\|slot | - | | |
| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - | | |
| loading | Shows a loading indicator while the contents of the list are being fetched | boolean\|[object](https://www.antdv.com/components/spin/#API) | false | | |
| loadMore | Shows a load more content | string\|slot | - | | |
| locale | i18n text including empty text | object | emptyText: 'No Data' <br> | | |
| pagination | Pagination [config](https://www.antdv.com/components/pagination/#API), hide it by setting it to false | boolean \| object | false | | |
| renderItem | Custom item renderer, #renderItem="{item, index}" | ({item, index}) => vNode | | - | |
| rowKey | Item's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` | | |
| split | Toggles rendering of the split under the list item | boolean | true | | |
### pagination
@ -48,19 +48,19 @@ More about pagination, please check [`Pagination`](https://www.antdv.com/compone
| column | column of grid | number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24] | - | |
| gutter | spacing between grid | number | 0 | |
| size | Size of list | `default` \| `middle` \| `small` | `default` | |
| xxxl | `≥2000px` column of grid | number | - | 3.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 | - | |
| xxxl | `≥2000px` column of grid | number | - | 3.0 |
### List.Item
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| actions | The actions content of list item. If `itemLayout` is `vertical`, shows the content on bottom, otherwise shows content on the far right. | Array\<vNode>\|slot | - |
| actions | The actions content of list item. If `itemLayout` is `vertical`, shows the content on bottom, otherwise shows content on the far right. | Array\\<vNode>\|slot | - |
| extra | The extra content of list item. If `itemLayout` is `vertical`, shows the content on right, otherwise shows content on the far right. | string\|slot | - |
### List.Item.Meta

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

@ -16,22 +16,22 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg
### List
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| 参数 | 说明 | 类型 | 默认值 | 版本 | |
| --- | --- | --- | --- | --- | --- |
| bordered | 是否展示边框 | boolean | false | |
| footer | 列表底部 | string\|slot | - | |
| grid | 列表栅格配置 | object | - | |
| header | 列表头部 | string\|slot | - | |
| itemLayout | 设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - | |
| loading | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位 | boolean\|[object](https://www.antdv.com/components/spin-cn/#API) | false | |
| loadMore | 加载更多 | string\|slot | - | |
| locale | 默认文案设置，目前包括空数据文案 | object | emptyText: '暂无数据' | |
| pagination | 对应的 `pagination` [配置](https://www.antdv.com/components/pagination-cn/#API), 设置 `false` 不显示 | boolean\|object | false | |
| size | list 的尺寸 | `default` \| `middle` \| `small` | `default` | |
| split | 是否展示分割线 | boolean | true | |
| dataSource | 列表数据源 | any[] | - | 1.5.0 |
| bordered | 是否展示边框 | boolean | false | | |
| dataSource | 列表数据源 | any\[] | - | 1.5.0 | |
| footer | 列表底部 | string\|slot | - | | |
| grid | 列表栅格配置 | object | - | | |
| header | 列表头部 | string\|slot | - | | |
| itemLayout | 设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - | | |
| loading | 当卡片内容还在加载中时，可以用 `loading` 展示一个占位 | boolean\|[object](https://www.antdv.com/components/spin-cn/#API) | false | | |
| loadMore | 加载更多 | string\|slot | - | | |
| locale | 默认文案设置，目前包括空数据文案 | object | emptyText: '暂无数据' | | |
| pagination | 对应的 `pagination` [配置](https://www.antdv.com/components/pagination-cn/#API), 设置 `false` 不显示 | boolean\|object | false | | |
| renderItem | 自定义`Item`函数，也可使用 #renderItem="{item, index}" | ({item, index}) => vNode | | - | |
| rowKey | 各项 key 的取值，可以是字符串或一个函数 | item => string\|number | | |
| rowKey | 各项 key 的取值，可以是字符串或一个函数 | item => string\|number | | | |
| size | list 的尺寸 | `default` \| `middle` \| `small` | `default` | | |
| split | 是否展示分割线 | boolean | true | | |
### pagination
@ -49,20 +49,20 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg
| ------ | -------------------- | ---------------------------------------- | ------ | ---- |
| column | 列数 | number oneOf [ 1, 2, 3, 4, 6, 8, 12, 24] | - | |
| gutter | 栅格间隔 | number | 0 | |
| xxxl | `≥2000px` 展示的列数 | number | - | 3.0 |
| xs | `<576px` 展示的列数 | number | - | |
| sm | `≥576px` 展示的列数 | number | - | |
| md | `≥768px` 展示的列数 | number | - | |
| lg | `≥992px` 展示的列数 | number | - | |
| xl | `≥1200px` 展示的列数 | number | - | |
| xxl | `≥1600px` 展示的列数 | number | - | |
| xxxl | `≥2000px` 展示的列数 | number | - | 3.0 |
### List.Item
| 参数 | 说明 | 类型 | 默认值 |
| 参数 | 说明 | 类型 | 默认值 | |
| --- | --- | --- | --- | --- |
| actions | 列表操作组，根据 `itemLayout` 的不同, 位置在卡片底部或者最右侧 | Array\<vNode>/ | slot | - |
| extra | 额外内容, 通常用在 `itemLayout` 为 `vertical` 的情况下, 展示右侧内容; `horizontal` 展示在列表元素最右侧 | string\|slot | - |
| actions | 列表操作组，根据 `itemLayout` 的不同, 位置在卡片底部或者最右侧 | Array\\<vNode>/ | slot | - |
| extra | 额外内容, 通常用在 `itemLayout` 为 `vertical` 的情况下, 展示右侧内容; `horizontal` 展示在列表元素最右侧 | string\|slot | - | |
### List.Item.Meta

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

@ -20,13 +20,13 @@ When you need to mention someone or something.
| autofocus | Auto get focus when component mounted | boolean | `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[] | '@' |
| 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(v-model) | Set value of mentions | string | |
| getPopupContainer | Set the mount HTML node for suggestions | () => HTMLElement | |
### Events

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

@ -21,13 +21,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/jPE-itMFM/Mentions.svg
| autofocus | 自动获得焦点 | boolean | `false` |
| defaultValue | 默认值 | string | |
| filterOption | 自定义过滤逻辑 | false \| (input: string, option: OptionProps) => boolean | |
| getPopupContainer | 指定建议框挂载的 HTML 节点 | () => HTMLElement | |
| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | 'Not Found' |
| placement | 弹出层展示位置 | `top` \| `bottom` | `bottom` |
| prefix | 设置触发关键字 | string \| string[] | '@' |
| prefix | 设置触发关键字 | string \| string\[] | '@' |
| split | 设置选中项前后分隔符 | string | ' ' |
| validateSearch | 自定义触发验证逻辑 | (text: string, props: MentionsProps) => void | |
| value(v-model) | 设置值 | string | |
| getPopupContainer | 指定建议框挂载的 HTML 节点 | () => HTMLElement | |
### 事件

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

@ -43,13 +43,13 @@ More layouts with navigation: [Layout](/components/layout).
| mode | type of the menu; `vertical`, `horizontal`, and `inline` modes are supported | `vertical` \| `horizontal` \| `inline` | `vertical` |
| multiple | Allow selection of multiple items | boolean | false |
| openKeys(v-model) | array with the keys of currently opened sub menus | string\[] | |
| overflowedIndicator | Customized icon when menu is collapsed | DOM | `<span>···</span>` |
| selectable | allow selecting menu items | boolean | true |
| selectedKeys(v-model) | array with the keys of currently selected menu items | string\[] | |
| style | style of the root node | object | |
| subMenuCloseDelay | delay time to hide submenu when mouse leave, unit: second | number | 0.1 |
| subMenuOpenDelay | delay time to show submenu when mouse enter, unit: second | number | 0 |
| theme | color theme of the menu | string: `light` `dark` | `light` |
| overflowedIndicator | Customized icon when menu is collapsed | DOM | `<span>···</span>` |
| triggerSubMenuAction | method of trigger submenu | `click` \| `hover` | `hover` |
### Menu Events
@ -73,11 +73,11 @@ More layouts with navigation: [Layout](/components/layout).
| Param | Description | Type | Default value | Version |
| -------------- | ----------------------------------- | ------------ | ------------- | ------- |
| popupClassName | Sub-menu class name | string | | 1.5.0 |
| disabled | whether sub menu is disabled or not | boolean | false | |
| key | Unique ID of the sub menu, required | string | | |
| title | title of the sub menu | string\|slot | | |
| expandIcon | Customized expandIcon | slot | arrow icon | ｜ |
| key | Unique ID of the sub menu, required | string | | |
| popupClassName | Sub-menu class name | string | | 1.5.0 |
| title | title of the sub menu | string\|slot | | |
The children of Menu.SubMenu must be `MenuItem` or `SubMenu`.

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

@ -44,12 +44,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
| mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | `vertical` \| `horizontal` \| `inline` | `vertical` |
| multiple | 是否允许多选 | boolean | false |
| openKeys(v-model) | 当前展开的 SubMenu 菜单项 key 数组 | string\[] | |
| overflowedIndicator | 自定义 Menu 折叠时的图标 | DOM | `<span>···</span>` |
| selectable | 是否允许选中 | boolean | true |
| selectedKeys(v-model) | 当前选中的菜单项 key 数组 | string\[] | |
| subMenuCloseDelay | 用户鼠标离开子菜单后关闭延时，单位：秒 | number | 0.1 |
| subMenuOpenDelay | 用户鼠标进入子菜单后开启延时，单位：秒 | number | 0 |
| theme | 主题颜色 | string: `light` `dark` | `light` |
| overflowedIndicator | 自定义 Menu 折叠时的图标 | DOM | `<span>···</span>` |
| triggerSubMenuAction | 修改 Menu 子菜单的触发方式 | `click` \| `hover` | `hover` |
### Menu 事件
@ -66,20 +66,20 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------- | ------------------------ | ----------- | ------ | ----- |
| disabled | 是否禁用 | boolean | false | |
| icon | 菜单图标 | slot | | 2.8.0 |
| key | item 的唯一标志 | string | | |
| title | 设置收缩时展示的悬浮标题 | string/slot | | |
| icon | 菜单图标 | slot | | 2.8.0 |
### Menu.SubMenu
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| -------------- | ------------------------ | ------------ | -------- | ----- |
| popupClassName | 子菜单样式 | string | | 1.5.0 |
| disabled | 是否禁用 | boolean | false | |
| key | 唯一标志, 必填 | string | | |
| title | 子菜单项值 | string\|slot | | |
| expandIcon | 自定义 Menu 展开收起图标 | slot | 箭头图标 | |
| icon | 菜单图标 | slot | | 2.8.0 |
| key | 唯一标志, 必填 | string | | |
| popupClassName | 子菜单样式 | string | | 1.5.0 |
| title | 子菜单项值 | string\|slot | | |
Menu.SubMenu 的子元素必须是 `MenuItem` 或者 `SubMenu`.

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

@ -48,15 +48,15 @@ The properties of config are as follows:
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| class | Customized CSS class | string | - |
| class | Customized CSS class | string | - | |
| content | content of the message | string\| VNode \| () => VNode | - | |
| 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 | VNode \| ()=> VNode | - | |
| key | The unique identifier of the Message | string\|number | - | |
| style | Customized inline style | CSSProperties | - | |
| onClick | Specify a function that will be called when the message is clicked | function | - | |
| onClose | Specify a function that will be called when the message is closed | function | - | |
| onClose | Specify a function that will be called when the message is closed | function | - | |
### Global static methods
@ -84,4 +84,4 @@ message.config({
| maxCount | max message show, drop oldest if exceed limit | number | - | |
| prefixCls | The prefix className of message node | string | `ant-message` | 3.0 |
| rtl | Whether to enable RTL mode | boolean | false | 3.0 |
| top | distance from top | string | `8px` |
| top | distance from top | string | `8px` | |

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

@ -54,11 +54,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/hAkKTIW0K/Message.svg
| class | 自定义 CSS class | string | - | |
| content | 提示内容 | string\| VNode \| ()=> VNode | - | |
| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭。 | number | 3 | |
| onClose | 关闭时触发的回调函数 | Function | - | |
| icon | 自定义图标 | VNode \| () => VNode | - | |
| key | 当前提示的唯一标志 | string \| number | - | |
| style | 自定义内联样式 | CSSProperties | - | |
| onClick | 点击 message 时触发的回调函数 | function | - | |
| onClose | 关闭时触发的回调函数 | Function | - | |
| onClose | 关闭时触发的回调函数 | function | - | |
### 全局方法
@ -80,11 +80,11 @@ message.config({
});
```
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| 参数 | 说明 | 类型 | 默认值 | 版本 | |
| --- | --- | --- | --- | --- | --- |
| duration | 默认自动关闭延时，单位秒 | number | 3 | |
| getContainer | 配置渲染节点的输出位置 | () => HTMLElement | () => document.body | |
| maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - | |
| prefixCls | 消息节点的 className 前缀 | string | `ant-message` | 3.0 |
| duration | 默认自动关闭延时，单位秒 | number | 3 | | |
| getContainer | 配置渲染节点的输出位置 | () => HTMLElement | () => document.body | | |
| maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - | | |
| prefixCls | 消息节点的 className 前缀 | string | `ant-message` | 3.0 | |
| rtl | 是否开启 RTL 模式 | boolean | false | | |
| top | 消息距离顶部的位置 | string | `8px` | |
| top | 消息距离顶部的位置 | string | `8px` | | |

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

@ -17,29 +17,29 @@ 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. | object | {} | |
| cancelButtonProps | The cancel button props | [ButtonProps](/components/button/#API) | - | |
| cancelText | Text of the Cancel button | string\|slot | `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 | VNode \| slot | - | |
| confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | false | |
| destroyOnClose | Whether to unmount child components on onClose | boolean | false | |
| dialogClass | className of floating layer. | string | - | |
| dialogStyle | Style of floating layer, typically used at least for adjusting the position. | object | - | |
| footer | Footer content, set as `:footer="null"` when you don't need default buttons | string\|slot | OK and Cancel buttons | |
| forceRender | Force render Modal | boolean | false | |
| getContainer | Return the mount node for Modal | (instance): HTMLElement | () => document.body | |
| mask | Whether show mask or not. | Boolean | true | |
| maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | boolean | true | |
| maskStyle | Style for modal's mask element. | object | {} | |
| okButtonProps | The ok button props | [ButtonProps](/components/button/#API) | - | |
| okText | Text of the OK button | string\|slot | `OK` | |
| okType | Button `type` of the OK button | string | `primary` | |
| okButtonProps | The ok button props | [ButtonProps](/components/button/#API) | - | |
| cancelButtonProps | The cancel button props | [ButtonProps](/components/button/#API) | - | |
| title | The modal dialog's title | string\|slot | - | |
| 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 | |
| dialogStyle | Style of floating layer, typically used at least for adjusting the position. | object | - | |
| dialogClass | className of floating layer. | string | - | |
### events
@ -66,27 +66,27 @@ The items listed above are all functions, expecting a settings object as paramet
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| appContext | The context of the pop-up window is generally used to obtain content such as global registered components, vuex, etc. | - | - | |
| autoFocusButton | Specify which button to autofocus | null\|string: `ok` `cancel` | `ok` | |
| cancelButtonProps | The cancel button props | [ButtonProps](/components/button) | - | |
| cancelText | Text of the Cancel button | string | `Cancel` | |
| centered | Centered Modal | Boolean | `false` | |
| closable | Whether a close (x) button is visible on top right of the modal dialog or not | boolean | `false` | |
| class | class of container | string | - | |
| closable | Whether a close (x) button is visible on top right of the modal dialog or not | boolean | `false` | |
| content | Content | string\|vNode \|function(h) | - | |
| icon | custom icon (`Added in 1.14.0`) | VNode \|()=>VNode | - | |
| keyboard | Whether support press esc to close | Boolean | true | |
| mask | Whether show mask or not. | Boolean | true | |
| maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | Boolean | `false` | |
| okButtonProps | The ok button props | [ButtonProps](/components/button) | - | |
| okText | Text of the OK button | string | `OK` | |
| okType | Button `type` of the OK button | string | `primary` | |
| okButtonProps | The ok button props | [ButtonProps](/components/button) | - | |
| cancelButtonProps | The cancel button props | [ButtonProps](/components/button) | - | |
| title | Title | string\|vNode \|function(h) | - | |
| width | Width of the modal dialog | string\|number | 416 | |
| wrapClassName | The class name of the container of the modal dialog | string | - | 3.0 |
| zIndex | The `z-index` of the Modal | Number | 1000 | |
| onCancel | Specify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | - | |
| onOk | Specify a function that will be called when the user clicks the OK button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | - | |
| appContext | The context of the pop-up window is generally used to obtain content such as global registered components, vuex, etc. | - | - | |
All the `Modal.method`s will return a reference, and then we can update and close the modal dialog by the reference.

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

@ -20,12 +20,15 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
| --- | --- | --- | --- | --- |
| afterClose | Modal 完全关闭后的回调 | function | 无 | |
| bodyStyle | Modal body 样式 | object | {} | |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - | |
| cancelText | 取消按钮文字 | string\| slot | 取消 | |
| centered | 垂直居中展示 Modal | Boolean | `false` | |
| closable | 是否显示右上角的关闭按钮 | boolean | true | |
| closeIcon | 自定义关闭图标 | VNode \| slot | - | |
| confirmLoading | 确定按钮 loading | boolean | 无 | |
| destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false | |
| dialogClass | 可用于设置浮层的类名 | string | - | |
| dialogStyle | 可用于设置浮层的样式，调整浮层位置等 | object | - | |
| footer | 底部内容，当不需要默认底部按钮时，可以设为 `:footer="null"` | string\|slot | 确定取消按钮 | |
| forceRender | 强制渲染 Modal | boolean | false | |
| getContainer | 指定 Modal 挂载的 HTML 节点 | (instance): HTMLElement | () => document.body | |
@ -33,17 +36,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
| mask | 是否展示遮罩 | Boolean | true | |
| maskClosable | 点击蒙层是否允许关闭 | boolean | true | |
| maskStyle | 遮罩样式 | object | {} | |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - | |
| okText | 确认按钮文字 | string\|slot | 确定 | |
| okType | 确认按钮类型 | string | primary | |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - | |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - | |
| title | 标题 | string\|slot | 无 | |
| visible(v-model) | 对话框是否可见 | boolean | 无 | |
| width | 宽度 | string\|number | 520 | |
| wrapClassName | 对话框外层容器的类名 | string | - | |
| zIndex | 设置 Modal 的 `z-index` | Number | 1000 | |
| dialogStyle | 可用于设置浮层的样式，调整浮层位置等 | object | - | |
| dialogClass | 可用于设置浮层的类名 | string | - | |
### 事件
@ -70,27 +70,27 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| appContext | 弹窗的上下文，一般用于获取全局注册组件、vuex 等内容 | - | - | |
| autoFocusButton | 指定自动获得焦点的按钮 | null\|string: `ok` `cancel` | `ok` | |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button) | - | |
| cancelText | 取消按钮文字 | string | 取消 | |
| centered | 垂直居中展示 Modal | Boolean | `false` | |
| closable | 是否显示右上角的关闭按钮 | boolean | `false` | |
| class | 容器类名 | string | - | |
| closable | 是否显示右上角的关闭按钮 | boolean | `false` | |
| content | 内容 | string \|vNode \|function(h) | 无 | |
| icon | 自定义图标（1.14.0 新增） | VNode \| ()=>VNode | - | |
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
| mask | 是否展示遮罩 | Boolean | true | |
| maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` | |
| keyboard | 是否支持键盘 esc 关闭 | boolean | true | |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button) | - | |
| okText | 确认按钮文字 | string | 确定 | |
| okType | 确认按钮类型 | string | primary | |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button) | - | |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button) | - | |
| title | 标题 | string\|vNode \|function(h) | 无 | |
| width | 宽度 | string\|number | 416 | |
| wrapClassName | 对话框外层容器的类名 | string | - | 3.0 |
| zIndex | 设置 Modal 的 `z-index` | Number | 1000 | |
| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 | |
| onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function | 无 | |
| appContext | 弹窗的上下文，一般用于获取全局注册组件、vuex 等内容 | - | - | |
以上函数调用后，会返回一个引用，可以通过该引用更新和关闭弹窗。

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

@ -33,6 +33,7 @@ The properties of config are as follows:
| bottom | Distance from the bottom of the viewport, when `placement` is `bottomRight` or `bottomLeft` (unit: pixels). | string | `24px` | |
| btn | Customized close button | VNode \| () => VNode | - | |
| class | Customized CSS class | string | - | |
| closeIcon | custom close icon | VNode \| () => VNode | - | |
| description | The content of notification box (required) | string\| VNode \| () => VNode | - | |
| 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 | |
@ -41,10 +42,9 @@ The properties of config are as follows:
| message | The title of notification box (required) | string\| VNode \| () => VNode | - | |
| placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` | |
| style | Customized inline style | Object \| string | - | |
| onClose | Specify a function that will be called when the close button is clicked | Function | - | |
| onClick | Specify a function that will be called when the notification is clicked | Function | - | |
| top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels). | string | `24px` | |
| closeIcon | custom close icon | VNode \| () => VNode | - | |
| onClick | Specify a function that will be called when the notification is clicked | Function | - | |
| onClose | Specify a function that will be called when the close button is clicked | Function | - | |
`notification` also provides a global `config()` method that can be used for specifying the default options. Once this method is used, all the notification boxes will take into account these globally defined options when displaying.
@ -66,10 +66,10 @@ notification.config({
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| bottom | Distance from the bottom of the viewport, when `placement` is `bottomRight` or `bottomLeft` (unit: pixels). | string | `24px` | |
| closeIcon | custom close icon | VNode \| () => VNode | - | |
| 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 | |
| maxCount | Max Notification show, drop oldest if exceed limit | number | - | 3.0 |
| placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` | |
| rtl | Whether to enable RTL mode | boolean | false | |
| top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels). | string | `24px` | |
| closeIcon | custom close icon | VNode \| () => VNode | - | |
| maxCount | Max Notification show, drop oldest if exceed limit | number | - | 3.0 |

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

@ -31,9 +31,10 @@ config 参数如下：
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| btn | 自定义关闭按钮 | VNode \| () => VNode | - | |
| bottom | 消息从底部弹出时，距离底部的位置，单位像素。 | string | `24px` | |
| btn | 自定义关闭按钮 | VNode \| () => VNode | - | |
| class | 自定义 CSS class | string | - | |
| closeIcon | 自定义关闭图标 | VNode \| () => VNode | - | |
| description | 通知提醒内容，必选 | string \| VNode \| () => VNode | - | |
| duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 | |
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body | |
@ -42,10 +43,9 @@ config 参数如下：
| message | 通知提醒标题，必选 | string \| VNode \| () => VNode | - | |
| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | topRight | |
| style | 自定义内联样式 | Object \| string | - | |
| onClose | 点击默认关闭按钮时触发的回调函数 | Function | - | |
| onClick | 点击通知时触发的回调函数 | Function | - | |
| top | 消息从顶部弹出时，距离顶部的位置，单位像素。 | string | `24px` | |
| closeIcon | 自定义关闭图标 | VNode \| () => VNode | - | |
| onClick | 点击通知时触发的回调函数 | Function | - | |
| onClose | 点击默认关闭按钮时触发的回调函数 | Function | - | |
还提供了一个全局配置方法，在调用前提前配置，全局一次生效。
@ -67,10 +67,10 @@ notification.config({
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| bottom | 消息从底部弹出时，距离底部的位置，单位像素。 | string | `24px` | |
| closeIcon | 自定义关闭图标 | VNode \| () => VNode | - | |
| duration | 默认自动关闭延时，单位秒 | number | 4.5 | |
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body | |
| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | topRight | |
| top | 消息从顶部弹出时，距离顶部的位置，单位像素。 | string | `24px` | |
| closeIcon | 自定义关闭图标 | VNode \| () => VNode | - | |
| rtl | 是否开启 RTL 模式 | boolean | false | 3.0 |
| maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - | 3.0 |
| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | topRight | |
| rtl | 是否开启 RTL 模式 | boolean | false | 3.0 |
| top | 消息从顶部弹出时，距离顶部的位置，单位像素。 | string | `24px` | |

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

@ -17,15 +17,15 @@ PageHeader can be used to highlight the page topic, display important informatio
| Param | Description | Type | Default value |
| --- | --- | --- | --- |
| title | custom title text | string\|slot | - |
| subTitle | custom subTitle text | string\|slot | - |
| ghost | PageHeader type, will change background color | boolean | true |
| avatar | Avatar next to the title bar | [avatar props](/components/avatar/) | - |
| backIcon | custom back icon, if false the back icon will not be displayed | string\|slot | `<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 | string\|slot | - |
| breadcrumb | Breadcrumb configuration | [breadcrumb](/components/breadcrumb/) | - |
| extra | Operating area, at the end of the line of the title line | string\|slot | - |
| footer | PageHeader's footer, generally used to render TabBar | string\|slot | - |
| ghost | PageHeader type, will change background color | boolean | true |
| subTitle | custom subTitle text | string\|slot | - |
| tags | Tag list next to title | [Tag](/components/tag/)\[] \| [Tag](/components/tag/) | - |
| title | custom title text | string\|slot | - |
### Events

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

@ -17,15 +17,15 @@ cover: https://gw.alipayobjects.com/zos/alicdn/6bKE0Cq0R/PageHeader.svg
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| title | 自定义标题文字 | string\|slot | - |
| subTitle | 自定义的二级标题文字 | string\|slot | - |
| ghost | pageHeader 的类型，将会改变背景颜色 | boolean | true |
| avatar | 标题栏旁的头像 | [avatar props](/components/avatar-cn/) | - |
| backIcon | 自定义 back icon ，如果为 false 不渲染 back icon | string\|slot | `<ArrowLeft />` |
| tags | title 旁的 tag 列表 | [Tag](/components/tag-cn/)[] \| [Tag](/components/tag-cn/) | - |
| extra | 操作区，位于 title 行的行尾 | string\|slot | - |
| breadcrumb | 面包屑的配置 | [breadcrumb](/components/breadcrumb-cn/) | - |
| extra | 操作区，位于 title 行的行尾 | string\|slot | - |
| footer | PageHeader 的页脚，一般用于渲染 TabBar | string\|slot | - |
| ghost | pageHeader 的类型，将会改变背景颜色 | boolean | true |
| subTitle | 自定义的二级标题文字 | string\|slot | - |
| tags | title 旁的 tag 列表 | [Tag](/components/tag-cn/)\[] \| [Tag](/components/tag-cn/) | - |
| title | 自定义标题文字 | string\|slot | - |
### 事件

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

@ -22,12 +22,12 @@ A long list can be divided into several pages using `Pagination`, and only one p
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| current(v-model) | current page number | number | - | |
| pageSize(v-model) | number of data items per page | number | - | |
| defaultCurrent | default initial page number | number | 1 | |
| defaultPageSize | default number of data items per page | number | 10 | |
| disabled | Disable pagination | boolean | - | 1.5.0 |
| hideOnSinglePage | Whether to hide pager on single page | boolean | false | |
| itemRender | to customize item innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => vNode \| v-slot | - | |
| pageSize(v-model) | number of data items per page | number | - | |
| pageSizeOptions | specify the sizeChanger options | string\[] | \['10', '20', '30', '40'] | |
| showLessItems | Show less page items | boolean | false | 1.5.0 |
| showQuickJumper | determine whether you can jump to pages directly | boolean | false | |
@ -40,7 +40,7 @@ A long list can be divided into several pages using `Pagination`, and only one p
### events
| Events Name | Description | Arguments |
| Events Name | Description | Arguments | |
| --- | --- | --- | --- |
| change | Called when the page number or `pageSize` is changed, and it takes the resulting page number and pageSize as its arguments | Function(page, pageSize) | noop |
| showSizeChange | a callback function, executed when `pageSize` is changed | Function(current, size) | noop |

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

@ -18,11 +18,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/1vqv2bj68/Pagination.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| current(v-model) | 当前页数 | number | - | |
| pageSize(v-model) | 每页条数 | number | - | |
| defaultPageSize | 默认的每页条数 | number | 10 | |
| disabled | 禁用分页 | boolean | - | 1.5.0 |
| hideOnSinglePage | 只有一页时是否隐藏分页器 | boolean | false | |
| itemRender | 用于自定义页码的结构，可用于优化 SEO | ({page, type: 'page' \| 'prev' \| 'next', originalElement}) => vNode \| v-slot | - | |
| pageSize(v-model) | 每页条数 | number | - | |
| pageSizeOptions | 指定每页可以显示多少条 | string\[] | \['10', '20', '30', '40'] | |
| showLessItems | 是否显示较少页面内容 | boolean | false | 1.5.0 |
| showQuickJumper | 是否可以快速跳转至某页 | boolean | false | |
@ -34,7 +34,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/1vqv2bj68/Pagination.svg
### 事件
| 事件名称 | 说明 | 回调参数 |
| 事件名称 | 说明 | 回调参数 | |
| --- | --- | --- | --- |
| change | 页码或 `pageSize` 改变的回调，参数是改变后的页码及每页条数 | Function(page, pageSize) | noop |
| showSizeChange | pageSize 变化的回调 | Function(current, size) | noop |

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

@ -17,22 +17,22 @@ The difference with the 'confirm' modal dialog is that it's more lightweight tha
| Param | Description | Type | Default value | Version |
| --- | --- | --- | --- | --- |
| cancelButtonProps | The cancel button props | [ButtonProps](/components/button/#API) | - |
| cancelText | text of the Cancel button | string\|slot | `Cancel` | |
| cancelButton | custom render cancel button | slot | - | 3.0 |
| okButtonProps | The ok button props | [ButtonProps](/components/button/#API) | - |
| okText | text of the Confirm button | string\|slot | `Confirm` | |
| cancelButtonProps | The cancel button props | [ButtonProps](/components/button/#API) | - | |
| cancelText | text of the Cancel button | string\|slot | `Cancel` | |
| disabled | is show popconfirm when click its childrenNode | boolean | false | |
| icon | customize icon of confirmation | vNode\|slot | &lt;Icon type="exclamation-circle" /> | |
| okButton | custom render confirm button | slot | - | 3.0 |
| okButtonProps | The ok button props | [ButtonProps](/components/button/#API) | - | |
| okText | text of the Confirm button | string\|slot | `Confirm` | |
| okType | Button `type` of the Confirm button | string | `primary` | |
| showCancel | Show cancel button | boolean | true | 3.0 |
| title | title of the confirmation box | string\|slot | - | |
| visible (v-model) | hide or show | boolean | - | |
| icon | customize icon of confirmation | vNode\|slot | &lt;Icon type="exclamation-circle" /&gt; | |
| disabled | is show popconfirm when click its childrenNode | boolean | false | |
### events
| Events Name | Description | Arguments |
| Events Name | Description | Arguments | |
| --- | --- | --- | --- |
| cancel | callback of cancel | function(e) | - |
| confirm | callback of confirmation | function(e) | - |

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

@ -16,18 +16,18 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fjMCD9xRq/Popconfirm.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - |
| cancelText | 取消按钮文字 | string\|slot | 取消 | |
| cancelButton | 完全自定义取消按钮 | slot | - | 3.0 |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - |
| okText | 确认按钮文字 | string\|slot | 确定 | |
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - | |
| cancelText | 取消按钮文字 | string\|slot | 取消 | |
| disabled | 点击 Popconfirm 子元素是否弹出气泡确认框 | boolean | false | |
| icon | 自定义弹出气泡 Icon 图标 | vNode | &lt;Icon type="exclamation-circle" /> | |
| okButton | 完全自定义确认按钮 | slot | - | 3.0 |
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - | |
| okText | 确认按钮文字 | string\|slot | 确定 | |
| okType | 确认按钮类型 | string | primary | |
| showCancel | 是否显示取消按钮 | boolean | true | 3.0 |
| title | 确认框的描述 | string\|slot | 无 | |
| visible (v-model) | 是否显示 | boolean | - | |
| icon | 自定义弹出气泡 Icon 图标 | vNode | &lt;Icon type="exclamation-circle" /&gt; | |
| disabled | 点击 Popconfirm 子元素是否弹出气泡确认框 | boolean | false | |
### 事件

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

@ -27,9 +27,9 @@ Properties that shared by all types.
| strokeColor | The color of progress bar | string | - | |
| strokeLinecap | To set the style of the progress linecap | `round` \| `square` | `round` | |
| success | Configs of successfully progress bar | { percent: number, strokeColor: string } | - | |
| title | html dom title | string | - | 3.0 |
| trailColor | The color of unfilled part | string | - | |
| type | To set the type, options: `line` `circle` `dashboard` | string | `line` | |
| title | html dom title | string | - | 3.0 |
### `type="line"`

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

@ -28,9 +28,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xqsDu4ZyR/Progress.svg
| strokeColor | 进度条的色彩 | string | - | |
| strokeLinecap | 进度条的样式 | `round` \| `square` | `round` | |
| success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - | |
| title | html 标签 title | string | - | 3.0 |
| trailColor | 未完成的分段的颜色 | string | - | |
| type | 类型，可选 `line` `circle` `dashboard` | string | `line` | |
| title | html 标签 title | string | - | 3.0 |
### `type="line"`

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

@ -27,7 +27,7 @@ Rate component.
### events
| Events Name | Description | Arguments |
| Events Name | Description | Arguments | |
| ----------- | ---------------------------------- | ----------------------- | --- |
| blur | callback when component lose focus | Function() | - |
| change | callback when select value | Function(value: number) | - |

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

@ -28,7 +28,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/R5uiIWmxe/Rate.svg
### 事件
| 事件名称 | 说明 | 回调参数 |
| 事件名称 | 说明 | 回调参数 | |
| ----------- | ------------------------ | ----------------------- | --- |
| blur | 失去焦点时的回调 | Function() | - |
| change | 选择时的回调 | Function(value: number) | - |

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

@ -13,10 +13,10 @@ Use when important operations need to inform the user to process the results and
## API
| Property | Description | Type | Default |
| -------- | ------------------------------------- | ---------------------------- | ------- | ------ | --------- | ----- | ----- | ------ | ------ |
| title | title string | string \| VNode \| #title | - |
| subTitle | subTitle string | string \| VNode \| #subTitle | - |
| status | result status,decide icons and colors | `'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500'` | 'info' |
| icon | custom back icon | #icon | - |
| extra | operating area | #extra | - |
| Property | Description | Type | Default | | | | | | |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| extra | operating area | #extra | - | | | | | | |
| icon | custom back icon | #icon | - | | | | | | |
| status | result status,decide icons and colors | \`'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500'\` | 'info' |
| subTitle | subTitle string | string \| VNode \| #subTitle | - | | | | | | |
| title | title string | string \| VNode \| #title | - | | | | | | |

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

@ -14,10 +14,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9nepwjaLa/Result.svg
## API
| 参数 | 说明 | 类型 | 默认值 |
| -------- | ------------------------- | ---------------------------- | ------- | ------ | --------- | ----- | ----- | ------ | ------ |
| title | title 文字 | string \| VNode \| #title | - |
| subTitle | subTitle 文字 | string \| VNode \| #subTitle | - |
| status | 结果的状态,决定图标和颜色 | `'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500'` | 'info' |
| icon | 自定义 icon | #icon | - |
| extra | 操作区 | #extra | - |
| 参数 | 说明 | 类型 | 默认值 | | | | | | |
| --- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
| extra | 操作区 | #extra | - | | | | | | |
| icon | 自定义 icon | #icon | - | | | | | | |
| status | 结果的状态,决定图标和颜色 | \`'success' | 'error' | 'info' | 'warning' | '404' | '403' | '500'\` | 'info' |
| subTitle | subTitle 文字 | string \| VNode \| #subTitle | - | | | | | | |
| title | title 文字 | string \| VNode \| #title | - | | | | | | |

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

@ -28,42 +28,42 @@ Select component to select value from options.
| autoClearSearchValue | Whether the current search will be cleared on selecting an item. Only applies when `mode` is set to `multiple` or `tags`. | boolean | true | |
| autofocus | Get focus by default | boolean | false | |
| bordered | Whether has border style | boolean | true | |
| clearIcon | The custom clear icon | VNode \| slot | - | |
| defaultActiveFirstOption | Whether active first option by default | boolean | true | |
| defaultOpen | Initial open state of dropdown | boolean | - | |
| disabled | Whether disabled select | boolean | false | |
| dropdownClassName | 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 | |
| dropdownMenuStyle | additional style applied to dropdown menu | object | - | |
| dropdownRender | Customize dropdown content | ({menuNode: VNode, props}) => VNode \| v-slot | - | |
| dropdownStyle | style of dropdown menu | object | - | |
| dropdownMenuStyle | additional style applied to dropdown menu | object | - | |
| fieldNames | Customize node label, value, options field name | object | { label: `label`, value: `value`, options: `options` } | 3.0 |
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns `true`, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true | |
| firstActiveValue | Value of action option by default | string\|string\[] | - | |
| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. | function(triggerNode) | () => document.body | |
| labelInValue | whether to embed label in value, turn the format of value from `string` to `{key: string, label: vNodes}` | boolean | false | |
| loading | indicate loading state | Boolean | false | |
| maxTagCount | Max tag count to show | number | - | |
| maxTagPlaceholder | Placeholder for not showing tags | slot/function(omittedValues) | - | |
| maxTagTextLength | Max text length to show | number | - | |
| menuItemSelectedIcon | The custom menuItemSelected icon | VNode \| slot | - | |
| mode | Set mode of Select | 'multiple' \| 'tags' | - | |
| notFoundContent | Specify content to show when no result matches.. | string\|slot | 'Not Found' | |
| open | Controlled open state of dropdown | boolean | - | |
| option | custom render option by slot | v-slot:option="{value, label, [disabled, key, title]}" | - | 2.2.5 |
| optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | value | |
| optionLabelProp | Which prop value of option will render as content of select. | string | `children` \| `label`(when use options) | |
| options | Data of the selectOption, manual construction work is no longer needed if this property has been set | array&lt;{value, label, [disabled, key, title]}> | \[] | |
| placeholder | Placeholder of select | string\|slot | - | |
| removeIcon | The custom remove icon | VNode \| slot | - | |
| searchValue | The current input "search" text | string | - | |
| showSearch | Whether show search input in single mode. | boolean | false | |
| showArrow | Whether to show the drop-down arrow | boolean | true | |
| showSearch | Whether show search input in single mode. | boolean | false | |
| size | Size of Select input. `default` `large` `small` | string | default | |
| suffixIcon | The custom suffix icon | VNode \| slot | - | |
| removeIcon | The custom remove icon | VNode \| slot | - | |
| clearIcon | The custom clear icon | VNode \| slot | - | |
| menuItemSelectedIcon | The custom menuItemSelected icon | VNode \| slot | - | |
| tokenSeparators | Separator used to tokenize on tag/multiple mode | string\[] | | |
| tagRender | Customize tag render, only applies when `mode` is set to `multiple` or `tags` | slot \| (props) => any | - | |
| tokenSeparators | Separator used to tokenize on tag/multiple mode | string\[] | | |
| value(v-model) | Current selected option. | string\|number\|string\[]\|number\[] | - | |
| options | Data of the selectOption, manual construction work is no longer needed if this property has been set | array&lt;{value, label, [disabled, key, title]}> | \[] | |
| option | custom render option by slot | v-slot:option="{value, label, [disabled, key, title]}" | - | 2.2.5 |
| defaultOpen | Initial open state of dropdown | boolean | - | |
| open | Controlled open state of dropdown | boolean | - | |
| loading | indicate loading state | Boolean | false | |
> 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 .
@ -74,6 +74,7 @@ Select component to select value from options.
| blur | Called when blur | function |
| change | Called when select an option or input value change, or value of input is changed in combobox mode | function(value, option:Option/Array&lt;Option>) |
| deselect | Called when a option is deselected, the params are option's value (or key) . only called for multiple or tags, effective in multiple or tags mode only. | function(value, option:Option) |
| dropdownVisibleChange | Call when dropdown open | function(open) |
| focus | Called when focus | function |
| inputKeyDown | Called when key pressed | function |
| mouseenter | Called when mouse enter | function |
@ -81,7 +82,6 @@ Select component to select value from options.
| popupScroll | Called when dropdown scrolls | function |
| search | Callback function that is fired when input changed. | function(value: string) |
| select | Called when a option is selected, the params are option's value (or key) and option instance. | function(value, option:Option) |
| dropdownVisibleChange | Call when dropdown open | function(open) |
### Select Methods
@ -94,11 +94,11 @@ Select component to select value from options.
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| class | additional class to option | string | - |
| disabled | Disable this option | boolean | false |
| key | Same usage as `value`. If Vue request you to set this property, you can set it to value of option, and then omit value property. | string | |
| title | `title` of Select after select this Option | string | - |
| value | default to filter with this property | string\|number | - |
| class | additional class to option | string | - |
### OptGroup props

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

@ -29,13 +29,15 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
| autoClearSearchValue | 是否在选中项后清空搜索框，只在 `mode` 为 `multiple` 或 `tags` 时有效。 | boolean | true | |
| autofocus | 默认获取焦点 | boolean | false | |
| bordered | 是否有边框 | boolean | true | |
| clearIcon | 自定义的多选框清空图标 | VNode \| slot | - | |
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true | |
| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |
| disabled | 是否禁用 | boolean | false | |
| dropdownClassName | 下拉菜单的 className 属性 | string | - | |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true | |
| dropdownMenuStyle | dropdown 菜单自定义样式 | object | - | |
| dropdownRender | 自定义下拉框内容 | ({menuNode: VNode, props}) => VNode \| v-slot | - | |
| dropdownStyle | 下拉菜单的 style 属性 | object | - | |
| dropdownMenuStyle | dropdown 菜单自定义样式 | object | - | |
| fieldNames | 自定义节点 label、value、options 的字段 | object | { label: `label`, value: `value`, options: `options` } | 3.0 |
| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true | |
| firstActiveValue | 默认高亮的选项 | string\|string\[] | - | |
@ -44,26 +46,24 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
| maxTagCount | 最多显示多少个 tag | number | - | |
| maxTagPlaceholder | 隐藏 tag 时显示的内容 | slot/function(omittedValues) | - | |
| maxTagTextLength | 最大显示的 tag 文本长度 | number | - | |
| menuItemSelectedIcon | 自定义当前选中的条目图标 | VNode \| slot | - | |
| mode | 设置 Select 的模式为多选或标签 | 'multiple' \| 'tags' \| 'combobox' | - | |
| notFoundContent | 当下拉列表为空时显示的内容 | string\|slot | 'Not Found' | |
| open | 是否展开下拉菜单 | boolean | - | |
| option | 通过 option 插槽，自定义节点 | v-slot:option="{value, label, [disabled, key, title]}" | - | 2.2.5 |
| optionFilterProp | 搜索时过滤对应的 option 属性，不支持 children | string | value | |
| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` \| `label`(设置 options 时) | |
| options | options 数据，如果设置则不需要手动构造 selectOption 节点 | array&lt;{value, label, [disabled, key, title]}> | \[] | |
| placeholder | 选择框默认文字 | string\|slot | - | |
| removeIcon | 自定义的多选框清除图标 | VNode \| slot | - | |
| searchValue | 控制搜索文本 | string | - | |
| showSearch | 使单选模式可搜索 | boolean | false | |
| showArrow | 是否显示下拉小箭头 | boolean | true | |
| showSearch | 使单选模式可搜索 | boolean | false | |
| size | 选择框大小，可选 `large` `small` | string | default | |
| suffixIcon | 自定义的选择框后缀图标 | VNode \| slot | - | |
| removeIcon | 自定义的多选框清除图标 | VNode \| slot | - | |
| clearIcon | 自定义的多选框清空图标 | VNode \| slot | - | |
| menuItemSelectedIcon | 自定义当前选中的条目图标 | VNode \| slot | - | |
| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] | | |
| tagRender | 自定义 tag 内容 render，仅在 `mode` 为 `multiple` 或 `tags` 时生效 | slot \| (props) => any | - | 3.0 |
| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] | | |
| value(v-model) | 指定当前选中的条目 | string\|string\[]\|number\|number\[] | - | |
| options | options 数据，如果设置则不需要手动构造 selectOption 节点 | array&lt;{value, label, [disabled, key, title]}> | \[] | |
| option | 通过 option 插槽，自定义节点 | v-slot:option="{value, label, [disabled, key, title]}" | - | 2.2.5 |
| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |
| open | 是否展开下拉菜单 | boolean | - | |
> 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentNode}` 将下拉弹层渲染节点固定在触发器的父元素中。
@ -74,6 +74,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
| blur | 失去焦点的时回调 | function |
| change | 选中 option，或 input 的 value 变化（combobox 模式下）时，调用此函数 | function(value, option:Option/Array&lt;Option>) |
| deselect | 取消选中时调用，参数为选中项的 value (或 key) 值，仅在 multiple 或 tags 模式下生效 | function(value，option:Option) |
| dropdownVisibleChange | 展开下拉菜单的回调 | function(open) |
| focus | 获得焦点时回调 | function |
| inputKeyDown | 键盘按下时回调 | function |
| mouseenter | 鼠标移入时回调 | function |
@ -81,7 +82,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
| popupScroll | 下拉列表滚动时的回调 | function |
| search | 文本框值变化时回调 | function(value: string) |
| select | 被选中时调用，参数为选中项的 value (或 key) 值 | function(value, option:Option) |
| dropdownVisibleChange | 展开下拉菜单的回调 | function(open) |
### Select Methods
@ -94,11 +94,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| class | Option 器类名 | string | - |
| disabled | 是否禁用 | boolean | false |
| key | 和 value 含义一致。如果 Vue 需要你设置此项，此项值与 value 的值相同，然后可以省略 value 设置 | string | |
| title | 选中该 Option 后，Select 的 title | string | - |
| value | 默认根据此属性值进行筛选 | string\|number | - |
| class | Option 器类名 | string | - |
### OptGroup props

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

@ -30,8 +30,8 @@ Provide a placeholder while you wait for content to load, or to visualise conten
| Property | Description | Type | Default |
| -------- | ----------------------- | ----------------------------------------- | ------- |
| 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
@ -44,7 +44,7 @@ Provide a placeholder while you wait for content to load, or to visualise conten
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| rows | Set the row count of paragraph | number | - |
| width | Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width | number \| string \| Array<number \| string> | - |
| 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&lt;number \| string> | - |
### SkeletonButtonProps (3.0+)

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

@ -31,8 +31,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/KpcciCJgv/Skeleton.svg
| 属性 | 说明 | 类型 | 默认值 |
| ----- | -------------------- | ----------------------------------------- | ------ |
| size | 设置头像占位图的大小 | number \| `large` \| `small` \| `default` | - |
| shape | 指定头像的形状 | `circle` \| `square` | - |
| size | 设置头像占位图的大小 | number \| `large` \| `small` \| `default` | - |
### SkeletonTitleProps
@ -45,7 +45,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/KpcciCJgv/Skeleton.svg
| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| rows | 设置段落占位图的行数 | number | - |
| width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \| string \| Array<number \| string> | - |
| width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \| string \| Array&lt;number \| string> | - |
### SkeletonButtonProps (3.0+)

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

@ -18,29 +18,29 @@ To input a value in a range.
| autofocus | get focus when component mounted | boolean | false | |
| 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. | Function | () => document.body | 1.5.0 |
| handleStyle | The style of slider handle | CSSProperties | - | |
| included | Make effect when `marks` not null，`true` means containment and `false` means coordinative | boolean | true | |
| marks | Tick mark of Slider, type of key must be `number`, and must in closed interval \[min, max], each mark can declare its own style. | object | { number: string\|VNode } or { number: { style: object, label: string\|VNode } } or { number: () => VNode } | |
| mark | Custom tick mark of Slider, | v-slot:mark | { point: number, label: any } | 3.0 |
| marks | Tick mark of Slider, type of key must be `number`, and must in closed interval \[min, max], each mark can declare its own style. | object | { number: string\|VNode } or { number: { style: object, label: string\|VNode } } or { number: () => VNode } | |
| max | The maximum value the slider can slide to | number | 100 | |
| min | The minimum value the slider can slide to. | number | 0 | |
| range | dual thumb mode | boolean | false | |
| reverse | reverse the component | boolean | false | 1.5.0 |
| step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be `null`. | number\|null | 1 | |
| tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null. | Function\|null | IDENTITY | |
| value(v-model) | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] | | |
| vertical | If true, the slider will be vertical. | Boolean | false |
| tooltipPlacement | Set Tooltip display position. Ref [`Tooltip`](/components/tooltip/). | string | | 1.5.0 |
| 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. | Function | () => document.body | 1.5.0 |
| trackStyle | The style of slider track | CSSProperties | - | |
| handleStyle | The style of slider handle | CSSProperties | - | |
| value(v-model) | The value of slider. When `range` is `false`, use `number`, otherwise, use `[number, number]` | number\|number\[] | | |
| vertical | If true, the slider will be vertical. | Boolean | false | |
### events
| Events Name | Description | Arguments |
| Events Name | Description | Arguments | |
| --- | --- | --- | --- |
| afterChange | Fire when `mouseup` is fired. | Function(value) | NOOP |
| change | Callback function that is fired when the user changes the slider's value. | Function(value) | NOOP |
| afterChange | Fire when `mouseup` is fired. | Function(value) | NOOP |
## Methods

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

@ -19,27 +19,27 @@ cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
| autofocus | 自动获取焦点 | boolean | false | |
| disabled | 值为 `true` 时，滑块为禁用状态 | boolean | false | |
| dots | 是否只能拖拽到刻度上 | boolean | false | |
| getTooltipPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上。 | Function | () => document.body | 1.5.0 |
| included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | boolean | true | |
| marks | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 \[min, max] 内，每个标签可以单独设置样式 | object | { number: string\|VNode } or { number: { style: object, label: string\|VNode } } or { number: () => VNode } | |
| mark | 自定义刻度标记 | v-slot:mark | { point: number, label: any } | 3.0 |
| marks | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 \[min, max] 内，每个标签可以单独设置样式 | object | { number: string\|VNode } or { number: { style: object, label: string\|VNode } } or { number: () => VNode } | |
| max | 最大值 | number | 100 | |
| min | 最小值 | number | 0 | |
| range | 双滑块模式 | boolean | false | |
| reverse | 反向坐标轴 | boolean | false | 1.5.0 |
| step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 `null`，此时 Slider 的可选值仅有 marks 标出来的部分。 | number\|null | 1 | |
| tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip。 | Function\|null | IDENTITY | |
| value(v-model) | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number\[] | | |
| vertical | 值为 `true` 时，Slider 为垂直方向 | Boolean | false | |
| tooltipPlacement | 设置 Tooltip 展示位置。参考 [`Tooltip`](/components/tooltip/)。 | string | | 1.5.0 |
| tooltipVisible | 值为`true`时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时。 | Boolean | | |
| getTooltipPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上。 | Function | () => document.body | 1.5.0 |
| value(v-model) | 设置当前取值。当 `range` 为 `false` 时，使用 `number`，否则用 `[number, number]` | number\|number\[] | | |
| vertical | 值为 `true` 时，Slider 为垂直方向 | Boolean | false | |
### 事件
| 事件名称 | 说明 | 回调参数 |
| 事件名称 | 说明 | 回调参数 | |
| --- | --- | --- | --- |
| afterChange | 与 `mouseup` 触发时机一致，把当前值作为参数传入。 | Function(value) | NOOP |
| change | 当 Slider 的值发生改变时，会触发 change 事件，并把改变后的值作为参数传入。 | Function(value) | NOOP |
| afterChange | 与 `mouseup` 触发时机一致，把当前值作为参数传入。 | Function(value) | NOOP |
## 方法

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

@ -41,6 +41,6 @@ Display statistic number.
#### Statistic.Countdown Events
| Events Name | Description | Arguments |
| Events Name | Description | Arguments | |
| ----------- | ---------------------- | ---------- | --- |
| finish | Trigger when time's up | () => void | - |

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

@ -25,19 +25,19 @@ The whole of the step bar.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| current(v-model) | to set the current step, counting from 0. You can overwrite this state by using `status` of `Step`, support v-model after 1.5.0 | number | 0 | |
| type | Type of steps, can be set to one of the following values: `default`, `navigation` | string | `default` | 1.5.0 |
| direction | to specify the direction of the step bar, `horizontal` and `vertical` are currently supported | string | `horizontal` | |
| initial | set the initial step, counting from 0 | number | 0 | |
| labelPlacement | support vertial title and description | string | `horizontal` | |
| progressDot | Steps with progress dot style, customize the progress dot by setting a scoped slot. labelPlacement will be `vertical` | Boolean or v-slot:progressDot="{index, status, title, description, prefixCls, iconDot}" | false | |
| percent | Progress circle percentage of current step in `process` status (only works on basic Steps) | number | - | 3.0 |
| progressDot | Steps with progress dot style, customize the progress dot by setting a scoped slot. labelPlacement will be `vertical` | Boolean or v-slot:progressDot="{index, status, title, description, prefixCls, iconDot}" | false | |
| responsive | change to vertical direction when screen width smaller than `532px` | boolean | true | 3.0 |
| 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` | 1.5.0 |
#### Steps Events
| Events Name | Description | Arguments | Version |
| Events Name | Description | Arguments | Version | |
| ----------- | ---------------------------- | ----------------- | ------- | ----- |
| change | Trigger when Step is changed | (current) => void | - | 1.5.0 |
@ -48,8 +48,8 @@ A single step in the step bar.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| description | description of the step, optional property | string\|slot | - | |
| disabled | Disable click | boolean | false | 1.5.0 |
| icon | icon of the step, optional property | string\|slot | - | |
| status | to specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | string | `wait` | |
| title | title of the step | string\|slot | - | |
| subTitle | Subtitle of the step | string\|slot | - | 1.5.0 |
| disabled | Disable click | boolean | false | 1.5.0 |
| title | title of the step | string\|slot | - | |

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

@ -29,20 +29,20 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| type | 步骤条类型，有 `default` 和 `navigation` 两种 | string | `default` | 1.5.0 |
| current (v-model) | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态, 1.5.0 后支持 v-model | number | 0 | |
| direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | string | horizontal | |
| initial | 起始序号，从 0 开始记数 | number | 0 | |
| labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选`vertical`放图标下方 | string | `horizontal` | |
| progressDot | 点状步骤条，可以设置为一个 作用域插槽,labelPlacement 将强制为`vertical` | Boolean or v-slot:progressDot="{index, status, title, description, prefixCls, iconDot}" | false | |
| percent | 当前 `process` 步骤显示的进度条进度（只对基本类型的 Steps 生效） | number | - | 3.0 |
| progressDot | 点状步骤条，可以设置为一个 作用域插槽,labelPlacement 将强制为`vertical` | Boolean or v-slot:progressDot="{index, status, title, description, prefixCls, iconDot}" | false | |
| responsive | 当屏幕宽度小于 532px 时自动变为垂直模式 | boolean | true | 3.0 |
| size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | default | |
| status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | process | |
| initial | 起始序号，从 0 开始记数 | number | 0 | |
| type | 步骤条类型，有 `default` 和 `navigation` 两种 | string | `default` | 1.5.0 |
#### Steps 事件
| 事件名称 | 说明 | 回调参数 | 版本 |
| 事件名称 | 说明 | 回调参数 | 版本 | |
| -------- | ------------------ | ----------------- | ---- | ----- |
| change | 点击切换步骤时触发 | (current) => void | - | 1.5.0 |
@ -53,8 +53,8 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| description | 步骤的详情描述，可选 | string \| slot | - | |
| disabled | 禁用点击 | boolean | false | 1.5.0 |
| icon | 步骤图标的类型，可选 | string \| slot | - | |
| status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | wait | |
| title | 标题 | string \| slot | - | |
| subTitle | 子标题 | string \| slot | - | 1.5.0 |
| disabled | 禁用点击 | boolean | false | 1.5.0 |
| title | 标题 | string \| slot | - | |

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

@ -19,16 +19,16 @@ Switching Selector.
| autofocus | get focus when component mounted | boolean | false | |
| checked(v-model) | determine whether the `Switch` is checked | checkedValue \| unCheckedValue | false | |
| checkedChildren | content to be shown when the state is checked | string\|slot | | |
| checkedValue | value for checked state | boolean \| string \| number | true | 2.2.1 |
| disabled | Disable switch | boolean | false | |
| loading | loading state of switch | boolean | false | |
| size | the size of the `Switch`, options: `default` `small` | string | default | |
| unCheckedChildren | content to be shown when the state is unchecked | string\|slot | | |
| checkedValue | value for checked state | boolean \| string \| number | true | 2.2.1 |
| unCheckedValue | value for unchecked state | boolean \| string \| number | false | 2.2.1 |
### Events
| Events Name | Description | Arguments |
| Events Name | Description | Arguments | |
| --- | --- | --- | --- |
| change | trigger when the checked state is changing | Function(checked: boolean \| string \| number, event: Event) | |
| click | trigger when clicked | Function(checked: boolean \| string \| number, event: Event) | |

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

@ -19,19 +19,19 @@ cover: https://gw.alipayobjects.com/zos/alicdn/zNdJQMhfm/Switch.svg
| --- | --- | --- | --- | --- |
| autofocus | 组件自动获取焦点 | boolean | false | |
| checked(v-model) | 指定当前是否选中 | checkedValue \| unCheckedValue | false | |
| checkedChildren | 选中时的内容 | string\|slot | | |
| checkedValue | 选中时的值 | boolean \| string \| number | true | 2.2.1 |
| disabled | 是否禁用 | boolean | false | |
| loading | 加载中的开关 | boolean | false | |
| size | 开关大小，可选值：`default` `small` | string | default | |
| checkedChildren | 选中时的内容 | string\|slot | | |
| unCheckedChildren | 非选中时的内容 | string\|slot | | |
| checkedValue | 选中时的值 | boolean \| string \| number | true | 2.2.1 |
| unCheckedValue | 非选中时的值 | boolean \| string \| number | false | 2.2.1 |
### 事件
| 事件名称 | 说明 | 回调参数 |
| 事件名称 | 说明 | 回调参数 | |
| -------- | -------------- | ------------------------------------------------------------ | --- |
| change | 变化时回调函数 | Function(checked: boolean \| string \| number, event: Event) |
| change | 变化时回调函数 | Function(checked: boolean \| string \| number, event: Event) | |
| click | 点击时回调函数 | Function(checked: boolean \| string \| number, event: Event) | |
## 方法

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

@ -69,55 +69,55 @@ Specify `dataSource` of Table as an array of data.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| tableLayout | [table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) attribute of table element | - \| 'auto' \| 'fixed' | -<hr />`fixed` when header/columns are fixed, or using `column.ellipsis` | 1.5.0 |
| bodyCell | custom body cell by slot | v-slot:bodyCell="{text, record, index, column}" | - | 3.0 |
| bordered | Whether to show all table borders | boolean | `false` | |
| childrenColumnName | The column contains children to display | string | `children` | |
| columns | Columns of table [config](#Column) | array | - | |
| components | Override default table elements | object | - | |
| customFilterDropdown | Customized filter overlay，need set `column.customFilterDropdown` | v-slot:customFilterDropdown="[FilterDropdownProps](#FilterDropdownProps)" | - | 3.0 |
| customFilterIcon | Customized filter icon | v-slot:customFilterIcon="{filtered, column}" | - | 3.0 |
| customHeaderRow | Set props on per header row | Function(columns, index) | - | |
| customRow | Set props on per row | Function(record, index) | - | |
| dataSource | Data record array to be displayed | any\[] | - | |
| defaultExpandAllRows | Expand all rows initially | boolean | `false` | |
| defaultExpandedRowKeys | Initial expanded row keys | string\[] | - | |
| emptyText | Customize the display content when empty data | v-slot:emptyText | - | 3.0 |
| expandedRowKeys | Current expanded row keys | string\[] | - | |
| expandedRowRender | Expanded container render for each row | Function({record, index, indent, expanded}):VNode\|v-slot | - | |
| expandFixed | Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean \| string | false | 3.0 |
| expandIcon | Customize row expand Icon. | Function(props):VNode \| v-slot:expandIcon="props" | - | |
| expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | `false` | |
| footer | Table footer renderer | Function(currentPageData)\| v-slot:footer="currentPageData" | |
| footer | Table footer renderer | Function(currentPageData)\| v-slot:footer="currentPageData" | | |
| getPopupContainer | the render container of dropdowns in table | (triggerNode) => HTMLElement | `() => TableHtmlElement` | 1.5.0 |
| headerCell | custom head cell by slot | v-slot:headerCell="{title, column}" | - | 3.0 |
| indentSize | Indent size in pixels of tree data | number | 15 | |
| rowExpandable | Enable row can be expandable | (record) => boolean | - | |
| showExpandColumn | Show expand column | boolean | true | 3.0 |
| loading | Loading status of table | boolean\|[object](/components/spin) | `false` |
| loading | Loading status of table | boolean\|[object](/components/spin) | `false` | |
| locale | i18n text including filter, sort, empty text, etc | object | filterConfirm: 'Ok' <br /> filterReset: 'Reset' <br /> emptyText: 'No Data' | |
| 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 | | |
| rowClassName | Row's className | Function(record, index):string | - | |
| rowExpandable | Enable row can be expandable | (record) => boolean | - | |
| rowKey | Row's unique key, could be a string or function that returns a string | string\|Function(record, index):string | `key` | |
| rowSelection | Row selection [config](#rowSelection) | object | null | |
| scroll | Whether the table can be scrollable, [config](#scroll) | object | - | |
| showExpandColumn | Show expand column | boolean | true | 3.0 |
| showHeader | Whether to show table header | boolean | `true` | |
| sortDirections | Supported sort way, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] | 3.0 |
| showSorterTooltip | The header show next sorter direction tooltip. It will be set as the property of Tooltip if its type is object | boolean \| [Tooltip props](/components/tooltip/#API) | true | 3.0 |
| size | Size of table | `default` \| `middle` \| `small` \| `large` | `default` |
| size | Size of table | `default` \| `middle` \| `small` \| `large` | `default` | |
| sortDirections | Supported sort way, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] | 3.0 |
| sticky | Set sticky header and scroll bar | boolean \| `{offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}` | - | 3.0 |
| title | Table title renderer | Function(currentPageData)\| v-slot:title="currentPageData" | | |
| customHeaderRow | Set props on per header row | Function(columns, index) | - | |
| customRow | Set props on per row | Function(record, index) | - | |
| getPopupContainer | the render container of dropdowns in table | (triggerNode) => HTMLElement | `() => TableHtmlElement` | 1.5.0 |
| headerCell | custom head cell by slot | v-slot:headerCell="{title, column}" | - | 3.0 |
| bodyCell | custom body cell by slot | v-slot:bodyCell="{text, record, index, column}" | - | 3.0 |
| customFilterDropdown | Customized filter overlay，need set `column.customFilterDropdown` | v-slot:customFilterDropdown="[FilterDropdownProps](#FilterDropdownProps)" | - | 3.0 |
| customFilterIcon | Customized filter icon | v-slot:customFilterIcon="{filtered, column}" | - | 3.0 |
| emptyText | Customize the display content when empty data | v-slot:emptyText | - | 3.0 |
| summary | Summary content | v-slot:summary | - | 3.0 |
| tableLayout | [table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) attribute of table element | - \| 'auto' \| 'fixed' | -<hr />`fixed` when header/columns are fixed, or using `column.ellipsis` | 1.5.0 |
| title | Table title renderer | Function(currentPageData)\| v-slot:title="currentPageData" | | |
| transformCellText | The data can be changed again before rendering, generally used for the default configuration of empty data. You can configured globally through [ConfigProvider](/components/config-provider-cn/) | Function({ text, column, record, index }) => any, The `text` here is the data processed by other defined cell api, and it may be of type VNode \| string \| number | - | 1.5.4 ｜ |
### Events
| Events Name | Description | Arguments |
| Events Name | Description | Arguments | |
| --- | --- | --- | --- |
| change | Callback executed when pagination, filters or sorter is changed | Function(pagination, filters, sorter, { currentDataSource }) | |
| expand | Callback executed when the row expand icon is clicked | Function(expanded, record) | |
| expandedRowsChange | Callback executed when the expanded rows change | Function(expandedRows) | |
| resizeColumn | Triggered when the column is dragged | Function(width, column) |
| resizeColumn | Triggered when the column is dragged | Function(width, column) | |
#### customRow usage
@ -150,36 +150,36 @@ One of the Table `columns` prop for describing the table's columns, Column has t
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| align | specify how content is aligned | 'left' \| 'right' \| 'center' | 'left' | |
| ellipsis | ellipsize cell content, not working with sorter and filters for now.<br />tableLayout would be `fixed` when `ellipsis` is true. | boolean | false | 1.5.0 |
| colSpan | Span of this column's title | number | | |
| customCell | Set props on per cell | Function(record, rowIndex, column) | - | column add from 3.0 |
| customFilterDropdown | use v-slot:customFilterDropdown，Priority is lower than filterDropdown | boolean | false | 3.0 |
| customHeaderCell | Set props on per header cell | Function(column) | - | |
| customRender | Renderer of the table cell. The return value should be a VNode | Function({text, record, index}) {} | - | |
| dataIndex | Display field of the data record, support nest path by string array | string \| string\[] | - | |
| defaultFilteredValue | Default filtered values | string\[] | - | 1.5.0 |
| defaultSortOrder | Default order of sorted values: `'ascend'` `'descend'` `null` | string | - | |
| ellipsis | ellipsize cell content, not working with sorter and filters for now.<br />tableLayout would be `fixed` when `ellipsis` is true. | boolean | false | 1.5.0 |
| ellipsis | The ellipsis cell content, not working with sorter and filters for now.<br />tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }` | boolean \| {showTitle?: boolean } | false | 3.0 |
| filterDropdown | Customized filter overlay | VNode | - | |
| customFilterDropdown | use v-slot:customFilterDropdown，Priority is lower than filterDropdown | boolean | false | 3.0 |
| 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 | ({filtered: boolean, column: Column}) | `false` | |
| filterMultiple | Whether multiple filters can be selected | boolean | `true` | |
| filterMode | To specify the filter interface | 'menu' \| 'tree' | 'menu' | 3.0 |
| filterSearch | Whether to be searchable for filter menu | Boolean | false | 3.0 |
| filterMultiple | Whether multiple filters can be selected | boolean | `true` | |
| filters | Filter menu config | object\[] | - | |
| filterSearch | Whether to be searchable for filter menu | Boolean | false | 3.0 |
| fixed | Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean\|string | `false` | |
| key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - | |
| customRender | Renderer of the table cell. The return value should be a VNode | Function({text, record, index}) {} | - | |
| maxWidth | Drag the maximum width of the column, it will be affected by the automatic adjustment and distribution of the table width | number | - | 3.0 |
| minWidth | Drag the minimum width of the column, it will be affected by the automatic adjustment and distribution of the table width | number | 50 | 3.0 |
| resizable | Whether the width can be adjusted by dragging, at this time width must be number type | boolean | - | 3.0 |
| responsive | The list of breakpoints at which to display this column. Always visible if not set. | [Breakpoint](#Breakpoint)\[] | - | 3.0 |
| sortDirections | supported sort way, could be `'ascend'`, `'descend'` | Array | `['ascend', 'descend']` | 1.5.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, could be `'ascend'`, `'descend'` | Array | `['ascend', 'descend']` | 1.5.0 |
| title | Title of this column | string | - | |
| minWidth | Drag the minimum width of the column, it will be affected by the automatic adjustment and distribution of the table width | number | 50 | 3.0 |
| maxWidth | Drag the maximum width of the column, it will be affected by the automatic adjustment and distribution of the table width | number | - | 3.0 |
| resizable | Whether the width can be adjusted by dragging, at this time width must be number type | boolean | - | 3.0 |
| width | Width of this column | string\|number | - | |
| customCell | Set props on per cell | Function(record, rowIndex, column) | - | column add from 3.0 |
| customHeaderCell | Set props on per header cell | Function(column) | - | |
| onFilter | Callback executed when the confirm filter button is clicked, Use as a `filter` event when using template or jsx | Function | - | |
| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed, Use as a `filterDropdownVisible` event when using template or jsx | function(visible) {} | - | |
@ -212,13 +212,13 @@ Properties for row selection.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| checkStrictly | Check table row precisely; parent row and children rows are not associated | boolean | true | 3.0 |
| columnWidth | Set the width of the selection column | string\|number | - | |
| columnTitle | Set the title of the selection column | string\|VNode | - | |
| columnWidth | Set the width of the selection column | string\|number | - | |
| fixed | Fixed selection column on the left | boolean | - | |
| getCheckboxProps | Get Checkbox or Radio props | Function(record) | - | |
| hideDefaultSelections | Remove the default `Select All` and `Select Invert` selections | boolean | `false` | |
| hideSelectAll | Hide the selectAll checkbox and custom selection | boolean | false | 3.0 |
| preserveSelectedRowKeys | Keep selection `key` even when it removed from `dataSource` | boolean | - | 3.0 |
| hideDefaultSelections | Remove the default `Select All` and `Select Invert` selections | boolean | `false` | |
| selectedRowKeys | Controlled selected row keys | string\[] | \[] | |
| selections | Custom selection [config](#rowSelection), only displays default selections when set to `true` | object\[] \| boolean | - | |
| type | `checkbox` or `radio` | `checkbox` \| `radio` | `checkbox` | |

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

@ -74,13 +74,19 @@ cover: https://gw.alipayobjects.com/zos/alicdn/f-SbcX2Lx/Table.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| bodyCell | 个性化单元格 | v-slot:bodyCell="{text, record, index, column}" | - | 3.0 |
| bordered | 是否展示外边框和列边框 | boolean | false | |
| childrenColumnName | 指定树形结构的列名 | string | `children` | |
| columns | 表格列的配置描述，具体项见[下表](#Column) | array | - | |
| components | 覆盖默认的 table 元素 | object | - | |
| childrenColumnName | 指定树形结构的列名 | string | `children` | |
| customFilterDropdown | 自定义筛选菜单，需要配合 `column.customFilterDropdown` 使用 | v-slot:customFilterDropdown="[FilterDropdownProps](#FilterDropdownProps)" | - | 3.0 |
| customFilterIcon | 自定义筛选图标 | v-slot:customFilterIcon="{filtered, column}" | - | 3.0 |
| customHeaderRow | 设置头部行属性 | Function(columns, index) | - | |
| customRow | 设置行属性 | Function(record, index) | - | |
| dataSource | 数据数组 | object\[] | | |
| defaultExpandAllRows | 初始时，是否展开所有行 | boolean | false | |
| defaultExpandedRowKeys | 默认展开的行 | string\[] | - | |
| emptyText | 自定义空数据时的显示内容 | v-slot:emptyText | - | 3.0 |
| expandedRowKeys | 展开的行，控制属性 | string\[] | - | |
| expandedRowRender | 额外的展开行 | Function(record, index, indent, expanded):VNode \| v-slot:expandedRowRender="{record, index, indent, expanded}" | - | |
| expandFixed | 控制展开图标是否固定，可选 true `left` `right` | boolean \| string | false | 3.0 |
@ -88,40 +94,34 @@ cover: https://gw.alipayobjects.com/zos/alicdn/f-SbcX2Lx/Table.svg
| expandRowByClick | 通过点击行来展开子行 | boolean | `false` | |
| footer | 表格尾部 | Function(currentPageData)\|v-slot:footer="currentPageData" | | |
| getPopupContainer | 设置表格内各类浮层的渲染节点，如筛选菜单 | (triggerNode) => HTMLElement | `() => TableHtmlElement` | 1.5.0 |
| headerCell | 个性化头部单元格 | v-slot:headerCell="{title, column}" | - | 3.0 |
| indentSize | 展示树形数据时，每层缩进的宽度，以 px 为单位 | number | 15 | |
| loading | 页面是否加载中 | boolean\|[object](/components/spin-cn) | false | |
| locale | 默认文案设置，目前包括排序、过滤、空数据文案 | object | filterConfirm: `确定` <br> filterReset: `重置` <br> emptyText: `暂无数据` | |
| pagination | 分页器，参考[配置项](#pagination)或 [pagination](/components/pagination-cn/)文档，设为 false 时不展示和进行分页 | object | | |
| rowClassName | 表格行的类名 | Function(record, index):string | - | |
| rowExpandable | 设置是否允许行展开 | (record) => boolean | - | 3.0 |
| rowKey | 表格行 key 的取值，可以是字符串或一个函数 | string\|Function(record):string | 'key' | |
| rowSelection | 列表项是否可选择，[配置项](#rowSelection) | object | null | |
| scroll | 表格是否可滚动，也可以指定滚动区域的宽、高，[配置项](#scroll) | object | - | |
| showExpandColumn | 设置是否展示行展开列 | boolean | true | 3.0 |
| showHeader | 是否显示表头 | boolean | true | |
| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示。当参数类型为对象时，将被设置为 Tooltip 的属性 | boolean \| [Tooltip props](/components/tooltip/) | true | 3.0 |
| size | 表格大小 | default \| middle \| small | default | |
| sortDirections | 支持的排序方式，取值为 `ascend` `descend` | Array | \[`ascend`, `descend`] | |
| sticky | 设置粘性头部和滚动条 | boolean \| `{offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}` | - | 3.0 |
| summary | 总结栏 | v-slot:summary | - | 3.0 |
| tableLayout | 表格元素的 [table-layout](https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout) 属性，设为 `fixed` 表示内容不会影响列的布局 | - \| 'auto' \| 'fixed' | 无<hr />固定表头/列或使用了 `column.ellipsis` 时，默认值为 `fixed` | 1.5.0 |
| title | 表格标题 | Function(currentPageData)\|v-slot:title="currentPageData" | | |
| indentSize | 展示树形数据时，每层缩进的宽度，以 px 为单位 | number | 15 | |
| rowExpandable | 设置是否允许行展开 | (record) => boolean | - | 3.0 |
| showExpandColumn | 设置是否展示行展开列 | boolean | true | 3.0 |
| customHeaderRow | 设置头部行属性 | Function(columns, index) | - | |
| customRow | 设置行属性 | Function(record, index) | - | |
| headerCell | 个性化头部单元格 | v-slot:headerCell="{title, column}" | - | 3.0 |
| bodyCell | 个性化单元格 | v-slot:bodyCell="{text, record, index, column}" | - | 3.0 |
| customFilterDropdown | 自定义筛选菜单，需要配合 `column.customFilterDropdown` 使用 | v-slot:customFilterDropdown="[FilterDropdownProps](#FilterDropdownProps)" | - | 3.0 |
| customFilterIcon | 自定义筛选图标 | v-slot:customFilterIcon="{filtered, column}" | - | 3.0 |
| emptyText | 自定义空数据时的显示内容 | v-slot:emptyText | - | 3.0 |
| summary | 总结栏 | v-slot:summary | - | 3.0 |
| transformCellText | 数据渲染前可以再次改变，一般用于空数据的默认配置，可以通过 [ConfigProvider](/components/config-provider-cn/) 全局统一配置 | Function({ text, column, record, index }) => any，此处的 text 是经过其它定义单元格 api 处理后的数据，有可能是 VNode \| string \| number 类型 | - | 1.5.4 |
### 事件
| 事件名称 | 说明 | 回调参数 |
| --- | --- | --- |
| expandedRowsChange | 展开的行变化时触发 | Function(expandedRows) |
| change | 分页、排序、筛选变化时触发 | Function(pagination, filters, sorter, { currentDataSource }) |
| expand | 点击展开图标时触发 | Function(expanded, record) |
| expandedRowsChange | 展开的行变化时触发 | Function(expandedRows) |
| resizeColumn | 拖动列时触发 | Function(width, column) |
#### customRow 用法
@ -156,35 +156,35 @@ cover: https://gw.alipayobjects.com/zos/alicdn/f-SbcX2Lx/Table.svg
| --- | --- | --- | --- | --- |
| align | 设置列的对齐方式 | `left` \| `right` \| `center` | `left` | |
| colSpan | 表头列合并,设置为 0 时，不渲染 | number | | |
| customCell | 设置单元格属性 | Function(record, rowIndex, column) | - | column add from 3.0 |
| customFilterDropdown | 启用 v-slot:customFilterDropdown，优先级低于 filterDropdown | boolean | false | 3.0 |
| customHeaderCell | 设置头部单元格属性 | Function(column) | - | |
| customRender | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引 | Function({text, record, index, column}) {} | - | |
| dataIndex | 列数据在数据项中对应的路径，支持通过数组查询嵌套路径 | string \| string\[] | - | |
| defaultFilteredValue | 默认筛选值 | string\[] | - | 1.5.0 |
| defaultSortOrder | 默认排序顺序 | `ascend` \| `descend` | - | |
| ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。<br />设置为 `true` 或 `{ showTitle?: boolean }` 时，表格布局将变成 `tableLayout="fixed"`。 | boolean \| { showTitle?: boolean } | false | 3.0 |
| filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | VNode | - | |
| customFilterDropdown | 启用 v-slot:customFilterDropdown，优先级低于 filterDropdown | boolean | false | 3.0 |
| filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - | |
| filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false | |
| filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string\[] | - | |
| filterIcon | 自定义 filter 图标。 | VNode \| ({filtered: boolean, column: Column}) => vNode | false | |
| filterMultiple | 是否多选 | boolean | true | |
| filterMode | 指定筛选菜单的用户界面 | 'menu' \| 'tree' | 'menu' | 3.0 |
| filterSearch | 筛选菜单项是否可搜索 | Boolean | false | 3.0 |
| filterMultiple | 是否多选 | boolean | true | |
| filters | 表头的筛选菜单项 | object\[] | - | |
| filterSearch | 筛选菜单项是否可搜索 | Boolean | false | 3.0 |
| fixed | 列是否固定，可选 `true`(等效于 left) `'left'` `'right'` | boolean\|string | false | |
| key | Vue 需要的 key，如果已经设置了唯一的 `dataIndex`，可以忽略这个属性 | string | - | |
| customRender | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引 | Function({text, record, index, column}) {} | - | |
| maxWidth | 拖动列最大宽度，会受到表格自动调整分配宽度影响 | number | - | 3.0 |
| minWidth | 拖动列最小宽度，会受到表格自动调整分配宽度影响 | number | 50 | 3.0 |
| resizable | 是否可拖动调整宽度，此时 width 必须是 number 类型 | boolean | - | 3.0 |
| responsive | 响应式 breakpoint 配置列表。未设置则始终可见。 | [Breakpoint](#Breakpoint)\[] | - | 3.0 |
| showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中 `showSorterTooltip` | boolean \| [Tooltip props](/components/tooltip/#API) | true | |
| sortDirections | 支持的排序方式，取值为 `'ascend'` `'descend'` | Array | `['ascend', 'descend']` | 1.5.0 |
| 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 | 支持的排序方式，取值为 `'ascend'` `'descend'` | Array | `['ascend', 'descend']` | 1.5.0 |
| title | 列头显示文字 | string | - | |
| width | 列宽度 | string\|number | - | |
| minWidth | 拖动列最小宽度，会受到表格自动调整分配宽度影响 | number | 50 | 3.0 |
| maxWidth | 拖动列最大宽度，会受到表格自动调整分配宽度影响 | number | - | 3.0 |
| resizable | 是否可拖动调整宽度，此时 width 必须是 number 类型 | boolean | - | 3.0 |
| customCell | 设置单元格属性 | Function(record, rowIndex, column) | - | column add from 3.0 |
| customHeaderCell | 设置头部单元格属性 | Function(column) | - | |
| onFilter | 本地模式下，确定筛选的运行函数, 使用 template 或 jsx 时作为`filter`事件使用 | Function | - | |
| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用，使用 template 或 jsx 时作为`filterDropdownVisibleChange`事件使用 | function(visible) {} | - | |
@ -217,20 +217,20 @@ type Breakpoint = 'xxxl' | 'xxl' | 'xl' | 'lg' | 'md' | 'sm' | 'xs';
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| checkStrictly | checkable 状态下节点选择完全受控（父子数据选中状态不再关联） | boolean | true | 3.0 |
| columnWidth | 自定义列表选择框宽度 | string\|number | - | |
| columnTitle | 自定义列表选择框标题 | string\|VNode | - | |
| columnWidth | 自定义列表选择框宽度 | string\|number | - | |
| fixed | 把选择框列固定在左边 | boolean | - | |
| getCheckboxProps | 选择框的默认属性配置 | Function(record) | - | |
| hideDefaultSelections | 去掉『全选』『反选』两个默认选项 | boolean | false | |
| hideSelectAll | 隐藏全选勾选框与自定义选择项 | boolean | false | 3.0 |
| preserveSelectedRowKeys | 当数据被删除时仍然保留选项的 `key` | boolean | - | 3.0 |
| hideDefaultSelections | 去掉『全选』『反选』两个默认选项 | boolean | false |
| selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | string\[] | \[] |
| selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | string\[] | \[] | |
| selections | 自定义选择项 [配置项](#selection), 设为 `true` 时使用默认选择项 | object\[] \| boolean | true | |
| type | 多选/单选，`checkbox` or `radio` | string | `checkbox` |
| onChange | 选中项发生变化时的回调 | Function(selectedRowKeys, selectedRows) | - |
| onSelect | 用户手动选择/取消选择某列的回调 | Function(record, selected, selectedRows, nativeEvent) | - |
| onSelectAll | 用户手动选择/取消选择所有列的回调 | Function(selected, selectedRows, changeRows) | - |
| onSelectInvert | 用户手动选择反选的回调 | Function(selectedRows) | - |
| type | 多选/单选，`checkbox` or `radio` | string | `checkbox` | |
| onChange | 选中项发生变化时的回调 | Function(selectedRowKeys, selectedRows) | - | |
| onSelect | 用户手动选择/取消选择某列的回调 | Function(record, selected, selectedRows, nativeEvent) | - | |
| onSelectAll | 用户手动选择/取消选择所有列的回调 | Function(selected, selectedRows, changeRows) | - | |
| onSelectInvert | 用户手动选择反选的回调 | Function(selectedRows) | - | |
| onSelectNone | 用户清空选择的回调 | function() | - | 3.0 |
### scroll

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

@ -23,23 +23,23 @@ Ant Design has 3 types of Tabs for different situations.
| --- | --- | --- | --- | --- |
| activeKey(v-model) | Current TabPane's key | string | - | |
| animated | Whether to change tabs with animation. Only works while `tabPosition="top"\|"bottom"` | boolean \| {inkBar:boolean, tabPane:boolean} | `true`, `false` when `type="card"` | |
| destroyInactiveTabPane | Whether destroy inactive TabPane when change tab | boolean | false | |
| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | `false` | } |
| size | preset tab bar size | `large` \| `default` \| `small` | `default` | |
| tabBarGutter | The gap between tabs | number | - | |
| tabBarStyle | Tab bar style object | object | - | |
| tabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` | |
| destroyInactiveTabPane | Whether destroy inactive TabPane when change tab | boolean | false | |
| type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` | |
| tabBarGutter | The gap between tabs | number | - | |
### Tabs Slots
| Slot Name | Description | Type |
| Slot Name | Description | Type | |
| ------------ | ------------------------------ | ----------------- | --- |
| renderTabBar | Replace the TabBar | { DefaultTabBar } | |
| leftExtra | Extra content in tab bar left | - | - |
| rightExtra | Extra content in tab bar right | - | - |
| addIcon | Customize add icon | - | - |
| leftExtra | Extra content in tab bar left | - | - |
| moreIcon | The custom icon of ellipsis | - | - |
| renderTabBar | Replace the TabBar | { DefaultTabBar } | |
| rightExtra | Extra content in tab bar right | - | - |
### Tabs Events

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

@ -22,28 +22,28 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
### Tabs
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| 参数 | 说明 | 类型 | 默认值 | 版本 | |
| --- | --- | --- | --- | --- | --- |
| activeKey(v-model) | 当前激活 tab 面板的 key | string | 无 | |
| animated | 是否使用动画切换 Tabs，在 `tabPosition=top | bottom` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | true, 当 type="card" 时为 false | |
| centered | 标签居中展示 | boolean | false | 3.0 |
| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | |
| size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | `default` | |
| tabBarStyle | tab bar 的样式对象 | object | - | |
| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | `top` | |
| destroyInactiveTabPane | 被隐藏时是否销毁 DOM 结构 | boolean | false | |
| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | `line` | |
| tabBarGutter | tabs 之间的间隙 | number | 无 | |
| activeKey(v-model) | 当前激活 tab 面板的 key | string | 无 | | |
| animated | 是否使用动画切换 Tabs，在 \`tabPosition=top | bottom\` 时有效 | boolean \| {inkBar:boolean, tabPane:boolean} | true, 当 type="card" 时为 false | |
| centered | 标签居中展示 | boolean | false | 3.0 | |
| destroyInactiveTabPane | 被隐藏时是否销毁 DOM 结构 | boolean | false | | |
| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false | | |
| size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | `default` | | |
| tabBarGutter | tabs 之间的间隙 | number | 无 | | |
| tabBarStyle | tab bar 的样式对象 | object | - | | |
| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | `top` | | |
| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | `line` | | |
### Tabs 插槽
| 插槽名称 | 说明 | 参数 |
| 插槽名称 | 说明 | 参数 | |
| ------------ | ------------------------------- | ----------------- | --- |
| renderTabBar | 替换 TabBar，用于二次封装标签头 | { DefaultTabBar } | |
| leftExtra | tab bar 上左侧额外的元素 | - | - |
| rightExtra | tab bar 上右侧额外的元素 | - | - |
| addIcon | 自定义添加按钮 | - | - |
| leftExtra | tab bar 上左侧额外的元素 | - | - |
| moreIcon | 自定义折叠 icon | - | - |
| renderTabBar | 替换 TabBar，用于二次封装标签头 | { DefaultTabBar } | |
| rightExtra | tab bar 上右侧额外的元素 | - | - |
### Tabs 事件
@ -51,8 +51,8 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
| --- | --- | --- |
| change | 切换面板的回调 | Function(activeKey) {} |
| edit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void |
| tabScroll | 滚动 TabBar 是触发 | { direction: 'left' \| 'right' \| 'top' \| 'bottom' } |
| tabClick | tab 被点击的回调 | Function |
| tabScroll | 滚动 TabBar 是触发 | { direction: 'left' \| 'right' \| 'top' \| 'bottom' } |
### Tabs.TabPane

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

@ -29,10 +29,10 @@ Timeline
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| mode | By sending `alternate` the timeline will distribute the nodes to the left and right. | `left` \| `alternate` \| `right` | `left` |
| pending | Set the last ghost node's existence or its content | boolean\|string\|slot | `false` |
| pendingDot | Set the dot of the last ghost node when pending is true | string\|slot | `<LoadingOutlined />` |
| reverse | reverse nodes or not | boolean | false |
| mode | By sending `alternate` the timeline will distribute the nodes to the left and right. | `left` \| `alternate` \| `right` | `left` |
### Timeline.Item
@ -42,5 +42,5 @@ Node of timeline
| --- | --- | --- | --- | --- |
| color | Set the circle's color to `blue`, `red`, `green` or other custom colors | string | `blue` | |
| dot | Customize timeline dot | string\|slot | - | |
| position | Customize node position | `left` \| `right` | - | |
| label | Set the label | string \| slot | - | 3.0 |
| position | Customize node position | `left` \| `right` | - | |

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

@ -30,10 +30,10 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/vJmo00mmgR/Timeline.svg
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| mode | 通过设置 `mode` 可以改变时间轴和内容的相对位置 | `left` \| `alternate` \| `right` | |
| pending | 指定最后一个幽灵节点是否存在或内容 | boolean\|string\|slot | false |
| pendingDot | 当最后一个幽灵节点存在時，指定其时间图点 | string\|slot | `<LoadingOutlined />` |
| reverse | 节点排序 | boolean | false |
| mode | 通过设置 `mode` 可以改变时间轴和内容的相对位置 | `left` \| `alternate` \| `right` |
### Timeline.Item
@ -43,5 +43,5 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/vJmo00mmgR/Timeline.svg
| -------- | ----------------------------------------------- | ----------------- | ------ | ---- |
| color | 指定圆圈颜色 `blue, red, green`，或自定义的色值 | string | blue | |
| dot | 自定义时间轴点 | string\|slot | - | |
| position | 自定义节点位置 | `left` \| `right` | - | |
| label | 设置标签 | string \| slot | - | 3.0 |
| position | 自定义节点位置 | `left` \| `right` | - | |

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

@ -24,10 +24,12 @@ The following APIs are shared by Tooltip, Popconfirm, Popover.
| Property | Description | Type | Default |
| --- | --- | --- | --- |
| align | this value will be merged into placement's config, please refer to the settings [dom-align](https://github.com/yiminghe/dom-align) | Object | - |
| arrowPointAtCenter | Whether the arrow is pointed at the center of target | boolean | `false` |
| autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | `true` |
| color | The background color | string | - |
| defaultVisible | Whether the floating tooltip card is visible by default | boolean | `false` |
| destroyTooltipOnHide | Whether to destroy tooltip on hide | boolean | false |
| getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body`. | Function(triggerNode) | () => document.body |
| mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0.1 |
| mouseLeaveDelay | Delay in seconds, before tooltip is hidden on mouse leave | number | 0.1 |
@ -36,12 +38,10 @@ The following APIs are shared by Tooltip, Popconfirm, Popover.
| placement | The position of the tooltip relative to the target, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` |
| trigger | Tooltip trigger mode | `hover` \| `focus` \| `click` \| `contextmenu` | `hover` |
| visible(v-model) | Whether the floating tooltip card is visible or not | boolean | `false` |
| destroyTooltipOnHide | Whether to destroy tooltip on hide | boolean | false |
| align | this value will be merged into placement's config, please refer to the settings [dom-align](https://github.com/yiminghe/dom-align) | Object | - |
### events
| Events Name | Description | Arguments |
| Events Name | Description | Arguments | |
| --- | --- | --- | --- |
| visibleChange | Callback executed when visibility of the tooltip card is changed | (visible) => void | - |

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

@ -25,10 +25,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg
| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| align | 该值将合并到 placement 的配置中，设置参考 [dom-align](https://github.com/yiminghe/dom-align) | Object | 无 |
| arrowPointAtCenter | 箭头是否指向目标元素中心 | boolean | `false` |
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | `true` |
| color | 背景颜色 | string | 无 |
| defaultVisible | 默认是否显隐 | boolean | false |
| destroyTooltipOnHide | 隐藏后是否销毁 tooltip | boolean | false |
| getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | Function(triggerNode) | () => document.body |
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 |
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 |
@ -37,8 +39,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg
| placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | top |
| trigger | 触发行为，可选 `hover/focus/click/contextmenu` | string | hover |
| visible(v-model) | 用于手动控制浮层显隐 | boolean | false |
| destroyTooltipOnHide | 隐藏后是否销毁 tooltip | boolean | false |
| align | 该值将合并到 placement 的配置中，设置参考 [dom-align](https://github.com/yiminghe/dom-align) | Object | 无 |
### 事件

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

@ -20,14 +20,14 @@ One or more elements can be selected from either column, one click on the proper
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| dataSource | Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in `targetKeys` prop. | \[{key: string.isRequired,title: string.isRequired,description: string,disabled: bool}\] | \[] | |
| dataSource | Used for setting the source data. The elements that are part of this array will be present the left column. Except the elements whose keys are included in `targetKeys` prop. | \[{key: string.isRequired,title: string.isRequired,description: string,disabled: bool}] | \[] | |
| disabled | Whether disabled transfer | boolean | false | |
| filterOption | A function to determine whether an item should show in search result list | (inputValue, option): boolean | | |
| footer | customize the progress dot by setting a scoped slot | slot="footer" slot-scope="props" | | |
| listStyle | A custom CSS style used for rendering the transfer columns. | CSSProperties | | |
| locale | i18n text including filter, empty text, item unit, etc | object | `{ itemUnit: 'item', itemsUnit: 'items', notFoundContent: 'The list is empty', searchPlaceholder: 'Search here' }` | |
| oneWay | Display as single direction style | boolean | false | 3.0.0 |
| operations | A set of operations that are sorted from top to bottom. | string\[] | \['>', '<'] | |
| operations | A set of operations that are sorted from top to bottom. | string\[] | \['>', '&lt;'] | |
| operationStyle | A custom CSS style used for rendering the operations column | CSSProperties | - | 3.0.0 |
| pagination | Use pagination. Not work in render props | boolean \| { pageSize: number } | false | 3.0.0 |
| render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a element which is generated from that record. Also, it can return a plain object with `value` and `label`, `label` is a element and `value` is for title | Function(record) \| slot | | |
@ -61,14 +61,14 @@ Transfer accept `children` to customize render list, using follow props:
}
```
| Property | Description | Type | Version |
| --------------- | ----------------------- | ----------------------------------- | ------- |
| direction | List render direction | 'left' \| 'right' | |
| disabled | Disable list or not | boolean | |
| filteredItems | Filtered items | TransferItem[] | |
| onItemSelect | Select item | (key: string, selected: boolean) | |
| onItemSelectAll | Select a group of items | (keys: string[], selected: boolean) | |
| selectedKeys | Selected items | string[] | |
| Property | Description | Type | Version |
| --------------- | ----------------------- | ------------------------------------ | ------- |
| direction | List render direction | 'left' \| 'right' | |
| disabled | Disable list or not | boolean | |
| filteredItems | Filtered items | TransferItem\[] | |
| selectedKeys | Selected items | string\[] | |
| onItemSelect | Select item | (key: string, selected: boolean) | |
| onItemSelectAll | Select a group of items | (keys: string\[], selected: boolean) | |
#### example

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

@ -21,14 +21,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QAXskNI4G/Transfer.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| dataSource | 数据源，其中的数据将会被渲染到左边一栏中，`targetKeys` 中指定的除外。 | \[{key: string.isRequired,title: string.isRequired,description: string,disabled: bool}\]\[] | \[] | |
| dataSource | 数据源，其中的数据将会被渲染到左边一栏中，`targetKeys` 中指定的除外。 | \[{key: string.isRequired,title: string.isRequired,description: string,disabled: bool}]\[] | \[] | |
| disabled | 是否禁用 | boolean | false | |
| filterOption | 接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | (inputValue, option): boolean | | |
| footer | 可以设置为一个 作用域插槽 | slot="footer" slot-scope="props" | | |
| listStyle | 两个穿梭框的自定义样式 | CSSProperties | | |
| locale | 各种语言 | object | `{ itemUnit: '项', itemsUnit: '项', notFoundContent: '列表为空', searchPlaceholder: '请输入搜索内容' }` | |
| oneWay | 展示为单向样式 | boolean | false | 3.0.0 |
| operations | 操作文案集合，顺序从上至下 | string\[] | \['>', '<'] | |
| operations | 操作文案集合，顺序从上至下 | string\[] | \['>', '&lt;'] | |
| operationStyle | 操作栏的自定义样式 | CSSProperties | - | 3.0.0 |
| pagination | 使用分页样式，自定义渲染列表下无效 | boolean \| { pageSize: number } | flase | 3.0.0 |
| render | 每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 element。或者返回一个普通对象，其中 `label` 字段为 element，`value` 字段为 title | Function(record)\| slot | | |
@ -62,14 +62,14 @@ Transfer 支持接收 `children` 自定义渲染列表，并返回以下参数
}
```
| 参数 | 说明 | 类型 | 版本 |
| ------------- | -------------- | ----------------------------------- | ---- |
| direction | 渲染列表的方向 | 'left' \| 'right' | |
| disabled | 是否禁用列表 | boolean | |
| filteredItems | 过滤后的数据 | TransferItem[] | |
| selectedKeys | 选中的条目 | string[] | |
| itemSelect | 勾选条目 | (key: string, selected: boolean) | |
| itemSelectAll | 勾选一组条目 | (keys: string[], selected: boolean) | |
| 参数 | 说明 | 类型 | 版本 |
| ------------- | -------------- | ------------------------------------ | ---- |
| direction | 渲染列表的方向 | 'left' \| 'right' | |
| disabled | 是否禁用列表 | boolean | |
| filteredItems | 过滤后的数据 | TransferItem\[] | |
| itemSelect | 勾选条目 | (key: string, selected: boolean) | |
| itemSelectAll | 勾选一组条目 | (keys: string\[], selected: boolean) | |
| selectedKeys | 选中的条目 | string\[] | |
#### 参考示例

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

@ -15,57 +15,57 @@ Tree selection control.
### Tree props
| Property | Description | Type | Default | Version |
| Property | Description | Type | Default | Version | |
| --- | --- | --- | --- | --- | --- |
| allowClear | Whether allow clear | boolean | false | |
| defaultValue | To set the initial selected treeNode(s). | string\|string\[] | - | |
| disabled | Disabled or not | boolean | false | |
| dropdownClassName | 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 | |
| dropdownStyle | To set the style of the dropdown menu | object | - | |
| filterTreeNode | Whether to filter treeNodes by input value. The value of `treeNodeFilterProp` is used for filtering by default. | boolean\|Function(inputValue: string, treeNode: TreeNode) (should return boolean) | Function | |
| getPopupContainer | To set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. | Function(triggerNode) | () => document.body | |
| labelInValue | whether to embed label in value, turn the format of value from `string` to `{value: string, label: VNode, halfChecked: string[]}` | boolean | false | |
| listHeight | Config popup height | number | 256 | |
| loadData | Load data asynchronously. | function(node) | - | |
| maxTagCount | Max tag count to show | number | - | |
| maxTagPlaceholder | Placeholder for not showing tags | slot/function(omittedValues) | - | |
| multiple | Support multiple or not, will be `true` when enable `treeCheckable`. | boolean | false | |
| placeholder | Placeholder of the select input | string\|slot | - | |
| searchPlaceholder | Placeholder of the search input | string\|slot | - | |
| searchValue(v-model) | work with `search` event to make search value controlled. | string | - | |
| treeIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false | |
| showCheckedStrategy | The way show selected item in box. **Default:** just show child nodes. **`TreeSelect.SHOW_ALL`:** show all checked treeNodes (include parent treeNode). **`TreeSelect.SHOW_PARENT`:** show checked treeNodes (just show parent treeNode). | enum { TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD | |
| showSearch | Whether to display a search input in the dropdown menu(valid only in the single mode) | boolean | false | |
| size | To set the size of the select input, options: `large` `small` | string | 'default' | |
| suffixIcon | The custom suffix icon | VNode \| slot | - | |
| treeCheckable | Whether to show checkbox on the treeNodes | boolean | false | |
| treeCheckStrictly | Whether to check nodes precisely (in the `checkable` mode), means parent and child nodes are not associated, and it will make `labelInValue` be true | boolean | false | |
| treeData | Data of the treeNodes, manual construction work is no longer needed if this property has been set(ensure the Uniqueness of each value) | array\<{ value, title, children, \[disabled, disableCheckbox, selectable] }> | \[] | |
| replaceFields | Replace the title,value, key and children fields in treeNode with the corresponding fields in treeData | object | { children:'children', label:'title', key:'key', value: 'value' } | | 1.6.1 (3.0.0 deprecated) |
| allowClear | Whether allow clear | boolean | false | | |
| defaultValue | To set the initial selected treeNode(s). | string\|string\[] | - | | |
| disabled | Disabled or not | boolean | false | | |
| dropdownClassName | 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 | | |
| dropdownStyle | To set the style of the dropdown menu | object | - | | |
| fieldNames | Replace the title,value, key and children fields in treeNode with the corresponding fields in treeData | object | {children:'children', label:'title', key:'key', value: 'value' } | | 3.0.0 |
| treeDataSimpleMode | Enable simple mode of treeData. Changes the `treeData` schema to: \[{id:1, pId:0, value:'1', title:"test1",...},...] where pId is parent node's id). It is possible to replace the default `id` and `pId` keys by providing object to `treeDataSimpleMode` | false\|object\<{ id: string, pId: string, rootPId: null }> | false | |
| treeDefaultExpandAll | Whether to expand all treeNodes by default | boolean | false | |
| treeDefaultExpandedKeys | Default expanded treeNodes | string\[] \| number\[] | - | |
| treeExpandedKeys(v-model) | Set expanded keys | string\[] \| number\[] | - | |
| treeLine | Show the line. Ref [Tree - showLine](/components/tree/#components-tree-demo-line) | boolean \| object | false | 3.0 |
| treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | 'value' | |
| treeNodeLabelProp | Will render as content of select | string | 'title' | |
| value(v-model) | To set the current selected treeNode(s). | string\|string\[] | - | |
| virtual | Disable virtual scroll when set to false | boolean | true | 3.0 |
| title | custom title | slot | | 3.0.0 |
| notFoundContent | Specify content to show when no result matches | slot | `Not Found` | |
| tagRender | Customize tag render when `multiple` | (props) => slot | - | 3.0 |
| filterTreeNode | Whether to filter treeNodes by input value. The value of `treeNodeFilterProp` is used for filtering by default. | boolean\|Function(inputValue: string, treeNode: TreeNode) (should return boolean) | Function | | |
| getPopupContainer | To set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. | Function(triggerNode) | () => document.body | | |
| labelInValue | whether to embed label in value, turn the format of value from `string` to `{value: string, label: VNode, halfChecked: string[]}` | boolean | false | | |
| listHeight | Config popup height | number | 256 | | |
| loadData | Load data asynchronously. | function(node) | - | | |
| maxTagCount | Max tag count to show | number | - | | |
| maxTagPlaceholder | Placeholder for not showing tags | slot/function(omittedValues) | - | | |
| multiple | Support multiple or not, will be `true` when enable `treeCheckable`. | boolean | false | | |
| notFoundContent | Specify content to show when no result matches | slot | `Not Found` | | |
| placeholder | Placeholder of the select input | string\|slot | - | | |
| replaceFields | Replace the title,value, key and children fields in treeNode with the corresponding fields in treeData | object | { children:'children', label:'title', key:'key', value: 'value' } | | 1.6.1 (3.0.0 deprecated) |
| searchPlaceholder | Placeholder of the search input | string\|slot | - | | |
| searchValue(v-model) | work with `search` event to make search value controlled. | string | - | | |
| showCheckedStrategy | The way show selected item in box. **Default:** just show child nodes. **`TreeSelect.SHOW_ALL`:** show all checked treeNodes (include parent treeNode). **`TreeSelect.SHOW_PARENT`:** show checked treeNodes (just show parent treeNode). | enum { TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD | | |
| showSearch | Whether to display a search input in the dropdown menu(valid only in the single mode) | boolean | false | | |
| size | To set the size of the select input, options: `large` `small` | string | 'default' | | |
| suffixIcon | The custom suffix icon | VNode \| slot | - | | |
| tagRender | Customize tag render when `multiple` | (props) => slot | - | 3.0 | |
| title | custom title | slot | | 3.0.0 | |
| treeCheckable | Whether to show checkbox on the treeNodes | boolean | false | | |
| treeCheckStrictly | Whether to check nodes precisely (in the `checkable` mode), means parent and child nodes are not associated, and it will make `labelInValue` be true | boolean | false | | |
| treeData | Data of the treeNodes, manual construction work is no longer needed if this property has been set(ensure the Uniqueness of each value) | array\\&lt;{ value, title, children, \[disabled, disableCheckbox, selectable] }> | \[] | | |
| treeDataSimpleMode | Enable simple mode of treeData. Changes the `treeData` schema to: \[{id:1, pId:0, value:'1', title:"test1",...},...] where pId is parent node's id). It is possible to replace the default `id` and `pId` keys by providing object to `treeDataSimpleMode` | false\|object\\&lt;{ id: string, pId: string, rootPId: null }> | false | | |
| treeDefaultExpandAll | Whether to expand all treeNodes by default | boolean | false | | |
| treeDefaultExpandedKeys | Default expanded treeNodes | string\[] \| number\[] | - | | |
| treeExpandedKeys(v-model) | Set expanded keys | string\[] \| number\[] | - | | |
| treeIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false | | |
| treeLine | Show the line. Ref [Tree - showLine](/components/tree/#components-tree-demo-line) | boolean \| object | false | 3.0 | |
| treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | 'value' | | |
| treeNodeLabelProp | Will render as content of select | string | 'title' | | |
| value(v-model) | To set the current selected treeNode(s). | string\|string\[] | - | | |
| virtual | Disable virtual scroll when set to false | boolean | true | 3.0 | |
### Events
| Events Name | Description | Arguments | Version |
| --- | --- | --- | --- |
| change | A callback function, can be executed when selected treeNodes or input value change | function(value, label, extra) | |
| dropdownVisibleChange | Called when dropdown open | function(open) | 3.0 |
| search | A callback function, can be executed when the search input changes. | function(value: string) | |
| select | A callback function, can be executed when you select a treeNode. | function(value, node, extra) | |
| treeExpand | A callback function, can be executed when treeNode expanded | function(expandedKeys) | |
| dropdownVisibleChange | Called when dropdown open | function(open) | 3.0 |
### Tree Methods
@ -80,12 +80,12 @@ Tree selection control.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| selectable | can be selected | boolean | true | |
| checkable | When Tree is checkable, set TreeNode display Checkbox or not | boolean | - | |
| disableCheckbox | Disables the checkbox of the treeNode | boolean | false | |
| disabled | Disabled or not | boolean | false | |
| isLeaf | Leaf node or not | boolean | false | |
| key | Required property, should be unique in the tree | string \| number | - | |
| selectable | can be selected | boolean | true | |
| title | Content showed on the treeNodes | string | '---' | |
| value | Will be treated as `treeNodeFilterProp` by default, should be unique in the tree | string | - | |

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

@ -16,57 +16,57 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
### Tree props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| 参数 | 说明 | 类型 | 默认值 | 版本 | |
| --- | --- | --- | --- | --- | --- |
| allowClear | 显示清除按钮 | boolean | false | |
| defaultValue | 指定默认选中的条目 | string/string\[] | - | |
| disabled | 是否禁用 | boolean | false | |
| dropdownClassName | 下拉菜单的 className 属性 | string | - | |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true | |
| dropdownStyle | 下拉菜单的样式 | object | - | |
| filterTreeNode | 是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值 | boolean\|Function(inputValue: string, treeNode: TreeNode) (函数需要返回 bool 值) | Function | |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | Function(triggerNode) | () => document.body | |
| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 value 类型从 `string` 变为 `{value: string, label: VNode, halfChecked(treeCheckStrictly 时有效): string[] }` 的格式 | boolean | false | |
| listHeight | 设置弹窗滚动高度 | number | 256 | |
| loadData | 异步加载数据 | function(node) | - | |
| maxTagCount | 最多显示多少个 tag | number | - | |
| maxTagPlaceholder | 隐藏 tag 时显示的内容 | slot/function(omittedValues) | - | |
| multiple | 支持多选（当设置 treeCheckable 时自动变为 true） | boolean | false | |
| placeholder | 选择框默认文字 | string\|slot | - | |
| searchPlaceholder | 搜索框默认文字 | string\|slot | - | |
| searchValue(v-model) | 搜索框的值，可以通过 `search` 事件获取用户输入 | string | - | |
| treeIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false | |
| showCheckedStrategy | 定义选中项回填的方式。`TreeSelect.SHOW_ALL`: 显示所有选中节点(包括父节点). `TreeSelect.SHOW_PARENT`: 只显示父节点(当父节点下所有子节点都选中时). 默认只显示子节点. | enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD | |
| showSearch | 在下拉中显示搜索框(仅在单选模式下生效) | boolean | false | |
| size | 选择框大小，可选 `large` `small` | string | 'default' | |
| suffixIcon | 自定义的选择框后缀图标 | VNode \| slot | - | |
| treeCheckable | 显示 checkbox | boolean | false | |
| treeCheckStrictly | checkable 状态下节点选择完全受控（父子节点选中状态不再关联），会使得 `labelInValue` 强制为 true | boolean | false | |
| treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（value 在整个树范围内唯一） | array&lt;{value, label, children, [disabled, disableCheckbox, selectable]}> | \[] | |
| replaceFields | 替换 treeNode 中 title,value,key,children 字段为 treeData 中对应的字段 | object | {children:'children', label:'title', key:'key', value: 'value' } | | 1.6.1 (3.0.0 废弃) |
| allowClear | 显示清除按钮 | boolean | false | | |
| defaultValue | 指定默认选中的条目 | string/string\[] | - | | |
| disabled | 是否禁用 | boolean | false | | |
| dropdownClassName | 下拉菜单的 className 属性 | string | - | | |
| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true | | |
| dropdownStyle | 下拉菜单的样式 | object | - | | |
| fieldNames | 替换 treeNode 中 title,value,key,children 字段为 treeData 中对应的字段 | object | {children:'children', label:'title', key:'key', value: 'value' } | | 3.0.0 |
| treeDataSimpleMode | 使用简单格式的 treeData，具体设置参考可设置的类型 (此时 treeData 应变为这样的数据结构: \[{id:1, pId:0, value:'1', label:"test1",...},...], `pId` 是父节点的 id) | false\|Array&lt;{ id: string, pId: string, rootPId: null }> | false | |
| treeDefaultExpandAll | 默认展开所有树节点 | boolean | false | |
| treeDefaultExpandedKeys | 默认展开的树节点 | string\[] \| number\[] | - | |
| treeExpandedKeys(v-model) | 设置展开的树节点 | string\[] \| number\[] | - | |
| treeLine | 是否展示线条样式，请参考 [Tree - showLine](/components/tree/#components-tree-demo-line) | boolean \| object | false | 3.0 |
| treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | string | 'value' | |
| treeNodeLabelProp | 作为显示的 prop 设置 | string | 'title' | |
| value(v-model) | 指定当前选中的条目 | string/string\[] | - | |
| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 3.0 |
| title | 自定义标题 | slot | | 3.0.0 |
| notFoundContent | 当下拉列表为空时显示的内容 | slot | `Not Found` | |
| tagRender | 自定义 tag 内容，多选时生效 | slot | - | 3.0 |
| filterTreeNode | 是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值 | boolean\|Function(inputValue: string, treeNode: TreeNode) (函数需要返回 bool 值) | Function | | |
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。 | Function(triggerNode) | () => document.body | | |
| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 value 类型从 `string` 变为 `{value: string, label: VNode, halfChecked(treeCheckStrictly 时有效): string[] }` 的格式 | boolean | false | | |
| listHeight | 设置弹窗滚动高度 | number | 256 | | |
| loadData | 异步加载数据 | function(node) | - | | |
| maxTagCount | 最多显示多少个 tag | number | - | | |
| maxTagPlaceholder | 隐藏 tag 时显示的内容 | slot/function(omittedValues) | - | | |
| multiple | 支持多选（当设置 treeCheckable 时自动变为 true） | boolean | false | | |
| notFoundContent | 当下拉列表为空时显示的内容 | slot | `Not Found` | | |
| placeholder | 选择框默认文字 | string\|slot | - | | |
| replaceFields | 替换 treeNode 中 title,value,key,children 字段为 treeData 中对应的字段 | object | {children:'children', label:'title', key:'key', value: 'value' } | | 1.6.1 (3.0.0 废弃) |
| searchPlaceholder | 搜索框默认文字 | string\|slot | - | | |
| searchValue(v-model) | 搜索框的值，可以通过 `search` 事件获取用户输入 | string | - | | |
| showCheckedStrategy | 定义选中项回填的方式。`TreeSelect.SHOW_ALL`: 显示所有选中节点(包括父节点). `TreeSelect.SHOW_PARENT`: 只显示父节点(当父节点下所有子节点都选中时). 默认只显示子节点. | enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD | | |
| showSearch | 在下拉中显示搜索框(仅在单选模式下生效) | boolean | false | | |
| size | 选择框大小，可选 `large` `small` | string | 'default' | | |
| suffixIcon | 自定义的选择框后缀图标 | VNode \| slot | - | | |
| tagRender | 自定义 tag 内容，多选时生效 | slot | - | 3.0 | |
| title | 自定义标题 | slot | | 3.0.0 | |
| treeCheckable | 显示 checkbox | boolean | false | | |
| treeCheckStrictly | checkable 状态下节点选择完全受控（父子节点选中状态不再关联），会使得 `labelInValue` 强制为 true | boolean | false | | |
| treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（value 在整个树范围内唯一） | array&lt;{value, label, children, [disabled, disableCheckbox, selectable]}> | \[] | | |
| treeDataSimpleMode | 使用简单格式的 treeData，具体设置参考可设置的类型 (此时 treeData 应变为这样的数据结构: \[{id:1, pId:0, value:'1', label:"test1",...},...], `pId` 是父节点的 id) | false\|Array&lt;{ id: string, pId: string, rootPId: null }> | false | | |
| treeDefaultExpandAll | 默认展开所有树节点 | boolean | false | | |
| treeDefaultExpandedKeys | 默认展开的树节点 | string\[] \| number\[] | - | | |
| treeExpandedKeys(v-model) | 设置展开的树节点 | string\[] \| number\[] | - | | |
| treeIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false | | |
| treeLine | 是否展示线条样式，请参考 [Tree - showLine](/components/tree/#components-tree-demo-line) | boolean \| object | false | 3.0 | |
| treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | string | 'value' | | |
| treeNodeLabelProp | 作为显示的 prop 设置 | string | 'title' | | |
| value(v-model) | 指定当前选中的条目 | string/string\[] | - | | |
| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 3.0 | |
### 事件
| 事件名称 | 说明 | 回调参数 | 版本 |
| --------------------- | ---------------------- | ----------------------------- | ---- |
| change | 选中树节点时调用此函数 | function(value, label, extra) | |
| dropdownVisibleChange | 展开下拉菜单的回调 | function(open) | 3.0 |
| search | 文本框值变化时回调 | function(value: string) | |
| select | 被选中时调用 | function(value, node, extra) | |
| treeExpand | 展开节点时调用 | function(expandedKeys) | |
| dropdownVisibleChange | 展开下拉菜单的回调 | function(open) | 3.0 |
### Tree 方法
@ -81,11 +81,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| selectable | 是否可选 | boolean | true | |
| checkable | 当树为 checkable 时，设置独立节点是否展示 Checkbox | boolean | - | |
| disableCheckbox | 禁掉 checkbox | boolean | false | |
| disabled | 是否禁用 | boolean | false | |
| isLeaf | 是否是叶子节点 | boolean | false | |
| key | 此项必须设置（其值在整个树范围内唯一） | string \| number | - | |
| selectable | 是否可选 | boolean | true | |
| title | 树节点显示的内容 | string\|slot | '---' | |
| value | 默认根据此属性值进行筛选（其值在整个树范围内唯一） | string | - | |

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

@ -17,8 +17,6 @@ Almost anything can be represented in a tree structure. Examples include directo
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| treeData | treeNode of tree, please use `treeNodes` before v1.1.4 | [TreeNode[]](#TreeNode) | - | |
| fieldNames | Replace the title,key and children fields in treeNode with the corresponding fields in treeData | object | { children:'children', title:'title', key:'key' } | 3.0.0 |
| autoExpandParent | Whether to automatically expand a parent treeNode | boolean | true | |
| blockNode | Whether treeNode fill remaining horizontal space | boolean | false | |
| checkable | Adds a `Checkbox` before the treeNodes | boolean | false | |
@ -28,6 +26,7 @@ Almost anything can be represented in a tree structure. Examples include directo
| disabled | whether disabled the tree | bool | false | |
| draggable | Specifies whether this Tree is draggable (IE > 8) | boolean | false | |
| expandedKeys(v-model) | (Controlled) Specifies the keys of the expanded treeNodes | string\[] \| number\[] | \[] | |
| fieldNames | Replace the title,key and children fields in treeNode with the corresponding fields in treeData | object | { children:'children', title:'title', key:'key' } | 3.0.0 |
| filterTreeNode | Defines a function to filter (highlight) treeNodes. When the function returns `true`, the corresponding treeNode will be highlighted | function(node) | - | |
| loadData | Load data asynchronously | function(node) | - | |
| loadedKeys | (Controlled) Set loaded tree nodes. Need work with `loadData` | string\[] \| number\[] | \[] | |
@ -35,9 +34,10 @@ Almost anything can be represented in a tree structure. Examples include directo
| selectable | whether can be selected | boolean | true | |
| selectedKeys(v-model) | (Controlled) Specifies the keys of the selected treeNodes | string\[] \| number\[] | - | |
| showIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false | |
| switcherIcon | customize collapse/expand icon of tree node | slot | - | |
| showLine | Shows a connecting line | boolean \| {showLeafIcon: boolean}(3.0+) | false | |
| switcherIcon | customize collapse/expand icon of tree node | slot | - | |
| title | custom title | slot | | 2.0.0 |
| treeData | treeNode of tree, please use `treeNodes` before v1.1.4 | [TreeNode\[\]](#TreeNode) | - | |
| virtual | Disable virtual scroll when set to false | boolean | true | 3.0 |
### Events
@ -60,15 +60,15 @@ Almost anything can be represented in a tree structure. Examples include directo
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| class | className | string | - | |
| style | style | string\|object | - | |
| checkable | When Tree is checkable, set TreeNode display Checkbox or not | boolean | - | |
| class | className | string | - | |
| disableCheckbox | Disables the checkbox of the treeNode | boolean | false | |
| disabled | Disables the treeNode | boolean | false | |
| icon | customize icon. When you pass component, whose render will receive full TreeNode props as component props | slot\|slot-scope | - | |
| isLeaf | Determines if this is a leaf node(effective when `loadData` is specified) | boolean | false | |
| key | Used with (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. P.S.: It must be unique in all of treeNodes of the tree! | string \| number | internal calculated position of treeNode | |
| selectable | Set whether the treeNode can be selected | boolean | true | |
| style | style | string\|object | - | |
| title | Title | string | '---' | |
### DirectoryTree props

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

@ -16,30 +16,30 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
### Tree props
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| 参数 | 说明 | 类型 | 默认值 | 版本 | |
| --- | --- | --- | --- | --- | --- |
| blockNode | 是否节点占据一行 | boolean | false | |
| treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一） | [TreeNode[]](#TreeNode) | -- | |
| fieldNames | 替换 treeNode 中 title,key,children 字段为 treeData 中对应的字段 | object | {children:'children', title:'title', key:'key' } | 3.0.0 |
| autoExpandParent | 是否自动展开父节点 | boolean | true | |
| checkable | 节点前添加 Checkbox 复选框 | boolean | false | |
| checkedKeys(v-model) | （受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点 key，则子节点自动选中；相应当子节点 key 都传入，父节点也自动选中。当设置`checkable`和`checkStrictly`，它是一个有`checked`和`halfChecked`属性的对象，并且父子节点的选中与否不再关联 | string\[] \| number\[] \| {checked: string\[] \| number\[], halfChecked: string\[] \| number\[]} | \[] | |
| checkStrictly | checkable 状态下节点选择完全受控（父子节点选中状态不再关联） | boolean | false | |
| defaultExpandAll | 默认展开所有树节点, 如果是异步数据，需要在数据返回后再实例化，建议用 v-if="data.length"；当有 expandedKeys 时，defaultExpandAll 将失效 | boolean | false | |
| disabled | 将树禁用 | bool | false | |
| draggable | 设置节点可拖拽 | boolean | false | |
| expandedKeys(v-model) | （受控）展开指定的树节点 | string\[] \| number\[] | \[] | |
| filterTreeNode | 按需筛选树节点（高亮），返回 true | function(node) | - | |
| loadData | 异步加载数据 | function(node) | - | |
| loadedKeys | （受控）已经加载的节点，需要配合 `loadData` 使用 | string\[] \| number\[] | \[] | |
| multiple | 支持点选多个节点（节点本身） | boolean | false | |
| autoExpandParent | 是否自动展开父节点 | boolean | true | | |
| blockNode | 是否节点占据一行 | boolean | false | | |
| checkable | 节点前添加 Checkbox 复选框 | boolean | false | | |
| checkedKeys(v-model) | （受控）选中复选框的树节点（注意：父子节点有关联，如果传入父节点 key，则子节点自动选中；相应当子节点 key 都传入，父节点也自动选中。当设置`checkable`和`checkStrictly`，它是一个有`checked`和`halfChecked`属性的对象，并且父子节点的选中与否不再关联 | string\[] \| number\[] \| {checked: string\[] \| number\[], halfChecked: string\[] \| number\[]} | \[] | | |
| checkStrictly | checkable 状态下节点选择完全受控（父子节点选中状态不再关联） | boolean | false | | |
| defaultExpandAll | 默认展开所有树节点, 如果是异步数据，需要在数据返回后再实例化，建议用 v-if="data.length"；当有 expandedKeys 时，defaultExpandAll 将失效 | boolean | false | | |
| disabled | 将树禁用 | bool | false | | |
| draggable | 设置节点可拖拽 | boolean | false | | |
| expandedKeys(v-model) | （受控）展开指定的树节点 | string\[] \| number\[] | \[] | | |
| fieldNames | 替换 treeNode 中 title,key,children 字段为 treeData 中对应的字段 | object | {children:'children', title:'title', key:'key' } | 3.0.0 | |
| filterTreeNode | 按需筛选树节点（高亮），返回 true | function(node) | - | | |
| loadData | 异步加载数据 | function(node) | - | | |
| loadedKeys | （受控）已经加载的节点，需要配合 `loadData` 使用 | string\[] \| number\[] | \[] | | |
| multiple | 支持点选多个节点（节点本身） | boolean | false | | |
| selectable | 是否可选中 | boolean | true | | |
| selectedKeys(v-model) | （受控）设置选中的树节点 | string\[] \| number\[] | - | |
| showIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false | |
| switcherIcon | 自定义树节点的展开/折叠图标 | slot | - | |
| showLine | 是否展示连接线 | boolean \| {showLeafIcon: boolean}(3.0+) | false | |
| title | 自定义标题 | slot | | 2.0.0 |
| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 3.0 |
| selectedKeys(v-model) | （受控）设置选中的树节点 | string\[] \| number\[] | - | | |
| showIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false | | |
| showLine | 是否展示连接线 | boolean \| {showLeafIcon: boolean}(3.0+) | false | | |
| switcherIcon | 自定义树节点的展开/折叠图标 | slot | - | | |
| title | 自定义标题 | slot | | 2.0.0 | |
| treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一） | [TreeNode\[\]](#TreeNode) | -- | | |
| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 3.0 | |
### 事件
@ -61,15 +61,15 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| class | 节点的 class | string | - | |
| style | 节点的 style | string\|object | - | |
| checkable | 当树为 checkable 时，设置独立节点是否展示 Checkbox | boolean | - | |
| class | 节点的 class | string | - | |
| disableCheckbox | 禁掉 checkbox | boolean | false | |
| disabled | 禁掉响应 | boolean | false | |
| icon | 自定义图标。可接收组件，props 为当前节点 props | slot\|slot-scope | - | |
| isLeaf | 设置为叶子节点(设置了`loadData`时有效) | boolean | false | |
| key | 被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意：整个树范围内的所有节点的 key 值不能重复！ | string \| number | 内部计算出的节点位置 | |
| selectable | 设置节点是否可被选中 | boolean | true | |
| style | 节点的 style | string\|object | - | |
| title | 标题 | string | '---' | |
### DirectoryTree props

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

@ -20,6 +20,7 @@ Basic text writing, including headings, body text, lists, and more.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| code | Code style | boolean | false | |
| content(v-model) | When using ellipsis or editable, use content instead of children | string | - | |
| copyable | Whether to be copyable, customize it via setting an object | boolean \| [copyable](#copyable) | false | [copyable](#copyable) |
| delete | Deleted line style | boolean | false | |
| disabled | Disabled content | boolean | false | |
@ -30,13 +31,13 @@ Basic text writing, including headings, body text, lists, and more.
| strong | Bold style | boolean | false | |
| type | Content type | `secondary` \| `success` \| `warning` \| `danger` | - | |
| underline | Underlined style | boolean | false | |
| content(v-model) | When using ellipsis or editable, use content instead of children | string | - | |
### Typography.Title
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| code | Code style | boolean | false | |
| content(v-model) | When using ellipsis or editable, use content instead of children | string | - | |
| copyable | Whether to be copyable, customize it via setting an object | boolean \| [copyable](#copyable) | false | [copyable](#copyable) |
| delete | Deleted line style | boolean | false | |
| disabled | Disabled content | boolean | false | |
@ -46,13 +47,13 @@ Basic text writing, including headings, body text, lists, and more.
| mark | Marked style | boolean | false | |
| type | Content type | `secondary` \| `success` \| `warning` \| `danger` | - | |
| underline | Underlined style | boolean | false | |
| content(v-model) | When using ellipsis or editable, use content instead of children | string | - | |
### Typography.Paragraph
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| code | Code style | boolean | false | |
| content(v-model) | When using ellipsis or editable, use content instead of children | string | - | |
| copyable | Whether to be copyable, customize it via setting an object | boolean \| [copyable](#copyable) | false | [copyable](#copyable) |
| delete | Deleted line style | boolean | false | |
| disabled | Disabled content | boolean | false | |
@ -62,17 +63,16 @@ Basic text writing, including headings, body text, lists, and more.
| strong | Bold style | boolean | false | |
| type | Content type | `secondary` \| `success` \| `warning` \| `danger` | - | |
| underline | Underlined style | boolean | false | |
| content(v-model) | When using ellipsis or editable, use content instead of children | string | - | |
### slots
| Name | Description | Property | Default | Version |
| --- | --- | --- | --- | --- |
| editableIcon | Custom editable icon | - | &lt;EditOutlined /> | |
| editableEnterIcon | Custom "enter" icon in the edit field | `{className: string}` | `<EnterOutlined />` | 3.0 |
| editableTooltip | Custom tooltip text, hide when `editable.tooltip = false` | - | `Edit` | |
| copyableIcon | Custom copy icon | `{ copied: boolean }` | `copied ? <CheckOutlined /> : <CopyOutlined />` | |
| copyableTooltip | Custom tooltip text, hide when `copyable.tooltip = false` | `{ copied: boolean }` | `copied ? 'Copied' : 'Copy'` | |
| editableEnterIcon | Custom "enter" icon in the edit field | `{className: string}` | `<EnterOutlined />` | 3.0 |
| editableIcon | Custom editable icon | - | &lt;EditOutlined /> | |
| editableTooltip | Custom tooltip text, hide when `editable.tooltip = false` | - | `Edit` | |
| ellipsisSymbol | Custom description of ellipsis | - | - | |
| ellipsisTooltip | Show tooltip when ellipsis | - | - | |
@ -114,13 +114,13 @@ Basic text writing, including headings, body text, lists, and more.
| editing | Whether to be editable | boolean | false | |
| maxlength | `maxlength` attribute of textarea | number | - | |
| tooltip | Whether to show tooltip | boolean | true | |
| triggerType | Edit mode trigger - icon, text or both (not specifying icon as trigger hides it) | Array&lt;`icon`\|`text`> | \[`icon`] | |
| onCancel | Called when type ESC to exit editable state | function | - | |
| onCancel | Called when type ESC to exit editable state | function | - | |
| onChange | Called when input at textarea | function(event) | - | |
| onEnd | Called when type ENTER to exit editable state | function | - | |
| onStart | Called when enter editable state | function | - | |
| onCancel | Called when type ESC to exit editable state | function | - | |
| onEnd | Called when type ENTER to exit editable state | function | - | |
| triggerType | Edit mode trigger - icon, text or both (not specifying icon as trigger hides it) | Array&lt;`icon`\|`text`> | \[`icon`] | |
| onStart | Called when enter editable state | function | - | |
### ellipsis

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

@ -21,6 +21,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| code | 添加代码样式 | boolean | false | |
| content(v-model) | 当使用 ellipsis 或 editable 时，使用 content 代替 children | string | - | |
| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| [copyable](#copyable) | false | [copyable](#copyable) |
| delete | 添加删除线样式 | boolean | false | |
| disabled | 禁用文本 | boolean | false | |
@ -31,13 +32,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
| strong | 是否加粗 | boolean | false | |
| type | 文本类型 | `secondary` \| `success` \| `warning` \| `danger` | - | |
| underline | 添加下划线样式 | boolean | false | |
| content(v-model) | 当使用 ellipsis 或 editable 时，使用 content 代替 children | string | - | |
### Typography.Title
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| code | 添加代码样式 | boolean | false | |
| content(v-model) | 当使用 ellipsis 或 editable 时，使用 content 代替 children | string | - | |
| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| [copyable](#copyable) | false | [copyable](#copyable) |
| delete | 添加删除线样式 | boolean | false | |
| disabled | 禁用文本 | boolean | false | |
@ -47,13 +48,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
| mark | 添加标记样式 | boolean | false | |
| type | 文本类型 | `secondary` \| `success` \| `warning` \| `danger` | - | |
| underline | 添加下划线样式 | boolean | false | |
| content(v-model) | 当使用 ellipsis 或 editable 时，使用 content 代替 children | string | - | |
### Typography.Paragraph
| 参数 | 说明 | 类型 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| code | 添加代码样式 | boolean | false | |
| content(v-model) | 当使用 ellipsis 或 editable 时，使用 content 代替 children | string | - | |
| copyable | 是否可拷贝，为对象时可进行各种自定义 | boolean \| [copyable](#copyable) | false | [copyable](#copyable) |
| delete | 添加删除线样式 | boolean | false | |
| disabled | 禁用文本 | boolean | false | |
@ -63,19 +64,18 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
| strong | 是否加粗 | boolean | false | |
| type | 文本类型 | `secondary` \| `success` \| `warning` \| `danger` | - | |
| underline | 添加下划线样式 | boolean | false | |
| content(v-model) | 当使用 ellipsis 或 editable 时，使用 content 代替 children | string | - | |
### slots
| 名称 | 说明 | 参数 | 默认值 | 版本 |
| --- | --- | --- | --- | --- |
| editableIcon | 自定义编辑图标 | - | &lt;EditOutlined /> | |
| enterEnterIcon | 在编辑段中自定义“enter”图标 | `{className: string}` | `<EnterOutlined />` | 3.0 |
| editableTooltip | 自定义提示文本，当 `editable.tooltip = false` 时关闭 | - | `编辑` | |
| copyableIcon | 自定义拷贝图标 | `{ copied: boolean }` | `copied ? <CheckOutlined /> : <CopyOutlined />` | |
| copyableTooltip | 自定义提示文案，当 `copyable.tooltip = false` 时关闭 | `{ copied: boolean }` | `copied ? '复制成功' : '复制'` | |
| editableIcon | 自定义编辑图标 | - | &lt;EditOutlined /> | |
| editableTooltip | 自定义提示文本，当 `editable.tooltip = false` 时关闭 | - | `编辑` | |
| ellipsisSymbol | 自定义展开描述文案 | - | - | |
| ellipsisTooltip | 省略时，展示提示信息 | - | - | |
| enterEnterIcon | 在编辑段中自定义“enter”图标 | `{className: string}` | `<EnterOutlined />` | 3.0 |
### copyable
@ -115,13 +115,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
| editing | 控制是否是编辑中状态 | boolean | false | |
| maxlength | 编辑中文本域最大长度 | number | - | |
| tooltip | 是否展示提示文本 | boolean | true | |
| triggerType | Edit mode trigger - icon, text or both (not specifying icon as trigger hides it) | Array&lt;`icon`\|`text`> | \[`icon`] | |
| onCancel | 按 ESC 退出编辑状态时触发 | function | - | |
| onCancel | 按 ESC 退出编辑状态时触发 | function | - | |
| onChange | 文本域编辑时触发 | function(event) | - | |
| onEnd | 按 ENTER 结束编辑状态时触发 | function | - | |
| onStart | 进入编辑中状态时触发 | function | - | |
| onCancel | 按 ESC 退出编辑状态时触发 | function | - | |
| onEnd | 按 ENTER 结束编辑状态时触发 | function | - | |
| triggerType | Edit mode trigger - icon, text or both (not specifying icon as trigger hides it) | Array&lt;`icon`\|`text`> | \[`icon`] | |
| onStart | 进入编辑中状态时触发 | function | - | |
### ellipsis

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