Avatar 头像
在整个 material design 中，无论是在表格中还是到对话框菜单中，都可以找到使用头像的身影。
图片头像
Image avatars can be created by passing standard img props src or srcSet to the component.
<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" />
H
N
OP
<Avatar>H</Avatar>
<Avatar className={classes.orange}>N</Avatar>
<Avatar className={classes.purple}>OP</Avatar>
<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} />
<Avatar>
<FolderIcon />
</Avatar>
<Avatar className={classes.pink}>
<PageviewIcon />
</Avatar>
<Avatar className={classes.green}>
<AssignmentIcon />
</Avatar>
N
<Avatar variant="square" className={classes.square}>
N
</Avatar>
<Avatar variant="rounded" className={classes.rounded}>
<AssignmentIcon />
</Avatar>
Fallbacks
If there is an error loading the avatar image, the component falls back to an alternative in the following order:
- the provided children
- the first letter of the
alttext - a generic avatar icon
<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" />
+1
<AvatarGroup max={3}>
<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="Cindy Baker" src="/static/images/avatar/3.jpg" />
</AvatarGroup>