IBest-UI@HarmonyOS

Appearance

Notify 消息提示 ​

介绍 ​

在页面顶部展示消息提示。

引入 ​

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

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      IBestCell({
        title: '基础用法',
        isLink: true,
        hasBorder: false,
        onClickCell: () => {
          IBestNotify.show({
            message: '我们嘲笑过少年的无知，也嘲笑过岁月的苍老。我们行走在路上，理想宏大，眼窝却浅显。'
          })
        }
      })
    }
  }
}

通知类型 ​

通知类型

TIP

通过 type 属性可指定通知类型, 支持 primary success warning danger 四种, 默认为 danger。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      IBestCell({
        title: '通知类型',
        isLink: true,
        hasBorder: false,
        onClickCell: () => {
          IBestNotify.show({
            message: '我们嘲笑过少年的无知，也嘲笑过岁月的苍老。我们行走在路上，理想宏大，眼窝却浅显。',
            type: 'primary'
          })
        }
      })
    }
  }
}

自定义配置 ​

自定义配置

TIP

自定义消息通知的颜色、字体大小和展示时长。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column(){
      IBestCell({
        title: '自定义配置',
        isLink: true,
        onClickCell: () => {
          IBestNotify.show({
            message: '通知内容',
            color: '#ad0000',
            backgroundColor: '#ffe1e1'
          })
        }
      })
      IBestCell({
        title: '自定义文字大小',
        isLink: true,
        onClickCell: () => {
          IBestNotify.show({
            message: '如果你爱上了某个星球的一朵花。那么，只要在夜晚仰望星空，就会觉得漫天的繁星就像一朵朵盛开的花。',
            fontSize: 34
          })
        }
      })
      IBestCell({
        title: '自定义时长',
        isLink: true,
        hasBorder: false,
        onClickCell: () => {
          IBestNotify.show({
            message: '通知内容',
            duration: 3000
          })
        }
      })
    }
  }
}

自定义内容 ​

自定义内容

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  @Builder customContent(){
		Row({space: 10}){
			Image("https://img0.baidu.com/it/u=2616823501,3205478532&fm=253&fmt=auto&app=138&f=JPEG?w=509&h=500")
				.width(30)
			Text("通知内容")
		}
		.width("100%")
		.backgroundColor("#7337ab")
		.justifyContent(FlexAlign.Center)
	}
  build() {
    Column(){
      IBestCell({
        title: '自定义内容',
        isLink: true,
        onClickCell: () => {
          IBestNotify.show({
            customContent: (): void => this.customContent()
          })
        }
      })
    }
  }
}

API ​

IBestNotifyOption 数据结构 ​

参数说明类型默认值
message通知内容string''
type通知背景类型, 可选 primary success warning dangerstringdanger
duration显示时长number1500
color文字颜色ResourceColor#fff
fontSize文字大小number | string14
backgroundColor自定义背景颜色ResourceColor''
customContent自定义通知内容CustomBuilder-
onOpen通知显示后触发() => void-
onClose通知关闭后触发() => void-
onClick点击通知时触发() => void-