NoticeBar

introduce

Used to loop and display a set of message notifications.

Code Demo

Basic usage

Set the content of the notification bar through the text property, and set the icon on the left side of the notification bar through the left-icon property.

<z-notice-bar
   left-icon="sound"
   scrollable
   text="zebra-swiper is a mobile carousel component developed based on uniapp."
/>

Scroll play

When the content length of the notification bar exceeds, scrolling playback will be automatically enabled. This behavior can be controlled through the scrollable attribute.

<!-- When the text is short, enable scrolling playback by setting the scrollable attribute -->
<z-notice-bar
   scrollable
   text="zebra-swiper is a mobile carousel component developed based on uniapp."
/>

<!-- When the text is long, turn off the scrolling playback by disabling the scrollable attribute -->
<z-notice-bar
   :scrollable="false"
   text="zebra-swiper is a mobile carousel component developed based on uniapp."
/>

Multi-line display

When the text is long, you can enable multi-line display by setting the wrapable attribute.

<z-notice-bar
   wrapable
   :scrollable="false"
   text="zebra-swiper is a mobile carousel component developed based on uniapp. Zebra-swiper is a mobile carousel component developed based on uniapp."
/>

Notification bar mode

The notification bar supports two modes: closeable and link.

<!-- closeable mode, display the close button on the right side -->
<z-notice-bar
   mode="closeable"
   text="zebra-swiper is a mobile carousel component developed based on uniapp."
/>

<!-- link mode, display link arrow on the right side -->
<z-notice-bar
   mode="link"
   text="zebra-swiper is a mobile carousel component developed based on uniapp."
/>

Custom style

Set the text color through the color property and set the background color through the background property.

<z-notice-bar
   text="zebra-swiper is a mobile carousel component developed based on uniapp."
   color="#1989fa"
   background="#ecf9ff"
   left-icon="setting"
/>

Vertical scrolling

With NoticeBar and Swipe components, vertical scrolling effect can be achieved.

<z-notice-bar left-icon="sound" :scrollable="false">
   <z-swipe
     vertical
     :custom-style="{ height: '80rpx', 'line-height': '80rpx' }"
     :autoplay="3000"
     :touchable="false"
     :show-indicators="false"
   >
     <z-swipe-item
       >zebra-swiper is a mobile carousel component developed based on uniapp. </z-swipe-item
     >
     <z-swipe-item>A mobile carousel component. </z-swipe-item>
     <z-swipe-item>zebra-swiper</z-swipe-item>
   </z-swipe>
</z-notice-bar>

API

Props

ParametersDescriptionTypeDefault value
modeNotification bar mode, optional values are closeable linkstring''
textNotification text contentstring''
colorNotification text colorstring#ed6a0c
backgroundscroll bar backgroundstring#fffbe8
left-iconThe left icon name or image link, equivalent to the name attribute of the Icon componentstring-
delayAnimation delay time (s)number | string1
speedscroll speed (px/s)number | string60
scrollableWhether to enable scrolling playback, it will be enabled by default when the content length overflowsboolean-
wrapableWhether to enable text wrapping, only takes effect when scrolling is disabledbooleanfalse

Events

Event nameDescriptionCallback parameters
clickTriggered when the notification bar is clickedevent: MouseEvent
closeTriggered when closing the notification barevent: MouseEvent
replayFired whenever the scroll bar restarts scrolling-

method

Through ref, you can get the NoticeBar instance and call the instance method.

Method nameDescriptionParametersReturn value
resetReset notification bar to initial state--

Slots

NameContent
defaultnotification text content
left-iconCustomize the left icon
right-iconCustomize the right icon

Theme customization

Style variables

The component provides the following CSS variables, which can be used to customize styles. For usage, please refer to ConfigProvider component.

NameDefaultDescription
--z-notice-bar-height80rpx-
--z-notice-bar-padding0 var(--z-padding-md)-
--z-notice-bar-wrapable-paddingvar(--z-padding-xs) var(--z-padding-md)-
--z-notice-bar-text-colorvar(--z-orange-dark)-
--z-notice-bar-font-sizevar(--z-font-size-md)-
--z-notice-bar-line-height48rpx-
--z-notice-bar-backgroundvar(--z-orange-light)-
--z-notice-bar-icon-size32rpx-
--z-notice-bar-icon-min-width48rpx-