v1.0核心
v1.0实例
v2.0

Sign 标志

尺寸

ax-sign表示图标标志，默认使用ax-iconfont字体图标。标志无论大小都会居中显示。框架一共预设了7个尺寸供使用，默认是ax-md，具体说明如下：

  • ax-xxs 宽高为22px（小按钮高度）的图标标志
  • ax-xs 宽高为28px（正文行高）的图标标志
  • ax-sm 宽高为38px（input的高度）的图标标志
  • ax-md 宽高为44px的图标标志
  • ax-lg 宽高为56px（28px*2）的图标标志
  • ax-xl 宽高为84px（28px*3）的图标标志
  • ax-xxl 宽高为112px（28px*4）的图标标志
                                <a href="###" class="ax-sign ax-xxs"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-xs"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-sm"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-md"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-lg"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-xl"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-xxl"><i class="ax-iconfont ax-icon-people-fill"></i></a>

SVG

ax-sign可内置svg图标，关于svg图标的使用方法详见这里。

                                <a href="###" class="ax-sign ax-xxs"><svg class="ax-svg"><use xlink:href="#ax-icon-check-s-fill"/></svg></a>
                                <a href="###" class="ax-sign ax-xs"><svg class="ax-svg"><use xlink:href="#ax-icon-check-s-fill"/></svg></a>
                                <a href="###" class="ax-sign ax-sm"><svg class="ax-svg"><use xlink:href="#ax-icon-check-s-fill"/></svg></a>
                                <a href="###" class="ax-sign ax-md"><svg class="ax-svg"><use xlink:href="#ax-icon-check-s-fill"/></svg></a>
                                <a href="###" class="ax-sign"><svg class="ax-svg"><use xlink:href="#ax-icon-check-s-fill"/></svg></a>
                                <a href="###" class="ax-sign ax-lg"><svg class="ax-svg"><use xlink:href="#ax-icon-check-s-fill"/></svg></a>
                                <a href="###" class="ax-sign ax-xl"><svg class="ax-svg"><use xlink:href="#ax-icon-check-s-fill"/></svg></a>
                                <a href="###" class="ax-sign ax-xxl"><svg class="ax-svg"><use xlink:href="#ax-icon-check-s-fill"/></svg></a>

图片

ax-sign可内置png图片，框架对标志内的图片已经控制了大小并居中对齐。

                                <a href="###" class="ax-sign ax-xxs"><img src="https://src.axui.cn/v1.0/examples/images/sign01.png" /></a>
                                <a href="###" class="ax-sign ax-xs"><img src="https://src.axui.cn/v1.0/examples/images/sign01.png" /></a>
                                <a href="###" class="ax-sign ax-sm"><img src="https://src.axui.cn/v1.0/examples/images/sign01.png" /></a>
                                <a href="###" class="ax-sign ax-md"><img src="https://src.axui.cn/v1.0/examples/images/sign01.png" /></a>
                                <a href="###" class="ax-sign"><img src="https://src.axui.cn/v1.0/examples/images/sign01.png" /></a>
                                <a href="###" class="ax-sign ax-lg"><img src="https://src.axui.cn/v1.0/examples/images/sign01.png" /></a>
                                <a href="###" class="ax-sign ax-xl"><img src="https://src.axui.cn/v1.0/examples/images/sign01.png" /></a>
                                <a href="###" class="ax-sign ax-xxl"><img src="https://src.axui.cn/v1.0/examples/images/sign01.png" /></a>

不同圆角

ax-radius-*表示不同圆角，数值与ax-radius参数一致，详见这里。

  • ax-radius/ax-radius-xxs，3px的圆角。
  • ax-radius-xs，6px的圆角。
  • ax-radius-sm，9px的圆角。
  • ax-radius-md，12px的圆角。
  • ax-radius-lg，18px的圆角。
  • ax-radius-xl，24px的圆角。
  • ax-radius-xxl，30px的圆角。
                                <a href="###" class="ax-sign ax-xl ax-radius-xxs"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-xl ax-radius-xs"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-xl ax-radius-sm"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-xl ax-radius-md"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-xl ax-radius-lg"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-xl ax-radius-xl"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-xl ax-radius-xxl"><i class="ax-iconfont ax-icon-people-fill"></i></a>

圆形标志

追加ax-round类表示使用圆形的标志，演示效果如下：

                            <a href="###" class="ax-sign ax-xxs ax-round"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                            <a href="###" class="ax-sign ax-xs ax-round"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                            <a href="###" class="ax-sign ax-sm ax-round"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                            <a href="###" class="ax-sign ax-md ax-round"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                            <a href="###" class="ax-sign ax-round"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                            <a href="###" class="ax-sign ax-lg ax-round"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                            <a href="###" class="ax-sign ax-xl ax-round"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                            <a href="###" class="ax-sign ax-xxl ax-round"><i class="ax-iconfont ax-icon-people-fill"></i></a>

方形标志

