IBest-UI

Appearance

Skeleton 骨架屏 ​

介绍 ​

用于在内容加载过程中展示一组占位图形。

TIP

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

引入 ​

ts
import { IBestSkeleton, IBestSkeletonParagraph } from "@ibestservices/ibest-ui";

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      IBestSkeleton()
    }
  }
}

显示头像 ​

显示头像

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      IBestSkeleton({
        avatar: true
      })
    }
  }
}

自定义段落行数 ​

自定义段落行数

TIP

显示的数量会比传入的数量多 1，首行会被渲染一个长度 40% 的段首。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      IBestSkeleton({
        rows: 4,
        radius: 4
      })
    }
  }
}

展示子组件 ​

展示子组件

点我查看代码
ts
import { IBestSwitch } from "@ibestservices/ibest-ui";
@Entry
@Component
struct DemoPage {
  @State loading: boolean = true
  build() {
    Column({ space: 12}){
      IBestSwitch({
        value: $loading
      })
      IBestSkeleton({
        avatar: true,
        loading: this.loading
      }){
        Row({space: 12}){
          Image($r("app.media.app_icon")).width(32).aspectRatio(1)
          Column({space: 12}){
            Text("关于IBest-UI")
            Text("一个轻量、简单易用、可定制主题、支持深色模式和浅色模式的鸿蒙开源UI组件库。)
          }
          .layoutWeight(1)
          .alignItems(HorizontalAlign.Start)
        }.alignItems(VerticalAlign.Top)
      }
    }
    .alignItems(HorizontalAlign.Start)
  }
}

自定义排版 ​

自定义排版

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Row({space: 14}){
      IBestSkeletonParagraph({type: "image"})
      Column({space: 14}){
        IBestSkeletonParagraph({type: "text", rowWidth: "60%"})
        IBestSkeletonParagraph()
        IBestSkeletonParagraph()
        IBestSkeletonParagraph()
      }
      .layoutWeight(1)
      .alignItems(HorizontalAlign.Start)
    }
    .alignItems(VerticalAlign.Top)
  }
}

API ​

IBestSkeleton @Props ​

参数说明类型默认值
rows段落占位图行数number3
avatar是否显示头像占位图booleanfalse
animated是否使用动画booleantrue
radius圆角, circle类型无效string | number0
loading加载booleantrue

IBestSkeleton 插槽 ​

插槽名说明类型
defaultBuilder要显示的自定义内容CustomBuilder

IBestSkeletonParagraph @Props ​

参数说明类型默认值
type占位图类型, 可选值 text、avatar、circle、imagestringtext
rowWidth占位图宽度, type为 text 时默认 100%, type为 image 时默认 96, 其他类型默认 32string | number-
rowHeight占位图高度, 仅type为text时有效string | number16
radius圆角, circle类型无效string | number0
animated是否使用动画booleantrue