标签 Tag

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

示例代码

<div class="aui-content">
    <div class="content-top">
        Tag标签组件多用于商品列表、重点内容显示等场景。
    </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-tag aui-tag-gray">标签</span>
            <span class="aui-tag aui-tag-blue">标签</span>
            <span class="aui-tag aui-tag-success">标签</span>
            <span class="aui-tag aui-tag-waring">标签</span>
            <span class="aui-tag aui-tag-error">标签</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-tag aui-tag-linear aui-tag-gray">标签</span>
            <span class="aui-tag aui-tag-linear aui-tag-blue">标签</span>
            <span class="aui-tag aui-tag-linear aui-tag-success">标签</span>
            <span class="aui-tag aui-tag-linear aui-tag-waring">标签</span>
            <span class="aui-tag aui-tag-linear aui-tag-error">标签</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-tag aui-tag-round aui-tag-gray">标签</span>
            <span class="aui-tag aui-tag-round aui-tag-linear aui-tag-blue">标签</span>
            <span class="aui-tag aui-tag-round aui-tag-success">标签</span>
            <span class="aui-tag aui-tag-round aui-tag-linear aui-tag-waring">标签</span>
            <span class="aui-tag aui-tag-round aui-tag-error">标签</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-tag aui-tag-round aui-tag-small aui-tag-gray">标签</span>
            <span class="aui-tag aui-tag-round aui-tag-linear aui-tag-small aui-tag-blue">标签</span>
            <span class="aui-tag aui-tag-round aui-tag-small aui-tag-success">标签</span>
            <span class="aui-tag aui-tag-round aui-tag-linear aui-tag-small aui-tag-waring">标签</span>
            <span class="aui-tag aui-tag-round aui-tag-small aui-tag-error">标签</span>
        </li>
    </ul>
</div>