Badge 徽标
示例
基础用法
<Badge content={5}>
<div class="h-10 w-10 rounded-md bg-gray-300"></div>
</Badge>
<Badge content={99}>
<div class="h-10 w-10 rounded-md bg-gray-300"></div>
</Badge>
<Badge content={100} border>
<div class="h-10 w-10 rounded-md bg-gray-300"></div>
</Badge>
<Badge content="新">
<div class="h-10 w-10 rounded-md bg-gray-300"></div>
</Badge>
<Badge content>
<div class="h-10 w-10 rounded-md bg-gray-300"></div>
</Badge>
带边框
<Badge content="更新啦" border>
<div class="h-10 w-10 rounded-md bg-gray-400"></div>
</Badge>
独立使用
<Badge content="更新啦"></Badge>
<Badge content="新消息！" />
自定义颜色和偏移量
<Badge content --sunp-badge-color="blue" --sunp-right="100%" --sunp-top="100%">
<div class="h-10 w-10 rounded-md bg-gray-300"></div>
</Badge>
<Badge content --sunp-badge-color="green" --sunp-right="100%">
<div class="h-10 w-10 rounded-md bg-gray-300"></div>
</Badge>
<Badge content --sunp-badge-color="orange">
<div class="h-10 w-10 rounded-md bg-gray-300"></div>
</Badge>
<Badge content --sunp-badge-color="purple" --sunp-top="100%">
<div class="h-10 w-10 rounded-md bg-gray-300"></div>
</Badge>
<Badge
content="1"
border
--sunp-badge-color="#ffcccc"
--sunp-border-color="#ff0000"
--sunp-text-color="#ff0000"
--sunp-top="50%"
>
<div class="h-10 w-10 rounded-md bg-gray-300"></div>
</Badge>
Badge
属性
| 属性 |
说明 |
类型 |
默认值 |
| content |
徽标内容。boolean 显示小红点，number 显示数字，string 显示字符串 |
boolean | number | string |
false |
| max |
封顶数字值，content 为 number 时有效。默认值：99，0 表示不封顶 |
number |
99 |
| border |
是否增加描边 |
boolean |
false |
CSS 变量
| 属性 |
说明 |
默认值 |
| --sunp-top |
徽标中心与顶部的距离 |
0 |
| --sunp-right |
徽标中心与右侧的距离 |
0 |