Introdução
O avatar é um componente do BootstrapVue que é utilizado normalmente para colocar fotos de perfil dos usuários que pode ser um ícone, um texto ou até uma foto.
É um componente bem leve, e mais um dos componentes que não tem no Bootstrap, porém foi implementado no BootstrapVue, e é um componente muito útil.
Por padrão, o conteúdo dentro dele é sempre renderizado ao centro.
Para renderizá-lo na tela é bem simples, primeiramente é necessário uma instalação padrão do BootstrapVue no projeto, caso não saiba como fazer, veja nesse link.
Após isso, o para colocar o avatar padrão, é necessário o seguinte código?
<b-avatar></b-avatar>
E isso exibirá o seguinte resultado:
Tipos de avatar
Os avatares são de alguns tipos, tem o padrão que foi o apresentado no exemplo anterior, e tem também o avatar com imagem, com texto e também um customizável.
Normalmente para os avatares de perfil, é comum utilizar o com foto, mas caso o usuário não tenha configurado a foto ainda, deixar as iniciais do nome dentro do avatar.
Veja o código com os exemplos padrão de avatar:
<b-avatar></b-avatar>
<b-avatar variant="primary" text="BV"></b-avatar>
<b-avatar variant="info" src="https://placekitten.com/300/300"></b-avatar>
<b-avatar variant="success" icon="people-fill"></b-avatar>
O primeiro é o padrão, o segundo é o avatar com texto, o terceiro é o com imagem e o último é o avatar com ícone, e na tela fica esse resultado:
Variações de estilo
Eles podem ser customizados a fim de ficar com a aparência mais parecida com o software no qual está desenvolvendo e também para se adaptar a mais realidades.
É possível mudar a cor de fundo, e da para fazer isso utilizando as variants do BootstrapVue, essas variants também podem ser encontradas em outros componentes.
<b-avatar variant="secondary"></b-avatar>
<b-avatar variant="primary"></b-avatar>
<b-avatar variant="dark"></b-avatar>
<b-avatar variant="success"></b-avatar>
<b-avatar variant="danger"></b-avatar>
Há outras cores disponíveis, aqui trouxe algumas, mas para adicionar essas outras é a mesma sintaxe, basta trocar o variant.
Também é possível configurar o tamanho utilizando a prop size.
<b-avatar></b-avatar>
<b-avatar size="sm"></b-avatar>
<b-avatar size="lg"></b-avatar>
<b-avatar :size="24"></b-avatar>
<b-avatar size="3em"></b-avatar>
<b-avatar size="72px"></b-avatar>
Além dessas opções de estilos, também da para deixar com a configuração dele sendo um quadrado, aplicar borda levemente arredondada nesse quadrado e também da para configurar o alinhamento.
Badge no avatar
Os badges normalmente são utilizados para chamar a atenção do usuário para alguma coisa, como por exemplo uma mensagem nova recebida, uma notificação do sistema e dentre outros.
E como os badges são comumente utilizados, há essa implementação por padrão nos avatares do BootstrapVue.
Para a configuração dele no avatar é bem simples, basta adicionar a prop badge ao b-avatar e já estará funcionando o padrão. Também é possível configurar o badge que aparece no avatar.
<b-avatar badge></b-avatar>
<b-avatar badge badge-variant="danger" src="https://placekitten.com/300/300"></b-avatar>
<b-avatar badge badge-variant="warning" icon="people-fill"></b-avatar>
Além da cor do badge, também é possível colocar um conteúdo que pode ser um texto, um número ou customizado, normalmente para quando é uma notificação, há sistemas que usam isso para colocar a quantidade de notificações pendentes.
<b-avatar badge="BV"></b-avatar>
<b-avatar badge="7" variant="primary" badge-variant="dark"></b-avatar>
E também da para configurar o posicionamento do badge dentro do avatar, passando mais uma prop a ele, e essa prop também aceita uma configuração adicional que também pode ser passada.
<b-avatar badge></b-avatar>
<b-avatar badge badge-top></b-avatar>
<b-avatar badge badge-left badge-top></b-avatar>
<b-avatar badge badge-offset="2px"></b-avatar>
Exemplo prático
Em outro tutorial, mostrei o BootstrapVue Sidebar, onde criei uma sidebar completa, e nele fiz o uso de um avatar como imagem de perfil em um menu lateral, caso queira ver, pode ser interessante.
Vídeo sobre o assunto
Caso queira, gravei um vídeo mostrando como utilizar o Avatar do BootstrapVue:
Conclusão
O avatar é um recurso muito interessante e que foi implementado pelo BootstrapVue, e isso enriquece bastante a biblioteca pois é um componente muito utilizado em sistemas, e caso não tivesse nativamente, muita gente optaria por utilizar uma biblioteca ou fazer um css personalizado, o que não é ruim, porém com esse componente no BootstrapVue, garante a produtividade, a facilidade do uso e a compatibilidade com o sistema todo, até o próximo post 🙂
Código fonte
Todo o código fonte dos exemplos mostrados estão no meu CodeSandbox
Para ver outros canais onde o posto conteúdo, meu Github e também cursos, veja os Links do Programando Soluções.
Referências
https://bootstrap-vue.org/docs/components/avatar