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/examples/images/sign01.png" /></a>
                                <a href="###" class="ax-sign ax-xs"><img src="https://src.axui.cn/examples/images/sign01.png" /></a>
                                <a href="###" class="ax-sign ax-sm"><img src="https://src.axui.cn/examples/images/sign01.png" /></a>
                                <a href="###" class="ax-sign ax-md"><img src="https://src.axui.cn/examples/images/sign01.png" /></a>
                                <a href="###" class="ax-sign"><img src="https://src.axui.cn/examples/images/sign01.png" /></a>
                                <a href="###" class="ax-sign ax-lg"><img src="https://src.axui.cn/examples/images/sign01.png" /></a>
                                <a href="###" class="ax-sign ax-xl"><img src="https://src.axui.cn/examples/images/sign01.png" /></a>
                                <a href="###" class="ax-sign ax-xxl"><img src="https://src.axui.cn/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-dotax-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>