/*! For license information please see 5770.c86e2a39.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["5770"],{12398:function(s,n,t){"use strict";t.r(n);var a=t("80681");let e=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,a.wg)(),(0,a.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

NoticeBar

\n

Intro

\n

Used to display a group of message notifications in a continuons loop.

\n

Install

\n

Register component globally via app.use, refer to Component Registration for more registration ways.

\n
import { createApp } from 'vue';\nimport { NoticeBar } from 'vant';\n\nconst app = createApp();\napp.use(NoticeBar);\n
\n

Usage

\n

Basic Usage

\n
<van-notice-bar\n  text="Technology is the common soul of the people who developed it."\n  left-icon="volume-o"\n/>\n
\n

Scrollable

\n
<!-- Enable scroll when text is short -->\n<van-notice-bar scrollable text="Short Content" />\n\n<!-- Disable scroll when text is long -->\n<van-notice-bar\n  :scrollable="false"\n  text="Technology is the common soul of the people who developed it."\n/>\n
\n

Wrapable

\n
<van-notice-bar wrapable :scrollable="false">\n  Technology is the common soul of the people who developed it.\n</van-notice-bar>\n
\n

Mode

\n
<van-notice-bar mode="closeable">Short Content</van-notice-bar>\n\n<van-notice-bar mode="link">Short Content</van-notice-bar>\n
\n

Custom Style

\n
<van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o">\n  Short Content\n</van-notice-bar>\n
\n

Vertical Scroll

\n
<van-notice-bar left-icon="volume-o" :scrollable="false">\n  <van-swipe\n    vertical\n    class="notice-swipe"\n    :autoplay="3000"\n    :touchable="false"\n    :show-indicators="false"\n  >\n    <van-swipe-item>Content 1</van-swipe-item>\n    <van-swipe-item>Content 2</van-swipe-item>\n    <van-swipe-item>Content 3</van-swipe-item>\n  </van-swipe>\n</van-notice-bar>\n\n<style>\n  .notice-swipe {\n    height: 40px;\n    line-height: 40px;\n  }\n</style>\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
modeMode, can be set to closeable linkstring\'\'
textNotice text contentstring\'\'
colorText colorstring#ed6a0c
backgroundBackground colorstring#fffbe8
left-iconLeft Iconstring-
delayAnimation delay (s)number | string1
speedScroll speed (px/s)number | string60
scrollableWhether to scroll contentboolean-
wrapableWhether to enable text wrapbooleanfalse
\n

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
EventDescriptionArguments
clickEmitted when NoticeBar is clickedevent: MouseEvent
closeEmitted when NoticeBar is closedevent: MouseEvent
replayEmitted when NoticeBar is replayed-
\n

Methods

\n

Use ref to get NoticeBar instance and call instance methods.

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescriptionAttributeReturn value
resetReset NoticeBar--
\n

Types

\n

The component exports the following type definitions:

\n
import type { NoticeBarMode, NoticeBarProps, NoticeBarInstance } from 'vant';\n
\n

NoticeBarInstance is the type of component instance:

\n
import { ref } from 'vue';\nimport type { NoticeBarInstance } from 'vant';\n\nconst noticeBarRef = ref<NoticeBarInstance>();\n\nnoticeBarRef.value?.reset();\n
\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescription
defaultNotice text content
left-iconCustom left icon
right-iconCustom right icon
\n

Theming

\n

CSS Variables

\n

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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-notice-bar-height40px-
--van-notice-bar-padding0 var(--van-padding-md)-
--van-notice-bar-wrapable-paddingvar(--van-padding-xs) var(--van-padding-md)-
--van-notice-bar-text-colorvar(--van-orange-dark)-
--van-notice-bar-font-sizevar(--van-font-size-md)-
--van-notice-bar-line-height24px-
--van-notice-bar-backgroundvar(--van-orange-light)-
--van-notice-bar-icon-size16px-
--van-notice-bar-icon-min-width24px-
\n
'},null,8,e))}}}]);