IBest-UI

Appearance

Empty 空状态 ​

介绍 ​

空状态时的占位提示。

TIP

阅读该组件文档前请确保已认真阅读快速上手章节的每一个字。

引入 ​

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

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      IBestEmpty({
        description: "描述文字"
      })
    }
  }
}

图片类型 ​

图片类型

TIP

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

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      // 通用错误
      IBestEmpty({
        emptyImage: "error",
        description: "通用错误",
      })
      // 网络错误
      IBestEmpty({
        emptyImage: "network",
        description: "网络错误",
      })
      // 搜索提示
      IBestEmpty({
        emptyImage: "search",
        description: "搜索提示",
      })
    }
  }
}

自定义大小 ​

自定义大小

TIP

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

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      IBestEmpty({
        imageSize: 100,
        description: "描述文字"
      })
    }
  }
}

自定义图片 ​

自定义图片

TIP

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

点我查看代码
ts
@Entry
@Component
struct EmptyPage {
  @Builder Arrow() {
    Image($r('app.media.title_back'))
      .height(160)
  }
  build(){
    Column(){
      IBestEmpty({
        description: '描述文字',
        emptyImgBuilder: (): void => this.Arrow()
      })
    }
  }
}

底部内容 ​

底部内容

TIP

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

点我查看代码
ts
@Entry
@Component
struct EmptyPage {
  @Builder Btn() {
    IBestButton({ text: '按钮', type: 'primary' })
  }
  build(){
    Column(){
      IBestEmpty({
        description: '描述文字',
        defaultBuilder: (): void => this.Btn()
      })
    }
  }
}

API ​

@Props ​

参数说明类型默认值
emptyImage类型，可选值为 error network searchstringdefault
imageSize图片大小string | number160
description图片下方的描述文字ResourceStr
descriptionFontSize图片下方的描述文字的大小string14
descriptionColor图片下方的描述文字的颜色ResourceColor#969799
emptyImageUrl自定义占位图ResourceStr''

插槽 ​

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