QLayout allows you to configure your views as a 3x3 matrix, containing an optional Header and/or Footer. If you haven’t already, please read QLayout documentation page first.
||String||One of ‘left’ or ‘right’, depending on the Drawer position on Layout.|
||Number||Breakpoint (in pixels, defining window width) at which point the Drawer will be placed directly over the layout and won’t act as a mobile drawer anymore. Default is 992 (up to “sm”, including).|
||String||One of ‘default’, ‘desktop’, ‘mobile’. The last two override the breakpoint and makes Drawer act only as on desktop or only as on mobile modes, regardless of window width.|
||Boolean||(Quasar v0.15.7+) Disable hiding of Drawer during route changes.|
||Boolean||Disable ability to open Drawer by touch actions.|
||Boolean||Disable ability to close Drawer by touch actions. Useful if you have components in your Drawer which require touch actions. The backdrop will still work with touch actions.|
||Object||CSS Style in Object format for the Drawer container element.|
||String/Object/Array||CSS classes for the Drawer container element.|
||Boolean||(v0.15.11+) If drawer is in mini mode or not.|
||String||(v0.15.11+) CSS unit for drawer width when in mini mode. Default: ‘60px’|
The Vue Object notation for
content-style is mandatory.
If you’ve played with the layout in desktop mode, you might notice how the left and right sides / drawers magically hide, as you decrease the screen width. This is part of the smart responsiveness designed into Quasar’s layout component.
If you’d like to control how the left and right side / drawers work, you have a prop called
breakpoint on each QLayoutDrawer. This value represents the minimum size of the screen in pixels, before the Drawer is forced to float above the Layout. This is a fantastic and important function in maximizing screen real estate for smaller devices.
Also take a look at the
behavior property if you want the Drawer to act only as on a narrow screen or only as on a wide screen, effectively disable the breakpoint.
There’s the possibility to use
v-model to control the state of Drawer (opened/showing and closed/hidden).
Please note that the model can instantly get changed upon Drawer being rendered if the breakpoint requires it.
Requires Quasar v0.15.11+
Drawer can operate in two modes: ‘normal’ and ‘mini’, and you can switch between them by using the Boolean
mini property on QLayoutDrawer. Please note that “mini” mode does not apply when in “mobile” behavior.
There are some CSS classes that will help you customize the drawer when dealing with “mini” mode. These are very useful especially when using the “click” trigger:
||Hide when drawer is in “mini” mode.|
||Show only when drawer is in “mini” mode.|
You can also write your own CSS classes based on the fact that QLayoutDrawer has
q-layout-drawer-normal CSS class when in “normal” mode and
q-layout-drawer-mini when in “mini” mode. Also, when drawer is in “mobile” behavior, it gets
q-layout-drawer-mobile CSS class.
By default, when in “mini” mode, Quasar CSS hides a few DOM elements to provide a neat narrow drawer. But there may certainly be use-cases where you need a deep tweak. You can use the “mini” Vue slot of QLayoutDrawer just for that. The content of this slot will replace your drawer’s default content when in “mini” mode.
When in “mini” mode, if user clicks on Drawer then we switch to normal mode.