NoticeBar

A notification bar component used to display notification reminders at the top of the page.

Component Types

Basic Usage

Set the text content and prefix left icon.

<wd-notice-bar text="This is a message notification, this is a message notification, this is a message notification" prefix="warn-bold" />

Component Variants

Type Modification

Set type to modify the notification type. There are three notification types: info, warning, and danger. The default is warning.

<wd-notice-bar text="This is a message notification, this is a message notification, this is a message notification" prefix="warn-bold" custom-class="space" />
<wd-notice-bar text="This is a message notification, this is a message notification, this is a message notification" prefix="check-outline" type="info" custom-class="space" />
<wd-notice-bar text="This is a message notification, this is a message notification, this is a message notification" prefix="wifi-error" type="danger" />

:deep(.space) {
  margin-bottom: 10px;
}

Closable

Set the closable property to make the notification bar closable.

<wd-notice-bar text="This is a message notification, this is a message notification, this is a message notification" closable />

Content Forms

Disable Scrolling

Set scrollable to false to disable the scrolling effect. The notification bar will remain static.

<wd-notice-bar text="When I was young, I wanted to buy osmanthus flowers and wine" :scrollable="false" prefix="stop" />

Slot Demo

When the prefix property is not passed, you can customize the left content through the prefix slot; the suffix slot will override the default close icon area.

<wd-notice-bar :scrollable="false">
  <template #prefix>
    <wd-icon class="prefix" name="warn-bold">Placeholder</wd-icon>
  </template>
  Notifications may be blocked during restricted periods...
  <template #suffix>
    <div style="color: #4d80f0">View</div>
  </template>
</wd-notice-bar>

:deep(.prefix) {
  font-size: 18px;
  padding-right: 4px;
  width: 18px;
  height: 18px;
}

Multi-line Display

Set the wrapable property to true and disable scrolling with scrollable to enable multi-line display.

<wd-notice-bar text="This is a message notification, this is a message notification, this is a message notification" wrapable :scrollable="false" />

Component Styles

Custom Colors

Set color to modify text and icon color, and set background-color to modify the background color.

<wd-notice-bar
  text="This is a message notification, this is a message notification, this is a message notification"
  prefix="check-outline"
  color="#34D19D"
  background-color="#f0f9eb"
/>

Special Usage

Multi-text Carousel

Pass a string[] to the text property to enable multi-text carousel. The next event will be triggered when displaying the next text, which receives a number parameter representing the current text array index.

<wd-notice-bar :text="textArray" prefix="check-outline" @next="onNext" />

import { ref } from 'vue'

const textArray = ref([
  'Welcome to wot design uni',
  'This component library is built with uniapp -> Vue3, TypeScript',
  'Project URL: https://github.com/wot-ui/wot-ui',
  'Our goal is to build the best uniapp component library',
  'We sincerely invite everyone to build together',
  'This is a message notification, this is a message notification, this is a message notification, this is a message notification, this is a message notification'
])

const onNext = (index: number) => {
  console.log('Displaying next, index: ', index)
  console.log('Text is: ' + textArray.value[index])
}

Vertical Scrolling

1. Pass vertical to direction to enable vertical scrolling. Currently, only one-direction vertical scrolling is supported.
2. Scrolling will only occur when text is an array.

<wd-notice-bar prefix="warn-bold" direction="vertical" :text="textArray" :delay="3" custom-class="space" />
<wd-notice-bar prefix="warn-bold" direction="vertical" text="Only one message won't scroll" :delay="3" custom-class="space" />

Click Event

Clicking the notification content area will trigger the click event, returning the currently displayed text and its corresponding index.

<wd-notice-bar :text="textArray" prefix="thunderbolt" @click="handleClick" />

function handleClick(result: { text: string; index: number }) {
  console.log(result)
}

Reset Animation ^(1.3.13)

Get the component instance via ref and call the reset method to reset the animation. When you encounter animation anomalies with NoticeBar, you can call the reset method to reset the animation.

For example: On the APP-VUE side, when using NoticeBar on a Tabbar page, returning from another page to the NoticeBar page may occasionally cause animation anomalies. In this case, you can call the reset method to reset the animation.

Reference issues: #358, #650

<wd-notice-bar ref="notice" prefix="warn-bold" direction="vertical" :text="textArray" :delay="3" />
<wd-button @click="handleReset">Reset Animation</wd-button>

// uni_modules
import { type NoticeBarInstance } from '@/uni_modules/wot-design-uni/components/wd-notice-bar/types'
// npm
// import { type NoticeBarInstance } from 'wot-design-uni/components/wd-notice-bar/types'

const notice = ref<NoticeBarInstance>()

const textArray = ref([
  'Welcome to wot design uni',
  'This component library is built with uniapp -> Vue3, TypeScript',
  'Project URL: https://github.com/wot-ui/wot-ui',
  'Our goal is to build the best uniapp component library',
  'We sincerely invite everyone to build together',
  'This is a message notification, this is a message notification, this is a message notification, this is a message notification, this is a message notification'
])

function handleReset() {
  notice.value?.reset()
}

Attributes

Parameter	Description	Type	Default Value
text	Notification bar text	string | string[]	''
type	Notification bar type, optional values are warning, info, danger	NoticeBarType	warning
prefix	Left icon name	string	-
scrollable	Whether to enable scrolling playback	boolean	true
delay	Initial delay of scrolling animation, in seconds	number	1
speed	Scrolling speed, in px/s	number	50
closable	Whether to show the close button	boolean	false
wrapable	Whether to wrap text display; only effective in horizontal mode when scrollable=false	boolean	false
color	Text and icon color	string	-
background-color	Background color	string	-
direction	Scroll direction, optional values are horizontal, vertical	NoticeBarScrollDirection	horizontal
custom-class	Root node custom class name	string	''
custom-style	Root node custom style	string	''

Events

Event Name	Description	Parameters
close	Triggered when clicking the close button	-
next	Triggered when switching to the next text	index: number
click v1.2.16	Triggered when clicking the content area	{ text: string, index: number }

Methods

Method Name	Description	Parameters
reset v1.3.13	Reset animation	-

Slots

Name	Description
prefix	Custom prefix content; this slot is not effective when prefix property is passed
suffix	Custom suffix content; will override the default close icon
default	Custom notification text content; only effective when direction='horizontal'

External Classes

Class Name	Description
custom-class	Root node style

主题定制

CSS 变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 全局配置。

名称	默认值	描述
--wot-notice-bar-padding	$padding-main $padding-loose	公告栏内边距
--wot-notice-bar-font-size	$typography-body-size-main	公告栏文字字号
--wot-notice-bar-radius	$radius-zero	公告栏圆角
--wot-notice-bar-line-height	$typography-body-line--height-size-main	公告栏文字行高
--wot-notice-bar-warning-bg	$warning-surface	警告态背景色
--wot-notice-bar-warning-color	$warning-main	警告态文字颜色
--wot-notice-bar-info-bg	$primary-1	信息态背景色
--wot-notice-bar-info-color	$primary-6	信息态文字颜色
--wot-notice-bar-danger-bg	$danger-surface	危险态背景色
--wot-notice-bar-danger-color	$danger-main	危险态文字颜色
--wot-notice-bar-prefix-size	$n-20	前缀图标大小
--wot-notice-bar-prefix-margin-right	$spacing-tight	前缀图标右侧间距
--wot-notice-bar-suffix-size	$n-20	后缀图标大小
--wot-notice-bar-suffix-margin-left	$spacing-tight	后缀图标左侧间距
--wot-notice-bar-suffix-color	inherit	后缀图标颜色

Source Code

Documentation

• Component