avatar

BootstrapVue Avatar o que é e como usar

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:

avatar
avatar

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

Este conteúdo te ajudou de alguma forma?

Usamos cookies para lhe proporcionar a melhor experiência possível no nosso site. Ao continuar a usar este site, você concorda com o uso de cookies.
Ok
Privacy Policy