Easy UI

Appearance

Result 结果 ​

用于对用户的操作结果或者异常状态做反馈。

引入 ​

html
<script type="module">
  import "./node_modules/easy-component-ui/dist/components/ea-result.js";
</script>
js
import "easy-component-ui/ea-result";

自定义样式 ​

移步到 CSS Part。

基础用法 ​

Back
Back
Back
Back
查看代码
html
<div class="row space-between">
  <ea-result
    variant="primary"
    heading="Primary Tip"
    sub-title="Please follow the instructions"
  >
    <div slot="extra">
      <ea-button variant="primary">Back</ea-button>
    </div>
  </ea-result>
  <ea-result
    variant="success"
    heading="Success Tip"
    sub-title="Please follow the instructions"
  >
    <div slot="extra">
      <ea-button variant="primary">Back</ea-button>
    </div>
  </ea-result>
  <ea-result
    variant="warning"
    heading="Warning Tip"
    sub-title="Please follow the instructions"
  >
    <div slot="extra">
      <ea-button variant="primary">Back</ea-button>
    </div>
  </ea-result>
  <ea-result
    variant="danger"
    heading="Danger Tip"
    sub-title="Please follow the instructions"
  >
    <div slot="extra">
      <ea-button variant="primary">Back</ea-button>
    </div>
  </ea-result>
</div>

自定义内容 ​

Back
查看代码
html
<div class="demo">
  <ea-result heading="404" sub-title="Sorry, request error">
    <div slot="icon">
      <ea-image
        src="https://tse2-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?rs=1&pid=ImgDetMain"
      ></ea-image>
    </div>
    <div slot="extra">
      <ea-button variant="primary">Back</ea-button>
    </div>
  </ea-result>
</div>

自定义图标 ​

通过 icon 属性可以自定义图标，icon 属性优先于 variant 默认图标。

查看代码
html
<div class="row space-between">
  <ea-result
    variant="success"
    heading="Success"
    sub-title="Operation completed"
    icon="star"
  >
  </ea-result>
  <ea-result
    variant="danger"
    heading="Error"
    sub-title="Something went wrong"
    icon="bug"
  >
  </ea-result>
</div>

EaResult API ​

EaResult Attributes ​

参数说明类型可选值默认值
variant结果类型string"primary" | "success" | "warning" | "danger" | "info"""
heading标题string—""
sub-title副标题string—""
icon自定义图标，优先于 variant 默认图标string—""

EaResult CSS Part ​

名称说明
container容器元素
icon-wrap图标容器元素
icon图标元素
title标题元素
sub-title副标题元素
extra额外内容元素

EaResult Slots ​

名称说明
icon自定义图标
title自定义标题
sub-title自定义副标题
extra额外内容区域

EaResult CSS Custom Properties ​

属性名说明默认值
--ea-result-icon-size图标尺寸64px
--ea-result-padding组件内边距40px 30px
--ea-result-title-margin-top标题上边距20px
--ea-result-title-font-size标题字体大小20px
--ea-result-title-color标题颜色var(--grey-900)
--ea-result-sub-title-margin-top副标题上边距10px
--ea-result-sub-title-font-size副标题字体大小var(--font-size-md)
--ea-result-sub-title-color副标题颜色var(--grey-700)
--ea-result-extra-margin-top额外内容上边距30px