Easy UI

Result 结果 ​

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

引入 ​

js

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

css

TIP

需要注意的是, 如果需要使用到带有图标的 属性/组件, 需要提前使用 link 标签引入图标文件

html
<link
  rel="stylesheet"
  href="./node_modules/easy-component-ui/components/ea-icon/index.css"
/>

自定义样式 ​

移步到 CSS Part。

基础用法 ​

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

自定义内容 ​

Back
html
<div class="demo">
  <ea-result title="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 type="primary">Back</ea-button>
    </div>
  </ea-result>
</div>

Attributes ​

参数说明类型可选值默认值
titleresult 组件的标题string--
sub-titleresult 组件的副标题string--
type类型string"primary" | "success" | "warning" | "info" | "error"""
iconresult 组件的图标类型string--

CSS Part ​

用法可参考 MDN ::part()伪类

名称说明
container外层容器
icon-wrap图标容器
icon图标
title标题容器
subTitle-wrap描述容器
extra-wrap额外内容的容器

Slots ​

名称说明
iconicon 内容
titleresult title 的内容
sub-titlesub title 的内容
extra内容额外区域的内容