UNPKG

@mozaic-ds/vue

Version:

Mozaic-Vue is the Vue.js implementation of ADEO Design system

31 lines (22 loc) 1.4 kB
# 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] |