Easy UI

Appearance

Empty 空状态 ​

空状态时的占位提示。

引入 ​

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

自定义样式 ​

移步到 CSS Part。

基础用法 ​

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

查看代码
html
<ea-empty description="description"></ea-empty>

自定义图片 ​

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

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

图片尺寸 ​

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

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

底部内容 ​

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

Button
查看代码
html
<ea-empty>
  <ea-button type="primary">Button</ea-button>
</ea-empty>

Empty API ​

Empty Attributes ​

参数说明类型可选值默认值
image图片 URL，为空时显示默认 SVGstring——
image-size图片尺寸，支持 CSS 合法尺寸值（如 200px）string——
description描述文字，为空时显示 "No Data"string——

Empty CSS Part ​

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

名称说明
container外层容器
placeholder图片占位容器
image自定义图片元素
default-image-front默认 SVG 前景路径元素
default-image-border默认 SVG 边框路径元素
description描述文字容器
bottom底部容器

Empty Slots ​

名称说明
default默认插槽，底部操作内容
image自定义图片内容
description自定义描述内容

Empty CSS Custom Properties ​

属性名说明默认值
--ea-empty-size图片区域尺寸120px
--ea-empty-image-color默认图片颜色var(--grey-400)
--ea-empty-color描述文字颜色var(--grey-500)
--ea-empty-description-font-size描述文字字号var(--font-size-lg)
--ea-empty-spacing元素间距var(--spacing-lg)