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
-
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…
-
Thank you bago, Having :show-if-above=“false” does the job for me
-
@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
-
@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 ;).