• Vant React

Empty 空状态

介绍

空状态时的占位提示。

引入

import { Empty } from "@taroify/core"
// or
import Empty from "@taroify/core/empty"

代码演示

基础用法

<Empty>
  <Empty.Image />
  <Empty.Description>描述文字</Empty.Description>
</Empty>

图片类型

Empty 组件内置了多种占位图片类型,可以在不同业务场景下使用。

<!-- 通用错误 -->
<Empty>
  <Empty.Image src="error" />
  <Empty.Description>描述文字</Empty.Description>
</Empty>
<!-- 网络错误 -->
<Empty>
  <Empty.Image src="network" />
  <Empty.Description>描述文字</Empty.Description>
</Empty>
<!-- 搜索提示 -->
<Empty>
  <Empty.Image src="search" />
  <Empty.Description>描述文字</Empty.Description>
</Empty>

自定义图片

需要自定义图片时,可以在 image 属性中传入任意图片 URL。

<Empty>
  <Empty.Image
    className="custom-empty__image"
    src="https://img.yzcdn.cn/vant/custom-empty-image.png"
  />
  <Empty.Description>描述文字</Empty.Description>
</Empty>
.custom-empty__image {
  width: 90px * 2;
  height: 90px * 2;
}

底部内容

通过默认插槽可以在 Empty 组件的下方插入内容。

<Empty>
  <Empty.Image />
  <Empty.Description>描述文字</Empty.Description>
  <Button shape="round" color="danger" className="bottom-button">
    按钮
  </Button>
</Empty>
.bottom-button {
  margin-top: 24px * 2;
  width: 160px * 2;
  height: 40px * 2;
}

API

Empty Props

参数 说明 类型 默认值
children 内容 ReactNode -

Empty.Image Props

参数 说明 类型 默认值
style 图片样式 CSSProperties -
src 图片类型,可选值为 error network search,支持传入图片 URL string default

Empty.Description Props

参数 说明 类型 默认值
children 图片下方的描述文字 ReactNode -