跳转到内容

Avatar 头像组件

在整个 material design 中,无论是在表格中还是到对话框菜单中,都可以找到使用头像的身影。

图片头像

通过将标准 img 的属性 srcsrcSet 传递到组件中,您可以创建图片头像。

Remy Sharp
Travis Howard
Cindy Baker
<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" />

字母头像

通过传入一个作为 children的字符串,您可以创建包含简单字符的头像组件。

H
N
OP
<Avatar>H</Avatar>
<Avatar className={classes.orange}>N</Avatar>
<Avatar className={classes.purple}>OP</Avatar>

尺寸

你可以通过改变 height 以及 width 这两个 CSS 属性来改变头像组件的尺寸。

Remy Sharp
Remy Sharp
Remy Sharp
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.small} />
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" className={classes.large} />

图标头像

通过将图标作为 children 来传递来创建图标头像。

<Avatar>
  <FolderIcon />
</Avatar>
<Avatar className={classes.pink}>
  <PageviewIcon />
</Avatar>
<Avatar className={classes.green}>
  <AssignmentIcon />
</Avatar>

变种

如果你需要矩形或圆角的头像组件,请使用 variant属性。

N
<Avatar variant="square" className={classes.square}>
  N
</Avatar>
<Avatar variant="rounded" className={classes.rounded}>
  <AssignmentIcon />
</Avatar>

回调函数

如果在加载头像组件时发生错误,组件将按照如下顺序切换到以下备选方案:

  • 提供的 children 子元素
  • alt 文本的首字母
  • 一个通用头像图标组件
Remy Sharp
Remy Sharp
<Avatar alt="Remy Sharp" src="/broken-image.jpg" className={classes.orange}>
  B
</Avatar>
<Avatar alt="Remy Sharp" src="/broken-image.jpg" className={classes.orange} />
<Avatar src="/broken-image.jpg" />

分组

AvatarGroup 通过堆栈的方式渲染其子元素。

Remy Sharp
Travis Howard
Cindy Baker
+2
<AvatarGroup max={4}>
  <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="Agnes Walker" src="/static/images/avatar/4.jpg" />
  <Avatar alt="Trevor Henderson" src="/static/images/avatar/5.jpg" />
</AvatarGroup>

带有徽章的组件

Remy Sharp
Travis Howard
Remy Sharp