index.md

Modal

Prop	Data type	Required?	Default	Description
title	string	Yes		Modal title
v-model	true | false	Yes		Should the modal be open

Modal open

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

<fw-button @click="open = true">
  Open modal
</fw-button>

Modal content Open modal

Modal actions

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

Modal content Cancel Ok Open modal

Nested modals

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

Nested modal content Open nested modal Open modal

Alert inside 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>

Modal content Alert content Close alert Cancel Ok Open modal