Introdução
O badge é um componente do BootstrapVue e ele serve para destacar algumas informações na tela.
Normalmente quando há algo novo no sistema ou alguma notificação para o usuário, se usa para fazer essa marcação.
É um recurso simples e interessante que pode dar um profissionalismo a mais no sistema desenvolvido.
Normalmente são utilizados junto com algum outro recurso, como algum texto, ícone, menus e etc.
Componente padrão
Para adicionar um badge no BootstrapVue, o código é o seguinte:
<b-badge>Teste de badge</b-badge>
E este será o resultado:
No estilo padrão, ele ficará com um texto ou valor no meio e com um background, que já vou mostrar como mudar de cor.
Fato é que normalmente ele não é utilizado sozinho, ele sempre acompanha algo para dar ênfase, vejamos algumas configurações deles e depois exemplos onde podem ser utilizados.
Trocar a cor de fundo
Para trocar a cor de fundo, é similar com os outros componentes do BootstrapVue, utiliza-se a prop variant para fazer esse controle:
<b-badge variant="primary" class="mr-2">Primary</b-badge>
<b-badge variant="secondary" class="mr-2">Secondary</b-badge>
<b-badge variant="success" class="mr-2">Success</b-badge>
<b-badge variant="danger" class="mr-2">Danger</b-badge>
<b-badge variant="warning" class="mr-2">Warning</b-badge>
<b-badge variant="info" class="mr-2">Info</b-badge>
<b-badge variant="light" class="mr-2">Light</b-badge>
<b-badge variant="dark" class="mr-2">Dark</b-badge>
As classes mr-2 foram adicionadas somente para dar um espaçamento entre os badges, elas não fazem parte do componente necessariamente. Este é o resultado do código acima:
Bordas arredondadas
Caso queira, é possível configurá-los para ter bordas arredondadas, pode ser um efeito visual diferente e pode se adaptar melhor ao seu sistema, caso já use isso para outros componentes como botões por exemplo. Veja o código:
<b-badge pill variant="primary" class="mr-2">Primary</b-badge>
<b-badge pill variant="secondary" class="mr-2">Secondary</b-badge>
<b-badge pill variant="success" class="mr-2">Success</b-badge>
Adicionar links
É possível colocar links para redirecionar seja internamente ou externamente. Os links podem ser um href com o link completo, ou até uma rota do vue-router utilizando a prop to.
<b-badge variant="primary" href="#" class="mr-2">Href</b-badge>
<b-badge variant="primary" to="#" class="mr-2">Router link</b-badge>
Textos
Como citei anteriormente, é comum os badges serem utilizados com algum outro componente, um caso interessante é com textos, pode ser colocado para marcar algo novo no sistema, dar destaque a alguma informação e entre outras possibilidades. Veja um exemplo:
<h2>Titulo da funcionalidade <b-badge>New</b-badge></h2>
No caso acima, está marcando como uma nova funcionalidade do sistema. O tamanho do badge nesse caso, vai acompanhar o tamanho do texto, como é um h2, ele fica de um tamanho maior, caso fosse um h6, ficaria menor por exemplo.
Botões
Outro caso de uso comum, é em botões e seu texto como um número. Por exemplo, em determinado local do sistema, informa a quantidade de notificações que o usuário tem para ler, pode ser colocado um badge para dar esse destaque.
Vídeo sobre o badge
Caso queira, gravei um vídeo sobre o badge do BootstrapVue:
Código fonte
Além do botão, para notificações é muito comum colocar em ícones de sino.
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.
Conclusão
O badge é um recurso interessante implementado no BootstrapVue e pode ser bastante útil, vale a pena conhecer e saber como se usa para aplicar no lugar correto, dando uma profissionalidade a mais na forma de passar as informações para o usuário dentro do sistema. Até o próximo post 🙂
Referências
https://bootstrap-vue.org/docs/components/badge