IBest-UI

Appearance

Loading 加载 ​

介绍 ​

加载图标，用于表示加载中的过渡状态。

TIP

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

引入 ​

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

代码演示 ​

加载类型 ​

加载类型

TIP

通过 loadingIconType 属性可以设置加载图标的类型，默认为 circular，可选值为 spinner。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Row({space: 20}) {
      IBestLoading()
      IBestLoading({
        loadingIconType: "spinner"
      })
    }
  }
}

自定义颜色 ​

自定义颜色

TIP

通过 loadingColor 属性设置加载图标的颜色。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Row({space: 20}) {
      IBestLoading({
        loadingColor: "rgb(25, 137, 250)",
      })
      IBestLoading({
        loadingColor: "rgb(25, 137, 250)",
        loadingIconType: "spinner",
      })
    }
  }
}

自定义大小 ​

自定义大小

TIP

通过 loadingSize 属性设置加载图标的大小，默认值为 60px 。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Row({space: 20}) {
      IBestLoading({
        loadingSize: 40
      })
      IBestLoading({
        loadingSize: 40,
        loadingIconType: "spinner"
      })
    }
  }
}

加载文案 ​

加载文案

TIP

可以使用 loadingText 属性在图标的下方插入加载文案。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      IBestLoading({
        loadingText: "加载中..."
      })
    }
  }
}

水平排列 ​

水平排列

TIP

设置 vertical 属性为 false 后，图标和文案会垂直排列。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      IBestLoading({
        loadingText: "加载中...",
        vertical: false
      })
    }
  }
}

自定义文本颜色 ​

自定义文本颜色

TIP

通过 loadingTextColor 属性设置加载文案的颜色。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      IBestLoading({
        loadingText: "加载中...",
        loadingColor: "rgb(25, 137, 250)",
        loadingTextColor: "rgb(25, 137, 250)"
      })
      IBestLoading({
        loadingText: "加载中...",
        loadingTextColor: "rgb(25, 137, 250)"
      })
    }
  }
}

包含内容 ​

包含内容

TIP

通过 defaultBuilder 传入自定义内容

点我查看代码
ts
import { IBestEmpty } from '@ibestservices/ibest-ui'
@Entry
@Component
struct LoadingPage {
  @Builder EmptyContain() {
    IBestEmpty()
  }
  build(){
    Column(){
      IBestLoading({
        defaultBuilder: (): void => this.EmptyContain(),
        loadingMaskColor: 'rgba(0,0,0,0.5)',
        loadingColor: 'rgb(25, 137, 250)'
      })
    }
  }
}

API ​

@Props ​

参数说明类型默认值
loadingIconType类型，可选值为 spinnerstringcircular
loadingText加载的文案ResourceStr''
loadingSize加载图标大小string | number30
loadingColorloading 的颜色ResourceColor#c8c9cc
loadingTextColorloading 的文字颜色ResourceColor#c8c9cc
loadingTextFontSizeloading 的文字内容大小string | number14
loadingStrokeWidthloading 图形的线条宽度Length2
loadingMaskColorloading 的遮罩颜色ResourceColortransparent
spinnerStrokeHeightspinner 图的每条线的长度string | number8
vertical是否垂直排列图标和文字内容booleanfalse
space图标与文字间距string | number8

插槽 ​

插槽名说明类型
defaultBuilderloading 包裹的组件插槽CustomBuilder
loadingIconBuilderloading 的图标插槽CustomBuilder
loadingTextBuilderloading 的文案插槽CustomBuilder