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 use modal and dialog components.
Disable Footer Buttons
We can disable footer buttons with the cancel-disabled and ok-disabled props.
They disable the cancel and OK buttons respectively.
We can disable both at the same time with the busy prop.
So if we have:
<template>
<div id="app">
<b-button v-b-modal.modal>Open</b-button>
<b-modal id="modal" title=" Modal" busy>
<p>hello</p>
</b-modal>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
Then both buttons will be grayed out.
Custom Rendering with Slots
We can customize the render of our modal parts with slots.
The header can be customized by populating the header slot.
The body can be customized by populating the default slot.
And the footer can be customized by populating the footer slot.
For example, we can write:
<template>
<div id="app">
<b-button v-b-modal.modal>Open</b-button>
<b-modal id="modal" title=" Modal" busy>
<template v-slot:modal-header="{ close }">
<b-button @click="close()">Close Modal</b-button>
<h5>Header</h5>
</template>
<template v-slot:default="{ hide }">
<p>Body</p>
<b-button @click="hide()">Hide</b-button>
</template>
<template v-slot:modal-footer="{ ok, cancel, hide }">
<p>Footer</p>
<b-button @click="ok()">OK</b-button>
<b-button @click="cancel()">Cancel</b-button>
<b-button @click="hide('hide')">Hide</b-button>
</template>
</b-modal>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
The slots provide us with the methods we can call with each section.
The close method closes the modal in the header.
hide hides the modal in the body.
The footer has the ok , cancel , and hide methods to close the modal.
Multiple Modals
We can have multiple models on one page.
For example, we can write:
<template>
<div id="app">
<b-button v-b-modal.modal-1>Open First Modal</b-button>
<b-modal id="modal-1" size="lg" title="First Modal" ok-only no-stacking>
<p>First</p>
<b-button v-b-modal.modal-2>Open Second Modal</b-button>
</b-modal>
<b-modal id="modal-2" title="Second Modal" ok-only>
<p class="my-2">Second</p>
<b-button v-b-modal.modal-3>Open Third Modal</b-button>
</b-modal>
<b-modal id="modal-3" title="Third Modal" ok-only>
<p class="my-1">Third</p>
</b-modal>
</div>
</template>
<script>
export default {
name: "App"
};
</script>
We have 3 modals which are opened one after the other.
When we click Open First Modal, we open the first modal.
It has an Open Second Modal button to open the second modal.
That modal has the Open Third Modal button to open the 3rd modal.
When we close the top one, the rest are closed.
Modal Message Boxes
We can create simple message boxes with the msgBoxOk and msgBoxConfirm methods.
For example, we can write:
<template>
<div id="app">
<b-button @click='openMsgBox'>Open Message Box</b-button>
</div>
</template>
<script>
export default {
name: "App",
methods: {
async openMsgBox(){
const value = await this.$bvModal.msgBoxOk('hello')
console.log(value);
}
}
};
</script>
We added a button to call the openMsgBox method.
It opens a message box with the word 'hello' in it from the string we pass on.
It returns a promise.
When we close it, it’ll resolve to true when we close it.
Also, we can pass in an object with some options as the 2nd argument.
For example, we can write:
<template>
<div id="app">
<b-button @click="openMsgBox">Open Message Box</b-button>
</div>
</template>
<script>
export default {
name: "App",
methods: {
async openMsgBox() {
const value = await this.$bvModal.msgBoxOk("hello", {
title: "Confirmation",
size: "sm",
buttonSize: "sm",
okVariant: "success",
headerClass: "p-2 border-bottom-0",
footerClass: "p-2 border-top-0",
centered: true
});
console.log(value);
}
}
};
</script>
We added a title to the title property.
size sets the size of the modal.
buttonSize sets the button size.
okVariant sets the style of the OK button.
headerClass sets the header’s class.
footerClass sets the footer’s class.
centered makes the modal vertically centered.
Confirm Dialog
The confirm dialog is similar except that it also has a cancel button.
We call the msgBoxConfirm method instead msgBoxOk to open a confirm dialog.
For instance, we can write:
<template>
<div id="app">
<b-button @click="openMsgBox">Open Confirm Box</b-button>
</div>
</template>
<script>
export default {
name: "App",
methods: {
async openMsgBox() {
const value = await this.$bvModal.msgBoxConfirm("hello", {
title: "Confirmation",
size: "sm",
buttonSize: "sm",
okVariant: "danger",
okTitle: "YES",
cancelTitle: "NO",
footerClass: "p-2",
hideHeaderClose: false,
centered: true
});
console.log(value);
}
}
};
</script>
We added the okTitle and cancelTitle properties to the options.
When we click the cancel button, the promise will resolve to false .
If we click the ‘x’ on the top right, it’ll resolve to null .
If we click the OK button, it’ll resolve to true .
Conclusion
We can customize the rendering of the modal by populating slots.
Also, we can display simple dialog boxes that returns a promise.
It resolves to different values depending on what is done to close it.
