How to get a rotated stack of q-expansion-items
-
Maybe it’s a crazy requirement or a bad idea, but I need a rotated stack of expansion items. “Rotated” means rotated by 270 degrees = 90 degrees to the right (means vertical items rather than horizontal ones). Each rotated/vertical expansion each item should open to the right rather than to the bottom of the page.
In the expanded area of each item, there are normally a couple of input-fields, which should render normally (top to bottom), once their rotated expansion items get opened. I started my code pen with a simpler use case, though (text only in the rotated items content, no input fields so far).
The header of each expansion item should, after the rotation, have about the same width as the height of the header of the item without the rotation. I’m ignoring for the moment how the header text of each expansion item is rendered/rotated, maybe that can be done in a second step, through special header-class CSS.
I’m a CSS beginner. I know there is CSS to rotate an element in a page. And found Quasar helper classes to rotate by 270 degrees (= 90 to the right). I tried these basics a bit, but the result is disappointing, so far.
Here is my code pen, forked from the Quasar basic expansion items sample, with my - so far - disappointing result: https://codepen.io/mickey58/pen/jOVbaea
I got the stack of expansion items rotated, but once any of the items gets opened, the whole stack of items does an unwanted shift. Probably there is some interference between my CSS and what Quasar does to compute and allocate space within the stack of items.
-
These quasar rotate classes could help:
https://quasar.dev/style/other-helper-classes#Orientation-Related
-
@dobbel - thanks. I already tried these classes when I started my code pen.
First I tried a rotate-270 to rotate the stack of expansion items, with a rotate-90 to rotate the content of an expansion item. Those rotations happen, but they come with strange shifts of the whole item stack, once an item is opened.
Next I changed the code pen with my own experimental rotations and translates, but the code still has those undesired shifts. See my code pen and open the first expansion item to watch the problem.
-
@mickey58 Maybe not exactly what you’re looking for, but something like this? https://github.com/yasinatesim/vue-horizontal-collapse
That was just the first hit for “vue horizontal accordion” and you might find others. While I think it would be a nice feature for quasar, you’re not limited to only the components quasar offers, so in the meantime you can probably find something that suits your needs.
-
@beets - thanks for this pointer. At a first glance it seems to do what I need.
Since I did quite amazing things with nested (and accordeon style) Quasar expansion items, it would be a bit unfortunate though to have to use another Vue component for this.
Another alternative might be q-carousel - maybe with imbedding an expansion-item within a carousel item.
-
@mickey58 You could open a feature request on github, although I’m sure the team is quite busy with the new release. I notice it’s also something that vuetify is lacking, as far as I can tell: https://vuetifyjs.com/en/components/expansion-panels/ so I think there’s probably some reason why it’s not as simple as it seems.
