No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    QDrawer prop: show-if-above

    Framework
    5
    8
    1833
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • F
      folami last edited by

      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?

      1 Reply Last reply Reply Quote 0
      • s.molinari
        s.molinari last edited by

        Try using behavior = "mobile".

        Scott

        F 1 Reply Last reply Reply Quote 0
        • F
          folami @s.molinari last edited by

          @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

          1 Reply Last reply Reply Quote 0
          • s.molinari
            s.molinari last edited by 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

            1 Reply Last reply Reply Quote 0
            • B
              bago last edited by

              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…

              D 1 Reply Last reply Reply Quote 2
              • A
                AlanHo last edited by

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

                1 Reply Last reply Reply Quote 0
                • D
                  deadly @bago last edited by

                  @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

                  1 Reply Last reply Reply Quote 0
                  • B
                    bago last edited by

                    @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 ;).

                    1 Reply Last reply Reply Quote 1
                    • First post
                      Last post