Result
Result
Importimport { Result } from 'antd'; |
 |
VOOZH | about |
|
VOOZH | about |
Use when important operations need to inform the user to process the results and the feedback is more complicated.
Common props ref：Common props
| Property | Description | Type | Default | Version | Global Config |
|---|---|---|---|---|---|
| classNames | Customize class for each semantic structure inside the component. Supports object or function | Record<SemanticDOM, string> | (info: { props }) => Record<SemanticDOM, string> | - | 6.0.0 | 6.0.0 |
| extra | Operating area | ReactNode | - | × | |
| icon | Custom back icon | ReactNode | - | × | |
| status | Result status, decide icons and colors | success | error | info | warning | 404 | 403 | 500 | info | × | |
| styles | Customize inline style for each semantic structure inside the component. Supports object or function | Record<SemanticDOM, CSSProperties> | (info: { props }) => Record<SemanticDOM, CSSProperties> | - | 6.0.0 | 6.0.0 |
| subTitle | The subTitle | ReactNode | - | × | |
| title | The title | ReactNode | - | × |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| extraMargin | Margin of extra area | Margin<string | number> | undefined | 24px 0 0 0 |
| iconFontSize | Icon size | string | number | 72 |
| subtitleFontSize | Subtitle font size | number | 14 |
| titleFontSize | Title font size | string | number | 24 |
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| colorError | Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc. | string | #ff4d4f |
| colorFillAlter | Control the alternative background color of element. | string | rgba(0,0,0,0.02) |
| colorInfo | Used to represent the operation information of the Token sequence, such as Alert, Tag, Progress, and other components use these map tokens. | string | #1677ff |
| colorSuccess | Used to represent the token sequence of operation success, such as Result, Progress and other components will use these map tokens. | string | #52c41a |
| colorTextDescription | Control the font color of text description. | string | rgba(0,0,0,0.45) |
| colorTextHeading | Control the font color of heading. | string | rgba(0,0,0,0.88) |
| colorWarning | Used to represent the warning map token, such as Notification, Alert, etc. Alert or Control component(like Input) will use these map tokens. | string | #faad14 |
| lineHeight | Line height of text. | number | 1.5714285714285714 |
| lineHeightHeading3 | Line height of h3 tag. | number | 1.3333333333333333 |
| marginXS | Control the margin of an element, with a small size. | number | 8 |
| padding | Control the padding of the element. | number | 16 |
| paddingLG | Control the large padding of the element. | number | 24 |
| paddingXL | Control the extra large padding of the element. | number | 32 |
| paddingXS | Control the extra small padding of the element. | number | 8 |
Show successful results.
Show processing results.
The result of the warning.
you are not authorized to access this page.
The page you visited does not exist.
Something went wrong on server.
Complex error feedback.
Custom icon.
You can customize the semantic dom style of Result by passing objects/functions through classNames and styles.
