Avatar 头像

尺寸

ax-avatar表示填充头像,头像无论大小都会填满整个头像区域,而且居中显示。框架一共预设了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-avatar ax-xxs" style="background-image: url(https://src.axui.cn/examples/images/head01.jpg)"></a>
                                <a href="###" class="ax-avatar ax-xs" style="background-image: url(https://src.axui.cn/examples/images/head02.jpg)"></a>
                                <a href="###" class="ax-avatar ax-sm" style="background-image: url(https://src.axui.cn/examples/images/head03.jpg)"></a>
                                <a href="###" class="ax-avatar ax-md" style="background-image: url(https://src.axui.cn/examples/images/head04.jpg)"></a>
                                <a href="###" class="ax-avatar" style="background-image: url(https://src.axui.cn/examples/images/head05.jpg)"></a>
                                <a href="###" class="ax-avatar ax-lg" style="background-image: url(https://src.axui.cn/examples/images/head06.jpg)"></a>
                                <a href="###" class="ax-avatar ax-xl" style="background-image: url(https://src.axui.cn/examples/images/head07.jpg)"></a>
                                <a href="###" class="ax-avatar ax-xxl" style="background-image: url(https://src.axui.cn/examples/images/head08.jpg)"></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-avatar ax-xxs" style="background-image: url(https://src.axui.cn/examples/images/head01.jpg)"></a>
                                <a href="###" class="ax-avatar ax-xs" style="background-image: url(https://src.axui.cn/examples/images/head02.jpg)"></a>
                                <a href="###" class="ax-avatar ax-sm" style="background-image: url(https://src.axui.cn/examples/images/head03.jpg)"></a>
                                <a href="###" class="ax-avatar ax-md" style="background-image: url(https://src.axui.cn/examples/images/head04.jpg)"></a>
                                <a href="###" class="ax-avatar" style="background-image: url(https://src.axui.cn/examples/images/head05.jpg)"></a>
                                <a href="###" class="ax-avatar ax-lg" style="background-image: url(https://src.axui.cn/examples/images/head06.jpg)"></a>
                                <a href="###" class="ax-avatar ax-xl" style="background-image: url(https://src.axui.cn/examples/images/head07.jpg)"></a>
                                <a href="###" class="ax-avatar ax-xxl" style="background-image: url(https://src.axui.cn/examples/images/head08.jpg)"></a>
                        

预加载

为了提高用户体验,可另增一个加载背景图片loading.svg,演示效果如下:

                            <a href="###" class="ax-avatar ax-xxs" style="background-image: url(https://src.axui.cn/examples/images/head01.jpg),url(https://src.axui.cn/src/images/loading.svg)"></a>
                            <a href="###" class="ax-avatar ax-xs" style="background-image: url(https://src.axui.cn/examples/images/head02.jpg),url(https://src.axui.cn/src/images/loading.svg)"></a>
                            <a href="###" class="ax-avatar ax-sm" style="background-image: url(),url(https://src.axui.cn/src/images/loading.svg)"></a>
                            <a href="###" class="ax-avatar ax-md" style="background-image: url(https://src.axui.cn/examples/images/head04.jpg),url(https://src.axui.cn/src/images/loading.svg)"></a>
                            <a href="###" class="ax-avatar" style="background-image: url(),url(https://src.axui.cn/src/images/loading.svg)"></a>
                            <a href="###" class="ax-avatar ax-lg" style="background-image: url(https://src.axui.cn/examples/images/head06.jpg),url(https://src.axui.cn/src/images/loading.svg)"></a>
                            <a href="###" class="ax-avatar ax-xl" style="background-image: url(),url(https://src.axui.cn/src/images/loading.svg)"></a>
                            <a href="###" class="ax-avatar ax-xxl" style="background-image: url(https://src.axui.cn/examples/images/head08.jpg),url(https://src.axui.cn/src/images/loading.svg)"></a>
                        

圆形头像

ax-round样式表示使用圆形的头像,演示效果如下:

                            <a href="###" class="ax-avatar ax-xxs ax-round" style="background-image: url(https://src.axui.cn/examples/images/head01.jpg)"></a>
                            <a href="###" class="ax-avatar ax-xs ax-round" style="background-image: url(https://src.axui.cn/examples/images/head02.jpg)"></a>
                            <a href="###" class="ax-avatar ax-sm ax-round" style="background-image: url(https://src.axui.cn/examples/images/head03.jpg)"></a>
                            <a href="###" class="ax-avatar ax-md ax-round" style="background-image: url(https://src.axui.cn/examples/images/head04.jpg)"></a>
                            <a href="###" class="ax-avatar ax-round" style="background-image: url(https://src.axui.cn/examples/images/head05.jpg)"></a>
                            <a href="###" class="ax-avatar ax-lg ax-round" style="background-image: url(https://src.axui.cn/examples/images/head06.jpg)"></a>
                            <a href="###" class="ax-avatar ax-xl ax-round" style="background-image: url(https://src.axui.cn/examples/images/head07.jpg)"></a>
                            <a href="###" class="ax-avatar ax-xxl ax-round" style="background-image: url(https://src.axui.cn/examples/images/head08.jpg)"></a>
                        

方形头像

ax-square样式表示使用方形的头像,演示效果如下:

                            <a href="###" class="ax-avatar ax-xxs ax-square" style="background-image: url(https://src.axui.cn/examples/images/head01.jpg)"></a>
                            <a href="###" class="ax-avatar ax-xs ax-square" style="background-image: url(https://src.axui.cn/examples/images/head02.jpg)"></a>
                            <a href="###" class="ax-avatar ax-sm ax-square" style="background-image: url(https://src.axui.cn/examples/images/head03.jpg)"></a>
                            <a href="###" class="ax-avatar ax-md ax-square" style="background-image: url(https://src.axui.cn/examples/images/head04.jpg)"></a>
                            <a href="###" class="ax-avatar ax-round" style="background-image: url(https://src.axui.cn/examples/images/head05.jpg)"></a>
                            <a href="###" class="ax-avatar ax-lg ax-square" style="background-image: url(https://src.axui.cn/examples/images/head06.jpg)"></a>
                            <a href="###" class="ax-avatar ax-xl ax-square" style="background-image: url(https://src.axui.cn/examples/images/head07.jpg)"></a>
                            <a href="###" class="ax-avatar ax-xxl ax-square" style="background-image: url(https://src.axui.cn/examples/images/head08.jpg)"></a>

                        

默认头像

src/images/default-head.jpg是框架的默认头像,演示效果如下:

                            <a href="###" class="ax-avatar ax-xxs" style="background-image: url(https://src.axui.cn/src/images/default-head.jpg)"></a>
                            <a href="###" class="ax-avatar ax-xs" style="background-image: url(https://src.axui.cn/src/images/default-head.jpg)"></a>
                            <a href="###" class="ax-avatar ax-sm" style="background-image: url(https://src.axui.cn/src/images/default-head.jpg)"></a>
                            <a href="###" class="ax-avatar ax-md" style="background-image: url(https://src.axui.cn/src/images/default-head.jpg)"></a>
                            <a href="###" class="ax-avatar" style="background-image: url(https://src.axui.cn/src/images/default-head.jpg)"></a>
                            <a href="###" class="ax-avatar ax-lg" style="background-image: url(https://src.axui.cn/src/images/default-head.jpg)"></a>
                            <a href="###" class="ax-avatar ax-xl" style="background-image: url(https://src.axui.cn/src/images/default-head.jpg)"></a>
                            <a href="###" class="ax-avatar ax-xxl" style="background-image: url(https://src.axui.cn/src/images/default-head.jpg)"></a>
                        

文字头像

当系统没有配置用户头像可以使用姓名的头字母代替头像。

                            <a href="###" class="ax-avatar ax-xs ax-bg-primary">BI</a>
                            <a href="###" class="ax-avatar ax-sm ax-bg-danger">SO</a>
                            <a href="###" class="ax-avatar ax-md ax-bg-secondary">MX</a>
                            <a href="###" class="ax-avatar ax-bg-warning">YO</a>
                            <a href="###" class="ax-avatar ax-lg ax-bg-ad">TA</a>
                            <a href="###" class="ax-avatar ax-xl ax-bg-info">VA</a>
                            <a href="###" class="ax-avatar ax-xxl ax-bg-title">TR</a>
                        

使用ax-bglit-*表示浅色背景的字母头像。

N V A T R T A R
                            <a href="###" class="ax-avatar ax-xs ax-bglit-primary">V</a>
                            <a href="###" class="ax-avatar ax-sm ax-bglit-danger">A</a>
                            <a href="###" class="ax-avatar ax-md ax-bglit-secondary">T</a>
                            <a href="###" class="ax-avatar ax-bglit-warning">R</a>
                            <a href="###" class="ax-avatar ax-lg ax-bglit-ad">T</a>
                            <a href="###" class="ax-avatar ax-xl ax-bglit-info">A</a>
                            <a href="###" class="ax-avatar ax-xxl ax-bglit-title">R</a>
                        

红点

ax-dotax-badge分别表示红点和信息泡,演示效果如下:

2 1 15 10+
                            <a href="###" class="ax-avatar ax-xxs" style="background-image: url(https://src.axui.cn/examples/images/head01.jpg)"><i class="ax-dot"></i></a>
                            <a href="###" class="ax-avatar ax-xs" style="background-image: url(https://src.axui.cn/examples/images/head02.jpg)"><i class="ax-dot"></i></a>
                            <a href="###" class="ax-avatar ax-sm" style="background-image: url(https://src.axui.cn/examples/images/head03.jpg)"><i class="ax-badge">2</i></a>
                            <a href="###" class="ax-avatar ax-md" style="background-image: url(https://src.axui.cn/examples/images/head04.jpg)"><i class="ax-dot"></i></a>
                            <a href="###" class="ax-avatar" style="background-image: url(https://src.axui.cn/examples/images/head05.jpg)"><i class="ax-badge">1</i></a>
                            <a href="###" class="ax-avatar ax-lg" style="background-image: url(https://src.axui.cn/examples/images/head06.jpg)"><i class="ax-badge">15</i></a>
                            <a href="###" class="ax-avatar ax-xl" style="background-image: url(https://src.axui.cn/examples/images/head07.jpg)"><i class="ax-dot"></i></a>
                            <a href="###" class="ax-avatar ax-xxl" style="background-image: url(https://src.axui.cn/examples/images/head08.jpg)"><i class="ax-badge">10+</i></a>