[SOLVED] Q-Drawer, collapse to width



  • Hi all. Is it possible to collapse a q-drawer to a certain width? What I would like in my q-drawer is put a q-list in the first column (just icons) and then in the second column in the q-drawer add a q-list which will change based on a session variable which contains an application section. The collapse should then only collapse the second column. Or is it better to use two q-drawers somehow?



  • Does the breakpoint prop of QDrawer solve your problem?
    http://quasar-framework.org/components/layout-drawer.html

    Otherwise I am not realy sure what you want to achieve 😃



  • Hello. I looked at breakpoint but it doesn’t seem to do what I would like. Let me put a bit of html code to explain. I removed header and footer for that is no problem.

    <div>
    <div ‘drawer’>
    <div>
    left column 1 with some link icons
    </div>
    <div>
    left column two with the list of the item clicked in left column one
    </div>
    </div>
    <div>
    content pane
    </div>
    </div>

    So the idea is that the div with ‘drawer’ is the layout-drawer (if that is what to use). In it I’ll put two parts, namely a list with buttons going down and then in the second a list with items related to the button clicked in column one. What I would like is when I click the button to collapse the drawer it will collapse to a width to show column one. Normally it collapses all the way.

    Or should I use the ‘flex’ with this?



  • Ah. I know what to change @a47ae . If you have a q-drawer, with a q-button to collapse it, then generated ‘aside’ get this class ‘.q-layout-drawer-left.on-screen’. When you have a button to hide it, the class ‘transform’ entry becomes -100%. I need to change that to something else.



  • Nearly have it. I made this class .micpMenu.q-layout-drawer-left.off-screen {transform translateX(-50%)} which is working. It moves to the left to 50%. But I want the transformation to start at the right so the left part stays.



  • got it working with two q-drawers 🙂



  • can you share me the wroking codes ? i used breakpoint but doesnt seem to work .please!


Log in to reply
 

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.