# bz-notice-bar 通告栏
# 基本用法
通告栏，一般用作系统提醒、活动提醒等通知。
扫码预览
用BoosHi扫码或PC端点击
<template>
<view class="demo-ui-page">
<view class="demo-content">
<view class="demo-title">bz-notice-bar 通告栏</view>
<demo-cell noPadding>
<bz-notice-bar
class="mb-10"
text="提示这是一段通知文本文本"
></bz-notice-bar>
<bz-notice-bar
class="mb-10"
type="success"
text="成功这是一段通知文本文本"
></bz-notice-bar>
<bz-notice-bar
class="mb-10"
type="warning"
text="警告这是一段通知文本文本"
></bz-notice-bar>
<bz-notice-bar
class="mb-10"
type="error"
text="错误这是一段通知文本文本"
></bz-notice-bar>
</demo-cell>
<demo-cell title="图标/是否可关闭" noPadding>
<bz-notice-bar
class="mb-10"
iconType="info-fill"
text="这是一段通知文本文本"
></bz-notice-bar>
<bz-notice-bar
class="mb-10"
showClose
text="这是一段通知文本文本"
></bz-notice-bar>
<bz-notice-bar
class="mb-10"
type="warning"
iconType="warning-fill"
showClose
text="这是一段通知文本文本"
></bz-notice-bar>
</demo-cell>
<demo-cell title="展示形式" noPadding>
<bz-notice-bar
class="mb-10"
text="默认换行，默认换行，默认换行默认换行认默认默认默认换行，默默认换行默认默默认换行，默默认换行默认默认换行认默认"
></bz-notice-bar>
<bz-notice-bar
class="mb-10"
single
text="省略不换行，省略不换行省略不换行，省略不换行省略不换行，省略不换行省略不换行省略不换行"
></bz-notice-bar>
<bz-notice-bar
scrollable
text="滚动滚动滚动滚动，滚动滚动滚动滚动，滚动滚动滚动滚动，滚动滚动滚动滚动，滚动滚动滚动滚动，滚动滚动"
></bz-notice-bar>
</demo-cell>
</view>
</view>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
展开 刷新 关闭
# 属性说明
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
|---|---|---|---|---|
| type | String | info | 'success', 'info','warning', 'error' | 主题类型 |
| iconType | String | - | - | icon 的 type |
| text | String | - | - | 显示文字 |
| single | Boolean | false | - | 是否单行 |
| scrollable | Boolean | false | - | 是否滚动，为 true 时，NoticeBar 为单行 |
| showClose | Boolean | false | - | 是否显示左侧关闭按钮 |
| @close | Handler | - | - | 关闭 NoticeBar 触发事件 |