Introdução
O Alert é um componente do BootstrapVue que pode ser utilizado para chamar a atenção do usuário para ler algo importante, dar feedbacks sobre operações como criação, edição e exclusão de registros e entre outras possibilidades.
É um recurso muito utilizado, seja no padrão da biblioteca ou de alguma outra forma onde se necessita chamar a atenção do usuário.
O componente do BootstrapVue tem algumas configurações, como por exemplo, trocar a cor, criar um alerta que pode ser fechado, alerta com timer de fechamento e entre outros.
Como utilizar
É necessário ter a instalação padrão do BootstrapVue, e com isso, para utilizar, basta chamar o componente b-alert passando a prop show que irá funcionar:
<b-alert show>Default Alert</b-alert>
Este código irá gerar o seguinte alerta:
Trocando a cor de fundo
Esse componente irá aceitar todas as cores padrões do BootstrapVue, e para trocar a cor padrão, se utiliza a prop variant, passando qual a cor que deve ser utilizada para esse alerta.
Por exemplo, caso o usuário salve um registro com sucesso, é possível configurar para aparecer um alerta verde informando que a operação foi concluída com sucesso.
<b-alert variant="success" show>
Registro salvo com sucesso
</b-alert>
Caso algum problema tenha ocorrido durante a operação de salvar o registro, pode colocar a cor vermelha, que dará um destaque maior e informando que algum problema ocorreu.
<b-alert variant="danger" show>Não foi possível salvar</b-alert>
Alerta com botão de fechar
Normalmente, o alerta ocupa um certo espaço na tela, é comum querer ter uma opção de fechar o alerta para que economize espaço, e isso é muito útil principalmente para monitores menores.
Para essa configuração, se usa a prop dismissible, que ela automaticamente irá colocar um X no canto direito do alerta, onde o usuário pode clicar para fechar, economizando espaço.
<b-alert variant="danger" show dismissible>
Alerta com botão para fechar
</b-alert>
Colocar texto formatado no alerta
Há casos onde pode ser necessário colocar mais textos dentro de um alerta, seja para chamar a atenção, para exibir uma mensagem mais elaborada ou entre outras possibilidades.
O alert possibilita renderizar um HTML dentro dele, e com isso abre um leque de possibilidades.
Um exemplo, pode ser quando o usuário conclui o cadastro no sistema. Nesse caso o alerta de uma operação bem sucedida pode querer chamar mais atenção, e por isso uma mensagem com um título maior pode fazer esse papel:
<b-alert show variant="success">
<h4 class="alert-heading">Parabéns!</h4>
<hr />
<p>Seus dados foram cadastrados com sucesso.</p>
</b-alert>
Alerta com timer de fechamento
Uma outra configuração que pode ser feita para o alerta, é colocar um tempo de fechamento, e após esse tempo o alerta some sozinho.
Essa função é muito útil, mas cuidado ao utilizá-la, pois uma informação importante e que o usuário precisa ler, deve ficar sempre disponível na tela, para que não haja nenhum engano durante o uso do sistema.
Além de um tempo de fechamento, também é possível colocar uma barra de progresso invertida, que vai reduzindo conforme o tempo, indicando que vai fechar, da um efeito mais legal e mais informativo no sistema.
<b-button @click="showAlert" variant="info" class="m-1">
Mostrar alerta com tempo
</b-button>
<b-alert
:show="dismissCountDown"
dismissible
variant="warning"
@dismissed="dismissCountDown = 0"
@dismiss-count-down="countDownChanged"
>
<p>Este alerta vai sumir depois de {{ dismissCountDown }} segundos...</p>
<b-progress
variant="warning"
:max="dismissSecs"
:value="dismissCountDown"
height="4px"
></b-progress>
</b-alert>
data() {
return {
dismissSecs: 5,
dismissCountDown: 0,
};
},
methods: {
countDownChanged(dismissCountDown) {
this.dismissCountDown = dismissCountDown;
},
showAlert() {
this.dismissCountDown = this.dismissSecs;
},
},
O resultado desse código é um alerta que depois de 5 segundos na tela, irá sumir automaticamente, sem que o usuário realize mais qualquer ação. Veja o gif de exemplo:
Vídeo sobre o Alert
Caso queira, gravei um vídeo completo sobre o alert do BootstrapVue:
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.
Conclusão
O alert é um recurso muito interessante do BootstrapVue e que muitos sistemas implementam, com certeza vale a pena utilizar sempre que precisar chamar a atenção do usuário a ler algo. Até o próximo post 🙂
Referências
https://bootstrap-vue.org/docs/components/alert