Badge 徽章

介绍

徽章，可指定颜色和尺寸。

引入

"usingComponents": {
	"m-badge": "mind-ui-weapp/badge/index"
}

示例

基础用法

<m-badge value="42">
	<view class="demo-badge"></view>
</m-badge>

小红点

<m-badge is-dot>
	<view class="demo-badge"></view>
</m-badge>

自定义颜色与溢出值

<m-badge value="101" bgcolor="#67c23a" max="100">
	<view class="demo-badge"></view>
</m-badge>

自定义内容

<m-badge value="new">
	<view class="demo-badge"></view>
</m-badge>

配合其它组件使用

navbar 内部使用了 badge 组件，value 值对应 badge 组件的 value 值

<m-navbar-group bind:click="onClick" bind:change="onChange">
	<m-navbar title="标签1" name="tab1" value="new" />
	<m-navbar title="标签2" name="tab2" value="8" />
	<m-navbar title="标签3" name="tab3" />
</m-navbar-group>

Properties

参数	说明	类型	可选值	默认值
custom-class	自定义样式类名	string	—	—
value	显示值	Number String	—	—
max	最大值，超过最大值会显示 ${max}+，要求 value 是 Number 类型	Number	—	—
is-dot	是否显示小圆点，显示则不显示 value	Boolean	—	false
bgcolor	徽章背景色	String	—	—