IBest-UI@HarmonyOS

Appearance

NoticeBar 通知栏 ​

介绍 ​

用于循环播放展示一组消息通知。

引入 ​

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

代码演示 ​

基础用法 ​

基础用法

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    IBestNoticeBar({
      leftIconName: "volume-o",
      text:"无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。"
    })
  }
}

滚动播放 ​

滚动播放

TIP

默认情况下, 只有字数超出容器宽度才会滚动播放，如字数少也需要滚动播放，可设置 scrollable 为 true。

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column({space: 16}){
      IBestNoticeBar({
        scrollable: true,
        text: "今人不见古时月, 今月曾经照古人。"
      })
      IBestNoticeBar({
        scrollable: false,
        text: "不会回头的东西有四件：说出口的话、离弦的箭、逝去的生活和失去的机会。"
      })
    }
  }
}

多行展示 ​

多行展示

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    IBestNoticeBar({
      text: "不会回头的东西有四件：说出口的话、离弦的箭、逝去的生活和失去的机会。",
      wrapable: true
    })
  }
}

通知栏模式 ​

通知栏模式

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    Column({space: 16}){
      IBestNoticeBar({
        mode: "closeable",
        text: "今人不见古时月, 今月曾经照古人。"
      })
      IBestNoticeBar({
        mode: "link",
        text: "今人不见古时月, 今月曾经照古人。",
        onBarClick: () => {
          console.log("点击了通知栏")
        }
      })
    }
  }
}

自定义样式 ​

自定义样式

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    IBestNoticeBar({
      leftIconName: "info-o",
      leftIconColor: "#1989fa",
      bgColor: "#ecf9ff",
      text: "今人不见古时月, 今月曾经照古人。",
      textColor: "#1989fa"
    })
  }
}

垂直滚动 ​

垂直滚动

点我查看代码
ts
@Entry
@Component
struct DemoPage {
  build() {
    IBestNoticeBar({
      leftIconName: "volume-o",
      vertical: true,
      verticalTextList: [
          "今人不见古时月, 今月曾经照古人。",
        "不会回头的东西有四件：说出口的话、离弦的箭、逝去的生活和失去的机会。",
        "无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。"
      ]
    })
  }
}

API ​

@Props ​

参数说明类型默认值
text通知栏文本内容string''
mode通知栏模式, 可选值 closeable linkstring-
barHeight通知栏高度string | number40
bgColor背景色ResourceColor#fffbe8
leftRightPadding左右内边距string | number16
leftIconName左侧图标名称string''
leftIcon自定义左侧图标ResourceStr''
leftIconSize左侧图标大小string | number16
leftIconColor左侧图标颜色ResourceColor#ed6a0c
textColor文本颜色ResourceColor#ed6a0c
textFontSize文本字体大小string | number16
rightIconName右侧图标名称string''
rightIcon自定义右侧图标ResourceStr''
rightIconSize右侧图标大小string | number16
rightIconColor右侧图标颜色ResourceColor#ed6a0c
scrollable是否开启滚动播放，内容长度溢出时默认开启boolean``
delay滚动播放延迟时间，单位秒number1
speed滚动播放速度，单位 vp/snumber60
wrapable是否开启换行, 为true时滚动不生效booleanfalse
vertical是否开启垂直滚动booleanfalse
verticalTextList垂直滚动文本列表string[][]
verticalInterval垂直滚动文本间隔时间，单位秒number3

Events ​

事件名说明回调参数
onBarClick点击通知栏回调-
onClose点击右侧关闭图标回调-
onTextClick垂直滚动时,点击文字回调index: number