Modal

• Demo
• Props
• Events

Demo

Hello world!

This is the body.

Close

<button
  class="btn btn-primary"
  @click="showModal = true"
>
  Show modal
</button>

<modal
  title="Hello world!"
  v-model="showModal"
  @closed="showModal = false"
>
  This is the body.
</modal>

Props

value

Type Boolean Default false Description Used to open or close the modal

title

Type String Default Modal title Description Title of the modal

body	Type String Default One fine body... Description The body (content) of the modal

id	Type String Description The id attribute of the modal

header

Type Boolean Default true Description Controls visibility of the header

header-close-button

Type Boolean Default true Description Controls visibility of the close button in the header

footer

Type Boolean Default true Description Controls visibility of the footer

confirm-button

Type Boolean Default true Description Controls visibility of the "Confirm" button

confirm-button-label

Type String Default Confirm Description "Confirm" button label

close-on-confirm

Type Boolean Default true Description Close the modal on "Confirm" button click?

close-button

Type Boolean Default true Description Controls visibility of the "Close" button

close-button-label

Type String Default Close Description "Close" button label

Events

opened

Parameters - Description Emitted when the modal gets opened

closed

Parameters - Description Emitted when the modal gets closed

confirmed

Parameters - Description Emitted on "Confirm" button click