Components
Dialog
A modal window rendered into <body>. Closes on Escape, the close button or a backdrop click unless it is persistent.
import { DialogComponent, DialogHeaderComponent, DialogContentComponent, DialogFooterComponent } from '@/MigsLab/shared'
Example
Result: none
const isDialogOpen = ref(false)
<DialogComponent v-model="isDialogOpen">
<DialogHeaderComponent>Confirm delete</DialogHeaderComponent>
<DialogContentComponent>Are you sure?</DialogContentComponent>
<DialogFooterComponent>
<ButtonComponent color="ghost" @click="isDialogOpen = false">Cancel</ButtonComponent>
<ButtonComponent color="danger" @click="Confirm_Click">Delete</ButtonComponent>
</DialogFooterComponent>
</DialogComponent>
<DialogComponent v-model="isOpen" is-persistent :show-close="false" max-width="24rem">
...
</DialogComponent>API
Props
| Name | Type | Default | Description |
|---|---|---|---|
v-model | boolean | false | Whether the dialog is open. |
isPersistent | boolean | false | Ignore backdrop clicks and the Escape key. |
showClose | boolean | true | Show the close (×) button in the corner. |
maxWidth | string | '32rem' | Maximum width of the dialog panel. |
Slots
| Name | Description |
|---|---|
DialogComponent: default | Dialog sections. |
DialogHeaderComponent: default | Title. |
DialogContentComponent: default | Body text or form. |
DialogFooterComponent: default | Actions, right aligned. |