MiniX自绘渲染跨平台框架

# NoticeBar 提醒栏

请扫码查看示例

# 介绍

提醒栏用于提醒用户。

# 引入

通过以下方式来引入组件

  1. 使用包管理器安装mui-minix 组件库。如： npm i mui-minix -S;
  2. 在要使用该组件的页面中使用element标签引入该组件。

# 代码演示

# 基本用法

通过设置 text 属性，显示提醒信息

<element name="m-notice-bar" src="@/node_modules/mui-minix/src/notice-bar/index"></element>
<m-notice-bar text="提示注意事项，文案自定；"></m-notice-bar>
1
2

# 主题颜色

通过设置 theme 来控制主题颜色。支持 brand purple blue-purple blue cyan yellow orange gray-offline warning success error white。 默认为 brand 。

<element name="m-notice-bar" src="@/node_modules/mui-minix/src/notice-bar/index"></element>
<div>
  <m-notice-bar class="m-b-10" text="提示注意事项，文案自定；"></m-notice-bar>
  <m-notice-bar class="m-b-10" theme="purple" text="提示注意事项，文案自定；"></m-notice-bar>
  <m-notice-bar class="m-b-10" theme="blue-purple" text="提示注意事项，文案自定；"></m-notice-bar>
  <m-notice-bar class="m-b-10" theme="blue" text="提示注意事项，文案自定；"></m-notice-bar>
  <m-notice-bar class="m-b-10" theme="cyan" text="提示注意事项，文案自定；"></m-notice-bar>
  <m-notice-bar class="m-b-10" theme="yellow" text="提示注意事项，文案自定；"></m-notice-bar>
  <m-notice-bar class="m-b-10" theme="orange" text="提示注意事项，文案自定；"></m-notice-bar>
  <m-notice-bar class="m-b-10" theme="gray-offline" text="提示注意事项，文案自定；"></m-notice-bar>
  <m-notice-bar class="m-b-10" theme="warning" text="提示注意事项，文案自定；"></m-notice-bar>
  <m-notice-bar class="m-b-10" theme="success" text="提示注意事项，文案自定；"></m-notice-bar>
  <m-notice-bar class="m-b-10" theme="error" text="提示注意事项，文案自定；"></m-notice-bar>
  <m-notice-bar theme="white" text="提示注意事项，文案自定；"></m-notice-bar>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.m-b-10{
  margin-bottom:10px;
}
1
2
3

# 自定义文本颜色

通过设置 text-color 属性, 控制文本颜色。

<element name="m-notice-bar" src="@/node_modules/mui-minix/src/notice-bar/index"></element>
<div>
  <m-notice-bar class="m-b-10" text-color="#00b6a5" text="提示注意事项，文案自定；"></m-notice-bar>
  <m-notice-bar class="m-b-10" text-color="#cc880c" theme="purple" text="提示注意事项，文案自定；"></m-notice-bar>
  <m-notice-bar text-color="#ff3b30" text="提示注意事项，文案自定；"></m-notice-bar>
</div>
1
2
3
4
5
6
.m-b-10{
  margin-bottom:10px;
}
1
2
3

# 自定义背景颜色

通过设置 background-color 属性, 控制背景颜色。

<element name="m-notice-bar" src="@/node_modules/mui-minix/src/notice-bar/index"></element>
<div>
  <m-notice-bar class="m-b-10" background-color="#fac9c6" text-color="#00b6a5" text="提示注意事项，文案自定；"></m-notice-bar>
  <m-notice-bar class="m-b-10" background-color="#a5e3fb" text-color="#cc880c" theme="purple" text="提示注意事项，文案自定；"></m-notice-bar>
  <m-notice-bar background-color="#95e6df" text-color="#ff3b30" text="提示注意事项，文案自定；"></m-notice-bar>
</div>
1
2
3
4
5
6
.m-b-10{
  margin-bottom:10px;
}
1
2
3

# 显示右边按钮

通过设置 button-text 属性, 显示右边按钮。

<element name="m-notice-bar" src="@/node_modules/mui-minix/src/notice-bar/index"></element>
<div>
  <m-notice-bar button-text="联系售后" class="m-b-10" background-color="#fac9c6" text-color="#00b6a5" text="提示注意事项，文案自定；"></m-notice-bar>
  <m-notice-bar button-text="联系售后" class="m-b-10" background-color="#a5e3fb" text-color="#cc880c" theme="purple" text="提示注意事项，文案自定；"></m-notice-bar>
  <m-notice-bar button-text="联系售后" background-color="#95e6df" text-color="#ff3b30" text="提示注意事项，文案自定；"></m-notice-bar>
</div>
1
2
3
4
5
6
.m-b-10{
  margin-bottom:10px;
}
1
2
3

# 显示图标

通过设置 icon 属性, 显示左侧图标。

<element name="m-notice-bar" src="@/node_modules/mui-minix/src/notice-bar/index"></element>
<div>
  <m-notice-bar icon="info" class="m-b-10" background-color="#fac9c6" text-color="#00b6a5" text="提示注意事项，文案自定；"></m-notice-bar>
  <m-notice-bar icon="child" button-text="联系售后" class="m-b-10" background-color="#a5e3fb" text-color="#cc880c" theme="purple" text="提示注意事项，文案自定；"></m-notice-bar>
  <m-notice-bar icon="cold" button-text="联系售后" background-color="#95e6df" text-color="#ff3b30" text="提示注意事项，文案自定；"></m-notice-bar>
</div>
1
2
3
4
5
6
.m-b-10{
  margin-bottom:10px;
}
1
2
3

# Api

# Prop

字段 说明 类型 默认值 是否必须
height 高度 number 36 否
padding-left 左侧留白 number 16 否
padding-right 右侧留白 number 16 否
background-color 背景颜色 string - 否
theme 主题颜色 string brand 否
text 文本内容 string - 是
text-color 文本颜色 string - 否
text-size 文本大小 number 14 否
icon 图标，支持链接 string - 否
icon-size 图标大小 number 16 否
icon-color 图标背景颜色 string - 否
button-text 按钮文本 string - 否
button-width 按钮宽度 number 64 否
button-height 按钮高度 number 24 否
button-color 按钮背景颜色 string - 否
closeable 是否可关闭 boolean false 否

# Events

名称 说明 回调参数
m-close closeable 模式下点击关闭图标时触发 -
m-button-click 点击按钮时触发 -