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

    Drawer - Always enable hiding

    Help
    6
    8
    3872
    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.
    • Xemoka
      Xemoka last edited by

      Hello,

      Inspired by previous drawer discussion, I’m curious if there’s a way to allow for a toggle of drawers when in large screen mode—not just when in mobile / small screen mode. I know of the ‘swipe-only’ attribute, however it would be nice to have it shown on screen and optionally hidden by button click (without using v-show and leveraging the animations already setup).

      I understand this might be a niche request, I wouldn’t be opposed to creating a custom component from the drawer.

      Thanks for your work, this is an excellent tool,
      Justin

      1 Reply Last reply Reply Quote 0
      • K
        keithjeb last edited by

        That should be easy to do - just use the standard show/hide buttons & avoid setting the CSS class. Alternatively you could set the new variable to like 2000px or something

        1 Reply Last reply Reply Quote 0
        • rstoenescu
          rstoenescu Admin last edited by rstoenescu

          @Xemoka Hi, maybe the name “swipe-only” is misleading, but kept along the time for backwards compatibility. You can still use a button to open/close it just like you would with a “normal” drawer. Take a look at button from top right from http://quasar-framework.org/quasar-play/android/index.html#/showcase/layout/drawer – source here: https://github.com/quasarframework/quasar-play/blob/master/src/components/showcase/layout/layout.vue

          Is this what you were looking for?

          1 Reply Last reply Reply Quote 0
          • Xemoka
            Xemoka last edited by

            That is what I am doing currently, however I would like it to be shown as a regular drawer, such as the one on the left in that example, but be able to be toggled in and out—I’m building a mapping app and putting a layer list in the drawer. It’s great on mobile since the drawer isn’t shown by default, but on desktop it’d be nice to be able to get it to hide from a shown position. Calling .open() / .close() on it when it’s not swipe-only doesn’t produce a desirable effect.

            Similar to the left drawer in your example with the ability to toggle it off.

            1 Reply Last reply Reply Quote 0
            • K
              keithjeb last edited by

              I think I know what you mean and have code for that in my current app (although I do it on the right not the left). Posting to remind me to post it up later

              1 Reply Last reply Reply Quote 1
              • D
                dlevin last edited by

                I worked around this by adding $drawer-screen-width-threshold = 9000px in themes/app.mat.styl

                The drawer will always be hidden and the button to toggle it will always be visible (on resolutions lower than 9000px wide)

                1 Reply Last reply Reply Quote 1
                • N
                  ninafar last edited by

                  hi guys . any solutions ? i need to hide the drawer on dekstop view . breakpoint doesnt seems to work

                  1 Reply Last reply Reply Quote 0
                  • S
                    smoke last edited by

                    data() {
                    return {
                    leftDrawerOpen: !this.$q.screen.lt.sm
                    }
                    …
                    onSelect(item) {
                    this.leftDrawerOpen = !this.$q.screen.lt.sm
                    …
                    }

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