QDrawer prop: show-if-above



  • 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?



  • Try using behavior = "mobile".

    Scott



  • @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



  • 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


Log in to reply