Appearance

iuiDesign
100%
10:30
本页目录

向用户显示信息，通过提示，展现需要关注的信息。

基本使用 ​

展现需要关注的信息，适用于简短的通知提示。

html
<iui-noticebar> Note that this is a reminder message. </iui-noticebar>
<iui-noticebar> Note that this is a reminder message. </iui-noticebar>

使用图标 ​

通过 icon 属性可以自定义图标，支持所有内置图标。

html
<iui-noticebar icon="sound">
  Note that this is a reminder message.
</iui-noticebar>
<iui-noticebar icon="sound">
  Note that this is a reminder message.
</iui-noticebar>

可关闭的通知 ​

通过 closeable 属性设置 NoticeBar 是否可关闭。

html
<iui-noticebar closeable> Note that this is a reminder message. </iui-noticebar>
<iui-noticebar closeable> Note that this is a reminder message. </iui-noticebar>

多行展示 ​

通过 wrapable 属性设置 NoticeBar 是否开启多行展示，开启后会在一行展示不下时自动切换为多行展示。

html
<iui-noticebar wrapable>
  Note that this is a reminder message. The message is long, but I can choose to
  have it scroll or wrap, as it does now.
</iui-noticebar>
<iui-noticebar wrapable>
  Note that this is a reminder message. The message is long, but I can choose to
  have it scroll or wrap, as it does now.
</iui-noticebar>

滚动播放 ​

通过 animation 属性设置 NoticeBar 是否开启滚动播放，开启后文字会在一行展示不下时滚动播放。

html
<iui-noticebar icon="sound" animation>
  Note that this is a reminder message. The message is long, but I can choose to
  have it scroll or wrap, as it does now.
</iui-noticebar>
<iui-noticebar icon="sound" animation>
  Note that this is a reminder message. The message is long, but I can choose to
  have it scroll or wrap, as it does now.
</iui-noticebar>

自定义前后缀内容 ​

通过 suffix 插槽属性可以自定义右侧内容。

html
<iui-noticebar color="success">
  <template #prefix>
    <iui-icon name="check-circle" size="18" />
  </template>
  File is uploaded successfully!
</iui-noticebar>

<iui-noticebar>
  <template #suffix>
    <iui-icon name="right" size="18" />
  </template>
  Note that this is a reminder message. The message is long, but I can choose to
  have it scroll or wrap, as it does now.
</iui-noticebar>
<iui-noticebar color="success">
  <template #prefix>
    <iui-icon name="check-circle" size="18" />
  </template>
  File is uploaded successfully!
</iui-noticebar>

<iui-noticebar>
  <template #suffix>
    <iui-icon name="right" size="18" />
  </template>
  Note that this is a reminder message. The message is long, but I can choose to
  have it scroll or wrap, as it does now.
</iui-noticebar>

API ​

<Noticebar>props
参数描述类型默认值
visible (v-model)是否显示Booleantrue
icon左侧图标String-
closeable是否可关闭Booleanfalse
wrapable是否换行Booleanfalse
color颜色primary | success | warning | error | Object: { background: String, color: String }warning
animation是否开启滚动播放Booleanfalse
speed滚动速度Number40
<Noticebar>events
事件名描述参数
close关闭时触发-
<Noticebar>slots
插槽名描述参数
default通知内容-
prefix自定义左侧内容-
suffix自定义右侧内容-