Avatar
Avatares são componentes utilizados para exibir representações visuais de usuários, como imagens ou nome.
Quando usar
- Recomenda-se o uso de avatares quando o usuário ou lista de usuários possuir imagens ou nomes definidos.
- É geralmente usado em conjunto com Headers, NavBars, Tabelas, Cards e Listas.
Uso
js
<CdsAvatar
src="https://thispersondoesnotexist.com/"
/>Preview
Conteúdo do dropdown
Props
Nome | Tipo | Default | Opções | Descrição |
|---|---|---|---|---|
variant | string | 'green' | green teal blue indigo violet pink red orange amber dark | A variante de cor. São 10 variantes: |
size | string | 'md' | sm md lg | Especifica o tamanho do avatar. São 3 tamanhos implementados: 'sm', 'md', 'lg'. |
src | string | '' | -- | src da imagem do avatar. Tem prioridade maior que as props de iniciais de nome. |
initials | string | null | -- | Recebe as iniciais do usuário cujas informações vão ser mostradas no Avatar. As iniciais são exibidas apenas quando nenhuma imagem é especificada. |
name | string | null | -- | Recebe o nome do usuário cujas informações vão ser mostradas no Avatar. Do nome são extraídas as duas primeiras iniciais para exibição no componente quando nenhuma imagem é especificada. |
clickable | boolean | false | -- | Ativa ou desativa o clique no componente |
Slots
Nome | Descrição |
|---|---|
#dropdown-content |