Hi-kits

Result 结果

8/25/2022 结果数据渲染

用于反馈一系列操作任务的处理结果。

# 何时使用

当有重要操作需告知用户处理结果，且反馈内容较为复杂时使用。

import { HiResult } from 'hi-kits/result'
1

# 基本用法

成功的结果。

Go Console Buy Again
<h-result status="success" title="Successfully Purchased Cloud Server ECS!" subTitle="This is subtitle">
    <div slot="resultExtra">
        <h-button type="primary">Go Console</h-button>
        <h-button>Buy Again</h-button>
    </div>
</h-result>
1
2
3
4
5
6
7
Expand Copy

# 展示处理结果

Go Console
<h-result status="info" title="Your operation has been executed">
    <div slot="resultExtra">
        <h-button type="primary">Go Console</h-button>
    </div>
</h-result>
1
2
3
4
5
6
Expand Copy

# 警告类型的结果

Go Console
<h-result status="warn" title="There are some problems with your operation">
    <div slot="resultExtra">
        <h-button type="primary">Go Console</h-button>
    </div>
</h-result>
1
2
3
4
5
6
Expand Copy

# 复杂的错误反馈

Your account has been frozen Thaw immediately >

Your account is not yet eligible to apply Apply immediately >

Go Console Buy Again
<h-result status="error" title="Submission Failed" subTitle="Please check and modify the following information before resubmitting.">
    <div slot="resultContent">
        <div style="margin: 24px 0px;padding:24px 40px;background-color: #fafafa;text-align:left;width:calc(100% - 140px);">
        <h-title title="The content you submitted has the following error:" size="large"></h-title>
        <p>
            <h-icon name="alert_circled"></h-icon>
            Your account has been frozen
            <a>Thaw immediately &gt;</a>
        </p>
        <p>
            <h-icon name="alert_circled"></h-icon>
            Your account is not yet eligible to apply
            <a>Apply immediately &gt;</a>
        </p>
        </div>
    </div>
    <div slot="resultExtra">
        <h-button type="primary">Go Console</h-button>
        <h-button>Buy Again</h-button>
    </div>
</h-result>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
Expand Copy

# 没有此页面的访问权限

Back Home Buy Again
<h-result status="unauthorized" title="403" subTitle="Sorry, you are not authorized to access this page.">
    <div slot="resultExtra">
        <h-button type="primary">Back Home</h-button>
        <h-button>Buy Again</h-button>
    </div>
</h-result>
1
2
3
4
5
6
7
Expand Copy

# 此页面未找到

Back Home Buy Again
<h-result status="notFound" title="404" subTitle="Sorry, the page you visited does not exist.">
    <div slot="resultExtra">
        <h-button type="primary">Back Home</h-button>
        <h-button>Buy Again</h-button>
    </div>
</h-result>
1
2
3
4
5
6
7
Expand Copy

# 服务器发生了错误

Back Home Buy Again
<h-result status="serverError" title="500" subTitle="Sorry, there is an error on server.">
    <div slot="resultExtra">
        <h-button type="primary">Back Home</h-button>
        <h-button>Buy Again</h-button>
    </div>
</h-result>
1
2
3
4
5
6
7
Expand Copy

# 自定义icon

Go Console
<h-result title="This is self-defined icon!" hIcon="person" color="#1890ff">
    <div slot="resultExtra">
        <h-button type="primary">Go Console</h-button>
    </div>
</h-result>
1
2
3
4
5
Expand Copy

# 参数说明

参数 说明 类型 可选值 默认值
title 标题 string - -
subTitle 副标题 string - -
status 状态 string 'success' | 'info' | 'warn' | 'error' | 'unauthorized' | 'notFound' | 'serverError' | '' -
hIcon 自定义图标名称 string - -
hColor 自定义颜色 string - -
Last Updated: 3/6/2023, 17:51:50

Skeleton 骨架屏