Modals
You can create modals using the <modal> component.
<modal v-if="isOpen" name="my-modal" width="300px" height="300px" @closed="isOpen = false"> <div slot-scope="{ close }"> Your modal's content. <button @click="close">x</button> </div></modal>When a modal is rendered in the DOM, it will be automatically opened. So, to control whether or not it’s open, you should add a v-if to it.
When closed, the modal will emit a closed event. You should use this event to change the ‘open’ condition back to false.
You should also add a button somewhere inside your modal to be able to close it. To close it, emit a closed event.
Confirmation Modals
There is a prebuilt modal component available to you if you don’t need something completely custom.
Similar to the regular modal, you should use a v-if to make it appear.
<confirmation-modal v-if="confirming" title="Do the thing" @confirm="doTheThing" @cancel="confirming = false"/>Props
| Prop | Description |
|---|---|
title |
Header text |
bodyText |
Provide a simple string as a content of the modal. Defaults to Are you sure?. |
buttonText |
Text for the confirmation button label. Defaults to Confirm. |
danger |
Boolean for making the modal red. Useful for when you’re doing something scary like deletions. |
Events
| Event | Description |
|---|---|
confirm |
When the user clicks the confirm button. |
cancel |
When the user clicks the cancel button. |
Slots
The default slot replaces the bodyText prop. Useful when you need something more complicated than a single paragraph.
``` html<confirmation-modal ...> <p>More complicated</p> <p>stuff here.</p></confirmation-modal>```
