Easy UI

Empty 空状态 ​

空状态时的占位提示。

引入 ​

js

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

css

TIP

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

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

自定义样式 ​

移步到 CSS Part。

基础用法 ​

通过设置 description 属性来配置描述文字。

html
<div class="demo">
  <ea-empty description="description"></ea-empty>
</div>

自定义图片 ​

通过设置 image 属性传入图片 URL。

html
<div class="demo">
  <ea-empty
    image="https://tse2-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?rs=1&pid=ImgDetMain"
  ></ea-empty>
</div>

图片尺寸 ​

通过设置 image-size 属性来控制图片大小。

html
<div class="row">
  <ea-empty
    image-size="200px"
    image="https://tse2-mm.cn.bing.net/th/id/OIP-C.mH9YLFEL5YdVxJM82mjVJQAAAA?rs=1&pid=ImgDetMain"
  ></ea-empty>
</div>

底部内容 ​

使用默认插槽可在底部插入内容。

Button
html
<div class="demo">
  <ea-empty>
    <ea-button type="primary">Button</ea-button>
  </ea-empty>
</div>

Attributes ​

参数说明类型可选值默认值
description描述string--
image图片string--
image-size图片大小number-80

CSS Part ​

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

名称说明
container外层容器, 包含 图片容器image-wrap、描述容器description-wrap和底部容器bottom-wrap
placeholder图片容器
description描述容器
bottom底部容器

Slots ​

名称说明
-默认插槽
image图片插槽
description描述插槽