search

smastrom / vue-collapsed

🏋️‍♂️ CSS height transition from any to auto and vice versa for Vue and Nuxt. Accordion ready.
https://vue-collapsed.pages.dev
MIT License
123 stars 8 forks source link

Horizontal Collapse #12

Closed h-sigma closed 1 year ago

h-sigma commented 1 year ago

Great component. Simple and sweet. Any plans for horizontal collapse? Would you review a PR if I find the time to add it on my own / any strong recommendations on how to code the horizontal variant?

smastrom commented 1 year ago

Hi Harshdeep, thank you for your interest in the package and sorry for getting back to you so late.

Generally, transitioning the width requires more measures than transitioning the height.

For example, if you resize the width of a div containing 5 lines of text from 400px to 200px, you will notice that the number of lines is going to increase to 9-10 and vice versa. But imagine also any other flex/grid layout inside of the Collapse. In short, a width change is most likely going to trigger an height change and a layout shift.

Some hacks could be done to prevent layout shifts while transitioning but this is something we don't wanto to do for two main reasons:

  1. We want the package to be "simple and sweet" (as you defined it).
  2. We have no clue of the inner elements and styles of Collapse.

For this reason, I have no plans on an horizontal collapse.

Thank you again for your interest and enjoy!