To make good looking Vue apps, we need to style our components.

To make our lives easier, we can use components with styles built-in.

In this article, we’ll look at how to add overlays to our app.

Overlay

We can use the b-overlay component to visually obscure a particular element or component and its content.

It’s available since BootstrapVue 2.7.0.

For example, we can create one by writing:

<template>
  <div id="app">
    <b-overlay :show="show">
      <b-card title="Card">
        <b-card-text>foo</b-card-text>
      </b-card>
    </b-overlay>
    <b-button @click="show = !show">Toggle overlay</b-button>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      show: false
    };
  }
};
</script>

We have a b-card inside the b-overlay component.

b-overlay takes a show prop to let us set when to show the overlay.

When we click Toggle overlay, then we’ll toggle the overlay on and off as we toggle the show state between true and false .

When the overlay is shown, then we’ll see the card content covered in gray and a spinner in the middle.

Overlay Backdrop Color

We can change the backdrop color of an overlay.

For example, we change the opacity with the opacity prop:

<template>
  <div id="app">
    <b-overlay :show="show" opacity="0.5">
      <b-card title="Card">
        <b-card-text>foo</b-card-text>
      </b-card>
    </b-overlay>
    <b-button @click="show = !show">Toggle overlay</b-button>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      show: false
    };
  }
};
</script>

We set opacity to 0.5, so we’ll see a translucent overlay.

Also, we can change how the background is blurred with the blur prop:

<template>
  <div id="app">
    <b-overlay :show="show" blur="2px">
      <b-card title="Card">
        <b-card-text>foo</b-card-text>
      </b-card>
    </b-overlay>
    <b-button @click="show = !show">Toggle overlay</b-button>
  </div>
</template>
<script>
export default {
  name: "App",
  data() {
    return {
      show: false
    };
  }
};
</script>

The value is specified in pixels.

#software-development #technology #web-development #programming #javascript #vue