徽章

出现在标题、按钮、图标旁的数字或状态标记。

基础用法

使用.vus-badge类,作为徽章的样式。

1 6 10 100 99+ Hot 热门
<span class="vus-badge">1</span>
<span class="vus-badge">10</span>
<span class="vus-badge">100</span>
<span class="vus-badge">Hot</span>
<span class="vus-badge">热门</span>

药丸形状

添加.pill类,使徽章成药丸形状。

1 6 10 100 99+ New
<span class="vus-badge pill">1</span>
<span class="vus-badge pill">10</span>
<span class="vus-badge pill">100</span>
<span class="vus-badge pill">New</span>
<span class="vus-badge pill">新</span>

尺寸

添加.large类,设置成大尺寸的徽章。

1 6 10 100 99+ Good 推荐
<span class="vus-badge pill">1</span>
<span class="vus-badge pill">10</span>
<span class="vus-badge pill">100</span>
<span class="vus-badge pill">Good</span>
<span class="vus-badge pill">推荐</span>

颜色

请参阅颜色中的背景颜色API文档。

1 6 10 100 99+ Good 推荐
<span class="vus-badge vus-bg--primary">1</span>
<span class="vus-badge vus-bg--success">10</span>
<span class="vus-badge pill vus-bg--violet">100</span>
<span class="vus-badge pill vus-bg--warning">Good</span>
<span class="vus-badge pill vus-bg--magenta">推荐</span>

位置与类型

  • 设置不同位置和不同类型的徽章。
  • .sup-left:左上角。
  • .sup-right:右上角。
  • .dot-left:左上角(小红点)。
  • .dot-right:右上角(小红点)。
<button class="vus-btn">
   评论 <span class="vus-badge">10</span>
</button>
<button class="vus-btn">
   回复 <span class="vus-badge pill">20</span>
</button>
<button class="vus-btn">
   信息 <span class="vus-badge pill sup-left">15</span>
</button>
<button class="vus-btn">
   邮件 <span class="vus-badge pill sup-right">99</span>
</button>
<button class="vus-btn">
   小红点(左) <span class="vus-badge dot-left"></span>
</button>
<button class="vus-btn">
   小红点(右) <span class="vus-badge dot-right"></span>
</button>