modal
Basic Usage
This show the most basic usage a modal. By default, it doesn't really do anything...
Some modal content goes here.
Modal w/Title
Show the modal with a title.
Some modal content goes here.
Override Footer and Header
Show the modal with a title.
Some modal title
Some modal content goes here.
Cancel
Ok
Modal Types
The modal component provides a few helpers to make adding buttons easier based on the type of modal you want to display. There are 3 types of modal presets, "alert", "confirm", "prompt".
The alert modal comes with one button to accept the notification.
The confirm modal comes with two buttons, one to confirm the notification, and one to cancel.
The prompt modal comes with the same two buttons as confirm.
Targets
Most of the time you want to use a modal, its triggered to show by doing something. You can bind the modal to open/close with any element event. The default trigger is a `click`.
Click to show modal
{ }" @confirm="(event, modal) => { modal.close() }">
The alert modal comes with one button to accept the notification.
Triggers
You can change the event trigger used open the modals. This example will use the focus/blur events to toggle the modal.
Focus on me
The alert modal comes with one button to accept the notification.