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.
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.
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