Quasar: [Request] Vertical Tabs

Created on 20 Aug 2018  路  5Comments  路  Source: quasarframework/quasar

Request

Would you please consider adding support for vertical tabs?

It would be nice if...

  • they still had the animated bar on the side.
  • we could choose a side - left or right (like we can choose top and bottom now).
  • there was the possibility of having the tabs switch to horizontal for larger screen sizes.

Use-case

For my prototype, I was using vertical tabs in order to make better use of screen real estate:

image

Compare the above with the Quasar (mega-WIP) version below:

capture image

Maybe I would be able to achieve this just by targeting the correct classes and styling them myself but I'm not so sure it's even possible? Even if it is, I feel like it'd be far easier to support this from within the framework.

Alas, I realise that Material design doesn't exactly have a concept of vertical tabs. Still, I have seen vertical tabs in the wild that adhere to the guidelines as best they can. And maybe there are others who would also support the addition of vertical tabs.

Any :+1:s and/or input appreciated.

Maybe I will have to create my own components for this but I just thought that it doesn't hurt to ask!

Most helpful comment

+1 .. I am also looking for vertical tabs.

@pdanpdan anyway you could check on that link, I am interested in your solution.

All 5 comments

You can do it like this: https://codepen.io/pdanpdan/pen/GXNrpv
Feel free to style it some more to fit your needs.

You can do it like this: https://codepen.io/pdanpdan/pen/GXNrpv
Feel free to style it some more to fit your needs.

@pdanpdan That link is dead

+1 .. I am also looking for vertical tabs.

@pdanpdan anyway you could check on that link, I am interested in your solution.

I'd also like to work with vertical tabs. @pdanpdan can you please give us a working link?

Should have closed this ticket since it's now part of Quasar v1 beta core due to @rob-64's work.

Was this page helpful?
0 / 5 - 0 ratings