NoticeBar

introduce

Used to loop and display a set of message notifications.

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>

Props

Events

method

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

Slots

Style variables

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