# Badge 徽章
概述
Badge 徽章，可自定义颜色。
# 引入
以下介绍两种常用的引入方式。
第一种：在页面json文件中引入
{
"navigationBarTitleText": "徽章",
"usingComponents": {
"fui-badge":"/components/firstui/fui-badge/fui-badge"
}
}
1
2
3
4
5
6
2
3
4
5
6
第二种：在根目录app.json文件中全局引入
"usingComponents": {
"fui-badge":"components/firstui/fui-badge/fui-badge"
}
1
2
3
2
3
# 代码演示
部分示例演示，完整使用请参考示例程序以及文档API。
基础使用
通过 value 属性设置展示的文本，type 属性设置badge的类型。
<fui-badge value="1"></fui-badge>
<fui-badge type="success" value="2"></fui-badge>
1
2
2
注意：可通过css变量全局修改按钮type类型对应的颜色，css变量参考 自定义主题。
显示为圆点
通过 dot 属性设置badge是否显示为圆点，为true时value失效。
<fui-badge dot></fui-badge>
<fui-badge type="warning" dot></fui-badge>
1
2
2
自定义颜色
通过 background 属性设置badge背景颜色，color 属性设置字体颜色。
<fui-badge value="6" background="#eee" color="#333"></fui-badge>
1
# Slots
| 插槽名称 | 说明 |
|---|---|
| - | - |
# Props
| 属性名 | 类型 | 说明 | 默认值 | 其他说明 |
|---|---|---|---|---|
| value | Number, String | badge显示文本 | - | - |
| max V1.5.0+ | Number, String | 最大值，当值超过max时使用+号代替，仅为数字时有效，-1表示不限制 | -1 | - |
| type | String | 类型，有效值：primary，success，warning，danger，purple，white | primary | - |
| background | String | 背景色，如果设置背景色则type失效 | - | - |
| color | String | 字体颜色 | #FFFFFF | - |
| dot | Boolean | 是否显示为圆点 | false | - |
| marginTop | Number, String | margin-top值，单位rpx | 0 | - |
| marginLeft | Number, String | margin-left值，单位rpx | 0 | - |
| marginRight | Number, String | margin-right值，单位rpx | 0 | - |
| absolute | Boolean | 是否绝对定位 | false | - |
| top | String | top值，absolute为true时生效 | -8rpx | - |
| right | String | right值，absolute为true时生效 | -18rpx | - |
| scaleRatio | Number | 缩放比例 | 1 | - |
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
| bind:click | 点击badge时触发 | - |