IBest-UI@HarmonyOS

Appearance

Toast 轻提示 ​

介绍 ​

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

引入 ​

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

代码演示 ​

文字提示 ​

文字提示

点我查看代码
ts
IBestToast.show("提示内容")

成功提示 ​

成功提示

点我查看代码
ts
IBestToast.show({
    type: "success",
    message: "提示内容"
})

警告提示 ​

警告提示

点我查看代码
ts
IBestToast.show({
    type: "warning",
    message: "提示内容"
})

失败提示 ​

失败提示

点我查看代码
ts
IBestToast.show({
    type: "fail",
    message: "提示内容"
})

加载提示 ​

加载提示

点我查看代码
ts
IBestToast.showLoading()
setTimeout(() => {
    IBestToast.hide()
}, 1500)

自定义图标 ​

自定义图标

点我查看代码
ts
IBestToast.show({
    icon: $r("app.media.startIcon"),
    message: "提示内容"
})

自定义图片 ​

自定义图片

点我查看代码
ts
IBestToast.show({
    icon: "https://ibestui.ibestservices.com/favicon.ico",
    message: "提示内容"
})

自定义加载图标类型 ​

自定义加载图标类型

点我查看代码
ts
IBestToast.show({
    type: "loading",
    loadingType: "spinner",
    message: "加载中...",
    onOpened: () => {
        // 可在此延时关闭toast
        console.log("toast打开成功")
    }
})
setTimeout(() => {
    // 也可在此关闭toast
    IBestToast.hide()
}, 2000)

自定义位置 ​

自定义位置

TIP

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

点我查看代码
ts
IBestToast.show({
    position: "top",
    offsetY: "20%",
    message: "提示内容"
})

文字换行方式 ​

文字换行方式

TIP

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

点我查看代码
ts
IBestToast.show({
    wordBreak: "break-all",
    message: "This message will contain a incomprehensibilities long word."
})

动态更新提示 ​

动态更新提示

点我查看代码
ts
showCountDownLoading(){
    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展示文本内容string""
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 1.18.0自定义图标宽度string | number36