Modal
| Prop | Data type | Required? | Default | Description |
|---|---|---|---|---|
title |
string |
Yes | The modal title | |
v-model |
true | false
|
Yes | Whether the modal is open or not |
Modal open
<fw-modal v-model="open" title="My modal">
Modal content
</fw-modal>
<fw-button @click="open = true">
Open modal
</fw-button>Modal actions
Use the #actions slot to add actions to a modal. Actions typically take the form of buttons.
<fw-modal v-model="open" title="My modal">
Modal content
<template #actions>
<fw-button @click="open = false" color="secondary">
Cancel
</fw-button>
<fw-button @click="open = false">
Ok
</fw-button>
</template>
</fw-modal>
<fw-button @click="open = true">
Open modal
</fw-button>Nested modals
You can nest modals to allow users to open a modal from inside another modal. This can be useful when creating a multi-step workflow.
<fw-modal v-model="open" title="My modal">
<fw-modal v-model="openNested" title="My modal">
Nested modal content
</fw-modal>
<fw-button @click="openNested = true">
Open nested modal
</fw-button>
</fw-modal>
<fw-button @click="open = true">
Open modal
</fw-button>Alert inside modal
You can nest Funkwhale alerts to visually highlight content within the modal.
<fw-modal v-model="open" title="My modal">
Modal content
<template #alert v-if="alertOpen">
<fw-alert>
Alert content
<template #actions>
<fw-button @click="alertOpen = false">Close alert</fw-button>
</template>
</fw-alert>
</template>
</fw-modal>
<fw-button @click="open = true">
Open modal
</fw-button>