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）的填充头像

1<a href="###" class="ax-avatar ax-xxs"><img src="https://src.axui.cn/v2.0/public/images/head01.jpg"/></a>
2<a href="###" class="ax-avatar ax-xs"><img src="https://src.axui.cn/v2.0/public/images/head02.jpg"/></a>
3<a href="###" class="ax-avatar ax-sm"><img src="https://src.axui.cn/v2.0/public/images/head03.jpg"/></a>
4<a href="###" class="ax-avatar ax-md"><img src="https://src.axui.cn/v2.0/public/images/head04.jpg"/></a>
5<a href="###" class="ax-avatar"><img src="https://src.axui.cn/v2.0/public/images/head05.jpg"/></a>
6<a href="###" class="ax-avatar ax-lg"><img src="https://src.axui.cn/v2.0/public/images/head06.jpg"/></a>
7<a href="###" class="ax-avatar ax-xl"><img src="https://src.axui.cn/v2.0/public/images/head07.jpg"/></a>
8<a href="###" class="ax-avatar ax-xxl"><img src="https://src.axui.cn/v2.0/public/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的圆角。

1<a href="###" class="ax-avatar ax-xl ax-radius-xxs"><img src="https://src.axui.cn/v2.0/public/images/head01.jpg"/></a>
2<a href="###" class="ax-avatar ax-xl ax-radius-xs"><img src="https://src.axui.cn/v2.0/public/images/head02.jpg"/></a>
3<a href="###" class="ax-avatar ax-xl ax-radius-sm"><img src="https://src.axui.cn/v2.0/public/images/head03.jpg"/></a>
4<a href="###" class="ax-avatar ax-xl ax-radius-md"><img src="https://src.axui.cn/v2.0/public/images/head04.jpg"/></a>
5<a href="###" class="ax-avatar ax-xl ax-radius-lg"><img src="https://src.axui.cn/v2.0/public/images/head05.jpg"/></a>
6<a href="###" class="ax-avatar ax-xl ax-radius-xl"><img src="https://src.axui.cn/v2.0/public/images/head06.jpg"/></a>
7<a href="###" class="ax-avatar ax-xl ax-radius-xxl"><img src="https://src.axui.cn/v2.0/public/images/head07.jpg"/></a>

预加载

如果使用了data-src属性表示预加载真实图片，此时如果src不为空则会显示loading状态，如果src为空则不会显示任何内容。以下示例中的blank.svg是透明的填充图片。

1<a href="###" class="ax-avatar ax-xxs"><img src="/v2.0/dist/images/blank.svg" data-src=""/></a>
2<a href="###" class="ax-avatar"><img src="/v2.0/dist/images/blank.svg" data-src=""/></a>
3<a href="###" class="ax-avatar ax-lg"><img src="/v2.0/dist/images/blank.svg" data-src=""/></a>
4<a href="###" class="ax-avatar ax-lg"><img src="xx" data-src=""/></a>
5<a href="###" class="ax-avatar ax-lg"><img src="" data-src=""/></a>

圆形头像

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

1<a href="###" class="ax-avatar ax-xxs ax-round"><img src="https://src.axui.cn/v2.0/public/images/head01.jpg"/></a>
2<a href="###" class="ax-avatar ax-xs ax-round"><img src="https://src.axui.cn/v2.0/public/images/head02.jpg"/></a>
3<a href="###" class="ax-avatar ax-sm ax-round"><img src="https://src.axui.cn/v2.0/public/images/head03.jpg"/></a>
4<a href="###" class="ax-avatar ax-md ax-round"><img src="https://src.axui.cn/v2.0/public/images/head04.jpg"/></a>
5<a href="###" class="ax-avatar ax-round"><img src="https://src.axui.cn/v2.0/public/images/head05.jpg"/></a>
6<a href="###" class="ax-avatar ax-lg ax-round"><img src="https://src.axui.cn/v2.0/public/images/head06.jpg"/></a>
7<a href="###" class="ax-avatar ax-xl ax-round"><img src="https://src.axui.cn/v2.0/public/images/head07.jpg"/></a>
8<a href="###" class="ax-avatar ax-xxl ax-round"><img src="https://src.axui.cn/v2.0/public/images/head08.jpg"/></a>

方形头像

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

