mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-07 17:44:35 +08:00
docs: sort api table
This commit is contained in:
parent
2d2aceb9d3
commit
aa580beb8b
@ -20,8 +20,8 @@ Alert component for feedback.
|
||||
| closable | Whether Alert can be closed | boolean | - |
|
||||
| closeText | Close text to show | string\|ReactNode | - |
|
||||
| description | Additional content of Alert | string\|ReactNode | - |
|
||||
| iconType | Icon type, effective when `showIcon` is `true` | string | - |
|
||||
| message | Content of Alert | string\|ReactNode | - |
|
||||
| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true |
|
||||
| iconType | Icon type, effective when `showIcon` is `true` | string | - |
|
||||
| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` |
|
||||
| onClose | Callback when Alert is closed | (e: MouseEvent) => void | - |
|
||||
|
@ -21,8 +21,8 @@ title: Alert
|
||||
| closable | 默认不显示关闭按钮 | boolean | 无 |
|
||||
| closeText | 自定义关闭按钮 | string\|ReactNode | 无 |
|
||||
| description | 警告提示的辅助性文字介绍 | string\|ReactNode | 无 |
|
||||
| iconType | 自定义图标类型,`showIcon` 为 `true` 时有效 | string | - |
|
||||
| message | 警告提示内容 | string\|ReactNode | 无 |
|
||||
| showIcon | 是否显示辅助图标 | boolean | false,`banner` 模式下默认值为 true |
|
||||
| iconType | 自定义图标类型,`showIcon` 为 `true` 时有效 | string | - |
|
||||
| type | 指定警告提示的样式,有四种选择 `success`、`info`、`warning`、`error` | string | `info`,`banner` 模式下默认值为 `warning` |
|
||||
| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | 无 |
|
||||
|
@ -33,11 +33,11 @@ const dataSource = ['12345', '23456', '34567'];
|
||||
| optionLabelProp | Which prop value of option will render as content of select. | string | `children` |
|
||||
| placeholder | placeholder of input | string | - |
|
||||
| value | selected option | string\|string\[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode }> | - |
|
||||
| onBlur | Called when leaving the component. | function() | - |
|
||||
| onChange | Called when select an option or input value change, or value of input is changed | function(value) | - |
|
||||
| onFocus | Called when entering the component | function() | - |
|
||||
| onSearch | Called when searching items. | function(value) | - |
|
||||
| onSelect | Called when a option is selected. param is option's value and option instance. | function(value, option) | - |
|
||||
| onBlur | Called when leaving the component. | function() | - |
|
||||
| onFocus | Called when entering the component | function() | - |
|
||||
|
||||
## Methods
|
||||
|
||||
|
@ -34,11 +34,11 @@ const dataSource = ['12345', '23456', '34567'];
|
||||
| optionLabelProp | 回填到选择框的 Option 的属性值,默认是 Option 的子元素。比如在子元素需要高亮效果时,此值可以设为 `value`。 | string | `children` |
|
||||
| placeholder | 输入框提示 | string | - |
|
||||
| value | 指定当前选中的条目 | string\|string\[]\|{ key: string, label: string\|ReactNode }\|Array<{ key: string, label: string\|ReactNode }> | 无 |
|
||||
| onBlur | 获取焦点时的回调 | function() | - |
|
||||
| onChange | 选中 option,或 input 的 value 变化时,调用此函数 | function(value) | 无 |
|
||||
| onFocus | 失去焦点时的回调 | function() | - |
|
||||
| onSearch | 搜索补全项的时候调用 | function(value) | 无 |
|
||||
| onSelect | 被选中时调用,参数为选中项的 value 值 | function(value, option) | 无 |
|
||||
| onBlur | 获取焦点时的回调 | function() | - |
|
||||
| onFocus | 失去焦点时的回调 | function() | - |
|
||||
|
||||
## 方法
|
||||
|
||||
|
@ -16,12 +16,12 @@ To get a customized button, just set `type`/`shape`/`size`/`loading`/`disabled`.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| disabled | disabled state of button | boolean | `false` |
|
||||
| ghost | make background transparent and invert text and border colors, added in 2.7 | 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 of button, see: Icon component | string | - |
|
||||
| loading | set the loading status of button | boolean \| { delay: number } | false |
|
||||
| disabled | disabled state of button | boolean | `false` |
|
||||
| shape | can be set to `circle` or omitted | string | - |
|
||||
| size | can be set to `small` `large` or omitted | string | `default` |
|
||||
| target | same as target attribute of a, works when href is specified | string | - |
|
||||
|
@ -19,12 +19,12 @@ subtitle: 按钮
|
||||
|
||||
| 属性 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| disabled | 按钮失效状态 | boolean | `false` |
|
||||
| ghost | 幽灵属性,使按钮背景透明,版本 2.7 中增加 | 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 | 设置按钮的图标类型 | string | - |
|
||||
| loading | 设置按钮载入状态 | boolean \| { delay: number } | `false` |
|
||||
| disabled | 按钮失效状态 | boolean | `false` |
|
||||
| shape | 设置按钮形状,可选值为 `circle` 或者不设 | string | - |
|
||||
| size | 设置按钮大小,可选值为 `small` `large` 或者不设 | string | `default` |
|
||||
| target | 相当于 a 链接的 target 属性,href 存在时生效 | string | - |
|
||||
|
@ -22,15 +22,15 @@ A card can be used to display content related to a single subject. The content c
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| actions | The action list, shows at the bottom of the Card. | Array<ReactNode> | - |
|
||||
| activeTabKey | Current TabPane's key | string | - |
|
||||
| bodyStyle | Inline style to apply to the card content | object | - |
|
||||
| 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 | - |
|
||||
| hoverable | Lift up when hovering card | boolean | false |
|
||||
| loading | Shows a loading indicator while the contents of the card are being fetched | boolean | false |
|
||||
| tabList | List of TabPane's head. | Array<{key: string, tab: ReactNode}> | - |
|
||||
| activeTabKey | Current TabPane's key | string | - |
|
||||
| defaultActiveTabKey | Initial active TabPane's key, if `activeTabKey` is not set. | string | - |
|
||||
| title | Card title | string\|ReactNode | - |
|
||||
| type | Card style type, can be set to `inner` or not set | string | - |
|
||||
| onTabChange | Callback when tab is switched | (key) => void | - |
|
||||
|
@ -23,15 +23,15 @@ cols: 1
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| actions | 卡片操作组,位置在卡片底部 | Array<ReactNode> | - |
|
||||
| activeTabKey | 当前激活页签的 key | string | - |
|
||||
| bodyStyle | 内容区域自定义样式 | object | - |
|
||||
| bordered | 是否有边框 | boolean | true |
|
||||
| cover | 卡片封面 | ReactNode | - |
|
||||
| defaultActiveTabKey | 初始化选中页签的 key,如果没有设置 activeTabKey | string | 第一个页签 |
|
||||
| extra | 卡片右上角的操作区域 | string\|ReactNode | - |
|
||||
| hoverable | 鼠标移过时可浮起 | boolean | false |
|
||||
| loading | 当卡片内容还在加载中时,可以用 loading 展示一个占位 | boolean | false |
|
||||
| tabList | 页签标题列表 | Array<{key: string, tab: ReactNode}> | - |
|
||||
| activeTabKey | 当前激活页签的 key | string | - |
|
||||
| defaultActiveTabKey | 初始化选中页签的 key,如果没有设置 activeTabKey | string | 第一个页签 |
|
||||
| title | 卡片标题 | string\|ReactNode | - |
|
||||
| type | 卡片类型,可设置为 `inner` 或 不设置 | string | - |
|
||||
| onTabChange | 页签切换的回调 | (key) => void | - |
|
||||
|
@ -28,6 +28,7 @@ Cascade selection box.
|
||||
| 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' |
|
||||
| filedNames | 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' |
|
||||
@ -42,7 +43,6 @@ Cascade selection box.
|
||||
| value | selected value | string\[] | - |
|
||||
| onChange | callback when finishing cascader select | `(value, selectedOptions) => void` | - |
|
||||
| onPopupVisibleChange | callback when popup shown or hidden | `(value) => void` | - |
|
||||
| filedNames | custom field name for label and value and children | object | `{ label: 'label', value: 'value', children: 'children' }` |
|
||||
|
||||
Fields in `showSearch`:
|
||||
|
||||
|
@ -29,6 +29,7 @@ subtitle: 级联选择
|
||||
| disabled | 禁用 | boolean | false |
|
||||
| displayRender | 选择后展示的渲染函数 | `(label, selectedOptions) => ReactNode` | `label => label.join(' / ')` |
|
||||
| expandTrigger | 次级菜单的展开方式,可选 'click' 和 'hover' | string | 'click' |
|
||||
| filedNames | 自定义 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' |
|
||||
@ -43,7 +44,6 @@ subtitle: 级联选择
|
||||
| value | 指定选中项 | string\[] | - |
|
||||
| onChange | 选择完成后的回调 | `(value, selectedOptions) => void` | - |
|
||||
| onPopupVisibleChange | 显示/隐藏浮层的回调 | `(value) => void` | - |
|
||||
| filedNames | 自定义 options 中 label name children 的字段 | object | `{ label: 'label', value: 'value', children: 'children' }` |
|
||||
|
||||
`showSearch` 为对象时,其中的字段:
|
||||
|
||||
|
@ -42,5 +42,5 @@ Checkbox.
|
||||
|
||||
| Name | Description |
|
||||
| ---- | ----------- |
|
||||
| focus() | get focus |
|
||||
| blur() | remove focus |
|
||||
| focus() | get focus |
|
||||
|
@ -43,5 +43,5 @@ title: Checkbox
|
||||
|
||||
| 名称 | 描述 |
|
||||
| --- | --- |
|
||||
| focus() | 获取焦点 |
|
||||
| blur() | 移除焦点 |
|
||||
| focus() | 获取焦点 |
|
||||
|
@ -27,7 +27,7 @@ A content area which can be collapsed and expanded.
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| 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 | - |
|
||||
| showArrow | If `false`, panel will not show arrow icon | boolean | `true` |
|
||||
| forceRender | Forced render of content on panel, instead of lazy rending after clicking on header | boolean | `false` |
|
||||
|
@ -28,6 +28,6 @@ cols: 1
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| disabled | 禁用后的面板展开与否将无法通过用户交互改变 | boolean | false |
|
||||
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
|
||||
| header | 面板头内容 | string\|ReactNode | 无 |
|
||||
| key | 对应 activeKey | string | 无 |
|
||||
| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
|
||||
|
@ -54,16 +54,16 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
|
||||
| dateRender | custom rendering function for date cells | function(currentDate: moment, today: moment) => React.ReactNode | - |
|
||||
| disabled | determine whether the DatePicker is disabled | boolean | false |
|
||||
| disabledDate | specify the date that cannot be selected | (currentDate: moment) => boolean | - |
|
||||
| dropdownClassName | to customize the className of the popup calendar | string | - |
|
||||
| getCalendarContainer | to set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |
|
||||
| locale | localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
|
||||
| mode | picker panel mode | `time|date|month|year` | 'date' |
|
||||
| open | open state of picker | boolean | - |
|
||||
| placeholder | placeholder of date input | string\|RangePicker\[] | - |
|
||||
| popupStyle | to customize the style of the popup calendar | object | {} |
|
||||
| dropdownClassName | to customize the className of the popup calendar | string | - |
|
||||
| size | determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | string | - |
|
||||
| style | to customize the style of the input box | object | {} |
|
||||
| onOpenChange | a callback function, can be executed whether the popup calendar is popped up or closed | function(status) | - |
|
||||
| mode | picker panel mode | `time|date|month|year` | 'date' |
|
||||
| onPanelChange | callback when picker panel mode is changed | function(value, mode) | - |
|
||||
|
||||
### Common Methods
|
||||
@ -116,7 +116,7 @@ The following APIs are shared by DatePicker, MonthPicker, RangePicker, WeekPicke
|
||||
| defaultValue | to set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |
|
||||
| disabledTime | to specify the time that cannot be selected | function(dates: [moment, moment], partial: `'start'|'end'`) | - |
|
||||
| format | to set the date format | 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/)\[] } | - |
|
||||
| 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 | - |
|
||||
| showTime | to provide an additional time selection | object\|boolean | [TimePicker Options](/components/time-picker/#API) |
|
||||
| showTime.defaultValue | to set default time of selected date, [demo](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | [moment(), moment()] |
|
||||
|
@ -55,12 +55,12 @@ import 'moment/src/locale/zh-cn';
|
||||
| dateRender | 自定义日期单元格的内容 | function(currentDate: moment, today: moment) => React.ReactNode | - |
|
||||
| disabled | 禁用 | boolean | false |
|
||||
| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | 无 |
|
||||
| dropdownClassName | 额外的弹出日历 className | string | - |
|
||||
| getCalendarContainer | 定义浮层的容器,默认为 body 上新建 div | function(trigger) | 无 |
|
||||
| locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |
|
||||
| open | 控制弹层是否展开 | boolean | - |
|
||||
| placeholder | 输入框提示文字 | string\|RangePicker\[] | - |
|
||||
| popupStyle | 额外的弹出日历样式 | object | {} |
|
||||
| dropdownClassName | 额外的弹出日历 className | string | - |
|
||||
| size | 输入框大小,`large` 高度为 40px,`small` 为 24px,默认是 32px | string | 无 |
|
||||
| style | 自定义输入框样式 | object | {} |
|
||||
| onOpenChange | 弹出日历和关闭日历的回调 | function(status) | 无 |
|
||||
@ -79,6 +79,7 @@ import 'moment/src/locale/zh-cn';
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/) | 无 |
|
||||
| disabledTime | 不可选择的时间 | function(date) | 无 |
|
||||
| format | 展示的日期格式,配置参考 [moment.js](http://momentjs.com/) | string | "YYYY-MM-DD" |
|
||||
| mode | 日期面板的状态 | `time|date|month|year` | 'date' |
|
||||
| renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |
|
||||
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) |
|
||||
| showTime.defaultValue | 设置用户选择日期时默认的时分秒,[例子](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() |
|
||||
@ -86,7 +87,6 @@ import 'moment/src/locale/zh-cn';
|
||||
| value | 日期 | [moment](http://momentjs.com/) | 无 |
|
||||
| onChange | 时间发生变化的回调 | function(date: moment, dateString: string) | 无 |
|
||||
| onOk | 点击确定按钮的回调 | function() | - |
|
||||
| mode | 日期面板的状态 | `time|date|month|year` | 'date' |
|
||||
| onPanelChange | 日期面板变化时的回调 | function(value, mode) | - |
|
||||
|
||||
### MonthPicker
|
||||
@ -116,7 +116,7 @@ import 'moment/src/locale/zh-cn';
|
||||
| defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | 无 |
|
||||
| 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 | - |
|
||||
| showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) |
|
||||
| showTime.defaultValue | 设置用户选择日期时默认的时分秒,[例子](https://ant.design/components/date-picker/#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | [moment(), moment()] |
|
||||
|
@ -18,8 +18,8 @@ A divider line separates different content.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| dashed | whether line is dashed | boolean | false |
|
||||
| type | direction type of divider | enum: `horizontal` `vertical` | `horizontal` |
|
||||
| orientation | position of title inside divider | enum: `left` `right` `center` | `center` |
|
||||
| className | className of container | string | - |
|
||||
| dashed | whether line is dashed | boolean | false |
|
||||
| orientation | position of title inside divider | enum: `left` `right` `center` | `center` |
|
||||
| style | style object of container | object | - |
|
||||
| type | direction type of divider | enum: `horizontal` `vertical` | `horizontal` |
|
||||
|
@ -16,8 +16,8 @@ subtitle: 分割线
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| dashed | 是否虚线 | boolean | false |
|
||||
| type | 水平还是垂直类型 | enum: `horizontal` `vertical` | `horizontal` |
|
||||
| orientation | 分割线标题的位置 | enum: `left` `right` | `center` |
|
||||
| className | 分割线样式类 | string | - |
|
||||
| dashed | 是否虚线 | boolean | false |
|
||||
| orientation | 分割线标题的位置 | enum: `left` `right` | `center` |
|
||||
| style | 分割线样式对象 | object | - |
|
||||
| type | 水平还是垂直类型 | enum: `horizontal` `vertical` | `horizontal` |
|
||||
|
@ -76,8 +76,8 @@ The wrapper.
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| className | container className | string | - |
|
||||
| style | to customize the styles | object | - |
|
||||
| hasSider | whether contain Sider in children, don't have to assign it normally. Useful in ssr avoid style flickering | boolean | - |
|
||||
| style | to customize the styles | object | - |
|
||||
|
||||
> APIs of `Layout.Header` `Layout.Footer` `Layout.Content` are the same as that of `Layout`.
|
||||
|
||||
@ -95,10 +95,10 @@ The sidebar.
|
||||
| defaultCollapsed | to set the initial status | boolean | false |
|
||||
| reverseArrow | reverse direction of arrow, for a sider that expands from the right | boolean | false |
|
||||
| style | to customize the styles | object | - |
|
||||
| theme | color theme of the sidebar | string: `light` `dark` | `dark` |
|
||||
| trigger | specify the customized trigger, set to null to hide the trigger | string\|ReactNode | - |
|
||||
| width | width of the sidebar | number\|string | 200 |
|
||||
| onCollapse | the callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - |
|
||||
| theme | color theme of the sidebar | string: `light` `dark` | `dark` |
|
||||
|
||||
#### breakpoint width
|
||||
|
||||
|
@ -77,8 +77,8 @@ title: Layout
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| className | 容器 className | string | - |
|
||||
| style | 指定样式 | object | - |
|
||||
| hasSider | 表示子元素里有 Sider,一般不用指定。可用于服务端渲染时避免样式闪动 | boolean | - |
|
||||
| style | 指定样式 | object | - |
|
||||
|
||||
> `Layout.Header` `Layout.Footer` `Layout.Content` API 与 `Layout` 相同
|
||||
|
||||
@ -96,10 +96,10 @@ title: Layout
|
||||
| defaultCollapsed | 是否默认收起 | boolean | false |
|
||||
| reverseArrow | 翻转折叠提示箭头的方向,当 Sider 在右边时可以使用 | boolean | false |
|
||||
| style | 指定样式 | object | - |
|
||||
| theme | 主题颜色 | string: `light` `dark` | `dark` |
|
||||
| trigger | 自定义 trigger,设置为 null 时隐藏 trigger | string\|ReactNode | - |
|
||||
| width | 宽度 | number\|string | 200 |
|
||||
| onCollapse | 展开-收起时的回调函数,有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - |
|
||||
| theme | 主题颜色 | string: `light` `dark` | `dark` |
|
||||
|
||||
#### breakpoint width
|
||||
|
||||
|
@ -23,8 +23,8 @@ A list can be used to display content related to a single subject. The content c
|
||||
| header | List header renderer | string\|ReactNode | - |
|
||||
| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - |
|
||||
| loading | Shows a loading indicator while the contents of the list are being fetched | boolean\|[object](https://ant.design/components/spin-cn/#API) ([more](https://github.com/ant-design/ant-design/issues/8659)) | false |
|
||||
| locale | i18n text including empty text | object | emptyText: 'No Data' <br> |
|
||||
| loadMore | Shows a load more content | string\|ReactNode | - |
|
||||
| locale | i18n text including empty text | object | emptyText: 'No Data' <br> |
|
||||
| pagination | Pagination [config](https://ant.design/components/pagination/), hide it by setting it to false | boolean \| object | false |
|
||||
| split | Toggles rendering of the split under the list item | boolean | true |
|
||||
|
||||
|
@ -24,8 +24,8 @@ cols: 1
|
||||
| header | 列表头部 | string\|ReactNode | - |
|
||||
| itemLayout | 设置 `List.Item` 布局, 设置成 `vertical` 则竖直样式显示, 默认横排 | string | - |
|
||||
| loading | 当卡片内容还在加载中时,可以用 `loading` 展示一个占位 | boolean\|[object](https://ant.design/components/spin-cn/#API) ([更多](https://github.com/ant-design/ant-design/issues/8659)) | false |
|
||||
| locale | 默认文案设置,目前包括空数据文案 | object | emptyText: '暂无数据' |
|
||||
| loadMore | 加载更多 | string\|ReactNode | - |
|
||||
| locale | 默认文案设置,目前包括空数据文案 | object | emptyText: '暂无数据' |
|
||||
| pagination | 对应的 `pagination` 配置, 设置 `false` 不显示 | boolean\|object | false |
|
||||
| size | list 的尺寸 | `default` \| `middle` \| `small` | `default` |
|
||||
| split | 是否展示分割线 | boolean | true |
|
||||
|
@ -35,6 +35,7 @@ Methods for global configuration and destruction are also provided:
|
||||
- `message.destroy()`
|
||||
|
||||
`afterClose` can be called in then-able interface:
|
||||
|
||||
- `message[level](content, [duration]).then(afterClose)`
|
||||
- `message[level](content, [duration], onClose).then(afterClose)`
|
||||
|
||||
@ -54,5 +55,5 @@ message.config({
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| duration | time before auto-dismiss, in seconds | number | 1.5 |
|
||||
| getContainer | Return the mount node for Message | () => HTMLElement | () => document.body |
|
||||
| top | distance from top | number | 24 |
|
||||
| maxCount | max message show, drop oldest if exceed limit | number | - |
|
||||
| top | distance from top | number | 24 |
|
||||
|
@ -56,5 +56,5 @@ message.config({
|
||||
| --- | --- | --- | --- |
|
||||
| duration | 默认自动关闭延时,单位秒 | number | 3 |
|
||||
| getContainer | 配置渲染节点的输出位置 | () => HTMLElement | () => document.body |
|
||||
| top | 消息距离顶部的位置 | number | 24 |
|
||||
| maxCount | 最大显示数, 超过限制时,最早的消息会被自动关闭 | number | - |
|
||||
| top | 消息距离顶部的位置 | number | 24 |
|
||||
|
@ -63,13 +63,13 @@ The properties of the object are follows:
|
||||
| className | className of container | string | - |
|
||||
| content | Content | string\|ReactNode | - |
|
||||
| iconType | Icon `type` of the Icon component | string | `question-circle` |
|
||||
| keyboard | Whether support press esc to close | 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` |
|
||||
| title | Title | string\|ReactNode | - |
|
||||
| width | Width of the modal dialog | string\|number | 416 |
|
||||
| zIndex | The `z-index` of the Modal | Number | 1000 |
|
||||
| keyboard | Whether support press esc to close | Boolean | true |
|
||||
| onCancel | Specify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | - |
|
||||
| onOk | Specify a function that will be called when the user clicks the OK button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function | - |
|
||||
|
||||
|
@ -25,6 +25,7 @@ title: Modal
|
||||
| destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false |
|
||||
| footer | 底部内容,当不需要默认底部按钮时,可以设为 `footer={null}` | string\|ReactNode | 确定取消按钮 |
|
||||
| getContainer | 指定 Modal 挂载的 HTML 节点 | (instance): HTMLElement | () => document.body |
|
||||
| keyboard | 是否支持键盘esc关闭 | boolean | true |
|
||||
| mask | 是否展示遮罩 | Boolean | true |
|
||||
| maskClosable | 点击蒙层是否允许关闭 | boolean | true |
|
||||
| maskStyle | 遮罩样式 | object | {} |
|
||||
@ -36,7 +37,6 @@ title: Modal
|
||||
| width | 宽度 | string\|number | 520 |
|
||||
| wrapClassName | 对话框外层容器的类名 | string | - |
|
||||
| zIndex | 设置 Modal 的 `z-index` | Number | 1000 |
|
||||
| keyboard | 是否支持键盘esc关闭 | boolean | true |
|
||||
| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | 无 |
|
||||
| onOk | 点击确定回调 | function(e) | 无 |
|
||||
|
||||
|
@ -25,6 +25,6 @@ If it will take a long time to complete an operation, you can use `Progress` to
|
||||
| status | to set the status of the Progress, options: `success` `exception` `active` | string | - |
|
||||
| strokeWidth `(type=line)` | to set the width of the progress bar, unit: `px` | number | 10 |
|
||||
| strokeWidth `(type=circle)` | to set the width of the circular progress bar, unit: percentage of the canvas width | number | 6 |
|
||||
| successPercent | segmented success percent, works when `type="line"` | number | 0 |
|
||||
| type | to set the type, options: `line` `circle` `dashboard` | string | `line` |
|
||||
| width `(type=circle)` | to set the canvas width of the circular progress bar, unit: `px` | number | 132 |
|
||||
| successPercent | segmented success percent, works when `type="line"` | number | 0 |
|
||||
|
@ -26,6 +26,6 @@ title: Progress
|
||||
| status | 状态,可选:`success` `exception` `active` | string | - |
|
||||
| strokeWidth `(type=line)` | 进度条线的宽度,单位 px | number | 10 |
|
||||
| strokeWidth `(type=circle)` | 圆形进度条线的宽度,单位是进度条画布宽度的百分比 | number | 6 |
|
||||
| successPercent | 已完成的分段百分比,`type="line"` 时有效 | number | 0 |
|
||||
| type | 类型,可选 `line` `circle` `dashboard` | string | line |
|
||||
| width `(type=circle)` | 圆形进度条画布宽度,单位 px | number | 132 |
|
||||
| successPercent | 已完成的分段百分比,`type="line"` 时有效 | number | 0 |
|
||||
|
@ -42,13 +42,13 @@ Select component to select value from options.
|
||||
| optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | value |
|
||||
| optionLabelProp | Which prop value of option will render as content of select. | string | `value` for `combobox`, `children` for other modes |
|
||||
| placeholder | Placeholder of select | string\|ReactNode | - |
|
||||
| showSearch | Whether show search input in single mode. | boolean | false |
|
||||
| showArrow | Whether to show the drop-down arrow | boolean | true |
|
||||
| showSearch | Whether show search input in single mode. | boolean | false |
|
||||
| size | Size of Select input. `default` `large` `small` | string | default |
|
||||
| tokenSeparators | Separator used to tokenize on tag/multiple mode | string\[] | |
|
||||
| value | Current selected option. | string\|number\|string\[]\|number\[] | - |
|
||||
| onBlur | Called when blur | function | - |
|
||||
| onChange | Called when select an option or input value change, or value of input is changed in combobox mode | function(value, option:Option/Array<Option\>) | - |
|
||||
| onChange | Called when select an option or input value change, or value of input is changed in combobox mode | function(value, option:Option/Array<Option>) | - |
|
||||
| onDeselect | Called when a option is deselected, the params are option's value (or key) . only called for multiple or tags, effective in multiple or tags mode only. | function(value, option:Option) | - |
|
||||
| onFocus | Called when focus | function | - |
|
||||
| onInputKeyDown | Called when key pressed | function | - |
|
||||
|
@ -44,14 +44,14 @@ title: Select
|
||||
| optionFilterProp | 搜索时过滤对应的 option 属性,如设置为 children 表示对内嵌内容进行搜索 | string | value |
|
||||
| optionLabelProp | 回填到选择框的 Option 的属性值,默认是 Option 的子元素。比如在子元素需要高亮效果时,此值可以设为 `value`。 | string | `children` (combobox 模式下为 `value`) |
|
||||
| placeholder | 选择框默认文字 | string | - |
|
||||
| showSearch | 使单选模式可搜索 | boolean | false |
|
||||
| showArrow | 是否显示下拉小箭头 | boolean | true |
|
||||
| showSearch | 使单选模式可搜索 | boolean | false |
|
||||
| size | 选择框大小,可选 `large` `small` | string | default |
|
||||
| tags | 可以把随意输入的条目作为 tag,输入项不需要与下拉选项匹配(2.9 之后废弃,请使用 `mode`) | boolean | false |
|
||||
| tokenSeparators | 在 tags 和 multiple 模式下自动分词的分隔符 | string\[] | |
|
||||
| value | 指定当前选中的条目 | string\|string\[]\|number\|number\[] | - |
|
||||
| onBlur | 失去焦点的时回调 | function | - |
|
||||
| onChange | 选中 option,或 input 的 value 变化(combobox 模式下)时,调用此函数 | function(value, option:Option/Array<Option\>) | - |
|
||||
| onChange | 选中 option,或 input 的 value 变化(combobox 模式下)时,调用此函数 | function(value, option:Option/Array<Option>) | - |
|
||||
| onDeselect | 取消选中时调用,参数为选中项的 value (或 key) 值,仅在 multiple 或 tags 模式下生效 | function(value,option:Option) | - |
|
||||
| onFocus | 获得焦点时回调 | function | - |
|
||||
| onMouseEnter | 鼠标移入时回调 | function | - |
|
||||
|
@ -66,7 +66,7 @@ const columns = [{
|
||||
| indentSize | Indent size in pixels of tree data | number | 15 |
|
||||
| loading | Loading status of table | boolean\|[object](https://ant.design/components/spin-cn/#API) ([more](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | `false` |
|
||||
| locale | i18n text including filter, sort, empty text, etc | object | filterConfirm: 'Ok' <br> filterReset: 'Reset' <br> emptyText: 'No Data' <br> [Default](https://github.com/ant-design/ant-design/issues/575#issuecomment-159169511) |
|
||||
| pagination | Pagination [config](#pagination) or [`Pagination`] (/components/pagination/), hide it by setting it to `false` | object | |
|
||||
| pagination | Pagination [config](#pagination) or [`Pagination`](/components/pagination/), hide it by setting it to `false` | object | |
|
||||
| rowClassName | Row's className | Function(record, index):string | - |
|
||||
| rowKey | Row's unique key, could be a string or function that returns a string | string\|Function(record):string | `key` |
|
||||
| rowSelection | Row selection [config](#rowSelection) | object | null |
|
||||
@ -107,6 +107,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| align | specify how content is aligned | 'left' \| 'right' \| 'center' | 'left' |
|
||||
| className | className of this column | string | - |
|
||||
| colSpan | Span of this column's title | number | |
|
||||
| dataIndex | Display field of the data record, could be set like `a.b.c` | string | - |
|
||||
@ -121,7 +122,6 @@ One of the Table `columns` prop for describing the table's columns, Column has t
|
||||
| fixed | Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean\|string | `false` |
|
||||
| key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - |
|
||||
| render | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | Function(text, record, index) {} | - |
|
||||
| align | specify how content is aligned | 'left' \| 'right' \| 'center' | 'left' |
|
||||
| sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | Function\|boolean | - |
|
||||
| sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean\|string | - |
|
||||
| title | Title of this column | string\|ReactNode | - |
|
||||
@ -153,11 +153,11 @@ Properties for row selection.
|
||||
|
||||
| Property | Description | Type | Default |
|
||||
| -------- | ----------- | ---- | ------- |
|
||||
| columnWidth | Set the width of the selection column | string\|number | - |
|
||||
| fixed | Fixed selection column on the left | boolean | - |
|
||||
| getCheckboxProps | Get Checkbox or Radio props | Function(record) | - |
|
||||
| hideDefaultSelections | Remove the default `Select All` and `Select Invert` selections | boolean | `false` |
|
||||
| selectedRowKeys | Controlled selected row keys | string\[] | \[] |
|
||||
| columnWidth | Set the width of the selection column | string\|number | - |
|
||||
| selections | Custom selection [config](#rowSelection), only displays default selections when set to `true` | object\[]\|boolean | - |
|
||||
| type | `checkbox` or `radio` | `checkbox` \| `radio` | `checkbox` |
|
||||
| onChange | Callback executed when selected rows change | Function(selectedRowKeys, selectedRows) | - |
|
||||
|
@ -81,7 +81,6 @@ const columns = [{
|
||||
| onHeaderRow | 设置头部行属性 | Function(column, index) | - |
|
||||
| onRow | 设置行属性 | Function(record, index) | - |
|
||||
|
||||
|
||||
#### onRow 用法
|
||||
|
||||
适用于 `onRow` `onHeaderRow` `onCell` `onHeaderCell`。
|
||||
@ -109,6 +108,7 @@ const columns = [{
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| align | 设置列内容的对齐方式 | 'left' \| 'right' \| 'center' | 'left' |
|
||||
| className | 列的 className | string | - |
|
||||
| colSpan | 表头列合并,设置为 0 时,不渲染 | number | |
|
||||
| dataIndex | 列数据在数据项中对应的 key,支持 `a.b.c` 的嵌套写法 | string | - |
|
||||
@ -122,7 +122,6 @@ const columns = [{
|
||||
| fixed | 列是否固定,可选 `true`(等效于 left) `'left'` `'right'` | boolean\|string | false |
|
||||
| key | React 需要的 key,如果已经设置了唯一的 `dataIndex`,可以忽略这个属性 | string | - |
|
||||
| render | 生成复杂数据的渲染函数,参数分别为当前行的值,当前行数据,行索引,@return里面可以设置表格[行/列合并](#components-table-demo-colspan-rowspan) | Function(text, record, index) {} | - |
|
||||
| align | 设置列内容的对齐方式 | 'left' \| 'right' \| 'center' | 'left' |
|
||||
| sorter | 排序函数,本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction),需要服务端排序可设为 true | Function\|boolean | - |
|
||||
| sortOrder | 排序的受控属性,外界可用此控制列的排序,可设置为 `'ascend'` `'descend'` `false` | boolean\|string | - |
|
||||
| title | 列头显示文字 | string\|ReactNode | - |
|
||||
@ -154,11 +153,11 @@ const columns = [{
|
||||
|
||||
| 参数 | 说明 | 类型 | 默认值 |
|
||||
| --- | --- | --- | --- |
|
||||
| columnWidth | 自定义列表选择框宽度 | string\|number | - |
|
||||
| fixed | 把选择框列固定在左边 | boolean | - |
|
||||
| getCheckboxProps | 选择框的默认属性配置 | Function(record) | - |
|
||||
| hideDefaultSelections | 去掉『全选』『反选』两个默认选项 | boolean | false |
|
||||
| selectedRowKeys | 指定选中项的 key 数组,需要和 onChange 进行配合 | string\[] | \[] |
|
||||
| columnWidth | 自定义列表选择框宽度 | string\|number | - |
|
||||
| selections | 自定义选择项 [配置项](#selection), 设为 `true` 时使用默认选择项 | object\[]\|boolean | true |
|
||||
| type | 多选/单选,`checkbox` or `radio` | string | `checkbox` |
|
||||
| onChange | 选中项发生变化的时的回调 | Function(selectedRowKeys, selectedRows) | - |
|
||||
|
@ -27,6 +27,7 @@ Ant Design has 3 types of Tabs for different situations.
|
||||
| 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 | - |
|
||||
| tabBarStyle | Tab bar style object | object | - |
|
||||
| tabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` |
|
||||
| type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` |
|
||||
@ -35,7 +36,6 @@ Ant Design has 3 types of Tabs for different situations.
|
||||
| onNextClick | Callback executed when next button is clicked | Function | - |
|
||||
| onPrevClick | Callback executed when prev button is clicked | Function | - |
|
||||
| onTabClick | Callback executed when tab is clicked | Function | - |
|
||||
| tabBarGutter | The gap between tabs | number | - |
|
||||
|
||||
### Tabs.TabPane
|
||||
|
||||
|
@ -30,6 +30,7 @@ Ant Design 依次提供了三级选项卡,分别用于不同的场景。
|
||||
| hideAdd | 是否隐藏加号图标,在 `type="editable-card"` 时有效 | boolean | false |
|
||||
| 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' |
|
||||
@ -38,7 +39,6 @@ Ant Design 依次提供了三级选项卡,分别用于不同的场景。
|
||||
| onNextClick | next 按钮被点击的回调 | Function | 无 |
|
||||
| onPrevClick | prev 按钮被点击的回调 | Function | 无 |
|
||||
| onTabClick | tab 被点击的回调 | Function | 无 |
|
||||
| tabBarGutter | tabs 之间的间隙 | number | 无 |
|
||||
|
||||
### Tabs.TabPane
|
||||
|
||||
|
@ -39,7 +39,7 @@ import moment from 'moment';
|
||||
| getPopupContainer | 定义浮层的容器,默认为 body 上新建 div | function(trigger) | 无 |
|
||||
| hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false |
|
||||
| hourStep | 小时选项间隔 | number | 1 |
|
||||
| inputReadOnly | 设置输入框为只读(避免在移动设备上打开虚拟键盘)| boolean | false |
|
||||
| inputReadOnly | 设置输入框为只读(避免在移动设备上打开虚拟键盘) | boolean | false |
|
||||
| minuteStep | 分钟选项间隔 | number | 1 |
|
||||
| open | 面板是否打开 | boolean | false |
|
||||
| placeholder | 没有值的时候显示的内容 | string | "请选择时间" |
|
||||
|
@ -22,15 +22,15 @@ One or more elements can be selected from either column, one click on the proper
|
||||
| filterOption | A function to determine whether an item should show in search result list | (inputValue, option): boolean | |
|
||||
| footer | A function used for rendering the footer. | (props): ReactNode | |
|
||||
| lazy | property of [react-lazy-load](https://github.com/loktar00/react-lazy-load) for lazy rendering items. Turn off it by set to `false`. | object\|boolean | `{ height: 32, offset: 32 }` |
|
||||
| style | A custom CSS style used for rendering wrapper element. | object | |
|
||||
| listStyle | A custom CSS style used for rendering the transfer columns. | object | |
|
||||
| operationStyle | A custom CSS style used for rendering the operations column. | object | |
|
||||
| notFoundContent | Text to display when a column is empty. | string\|ReactNode | 'The list is empty' |
|
||||
| operations | A set of operations that are sorted from bottom to top. | string\[] | ['>', '<'] |
|
||||
| operationStyle | A custom CSS style used for rendering the operations column. | object | |
|
||||
| render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a React element which is generated from that record. Also, it can return a plain object with `value` and `label`, `label` is a React element and `value` is for title | Function(record) | |
|
||||
| searchPlaceholder | The hint text of the search box. | string | 'Search here' |
|
||||
| selectedKeys | A set of keys of selected items. | string\[] | \[] |
|
||||
| showSearch | If included, a search box is shown on each column. | boolean | false |
|
||||
| style | A custom CSS style used for rendering wrapper element. | object | |
|
||||
| targetKeys | A set of keys of elements that are listed on the right column. | string\[] | \[] |
|
||||
| titles | A set of titles that are sorted from left to right. | string\[] | - |
|
||||
| onChange | A callback function that is executed when the transfer between columns is complete. | (targetKeys, direction, moveKeys): void | |
|
||||
|
Loading…
Reference in New Issue
Block a user