数字角标 Badge

使用 .aui-badge 来使用角标效果。使用 .aui-badge-* 来选择使用AUI提供的样式，详见示例。

示例代码

<div class="aui-content">
    <div class="content-top">
        Badge数字角标通常用来标记重要信息，如接收到新消息、有未读消息等。
    </div>
    <ul class="aui-card">
        <div class="aui-card-title">
            <span class="aui-card-title-line"></span>
            实心数字角标
        </div>
        <li class="aui-card-main">
            <span class="aui-badge aui-badge-gray">1</span>
            <span class="aui-badge aui-badge-blue">2</span>
            <span class="aui-badge aui-badge-success">33</span>
            <span class="aui-badge aui-badge-waring">44</span>
            <span class="aui-badge aui-badge-error">123</span>
        </li>
    </ul>
    <ul class="aui-card">
        <div class="aui-card-title">
            <span class="aui-card-title-line"></span>
            空心数字角标
        </div>
        <li class="aui-card-main">
            <span class="aui-badge aui-badge-nobg aui-badge-gray">1</span>
            <span class="aui-badge aui-badge-nobg aui-badge-blue">2</span>
            <span class="aui-badge aui-badge-nobg aui-badge-success">33</span>
            <span class="aui-badge aui-badge-nobg aui-badge-waring">44</span>
            <span class="aui-badge aui-badge-nobg aui-badge-error">123</span>
        </li>
    </ul>
    <ul class="aui-card">
        <div class="aui-card-title">
            <span class="aui-card-title-line"></span>
            迷你数字角标
        </div>
        <li class="aui-card-main">
            <span class="aui-badge aui-badge-small aui-badge-gray">1</span>
            <span class="aui-badge aui-badge-nobg aui-badge-small aui-badge-blue">2</span>
            <span class="aui-badge aui-badge-small aui-badge-success">33</span>
            <span class="aui-badge aui-badge-nobg aui-badge-small aui-badge-waring">44</span>
            <span class="aui-badge aui-badge-small aui-badge-error">123</span>
        </li>
    </ul>
</div>