QDrawer prop: show-if-above

folami

I don’t wanna display the q-drawer @initial rendering
and I tried :show-if-above=“false” but it wouldnt work?
Please is there a way to disable this?

s.molinari

Try using behavior = "mobile".

Scott

folami

@s-molinari well, i tried your approach it works but i couldn’t control other props such overlay and breakpoint and to hide qdrawer under toolbar.
but i found myself a quark solution:

mounted () {
  leftDrawer = true
  setTimeout(() => {
    leftDrawer = false
   }, 0)
}

Please, I would like to know if there is a better way to do this

s.molinari

Try this…

<template>
  <q-layout view="hHh lpR fFf">

    <q-header elevated class="bg-primary text-white" height-hint="98">
      <q-toolbar>
        <q-btn dense flat round icon="menu" @click="left = !left" />

        <q-toolbar-title>
          <q-avatar>
            <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
          </q-avatar>
          Title
        </q-toolbar-title>
      </q-toolbar>

      <q-tabs align="left">
        <q-route-tab to="/page1" label="Page One" />
        <q-route-tab to="/page2" label="Page Two" />
        <q-route-tab to="/page3" label="Page Three" />
      </q-tabs>
    </q-header>

    <q-drawer show-if-above v-model="left" side="left" bordered>
      <!-- drawer content -->
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>

    <q-footer elevated class="bg-grey-8 text-white">
      <q-toolbar>
        <q-toolbar-title>
          <q-avatar>
            <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
          </q-avatar>
          Title
        </q-toolbar-title>
      </q-toolbar>
    </q-footer>

  </q-layout>
</template>

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

Scott

bago

I tried the s.molinari solution but still didn’t work.
I had to explicitly add behavior=“desktop” with :show-if-above=“false” to get it work properly.

q-drawer(
      v-model="drawer"
      side="right"
      behavior="desktop"
      :show-if-above="false"
      bordered
    )

Hope that will save people time !

Bago…

AlanHo

Thank you bago, Having :show-if-above=“false” does the job for me

deadly

@bago this solution worked me as the prop show-if-above had no effect.
They should update the description to clarify more the inner workings of the flag as the current description doesn’t match:
Force 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

bago

@deadly Yeah I know, we should contact the dev team to address the issue properly but I had no time so far to do it.
Will open an issue on their gitHub when I will have time. Meantime, I’m glad I saved your time ;).