头像 Avatar

头像用于展示用户或实体的图像。

不同尺寸

<div class="ui-avatar ui-avatar-xs">XS</div>
<div class="ui-avatar ui-avatar-sm">S</div>
<div class="ui-avatar ui-avatar-md">M</div>
<div class="ui-avatar ui-avatar-lg">L</div>
<div class="ui-avatar ui-avatar-xl">XL</div>

带状态的头像

<div class="ui-avatar-wrapper">
  <div class="ui-avatar ui-avatar-md">A</div>
  <span class="ui-avatar-status online"></span>
</div>
<!-- 状态: online / away / busy / offline -->

头像组

<div class="ui-avatar-group">
  <div class="ui-avatar ui-avatar-md">A</div>
  <div class="ui-avatar ui-avatar-md">B</div>
  <div class="ui-avatar ui-avatar-md">+3</div>
</div>

API

类名	说明
.ui-avatar	头像基础类
.ui-avatar-xs/sm/md/lg/xl	头像尺寸
.ui-avatar-wrapper	头像包装器（用于状态点）
.ui-avatar-status	状态点基础类
.online/.away/.busy/.offline	状态类型
.ui-avatar-group	头像组