Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: vertical support for tabs component #5609

Closed
wants to merge 2 commits into from

Conversation

Dakotys
Copy link
Contributor

@Dakotys Dakotys commented May 3, 2024

I felt like this was missing from tabs component and decided to add possible implementation of mentioned functionality myself.
To use it just add vertical attribute to <md-tabs> and they are displayed vertically with indicator staying on bottom of the individual tabs.
I also added vertical attribute to <md-primary-tab> and <md-secondary-tab> so the indicator can be put sideways.
The only missing thing is maybe updated documentation.
#5608

@Dakotys Dakotys changed the title Vertical support for tabs component feat: Vertical support for tabs component May 3, 2024
@Dakotys
Copy link
Contributor Author

Dakotys commented May 3, 2024

The only inconvenience may be that by default <md-tabs> has for some reason no background-color and instead each tab has its own background-color so when the height of <md-tabs> is set to for example 100vh the part without tabs has no color, but that can be easily solved by just adding background-color to .

I think that should be the default behavior and it would be easier to set as background some gradient or make it glassmorphic. But maybe there is some reason for which it is the way it is. But it is still possible, it just requires to set --md-sys-color-surface for each tab to 'none'.

@Dakotys Dakotys changed the title feat: Vertical support for tabs component feat: vertical support for tabs component May 4, 2024
@asyncLiz
Copy link
Collaborator

asyncLiz commented May 7, 2024

Thank you for your contribution! Unfortunately though, this doesn't align with Material's guidelines for tab.

The component pattern I think you're looking for is a navigation rail. We haven't built that one yet, but it'd be much more involved than making the current tabs vertical.

While we can't accept this, you can always class MyVerticalTab extends MdTab to add this functionality for your app!

@asyncLiz asyncLiz closed this May 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants