bootstrap-vue modal

BootstrapVue Modal

Introdução

Modal é uma caixa de diálogo flexível e estilizável que pode ter vários casos de uso, como por exemplo, aviso aos usuários, confirmação de exclusão, edição rápida de conteúdo e muito mais.

Os modais normalmente eles são renderizados na tela junto com todo o conteúdo, porém ficam escondidos, e só aparecem quando algum evento é disparado e esse evento “chama” o modal para a tela, e quando renderizado, o modal sobrepõe os outros elementos.

O bootstrap-vue já conta com um modal padrão no qual é fácil de se utilizá-lo. O modal também possui diversas configurações o que o deixa mais personalizável e adaptável para mais situações.

Primeiro exemplo

Basicamente para exibir um modal na tela, é preciso de um botão de ação, que irá disparar o evento para abrir o modal e o modal propriamente dito que será aberto na tela. Com o bootstrap-vue fica dessa forma.

<div>
  <b-button v-b-modal.modal-1>Abrir modal</b-button>

  <b-modal id="modal-1" title="BootstrapVue">
    <p class="my-4">Olá modal!</p>
  </b-modal>
</div>

O botão tem uma prop v-b-modal.modal-1 que é ela que dispara o evento e abre o modal, repare que depois do v-b-modal, tem o modal-1 e isso coincide com o id do modal, e é isso que faz funcionar, precisamos que o id seja igual ao que é passado na prop v-b-modal.

Neste primeiro exemplo, temos o seguinte resultado na tela:

Abertura do Modal

Além desse primeiro exemplo, o modal pode ser aberto de outras formas, em vez de passar o .meu-modal, poderemos passar uma string que será a mesma que está no id do modal

 <b-button v-b-modal="'meu-modal'">Abrir Modal</b-button>

Outra forma muito utilizada, principalmente no VueJS, é utilizando as refs. Com a ref é possível atribuir uma referência ao modal, e depois poder abrir com uma função:

<template>
    <div>
        <b-button @click="abrirModal">Abrir Modal</b-button>
        <b-button @click="fecharModal">Fechar Modal</b-button>
        <b-modal ref="meu modal"></b-modal>
    </div>
</template>
<script>
  export default {
    methods: {
      abrirModal() {
        this.$refs['meu-modal'].show()
      },
      fecharModal() {
        this.$refs['meu-modal'].hide()
      },
    }
  }
</script>

Customização

É possível personalizar o modal de diversas formas, provavelmente você irá precisar de algumas das configurações abaixo.

Tamanho

Para configurar o tamanho do modal, tem algumas formas, a mais indicada é passando a prop size:

<b-modal size="xl">Modal gigante!</b-modal>
<b-modal size="lg">Modal grande!</b-modal>
<b-modal size="sm">Modal pequeno!</b-modal>

Alinhar no centro da tela

A configuração é tranquila de fazer, e pode fazer muita diferença pro seu usuário, basta passar a prop centered, que o modal ficará centralizado.

<b-modal centered>Modal Centralizado</b-modal>

Cores

Todas as cores de fundo e do texto podem ser personalizadas, tanto do título, quanto do rodapé e quanto do conteúdo, para essa configuração as props também são passadas na tag b-modal:

