一般出现在图标或文字的右上角。提供及时、重要的信息提示。
基本用法
常用的徽标展示，可以设置 text 属性来显示文本。
html
<iui-badge dot></iui-badge>
<iui-badge text="2"></iui-badge>
<iui-badge text="12"></iui-badge><iui-badge dot></iui-badge>
<iui-badge text="2"></iui-badge>
<iui-badge text="12"></iui-badge>图标
可以为徽标设置图标，支持所有内置图标。
html
<iui-badge position="br" icon="star">
<view class="demo-block"> </view>
</iui-badge><iui-badge position="br" icon="star">
<view class="demo-block"> </view>
</iui-badge>css
.demo-block {
padding: 10px;
background-color: var(--iui-blue-2);
border-radius: 4px;
width: 20px;
height: 20px;
}.demo-block {
padding: 10px;
background-color: var(--iui-blue-2);
border-radius: 4px;
width: 20px;
height: 20px;
}徽标位置
通过 position 属性可以设置徽标的位置，可选值为 tl tr bl br。也可以传入数组 [x,y] 来自定义位置
html
<iui-badge dot position="tl">
<view class="demo-block"> </view>
</iui-badge><iui-badge dot position="tl">
<view class="demo-block"> </view>
</iui-badge>自定义颜色
通过 color 属性可以自定义徽标的颜色，支持传入 linear-gradient 渐变色。
html
<iui-badge
position="center"
icon="plus"
color="linear-gradient(277.15deg, rgb(6, 120, 255) -0.2%, rgb(20, 205, 255) 97.54%)"
>
<view class="demo-block"> </view>
</iui-badge><iui-badge
position="center"
icon="plus"
color="linear-gradient(277.15deg, rgb(6, 120, 255) -0.2%, rgb(20, 205, 255) 97.54%)"
>
<view class="demo-block"> </view>
</iui-badge>API
<Badge>props<Badge>slots