追加ax-square类表示使用方形的标志，演示效果如下：

                            <a href="###" class="ax-sign ax-xxs ax-square"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                            <a href="###" class="ax-sign ax-xs ax-square"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                            <a href="###" class="ax-sign ax-sm ax-square"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                            <a href="###" class="ax-sign ax-md ax-square"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                            <a href="###" class="ax-sign ax-square"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                            <a href="###" class="ax-sign ax-lg ax-square"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                            <a href="###" class="ax-sign ax-xl ax-square"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                            <a href="###" class="ax-sign ax-xxl ax-square"><i class="ax-iconfont ax-icon-people-fill"></i></a>

无边标志

默认是有边标志，追加ax-borderless类表示使用无边的标志，演示效果如下：

                                <a href="###" class="ax-sign ax-xxs ax-borderless"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-xs ax-borderless"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-sm ax-borderless"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-md ax-borderless"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-borderless"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-lg ax-borderless"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-xl ax-borderless"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-xxl ax-borderless"><i class="ax-iconfont ax-icon-people-fill"></i></a>

颜色

默认是中灰色标志，对ax-sign追加颜色类即可实现多色标志，可使用的颜色有：ax-color-primary、ax-color-secondary、ax-color-success、ax-color-danger、ax-color-warning、ax-color-info、ax-color-ad、ax-color-title，ax-color-des(默认)和ax-color-ignore。关于颜色可详见这里 。

                                <a href="###" class="ax-sign"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-color-primary"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-color-secondary"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-color-success"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-color-danger"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-color-warning"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-color-info"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-color-ad"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-color-title"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-color-ignore"><i class="ax-iconfont ax-icon-people-fill"></i></a>

浅色填充

追加ax-bglit可实现浅灰色填充背景；追加ax-bglit-*类可实现彩色浅色填充背景，支持：ax-bglit、ax-bglit-primary、ax-bglit-secondary、ax-bglit-success、ax-bglit-danger、ax-bglit-warning、ax-bglit-info、ax-bglit-ad和ax-bglit-title(=ax-bglit默认)。关于颜色可详见这里 。

                                <a href="###" class="ax-sign ax-bglit"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-bglit-primary"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-bglit-secondary"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-bglit-success"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-bglit-danger"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-bglit-info"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-bglit-warning"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-bglit-ad"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-bglit-title"><i class="ax-iconfont ax-icon-people-fill"></i></a>

深色填充

追加ax-bg可实现深灰色填充背景；追加ax-bg-*类可实现彩色深色填充背景，支持：ax-bg、ax-bg-primary、ax-bg-secondary、ax-bg-success、ax-bg-danger、ax-bg-warning、ax-bg-info、ax-bg-ad、ax-bg-title、ax-bg-des(=ax-bg默认)。关于颜色可详见这里 。

                                <a href="###" class="ax-sign ax-bg"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-bg-primary"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-bg-secondary"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-bg-success"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-bg-danger"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-bg-info"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-bg-warning"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-bg-ad"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-bg-title"><i class="ax-iconfont ax-icon-people-fill"></i></a>
                                <a href="###" class="ax-sign ax-bg-des"><i class="ax-iconfont ax-icon-people-fill"></i></a>

红点

ax-dot和ax-badge分别表示红点和信息泡，演示效果如下：

2 1 15 10+ 
                            <a href="###" class="ax-sign ax-xxs"><i class="ax-iconfont ax-icon-people-fill"></i><i class="ax-dot"></i></a>
                            <span class="ax-gutter-md"></span>
                            <a href="###" class="ax-sign ax-xs"><i class="ax-iconfont ax-icon-people-fill"></i><i class="ax-dot"></i></a>
                            <span class="ax-gutter-md"></span>
                            <a href="###" class="ax-sign ax-sm"><i class="ax-iconfont ax-icon-people-fill"></i><i class="ax-badge">2</i></a>
                            <span class="ax-gutter-md"></span>
                            <a href="###" class="ax-sign ax-md"><i class="ax-iconfont ax-icon-people-fill"></i><i class="ax-dot"></i></a>
                            <span class="ax-gutter-md"></span>
                            <a href="###" class="ax-sign"><i class="ax-iconfont ax-icon-people-fill"></i><i class="ax-badge">1</i></a>
                            <span class="ax-gutter-md"></span>
                            <a href="###" class="ax-sign ax-lg"><i class="ax-iconfont ax-icon-people-fill"></i><i class="ax-badge">15</i></a>
                            <span class="ax-gutter-md"></span>
                            <a href="###" class="ax-sign ax-bglit-primary ax-xl"><i class="ax-iconfont ax-icon-people-fill"></i><i class="ax-dot"></i></a>
                            <span class="ax-gutter-md"></span>
                            <a href="###" class="ax-sign ax-bg-primary ax-xxl "><i class="ax-iconfont ax-icon-people-fill"></i><i class="ax-badge">10+</i></a>