Skip to content
On this page

NoticeBar 通知栏

基本用法

设置 text 文本内容和 prefix 左侧图标。

html
<wd-notice-bar text="这是一条消息提示信息,这是一条消息提示信息,这是一条消息提示信息" prefix="warn-bold" />

类型修改

设置 type 可修改通知类型,通知类型共有三种 info|warning|danger,默认值为warning

html
<wd-notice-bar text="这是一条消息提示信息,这是一条消息提示信息,这是一条消息提示信息" prefix="warn-bold" custom-class="space" />
<wd-notice-bar text="这是一条消息提示信息,这是一条消息提示信息,这是一条消息提示信息" prefix="check-outline" type="info" custom-class="space" />
<wd-notice-bar text="这是一条消息提示信息,这是一条消息提示信息,这是一条消息提示信息" prefix="wifi-error" type="danger" />
scss
:deep(.space) {
  margin-bottom: 10px;
}

插槽演示

html
<wd-notice-bar>
  <template #prefix>
    <wd-icon class="prefix" name="warn-bold">占位符</wd-icon>
  </template>
  通知被禁或时段内消息屏蔽可能造成消…
  <template #suffix>
    <div style="color: #4d80f0">查看</div>
  </template>
</wd-notice-bar>
scss
:deep(.prefix) {
  font-size: 18px;
  padding-right: 4px;
  width: 18px;
  height: 18px;
}

多行展示

设置 wrapable 属性为 true 且同时禁止滚动 scrollable 即可开启多行展示。

html
<wd-notice-bar text="这是一条消息提示信息,这是一条消息提示信息,这是一条消息提示信息" wrapable :scrollable="false" />

可关闭的

设置 closable 属性,使通知栏可以关闭。

html
<wd-notice-bar text="这是一条消息提示信息,这是一条消息提示信息,这是一条消息提示信息" closable />

自定义颜色

设置 color 修改文字和图标颜色,设置 background-color 修改背景颜色。

html
<wd-notice-bar
  text="这是一条消息提示信息,这是一条消息提示信息,这是一条消息提示信息"
  prefix="check-outline"
  closable
  color="#34D19D"
  background-color="#f0f9eb"
/>

Attributes

参数说明类型可选值默认值最低版本
text设置通知栏文案string---
type设置通知栏类型stringinfo / warning / dangerwarning-
prefix设置左侧图标,使用 icon 章节中的图标名string---
scrollable是否可以滚动boolean-true-
delay滚动动画初始延时,单位 秒(s)number-1-
speed滚动速度,单位 px/snumber-50-
closable是否可以关闭boolean-false-
wrapable是否换行展示boolean-false-
color文字、图标颜色string---
background-color背景颜色string---

Events

事件名称说明参数最低版本
close关闭按钮点击时--

Slot

name说明最低版本
prefix前置图标-
suffix后置插槽-

外部样式类

类名说明最低版本
custom-class根节点样式-

Released under the MIT License.

Released under the MIT License.