seatable-ui/site/views/avatar.html

Basic style of dtable related products

<div>

  <div class="example">
    <h3>不同尺寸的用户头像</h3>
    <img class="avatar avatar-sm" src="https://dev.seafile.com/seahub/media/avatars/default.png" />
    <img class="avatar avatar-md" src="https://dev.seafile.com/seahub/media/avatars/default.png" />
    <img class="avatar avatar-lg" src="https://dev.seafile.com/seahub/media/avatars/default.png" />
    <img class="avatar avatar-xl" src="https://dev.seafile.com/seahub/media/avatars/default.png" />
    <img class="avatar avatar-xxl" src="https://dev.seafile.com/seahub/media/avatars/default.png" />
  </div>

  <div class="example">
    <h3>用户头像状态</h3>
    <div class="position-relative w-50">
      <img class="avatar avatar-xxl" src="https://dev.seafile.com/seahub/media/avatars/default.png" />
      <div class="avatar-status">Status Indicator</div>
    </div>
  </div>

  <div class="example">
    <h3>用户头像占位符</h3>
    <div class="position-relative">
      <img class="avatar avatar-xxl" src="https://dev.seafile.com/seahub/media/avatars/default.png" />
      <div class="avatar-placeholder">Avatar Placeholder</div>
    </div>
  </div>

  <div class="example">
    <h3>用户头像列表（默认）</h3>
    <div class="avatar-list">
      <img class="avatar" src="https://dev.seafile.com/seahub/media/avatars/default.png" />
      <img class="avatar" src="https://dev.seafile.com/seahub/media/avatars/default.png" />
      <img class="avatar" src="https://dev.seafile.com/seahub/media/avatars/default.png" />
    </div>
  </div>

  <div class="example">
    <h3>用户头像列表（紧凑）</h3>
    <div class="avatar-list-stacked">
      <img class="avatar" src="https://dev.seafile.com/seahub/media/avatars/default.png" />
      <img class="avatar" src="https://dev.seafile.com/seahub/media/avatars/default.png" />
      <img class="avatar" src="https://dev.seafile.com/seahub/media/avatars/default.png" />
    </div>
  </div>
</div>