funkwhale/front/ui-docs/components/ui/modal.md

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

<Modal v-model="open" title="My modal">
  Modal content
</Modal>

<Button @click="open = true">
  Open modal
</Button>

Modal content Open modal

Modal actions

Use the #actions slot to add actions to a modal. Actions typically take the form of buttons.

<Modal v-model="open" title="My modal">
  Modal content

  <template #actions>
    <Button @click="open = false" color="secondary">
      Cancel
    </Button>

    <Button @click="open = false">
      Ok
    </Button>
  </template>
</Modal>

<Button @click="open = true">
  Open modal
</Button>

Modal content Cancel Ok Open modal

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.

<Modal v-model="open" title="My modal">
  <Modal v-model="openNested" title="My modal">
    Nested modal content
  </Modal>

  <Button @click="openNested = true">
    Open nested modal
  </Button>
</Modal>

<Button @click="open = true">
  Open modal
</Button>

Nested modal content Open nested modal Open modal

Alert inside modal

You can nest Funkwhale alerts to visually highlight content within the modal.

<Modal v-model="open" title="My modal">
  Modal content

  <template #alert v-if="alertOpen">
    <fw-alert>
      Alert content

      <template #actions>
        <Button @click="alertOpen = false">Close alert</Button>
      </template>
    </fw-alert>
  </template>
</Modal>

<Button @click="open = true">
  Open modal
</Button>

Modal content Alert content Close alert Cancel Ok Open modal