UNPKG

@mozaic-ds/vue

Version:

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

github.com/adeo/mozaic-vue

adeo/mozaic-vue

32 lines (23 loc) • 1.37 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
# MDrawer A drawer is a sliding panel that appears from the side of the screen, providing additional content, settings, or actions without disrupting the main view. It is often used for filtering options, or contextual details. It enhances usability by keeping interfaces clean while offering expandable functionality. ## Props | Name | Description | Type | Default | | --- | --- | --- | --- | | `open` | If `true`, display the drawer. | `boolean` | - | | `position` | Position of the drawer. | `"left"` `"right"` | - | | `extended` | If `true`, the drawer have a bigger width. | `boolean` | - | | `back` | If `true`, display the back button. | `boolean` | - | | `title*` | Title of the drawer. | `string` | - | | `contentTitle` | Title of the content of the drawer. | `string` | - | | `scroll` | if `false`, lock the scroll when open. | `boolean` | `true` | | `closeOnOverlay` | if `true`, close the drawer when clicking the overlay. | `boolean` | - | ## Slots | Name | Description | | --- | --- | | `default` | Use this slot to insert the content of the drawer | | `footer` | Use this slot to insert buttons in the footer | ## Events | Name | Description | Type | | --- | --- | --- | | `back` | Emits when click back button of the drawer. | [] | | `update:open` | Emits when the drawer open state changes, updating the modelValue prop. | [value: boolean] |