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>