标签

提供了几个默认色值的小标签效果，用户可以根据自己的需要来对颜色进行自由配置。.aui-label 来定义标签，.aui-label-* 为样式。默认的样式有以下：

.aui-label {background-color: #dddddd;color: #616161;}
.aui-label-primary {background-color: #00bcd4; color: #ffffff;}
.aui-label-success {background-color: #009688; color: #ffffff;}
.aui-label-info {background-color: #03a9f4; color: #ffffff;}
.aui-label-warning {background-color: #ffc107; color: #ffffff;}
.aui-label-danger {background-color: #e51c23; color: #ffffff;}
.aui-label-outlined 镂空线条样式

用法示例：<span class="aui-label aui-label-primary"></span>

自定义样式的方法：

<style>
.orange {
    ackground-color:#ff9900;
    color:#ffffff;
}
</style>
<span class="aui-btn oranger">标签</span>

角标

.aui-badge 为角标，采用绝对定位，所以父级标签至少要相对定位。用法示例：

<div class="aui-badge">88</div>

红点

.aui-dot 为红点，采用绝对定位，所以父级标签至少要相对定位。用法示例：

<div class="aui-dot"></div>

示例源码

<section class="aui-content-padded">
    <p>标签</p>
    默认：<div class="aui-label">标签</div>
    info：<div class="aui-label aui-label-info">标签</div>
    primay：<div class="aui-label aui-label-primary">标签</div>
    danger：<div class="aui-label aui-label-danger">标签</div>
    success：<div class="aui-label aui-label-success">标签</div>
    warning：<div class="aui-label aui-label-warning">标签</div>
    outlined：<div class="aui-label aui-label-outlined"><i class="aui-iconfont aui-icon-my"></i> 线条样式的标签</div>
    outlined：<div class="aui-label aui-label-danger aui-label-outlined">标签</div>
</section>
<section class="aui-content-padded">
    <p class="aui-pull-left">角标(.aui-badge)</p>
    <div class="aui-badge"></div>
    <div class="aui-badge">8</div>
    <div class="aui-badge">88</div>
</section>
<section class="aui-content-padded">
    <p class="aui-pull-left">红点(.aui-dot)</p>
    <div class="aui-dot"></div>
</section>