Avatar 头像组件
在整个 material design 中，无论是在表格中还是到对话框菜单中，都可以找到使用头像的身影。
图片头像
通过将标准 img 的属性 src 或 srcSet 传递到组件中，您可以创建图片头像。
<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" />
Press Enter to start editing
字母头像
通过传入一个作为 children的字符串，您可以创建包含简单字符的头像组件。
<Avatar>H</Avatar>
<Avatar sx={{ bgcolor: deepOrange[500] }}>N</Avatar>
<Avatar sx={{ bgcolor: deepPurple[500] }}>OP</Avatar>
Press Enter to start editing
你可以为头像添加不同的背景颜色。 下面的例子基于人物的姓名生成背景色。
<Avatar {...stringAvatar('Kent Dodds')} />
<Avatar {...stringAvatar('Jed Watson')} />
<Avatar {...stringAvatar('Tim Neutkens')} />
Press Enter to start editing
尺寸
你可以通过改变 height 以及 width 这两个 CSS 属性来改变头像组件的尺寸。
<Avatar
alt="Remy Sharp"
src="/static/images/avatar/1.jpg"
sx={{ width: 24, height: 24 }}
/>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar
alt="Remy Sharp"
src="/static/images/avatar/1.jpg"
sx={{ width: 56, height: 56 }}
/>
Press Enter to start editing
图标头像
通过将图标作为 children 来传递来创建图标头像。
<Avatar>
<FolderIcon />
</Avatar>
<Avatar sx={{ bgcolor: pink[500] }}>
<PageviewIcon />
</Avatar>
<Avatar sx={{ bgcolor: green[500] }}>
<AssignmentIcon />
</Avatar>
Press Enter to start editing
其他的方式
如果你需要矩形或圆角的头像组件，请使用 variant属性。
<Avatar sx={{ bgcolor: deepOrange[500] }} variant="square">
N
</Avatar>
<Avatar sx={{ bgcolor: green[500] }} variant="rounded">
<AssignmentIcon />
</Avatar>
Press Enter to start editing
回调函数
如果在加载头像组件时发生错误，组件将按照如下顺序切换到以下备选方案：
- 提供的 children 子元素
alt 文本的首字母- 一个通用头像图标组件
<Avatar
sx={{ bgcolor: deepOrange[500] }}
alt="Remy Sharp"
src="/broken-image.jpg"
>
B
</Avatar>
<Avatar
sx={{ bgcolor: deepOrange[500] }}
alt="Remy Sharp"
src="/broken-image.jpg"
/>
<Avatar src="/broken-image.jpg" />
Press Enter to start editing
分组
AvatarGroup 将其子元素渲染为堆栈。 用 max 属性限制渲染的头像数量。
<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>
Press Enter to start editing
头像总数
您可以使用 total 属性来控制未显示的头像总数。
<AvatarGroup total={24}>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
<Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
<Avatar alt="Agnes Walker" src="/static/images/avatar/4.jpg" />
<Avatar alt="Trevor Henderson" src="/static/images/avatar/5.jpg" />
</AvatarGroup>
Press Enter to start editing
<StyledBadge
overlap="circular"
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
variant="dot"
>
<Avatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
</StyledBadge>
<Badge
overlap="circular"
anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
badgeContent={
<SmallAvatar alt="Remy Sharp" src="/static/images/avatar/1.jpg" />
}
>
<Avatar alt="Travis Howard" src="/static/images/avatar/2.jpg" />
</Badge>
Press Enter to start editing
