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

预加载

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

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

圆形头像

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

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

方形头像

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

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

文字头像

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

BI SO MX YO TA VA TR

                            <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-dot和ax-badge分别表示红点和信息泡，演示效果如下：

2 1 15 10+

                            <a href="###" class="ax-avatar ax-xxs" style="background-image: url(https://src.axui.cn/v1.0/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/v1.0/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/v1.0/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/v1.0/examples/images/head04.jpg)"><i class="ax-dot"></i></a>
                            <a href="###" class="ax-avatar" style="background-image: url(https://src.axui.cn/v1.0/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/v1.0/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/v1.0/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/v1.0/examples/images/head08.jpg)"><i class="ax-badge">10+</i></a>