Empty 空状态

介绍

空状态时的占位提示。

引入

import { IBestEmpty } from "@ibestservices/ibest-ui";

代码演示

基础用法

点我查看代码

IBestEmpty({
  description: "描述文字",
});

图片类型

TIP

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

点我查看代码

// 通用错误
IBestEmpty({
  emptyImage: "error",
  description: "通用错误",
});

// 网络错误
IBestEmpty({
  emptyImage: "network",
  description: "网络错误",
});

// 搜索提示
IBestEmpty({
  emptyImage: "search",
  description: "搜索提示",
});

自定义大小

TIP

通过 imageSize 属性更改图片的大小。

点我查看代码

IBestEmpty({
  imageSize: 100,
  description: "描述文字",
});

自定义图片

TIP

需要自定义图片时，可以使用 emptyImgBuilder 插槽中传入任意内容。

点我查看代码

import { IBestEmpty } from '@ibestservices/ibset-ui'

@Entry
@Component
struct EmptyPage {
  @Builder
  Arrow() {
    Image($r('app.media.title_back'))
    .height(160)
  }

  build(){
    IBestEmpty({
      description: '描述文字',
      emptyImgBuilder: this.Arrow
    })
  }
}

底部内容

TIP

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

点我查看代码

import { IBestEmpty, IBestButton } from '@ibestservices/ibset-ui'

@Entry
@Component
struct EmptyPage {
  @Builder
  Btn() {
    IBestButton({ text: '按钮', type: 'primary' })
  }

  build(){
    IBestEmpty({
      description: '描述文字',
      defaultBuilder: this.Btn
    })
  }
}

API

@Props

参数	说明	类型	默认值
emptyImage	类型，可选值为 error network search	string	default
imageSize	图片大小	string | number	160
description	图片下方的描述文字	string
descriptionFontSize	图片下方的描述文字的大小	string	14
descriptionColor	图片下方的描述文字的颜色	ResourceColor	#969799

插槽

插槽名	说明	类型
defaultBuilder	自定义底部内容	CustomBuilder | null
emptyImgBuilder	自定义图标	CustomBuilder | null
descriptionBuilder	自定义描述文字	CustomBuilder | null