Pular para o conteúdo

Programando Soluções

O que é e como usar o overlay do BootstrapVue

overlay

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

Este conteúdo te ajudou de alguma forma?

Marcações:
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