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.
We look at how to customize popovers.
Variants and Custom Class
We can change the variants and custom classes to customize our popups.
To change to a styling variant, we can use the variant prop.
For example, we can write:
<template>
<div id="app" class="text-center">
<b-button id="popover-button" href="#">Button</b-button>
<b-popover target="popover-button" variant="danger" triggers="focus">
<template v-slot:title>Danger!</template>danger
</b-popover>
</div>
</template>
<script>
export default {};
</script>
<style>
#app {
margin: 200px;
}
</style>
We changed the variant to danger , so we’ll see that the title and content are red.
We can add custom classes with the custom-class prop on b-popover .
For example, we can write:
<template>
<div id="app" class="text-center">
<b-button id="popover-button" href="#">Button</b-button>
<b-popover target="popover-button" custom-class="popover-class" triggers="focus">
<template v-slot:title>Danger!</template>danger
</b-popover>
</div>
</template>
<script>
export default {};
</script>
<style>
#app {
margin: 200px;
}
.popover-class {
background: orange
}
</style>
We added the popover-class class and set it as the value of custom-class .
Therefore, the background is now orange.
Show and Hide Popovers Programmatically
We can show and hide popovers programmatically with the show prop.
It takes an expression to indicate whether we want to show the popover or not.
For instance, we can write:
<template>
<div id="app" class="text-center">
<b-button id="popover-button" href="#" @click="show = !show">toggle</b-button>
<b-popover :show="show" target="popover-button">
<template v-slot:title>title</template>content
</b-popover>
</div>
</template>
<script>
export default {
data() {
return {
show: false
};
}
};
</script>
<style>
#app {
margin: 200px;
}
</style>
The toggle button toggles the popover on and off.
We have the click handler on b-button to do the toggling by toggling show between true and false .
The show prop is set to show so that when the show state changed, the popover will be toggled on or off.
We can also assign a ref to the b-popover component and emit the open and close events to open and close the popover respectively.
For example, we can write:
<template>
<div id="app" class="text-center">
<b-button @click="onOpen">Open</b-button>
<b-button @click="onClose">Close</b-button>
<b-button id="popover-button" variant="primary">button with popover</b-button>
<b-popover ref="popover" target="popover-button" title="title">content</b-popover>
</div>
</template>
<script>
export default {
methods: {
onOpen() {
this.$refs.popover.$emit("open");
},
onClose() {
this.$refs.popover.$emit("close");
}
}
};
</script>
<style>
#app {
margin: 200px;
}
</style>
We have the Open and Close buttons, which references the ref of the popover to emit the open and close events respectively.
That will open and close the popover.
We also have the ‘button with popover’ button that’s associate with the popover.
Now when we click Open, the popover will open.
When we click Close, the popover will close.
The popover is displayed beside the ‘button with popover’ button since the id and target match.
Also, we can make the popover show on the initial render.
We can just add the show prop to do that:
<template>
<div id="app">
<b-button id="popover-button" variant="primary">Button</b-button>
<b-popover show target="popover-button" title="title">content</b-popover>
</div>
</template>
<script>
export default {};
</script>
We have the b-popover with the show prop to show the popover when the page loads.
Programmatically Disabling Popover
We can use the disabled prop to disable a popover.
For example, we can write:
<template>
<div id="app">
<b-button id="popover-button" variant="primary">Button</b-button>
<b-popover disabled target="popover-button" title="title">content</b-popover>
</div>
</template>
<script>
export default {};
</script>
Then we won’t see the popover no matter what we do.
v-b-popover Directive
We can add modifiers to the v-b-popover directive to change the placement.
For instance, we can write:
<template>
<div id="app" class="text-center">
<b-button v-b-popover.hover.top="'Popover'" title="Title">Button</b-button>
</div>
</template>
<script>
export default {};
</script>
<style>
#app {
margin: 200px;
}
</style>
to place the popover on top of the button with the top modifier.
And the hover modifier lets us change the button to show the popover on hover.
Other possible modifiers are right , left , or bottom to change the placement according to those names.
Conclusion
We can create popovers by in the way we want.
The placement can be changed. Showing and hiding of popovers can be done programmatically.
