v3首页
v2首页
核心
实例
资源
关于
v1.0

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"><img src="https://src.axui.cn/v2.0/public/images/head01.jpg"/></a>
                                    <a href="###" class="ax-avatar ax-xs"><img src="https://src.axui.cn/v2.0/public/images/head02.jpg"/></a>
                                    <a href="###" class="ax-avatar ax-sm"><img src="https://src.axui.cn/v2.0/public/images/head03.jpg"/></a>
                                    <a href="###" class="ax-avatar ax-md"><img src="https://src.axui.cn/v2.0/public/images/head04.jpg"/></a>
                                    <a href="###" class="ax-avatar"><img src="https://src.axui.cn/v2.0/public/images/head05.jpg"/></a>
                                    <a href="###" class="ax-avatar ax-lg"><img src="https://src.axui.cn/v2.0/public/images/head06.jpg"/></a>
                                    <a href="###" class="ax-avatar ax-xl"><img src="https://src.axui.cn/v2.0/public/images/head07.jpg"/></a>
                                    <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的圆角。
                                    <a href="###" class="ax-avatar ax-xl ax-radius-xxs"><img src="https://src.axui.cn/v2.0/public/images/head01.jpg"/></a>
                                    <a href="###" class="ax-avatar ax-xl ax-radius-xs"><img src="https://src.axui.cn/v2.0/public/images/head02.jpg"/></a>
                                    <a href="###" class="ax-avatar ax-xl ax-radius-sm"><img src="https://src.axui.cn/v2.0/public/images/head03.jpg"/></a>
                                    <a href="###" class="ax-avatar ax-xl ax-radius-md"><img src="https://src.axui.cn/v2.0/public/images/head04.jpg"/></a>
                                    <a href="###" class="ax-avatar ax-xl ax-radius-lg"><img src="https://src.axui.cn/v2.0/public/images/head05.jpg"/></a>
                                    <a href="###" class="ax-avatar ax-xl ax-radius-xl"><img src="https://src.axui.cn/v2.0/public/images/head06.jpg"/></a>
                                    <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是透明的填充图片。

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

圆形头像

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

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

方形头像

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

                                <a href="###" class="ax-avatar ax-xxs ax-square"><img src="https://src.axui.cn/v2.0/public/images/head01.jpg"/></a>
                                <a href="###" class="ax-avatar ax-xs ax-square"><img src="https://src.axui.cn/v2.0/public/images/head02.jpg"/></a>
                                <a href="###" class="ax-avatar ax-sm ax-square"><img src="https://src.axui.cn/v2.0/public/images/head03.jpg"/></a>
                                <a href="###" class="ax-avatar ax-md ax-square"><img src="https://src.axui.cn/v2.0/public/images/head04.jpg"/></a>
                                <a href="###" class="ax-avatar ax-square"><img src="https://src.axui.cn/v2.0/public/images/head05.jpg"/></a>
                                <a href="###" class="ax-avatar ax-lg ax-square"><img src="https://src.axui.cn/v2.0/public/images/head06.jpg"/></a>
                                <a href="###" class="ax-avatar ax-xl ax-square"><img src="https://src.axui.cn/v2.0/public/images/head07.jpg"/></a>
                                <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是框架的默认头像，演示效果如下：

                            <a href="###" class="ax-avatar ax-xxs"></a>
                            <a href="###" class="ax-avatar ax-xs"></a>
                            <a href="###" class="ax-avatar ax-sm"></a>
                            <a href="###" class="ax-avatar ax-md"></a>
                            <a href="###" class="ax-avatar"></a>
                            <a href="###" class="ax-avatar ax-lg"></a>
                            <a href="###" class="ax-avatar ax-xl"></a>
                            <a href="###" class="ax-avatar ax-xxl"></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-error">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-question">TA</a>
                            <a href="###" class="ax-avatar ax-xl ax-bg-info">VA</a>
                            <a href="###" class="ax-avatar ax-xxl ax-bg-text">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-error">A</a>
                            <a href="###" class="ax-avatar ax-md ax-">T</a>
                            <a href="###" class="ax-avatar ax-bglit-warning">R</a>
                            <a href="###" class="ax-avatar ax-lg ax-bglit-question">T</a>
                            <a href="###" class="ax-avatar ax-xl ax-bglit-info">A</a>
                            <a href="###" class="ax-avatar ax-xxl ax-bglit-text">R</a>

