头像

头像是用户身份的图形化表示。

介绍

Avatar 组件可用于在菜单、表格和聊天等位置显示用户的图形信息。

基础知识

import Avatar from '@mui/joy/Avatar';

默认情况下，Avatar 组件显示通用的“人物”图标。您可以将此图标替换为文本字符串或图像。

<Avatar />
<Avatar>JG</Avatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />

<Avatar />
<Avatar>JG</Avatar>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />

按 Enter 键开始编辑

文本头像

将 Avatar 组件包裹在字符串周围以显示文本。请注意，Avatar 组件的设计最多可容纳两个字母，例如用户的姓名首字母

<Avatar>RE</Avatar>

<Avatar>RE</Avatar>

按 Enter 键开始编辑

图像头像

通过在 src 属性中定义路径，将图像插入到 Avatar 组件中，就像使用 HTML <img> 元素一样。请务必为 alt 属性编写有意义的描述。

<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
<Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />

<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
<Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />

按 Enter 键开始编辑

图像回退

如果在加载 Avatar 组件的图像时发生错误，它将回退到以下替代方案（按此顺序）

提供的子字符串
alt 文本的首字母
默认通用图标

<Avatar alt="Remy Sharp" src="/broken-image.jpg">
  BT
</Avatar>
<Avatar alt="Remy Sharp" src="/broken-image.jpg" />
<Avatar src="/broken-image.jpg" />

<Avatar alt="Remy Sharp" src="/broken-image.jpg">
  BT
</Avatar>
<Avatar alt="Remy Sharp" src="/broken-image.jpg" />
<Avatar src="/broken-image.jpg" />

按 Enter 键开始编辑

自定义

变体

Avatar 组件支持 Joy UI 的四种全局变体：solid、soft（默认）、outlined 和 plain。

<Avatar variant="solid" />
<Avatar variant="soft" />
<Avatar variant="outlined" />
<Avatar variant="plain" />

<Avatar variant="solid" />
<Avatar variant="soft" />
<Avatar variant="outlined" />
<Avatar variant="plain" />

按 Enter 键开始编辑

尺寸

Avatar 组件提供三种尺寸：sm、md（默认）和 lg

<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" size="sm" />
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" size="md" />
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" size="lg" />

<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" size="sm" />
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" size="md" />
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" size="lg" />

按 Enter 键开始编辑

与 Avatar Group 一起使用

import AvatarGroup from '@mui/joy/AvatarGroup';

使用 Avatar Group 组件将多个 Avatar 组件组合在一起。

<AvatarGroup>
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
  <Avatar>+3</Avatar>
</AvatarGroup>

<AvatarGroup>
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
  <Avatar>+3</Avatar>
</AvatarGroup>

按 Enter 键开始编辑

组内的数量

Avatar Group 组件不提供内置属性来控制组内 Avatar 组件的最大数量或总数量。这是有意保持开放的，以便为您提供更广泛的自定义选项。

下面的演示展示了一个 Avatar Group 的示例，它最多显示五个头像；超出前四个的所有头像都集中在第五个头像中，该头像显示隐藏的总数

+20

<AvatarGroup>
  {avatars.map((avatar) => (
    <Avatar key={avatar.alt} {...avatar} />
  ))}
  {!!surplus && <Avatar>+{surplus}</Avatar>}
</AvatarGroup>

<AvatarGroup>
  {avatars.map((avatar) => (
    <Avatar key={avatar.alt} {...avatar} />
  ))}
  {!!surplus && <Avatar>+{surplus}</Avatar>}
</AvatarGroup>

按 Enter 键开始编辑

一致的外观

Avatar 组件公开了有意义的 CSS 变量，以便与 Avatar Group 组件进行通信。您可以将这些变量应用于其他非 Avatar 组件，以模仿 Avatar 组件在组内的外观。这种自定义技术使您的界面对更改更具弹性，因为应用于 Avatar 组件的任何样式更改也将应用于组中的其他组件。

这是一个使用 Icon Button 的示例，其样式由 Avatar 组件的 CSS 变量定义

重叠顺序

默认情况下，组中的第一个 Avatar 组件位于第二个之后，第二个位于第三个之后，依此类推。您可以通过反转 Avatar 组件的顺序并在 Avatar Group 组件中使用 CSS 属性 flexDirection: row-reverse 来反转重叠顺序

<AvatarGroup sx={{ flexDirection: 'row-reverse' }}>
  <Avatar>+3</Avatar>
  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
</AvatarGroup>

<AvatarGroup sx={{ flexDirection: 'row-reverse' }}>
  <Avatar>+3</Avatar>
  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
</AvatarGroup>

按 Enter 键开始编辑

垂直堆叠

要垂直渲染 Avatar Group 组件，请添加 CSS 属性 writing-mode: vertical-rl 并将内部元素（如果存在）旋转 -90 度。

<AvatarGroup sx={{ writingMode: 'vertical-rl' }}>
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
  <Avatar sx={{ transform: 'rotate(-90deg)' }}>+3</Avatar>
</AvatarGroup>

<AvatarGroup sx={{ writingMode: 'vertical-rl' }}>
  <Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
  <Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
  <Avatar alt="Cindy Baker" src="/static/images/avatar/3.jpg" />
  <Avatar sx={{ transform: 'rotate(-90deg)' }}>+3</Avatar>
</AvatarGroup>

按 Enter 键开始编辑

与 Badge 一起使用

import Badge from '@mui/joy/Badge';

将 Avatar 组件与Badge组件结合使用，以可视化地传达有关用户状态的更复杂信息

CSS 变量示例

试用 Avatar 组件可用的 CSS 变量，看看设计如何变化。您可以使用这些变量通过 sx 属性和主题自定义组件。

<AvatarGroup >

CSS 变量

--AvatarGroup-gap

--Avatar-size

--Avatar-ringSize

结构

Avatar 组件由一个根 <div> 组成，它可以包裹 <svg>、<img> 或字符串

<div class="MuiAvatar-root">
  <!-- Avatar contents -->
</div>

API

请参阅下面的文档，以获得此处提及的组件的所有可用属性和类的完整参考。