徽章 Badge

按钮和图标上的数字或状态标记。

把badge元素放到需要标记的元素内部即可

基础展示

显示代码

<button class="open-btn">默认按钮<span class="open-badge open-badge-danger">12</span></button>
<button class="open-btn">默认按钮<span class="open-badge open-badge-danger open-badge-radius">12</span></button>
<button class="open-btn">默认按钮<span class="open-badge open-badge-danger" dot>12</span></button>

默认样式

span元素添加".open-badge"即可创建一个基础徽章，然后通过追加".open-badge-primary || .open-badge-warn || .open-badge-danger"定义不同颜色风格的按钮

new999999

显示代码

<span class="open-badge">new</span>
<span class="open-badge open-badge-primary">99</span>
<span class="open-badge open-badge-warn">99</span>
<span class="open-badge open-badge-danger">99</span>

圆形样式

通过追加".open-badge-radius "定义圆形样式的徽章

new101010

显示代码

<span class="open-badge">new</span>
<span class="open-badge open-badge-primary">99</span>
<span class="open-badge open-badge-warn">99</span>
<span class="open-badge open-badge-danger">99</span>

红点样式

元素添加属性"dot"即可定义小圆点样式

9999

显示代码

<span class="open-badge" type="dot">9</span>
<span class="open-badge open-badge-primary" dot>9</span>
<span class="open-badge open-badge-warn" dot>9</span>
<span class="open-badge open-badge-danger" dot>9</span>

定位到右上角

追加".open-badge-top "即可定位到右上角

显示代码

<button class="open-btn">默认按钮<span class="open-badge open-badge-danger open-badge-top">12</span></button>
<button class="open-btn">默认按钮<span class="open-badge open-badge-danger open-badge-radius open-badge-top">12</span></button>
<button class="open-btn">默认按钮<span class="open-badge open-badge-danger open-badge-top" dot>12</span></button>