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