> When using `Breadcrumb.Separator`,its parent component must be set to `separator=""`, otherwise the default separator of the parent component will appear.
@@ -19,7 +19,7 @@ Commonly displayed on the details page.
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| title | The title of the description list, placed at the top | ReactNode | - | |
| extra | The action area of the description list, placed at the top-right | string \|ReactNode | - | 4.5.0 |
| extra | The action area of the description list, placed at the top-right | ReactNode | - | 4.5.0 |
| bordered | Whether to display the border | boolean | false | |
| column | The number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect) | number | 3 | |
| size | Set the size of the list. Can be set to `middle`,`small`, or not filled | `default`\|`middle`\|`small` | - | |
@@ -74,15 +74,15 @@ Form field component for data bidirectional binding, validation, layout, and so
| --- | --- | --- | --- | --- |
| colon | Used with `label`, whether to display `:` after label text. | boolean | true | |
| dependencies | Set the dependency field. See [below](#dependencies) | [NamePath](#NamePath)[] | - | |
| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time | string \|ReactNode | - | |
| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time | ReactNode | - | |
| getValueFromEvent | Specify how to get value from event or other onChange arguments | (..args: any[]) => any | - | |
| getValueProps | Additional props with sub component | (value: any) => any | - | 4.2.0 |
| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input` | boolean | false | |
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string \|ReactNode | - | |
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | ReactNode | - | |
| htmlFor | Set sub label `htmlFor` | string | - | |
| initialValue | Config sub default value. Form `initialValues` get higher priority when conflict | string | - | 4.2.0 |
| noStyle | No style for `true`, used as a pure field control | boolean | false | |
| label | Label text | string \|ReactNode | - | |
| label | Label text | ReactNode | - | |
| labelAlign | The text align of label | `left`\|`right` | `right` | |
<<<<<<<HEAD|labelCol|Thelayoutoflabel.Youcanset`span``offset`tosomethinglike`{span:3,offset:12}`or`sm:{span:3,offset:12}`sameaswith`<Col>`. You can set `labelCol` on Form. If both exists, use Item first | [object](/components/grid/#Col) | - | | | messageVariables | default validate filed info | Record<string, string> | - | 4.7.0 | ======= | labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>`. You can set `labelCol` on Form which will not affect nest Item. If both exists, use Item first | [object](/components/grid/#Col) | - | |
| disabled | Whether the input is disabled | boolean | false | |
| id | The ID for input | string | - | |
| maxLength | The max length | number | - | |
| prefix | The prefix icon for the Input | string \|ReactNode | - | |
| prefix | The prefix icon for the Input | ReactNode | - | |
| size | The size of the input box. Note: in the context of a form, the `large` size is used | `large`\|`middle`\|`small` | - | |
| suffix | The suffix icon for the Input | string \|ReactNode | - | |
| suffix | The suffix icon for the Input | ReactNode | - | |
| type | The type of input, see: [MDN](https://developer.mozilla.org/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types)(use`Input.TextArea` instead of `type="textarea"`) | string | `text` | |
| value | The input content value | string | - | |
| onChange | Callback when user input | function(e) | - | |
| itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - | |
| rowKey | Item's unique key, could be a string or function that returns a string | string \| Function(record): string | `key` | |
| loading | Shows a loading indicator while the contents of the list are being fetched | boolean \|[SpinProps](/components/spin/#API)([more](https://github.com/ant-design/ant-design/issues/8659)) | false | |
| loadMore | Shows a load more content | string \|ReactNode | - | |
| loadMore | Shows a load more content | ReactNode | - | |
| locale | The i18n text including empty text | object | {emptyText: `No Data`} | |
| pagination | Pagination [config](/components/pagination/), hide it by setting it to false | boolean \| object | false | |
| size | Size of list | `default`\|`large`\|`small` | `default` | |
...
...
@@ -61,12 +61,12 @@ More about pagination, please check [`Pagination`](/components/pagination/).
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| actions | The actions content of list item. If `itemLayout` is `vertical`, shows the content on bottom, otherwise shows content on the far right | Array<ReactNode> | - | |
| extra | The extra content of list item. If `itemLayout` is `vertical`, shows the content on right, otherwise shows content on the far right | string \|ReactNode | - | |
| extra | The extra content of list item. If `itemLayout` is `vertical`, shows the content on right, otherwise shows content on the far right | ReactNode | - | |
### List.Item.Meta
| Property | Description | Type | Default | Version |
| keyboard | Whether support press esc to close | boolean | true | |
...
...
@@ -82,7 +82,7 @@ The items listed above are all functions, expecting a settings object as paramet
| onCancel | Specify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function(close) | - | |
| onOk | Specify a function that will be called when the user clicks the OK button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function(close) | - | |
| style | Style of floating layer, typically used at least for adjusting the position | CSSProperties | - | |
| title | Title | string \|ReactNode | - | |
| title | Title | ReactNode | - | |
| width | Width of the modal dialog | string \| number | 416 | |
| zIndex | The `z-index` of the Modal | number | 1000 | |
@@ -64,7 +64,7 @@ Select component to select value from options.
| 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` | |
| disabled | If true, the slider will not be interactable | boolean | false | |
| dots | Whether the thumb can drag over tick only | boolean | false | |
| included | Make effect when `marks` not null, true means containment and false means coordinative | boolean | true | |
| marks | Tick mark of Slider, type of key must be `number`, and must in closed interval \[min, max], each mark can declare its own style | object | { number: string \| ReactNode } \| { number: { style: object, label: string \| ReactNode } } | |
| marks | Tick mark of Slider, type of key must be `number`, and must in closed interval \[min, max], each mark can declare its own style | object | { number: ReactNode } \| { number: { style: object, label: ReactNode } } | |
| max | The maximum value the slider can slide to | number | 100 | |
| min | The minimum value the slider can slide to | number | 0 | |
| Property | Description | Type | Default | Version |
| --- | --- | --- | --- | --- |
| description | Description of the step, optional property | string \|ReactNode | - | |
| icon | Icon of the step, optional property | string \|ReactNode | - | |
| description | Description of the step, optional property | ReactNode | - | |
| icon | Icon of the step, optional property | ReactNode | - | |
| status | To specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait``process``finish``error` | string | `wait` | |
| title | Title of the step | string \|ReactNode | - | |
| subTitle | Subtitle of the step | string \|ReactNode | - | |
| title | Title of the step | ReactNode | - | |
| subTitle | Subtitle of the step | ReactNode | - | |
@@ -67,7 +67,7 @@ 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). `false` will force trade TreeNode as a parent node | boolean | - | |
| 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 | |
<imgclass="preview-img no-padding bad"align="right"src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*_gU7ToHiZz4AAAAAAAAAAABkARQnAQ"alt="Don't"description="When button group has no space in betwee, it is easy to confuse it with Toggle Button.">
<imgclass="preview-img no-padding bad"align="right"src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*_gU7ToHiZz4AAAAAAAAAAABkARQnAQ"alt="Don't"description="When button group has no space in between, it is easy to confuse it with Toggle Button.">
When multiple buttons form a group, align buttons in one line with spaces in between.
