Avatar
Os avatares são encontrados ao longo do material design, com usos em tudo, desde tabelas até menus de diálogo.
Avatares com imagens
Avatares com imagem podem ser criados utilizando as propriedades padrões img, src ou srcSet do componente.
<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
Avatares com letras
Avatares com letras podem ser criados passando sua string como children.
<Avatar>H</Avatar>
<Avatar sx={{ bgcolor: deepOrange[500] }}>N</Avatar>
<Avatar sx={{ bgcolor: deepPurple[500] }}>OP</Avatar>
Press Enter to start editing
You can use different background colors for the avatar. The following demo generates the color based on the name of the person.
<Avatar {...stringAvatar('Kent Dodds')} />
<Avatar {...stringAvatar('Jed Watson')} />
<Avatar {...stringAvatar('Tim Neutkens')} />
Press Enter to start editing
Tamanhos
Você pode alterar o tamanho do avatar com as propriedades CSS height e width.
<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
Avatares com ícones
Avatares com ícones são criados passando o ícone como children.
<Avatar>
<FolderIcon />
</Avatar>
<Avatar sx={{ bgcolor: pink[500] }}>
<PageviewIcon />
</Avatar>
<Avatar sx={{ bgcolor: green[500] }}>
<AssignmentIcon />
</Avatar>
Press Enter to start editing
Variantes
Se você precisa de avatares com cantos quadrados ou arredondados, use a propriedade variant.
<Avatar sx={{ bgcolor: deepOrange[500] }} variant="square">
N
</Avatar>
<Avatar sx={{ bgcolor: green[500] }} variant="rounded">
<AssignmentIcon />
</Avatar>
Press Enter to start editing
Contingências (Fallbacks)
Se houver um erro ao carregar a imagem do avatar, o componente escolhe uma alternativa na seguinte ordem:
- o componente children fornecido
- a primeira letra do texto
alt
- um ícone genérico de avatar
<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
Agrupamento
AvatarGroup renders its children as a stack. Use the max prop to limit the number of avatars.
<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 avatars
If you need to control the total number of avatars not shown, you can use the total prop.
<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
