@mozaic-ds/vue
Version:
Mozaic-Vue is the Vue.js implementation of ADEO Design system
31 lines (22 loc) • 1.4 kB
Markdown
# MModal
A modal is a dialog window that appears on top of the main content, requiring user interaction before returning to the main interface. It is used to focus attention on a specific task, provide important information, or request confirmation for an action. Modals typically include a title, description, and primary/secondary actions and should be used for single, focused tasks to avoid disrupting the user experience.
## Props
| Name | Description | Type | Default |
| --- | --- | --- | --- |
| `open` | if `true`, display the modal. | `boolean` | - |
| `title*` | Title of the modal. | `string` | - |
| `description` | Description of the modal. | `string` | - |
| `closable` | if `true`, display the close button. | `boolean` | `true` |
| `scroll` | if `false`, lock the scroll when open. | `boolean` | `true` |
| `closeOnOverlay` | if `true`, close the modal when clicking the overlay. | `boolean` | - |
## Slots
| Name | Description |
| --- | --- |
| `icon` | Use this slot to insert an icon next to the title of the modal. |
| `default` | Use this slot to insert the content of the modal. |
| `link` | Use this slot to insert a link in the footer. |
| `footer` | Use this slot to insert buttons in the footer. |
## Events
| Name | Description | Type |
| --- | --- | --- |
| `update:open` | Emits when the modal display changes, updating the modelValue prop. | [value: boolean] |