Modals

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

Events

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