Buoy 浮标

使用说明

有别于badge徽章、tag标签和sign标记,buoy浮标是结合了指示+数据统计的功能。使用ax-buoy即可表示一个普通的浮标,可使用a或者span包裹。注意指示文字和统计文字均用i标签包裹。

访问256 点击94
                                <span class="ax-buoy"><i>访问</i><i>256</i></span>
                                <a href="###" class="ax-buoy"><i>点击</i><i>94</i></a>
                                

颜色

本框架一共定义了9种颜色浮标,分别是ax-primary,ax-secondary,ax-success,ax-danger,ax-warning,ax-info,ax-ad,ax-light(默认),ax-dark。默认是浅色浮标。直接追加类即可。

访问256 访问256 访问256 访问256 访问256 访问256 访问256 访问256 访问256
                                <span class="ax-buoy"><i>访问</i><i>256</i></span>
                                <span class="ax-buoy ax-primary"><i>访问</i><i>256</i></span>
                                <span class="ax-buoy ax-success"><i>访问</i><i>256</i></span>
                                <span class="ax-buoy ax-danger"><i>访问</i><i>256</i></span>
                                <span class="ax-buoy ax-warning"><i>访问</i><i>256</i></span>
                                <span class="ax-buoy ax-info"><i>访问</i><i>256</i></span>
                                <span class="ax-buoy ax-ad"><i>访问</i><i>256</i></span>
                                <span class="ax-buoy ax-light"><i>访问</i><i>256</i></span>
                                <span class="ax-buoy ax-dark"><i>访问</i><i>256</i></span>
                                

图标

图标写在指示标签内,可以是iconfont也可以是svg。如果仅仅显示图标请在第一个i标签追加ax-icon类。

访问256 访问256 256
                                <span class="ax-buoy"><i><s class="ax-iconfont ax-icon-star"></s>访问</i><i>256</i></span>
                                <span class="ax-buoy"><i><svg class="ax-svg"><use xlink:href="#ax-icon-star"/></svg>访问</i><i>256</i></span>
                                <span class="ax-buoy ax-primary"><i class="ax-icon"><s class="ax-iconfont ax-icon-star"></s></i><i>256</i></span>
                                

下拉菜单

如果需要下拉菜单指示箭头可对ax-buoy追加ax-more,将在指示文字尾部自动添加下拉箭头。

访问256 访问256
                                <span class="ax-buoy ax-primary ax-more"><i>访问</i><i>256</i></span>
                                <span class="ax-buoy ax-more"><i><s class="ax-iconfont ax-icon-star-fill"></s>访问</i><i>256</i></span>
                                

尺寸

本框架一共定义了3种尺寸,默认是ax-md,即高22px;其他尺寸有ax-sm:18px;ax-lg:28px。

访问256 访问256 访问256
                                <span class="ax-buoy ax-sm"><i><s class="ax-iconfont ax-icon-star-fill"></s>访问</i><i>256</i></span>
                                <span class="ax-buoy ax-md"><i><s class="ax-iconfont ax-icon-star-fill"></s>访问</i><i>256</i></span>
                                <span class="ax-buoy ax-lg"><i><s class="ax-iconfont ax-icon-star-fill"></s>访问</i><i>256</i></span>
                                

阴影

本框架一共定义了5种阴影,即:ax-shadow,ax-shadow-border,ax-shadow-light,ax-shadow-dark,ax-shadow-cloud,详细请点击这里。因为使用阴影会导致边缘模糊,可以配合使用ax-borderless以去掉边框。

访问256 访问256 访问256
                                <span class="ax-buoy ax-shadow ax-lg"><i><s class="ax-iconfont ax-icon-star-fill"></s>访问</i><i>256</i></span>
                                <span class="ax-buoy ax-shadow-border ax-borderless  ax-lg"><i><s class="ax-iconfont ax-icon-star-fill"></s>访问</i><i>256</i></span>
                                <span class="ax-buoy ax-primary ax-shadow  ax-lg"><i><s class="ax-iconfont ax-icon-star-fill"></s>访问</i><i>256</i></span>
                                

反向

对浮标追加ax-reverse即可使用反向风格,即彩色背景将作用于右侧统计数字部分。

访问256 访问256 256
                                <span class="ax-buoy ax-reverse ax-lg"><i><s class="ax-iconfont ax-icon-star-fill"></s>访问</i><i>256</i></span>
                                <span class="ax-buoy ax-primary ax-reverse  ax-lg"><i><s class="ax-iconfont ax-icon-star-fill"></s>访问</i><i>256</i></span>
                                <span class="ax-buoy ax-warning ax-reverse  ax-lg"><i class="ax-icon"><s class="ax-iconfont ax-icon-star-fill"></s></i><i>256</i></span>