Introdução
O Overlay do BootstrapVue pode ser utilizado para trocar o estado de um componente ou elemento.
Com isso, na prática, é possível fazer algumas ações, como por exemplo, efeito de carregamento para um elemento ou componente.
Isso pode trazer uma experiência mais agradável para o seu usuário, pois ele verá que algo ainda está carregando, e não pensará imediatamente que pode ser um bug do sistema.
Veja como você pode encaixar o uso desse elemento em seus projetos.
Projeto
Para este projeto, será preciso estar com o BootstrapVue instalado, caso queira ver como fazer, veja aqui.
Overlay em card
É possível colocar o estado de carregamento em um card, isso pode ser útil quando o valor de um card é carregado de um banco de dados por exemplo.
Para isso, criei um card no App.vue, dessa forma:
<template>
<div id="app" class="container mt-3">
<b-card title="Meu card">
<b-card-text>Lorem ipsun.</b-card-text>
</b-card>
</div>
</template>
<script>
export default {
name: "App",
};
</script>
Agora, para adicionar o efeito, é preciso colocar o elemento por fora da div:
<template>
<div id="app" class="container mt-3">
<b-overlay :show="show" rounded="sm">
<b-card title="Meu card">
<b-card-text>Lorem ipsun.</b-card-text>
</b-card>
</b-overlay>
<b-button class="mt-3" @click="show = !show"
>Mostrar/esconder overlay</b-button
>
</div>
</template>
<script>
export default {
name: "App",
data () {
return {
show: true
}
}
};
</script>
Coloquei um botão também para alternar o estado, para ficar mais fácil de ver o efeito, e o resultado é esse:
Configurar opacidade e cor
Este efeito vem com cor e opacidade padrão, porém é possível configurar esses dois itens.
Para isso, nesse mesmo código do card, é possível passar as props variant e opacity.
A variant, pode ser selecionado todas as cores padrão do BootstrapVue, e o opacity é um valor entre 0 e 1, onde mais perto de 0 é mais claro e mais perto de 1 é mais escuro.
<template>
<div id="app" class="container mt-3">
<b-overlay :show="show" rounded="sm" variant="primary" :opacity="0.3">
<b-card title="Meu card">
<b-card-text>Lorem ipsun.</b-card-text>
</b-card>
</b-overlay>
<b-button class="mt-3" @click="show = !show"
>Mostrar/esconder overlay</b-button
>
</div>
</template>
<script>
export default {
name: "App",
data () {
return {
show: true
}
}
};
</script>
Configurar o loading
Outra configuração possível é o loading, a forma padrão é o spinner, mas é podemos configurar o outro loading do BootstrapVue.
No mesmo exemplo anterior, é possível passar as props spinner-type e spinner-variant.
A spinner-type, pode receber o valor grow, para configurar o outro loading, e a spinner-variant, configurar a cor do loading.
<template>
<div id="app" class="container mt-3">
<b-overlay :show="show" rounded="sm" spinner-variant="primary" spinner-type="grow">
<b-card title="Meu card">
<b-card-text>Lorem ipsun.</b-card-text>
</b-card>
</b-overlay>
<b-button class="mt-3" @click="show = !show"
>Mostrar/esconder overlay</b-button
>
</div>
</template>
<script>
export default {
name: "App",
data () {
return {
show: true
}
}
};
</script>
Overlay em botão
Além do card, também é possível colocar em outros elementos, o que acho mais útil é no botão.
Com isso, da para fazer o botão ter um efeito de loading ao submeter um formulário por exemplo.
Para isso, coloquei o efeito em volta de um botão, e ao clicar sobre ele, chamo uma função que troca para o estado carregando e tem um setTimeout, e após 2 segundos o botão volta ao estado normal.
O código fica assim:
<template>
<div id="app" class="container mt-3">
<b-overlay
:show="show"
opacity="0.6"
spinner-small
spinner-variant="primary"
class="d-inline-block"
>
<b-button ref="button" variant="primary" @click="save"> Salvar </b-button>
</b-overlay>
</div>
</template>
<script>
export default {
name: "App",
data () {
return {
show: true
}
},
methods: {
save() {
this.show = true;
let self = this;
setTimeout(function () {
self.show = false;
}, 2000);
},
},
};
</script>
E o resultado:
Vídeo
Código fonte
O código fonte está no meu CodeSandbox, neste link.
Para ver outros canais onde o posto conteúdo, veja os Links do Programando Soluções.
Referências
https://bootstrap-vue.org/docs/components/overlay#overlay
https://bootstrap-vue.org/docs/reference/color-variants#color-variants-and-css-class-mapping