<template>
  <div>
    <b-button @click="show=true" variant="primary">Show Modal</b-button>

    <b-modal
      v-model="show"
      title="Modal Variants"
      :header-bg-variant="headerBgVariant"
      :header-text-variant="headerTextVariant"
      :body-bg-variant="bodyBgVariant"
      :body-text-variant="bodyTextVariant"
      :footer-bg-variant="footerBgVariant"
      :footer-text-variant="footerTextVariant"
    >
      <b-container fluid>
        <b-row class="mb-1 text-center">
          <b-col cols="3"></b-col>
          <b-col>Background</b-col>
          <b-col>Text</b-col>
        </b-row>

        <b-row class="mb-1">
          <b-col cols="3">Header</b-col>
          <b-col>
            <b-form-select
              v-model="headerBgVariant"
              :options="variants"
            ></b-form-select>
          </b-col>
          <b-col>
            <b-form-select
              v-model="headerTextVariant"
              :options="variants"
            ></b-form-select>
          </b-col>
        </b-row>

        <b-row class="mb-1">
          <b-col cols="3">Body</b-col>
          <b-col>
            <b-form-select
              v-model="bodyBgVariant"
              :options="variants"
            ></b-form-select>
          </b-col>
          <b-col>
            <b-form-select
              v-model="bodyTextVariant"
              :options="variants"
            ></b-form-select>
          </b-col>
        </b-row>

        <b-row>
          <b-col cols="3">Footer</b-col>
          <b-col>
            <b-form-select
              v-model="footerBgVariant"
              :options="variants"
            ></b-form-select>
          </b-col>
          <b-col>
            <b-form-select
              v-model="footerTextVariant"
              :options="variants"
            ></b-form-select>
          </b-col>
        </b-row>
      </b-container>

      <template v-slot:modal-footer>
        <div class="w-100">
          <p class="float-left">Modal Footer Content</p>
          <b-button
            variant="primary"
            size="sm"
            class="float-right"
            @click="show=false"
          >
            Close
          </b-button>
        </div>
      </template>
    </b-modal>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        show: false,
        variants: ['primary', 'secondary', 'success', 'warning', 'danger', 'info', 'light', 'dark'],
        headerBgVariant: 'dark',
        headerTextVariant: 'light',
        bodyBgVariant: 'light',
        bodyTextVariant: 'dark',
        footerBgVariant: 'warning',
        footerTextVariant: 'dark'
      }
    }
  }
</script>

Esse código da o seguinte resultado:

Customização via slots

Todas essas personalizações, também podem ser feitas via slot, e é uma ótima opção quando você deseja manipular o componente de sua maneira. Por exemplo, caso você queira, você pode mexer somente no topo do modal sem alterar nenhum comportamento do corpo ou do rodapé, e ao contrário também da certo, caso queira mexer somente no rodapé.

Exemplo de manipulação do header e do footer via slot:

<b-button v-b-modal.meu-modal variant="primary">Show Modal</b-button>

    <b-modal id="meu-modal">
        <template v-slot:modal-header="{ close }">
          <b-button size="sm" variant="outline-danger" @click="close()">
            Fechar Modal
          </b-button>
          <h5>Cabeçalho do modal</h5>
        </template>

        <p> Aqui temos o conteúdo do modal </p>

        <template v-slot:modal-footer="{ hide , ok }">
          <p>Rodapé personalizado</p>
          <b-button size="sm" variant="outline-danger" @click="hide()">
            Fechar
          </b-button>
          <b-button size="sm" variant="outline-primary" @click="ok()">
            Próximo
          </b-button>
        </template>
    </b-modal>

Repare que depois do v-slot, foram passados argumentos como este v-slot:modal-footer=”{ hide , ok }”. Isto porque é necessário informar ao Header e ao Footer quais funções serão utilizadas dentro dele, essas precisam ser as funções padrão do modal do bootstrap-vue, que são os métodos (ok, cancel, close, hide e visible).

E o modal personalizado fica assim:

Acessibilidade

Quando o modal é aberto, ele recebe o foco automaticamente, dessa forma é possível fechá-lo apertando a tecla Esc, e isso melhora a usabilidade e navegação dentro do seu sistema.

Para saber mais

Caso queira, gravei um vídeo completo sobre o Modal do BootstrapVue, vale a pena assistir.

Conclusão

O modal é muito útil no dia a dia, pois com ele é possível configurar pra realizar diversos tipos de operação, como confirmar remoção de registro, edição rápida de algum dado, alertas na tela, termos de uso e entre muitas outras coisas. Sabendo as possibilidades que o modal traz, é fácil encaixar seu uso dentro do sistema, nesse post é isso, espero que tenha gostado e até o próximo post 🙂

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/modal#modals

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