IBest-UI@HarmonyOS

Appearance

Loading 加载 ​

介绍 ​

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

引入 ​

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() {
    IBestLoading({
      loadingText: "加载中..."
    })
  }
}

水平排列 ​

水平排列

TIP

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

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

自定义文本颜色 ​

自定义文本颜色

TIP

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

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    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(){
    IBestLoading({
      defaultBuilder: (): void => this.EmptyContain(),
      loadingMaskColor: 'rgba(0,0,0,0.5)',
      loadingColor: 'rgb(25, 137, 250)'
    })
  }
}

API ​

@Props ​

参数说明类型默认值
loadingIconType类型，可选值为 spinnerstringcircular
loadingText加载的文案ResourceStr''
loadingSize加载图标大小number | string30
loadingColorloading 的颜色ResourceColor#c8c9cc
loadingTextColorloading 的文字颜色ResourceColor#c8c9cc
loadingTextFontSizeloading 的文字内容大小number | string14
loadingStrokeWidthloading 图形的线条宽度Length2
loadingMaskColorloading 的遮罩颜色ResourceColortransparent
loadingIconMarginToploading 的图标距离顶部的 margin 因为默认 loading 是垂直居中布局的 可通过该属性调整loading 图标的上下位置 只有在 vertical 为 true 即垂直布局时有效string | number0
loadingTextMarginLeftloadingText 的 marginLeft 值 只有在 vertical 为 false 即水平布局时有效string | number8
loadingTextMarginToploadingText 的 marginTop 值 只有在 vertical 为 true 即垂直布局时有效string | number8
spinnerStrokeHeightspinner 图的每条线的长度string | number8
vertical是否垂直排列图标和文字内容booleanfalse

插槽 ​

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