Taroify

Empty 空状态

介绍

空状态时的占位提示。

引入

import { Empty } from "@taroify/core"

代码演示

基础用法

<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	-

主题定制

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

名称	默认值	描述
—empty-padding	var(—padding-xl) 0	-
—empty-image-size	160px $hd*	-
—empty-image-width	var(—empty-image-size)	-
—empty-image-height	var(—empty-image-size)	-
—empty-description-margin-top	var(—padding-md)	-
—empty-description-padding	0 60px $hd*	-
—empty-description-color	var(—gray-6)	-
—empty-description-font-size	var(—font-size-md)	-
—empty-description-line-height	var(—line-height-md)	-