quasar

{ "type": "component", "meta": { "docsUrl": "https://v1.quasar.dev/layout/drawer" }, "props": { "value": { "type": "Boolean", "desc": "Model of the component defining shown/hidden state; Either use this property (along with a listener for 'input' event) OR use v-model directive", "category": "model" }, "side": { "type": "String", "desc": "Side to attach to", "values": [ "left", "right" ], "default": "left", "examples": [ "right" ], "category": "behavior" }, "overlay": { "type": "Boolean", "desc": "Puts drawer into overlay mode (does not occupy space on screen, narrowing the page)", "category": "behavior" }, "width": { "type": "Number", "desc": "Width of drawer (in pixels)", "default": 300, "examples": [ ":width=\"350\"" ], "category": "style" }, "mini": { "type": "Boolean", "desc": "Puts drawer into mini mode", "category": "behavior" }, "mini-width": { "type": "Number", "desc": "Width of drawer (in pixels) when in mini mode", "default": 60, "examples": [ ":mini-width=\"100\"" ], "category": "style" }, "dark": { "type": "Boolean", "desc": "Notify the component that the background is a dark color", "category": "style", "addedIn": "v1.3.0" }, "mini-to-overlay": { "type": "Boolean", "desc": "Mini mode will expand as an overlay", "category": "behavior" }, "breakpoint": { "type": "Number", "desc": "Breakpoint (in pixels) of layout width up to which mobile mode is used", "default": 1023, "examples": [ 1200, ":breakpoint=\"1400\"" ], "category": "behavior" }, "behavior": { "type": "String", "desc": "Overrides the default dynamic mode into which the drawer is put on", "values": [ "default", "desktop", "mobile" ], "default": "default", "examples": [ "mobile" ], "category": "behavior" }, "bordered": { "type": "Boolean", "desc": "Applies a default border to the component", "category": "style" }, "elevated": { "type": "Boolean", "desc": "Adds a default shadow to the header", "category": "style" }, "persistent": { "type": "Boolean", "desc": "Prevents drawer from auto-closing when app's route changes", "category": "behavior" }, "show-if-above": { "type": "Boolean", "desc": "Forces drawer to be shown on screen on initial render if the layout width is above breakpoint, regardless of v-model; This is the default behavior when SSR is taken over by client on initial render", "category": "behavior" }, "content-class": { "type": [ "Array", "String", "Object" ], "desc": "Class definitions to be attributed to the drawer", "examples": [ "my-special-class", ":content-class=\"{ 'my-special-class': <condition> }\"" ], "category": "style" }, "content-style": { "type": [ "Array", "String", "Object" ], "desc": "Style definitions to be attributed to the drawer", "examples": [ "background-color: #ff0000", ":content-style=\"{ backgroundColor: '#ff0000' }\"" ], "category": "style" }, "no-swipe-open": { "type": "Boolean", "desc": "Disables the default behavior where drawer can be swiped into view; Useful for iOS platforms where it might interfere with Safari's 'swipe to go to previous/next page' feature", "category": "behavior" }, "no-swipe-close": { "type": "Boolean", "desc": "Disables the default behavior where drawer can be swiped out of view (applies to drawer content only); Useful for iOS platforms where it might interfere with Safari's 'swipe to go to previous/next page' feature", "category": "behavior" }, "no-swipe-backdrop": { "type": "Boolean", "desc": "Disables the default behavior where drawer backdrop can be swiped", "category": "behavior", "addedIn": "v1.1.7" } }, "slots": { "default": { "desc": "Default slot in the devland unslotted content of the component (overridden by 'mini' slot if used and drawer is in mini mode)" }, "mini": { "desc": "Content to show when in mini mode (overrides 'default' slot)" } }, "events": { "input": { "desc": "Emitted when showing/hidden state changes; Is also used by v-model", "params": { "value": { "type": "Boolean", "desc": "New state (showing/hidden)" } } }, "show": { "desc": "Emitted after component has triggered show()", "params": { "evt": { "type": "Object", "desc": "JS event object", "required": true } } }, "before-show": { "desc": "Emitted when component triggers show() but before it finishes doing it", "params": { "evt": { "type": "Object", "desc": "JS event object", "required": true } } }, "hide": { "desc": "Emitted after component has triggered hide()", "params": { "evt": { "type": "Object", "desc": "JS event object", "required": true } } }, "before-hide": { "desc": "Emitted when component triggers hide() but before it finishes doing it", "params": { "evt": { "type": "Object", "desc": "JS event object", "required": true } } }, "on-layout": { "desc": "Emitted when drawer toggles between occupying space on page or not", "params": { "state": { "type": "Boolean", "desc": "New state" } } }, "click": { "desc": "Emitted when user clicks/taps on the component and drawer is NOT in mobile mode; Useful for when taking a decision to toggle mini mode", "params": { "evt": { "type": "Object", "desc": "JS event object", "required": true } } }, "mouseover": { "desc": "Emitted when user moves mouse cursor over the component and drawer is NOT in mobile mode; Useful for when taking a decision to toggle mini mode", "params": { "evt": { "type": "Object", "desc": "JS event object", "required": true } } }, "mouseout": { "desc": "Emitted when user moves mouse cursor out of the component and drawer is NOT in mobile mode; Useful for when taking a decision to toggle mini mode", "params": { "evt": { "type": "Object", "desc": "JS event object", "required": true } } }, "mini-state": { "desc": "Emitted when drawer changes the mini-mode state (sometimes it is forced to do so)", "params": { "state": { "type": "Boolean", "desc": "New state" } }, "addedIn": "v1.1.3" } }, "methods": { "show": { "desc": "Triggers component to show", "params": { "evt": { "type": "Object", "required": false, "desc": "JS event object" } } }, "hide": { "desc": "Triggers component to hide", "params": { "evt": { "type": "Object", "required": false, "desc": "JS event object" } } }, "toggle": { "params": { "evt": { "type": "Object", "required": false, "desc": "JS event object" } }, "desc": "Triggers component to toggle between show/hide" } } }