1<a href="###" class="ax-avatar ax-xxs ax-square"><img src="https://src.axui.cn/v2.0/public/images/head01.jpg"/></a>
2<a href="###" class="ax-avatar ax-xs ax-square"><img src="https://src.axui.cn/v2.0/public/images/head02.jpg"/></a>
3<a href="###" class="ax-avatar ax-sm ax-square"><img src="https://src.axui.cn/v2.0/public/images/head03.jpg"/></a>
4<a href="###" class="ax-avatar ax-md ax-square"><img src="https://src.axui.cn/v2.0/public/images/head04.jpg"/></a>
5<a href="###" class="ax-avatar ax-square"><img src="https://src.axui.cn/v2.0/public/images/head05.jpg"/></a>
6<a href="###" class="ax-avatar ax-lg ax-square"><img src="https://src.axui.cn/v2.0/public/images/head06.jpg"/></a>
7<a href="###" class="ax-avatar ax-xl ax-square"><img src="https://src.axui.cn/v2.0/public/images/head07.jpg"/></a>
8<a href="###" class="ax-avatar ax-xxl ax-square"><img src="https://src.axui.cn/v2.0/public/images/head08.jpg"/></a>

默认头像

dist/images/avatar.svg是框架的默认头像，演示效果如下：

1<a href="###" class="ax-avatar ax-xxs"></a>
2<a href="###" class="ax-avatar ax-xs"></a>
3<a href="###" class="ax-avatar ax-sm"></a>
4<a href="###" class="ax-avatar ax-md"></a>
5<a href="###" class="ax-avatar"></a>
6<a href="###" class="ax-avatar ax-lg"></a>
7<a href="###" class="ax-avatar ax-xl"></a>
8<a href="###" class="ax-avatar ax-xxl"></a>

文字头像

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

BI SO MX YO TA VA TR

1<a href="###" class="ax-avatar ax-xs ax-bg-primary">BI</a>
2<a href="###" class="ax-avatar ax-sm ax-bg-error">SO</a>
3<a href="###" class="ax-avatar ax-md ax-bg-secondary">MX</a>
4<a href="###" class="ax-avatar ax-bg-warning">YO</a>
5<a href="###" class="ax-avatar ax-lg ax-bg-question">TA</a>
6<a href="###" class="ax-avatar ax-xl ax-bg-info">VA</a>
7<a href="###" class="ax-avatar ax-xxl ax-bg-text">TR</a>

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

N V A T R T A R

1<a href="###" class="ax-avatar ax-xs ax-bglit-primary">V</a>
2<a href="###" class="ax-avatar ax-sm ax-bglit-error">A</a>
3<a href="###" class="ax-avatar ax-md ax-">T</a>
4<a href="###" class="ax-avatar ax-bglit-warning">R</a>
5<a href="###" class="ax-avatar ax-lg ax-bglit-question">T</a>
6<a href="###" class="ax-avatar ax-xl ax-bglit-info">A</a>
7<a href="###" class="ax-avatar ax-xxl ax-bglit-text">R</a>

红点

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

10+

01<a href="###" class="ax-avatar ax-xxs"><i class="ax-dot"></i><img src="https://src.axui.cn/v2.0/public/images/head01.jpg"/></a>
02<span class="ax-gutter-md"></span>
03<a href="###" class="ax-avatar ax-xs"><i class="ax-dot"></i><img src="https://src.axui.cn/v2.0/public/images/head02.jpg"/></a>
04<span class="ax-gutter-md"></span>
05<a href="###" class="ax-avatar ax-sm"><i class="ax-badge">2</i><img src="https://src.axui.cn/v2.0/public/images/head03.jpg"/></a>
06<span class="ax-gutter-md"></span>
07<a href="###" class="ax-avatar ax-md"><i class="ax-dot"></i><img src="https://src.axui.cn/v2.0/public/images/head04.jpg"/></a>
08<span class="ax-gutter-md"></span>
09<a href="###" class="ax-avatar"><i class="ax-badge">1</i><img src="https://src.axui.cn/v2.0/public/images/head05.jpg"/></a>
10<span class="ax-gutter-md"></span>
11<a href="###" class="ax-avatar ax-lg"><i class="ax-badge">15</i><img src="https://src.axui.cn/v2.0/public/images/head06.jpg"/></a>
12<span class="ax-gutter-md"></span>
13<a href="###" class="ax-avatar ax-xl"><i class="ax-dot"></i><img src="https://src.axui.cn/v2.0/public/images/head07.jpg"/></a>
14<span class="ax-gutter-md"></span>
15<a href="###" class="ax-avatar ax-xxl"><i class="ax-badge">10+</i><img src="https://src.axui.cn/v2.0/public/images/head08.jpg"/></a>

遮罩

在ax-avatar标签中使用count属性标签可实现遮罩效果并可填入一行或多行文字。

已上传
点击更换头像

