头像

用途

Include CSS

导入 Tailwind 和一个完整的 A3S UI 样式包。

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

或者只导入基本CSS、Avatar组件CSS和一个样式包。

@import "tailwindcss";
@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/avatar.css";
@import "@a3s-lab/ui/styles/a3s.css";

使用CDN或批量程序导入？请参见安装页。

Add your avatar HTML

Add class="avatar" to a small inline container. Add data-size="sm" or data-size="lg" when needed. Put the image first and a fallback  after it. Add .avatar-badge for a status badge or badge icon.

<span class="avatar">
  <img src="/assets/images/avatar-1.png" alt="@shadcn" />
  <span>CN</span>
</span>

HTML 结构

<div class="avatar-group"> Optional

Optional parent that groups avatars with overlap.

Avatar root. Use it standalone or as a direct child of .avatar-group. Add data-size="sm" or data-size="lg" for alternate sizes.

<img> Optional: The avatar image. Provide meaningful alt text.
: Fallback initials or icon.
 Optional: Status badge positioned at the block-end inline-end corner. It can be empty or contain an icon.

 Optional

Count or icon indicator displayed at the end of the group.

示例

基本

徽章

带有图标的徽章

头像组

头像组数

ER+3

带有图标的头像组

尺寸

CNCNCN

头像

用途

Include CSS

Add your avatar HTML

HTML 结构

示例

基本

徽章

带有图标的徽章

头像组

头像组数

带有图标的头像组

尺寸

下拉菜单

RTL

#头像

#用途

Include CSS

Add your avatar HTML

#HTML 结构

#示例

#基本

#徽章

#带有图标的徽章

#头像组

#头像组数

#带有图标的头像组

#尺寸

#下拉菜单

#RTL

头像

用途

HTML 结构

示例

基本

徽章

带有图标的徽章

头像组

头像组数

带有图标的头像组

尺寸

下拉菜单

RTL