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
Parameters | Description | Type | Default value |
---|---|---|---|
mode | Notification bar mode, optional values are closeable link | string | '' |
text | Notification text content | string | '' |
color | Notification text color | string | #ed6a0c |
background | scroll bar background | string | #fffbe8 |
left-icon | The left icon name or image link, equivalent to the name attribute of the Icon component | string | - |
delay | Animation delay time (s) | number | string | 1 |
speed | scroll speed (px/s) | number | string | 60 |
scrollable | Whether to enable scrolling playback, it will be enabled by default when the content length overflows | boolean | - |
wrapable | Whether to enable text wrapping, only takes effect when scrolling is disabled | boolean | false |
Events
Event name | Description | Callback parameters |
---|---|---|
click | Triggered when the notification bar is clicked | event: MouseEvent |
close | Triggered when closing the notification bar | event: MouseEvent |
replay | Fired whenever the scroll bar restarts scrolling | - |
method
Through ref, you can get the NoticeBar instance and call the instance method.
Method name | Description | Parameters | Return value |
---|---|---|---|
reset | Reset notification bar to initial state | - | - |
Slots
Name | Content |
---|---|
default | notification text content |
left-icon | Customize the left icon |
right-icon | Customize 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.
Name | Default | Description |
---|---|---|
--z-notice-bar-height | 80rpx | - |
--z-notice-bar-padding | 0 var(--z-padding-md) | - |
--z-notice-bar-wrapable-padding | var(--z-padding-xs) var(--z-padding-md) | - |
--z-notice-bar-text-color | var(--z-orange-dark) | - |
--z-notice-bar-font-size | var(--z-font-size-md) | - |
--z-notice-bar-line-height | 48rpx | - |
--z-notice-bar-background | var(--z-orange-light) | - |
--z-notice-bar-icon-size | 32rpx | - |
--z-notice-bar-icon-min-width | 48rpx | - |