Noticebar 公告栏

代码演示

01 组件类型

纯文字的公告栏

在 Stackblitz 中打开

带图标的公告栏

在 Stackblitz 中打开

带关闭的公告栏

在 Stackblitz 中打开

带入口的公告栏

在 Stackblitz 中打开

自定样式的公告栏

在 Stackblitz 中打开

自定义内容的公告栏

在 Stackblitz 中打开

02 组件状态

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

在 Stackblitz 中打开

03 可滚动的公告栏

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

在 Stackblitz 中打开

NoticeBar Props

名称类型默认值描述必传
contentString / Array / Slot / Function-文本内容。TS 类型:string \| string[] \| TNode通用类型定义N
directionStringhorizontal滚动方向。可选项:horizontal/verticalN
intervalNumber2000间隔时间【仅在 direction='vertical' 有效】N
marqueeBoolean / Objectfalse跑马灯效果。speed 指速度控制;loop 指循环播放次数,值为 -1 表示循环播放,值为 0 表示不循环播放;delay 表示延迟多久开始播放。TS 类型:boolean \| NoticeBarMarquee interface NoticeBarMarquee { speed?: number; loop?: number; delay?: number }详细类型定义N
operationString / Slot / Function-右侧额外信息。TS 类型:string \| TNode通用类型定义N
prefixIconBoolean / Slot / Functiontrue用于自定义公告栏前面的图标,优先级大于 theme 设定的图标。值为 false 则不显示图标,值为 true 显示 theme 设定图标。TS 类型:Boolean \| TNode通用类型定义N
suffixIconSlot / Function-后缀图标。TS 类型:TNode通用类型定义N
themeStringinfo内置主题。可选项:info/success/warning/errorN
visibleBooleanfalse显示/隐藏。支持语法糖 v-modelv-model:visibleN
defaultVisibleBooleanfalse显示/隐藏。非受控属性N
onChangeFunctionTS 类型:(current: number, context: { source: NoticeBarChangeSource }) => void
direction="vertical" 时轮播切换时触发。详细类型定义
type NoticeBarChangeSource = '' \| 'autoplay' \| 'touch'
N
onClickFunctionTS 类型:(trigger: NoticeBarTrigger) => void
点击事件。详细类型定义
type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';
N

NoticeBar Events

名称参数描述
change(current: number, context: { source: NoticeBarChangeSource })direction="vertical" 时轮播切换时触发。详细类型定义
type NoticeBarChangeSource = '' \| 'autoplay' \| 'touch'
click(trigger: NoticeBarTrigger)点击事件。详细类型定义
type NoticeBarTrigger = 'prefix-icon' \| 'content' \| 'operation' \| 'suffix-icon';

CSS Variables

组件提供了下列 CSS 变量,可用于自定义样式。

名称默认值描述
--td-notice-bar-error-bg-color@error-color-1-
--td-notice-bar-error-color@error-color-6-
--td-notice-bar-font-color@text-color-primary-
--td-notice-bar-info-bg-color@brand-color-light-
--td-notice-bar-info-color@brand-color-
--td-notice-bar-operation-font-color@brand-color-
--td-notice-bar-success-bg-color@success-color-1-
--td-notice-bar-success-color@success-color-
--td-notice-bar-suffix-icon-color@text-color-placeholder-
--td-notice-bar-warning-bg-color@warning-color-1-
--td-notice-bar-warning-color@warning-color-

何时使用

当需要对用户进行较明显的反馈或提示,需要用户关注时使用,一段时间后不会自动消失,通常是自动触发

页面布局相关

公告栏位于页面或模块的顶部,让用户能够快速关注到重要信息

常见用法

经常用于系统状态的通知,如警示或错误信息的展示,告知用户具体的系统状态、出现原因、和解决方式

展示当前场景的重要公告,这类公告通常比较重要,需要用户务必关注

在营销场景,经常用于广告或促销信息的展示,提高用户转化率

当需要同时展示多条公告时,通常使用可滚动的公告栏,依次展示多条公告信息

推荐/慎用示例

可以同时展示多个公告栏,但不建议超过2个,过多的公告栏会占用过多屏幕空间、分散用户的注意力

相似组件

组件名何时使用
消息通知当需要对用户进行较轻量的反馈或提示,可以自动消失或通过点击关闭,通常由用户触发。
轻提示当需要对用户进行轻量反馈或提示,且不需要用户进行操作时使用,轻提示会在一段时间后自动消失。