Press UI

# NoticeBar

It is used to display a group of message notifications in a loop.

# Code Demo

# Basic usage

<press-notice-bar
   left-icon="volume-o"
   text="The frequency of people swearing during code reading is the only measure of code quality."
/>

# Scroll Play

When the content length of the notification bar overflows, scrolling will be started automatically, and this behavior can be controlled through the scrollable attribute.

<!-- When the text is short, enable scrolling playback by setting the scrollable attribute -->
<press-notice-bar scrollable text="Technology is the common soul of those who develop it." />

<!-- When the text is long, turn off scrolling by disabling the scrollable attribute -->
<press-notice-bar
   :scrollable="false"
   text="The frequency of people swearing during code reading is the only measure of code quality."
/>

# Multi-line display

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

<press-notice-bar
   wrapable
   :scrollable="false"
   text="The frequency of people swearing during code reading is the only measure of code quality."
/>

# Notification bar mode

The notification bar supports closeable and link two modes.

<!-- closeable mode, display the close button on the right side -->
<press-notice-bar mode="closeable" text="Technology is the common soul of those who develop it." />

<!-- link mode, display link arrows on the right side -->
<press-notice-bar mode="link" text="Technology is the common soul of those who develop it." />

# Custom styles

Set the text color with the color property and the background color with the background property.

<press-notice-bar
   color="#1989fa"
   background="#ecf9ff"
   left-icon="info-o"
   text="Technology is the common soul of those who develop it."
/>

# Custom scroll rate

Use the speed property to control the scrolling rate.

<press-notice-bar
   text="Technology is the common soul of those who develop it."
   :scrollable
   :speed="120"
   left-icon="//img.yzcdn.cn/public_files/2017/8/10/6af5b7168eed548100d9041f07b7c616.png"
/>

# API

# Props

Parameter Description Type Default
mode notification bar mode, optional value is closeable link string ''
text Notification text content string ''
color notification text color string #ed6a0c
background scrollbar background string #fffbe8
left-icon left icon name or image link string -
delay animation delay time (ms) number 1
speed scroll rate (px/s) number 60
scrollable Whether to enable scrolling playback, it is enabled by default when the content length overflows boolean -
wrapable Whether to enable text wrapping, it only takes effect when scrolling is disabled boolean false
open-type WeChat open capability string navigate

# Events

Event Name Description Parameters
click triggered when the notification bar is clicked event: Event
close Triggered when the notification bar is closed event: Event

# Slot

Name Description
--- Notification text content, only valid when text attribute is empty
left-icon Customize left icon
right-icon Customize the right icon

# External style classes

class name description
custom-class root node style class

# Style variables

The component provides the following CSS variables, which can be used to customize the style.

Name Default Description
--notice-bar-height 40px -
--notice-bar-padding 0 var(--press-padding-md) -
--notice-bar-wrapable-padding var(--press-padding-xs) var(--press-padding-md) -
--notice-bar-text-color var(--press-orange-dark) -
--notice-bar-font-size var(--press-font-size-md) -
--notice-bar-line-height 24px -
--notice-bar-background-color var(--press-orange-light) -
--notice-bar-icon-size 16px -
--notice-bar-icon-min-width 24px -

# Theme customization

--notice-bar-height：
--notice-bar-padding：
--notice-bar-wrapable-padding：
--notice-bar-font-size：
--notice-bar-text-color：
--notice-bar-line-height：
--notice-bar-background-color：
--notice-bar-icon-size：
--notice-bar-icon-min-width：
横屏

← Progress →