IBest-UI

Appearance

Toast 轻提示 ​

介绍 ​

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

引入 ​

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

代码演示 ​

文字提示 ​

文字提示

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

成功提示 ​

成功提示

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

警告提示 ​

警告提示

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

失败提示 ​

失败提示

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

加载提示 ​

加载提示

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

自定义图标 ​

自定义图标

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

自定义图片 ​

自定义图片

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

自定义加载图标类型 ​

自定义加载图标类型

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

文字换行方式 ​

文字换行方式

TIP

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

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

动态更新提示 ​

动态更新提示

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      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