Skip to content

Commit

Permalink
feat: init result component (element-plus#17)
Browse files Browse the repository at this point in the history
  • Loading branch information
c0dedance committed Oct 16, 2022
1 parent 1a48391 commit 15e90cb
Showing 1 changed file with 70 additions and 0 deletions.
70 changes: 70 additions & 0 deletions src/components/Data/result.story.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<script setup lang="ts">
import { ref } from 'vue'
import type { ResultProps } from 'element-plus'
const currentIcon = ref('info')
const title = ref('Tip')
const subTitle = ref('Please follow the instructions')
const iconList: Record<'label' & 'value', ResultProps['icon']>[] = [
{
label: 'success',
value: 'success',
},
{
label: 'warning',
value: 'warning',
},
{
label: 'error',
value: 'error',
},
{
label: 'info',
value: 'info',
},
]
</script>

<template>
<Story title="Data/Result">
<Variant title="Basic usage">
<el-result
:icon="currentIcon"
:title="title"
:sub-title="subTitle"
/>
<template #controls>
<HstRadio
v-model="currentIcon"
title="Icon"
:options="iconList"
/>
</template>
</Variant>
<Variant title="Customized content">
<el-result title="404" sub-title="Sorry, request error">
<template #icon>
<el-image
src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
/>
</template>
<template #extra>
<el-button type="primary">
Back
</el-button>
</template>
</el-result>
</Variant>
</Story>
</template>

<docs lang="md">
Used to give feedback on the result of user's operation or access exception.

## Basic usage

Result usage

## Customized content
</docs>

0 comments on commit 15e90cb

Please sign in to comment.