[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
breakpointprop ofQDrawersolve your problem?
http://quasar-framework.org/components/layout-drawer.htmlOtherwise 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!
