element-plus/website/docs/es/result.md
三咲智子 55348b30b6
style: use prettier (#3228)
* style: use prettier

* style: just prettier format, no code changes

* style: eslint fix
object-shorthand, prefer-const

* style: fix no-void

* style: no-console
2021-09-04 19:29:28 +08:00

95 lines
2.2 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 |
| subTitle | custom sub title |
| extra | custom extra area |