红点

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

2 1 15 10+ 
                                <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>
                                <span class="ax-gutter-md"></span>
                                <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>
                                <span class="ax-gutter-md"></span>
                                <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>
                                <span class="ax-gutter-md"></span>
                                <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>
                                <span class="ax-gutter-md"></span>
                                <a href="###" class="ax-avatar"><i class="ax-badge">1</i><img src="https://src.axui.cn/v2.0/public/images/head05.jpg"/></a>
                                <span class="ax-gutter-md"></span>
                                <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>
                                <span class="ax-gutter-md"></span>
                                <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>
                                <span class="ax-gutter-md"></span>
                                <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属性标签可实现遮罩效果并可填入一行或多行文字。

+2 +2 +2 已上传
点击更换头像 
                                <a href="###" class="ax-avatar ax-xxs"><img src="https://src.axui.cn/v2.0/public/images/head01.jpg"/><i count>+2</i></a>
                                <a href="###" class="ax-avatar ax-sm"><img src="https://src.axui.cn/v2.0/public/images/head02.jpg"/><i count>+2</i></a>
                                <a href="###" class="ax-avatar"><img src="https://src.axui.cn/v2.0/public/images/head03.jpg"/><i count>+2</i></a>
                                <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>
                                <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
+10
+10 
                                    <span class="ax-avatars">
                                        <span class="ax-avatar ax-sm"><img src="https://src.axui.cn/v2.0/public/images/head01.jpg" /></span>
                                        <span class="ax-avatar ax-sm"><img src="https://src.axui.cn/v2.0/public/images/head02.jpg" /></span>
                                        <span class="ax-avatar ax-sm"><img src="https://src.axui.cn/v2.0/public/images/head03.jpg" /></span>
                                        <span class="ax-avatar ax-sm"><img src="https://src.axui.cn/v2.0/public/images/head04.jpg" /></span>
                                        <span class="ax-avatar ax-sm"><img src="https://src.axui.cn/v2.0/public/images/head05.jpg" /><i count>+10</i></span>
                                    </span>
                                    <div class="ax-break"></div>
                                    <span class="ax-avatars">
                                        <span class="ax-avatar"><img src="https://src.axui.cn/v2.0/public/images/head01.jpg" /></span>
                                        <span class="ax-avatar"><img src="https://src.axui.cn/v2.0/public/images/head02.jpg" /></span>
                                        <span class="ax-avatar"><img src="https://src.axui.cn/v2.0/public/images/head03.jpg" /></span>
                                        <span class="ax-avatar"><img src="https://src.axui.cn/v2.0/public/images/head04.jpg" /></span>
                                        <span class="ax-avatar"><img src="https://src.axui.cn/v2.0/public/images/head05.jpg" /><i count>+10</i></span>
                                    </span>
                                    <div class="ax-break"></div>
                                    <span class="ax-avatars">
                                        <span class="ax-avatar ax-lg"><img src="https://src.axui.cn/v2.0/public/images/head01.jpg" /></span>
                                        <span class="ax-avatar ax-lg"><img src="https://src.axui.cn/v2.0/public/images/head02.jpg" /></span>
                                        <span class="ax-avatar ax-lg"><img src="https://src.axui.cn/v2.0/public/images/head03.jpg" /></span>
                                        <span class="ax-avatar ax-lg"><img src="https://src.axui.cn/v2.0/public/images/head04.jpg" /></span>
                                        <span class="ax-avatar ax-lg"><img src="https://src.axui.cn/v2.0/public/images/head05.jpg" /><i count>+10</i></span>
                                    </span>

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

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

lazyload

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

                                    <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>
                                    <p></p><p></p><p></p>
                                    <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>
                                    <p></p><p></p><p></p>
                                    <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>