Drawer with splitter?

[rubs]

Hi, I’m trying to create a layout with a drawer that works as a splitter. For that I’m using a QDrawer and a QPageContainer as the #before and #after slots of QSplitter, respectively, and have the QDrawer width updated in real time as the splitter moves. Seems to work at first, but there are problems. First, when the drawer is collapsed, the splitter still shows up, and the QPageContainer elements are in the wrong position. Also, the contents move twice as fast as they should.

Here is a pen that shows all these problems.

I suspect there should be a better and more elegant way to do it, but I found none, not here, not or on the net. Any pointers?

Many thanks in advance!

[rubs]

bump
Any ideas?

[metalsadman]

@rubs here, also fixed some quirks when q-page-container is adding padding left same as q-splitter’s left width https://codepen.io/metalsadman/pen/YzPgKML

[qyloxe]

@metalsadman said in Drawer with splitter?:

@rubs here, also fixed some quirks when q-page-container is adding padding left same as q-splitter’s left width https://codepen.io/metalsadman/pen/YzPgKML

Wow! This is some non-trivial layout! It looks like Quasar needs some themes/layouts gallery with such contributions. Maybe in the future it will be possible to “add” layout/theme as one can now “add” app extensions?

[rubs]

Great! Thanks a lot. I’ll change my code accordingly. Always learning from you guys.

[chyde90]

This is awesome! I’m gonna put it in my project, too

[julioferraz]

It was very good. I tried to make the embedded splitter, it works but when I close it the middle part closes too. I tried to change the css classes, but I couldn’t.

https://codepen.io/julioferraz/pen/oNbRQgw

Automatically translated.