mirror of
https://github.com/ant-design/ant-design.git
synced 2024-11-27 20:49:53 +08:00
docs: unite boolean in site (#25058)
* docs: unite boolean in site * fix demo * fix boolean * add * add * add
This commit is contained in:
parent
b61941de99
commit
a5f3ac8348
@ -19,14 +19,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
|
||||
| --- | --- | --- | --- |
|
||||
| afterClose | 关闭动画结束后触发的回调函数 | () => void | - |
|
||||
| banner | 是否用作顶部公告 | boolean | false |
|
||||
| closable | 默认不显示关闭按钮 | boolean | 无 |
|
||||
| closeText | 自定义关闭按钮 | string\|ReactNode | 无 |
|
||||
| description | 警告提示的辅助性文字介绍 | string\|ReactNode | 无 |
|
||||
| closable | 默认不显示关闭按钮 | boolean | - |
|
||||
| closeText | 自定义关闭按钮 | string\|ReactNode | - |
|
||||
| description | 警告提示的辅助性文字介绍 | string\|ReactNode | - |
|
||||
| icon | 自定义图标,`showIcon` 为 `true` 时有效 | ReactNode | - |
|
||||
| message | 警告提示内容 | string\|ReactNode | 无 |
|
||||
| message | 警告提示内容 | string\|ReactNode | - |
|
||||
| showIcon | 是否显示辅助图标 | boolean | false,`banner` 模式下默认值为 true |
|
||||
| type | 指定警告提示的样式,有四种选择 `success`、`info`、`warning`、`error` | string | `info`,`banner` 模式下默认值为 `warning` |
|
||||
| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | 无 |
|
||||
| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | - |
|
||||
|
||||
### Alert.ErrorBoundary
|
||||
|
||||
|
@ -26,7 +26,7 @@ For displaying anchor hyperlinks on page and jumping between them.
|
||||
| showInkInFixed | Whether show ink-balls in Fixed mode | boolean | false | |
|
||||
| onClick | set the handler to handle `click` event | Function(e: Event, link: Object) | - | |
|
||||
| getCurrentAnchor | Customize the anchor highlight | () => string | - | |
|
||||
| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | `offsetTop` | |
|
||||
| targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | - | |
|
||||
| onChange | Listening for anchor link change | (currentActiveLink: string) => void | | |
|
||||
|
||||
### Link Props
|
||||
|
@ -27,7 +27,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
|
||||
| showInkInFixed | 固定模式是否显示小圆点 | boolean | false | |
|
||||
| onClick | `click` 事件的 handler | Function(e: Event, link: Object) | - | |
|
||||
| getCurrentAnchor | 自定义高亮的锚点 | () => string | - | |
|
||||
| targetOffset | 锚点滚动偏移量,默认与 offsetTop 相同,[例子](#components-anchor-demo-targetOffset) | number | `offsetTop` | |
|
||||
| targetOffset | 锚点滚动偏移量,默认与 offsetTop 相同,[例子](#components-anchor-demo-targetOffset) | number | - | |
|
||||
| onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | | |
|
||||
|
||||
### Link Props
|
||||
|
@ -23,17 +23,17 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
|
||||
| children (自定义输入框) | 自定义输入框 | HTMLInputElement <br /><br /> HTMLTextAreaElement <br /><br /> `React.ReactElement<InputProps>` | `<Input />` | |
|
||||
| children (自动完成的数据源) | 自动完成的数据源 | `React.ReactElement<OptionProps>` <br /><br /> `Array<React.ReactElement<OptionProps>>` | - | |
|
||||
| defaultActiveFirstOption | 是否默认高亮第一个选项。 | boolean | true | |
|
||||
| defaultValue | 指定默认选中的条目 | string | 无 | |
|
||||
| defaultValue | 指定默认选中的条目 | string | - | |
|
||||
| disabled | 是否禁用 | boolean | false | |
|
||||
| filterOption | 是否根据输入项进行筛选。当其为一个函数时,会接收 `inputValue` `option` 两个参数,当 `option` 符合筛选条件时,应返回 `true`,反之则返回 `false`。 | boolean or function(inputValue, option) | true | |
|
||||
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | Function(triggerNode) | () => document.body | |
|
||||
| placeholder | 输入框提示 | string | - | |
|
||||
| value | 指定当前选中的条目 | string | 无 | |
|
||||
| value | 指定当前选中的条目 | string | - | |
|
||||
| onBlur | 失去焦点时的回调 | function() | - | |
|
||||
| onChange | 选中 option,或 input 的 value 变化时,调用此函数 | function(value) | 无 | |
|
||||
| onChange | 选中 option,或 input 的 value 变化时,调用此函数 | function(value) | - | |
|
||||
| onFocus | 获得焦点时的回调 | function() | - | |
|
||||
| onSearch | 搜索补全项的时候调用 | function(value) | 无 | |
|
||||
| onSelect | 被选中时调用,参数为选中项的 value 值 | function(value, option) | 无 | |
|
||||
| onSearch | 搜索补全项的时候调用 | function(value) | - | |
|
||||
| onSelect | 被选中时调用,参数为选中项的 value 值 | function(value, option) | - | |
|
||||
| defaultOpen | 是否默认展开下拉菜单 | boolean | - | |
|
||||
| open | 是否展开下拉菜单 | boolean | - | |
|
||||
| onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - | |
|
||||
|
@ -21,6 +21,6 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
|
||||
| offset | set offset of the badge dot | `[number, number]` | - | |
|
||||
| overflowCount | Max count to show | number | 99 | |
|
||||
| showZero | Whether to show badge when `count` is zero | boolean | `false` | |
|
||||
| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` | |
|
||||
| text | If `status` is set, `text` sets the display text of the status `dot` | string | `''` | |
|
||||
| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | | |
|
||||
| text | If `status` is set, `text` sets the display text of the status `dot` | string | | |
|
||||
| title | Text to show when hovering over the badge | string | `count` | |
|
||||
|
@ -22,6 +22,6 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
|
||||
| offset | 设置状态点的位置偏移 | `[number, number]` | - | |
|
||||
| overflowCount | 展示封顶的数字值 | number | 99 | |
|
||||
| showZero | 当数值为 0 时,是否展示 Badge | boolean | false | |
|
||||
| status | 设置 Badge 为状态点 | `success` \| `processing` \| `default` \| `error` \| `warning` | '' | |
|
||||
| text | 在设置了 `status` 的前提下有效,设置状态点的文本 | string | '' | |
|
||||
| status | 设置 Badge 为状态点 | `success` \| `processing` \| `default` \| `error` \| `warning` | | |
|
||||
| text | 在设置了 `status` 的前提下有效,设置状态点的文本 | string | | |
|
||||
| title | 设置鼠标放在状态点上时显示的文字 | string | `count` | |
|
||||
|
@ -32,19 +32,19 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| disabled | disabled state of button | boolean | `false` | |
|
||||
| ghost | make background transparent and invert text and border colors | boolean | `false` | |
|
||||
| disabled | disabled state of button | boolean | false | |
|
||||
| ghost | make background transparent and invert text and border colors | boolean | false | |
|
||||
| href | redirect url of link button | string | - | |
|
||||
| htmlType | set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | |
|
||||
| icon | set the icon component of button | ReactNode | - | |
|
||||
| loading | set the loading status of button | boolean \| { delay: number } | `false` | |
|
||||
| loading | set the loading status of button | boolean \| { delay: number } | false | |
|
||||
| shape | can be set to `circle`, `round` or omitted | string | - | |
|
||||
| size | set the size of button | `large` \| `middle` \| `small` | | |
|
||||
| target | same as target attribute of a, works when href is specified | string | - | |
|
||||
| type | can be set to `primary` `ghost` `dashed` `danger` `link` `text` or omitted (meaning `default`) | string | `default` | |
|
||||
| type | can be set to `primary` `ghost` `dashed` `danger` `link` `text` | string | - | |
|
||||
| onClick | set the handler to handle `click` event | (event) => void | - | |
|
||||
| block | option to fit button width to its parent width | boolean | `false` | |
|
||||
| danger | set the danger status of button | boolean | `false` | |
|
||||
| block | option to fit button width to its parent width | boolean | false | |
|
||||
| danger | set the danger status of button | boolean | false | |
|
||||
|
||||
It accepts all props which native buttons support.
|
||||
|
||||
|
@ -35,19 +35,19 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| disabled | 按钮失效状态 | boolean | `false` | |
|
||||
| disabled | 按钮失效状态 | boolean | false | |
|
||||
| ghost | 幽灵属性,使按钮背景透明 | boolean | false | |
|
||||
| href | 点击跳转的地址,指定此属性 button 的行为和 a 链接一致 | string | - | |
|
||||
| htmlType | 设置 `button` 原生的 `type` 值,可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` | |
|
||||
| icon | 设置按钮的图标组件 | ReactNode | - | |
|
||||
| loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` | |
|
||||
| loading | 设置按钮载入状态 | boolean \| { delay: number } | false | |
|
||||
| shape | 设置按钮形状,可选值为 `circle`、 `round` 或者不设 | string | - | |
|
||||
| size | 设置按钮大小 | `large` \| `middle` \| `small` | 无 | |
|
||||
| size | 设置按钮大小 | `large` \| `middle` \| `small` | - | |
|
||||
| target | 相当于 a 链接的 target 属性,href 存在时生效 | string | - | |
|
||||
| type | 设置按钮类型 | `primary` \| `ghost` \| `dashed` \| `danger` \| `link` \| `text` | - | |
|
||||
| onClick | 点击按钮时的回调 | (event) => void | - | |
|
||||
| block | 将按钮宽度调整为其父宽度的选项 | boolean | `false` | |
|
||||
| danger | 设置危险按钮 | boolean | `false` | |
|
||||
| block | 将按钮宽度调整为其父宽度的选项 | boolean | false | |
|
||||
| danger | 设置危险按钮 | boolean | false | |
|
||||
|
||||
支持原生 button 的其他所有属性。
|
||||
|
||||
|
@ -36,7 +36,7 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
|
||||
| dateFullCellRender | Customize the display of the date cell, the returned content will override the cell | function(date: moment): ReactNode | - | |
|
||||
| defaultValue | The date selected by default | [moment](http://momentjs.com/) | default date | |
|
||||
| disabledDate | Function that specifies the dates that cannot be selected | (currentDate: moment) => boolean | - | |
|
||||
| fullscreen | Whether to display in full-screen | boolean | `true` | |
|
||||
| fullscreen | Whether to display in full-screen | boolean | true | |
|
||||
| locale | The calendar's locale | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |
|
||||
| mode | The display mode of the calendar | `month` \| `year` | `month` | |
|
||||
| monthCellRender | Customize the display of the month cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - | |
|
||||
|
@ -33,21 +33,21 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| dateCellRender | 自定义渲染日期单元格,返回内容会被追加到单元格 | function(date: moment): ReactNode | 无 | |
|
||||
| dateFullCellRender | 自定义渲染日期单元格,返回内容覆盖单元格 | function(date: moment): ReactNode | 无 | |
|
||||
| dateCellRender | 自定义渲染日期单元格,返回内容会被追加到单元格 | function(date: moment): ReactNode | - | |
|
||||
| dateFullCellRender | 自定义渲染日期单元格,返回内容覆盖单元格 | function(date: moment): ReactNode | - | |
|
||||
| defaultValue | 默认展示的日期 | [moment](http://momentjs.com/) | 默认日期 | |
|
||||
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 | |
|
||||
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | - | |
|
||||
| fullscreen | 是否全屏显示 | boolean | true | |
|
||||
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |
|
||||
| mode | 初始模式,`month/year` | string | month | |
|
||||
| monthCellRender | 自定义渲染月单元格,返回内容会被追加到单元格 | function(date: moment): ReactNode | 无 | |
|
||||
| monthFullCellRender | 自定义渲染月单元格,返回内容覆盖单元格 | function(date: moment): ReactNode | 无 | |
|
||||
| validRange | 设置可以显示的日期 | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | 无 | |
|
||||
| mode | 初始模式,`month/year` | string | `month` | |
|
||||
| monthCellRender | 自定义渲染月单元格,返回内容会被追加到单元格 | function(date: moment): ReactNode | - | |
|
||||
| monthFullCellRender | 自定义渲染月单元格,返回内容覆盖单元格 | function(date: moment): ReactNode | - | |
|
||||
| validRange | 设置可以显示的日期 | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
|
||||
| value | 展示日期 | [moment](http://momentjs.com/) | 当前日期 | |
|
||||
| onPanelChange | 日期面板变化回调 | function(date: moment, mode: string) | 无 | |
|
||||
| onSelect | 点击选择日期回调 | function(date: moment) | 无 | |
|
||||
| onChange | 日期变化回调 | function(date: moment) | 无 | |
|
||||
| headerRender | 自定义头部内容 | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | 无 | |
|
||||
| onPanelChange | 日期面板变化回调 | function(date: moment, mode: string) | - | |
|
||||
| onSelect | 点击选择日期回调 | function(date: moment) | - | |
|
||||
| onChange | 日期变化回调 | function(date: moment) | - | |
|
||||
| headerRender | 自定义头部内容 | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | - | |
|
||||
|
||||
## FAQ
|
||||
|
||||
|
@ -26,7 +26,7 @@ A card can be used to display content related to a single subject. The content c
|
||||
| activeTabKey | Current TabPane's key | string | - | |
|
||||
| headStyle | Inline style to apply to the card head | CSSProperties | - | |
|
||||
| bodyStyle | Inline style to apply to the card content | CSSProperties | - | |
|
||||
| bordered | Toggles rendering of the border around the card | boolean | `true` | |
|
||||
| bordered | Toggles rendering of the border around the card | boolean | true | |
|
||||
| cover | Card cover | ReactNode | - | |
|
||||
| defaultActiveTabKey | Initial active TabPane's key, if `activeTabKey` is not set. | string | - | |
|
||||
| extra | Content to render in the top-right corner of the card | string\|ReactNode | - | |
|
||||
|
@ -29,12 +29,12 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/NqXt8DJhky/Card.svg
|
||||
| bodyStyle | 内容区域自定义样式 | CSSProperties | - | |
|
||||
| bordered | 是否有边框 | boolean | true | |
|
||||
| cover | 卡片封面 | ReactNode | - | |
|
||||
| defaultActiveTabKey | 初始化选中页签的 key,如果没有设置 activeTabKey | string | 第一个页签 | |
|
||||
| defaultActiveTabKey | 初始化选中页签的 key,如果没有设置 activeTabKey | string | `第一个页签` | |
|
||||
| extra | 卡片右上角的操作区域 | string\|ReactNode | - | |
|
||||
| hoverable | 鼠标移过时可浮起 | boolean | false | |
|
||||
| loading | 当卡片内容还在加载中时,可以用 loading 展示一个占位 | boolean | false | |
|
||||
| tabList | 页签标题列表 | Array<{key: string, tab: ReactNode}> | - | |
|
||||
| tabBarExtraContent | tab bar 上额外的元素 | React.ReactNode | 无 | |
|
||||
| tabBarExtraContent | tab bar 上额外的元素 | React.ReactNode | - | |
|
||||
| size | card 的尺寸 | `default` \| `small` | `default` | |
|
||||
| title | 卡片标题 | string\|ReactNode | - | |
|
||||
| type | 卡片类型,可设置为 `inner` 或 不设置 | string | - | |
|
||||
|
@ -18,10 +18,10 @@ A carousel component. Scales with its container.
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| afterChange | Callback function called after the current index changes | function(current) | - | |
|
||||
| autoplay | Whether to scroll automatically | boolean | `false` | |
|
||||
| autoplay | Whether to scroll automatically | boolean | false | |
|
||||
| beforeChange | Callback function called before the current index changes | function(from, to) | - | |
|
||||
| dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | bottom | |
|
||||
| dots | Whether to show the dots at the bottom of the gallery, `object` for `dotsClass` and any others | boolean \| { className?:string } | `true` | |
|
||||
| dots | Whether to show the dots at the bottom of the gallery, `object` for `dotsClass` and any others | boolean \| { className?:string } | true | |
|
||||
| easing | Transition interpolation function name | string | `linear` | |
|
||||
| effect | Transition effect | `scrollx` \| `fade` | `scrollx` | |
|
||||
|
||||
|
@ -18,9 +18,9 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/%24C9tmj978R/Carousel.svg
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| afterChange | 切换面板的回调 | function(current) | 无 | | |
|
||||
| afterChange | 切换面板的回调 | function(current) | - | | |
|
||||
| autoplay | 是否自动切换 | boolean | false | | |
|
||||
| beforeChange | 切换面板的回调 | function(from, to) | 无 | | |
|
||||
| beforeChange | 切换面板的回调 | function(from, to) | - | | |
|
||||
| dotPosition | 面板指示点位置,可选 `top` `bottom` `left` `right` | string | bottom | |
|
||||
| dots | 是否显示面板指示点,如果为 `object` 则同时可以指定 `dotsClass` 或者 | boolean \| { className?:string } | true | | |
|
||||
| easing | 动画效果 | string | linear | | |
|
||||
|
@ -29,11 +29,11 @@ Cascade selection box.
|
||||
| defaultValue | initial selected value | string\[] \| number\[] | \[] | |
|
||||
| disabled | whether disabled select | boolean | false | |
|
||||
| displayRender | render function of displaying selected options | `(label, selectedOptions) => ReactNode` | `label => label.join(' / ')` | |
|
||||
| expandTrigger | expand current item when click or hover, one of 'click' 'hover' | string | 'click' | |
|
||||
| expandTrigger | expand current item when click or hover, one of 'click' 'hover' | string | `click` | |
|
||||
| fieldNames | custom field name for label and value and children | object | `{ label: 'label', value: 'value', children: 'children' }` | |
|
||||
| getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative.[example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body | |
|
||||
| loadData | To load option lazily, and it cannot work with `showSearch` | `(selectedOptions) => void` | - | |
|
||||
| notFoundContent | Specify content to show when no result matches. | string | 'Not Found' | |
|
||||
| notFoundContent | Specify content to show when no result matches. | string | `Not Found` | |
|
||||
| options | data options of cascade | [Option](#Option)[] | - | |
|
||||
| placeholder | input placeholder | string | 'Please select' | |
|
||||
| popupClassName | additional className of popup overlay | string | - | |
|
||||
|
@ -30,18 +30,18 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
|
||||
| defaultValue | 默认的选中项 | string\[] \| number\[] | \[] | |
|
||||
| disabled | 禁用 | boolean | false | |
|
||||
| displayRender | 选择后展示的渲染函数 | `(label, selectedOptions) => ReactNode` | `label => label.join(' / ')` | |
|
||||
| expandTrigger | 次级菜单的展开方式,可选 'click' 和 'hover' | string | 'click' | |
|
||||
| expandTrigger | 次级菜单的展开方式,可选 'click' 和 'hover' | string | `click` | |
|
||||
| fieldNames | 自定义 options 中 label name children 的字段 | object | `{ label: 'label', value: 'value', children: 'children' }` | |
|
||||
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body | |
|
||||
| loadData | 用于动态加载选项,无法与 `showSearch` 一起使用 | `(selectedOptions) => void` | - | |
|
||||
| notFoundContent | 当下拉列表为空时显示的内容 | string | 'Not Found' | |
|
||||
| notFoundContent | 当下拉列表为空时显示的内容 | string | `Not Found` | |
|
||||
| options | 可选项数据源 | [Option](#Option)[] | - | |
|
||||
| placeholder | 输入框占位文本 | string | '请选择' | |
|
||||
| popupClassName | 自定义浮层类名 | string | - | |
|
||||
| popupPlacement | 浮层预设位置:`bottomLeft` `bottomRight` `topLeft` `topRight` | Enum | `bottomLeft` | |
|
||||
| popupVisible | 控制浮层显隐 | boolean | - | |
|
||||
| showSearch | 在选择框中显示搜索框 | boolean | false | |
|
||||
| size | 输入框大小 | `large` \| `middle` \| `small` | 无 | |
|
||||
| size | 输入框大小 | `large` \| `middle` \| `small` | - | |
|
||||
| style | 自定义样式 | CSSProperties | - | |
|
||||
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
||||
| value | 指定选中项 | string\[] \| number\[] | - | |
|
||||
|
@ -21,20 +21,20 @@ A content area which can be collapsed and expanded.
|
||||
| --- | --- | --- | --- | --- |
|
||||
| activeKey | Key of the active panel | string\[]\|string\| number\[]\|number | No default value. In `accordion` mode, it's the key of the first panel. | |
|
||||
| defaultActiveKey | Key of the initial active panel | string\[]\|string\| number\[]\|number | - | |
|
||||
| bordered | Toggles rendering of the border around the collapse block | boolean | `true` | |
|
||||
| accordion | If `true`, `Collapse` renders as `Accordion` | boolean | `false` | |
|
||||
| bordered | Toggles rendering of the border around the collapse block | boolean | true | |
|
||||
| accordion | If `true`, `Collapse` renders as `Accordion` | boolean | false | |
|
||||
| onChange | Callback function executed when active panel is changed | Function | - | |
|
||||
| expandIcon | allow to customize collapse icon | (panelProps) => ReactNode | - | |
|
||||
| expandIconPosition | Set expand icon position | `left` \| `right` | - | |
|
||||
| destroyInactivePanel | Destroy Inactive Panel | boolean | `false` | |
|
||||
| destroyInactivePanel | Destroy Inactive Panel | boolean | false | |
|
||||
|
||||
### Collapse.Panel
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| disabled | If `true`, panel cannot be opened or closed | boolean | `false` | |
|
||||
| forceRender | Forced render of content on panel, instead of lazy rending after clicking on header | boolean | `false` | |
|
||||
| disabled | If `true`, panel cannot be opened or closed | boolean | false | |
|
||||
| forceRender | Forced render of content on panel, instead of lazy rending after clicking on header | boolean | false | |
|
||||
| header | Title of the panel | string\|ReactNode | - | |
|
||||
| key | Unique key identifying the panel from among its siblings | string\|number | - | |
|
||||
| showArrow | If `false`, panel will not show arrow icon | boolean | `true` | |
|
||||
| showArrow | If `false`, panel will not show arrow icon | boolean | true | |
|
||||
| extra | extra element in the corner | ReactNode | - | |
|
||||
|
@ -21,13 +21,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| activeKey | 当前激活 tab 面板的 key | string\[]\|string\| number\[]\|number | 默认无,accordion 模式下默认第一个元素 | |
|
||||
| defaultActiveKey | 初始化选中面板的 key | string\[]\|string\| number\[]\|number | 无 | |
|
||||
| bordered | 带边框风格的折叠面板 | boolean | `true` | |
|
||||
| accordion | 手风琴模式 | boolean | `false` | |
|
||||
| onChange | 切换面板的回调 | Function | 无 | |
|
||||
| defaultActiveKey | 初始化选中面板的 key | string\[]\|string\| number\[]\|number | - | |
|
||||
| bordered | 带边框风格的折叠面板 | boolean | true | |
|
||||
| accordion | 手风琴模式 | boolean | false | |
|
||||
| onChange | 切换面板的回调 | Function | - | |
|
||||
| expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - | |
|
||||
| expandIconPosition | 设置图标位置 | `left` \| `right` | - | |
|
||||
| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | `false` | |
|
||||
| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | false | |
|
||||
|
||||
### Collapse.Panel
|
||||
|
||||
@ -35,7 +35,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
|
||||
| ----------- | ------------------------------------------ | ----------------- | ------ | ---- |
|
||||
| disabled | 禁用后的面板展开与否将无法通过用户交互改变 | boolean | false | |
|
||||
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false | |
|
||||
| header | 面板头内容 | string\|ReactNode | 无 | |
|
||||
| key | 对应 activeKey | string\|number | 无 | |
|
||||
| showArrow | 是否展示当前面板上的箭头 | boolean | `true` | |
|
||||
| header | 面板头内容 | string\|ReactNode | - | |
|
||||
| key | 对应 activeKey | string\|number | - | |
|
||||
| showArrow | 是否展示当前面板上的箭头 | boolean | true | |
|
||||
| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - | |
|
||||
|
@ -44,10 +44,10 @@ Some components use dynamic style to support wave effect. You can config `csp` p
|
||||
| form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validateMessages) } | - | |
|
||||
| input | Set Input common props | { autoComplete?: string } | - | 4.2.0 |
|
||||
| renderEmpty | set empty content of components. Ref [Empty](/components/empty/) | Function(componentName: string): ReactNode | - | |
|
||||
| getPopupContainer | to set the container of the popup element. The default is to create a `div` element in `body`. | Function(triggerNode) | `() => document.body` | |
|
||||
| getPopupContainer | to set the container of the popup element. The default is to create a `div` element in `body`. | Function(triggerNode) | () => document.body | |
|
||||
| getTargetContainer | Config Affix, Anchor scroll target container. | () => HTMLElement | () => window | 4.2.0 |
|
||||
| locale | language package setting, you can find the packages in [antd/es/locale](http://unpkg.com/antd/es/locale/) | object | |
|
||||
| prefixCls | set prefix class. `Note:` This will discard default styles from `antd`. | string | ant | |
|
||||
| prefixCls | set prefix class. `Note:` This will discard default styles from `antd`. | string | `ant` | |
|
||||
| pageHeader | Unify the ghost of PageHeader, ref [PageHeader](/components/page-header) | { ghost:boolean } | true | |
|
||||
| direction | set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | |
|
||||
| space | set Space `size`, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |
|
||||
|
@ -48,7 +48,7 @@ return (
|
||||
| getPopupContainer | 弹出框(Select, Tooltip, Menu 等等)渲染父节点,默认渲染到 body 上。 | Function(triggerNode) | () => document.body | |
|
||||
| getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 |
|
||||
| locale | 语言包配置,语言包可到 [antd/es/locale](http://unpkg.com/antd/es/locale/) 目录下寻找 | object | - | |
|
||||
| prefixCls | 设置统一样式前缀。`注意:这将不会应用由 antd 提供的默认样式` | string | ant | |
|
||||
| prefixCls | 设置统一样式前缀。`注意:这将不会应用由 antd 提供的默认样式` | string | `ant` | |
|
||||
| pageHeader | 统一设置 PageHeader 的 ghost,参考 [PageHeader](/components/page-header) | { ghost: boolean } | true | |
|
||||
| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` | |
|
||||
| space | 设置 Space 的 `size`,参考 [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |
|
||||
|
@ -62,7 +62,7 @@ The following APIs are shared by DatePicker, YearPicker, MonthPicker, RangePicke
|
||||
| placeholder | placeholder of date input | string \| \[string,string] | - | |
|
||||
| popupStyle | to customize the style of the popup calendar | CSSProperties | {} | |
|
||||
| size | determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - | |
|
||||
| bordered | whether has border style | Boolean | true | |
|
||||
| bordered | whether has border style | boolean | true | |
|
||||
| suffixIcon | The custom suffix icon | ReactNode | - | |
|
||||
| style | to customize the style of the input box | CSSProperties | {} | |
|
||||
| onOpenChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(open) | - | |
|
||||
@ -148,12 +148,12 @@ Added in `4.1.0`.
|
||||
| dateRender | Customize date cell. `info` argument is added in 4.3.0 | function(currentDate: moment, today: moment, info: { range: 'start' \| ''end }) => React.ReactNode | - | |
|
||||
| defaultValue | to set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
|
||||
| defaultPickerValue | to set default picker date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)\] | - | |
|
||||
| disabled | disable start or end | `[boolean, boolean]` | - | |
|
||||
| disabled | disable start or end | \[boolean, boolean] | - | |
|
||||
| disabledTime | to specify the time that cannot be selected | function(dates: \[moment, moment], partial: `'start'|'end'`) | - | |
|
||||
| format | to set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting. | string \| string[] | "YYYY-MM-DD HH:mm:ss" | |
|
||||
| ranges | preseted ranges for quick selection | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - | |
|
||||
| renderExtraFooter | render extra footer in panel | () => React.ReactNode | - | |
|
||||
| separator | set separator between inputs | string | '~' | |
|
||||
| separator | set separator between inputs | string | `~` | |
|
||||
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) | |
|
||||
| showTime.defaultValue | to set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] | |
|
||||
| value | to set date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - | |
|
||||
|
@ -54,20 +54,20 @@ import 'moment/locale/zh-cn';
|
||||
| className | 选择器 className | string | '' | |
|
||||
| dateRender | 自定义日期单元格的内容 | function(currentDate: moment, today: moment) => React.ReactNode | - | |
|
||||
| disabled | 禁用 | boolean | false | |
|
||||
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 | |
|
||||
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | - | |
|
||||
| dropdownClassName | 额外的弹出日历 className | string | - | |
|
||||
| getPopupContainer | 定义浮层的容器,默认为 body 上新建 div | function(trigger) | 无 | |
|
||||
| getPopupContainer | 定义浮层的容器,默认为 body 上新建 div | function(trigger) | - | |
|
||||
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) | |
|
||||
| mode | 日期面板的状态([设置后无法选择年份/月份?](/docs/react/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后,点击后无法选择年份/月份?)) | `time` \| `date` \| `month` \| `year` \| `decade` | - | |
|
||||
| open | 控制弹层是否展开 | boolean | - | |
|
||||
| picker | 设置选择器类型 | `date` \| `week` \| `month` \| `quarter` (4.1.0) \| `year` | `date` | |
|
||||
| placeholder | 输入框提示文字 | string \| \[string, string] | - | |
|
||||
| popupStyle | 额外的弹出日历样式 | CSSProperties | {} | |
|
||||
| size | 输入框大小,`large` 高度为 40px,`small` 为 24px,默认是 32px | `large` \| `middle` \| `small` | 无 | |
|
||||
| bordered | 是否有边框 | Boolean | true | |
|
||||
| size | 输入框大小,`large` 高度为 40px,`small` 为 24px,默认是 32px | `large` \| `middle` \| `small` | - | |
|
||||
| bordered | 是否有边框 | boolean | true | |
|
||||
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
||||
| style | 自定义输入框样式 | CSSProperties | {} | |
|
||||
| onOpenChange | 弹出日历和关闭日历的回调 | function(open) | 无 | |
|
||||
| onOpenChange | 弹出日历和关闭日历的回调 | function(open) | - | |
|
||||
| onPanelChange | 日历面板切换的回调 | function(value, mode) | - | |
|
||||
| inputReadOnly | 设置输入框为只读(避免在移动设备上打开虚拟键盘) | boolean | false | |
|
||||
|
||||
@ -82,16 +82,16 @@ import 'moment/locale/zh-cn';
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultValue | 默认日期,如果开始时间或结束时间为 `null` 或者 `undefined`,日期范围将是一个开区间 | [moment](http://momentjs.com/) | 无 | |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| disabledTime | 不可选择的时间 | function(date) | 无 | |
|
||||
| defaultValue | 默认日期,如果开始时间或结束时间为 `null` 或者 `undefined`,日期范围将是一个开区间 | [moment](http://momentjs.com/) | - | |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |
|
||||
| disabledTime | 不可选择的时间 | function(date) | - | |
|
||||
| format | 设置日期格式,为数组时支持多格式匹配,展示以第一个为准。配置参考 [moment.js](http://momentjs.com/) | string \| string[] | "YYYY-MM-DD" | |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - | |
|
||||
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) | |
|
||||
| showTime.defaultValue | 设置用户选择日期时默认的时分秒,[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() | |
|
||||
| showToday | 是否展示“今天”按钮 | boolean | true | |
|
||||
| value | 日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| onChange | 时间发生变化的回调 | function(date: moment, dateString: string) | 无 | |
|
||||
| value | 日期 | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | 时间发生变化的回调 | function(date: moment, dateString: string) | - | |
|
||||
| onOk | 点击确定按钮的回调 | function() | - | |
|
||||
| onPanelChange | 日期面板变化时的回调 | function(value, mode) | - | |
|
||||
|
||||
@ -99,11 +99,11 @@ import 'moment/locale/zh-cn';
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |
|
||||
| format | 展示的日期格式,配置参考 [moment.js](http://momentjs.com/) | string | "YYYY" | |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
||||
| value | 日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| value | 日期 | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | 时间发生变化的回调,发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
|
||||
|
||||
### QuarterPicker
|
||||
@ -112,23 +112,23 @@ import 'moment/locale/zh-cn';
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |
|
||||
| format | 展示的日期格式,配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-\QQ" | |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
||||
| value | 日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| value | 日期 | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | 时间发生变化的回调,发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
|
||||
|
||||
### MonthPicker
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |
|
||||
| format | 展示的日期格式,配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM" | |
|
||||
| monthCellRender | 自定义的月份内容渲染方法 | function(date, locale): ReactNode | - | |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
||||
| value | 日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| value | 日期 | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | 时间发生变化的回调,发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
|
||||
|
||||
### WeekPicker
|
||||
@ -136,7 +136,7 @@ import 'moment/locale/zh-cn';
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - | |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | 无 | |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - | |
|
||||
| format | 展示的日期格式,配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-wo" | |
|
||||
| value | 日期 | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | 时间发生变化的回调,发生在用户选择时间时 | function(date: moment, dateString: string) | - | |
|
||||
@ -148,19 +148,19 @@ import 'moment/locale/zh-cn';
|
||||
| --- | --- | --- | --- | --- |
|
||||
| allowEmpty | 允许起始项部分为空 | \[boolean, boolean] | \[false, false] | |
|
||||
| dateRender | 自定义日期单元格的内容。`info` 参数自 4.3.0 添加 | function(currentDate: moment, today: moment, info: { range: 'start' \| ''end }) => React.ReactNode | - | |
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | 无 | |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/)\[] | 无 | |
|
||||
| disabled | 禁用起始项 | `[boolean, boolean]` | 无 | |
|
||||
| disabledTime | 不可选择的时间 | function(dates: \[moment, moment\], partial: `'start'|'end'`) | 无 | |
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | - | |
|
||||
| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/)\[] | - | |
|
||||
| disabled | 禁用起始项 | \[boolean, boolean] | - | |
|
||||
| disabledTime | 不可选择的时间 | function(dates: \[moment, moment\], partial: `'start'|'end'`) | - | |
|
||||
| format | 展示的日期格式 | string | "YYYY-MM-DD HH:mm:ss" | |
|
||||
| ranges | 预设时间范围快捷选择 | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | 无 | |
|
||||
| ranges | 预设时间范围快捷选择 | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - | |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - | |
|
||||
| separator | 设置分隔符 | string | '~' | |
|
||||
| separator | 设置分隔符 | string | `~` | |
|
||||
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) | |
|
||||
| showTime.defaultValue | 设置用户选择日期时默认的时分秒,[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] | |
|
||||
| value | 日期 | [moment](http://momentjs.com/)\[] | 无 | |
|
||||
| onCalendarChange | 待选日期发生变化的回调 | function(dates: \[moment, moment\], dateStrings: \[string, string\]) | 无 | |
|
||||
| onChange | 日期范围发生变化的回调 | function(dates: \[moment, moment\], dateStrings: \[string, string\]) | 无 | |
|
||||
| value | 日期 | [moment](http://momentjs.com/)\[] | - | |
|
||||
| onCalendarChange | 待选日期发生变化的回调 | function(dates: \[moment, moment\], dateStrings: \[string, string\]) | - | |
|
||||
| onChange | 日期范围发生变化的回调 | function(dates: \[moment, moment\], dateStrings: \[string, string\]) | - | |
|
||||
|
||||
<style>
|
||||
.code-box-demo .ant-picker {
|
||||
|
@ -24,7 +24,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
|
||||
| destroyOnClose | Whether to unmount child components on closing drawer or not. | boolean | false |
|
||||
| forceRender | Prerender Drawer component forcely | boolean | false |
|
||||
| getContainer | Return the mounted node for Drawer. | HTMLElement \| `() => HTMLElement` \| Selectors \| false | 'body' |
|
||||
| mask | Whether to show mask or not. | Boolean | true |
|
||||
| mask | Whether to show mask or not. | boolean | true |
|
||||
| maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not. | boolean | true |
|
||||
| maskStyle | Style for Drawer's mask element. | CSSProperties | {} |
|
||||
| style | Style of wrapper element which **contains mask** compare to `drawerStyle` | CSSProperties | - |
|
||||
@ -40,7 +40,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
|
||||
| placement | The placement of the Drawer. | `top` \| `right` \| `bottom` \| `left` | `right` |
|
||||
| onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button. | function(e) | - |
|
||||
| afterVisibleChange | Callback after the animation ends when switching drawers. | function(visible) | - |
|
||||
| keyboard | Whether support press esc to close | Boolean | true |
|
||||
| keyboard | Whether support press esc to close | boolean | true |
|
||||
| footer | The footer for Drawer. | ReactNode | - |
|
||||
| footerStyle | Style of the drawer footer part. | CSSProperties | - |
|
||||
|
||||
|
@ -17,7 +17,7 @@ When there are more than a few options to choose from, you can wrap them in a `D
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| disabled | Whether the dropdown menu is disabled | boolean | - | |
|
||||
| disabled | Whether the dropdown menu is disabled | boolean | false | |
|
||||
| getPopupContainer | To set the container of the dropdown menu. The default is to create a `div` element in `body`, but you can reset it to the scrolling area and make a relative reposition. [Example on CodePen](https://codepen.io/afc163/pen/zEjNOy?editors=0010). | Function(triggerNode) | `() => document.body` | |
|
||||
| overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - | |
|
||||
| overlayClassName | Class name of the dropdown root element | string | - | |
|
||||
|
@ -21,7 +21,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| disabled | 菜单是否禁用 | boolean | - | |
|
||||
| disabled | 菜单是否禁用 | boolean | false | |
|
||||
| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上,如果你遇到菜单滚动定位问题,试试修改为滚动的区域,并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | `() => document.body` | |
|
||||
| overlay | 菜单 | [Menu](/components/menu) \| () => Menu | - | |
|
||||
| overlayClassName | 下拉根元素的类名称 | string | - | |
|
||||
|
@ -29,10 +29,10 @@ High performance Form component with data scope management. Including data colle
|
||||
| labelCol | label layout, like `<Col>` component. Set `span` `offset` value like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` | [object](/components/grid/#Col) | - | |
|
||||
| layout | Form layout | `horizontal` \| `vertical` \| `inline` | `horizontal` | |
|
||||
| name | Form name. Will be the prefix of Field `id` | string | - | |
|
||||
| scrollToFirstError | Auto scroll to first failed field when submit | false | - | |
|
||||
| scrollToFirstError | Auto scroll to first failed field when submit | boolean | false | |
|
||||
| size | Set field component size (antd components only) | `small` \| `middle` \| `large` | - | |
|
||||
| validateMessages | Validation prompt template, description [see below](#validateMessages) | [ValidateMessages](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts) | - | |
|
||||
| validateTrigger | Config field validate trigger | string \| string[] | 'onChange' | 4.3.0 |
|
||||
| validateTrigger | Config field validate trigger | string \| string[] | `onChange` | 4.3.0 |
|
||||
| wrapperCol | The layout for input controls, same as `labelCol` | [object](/components/grid/#Col) | - | |
|
||||
| onFinish | Trigger after submitting the form and verifying data successfully | Function(values) | - | |
|
||||
| onFinishFailed | Trigger after submitting the form and verifying data failed | Function({ values, errorFields, outOfDate }) | - | |
|
||||
@ -89,11 +89,11 @@ Form field component for data bidirectional binding, validation, layout, and so
|
||||
| required | Display required style. It will be generated by the validation rule | boolean | false | |
|
||||
| rules | Rules for field validation. Click [here](#components-form-demo-basic) to see an example | [Rule](#Rule)[] | - | |
|
||||
| shouldUpdate | Custom field update logic. See [below](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false | |
|
||||
| trigger | When to collect the value of children node | string | onChange | |
|
||||
| trigger | When to collect the value of children node | string | `onChange` | |
|
||||
| validateFirst | Whether stop validate on first rule of error for this field | boolean | false | |
|
||||
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | - | |
|
||||
| validateTrigger | When to validate the value of children node | string \| string[] | onChange | |
|
||||
| valuePropName | Props of children node, for example, the prop of Switch is 'checked'. This prop is an encapsulation of `getValueProps`, which will be invalid after customizing `getValueProps` | string | 'value' | |
|
||||
| validateTrigger | When to validate the value of children node | string \| string[] | `onChange` | |
|
||||
| valuePropName | Props of children node, for example, the prop of Switch is 'checked'. This prop is an encapsulation of `getValueProps`, which will be invalid after customizing `getValueProps` | string | `value` | |
|
||||
| wrapperCol | The layout for input controls, same as `labelCol`. You can set `wrapperCol` on Form. If both exists, use Item first | [object](/components/grid/#Col) | - | |
|
||||
|
||||
After wrapped by `Form.Item` with `name` property, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls, the flow of form data will be handled by Form which will cause:
|
||||
|
@ -30,10 +30,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
|
||||
| labelCol | label 标签布局,同 `<Col>` 组件,设置 `span` `offset` 值,如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}` | [object](/components/grid/#Col) | - | |
|
||||
| layout | 表单布局 | `horizontal` \| `vertical` \| `inline` | `horizontal` | |
|
||||
| name | 表单名称,会作为表单字段 `id` 前缀使用 | string | - | |
|
||||
| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | false | - | |
|
||||
| scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean | false | |
|
||||
| size | 设置字段组件的尺寸(仅限 antd 组件) | `small` \| `middle` \| `large` | - | |
|
||||
| validateMessages | 验证提示模板,说明[见下](#validateMessages) | [ValidateMessages](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts) | - | |
|
||||
| validateTrigger | 统一设置字段校验规则 | string \| string[] | 'onChange' | 4.3.0 |
|
||||
| validateTrigger | 统一设置字段校验规则 | string \| string[] | `onChange` | 4.3.0 |
|
||||
| wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 labelCol | [object](/components/grid/#Col) | - | |
|
||||
| onFinish | 提交表单且数据验证成功后回调事件 | Function(values) | - | |
|
||||
| onFinishFailed | 提交表单且数据验证失败后回调事件 | Function({ values, errorFields, outOfDate }) | - | |
|
||||
@ -90,11 +90,11 @@ const validateMessages = {
|
||||
| required | 必填样式设置。如不设置,则会根据校验规则自动生成 | boolean | false | |
|
||||
| rules | 校验规则,设置字段的校验逻辑。点击[此处](#components-form-demo-basic)查看示例 | [Rule](#Rule)[] | - | |
|
||||
| shouldUpdate | 自定义字段更新逻辑,说明[见下](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false | |
|
||||
| trigger | 设置收集字段值变更的时机 | string | onChange | |
|
||||
| trigger | 设置收集字段值变更的时机 | string | `onChange` | |
|
||||
| validateFirst | 当某一规则校验不通过时,是否停止剩下的规则的校验 | boolean | false | |
|
||||
| validateStatus | 校验状态,如不设置,则会根据校验规则自动生成,可选:'success' 'warning' 'error' 'validating' | string | - | |
|
||||
| validateTrigger | 设置字段校验的时机 | string \| string[] | onChange | |
|
||||
| valuePropName | 子节点的值的属性,如 Switch 的是 'checked'。该属性为 `getValueProps` 的封装,自定义 `getValueProps` 后会失效 | string | 'value' | |
|
||||
| validateTrigger | 设置字段校验的时机 | string \| string[] | `onChange` | |
|
||||
| valuePropName | 子节点的值的属性,如 Switch 的是 'checked'。该属性为 `getValueProps` 的封装,自定义 `getValueProps` 后会失效 | string | `value` | |
|
||||
| wrapperCol | 需要为输入控件设置布局样式时,使用该属性,用法同 `labelCol`。你可以通过 Form 的 `wrapperCol` 进行统一设置。当和 Form 同时设置时,以 Item 为准。 | [object](/components/grid/#Col) | - | |
|
||||
|
||||
被设置了 `name` 属性的 `Form.Item` 包装的控件,表单控件会自动添加 `value`(或 `valuePropName` 指定的其他属性) `onChange`(或 `trigger` 指定的其他属性),数据同步将被 Form 接管,这会导致以下结果:
|
||||
|
@ -25,7 +25,7 @@ ReactDOM.render(<IconDisplay />, mountNode);
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| className | className of Icon | `string` | - | |
|
||||
| className | className of Icon | string | - | |
|
||||
| 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 | - | |
|
||||
|
@ -32,7 +32,7 @@ ReactDOM.render(<IconDisplay />, mountNode);
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| className | 设置图标的样式名 | `string` | - | |
|
||||
| className | 设置图标的样式名 | string | - | |
|
||||
| style | 设置图标的样式,例如 `fontSize` 和 `color` | CSSProperties | - | |
|
||||
| spin | 是否有旋转动画 | boolean | false | |
|
||||
| rotate | 图标旋转角度(IE9 无效) | number | - | |
|
||||
|
@ -27,7 +27,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
|
||||
| parser | 指定从 `formatter` 里转换回数字的方式,和 `formatter` 搭配使用 | function(string): number | |
|
||||
| precision | 数值精度 | number | |
|
||||
| decimalSeparator | 小数点 | string | |
|
||||
| size | 输入框大小 | `large` \| `middle` \| `small` | 无 |
|
||||
| size | 输入框大小 | `large` \| `middle` \| `small` | - |
|
||||
| step | 每次改变步数,可以为小数 | number\|string | 1 |
|
||||
| value | 当前值 | number | |
|
||||
| onChange | 变化回调 | Function(value: number \| string) | |
|
||||
|
@ -26,7 +26,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg
|
||||
| id | 输入框的 id | string | |
|
||||
| maxLength | 最大长度 | number | |
|
||||
| prefix | 带有前缀图标的 input | string\|ReactNode | |
|
||||
| size | 控件大小。注:标准表单内的输入框大小限制为 `large`。 | `large` \| `middle` \| `small` | 无 |
|
||||
| size | 控件大小。注:标准表单内的输入框大小限制为 `large`。 | `large` \| `middle` \| `small` | - |
|
||||
| suffix | 带有后缀图标的 input | string\|ReactNode | |
|
||||
| type | 声明 input 类型,同原生 input 标签的 type 属性,见:[MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/input#属性)(请直接使用 `Input.TextArea` 代替 `type="textarea"`)。 | string | `text` |
|
||||
| value | 输入框内容 | string | |
|
||||
|
@ -23,13 +23,13 @@ When need to mention someone or something.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| autoFocus | Auto get focus when component mounted | boolean | `false` |
|
||||
| autoFocus | Auto get focus when component mounted | boolean | false |
|
||||
| defaultValue | Default value | string | |
|
||||
| filterOption | Customize filter option logic | false \| (input: string, option: OptionProps) => boolean | |
|
||||
| notFoundContent | Set mentions content when not match | ReactNode | 'Not Found' |
|
||||
| placement | Set popup placement | `top` \| `bottom` | `bottom` |
|
||||
| prefix | Set trigger prefix keyword | string \| string[] | '@' |
|
||||
| split | Set split string before and after selected mention | string | ' ' |
|
||||
| prefix | Set trigger prefix keyword | string \| string[] | `@` |
|
||||
| split | Set split string before and after selected mention | string | `` |
|
||||
| validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | |
|
||||
| value | Set value of mentions | string | |
|
||||
| onChange | Trigger when value changed | (text: string) => void | |
|
||||
@ -51,4 +51,4 @@ When need to mention someone or something.
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| children | suggestion content | ReactNode | |
|
||||
| value | value of suggestion, the value will insert into input filed while selected | string | '' |
|
||||
| value | value of suggestion, the value will insert into input filed while selected | string | |
|
||||
|
@ -24,13 +24,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/jPE-itMFM/Mentions.svg
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| autoFocus | 自动获得焦点 | boolean | `false` |
|
||||
| autoFocus | 自动获得焦点 | boolean | false |
|
||||
| defaultValue | 默认值 | string | |
|
||||
| filterOption | 自定义过滤逻辑 | false \| (input: string, option: OptionProps) => boolean | |
|
||||
| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | 'Not Found' |
|
||||
| placement | 弹出层展示位置 | `top` \| `bottom` | `bottom` |
|
||||
| prefix | 设置触发关键字 | string \| string[] | '@' |
|
||||
| split | 设置选中项前后分隔符 | string | ' ' |
|
||||
| prefix | 设置触发关键字 | string \| string[] | `@` |
|
||||
| split | 设置选中项前后分隔符 | string | `` |
|
||||
| validateSearch | 自定义触发验证逻辑 | (text: string, props: MentionsProps) => void | |
|
||||
| value | 设置值 | string | |
|
||||
| onChange | 值改变时触发 | (text: string) => void | |
|
||||
@ -52,4 +52,4 @@ cover: https://gw.alipayobjects.com/zos/alicdn/jPE-itMFM/Mentions.svg
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------- | -------------- | --------- | ------ |
|
||||
| children | 选项内容 | ReactNode | |
|
||||
| value | 选择时填充的值 | string | '' |
|
||||
| value | 选择时填充的值 | string | |
|
||||
|
@ -47,7 +47,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
|
||||
| onClick | 点击 MenuItem 调用此函数 | function({ item, key, keyPath, domEvent }) | - | |
|
||||
| onDeselect | 取消选中时调用,仅在 multiple 生效 | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |
|
||||
| onOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string\[]) | noop | |
|
||||
| onSelect | 被选中时调用 | function({ item, key, keyPath, selectedKeys, domEvent }) | 无 | |
|
||||
| onSelect | 被选中时调用 | function({ item, key, keyPath, selectedKeys, domEvent }) | - | |
|
||||
| overflowedIndicator | 自定义 Menu 折叠时的图标 | ReactNode | - | |
|
||||
|
||||
> More options in [rc-menu](https://github.com/react-component/menu#api)
|
||||
|
@ -87,4 +87,4 @@ message.config({
|
||||
| getContainer | Return the mount node for Message | () => HTMLElement | () => document.body |
|
||||
| maxCount | max message show, drop oldest if exceed limit | number | - |
|
||||
| top | distance from top | number | 24 |
|
||||
| rtl | whether to enable RTL mode | boolean | `false` |
|
||||
| rtl | whether to enable RTL mode | boolean | false |
|
||||
|
@ -88,4 +88,4 @@ message.config({
|
||||
| getContainer | 配置渲染节点的输出位置 | () => HTMLElement | () => document.body |
|
||||
| maxCount | 最大显示数, 超过限制时,最早的消息会被自动关闭 | number | - |
|
||||
| top | 消息距离顶部的位置 | number | 24 |
|
||||
| rtl | 是否开启 RTL 模式 | boolean | `false` |
|
||||
| rtl | 是否开启 RTL 模式 | boolean | false |
|
||||
|
@ -18,7 +18,7 @@ When requiring users to interact with the application, but without jumping to a
|
||||
| afterClose | Specify a function that will be called when modal is closed completely. | function | - |
|
||||
| bodyStyle | Body style for modal body element. Such as height, padding etc. | CSSProperties | {} |
|
||||
| cancelText | Text of the Cancel button | string\|ReactNode | `Cancel` |
|
||||
| centered | Centered Modal | Boolean | `false` |
|
||||
| centered | Centered Modal | boolean | false |
|
||||
| closable | Whether a close (x) button is visible on top right of the modal dialog or not | boolean | true |
|
||||
| closeIcon | custom close icon | ReactNode | - |
|
||||
| confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | false |
|
||||
@ -26,7 +26,7 @@ When requiring users to interact with the application, but without jumping to a
|
||||
| footer | Footer content, set as `footer={null}` when you don't need default buttons | string\|ReactNode | OK and Cancel buttons |
|
||||
| forceRender | Force render Modal | boolean | false |
|
||||
| getContainer | Return the mount node for Modal | HTMLElement \| `() => HTMLElement` \| Selectors \| false | document.body |
|
||||
| mask | Whether show mask or not. | 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 | true |
|
||||
| maskStyle | Style for modal's mask element. | object | {} |
|
||||
| okText | Text of the OK button | string\|ReactNode | `OK` |
|
||||
@ -64,13 +64,13 @@ The items listed above are all functions, expecting a settings object as paramet
|
||||
| --- | --- | --- | --- | --- |
|
||||
| autoFocusButton | Specify which button to autofocus | null\| `ok` \| `cancel` | `ok` | |
|
||||
| cancelText | Text of the Cancel button with Modal.confirm | string | `Cancel` | |
|
||||
| centered | Centered Modal | Boolean | `false` | |
|
||||
| centered | Centered Modal | boolean | false | |
|
||||
| className | className of container | string | - | |
|
||||
| content | Content | string\|ReactNode | - | |
|
||||
| icon | custom icon | ReactNode | [<QuestionCircle /\>](/components/icon/) | 3.12.0 |
|
||||
| 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` | |
|
||||
| keyboard | Whether support press esc to close | boolean | true | |
|
||||
| mask | Whether show mask or not. | boolean | true | |
|
||||
| maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | boolean | false | |
|
||||
| okText | Text of the OK button | string | `OK` | |
|
||||
| okType | Button `type` of the OK button | string | `primary` | |
|
||||
| okButtonProps | The ok button props | [ButtonProps](/components/button/#API) | - | |
|
||||
|
@ -21,7 +21,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
|
||||
| afterClose | Modal 完全关闭后的回调 | function | - |
|
||||
| bodyStyle | Modal body 样式 | object | {} |
|
||||
| cancelText | 取消按钮文字 | string\|ReactNode | 取消 |
|
||||
| centered | 垂直居中展示 Modal | Boolean | `false` |
|
||||
| centered | 垂直居中展示 Modal | boolean | false |
|
||||
| closable | 是否显示右上角的关闭按钮 | boolean | true |
|
||||
| closeIcon | 自定义关闭图标 | ReactNode | - |
|
||||
| confirmLoading | 确定按钮 loading | boolean | false |
|
||||
@ -30,11 +30,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
|
||||
| forceRender | 强制渲染 Modal | boolean | false |
|
||||
| getContainer | 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| `() => HTMLElement` \| Selectors \| false | document.body |
|
||||
| keyboard | 是否支持键盘 esc 关闭 | boolean | true |
|
||||
| mask | 是否展示遮罩 | Boolean | true |
|
||||
| mask | 是否展示遮罩 | boolean | true |
|
||||
| maskClosable | 点击蒙层是否允许关闭 | boolean | true |
|
||||
| maskStyle | 遮罩样式 | object | {} |
|
||||
| okText | 确认按钮文字 | string\|ReactNode | 确定 |
|
||||
| okType | 确认按钮类型 | string | primary |
|
||||
| okType | 确认按钮类型 | string | `primary` |
|
||||
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - |
|
||||
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - |
|
||||
| style | 可用于设置浮层的样式,调整浮层位置等 | CSSProperties | - |
|
||||
@ -68,13 +68,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
|
||||
| --- | --- | --- | --- | --- |
|
||||
| autoFocusButton | 指定自动获得焦点的按钮 | null\| `ok` \| `cancel` | `ok` | |
|
||||
| cancelText | 设置 Modal.confirm 取消按钮文字 | string | 取消 | |
|
||||
| centered | 垂直居中展示 Modal | Boolean | `false` | |
|
||||
| centered | 垂直居中展示 Modal | boolean | false | |
|
||||
| className | 容器类名 | string | - | |
|
||||
| content | 内容 | string\|ReactNode | - | |
|
||||
| icon | 自定义图标 | ReactNode | [<QuestionCircle /\>](/components/icon/) | 3.12.0 |
|
||||
| maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` | |
|
||||
| maskClosable | 点击蒙层是否允许关闭 | boolean | false | |
|
||||
| okText | 确认按钮文字 | string | 确定 | |
|
||||
| okType | 确认按钮类型 | string | primary | |
|
||||
| okType | 确认按钮类型 | string | `primary` | |
|
||||
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - | |
|
||||
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - | |
|
||||
| title | 标题 | string\|ReactNode | - | |
|
||||
|
@ -72,7 +72,7 @@ notification.config({
|
||||
| getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body |
|
||||
| placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
|
||||
| top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels). | number | 24 |
|
||||
| rtl | whether to enable RTL mode | boolean | `false` |
|
||||
| rtl | whether to enable RTL mode | boolean | false |
|
||||
|
||||
## FAQ
|
||||
|
||||
|
@ -44,7 +44,7 @@ config 参数如下:
|
||||
| message | 通知提醒标题,必选 | string\|ReactNode | - |
|
||||
| onClose | 当通知关闭时触发 | Function | - |
|
||||
| onClick | 点击通知时触发的回调函数 | Function | - |
|
||||
| placement | 弹出位置,可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | topRight |
|
||||
| placement | 弹出位置,可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
|
||||
| style | 自定义内联样式 | [React.CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |
|
||||
| top | 消息从顶部弹出时,距离顶部的位置,单位像素。 | number | 24 |
|
||||
|
||||
@ -71,9 +71,9 @@ notification.config({
|
||||
| closeIcon | 自定义关闭图标 | ReactNode | - |
|
||||
| duration | 默认自动关闭延时,单位秒 | number | 4.5 |
|
||||
| getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body |
|
||||
| placement | 弹出位置,可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | topRight |
|
||||
| placement | 弹出位置,可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
|
||||
| top | 消息从顶部弹出时,距离顶部的位置,单位像素。 | number | 24 |
|
||||
| rtl | 是否开启 RTL 模式 | boolean | `false` |
|
||||
| rtl | 是否开启 RTL 模式 | boolean | false |
|
||||
|
||||
## FAQ
|
||||
|
||||
|
@ -20,7 +20,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fjMCD9xRq/Popconfirm.svg
|
||||
| --- | --- | --- | --- |
|
||||
| cancelText | 取消按钮文字 | string | 取消 |
|
||||
| okText | 确认按钮文字 | string | 确定 |
|
||||
| okType | 确认按钮类型 | string | primary |
|
||||
| okType | 确认按钮类型 | string | `primary` |
|
||||
| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - |
|
||||
| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - |
|
||||
| title | 确认框的描述 | string\|ReactNode\|() => ReactNode | - |
|
||||
|
@ -18,8 +18,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/1PNL1p_cO/Popover.svg
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ------- | -------- | ---------------------------------- | ------ | ---- |
|
||||
| content | 卡片内容 | string\|ReactNode\|() => ReactNode | 无 | |
|
||||
| title | 卡片标题 | string\|ReactNode\|() => ReactNode | 无 | |
|
||||
| content | 卡片内容 | string\|ReactNode\|() => ReactNode | - | |
|
||||
| title | 卡片标题 | string\|ReactNode\|() => ReactNode | - | |
|
||||
|
||||
更多属性请参考 [Tooltip](/components/tooltip/#API)。
|
||||
|
||||
|
@ -35,7 +35,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8cYb5seNB/Radio.svg
|
||||
| disabled | 禁选所有子单选器 | boolean | false |
|
||||
| name | RadioGroup 下所有 `input[type="radio"]` 的 `name` 属性 | string | |
|
||||
| options | 以配置形式设置子元素 | string\[] \| Array<{ label: string value: string disabled?: boolean }> | |
|
||||
| size | 大小,只对按钮样式生效 | `large` \| `middle` \| `small` | 无 |
|
||||
| size | 大小,只对按钮样式生效 | `large` \| `middle` \| `small` | - |
|
||||
| value | 用于设置当前选中的值 | any | |
|
||||
| onChange | 选项变化时的回调函数 | Function(e:Event) | |
|
||||
| buttonStyle | RadioButton 的风格样式,目前有描边和填色两种风格 | `outline` \| `solid` | `outline` |
|
||||
|
@ -45,8 +45,8 @@ Select component to select value from options.
|
||||
| mode | Set mode of Select | `multiple` \| `tags` | - | |
|
||||
| notFoundContent | Specify content to show when no result matches.. | ReactNode | 'Not Found' | |
|
||||
| options | Select options. Will get better perf than jsx definition | { label, value }[] | - | |
|
||||
| optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | value | |
|
||||
| optionLabelProp | Which prop value of option will render as content of select. [Example](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | 'children' | |
|
||||
| optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | `value` | |
|
||||
| optionLabelProp | Which prop value of option will render as content of select. [Example](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `children` | |
|
||||
| placeholder | Placeholder of select | string\|ReactNode | - | |
|
||||
| showArrow | Whether to show the drop-down arrow | boolean | true | |
|
||||
| showSearch | Whether show search input in single mode. | boolean | false | |
|
||||
|
@ -46,12 +46,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
|
||||
| mode | 设置 Select 的模式为多选或标签 | `multiple` \| `tags` | - | |
|
||||
| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | 'Not Found' | |
|
||||
| options | 数据化配置选项内容,相比 jsx 定义会获得更好的渲染性能 | { label, value }[] | - | |
|
||||
| optionFilterProp | 搜索时过滤对应的 option 属性,如设置为 children 表示对内嵌内容进行搜索。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | value | |
|
||||
| optionLabelProp | 回填到选择框的 Option 的属性值,默认是 Option 的子元素。比如在子元素需要高亮效果时,此值可以设为 `value`。 | string | 'children' | |
|
||||
| optionFilterProp | 搜索时过滤对应的 option 属性,如设置为 children 表示对内嵌内容进行搜索。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `value` | |
|
||||
| optionLabelProp | 回填到选择框的 Option 的属性值,默认是 Option 的子元素。比如在子元素需要高亮效果时,此值可以设为 `value`。 | string | `children` | |
|
||||
| placeholder | 选择框默认文字 | string | - | |
|
||||
| showArrow | 是否显示下拉小箭头 | boolean | true | |
|
||||
| showSearch | 使单选模式可搜索 | boolean | false | |
|
||||
| size | 选择框大小 | `large` \| `middle` \| `small` | 无 | |
|
||||
| size | 选择框大小 | `large` \| `middle` \| `small` | - | |
|
||||
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
||||
| removeIcon | 自定义的多选框清除图标 | ReactNode | - | |
|
||||
| clearIcon | 自定义的多选框清空图标 | ReactNode | - | |
|
||||
@ -98,7 +98,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| ----- | ---- | --------------------- | ------ | ---- |
|
||||
| key | | string | - | |
|
||||
| label | 组名 | string\|React.Element | 无 | |
|
||||
| label | 组名 | string\|React.Element | - | |
|
||||
|
||||
## FAQ
|
||||
|
||||
|
@ -20,7 +20,7 @@ Display statistic number.
|
||||
| ---------------- | ----------------------------- | -------------------- | ------- | ------- |
|
||||
| decimalSeparator | decimal separator | string | . | |
|
||||
| formatter | customize value display logic | (value) => ReactNode | - | |
|
||||
| groupSeparator | group separator | string | , | |
|
||||
| groupSeparator | group separator | string | `,` | |
|
||||
| precision | precision of input value | number | - | |
|
||||
| prefix | prefix node of value | string \| ReactNode | - | |
|
||||
| suffix | suffix node of value | string \| ReactNode | - | |
|
||||
@ -32,7 +32,7 @@ Display statistic number.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| format | Format as [moment](http://momentjs.com/) | string | 'HH:mm:ss' | |
|
||||
| format | Format as [moment](http://momentjs.com/) | string | `HH:mm:ss` | |
|
||||
| onFinish | Trigger when time's up | () => void | - | |
|
||||
| prefix | prefix node of value | string \| ReactNode | - | |
|
||||
| suffix | suffix node of value | string \| ReactNode | - | |
|
||||
|
@ -21,7 +21,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/rcBNhLBrKbE/Statistic.svg
|
||||
| ---------------- | ---------------- | -------------------- | ------ | ---- |
|
||||
| decimalSeparator | 设置小数点 | string | . | |
|
||||
| formatter | 自定义数值展示 | (value) => ReactNode | - | |
|
||||
| groupSeparator | 设置千分位标识符 | string | , | |
|
||||
| groupSeparator | 设置千分位标识符 | string | `,` | |
|
||||
| precision | 数值精度 | number | - | |
|
||||
| prefix | 设置数值的前缀 | string \| ReactNode | - | |
|
||||
| suffix | 设置数值的后缀 | string \| ReactNode | - | |
|
||||
@ -33,7 +33,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/rcBNhLBrKbE/Statistic.svg
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| format | 格式化倒计时展示,参考 [moment](http://momentjs.com/) | string | 'HH:mm:ss' | |
|
||||
| format | 格式化倒计时展示,参考 [moment](http://momentjs.com/) | string | `HH:mm:ss` | |
|
||||
| onFinish | 倒计时完成时触发 | () => void | - | |
|
||||
| prefix | 设置数值的前缀 | string \| ReactNode | - | |
|
||||
| suffix | 设置数值的后缀 | string \| ReactNode | - | |
|
||||
|
@ -48,7 +48,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg
|
||||
| --- | --- | --- | --- | --- |
|
||||
| description | 步骤的详情描述,可选 | string\|ReactNode | - | |
|
||||
| icon | 步骤图标的类型,可选 | ReactNode | - | |
|
||||
| status | 指定状态。当不配置该属性时,会使用 Steps 的 `current` 来自动指定状态。可选:`wait` `process` `finish` `error` | string | wait | |
|
||||
| status | 指定状态。当不配置该属性时,会使用 Steps 的 `current` 来自动指定状态。可选:`wait` `process` `finish` `error` | string | `wait` | |
|
||||
| title | 标题 | string\|ReactNode | - | |
|
||||
| subTitle | 子标题 | string\|ReactNode | - | |
|
||||
| disabled | 禁用点击 | boolean | false | |
|
||||
|
@ -22,7 +22,7 @@ Switching Selector.
|
||||
| defaultChecked | to set the initial state | boolean | false |
|
||||
| disabled | Disable switch | boolean | false |
|
||||
| loading | loading state of switch | boolean | false |
|
||||
| size | the size of the `Switch`, options: `default` `small` | string | default |
|
||||
| size | the size of the `Switch`, options: `default` `small` | string | `default` |
|
||||
| unCheckedChildren | content to be shown when the state is unchecked | string\|ReactNode | |
|
||||
| onChange | trigger when the checked state is changing | Function(checked: boolean, event: Event) | |
|
||||
| onClick | trigger when clicked | Function(checked: boolean, event: Event) | |
|
||||
|
@ -23,7 +23,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/zNdJQMhfm/Switch.svg
|
||||
| defaultChecked | 初始是否选中 | boolean | false |
|
||||
| disabled | 是否禁用 | boolean | false |
|
||||
| loading | 加载中的开关 | boolean | false |
|
||||
| size | 开关大小,可选值:`default` `small` | string | default |
|
||||
| size | 开关大小,可选值:`default` `small` | string | `default` |
|
||||
| unCheckedChildren | 非选中时的内容 | string\|ReactNode | |
|
||||
| onChange | 变化时回调函数 | Function(checked: boolean, event: Event) | |
|
||||
| onClick | 点击时回调函数 | Function(checked: boolean, event: Event) | |
|
||||
|
@ -61,20 +61,20 @@ const columns = [
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| 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` |
|
||||
| bordered | Whether to show all table borders | boolean | `false` |
|
||||
| bordered | Whether to show all table borders | boolean | false |
|
||||
| columns | Columns of table | [ColumnsType](#Column)\[] | - |
|
||||
| components | Override default table elements | [TableComponents](https://git.io/fANxz) | - |
|
||||
| dataSource | Data record array to be displayed | object\[] | - |
|
||||
| expandable | Config expandable content | [expandable](#expandable) | - |
|
||||
| footer | Table footer renderer | Function(currentPageData) | - |
|
||||
| loading | Loading status of table | boolean\|[object](/components/spin/#API) ([more](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | `false` |
|
||||
| loading | Loading status of table | boolean\|[object](/components/spin/#API) ([more](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | false |
|
||||
| locale | i18n text including filter, sort, empty text, etc | object | filterConfirm: 'Ok' <br> filterReset: 'Reset' <br> emptyText: 'No Data' <br> [Default](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) |
|
||||
| pagination | 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 | - |
|
||||
| rowKey | Row's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` |
|
||||
| rowSelection | Row selection [config](#rowSelection) | object | null |
|
||||
| scroll | Whether the table can be scrollable, [config](#scroll) | object | - |
|
||||
| showHeader | Whether to show table header | boolean | `true` |
|
||||
| showHeader | Whether to show table header | boolean | true |
|
||||
| size | Size of table | `default` \| `middle` \| `small` | `default` |
|
||||
| summary | Summary content | (currentData) => ReactNode | - |
|
||||
| title | Table title renderer | Function(currentPageData) | - |
|
||||
@ -83,7 +83,7 @@ const columns = [
|
||||
| onRow | Set props on per row | Function(record, index) | - |
|
||||
| getPopupContainer | the render container of dropdowns in table | (triggerNode) => HTMLElement | `() => TableHtmlElement` |
|
||||
| sortDirections | supported sort way, could be `'ascend'`, `'descend'` | Array | `['ascend', 'descend']` |
|
||||
| showSorterTooltip | header show next sorter direction tooltip | boolean | `true` |
|
||||
| showSorterTooltip | header show next sorter direction tooltip | boolean | true |
|
||||
|
||||
#### onRow usage
|
||||
|
||||
@ -123,12 +123,12 @@ One of the Table `columns` prop for describing the table's columns, Column has t
|
||||
| defaultSortOrder | Default order of sorted values | `ascend` \| `descend` | - | |
|
||||
| filterDropdown | Customized filter overlay | React.ReactNode \| (props: [FilterDropdownProps](https://git.io/fjP5h)) => React.ReactNode | - | |
|
||||
| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - | |
|
||||
| filtered | Whether the `dataSource` is filtered | boolean | `false` | |
|
||||
| filtered | Whether the `dataSource` is filtered | boolean | false | |
|
||||
| filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - | |
|
||||
| filterIcon | Customized filter icon | ReactNode\|(filtered: boolean) => ReactNode | `false` | |
|
||||
| filterMultiple | Whether multiple filters can be selected | boolean | `true` | |
|
||||
| filterIcon | Customized filter icon | ReactNode\|(filtered: boolean) => ReactNode | false | |
|
||||
| filterMultiple | Whether multiple filters can be selected | boolean | true | |
|
||||
| filters | Filter menu config | object\[] | - | |
|
||||
| fixed | (IE not support) Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean\|string | `false` | |
|
||||
| fixed | (IE not support) Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean\|string | false | |
|
||||
| key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - | |
|
||||
| render | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | Function(text, record, index) {} | - | |
|
||||
| responsive | The list of breakpoints at which to display this column. Always visible if not set. | [Breakpoint](https://github.com/ant-design/ant-design/blob/015109b42b85c63146371b4e32b883cf97b088e8/components/_util/responsiveObserve.ts#L1)\[] | - | 4.2.0 |
|
||||
@ -142,7 +142,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
|
||||
| onFilter | Callback executed when the confirm filter button is clicked | Function | - | |
|
||||
| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | function(visible) {} | - | |
|
||||
| onHeaderCell | Set props on per header cell | Function(column) | - | |
|
||||
| showSorterTooltip | header show next sorter direction tooltip, override `showSorterTooltip` in table | boolean | `true` | |
|
||||
| showSorterTooltip | header show next sorter direction tooltip, override `showSorterTooltip` in table | boolean | true | |
|
||||
|
||||
### ColumnGroup
|
||||
|
||||
@ -167,13 +167,13 @@ Properties for expandable.
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| childrenColumnName | The column contains children to display | string\[] | children |
|
||||
| defaultExpandAllRows | Expand all rows initially | boolean | `false` |
|
||||
| defaultExpandAllRows | Expand all rows initially | boolean | false |
|
||||
| defaultExpandedRowKeys | Initial expanded row keys | string\[] | - |
|
||||
| expandIcon | Customize row expand Icon. Ref [example](https://codesandbox.io/s/fervent-bird-nuzpr) | Function(props):ReactNode | - |
|
||||
| expandIconColumnIndex | Customize expand icon column index | number | - |
|
||||
| expandedRowKeys | Current expanded row keys | string\[] | - |
|
||||
| expandedRowRender | Expanded container render for each row | Function(record, index, indent, expanded):ReactNode | - |
|
||||
| expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | `false` |
|
||||
| expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | false |
|
||||
| indentSize | Indent size in pixels of tree data | number | 15 |
|
||||
| rowExpandable | Enable row can be expandable | (record) => boolean | - |
|
||||
| onExpand | Callback executed when the row expand icon is clicked | Function(expanded, record) | - |
|
||||
@ -189,7 +189,7 @@ Properties for row selection.
|
||||
| columnTitle | Set the title of the selection column | string\|React.ReactNode | - | 4.0 |
|
||||
| fixed | Fixed selection column on the left | boolean | - | 4.0 |
|
||||
| getCheckboxProps | Get Checkbox or Radio props | Function(record) | - | 4.0 |
|
||||
| hideSelectAll | Hide the selectAll checkbox and custom selection | boolean | `false` | 4.3 |
|
||||
| hideSelectAll | Hide the selectAll checkbox and custom selection | boolean | false | 4.3 |
|
||||
| renderCell | Renderer of the table cell. Same as `render` in column | Function(checked, record, index, originNode) {} | - | 4.1 |
|
||||
| selectedRowKeys | Controlled selected row keys | string\[]\|number[] | \[] | 4.0 |
|
||||
| selections | Custom selection [config](#rowSelection), only displays default selections when set to `true` | object\[]\|boolean | - | 4.0 |
|
||||
|
@ -76,7 +76,7 @@ const columns = [
|
||||
| locale | 默认文案设置,目前包括排序、过滤、空数据文案 | object | filterConfirm: '确定' <br> filterReset: '重置' <br> emptyText: '暂无数据' <br> [默认值](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) |
|
||||
| pagination | 分页器,参考[配置项](#pagination)或 [pagination](/components/pagination/) 文档,设为 false 时不展示和进行分页 | object | - |
|
||||
| rowClassName | 表格行的类名 | Function(record, index):string | - |
|
||||
| rowKey | 表格行 key 的取值,可以是字符串或一个函数 | string\|Function(record):string | 'key' |
|
||||
| rowKey | 表格行 key 的取值,可以是字符串或一个函数 | string\|Function(record):string | `key` |
|
||||
| rowSelection | 表格行是否可选择,[配置项](#rowSelection) | object | - |
|
||||
| scroll | 表格是否可滚动,也可以指定滚动区域的宽、高,[配置项](#scroll) | object | - |
|
||||
| showHeader | 是否显示表头 | boolean | true |
|
||||
@ -88,7 +88,7 @@ const columns = [
|
||||
| onRow | 设置行属性 | Function(record, index) | - |
|
||||
| getPopupContainer | 设置表格内各类浮层的渲染节点,如筛选菜单 | (triggerNode) => HTMLElement | `() => TableHtmlElement` |
|
||||
| sortDirections | 支持的排序方式,取值为 `'ascend'` `'descend'` | Array | `['ascend', 'descend']` |
|
||||
| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示 | boolean | `true` |
|
||||
| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示 | boolean | true |
|
||||
|
||||
#### onRow 用法
|
||||
|
||||
@ -147,7 +147,7 @@ const columns = [
|
||||
| onFilter | 本地模式下,确定筛选的运行函数 | Function | - | |
|
||||
| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - | |
|
||||
| onHeaderCell | 设置头部单元格属性 | Function(column) | - | |
|
||||
| showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中`showSorterTooltip` | boolean | `true` | |
|
||||
| showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中`showSorterTooltip` | boolean | true | |
|
||||
|
||||
### ColumnGroup
|
||||
|
||||
@ -178,7 +178,7 @@ const columns = [
|
||||
| expandIconColumnIndex | 自定义展开按钮的列顺序 | number | - |
|
||||
| expandedRowKeys | 展开的行,控制属性 | string\[] | - |
|
||||
| expandedRowRender | 额外的展开行 | Function(record, index, indent, expanded):ReactNode | - |
|
||||
| expandRowByClick | 通过点击行来展开子行 | boolean | `false` |
|
||||
| expandRowByClick | 通过点击行来展开子行 | boolean | false |
|
||||
| indentSize | 展示树形数据时,每层缩进的宽度,以 px 为单位 | number | 15 |
|
||||
| rowExpandable | 设置是否允许行展开 | (record) => boolean | - |
|
||||
| onExpand | 点击展开图标时触发 | Function(expanded, record) | - |
|
||||
|
@ -23,10 +23,10 @@ Ant Design has 3 types of Tabs for different situations.
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| activeKey | Current TabPane's key | string | - | |
|
||||
| animated | Whether to change tabs with animation. Only works while `tabPosition="top"\|"bottom"` | boolean \| {inkBar:boolean, tabPane:boolean} | `true`, `false` when `type="card"` | |
|
||||
| animated | Whether to change tabs with animation. Only works while `tabPosition="top"\|"bottom"` | boolean \| {inkBar:boolean, tabPane:boolean} | true, false when `type="card"` | |
|
||||
| renderTabBar | replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
|
||||
| defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set. | string | - | |
|
||||
| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | `false` | |
|
||||
| hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false | |
|
||||
| size | preset tab bar size | `large` \| `default` \| `small` | `default` | |
|
||||
| tabBarExtraContent | Extra content in tab bar | React.ReactNode | - | |
|
||||
| tabBarGutter | The gap between tabs | number | - | |
|
||||
|
@ -30,12 +30,12 @@ Ant Design 依次提供了三级选项卡,分别用于不同的场景。
|
||||
| renderTabBar | 替换 TabBar,用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - | |
|
||||
| defaultActiveKey | 初始化选中面板的 key,如果没有设置 activeKey | string | 第一个面板 | |
|
||||
| hideAdd | 是否隐藏加号图标,在 `type="editable-card"` 时有效 | boolean | false | |
|
||||
| size | 大小,提供 `large` `default` 和 `small` 三种大小 | string | 'default' | |
|
||||
| size | 大小,提供 `large` `default` 和 `small` 三种大小 | string | `default` | |
|
||||
| tabBarExtraContent | tab bar 上额外的元素 | React.ReactNode | - | |
|
||||
| tabBarGutter | tabs 之间的间隙 | number | - | |
|
||||
| tabBarStyle | tab bar 的样式对象 | object | - | |
|
||||
| tabPosition | 页签位置,可选值有 `top` `right` `bottom` `left` | string | 'top' | |
|
||||
| type | 页签的基本样式,可选 `line`、`card` `editable-card` 类型 | string | 'line' | |
|
||||
| tabPosition | 页签位置,可选值有 `top` `right` `bottom` `left` | string | `top` | |
|
||||
| type | 页签的基本样式,可选 `line`、`card` `editable-card` 类型 | string | `line` | |
|
||||
| onChange | 切换面板的回调 | Function(activeKey) {} | - | |
|
||||
| onEdit | 新增和删除页签的回调,在 `type="editable-card"` 时有效 | (targetKey, action): void | - | |
|
||||
| onTabClick | tab 被点击的回调 | Function(key: string, event: MouseEvent) | - | |
|
||||
@ -47,6 +47,6 @@ Ant Design 依次提供了三级选项卡,分别用于不同的场景。
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----------- | ----------------------------------------------- | ----------------- | ------ |
|
||||
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
|
||||
| key | 对应 activeKey | string | 无 |
|
||||
| tab | 选项卡头显示文字 | string\|ReactNode | 无 |
|
||||
| closeIcon | 自定义关闭图标,`在 type="editable-card"`时有效 | ReactNode | 无 |
|
||||
| key | 对应 activeKey | string | - |
|
||||
| tab | 选项卡头显示文字 | string\|ReactNode | - |
|
||||
| closeIcon | 自定义关闭图标,`在 type="editable-card"`时有效 | ReactNode | - |
|
||||
|
@ -17,17 +17,17 @@ Tag for categorizing or markup.
|
||||
|
||||
### Tag
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| closable | Whether the Tag can be closed | boolean | `false` |
|
||||
| color | Color of the Tag | string | - |
|
||||
| onClose | Callback executed when tag is closed | (e) => void | - |
|
||||
| visible | Whether the Tag is closed or not | boolean | `true` |
|
||||
| icon | Set the icon of tag | ReactNode | - | |
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ------------------------------------ | ----------- | ------- |
|
||||
| closable | Whether the Tag can be closed | boolean | false |
|
||||
| color | Color of the Tag | string | - |
|
||||
| onClose | Callback executed when tag is closed | (e) => void | - |
|
||||
| visible | Whether the Tag is closed or not | boolean | true |
|
||||
| icon | Set the icon of tag | ReactNode | - | |
|
||||
|
||||
### Tag.CheckableTag
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------------------------------------------- | ----------------- | ------- |
|
||||
| checked | Checked status of Tag | boolean | `false` |
|
||||
| checked | Checked status of Tag | boolean | false |
|
||||
| onChange | Callback executed when Tag is checked/unchecked | (checked) => void | - |
|
||||
|
@ -17,13 +17,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/cH1BOLfxC/Tag.svg
|
||||
|
||||
### Tag
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| closable | 标签是否可以关闭 | boolean | false |
|
||||
| color | 标签色 | string | - |
|
||||
| onClose | 关闭时的回调 | (e) => void | - |
|
||||
| visible | 是否显示标签 | boolean | `true` |
|
||||
| icon | 设置图标 | ReactNode | - | |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------- | ---------------- | ----------- | ------ |
|
||||
| closable | 标签是否可以关闭 | boolean | false |
|
||||
| color | 标签色 | string | - |
|
||||
| onClose | 关闭时的回调 | (e) => void | - |
|
||||
| visible | 是否显示标签 | boolean | true |
|
||||
| icon | 设置图标 | ReactNode | - | |
|
||||
|
||||
### Tag.CheckableTag
|
||||
|
||||
|
@ -30,13 +30,13 @@ import moment from 'moment';
|
||||
| bordered | 是否有边框 | boolean | true | |
|
||||
| className | 选择器类名 | string | '' | |
|
||||
| clearText | 清除按钮的提示文案 | string | clear | |
|
||||
| defaultValue | 默认时间 | [moment](http://momentjs.com/) | 无 | |
|
||||
| defaultValue | 默认时间 | [moment](http://momentjs.com/) | - | |
|
||||
| disabled | 禁用全部操作 | boolean | false | |
|
||||
| disabledHours | 禁止选择部分小时选项 | function() | 无 | |
|
||||
| disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour) | 无 | |
|
||||
| disabledSeconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | 无 | |
|
||||
| disabledHours | 禁止选择部分小时选项 | function() | - | |
|
||||
| disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour) | - | |
|
||||
| disabledSeconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | - | |
|
||||
| format | 展示的时间格式 | string | "HH:mm:ss" | |
|
||||
| getPopupContainer | 定义浮层的容器,默认为 body 上新建 div | function(trigger) | 无 | |
|
||||
| getPopupContainer | 定义浮层的容器,默认为 body 上新建 div | function(trigger) | - | |
|
||||
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false | |
|
||||
| hourStep | 小时选项间隔 | number | 1 | |
|
||||
| inputReadOnly | 设置输入框为只读(避免在移动设备上打开虚拟键盘) | boolean | false | |
|
||||
@ -48,11 +48,11 @@ import moment from 'moment';
|
||||
| secondStep | 秒选项间隔 | number | 1 | |
|
||||
| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - | |
|
||||
| clearIcon | 自定义的清除图标 | ReactNode | - | |
|
||||
| renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | 无 | |
|
||||
| renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - | |
|
||||
| use12Hours | 使用 12 小时制,为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false | |
|
||||
| value | 当前时间 | [moment](http://momentjs.com/) | 无 | |
|
||||
| onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | 无 | |
|
||||
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean): void | 无 | |
|
||||
| value | 当前时间 | [moment](http://momentjs.com/) | - | |
|
||||
| onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | - | |
|
||||
| onOpenChange | 面板打开/关闭时的回调 | (open: boolean): void | - | |
|
||||
|
||||
## 方法
|
||||
|
||||
|
@ -29,7 +29,7 @@ Timeline
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| pending | Set the last ghost node's existence or its content | boolean\|string\|ReactNode | `false` |
|
||||
| pending | Set the last ghost node's existence or its content | boolean\|string\|ReactNode | false |
|
||||
| pendingDot | Set the dot of the last ghost node when pending is true | string\|ReactNode | `<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` | - |
|
||||
|
@ -41,7 +41,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/vJmo00mmgR/Timeline.svg
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| -------- | ----------------------------------------------------- | ----------------- | ------ |
|
||||
| color | 指定圆圈颜色 `blue, red, green, gray`,或自定义的色值 | string | blue |
|
||||
| color | 指定圆圈颜色 `blue, red, green, gray`,或自定义的色值 | string | `blue` |
|
||||
| dot | 自定义时间轴点 | string\|ReactNode | - |
|
||||
| position | 自定义节点位置 | `left` \| `right` | - |
|
||||
| label | 设置标签 | ReactNode | - |
|
||||
|
@ -24,9 +24,9 @@ The following APIs are shared by Tooltip, Popconfirm, Popover.
|
||||
|
||||
| Property | Description | Type | Default | Version |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| 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` | |
|
||||
| defaultVisible | Whether the floating tooltip card is visible by default | boolean | `false` | |
|
||||
| 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 | |
|
||||
| defaultVisible | Whether the floating tooltip card is visible by default | boolean | false | |
|
||||
| color | background color | string | - | 4.3.0 |
|
||||
| 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 | |
|
||||
@ -35,9 +35,9 @@ The following APIs are shared by Tooltip, Popconfirm, Popover.
|
||||
| overlayStyle | Style of the tooltip card | object | - | |
|
||||
| placement | The position of the tooltip relative to the target, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` | |
|
||||
| trigger | Tooltip trigger mode. Could be multiple by passing an array | `hover` \| `focus` \| `click` \| `contextMenu` \| `Array<string>` | `hover` | |
|
||||
| visible | Whether the floating tooltip card is visible or not | boolean | `false` | |
|
||||
| visible | Whether the floating tooltip card is visible or not | boolean | false | |
|
||||
| onVisibleChange | Callback executed when visibility of the tooltip card is changed | (visible) => void | - | |
|
||||
| align | this value will be merged into placement's config, please refer to the settings [rc-tooltip](https://github.com/react-component/tooltip) | Object | - | |
|
||||
| align | this value will be merged into placement's config, please refer to the settings [rc-tooltip](https://github.com/react-component/tooltip) | object | - | |
|
||||
| destroyTooltipOnHide | whether destroy tooltip when hidden, parent container of tooltip will be destroyed when `keepParent` is `false` | boolean \| { keepParent?: boolean } | false | |
|
||||
|
||||
## Note
|
||||
|
@ -18,7 +18,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ----- | -------- | ---------------------------------- | ------ |
|
||||
| title | 提示文字 | string\|ReactNode\|() => ReactNode | 无 |
|
||||
| title | 提示文字 | string\|ReactNode\|() => ReactNode | - |
|
||||
|
||||
### 共同的 API
|
||||
|
||||
@ -26,20 +26,20 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| arrowPointAtCenter | 箭头是否指向目标元素中心 | boolean | `false` | |
|
||||
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | `true` | |
|
||||
| arrowPointAtCenter | 箭头是否指向目标元素中心 | boolean | false | |
|
||||
| autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true | |
|
||||
| defaultVisible | 默认是否显隐 | boolean | false | |
|
||||
| color | 背景颜色 | string | - | 4.3.0 |
|
||||
| getPopupContainer | 浮层渲染父节点,默认渲染到 body 上 | Function(triggerNode) | () => document.body | |
|
||||
| mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip,单位:秒 | number | 0.1 | |
|
||||
| mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip,单位:秒 | number | 0.1 | |
|
||||
| overlayClassName | 卡片类名 | string | 无 | |
|
||||
| overlayStyle | 卡片样式 | object | 无 | |
|
||||
| placement | 气泡框位置,可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | top | |
|
||||
| trigger | 触发行为,可选 `hover/focus/click/contextMenu`,可使用数组设置多个触发行为 | string \| string[] | hover | |
|
||||
| overlayClassName | 卡片类名 | string | - | |
|
||||
| overlayStyle | 卡片样式 | object | - | |
|
||||
| placement | 气泡框位置,可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` | |
|
||||
| trigger | 触发行为,可选 `hover/focus/click/contextMenu`,可使用数组设置多个触发行为 | string \| string[] | `hover` | |
|
||||
| visible | 用于手动控制浮层显隐 | boolean | false | |
|
||||
| onVisibleChange | 显示隐藏的回调 | (visible) => void | 无 | |
|
||||
| align | 该值将合并到 placement 的配置中,设置参考 [rc-tooltip](https://github.com/react-component/tooltip) | Object | 无 | |
|
||||
| onVisibleChange | 显示隐藏的回调 | (visible) => void | - | |
|
||||
| align | 该值将合并到 placement 的配置中,设置参考 [rc-tooltip](https://github.com/react-component/tooltip) | object | - | |
|
||||
| destroyTooltipOnHide | 关闭后是否销毁 Tooltip,当 `keepParent` 为 `false` 时销毁父容器 | boolean \| { keepParent?: boolean } | false | |
|
||||
|
||||
## 注意
|
||||
|
@ -39,7 +39,7 @@ Tree selection control.
|
||||
| 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 | |
|
||||
| switcherIcon | customize collapse/expand icon of tree node | ReactNode | - |
|
||||
| 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 | Support search or not | boolean | single: `false` \| multiple: `true` | |
|
||||
| showSearch | Support search or not | boolean | single: false \| multiple: true | |
|
||||
| size | To set the size of the select input | `large` \| `middle` \| `small` | | |
|
||||
| showArrow | Whether to show the `suffixIcon`,when single selection mode, default `true` | boolean | | |
|
||||
| suffixIcon | The custom suffix icon,you must set `showArrow` to `true` manually in multiple selection mode | ReactNode | - | |
|
||||
@ -50,8 +50,8 @@ Tree selection control.
|
||||
| treeDefaultExpandAll | Whether to expand all treeNodes by default | boolean | false | |
|
||||
| treeDefaultExpandedKeys | Default expanded treeNodes | string\[] | - | |
|
||||
| treeExpandedKeys | Set expanded keys | string\[] | - | |
|
||||
| treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | 'value' | |
|
||||
| treeNodeLabelProp | Will render as content of select | string | 'title' | |
|
||||
| treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | `value` | |
|
||||
| treeNodeLabelProp | Will render as content of select | string | `title` | |
|
||||
| value | To set the current selected treeNode(s). | string\|string\[] | - | |
|
||||
| virtual | Disable virtual scroll when set to `false` | boolean | true | 4.1.0 |
|
||||
| onChange | A callback function, can be executed when selected treeNodes or input value change | function(value, label, extra) | - | |
|
||||
|
@ -40,8 +40,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
|
||||
| treeIcon | 是否展示 TreeNode title 前的图标,没有默认样式,如设置为 true,需要自行定义图标相关样式 | boolean | false | |
|
||||
| switcherIcon | 自定义树节点的展开/折叠图标 | ReactNode | - |
|
||||
| showCheckedStrategy | 定义选中项回填的方式。`TreeSelect.SHOW_ALL`: 显示所有选中节点(包括父节点). `TreeSelect.SHOW_PARENT`: 只显示父节点(当父节点下所有子节点都选中时). 默认只显示子节点. | enum{TreeSelect.SHOW_ALL, TreeSelect.SHOW_PARENT, TreeSelect.SHOW_CHILD } | TreeSelect.SHOW_CHILD | |
|
||||
| showSearch | 是否支持搜索框 | boolean | 单选:`false` \| 多选:`true` | |
|
||||
| size | 选择框大小 | `large` \| `middle` \| `small` | 无 | |
|
||||
| showSearch | 是否支持搜索框 | boolean | 单选:false \| 多选:true | |
|
||||
| size | 选择框大小 | `large` \| `middle` \| `small` | - | |
|
||||
| showArrow | 是否显示 `suffixIcon`,单选模式下默认 `true` | boolean | | |
|
||||
| suffixIcon | 自定义的选择框后缀图标, 多选模式下必须同时设置 `showArrow` 为 `true` | ReactNode | - | |
|
||||
| treeCheckable | 显示 checkbox | boolean | false | |
|
||||
@ -51,8 +51,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
|
||||
| treeDefaultExpandAll | 默认展开所有树节点 | boolean | false | |
|
||||
| treeDefaultExpandedKeys | 默认展开的树节点 | string\[] | - | |
|
||||
| treeExpandedKeys | 设置展开的树节点 | string\[] | - | |
|
||||
| treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | string | 'value' | |
|
||||
| treeNodeLabelProp | 作为显示的 prop 设置 | string | 'title' | |
|
||||
| treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | string | `value` | |
|
||||
| treeNodeLabelProp | 作为显示的 prop 设置 | string | `title` | |
|
||||
| value | 指定当前选中的条目 | string/string\[] | - | |
|
||||
| virtual | 设置 `false` 时关闭虚拟滚动 | boolean | true | 4.1.0 |
|
||||
| onChange | 选中树节点时调用此函数 | function(value, label, extra) | - | |
|
||||
|
@ -64,13 +64,13 @@ Almost anything can be represented in a tree structure. Examples include directo
|
||||
| isLeaf | Determines if this is a leaf node(effective when `loadData` is specified) | boolean | false | |
|
||||
| key | Used with (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys. P.S.: It must be unique in all of treeNodes of the tree! | string | internal calculated position of treeNode | |
|
||||
| selectable | Set whether the treeNode can be selected | boolean | true | |
|
||||
| title | Title | string\|ReactNode | '---' | |
|
||||
| title | Title | string\|ReactNode | `---` | |
|
||||
|
||||
### DirectoryTree props
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| --- | --- | --- | --- |
|
||||
| expandAction | Directory open logic, optional `false` `'click'` `'doubleClick'` | string | click |
|
||||
| expandAction | Directory open logic, optional `false` `'click'` `'doubleClick'` | string | `click` |
|
||||
|
||||
## Note
|
||||
|
||||
|
@ -65,13 +65,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
|
||||
| isLeaf | 设置为叶子节点(设置了`loadData`时有效) | boolean | false |
|
||||
| key | 被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意:整个树范围内的所有节点的 key 值不能重复! | string | 内部计算出的节点位置 |
|
||||
| selectable | 设置节点是否可被选中 | boolean | true |
|
||||
| title | 标题 | string\|ReactNode | '---' |
|
||||
| title | 标题 | string\|ReactNode | `---` |
|
||||
|
||||
### DirectoryTree props
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------ | ---------------------------------------------------- | ------ | ------ |
|
||||
| expandAction | 目录展开逻辑,可选 `false` `'click'` `'doubleClick'` | string | click |
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| ------------ | ---------------------------------------------------- | ------ | ------- |
|
||||
| expandAction | 目录展开逻辑,可选 `false` `'click'` `'doubleClick'` | string | `click` |
|
||||
|
||||
## 注意
|
||||
|
||||
|
@ -42,7 +42,7 @@ Basic text writing, including headings, body text, lists, and more.
|
||||
| disabled | Disabled content | boolean | false | |
|
||||
| editable | Editable. Can control edit state when is object | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false | |
|
||||
| ellipsis | Display ellipsis when text overflows. Can configure rows and expandable by using object | boolean \| { rows: number, expandable: boolean, onExpand: Function(event), onEllipsis: Function(ellipsis) } | false | onEllipsis: 4.2.0 |
|
||||
| level | Set content importance. Match with `h1`, `h2`, `h3`, `h4` | number: `1`, `2`, `3`, `4` | 1 | |
|
||||
| level | Set content importance. Match with `h1`, `h2`, `h3`, `h4` | number: 1, 2, 3, 4 | 1 | |
|
||||
| mark | Marked style | boolean | false | |
|
||||
| underline | Underlined style | boolean | false | |
|
||||
| onChange | Trigger when user edits the content | Function(string) | - | |
|
||||
|
@ -41,7 +41,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
|
||||
| disabled | 禁用文本 | boolean | false | |
|
||||
| editable | 是否可编辑,为对象时可对编辑进行控制 | boolean \| { editing: boolean, onStart: Function, onChange: Function(string) } | false | |
|
||||
| ellipsis | 自动溢出省略,为对象时可设置省略行数与是否可展开等 | boolean \| { rows: number, expandable: boolean, onExpand: Function(event), onEllipsis: Function(ellipsis) } | false | onEllipsis: 4.2.0 |
|
||||
| level | 重要程度,相当于 `h1`、`h2`、`h3`、`h4` | number: `1`, `2`, `3`, `4` | 1 | |
|
||||
| level | 重要程度,相当于 `h1`、`h2`、`h3`、`h4` | number: 1, 2, 3, 4 | 1 | |
|
||||
| mark | 添加标记样式 | boolean | false | |
|
||||
| underline | 添加下划线样式 | boolean | false | |
|
||||
| onChange | 当用户提交编辑内容时触发 | Function(string) | - | |
|
||||
|
@ -20,31 +20,31 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 | 版本 |
|
||||
| --- | --- | --- | --- | --- |
|
||||
| accept | 接受上传的文件类型, 详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | 无 | |
|
||||
| action | 上传的地址 | string\|(file) => `Promise` | 无 | |
|
||||
| accept | 接受上传的文件类型, 详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - | |
|
||||
| action | 上传的地址 | string\|(file) => `Promise` | - | |
|
||||
| method | 上传请求的 http method | string | `post` | |
|
||||
| directory | 支持上传文件夹([caniuse](https://caniuse.com/#feat=input-file-directory)) | boolean | false | |
|
||||
| beforeUpload | 上传文件之前的钩子,参数为上传的文件,若返回 `false` 则停止上传。支持返回一个 Promise 对象,Promise 对象 reject 时则停止上传,resolve 时开始上传( resolve 传入 `File` 或 `Blob` 对象则上传 resolve 传入对象)。**注意:IE9 不支持该方法**。 | (file, fileList) => `boolean | Promise` | 无 | |
|
||||
| customRequest | 通过覆盖默认的上传行为,可以自定义自己的上传实现 | Function | 无 | |
|
||||
| data | 上传所需额外参数或返回上传额外参数的方法 | object\|(file) => `object | Promise<object>` | 无 | |
|
||||
| defaultFileList | 默认已经上传的文件列表 | object\[] | 无 | |
|
||||
| beforeUpload | 上传文件之前的钩子,参数为上传的文件,若返回 `false` 则停止上传。支持返回一个 Promise 对象,Promise 对象 reject 时则停止上传,resolve 时开始上传( resolve 传入 `File` 或 `Blob` 对象则上传 resolve 传入对象)。**注意:IE9 不支持该方法**。 | (file, fileList) => `boolean | Promise` | - | |
|
||||
| customRequest | 通过覆盖默认的上传行为,可以自定义自己的上传实现 | Function | - | |
|
||||
| data | 上传所需额外参数或返回上传额外参数的方法 | object\|(file) => `object | Promise<object>` | - | |
|
||||
| defaultFileList | 默认已经上传的文件列表 | object\[] | - | |
|
||||
| disabled | 是否禁用 | boolean | false | |
|
||||
| fileList | 已经上传的文件列表(受控),使用此参数时,如果遇到 `onChange` 只调用一次的问题,请参考 [#2423](https://github.com/ant-design/ant-design/issues/2423) | object\[] | 无 | |
|
||||
| headers | 设置上传的请求头部,IE10 以上有效 | object | 无 | |
|
||||
| fileList | 已经上传的文件列表(受控),使用此参数时,如果遇到 `onChange` 只调用一次的问题,请参考 [#2423](https://github.com/ant-design/ant-design/issues/2423) | object\[] | - | |
|
||||
| headers | 设置上传的请求头部,IE10 以上有效 | object | - | |
|
||||
| listType | 上传列表的内建样式,支持三种基本样式 `text`, `picture` 和 `picture-card` | string | `text` | |
|
||||
| multiple | 是否支持多选文件,`ie10+` 支持。开启后按住 ctrl 可选择多个文件 | boolean | false | |
|
||||
| name | 发到后台的文件参数名 | string | `file` | |
|
||||
| previewFile | 自定义文件预览逻辑 | (file: File \| Blob) => Promise<dataURL: string> | 无 | |
|
||||
| previewFile | 自定义文件预览逻辑 | (file: File \| Blob) => Promise<dataURL: string> | - | |
|
||||
| isImageUrl | 自定义缩略图是否使用 `<img />` 标签进行显示 | (file: UploadFile) => boolean | [内部实现](https://github.com/ant-design/ant-design/blob/4ad5830eecfb87471cd8ac588c5d992862b70770/components/upload/utils.tsx#L47-L68) | |
|
||||
| showUploadList | 是否展示文件列表, 可设为一个对象,用于单独设定 `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` 和 `downloadIcon` | Boolean or { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean, removeIcon?: React.ReactNode, downloadIcon?: React.ReactNode } | true | |
|
||||
| withCredentials | 上传请求时是否携带 cookie | boolean | false | |
|
||||
| openFileDialogOnClick | 点击打开文件对话框 | boolean | true | |
|
||||
| onChange | 上传文件改变时的状态,详见 [onChange](#onChange) | Function | 无 | |
|
||||
| onPreview | 点击文件链接或预览图标时的回调 | Function(file) | 无 | |
|
||||
| onRemove | 点击移除文件时的回调,返回值为 false 时不移除。支持返回一个 Promise 对象,Promise 对象 resolve(false) 或 reject 时不移除。 | Function(file): `boolean | Promise` | 无 | |
|
||||
| onChange | 上传文件改变时的状态,详见 [onChange](#onChange) | Function | - | |
|
||||
| onPreview | 点击文件链接或预览图标时的回调 | Function(file) | - | |
|
||||
| onRemove | 点击移除文件时的回调,返回值为 false 时不移除。支持返回一个 Promise 对象,Promise 对象 resolve(false) 或 reject 时不移除。 | Function(file): `boolean | Promise` | - | |
|
||||
| onDownload | 点击下载文件时的回调,如果没有指定,则默认跳转到文件 url 对应的标签页。 | Function(file): void | 跳转新标签页 | |
|
||||
| transformFile | 在上传之前转换文件。支持返回一个 Promise 对象 | Function(file): `string | Blob | File | Promise<string | Blob | File>` | 无 | |
|
||||
| iconRender | 自定义显示 icon | (file: UploadFile, listType?: UploadListType) => React.ReactNode | 无 | |
|
||||
| transformFile | 在上传之前转换文件。支持返回一个 Promise 对象 | Function(file): `string | Blob | File | Promise<string | Blob | File>` | - | |
|
||||
| iconRender | 自定义显示 icon | (file: UploadFile, listType?: UploadListType) => React.ReactNode | - | |
|
||||
| progress | 自定义进度条样式 | [ProgressProps](/components/progress/#API) ( 仅支持 `type="line"` ) | `{ strokeWidth: 2, showInfo: false }` | 4.3.0 |
|
||||
|
||||
### onChange
|
||||
|
Loading…
Reference in New Issue
Block a user