Tag 标签

颜色

使用ax-tag表示内容标签。本框架一共定义了7种颜色标签，分别是ax-primary，ax-secondary，ax-success，ax-danger，ax-warning，ax-info，ax-light。标签可以用span也可以使用a，详细说明和举例如下：

默认中国次要色操作成功！很危险！提示注意！这是一个广告！名词解释浅灰色文字提示

                                <span class="ax-tag">默认</span>
                                <span class="ax-tag ax-primary">中国</span>
                                <span class="ax-tag ax-secondary">次要色</span>
                                <span class="ax-tag ax-success">操作成功！</span>
                                <span class="ax-tag ax-danger">很危险！</span>
                                <a href="###" class="ax-tag ax-warning">提示注意！</a>
                                <a href="###" class="ax-tag ax-ad">这是一个广告！</a>
                                <a href="###" class="ax-tag ax-info">名词解释</a>
                                <a href="###" class="ax-tag ax-light">浅灰色文字提示</a>

无边

追加ax-borderless也可以实现无边tag。

唐朝宋朝

                                <span class="ax-tag ax-borderless ax-primary">唐朝</span>
                                <a href="###" class="ax-tag ax-borderless ax-light">宋朝</a>

圆角

追加ax-round可以实现圆角tag。

唐朝宋朝

                                <span class="ax-tag ax-round ax-primary">唐朝</span>
                                <a href="###" class="ax-tag ax-round ax-light">宋朝</a>

方角

追加ax-square可以实现直角tag。

唐朝宋朝

                                <span class="ax-tag ax-square ax-primary">唐朝</span>
                                <a href="###" class="ax-tag ax-square ax-light">宋朝</a>

关闭按钮 JS

如果需要使用关闭按钮，在ax-tag尾部加入<i></i>即可

默认主色。次要色操作成功！很危险！提示注意！这是一个广告！名词解释浅灰色文字提示

                                <span class="ax-tag">默认<i></i></span>
                                <span class="ax-tag ax-primary">主色。<i></i></span>
                                <span class="ax-tag ax-secondary">次要色<i></i></span>
                                <span class="ax-tag ax-success">操作成功！<i></i></span>
                                <span class="ax-tag ax-danger">很危险！<i></i></span>
                                <a href="###" class="ax-tag ax-warning">提示注意！<i></i></a>
                                <a href="###" class="ax-tag ax-ad">这是一个广告！<i></i></a>
                                <a href="###" class="ax-tag ax-info">名词解释<i></i></a>
                                <a href="###" class="ax-tag ax-light">浅灰色文字提示<i></i></a>

在ax-tag尾部加入<s></s>表示另外一种关闭方式。

默认主色。浅灰色文字提示

                                <span class="ax-tag">默认<s></s></span>
                                <span class="ax-gutter-xl"></span>
                                <span class="ax-tag ax-primary">主色。<s></s></span>
                                <span class="ax-gutter-xl"></span>
                                <a href="###" class="ax-tag ax-light">浅灰色文字提示<s></s></a>