1<a href="###" class="ax-avatar ax-xxs"><img src="https://src.axui.cn/v2.0/public/images/head01.jpg"/><i count>+2</i></a>
2<a href="###" class="ax-avatar ax-sm"><img src="https://src.axui.cn/v2.0/public/images/head02.jpg"/><i count>+2</i></a>
3<a href="###" class="ax-avatar"><img src="https://src.axui.cn/v2.0/public/images/head03.jpg"/><i count>+2</i></a>
4<a href="###" class="ax-avatar ax-lg"><img src="https://src.axui.cn/v2.0/public/images/head04.jpg"/><i class="ax-iconfont ax-icon-trash" count></i></a>
5<a href="###" class="ax-avatar ax-xxl"><img src="https://src.axui.cn/v2.0/public/images/head05.jpg"/><i count>已上传<br>点击更换头像</i></a>

头像合集

ax-avatars标签包裹多个avatar可得到层叠的头像。

+10

01<span class="ax-avatars">
02    <span class="ax-avatar ax-sm"><img src="https://src.axui.cn/v2.0/public/images/head01.jpg" /></span>
03    <span class="ax-avatar ax-sm"><img src="https://src.axui.cn/v2.0/public/images/head02.jpg" /></span>
04    <span class="ax-avatar ax-sm"><img src="https://src.axui.cn/v2.0/public/images/head03.jpg" /></span>
05    <span class="ax-avatar ax-sm"><img src="https://src.axui.cn/v2.0/public/images/head04.jpg" /></span>
06    <span class="ax-avatar ax-sm"><img src="https://src.axui.cn/v2.0/public/images/head05.jpg" /><i count>+10</i></span>
07</span>
08<div class="ax-break"></div>
09<span class="ax-avatars">
10    <span class="ax-avatar"><img src="https://src.axui.cn/v2.0/public/images/head01.jpg" /></span>
11    <span class="ax-avatar"><img src="https://src.axui.cn/v2.0/public/images/head02.jpg" /></span>
12    <span class="ax-avatar"><img src="https://src.axui.cn/v2.0/public/images/head03.jpg" /></span>
13    <span class="ax-avatar"><img src="https://src.axui.cn/v2.0/public/images/head04.jpg" /></span>
14    <span class="ax-avatar"><img src="https://src.axui.cn/v2.0/public/images/head05.jpg" /><i count>+10</i></span>
15</span>
16<div class="ax-break"></div>
17<span class="ax-avatars">
18    <span class="ax-avatar ax-lg"><img src="https://src.axui.cn/v2.0/public/images/head01.jpg" /></span>
19    <span class="ax-avatar ax-lg"><img src="https://src.axui.cn/v2.0/public/images/head02.jpg" /></span>
20    <span class="ax-avatar ax-lg"><img src="https://src.axui.cn/v2.0/public/images/head03.jpg" /></span>
21    <span class="ax-avatar ax-lg"><img src="https://src.axui.cn/v2.0/public/images/head04.jpg" /></span>
22    <span class="ax-avatar ax-lg"><img src="https://src.axui.cn/v2.0/public/images/head05.jpg" /><i count>+10</i></span>
23</span>

如果需要调整覆盖方向，需要手动给ax-avatar标签追加z-index样式。

1<span class="ax-avatars">
2    <span class="ax-avatar" style="z-index:10;"><img src="https://src.axui.cn/v2.0/public/images/head01.jpg" /></span>
3    <span class="ax-avatar" style="z-index:9;"><img src="https://src.axui.cn/v2.0/public/images/head02.jpg" /></span>
4    <span class="ax-avatar" style="z-index:8;"><img src="https://src.axui.cn/v2.0/public/images/head03.jpg" /></span>
5    <span class="ax-avatar" style="z-index:7;"><img src="https://src.axui.cn/v2.0/public/images/head04.jpg" /></span>
6    <span class="ax-avatar" style="z-index:6;"><img src="https://src.axui.cn/v2.0/public/images/head05.jpg" /></span>
7    <span class="ax-avatar" style="z-index:5;"><img src="https://src.axui.cn/v2.0/public/images/head06.jpg" /></span>
8</span>

lazyload

可配合axLazyload插件使用，其原理是先使用loading图片载入，等img标签进入视窗后将data-src中的真实图片地址替换src值。关于插件详细用法请点击这里。

1<a href="###" class="ax-avatar"><img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/head01.jpg" axLazyLoad/></a>
2<p></p><p></p><p></p>
3<a href="###" class="ax-avatar ax-lg"><img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/head02.jpg" axLazyLoad/></a>
4<p></p><p></p><p></p>
5<a href="###" class="ax-avatar ax-xxl"><img src="/v2.0/dist/images/blank.svg" data-src="https://src.axui.cn/v2.0/public/images/head03.jpg" axLazyLoad/></a>