mirror of
https://gitee.com/element-plus/element-plus.git
synced 2024-12-14 17:31:02 +08:00
634448d756
* feat(result): new componet Result re #1137 * feat: fix docs * feat: perf slot * feat: use svg icon * feat: update variable name * feat: update style
77 lines
2.1 KiB
Markdown
77 lines
2.1 KiB
Markdown
## Result
|
|
|
|
Used to give feedback on the result of user's operation or access exception.
|
|
|
|
### Basic usage
|
|
|
|
:::demo
|
|
|
|
```html
|
|
<el-row>
|
|
<el-col :sm="12" :lg="6">
|
|
<el-result icon="success" title="Success Tip" subTitle="Please follow the instructions">
|
|
<template #extra>
|
|
<el-button type="primary" size="medium">Back</el-button>
|
|
</template>
|
|
</el-result>
|
|
</el-col>
|
|
<el-col :sm="12" :lg="6">
|
|
<el-result icon="warning" title="Warning Tip" subTitle="Please follow the instructions">
|
|
<template #extra>
|
|
<el-button type="primary" size="medium">Back</el-button>
|
|
</template>
|
|
</el-result>
|
|
</el-col>
|
|
<el-col :sm="12" :lg="6">
|
|
<el-result icon="error" title="Error Tip" subTitle="Please follow the instructions">
|
|
<template #extra>
|
|
<el-button type="primary" size="medium">Back</el-button>
|
|
</template>
|
|
</el-result>
|
|
</el-col>
|
|
<el-col :sm="12" :lg="6">
|
|
<el-result icon="info" title="Info Tip" subTitle="Please follow the instructions">
|
|
<template #extra>
|
|
<el-button type="primary" size="medium">Back</el-button>
|
|
</template>
|
|
</el-result>
|
|
</el-col>
|
|
</el-row>
|
|
```
|
|
|
|
:::
|
|
|
|
### Customized content
|
|
|
|
:::demo
|
|
|
|
```html
|
|
<el-result title="404" subTitle="Sorry, request error">
|
|
<template #icon>
|
|
<el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"></el-image>
|
|
</template>
|
|
<template #extra>
|
|
<el-button type="primary" size="medium">Back</el-button>
|
|
</template>
|
|
</el-result>
|
|
```
|
|
|
|
:::
|
|
|
|
### Result Attributes
|
|
|
|
| Attribute | Description | Type | Accepted Values | Default |
|
|
|------------- |---------------- |---------------- |---------------------- |-------- |
|
|
| title | title | string | — | — |
|
|
| sub-title | sub title | string | — | — |
|
|
| icon | icon type | string | success / warning / info / error | info |
|
|
|
|
### Result Slots
|
|
|
|
| Name | Description |
|
|
|------|--------|
|
|
| icon | custom icon |
|
|
| title | custom title |
|
|
| sub-title | custom sub title |
|
|
| extra | custom extra area |
|