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>