You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

3.8 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

title description spline isComponent
NoticeBar 公告栏 在导航栏下方,用于给用户显示提示消息。 message true

该组件于 0.9.0 版本上线,请留意版本。

引入

全局引入,在 miniprogram 根目录下的app.json中配置,局部引入,在需要引入的页面或组件的index.json中配置。

"usingComponents": {
  "t-notice-bar": "tdesign-miniprogram/notice-bar/notice-bar"
}

代码演示

01 组件类型

纯文字的公告栏

{{ base }}

带图标的公告栏

{{ iconDemo }}

带关闭的公告栏

{{ suffixIcon }}

带入口的公告栏

{{ event }}

自定义样式的公告栏

{{ custom }}

自定义内容的公告栏

{{ customization }}

02 组件状态

公告栏类型有普通info、警示warning、成功success、错误error

{{ theme }}

03 可滚动公告栏

可滚动公告栏有水平horizontal和垂直vertical

{{ scrolling }}

API

NoticeBar Props

名称 类型 默认值 说明 必传
content String / Array / Slot - 文本内容 N
direction String horizontal 滚动方向。可选项horizontal/vertical N
external-classes Array - 组件类名,分别用于设置 组件外层元素、文本内容、前缀图标、右侧额外信息、后缀图标 等元素类名。。['t-class', 't-class-content', 't-class-prefix-icon', 't-class-operation', 't-class-suffix-icon'] N
operation String / Slot - 右侧额外信息 N
marquee Boolean / Object false 跑马灯效果。speed 指速度控制loop 指循环播放次数,值为 -1 表示循环播放,值为 0 表示不循环播放delay 表示延迟多久开始播放【仅在 direction='horizontal' 有效】。TS 类型:boolean | DrawMarquee interface DrawMarquee { speed?: number; loop?: number; delay?: number }详细类型定义 N
prefix-icon String / Boolean / Object / Slot - 前缀图标。值为字符串表示图标名称,值为 false 表示不显示前缀图标,值为 Object 类型,表示透传至 icon,不传表示使用主题图标。 N
suffix-icon String / Object / Slot - 后缀图标。值为字符串表示图标名称。值为 Object 类型,表示透传至 icon,不传表示不显示后缀图标。 N
theme String info 内置主题。可选项info/success/warning/error N
visible Boolean false 显示/隐藏 N
default-visible Boolean false 显示/隐藏。非受控属性 N

NoticeBar Events

名称 参数 描述
click (trigger: NoticeBarTrigger) 点击事件。详细类型定义
type NoticeBarTrigger = 'prefix-icon' | 'content' | 'operation' | 'suffix-icon';