Alertas com o BootstrapVue Alert

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