跳到主要内容
输入关键词开始搜索，↑ ↓ 选择，Enter 打开
没有找到匹配的文档

头像

头像的文档和示例，包括图片头像、首字母、状态指示器和头像堆叠。

层级：components
查看原文
本页目录

示例

头像用于表示用户或实体。它们可以显示图像，或在图像无法显示时显示首字母。

图片

将 .avatar 与 .avatar-img 一起用于基于图像的头像。父元素 .avatar 提供了一个方便的包装器，用于额外的头像功能，如状态指示器和堆叠。如果你只需要一个 HTML 元素，也可以单独使用 .avatar-img 类。

mdo
HTML
<span class="avatar">
  <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
</span>

当在.avatar容器内使用时，图像会填充容器，并且其大小由--avatar-size设置。单独使用时，.avatar-img会遵循其自身的width和height，因此请将它们设置为所需的大小。

mdo
HTML
<img class="avatar-img" src="/assets/img/avatar.png" alt="mdo" width="50" height="50">

首字母

使用.avatar中的文本内容作为基于首字母的头像。

AB 光盘 EF GG GH IJ 吉隆坡 MN 原作者
HTML
<span class="avatar">AB</span>
<span class="avatar theme-primary">CD</span>
<span class="avatar theme-accent">EF</span>
<span class="avatar theme-success">GG</span>
<span class="avatar theme-danger">GH</span>
<span class="avatar theme-warning">IJ</span>
<span class="avatar theme-info">KL</span>
<span class="avatar theme-inverse">MN</span>
<span class="avatar theme-secondary">OP</span>

使用.avatar-subtle来创建一个微妙的头像。

AB 光盘 EF GG GH IJ 吉隆坡 MN 原作者
HTML
<span class="avatar">AB</span>
<span class="avatar avatar-subtle theme-primary">CD</span>
<span class="avatar avatar-subtle theme-accent">EF</span>
<span class="avatar avatar-subtle theme-success">GG</span>
<span class="avatar avatar-subtle theme-danger">GH</span>
<span class="avatar avatar-subtle theme-warning">IJ</span>
<span class="avatar avatar-subtle theme-info">KL</span>
<span class="avatar avatar-subtle theme-inverse">MN</span>
<span class="avatar avatar-subtle theme-secondary">OP</span>

尺寸

头像有多种尺寸：超小、小、默认、大和超大。

mdo mdo mdo mdo mdo
HTML
<span class="avatar avatar-xs">
  <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
</span>
<span class="avatar avatar-sm">
  <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
</span>
<span class="avatar">
  <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
</span>
<span class="avatar avatar-lg">
  <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
</span>
<span class="avatar avatar-xl">
  <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
</span>

通过修改--bs-avatar-size变量来使用自定义大小。

mdo
HTML
<span class="avatar" style="--bs-avatar-size: 8rem;">
  <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
</span>

状态指示器

在头像内添加一个.avatar-status元素以显示状态指示器。每种状态都有不同的形状和颜色：

  • .status-online — 绿色圆圈
  • .status-offline — 灰色圆角方形
  • .status-busy — 红色圆角方形
  • .status-away — 黄色圆圈

因为状态完全通过颜色和形状传达，所以给每个.avatar-status一个role="img"和一个aria-label（例如 Online），以便辅助技术可以进行提示。

mdo mdo mdo mdo
HTML
<span class="avatar">
  <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  <span class="avatar-status status-online" role="img" aria-label="Online"></span>
</span>
<span class="avatar">
  <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  <span class="avatar-status status-offline" role="img" aria-label="Offline"></span>
</span>
<span class="avatar">
  <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  <span class="avatar-status status-busy" role="img" aria-label="Busy"></span>
</span>
<span class="avatar">
  <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  <span class="avatar-status status-away" role="img" aria-label="Away"></span>
</span>

带尺寸的状态

状态指示器的尺寸会随着头像大小而变化。

mdo mdo mdo mdo mdo
HTML
<span class="avatar avatar-xs">
  <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  <span class="avatar-status status-online" role="img" aria-label="Online"></span>
</span>
<span class="avatar avatar-sm">
  <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  <span class="avatar-status status-online" role="img" aria-label="Online"></span>
</span>
<span class="avatar">
  <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  <span class="avatar-status status-online" role="img" aria-label="Online"></span>
</span>
<span class="avatar avatar-lg">
  <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  <span class="avatar-status status-online" role="img" aria-label="Online"></span>
</span>
<span class="avatar avatar-xl">
  <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  <span class="avatar-status status-online" role="img" aria-label="Online"></span>
</span>

头像堆叠

使用 .avatar-stack 将多个头像组合在一起以产生重叠效果。头像按相反顺序渲染，因此第一个头像显示在最上面。堆叠使用头像大小的百分比来确定堆叠头像重叠的程度。

mdo mdo mdo mdo mdo
HTML
<div class="avatar-stack">
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
</div>

带大小的堆栈

作为简写，大小类别可用于 .avatar-stack 和 .avatar。

mdo mdo mdo
mdo mdo mdo
mdo mdo mdo
mdo mdo mdo
mdo mdo mdo
HTML
<div class="avatar-stack avatar-stack-xs">
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
</div>

<div class="avatar-stack avatar-stack-sm">
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
</div>

<div class="avatar-stack">
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
</div>

<div class="avatar-stack avatar-stack-lg">
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
</div>

<div class="avatar-stack avatar-stack-xl">
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
</div>

带计数的堆栈

与首字母结合以显示额外用户的数量。

mdo mdo mdo +5
HTML
<div class="avatar-stack">
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
  <span class="avatar theme-secondary">+5</span>
</div>
mdo mdo mdo +5
HTML
<div class="avatar-stack avatar-stack-xl">
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
  <span class="avatar">
    <img class="avatar-img" src="/assets/img/avatar.png" alt="mdo">
  </span>
  <span class="avatar theme-secondary">+5</span>
</div>

CSS

变量

头像在.avatar上使用本地 CSS 变量以实现实时自定义。CSS 变量的值是从每个组件独有的 Sass map生成的，并应用于上述类。

scss/_avatar.scss
// stylelint-disable-next-line scss/dollar-variable-default
$avatar-tokens: defaults(
  (
    --avatar-size: 2.5rem,
    --avatar-border-radius: 50%,
    --avatar-border-width: 2px,
    --avatar-border-color: var(--bg-body),
    --avatar-bg: var(--bg-2),
    --avatar-color: var(--fg-body),
    // --avatar-font-weight: var(--font-weight-medium), // Defaults to fallback
    --avatar-status-size: .75rem,
    --avatar-status-border-width: 2px,
    --avatar-status-border-color: var(--bg-body),
    --avatar-stack-spacing: -.3,
    --avatar-stack-transition: "transform .2s ease-in-out",
  ),
  $avatar-tokens
);

Sass map

头像大小在 $avatar-sizes Sass map中定义。每个大小指定头像大小和状态大小。

scss/_avatar.scss
$avatar-sizes: ();
// stylelint-disable-next-line scss/dollar-variable-default
$avatar-sizes: defaults(
  (
    "xs": (
      size: 1.5rem,
      status-size: .625rem,
    ),
    "sm": (
      size: 2rem,
    ),
    "lg": (
      size: 3rem,
      status-size: 1rem,
      border-width: 3px,
    ),
    "xl": (
      size: 4rem,
      status-size: 1.25rem,
      border-width: 4px,
    ),
  ),
  $avatar-sizes
);