# Badge 徽标
请扫码查看示例
# 介绍
红点提醒，用来在主体内容右上角显示徽标数据。
# 引入
通过以下方式来引入组件
- 使用包管理器安装mui-minix 组件库。如： npm i mui-minix -S;
- 在要使用该组件的页面中使用element标签引入该组件。
# 代码演示
# 基本用法
设置 content 属性。
<element name="m-badge" src="@/node_modules/mui-minix/src/badge/index"></element>
<m-badge content="9">
<div class="rect-40 gray"></div>
</m-badge>
<m-badge content="100">
<div class="rect-40 gray"></div>
</m-badge>
<m-badge content="hot">
<div class="rect-40 gray"></div>
</m-badge>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
.rect-40{
width:40px;
height: 40px;
border-radius:4px;
}
.gray{
background-color: #f2f3f5;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 最大值
通过 max 属性, 可以控制徽标显示最大数值。默认为 99。
<element name="m-badge" src="@/node_modules/mui-minix/src/badge/index"></element>
<m-badge content="9">
<div class="rect-40 gray"></div>
</m-badge>
<m-badge content="100">
<div class="rect-40 gray"></div>
</m-badge>
<m-badge max="{{120}}" content="100">
<div class="rect-40 gray"></div>
</m-badge>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
.rect-40{
width:40px;
height: 40px;
border-radius:4px;
}
.gray{
background-color: #f2f3f5;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 自定义颜色
通过 color 属性, 可以控制徽标的背景颜色。默认为 #ff3b30。 通过 text-color 可以设置徽标的文本颜色, 默认为 #ffffff。
<element name="m-badge" src="@/node_modules/mui-minix/src/badge/index"></element>
<m-badge color="#00cbb8" content="9">
<div class="rect-40 gray"></div>
</m-badge>
<m-badge color="#ff8225" content="100">
<div class="rect-40 gray"></div>
</m-badge>
<m-badge color="#7c879b" text-color="#25cf42" content="hot">
<div class="rect-40 gray"></div>
</m-badge>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
.rect-40{
width:40px;
height: 40px;
border-radius:4px;
}
.gray{
background-color: #f2f3f5;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# 圆点
通过设置 dot 属性，可以让徽标显示为一个实心圆点。默认为 false。 同时设置了 content 与 dot 属性时， content 优先级更高。
<element name="m-badge" src="@/node_modules/mui-minix/src/badge/index"></element>
<m-badge content="9" dot="{{true}}">
<div class="rect-40 gray"></div>
</m-badge>
<m-badge content="100" dot="{{true}}">
<div class="rect-40 gray"></div>
</m-badge>
<m-badge dot="{{true}}">
<div class="rect-40 gray"></div>
</m-badge>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
.rect-40{
width:40px;
height: 40px;
border-radius:4px;
}
.gray{
background-color: #f2f3f5;
}
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
# Api
# Prop
| 字段 | 说明 | 类型 | 默认值 | 是否必须 |
|---|---|---|---|---|
dot | 是否显示为圆点 | boolean | false | 否 |
max | 可显示的最大数值 | number | 99 | 否 |
content | 文本内容 | string | - | 否 |
background-color | 背景颜色 | string | #ff3b30 | 否 |
text-color | 文本颜色 | string | #ffffff | 否 |
top | 距离包括内容右上角Y轴距离 | number | 0 | 否 |
right | 距离包括内容右上角X轴距离 | number | 0 | 否 |
theme | 主题颜色, 支持 brand purple blue-purple blue cyan yellow orange orange-red gray-offline error | string | error | 否 |
size | 尺寸，可选值为: small middle | string | middle | 否 |
# Slots
| 插槽名称 | 说明 |
|---|---|
defaut | 自定义徽标包裹内容 |