IBest-UI@HarmonyOS

Appearance

Toast 轻提示 ​

介绍 ​

在页面中间弹出黑色半透明提示，用于消息通知、加载提示、操作结果提示等场景。

引入 ​

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

代码演示 ​

文字提示 ​

文字提示

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    IBestButton({
      text: '基础用法',
      onClickBtn: () => {
        IBestToast.show("提示内容")
      }
    })
  }
}

成功提示 ​

成功提示

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    IBestButton({
      text: '成功提示',
      onClickBtn: () => {
        IBestToast.show({
          type: "success",
          message: "提示内容"
        })
      }
    })
  }
}

警告提示 ​

警告提示

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    IBestButton({
      text: '警告提示',
      onClickBtn: () => {
        IBestToast.show({
          type: "warning",
          message: "提示内容"
        })
      }
    })
  }
}

失败提示 ​

失败提示

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    IBestButton({
      text: '失败提示',
      onClickBtn: () => {
        IBestToast.show({
          type: "fail",
          message: "提示内容"
        })
      }
    })
  }
}

加载提示 ​

加载提示

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    IBestButton({
      text: '加载提示',
      onClickBtn: () => {
        IBestToast.showLoading()
        setTimeout(() => {
          IBestToast.hide()
        }, 1500)
      }
    })
  }
}

自定义图标 ​

自定义图标

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    IBestButton({
      text: '自定义图标',
      onClickBtn: () => {
        IBestToast.show({
          icon: $r("app.media.startIcon"),
          message: "提示内容"
        })
      }
    })
  }
}

自定义图片 ​

自定义图片

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    IBestButton({
      text: '自定义图片',
      onClickBtn: () => {
        IBestToast.show({
          icon: "https://ibestui.ibestservices.com/favicon.ico",
          message: "提示内容"
        })
      }
    })
  }
}

自定义加载图标类型 ​

自定义加载图标类型

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    IBestButton({
      text: '自定义加载图标类型',
      onClickBtn: () => {
        IBestToast.show({
          type: "loading",
          loadingType: "spinner",
          message: "加载中...",
          onOpened: () => {
            // 可在此关闭loading
            console.log("toast打开成功")
          }
        })
        setTimeout(() => {
          // 也可在此关闭loading
          IBestToast.hide()
        }, 2000)
      }
    })
  }
}

自定义位置 ​

自定义位置

TIP

通过 position 属性可以自定义位置， 通过 offsetY 可设置偏移量。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    IBestButton({
      text: '自定义位置',
      onClickBtn: () => {
        IBestToast.show({
          position: "top",
          offsetY: "20%",
          message: "提示内容"
        })
      }
    })
  }
}

文字换行方式 ​

文字换行方式

TIP

通过 wordBreak 属性可以设置文字换行方式。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    IBestButton({
      text: '文字换行方式',
      onClickBtn: () => {
        IBestToast.show({
          wordBreak: "break-all",
          message: "This message will contain a incomprehensibilities long word."
        })
      }
    })
  }
}

动态更新提示 ​

动态更新提示

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    IBestButton({
      text: '动态更新提示',
      onClickBtn: () => {
        let count = 3
        let toast = IBestToast.show({
          type: "loading",
          message: `倒计时 ${count} 秒`,
          duration: 0
        })
        let timer = setInterval(() => {
          count--
          if (count) {
            toast.message = `倒计时 ${count} 秒`
          } else {
            clearInterval(timer)
            IBestToast.hide()
          }
        }, 1000)
      }
    })
  }
}

API ​

方法 ​

方法名说明参数返回值
show展示提示string | ToastParamstoast 实例
hide隐藏提示--
showLoading展示loadingLoadingOption-

LoadingOption 数据结构 ​

参数说明类型默认值
message展示文本内容ResourceStr""
duration展示时长(ms)，值为 0 或 type为 loading 时toast 不会自动消失number1500
loadingType加载图标类型，可选值为 circular、spinner，type为 loading 时有效booleancircular

ToastParams 数据结构, 继承至LoadingOption ​

参数说明类型默认值
type展示类型，可选值为 success、warning、fail、loadingstring""
wordBreak文本换行方式，可选值为 normal、break-all 、break-wordstringnormal
icon自定义图标，支持网络图片和本地图片，优先级大于typestring | Resource""
isShowMask是否显示遮罩booleanfalse
position位置，可选值为 top 、center、bottomstringcenter
offsetY偏移量string | number0
onOpened完全展示后的回调函数() => void-
iconWidth自定义图标宽度string | number36