Layout Drawer     

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.

Installation

Edit /quasar.conf.js:

framework: {
  components: [
    'QLayoutDrawer'
  ]
}

Basic Usage

<q-layout>
  ...
  <q-layout-drawer side="left">
    <!-- drawer content -->
  </q-layout-drawer>
  ...
</q-layout>

QLayoutDrawer Vue Properties

Styling Examples

<q-layout-drawer
  content-class="bg-grey-3"
  :content-style="{padding: '20px'}"
  side="left"
>
  ...
</q-layout-drawer>

The Vue Object notation for content-style is mandatory.

<q-layout-drawer
  :content-class="['bg-grey-3', 'q-pa-sm']"
  side="left"
>
  ...
</q-layout-drawer>

The Breakpoint

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.

Tip
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.

Using v-model

There’s the possibility to use v-model to control the state of Drawer (opened/showing and closed/hidden).

<template>
  ...
  <q-layout-drawer v-model="drawer">
    ...
  </q-layout-drawer>
  ...
  <q-btn
    @click="drawer = !drawer"
    flat
    round
    dense
    icon="menu"
  />
  ...
</template>

<script>
export default {
  data () {
    return {
      // "false" means hidden
      // "true" means visible
      drawer: true
    }
  }
}
</script>

Please note that the model can instantly get changed upon Drawer being rendered if the breakpoint requires it.

Mini mode

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.

CSS classes

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:

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.

Slots

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.

<template>
  ...
  <q-layout-drawer
    :mini="miniState"
  >
    <!-- drawer content when not "mini" -->

    <div slot="mini">
      <!-- drawer content when in "mini" mode -->
    </div>
  </q-layout-drawer>
  ...
</template>

<script>
export default {
  data () {
    return {
      miniState: false
    }
  }
}
</script>

Example with mouseover/mouseout trigger

<template>
  ...
  <q-layout-drawer
    :mini="miniState"
    @mouseover="miniState = false"
    @mouseout="miniState = true"
  >
    <!-- drawer content -->
  </q-layout-drawer>
  ...
</template>

<script>
export default {
  data () {
    return {
      miniState: false
    }
  }
}
</script>

Example with click trigger

When in “mini” mode, if user clicks on Drawer then we switch to normal mode.

<template>
  ...
  <q-layout-drawer
    :mini="miniState"
    @click.capture="drawerClick"
  >
    <!-- drawer content -->
    <!--
      we also need a way for user to be able to switch
      back to "mini" mode, so here's an example with a button
      which gets hidden when on "mini" mode:
    -->
    <q-btn
      class="q-mini-drawer-hide"
      label="Go to mini state"
      @click="miniState = true"
    />
  </q-layout-drawer>
  ...
</template>

<script>
export default {
  data () {
    return {
      miniState: false
    }
  },
  methods: {
    drawerClick (e) {
      // if in "mini" state and user
      // click on drawer, we switch it to "normal" mode
      if (this.miniState) {
        this.miniState = false

        // notice we have registered an event with capture flag;
        // we need to stop further propagation as this click is
        // intended for switching drawer to "normal" mode only
        e.stopPropagation()
      }
    }
  }
}
</script>