Components: [Tabs] Allow tabs to show vertical labels

[RostyslavAH]

Bug, feature request, or proposal:

proposal

What is the expected behavior?

It display horizontally in any case and I can`t change this behavior from css or even code. I want display it in this way:
http://joxi.net/8An96qkiPVGe2O

What is the use-case or motivation for changing an existing behavior?

Sometimes I need to display sidenav (but designed as tabs) aligned to center or as part of inner block, but in column layout. It would be great add some property for tabs such as direction

Is there anything else we should know?

In addition, I used tabs for navigation between routes:

<nav md-tab-nav-bar>
  <a md-tab-link
     *ngFor="let link of navLinks"
     [routerLink]="link"
     routerLinkActive #rla="routerLinkActive"
     [active]="rla.isActive">
    {{tabLink.label}}
  </a>
</nav>

I made this possible in this way:

.mat-tab-links {
        display: flex;
        position: relative;
        flex-direction: column; //can`t change this filed by myself
    }

[mattheiler]

I would love this feature.

Might I request that this is designed to be able to switch between stacked and inline styles, so that the tabs can reoriented, as necessary?

<md-tab-group [stacked]="true">
  <md-tab label="One">
    <h1>Some tab content</h1>
    <p>...</p>
  </md-tab>
  <md-tab label="Two">
    <h1>Some more tab content</h1>
    <p>...</p>
  </md-tab>
</md-tab-group>

Or maybe...

<md-tab-group [mode]="stacked">
  <md-tab label="One">
    <h1>Some tab content</h1>
    <p>...</p>
  </md-tab>
  <md-tab label="Two">
    <h1>Some more tab content</h1>
    <p>...</p>
  </md-tab>
</md-tab-group>

[RostyslavAH]

I think direction will be more understandable.
Also if you want to do it, won`t forget add animation for side line (or underline in horizontal case).
And i see you want use standart declaration. it can occur some issues with width of nav and content blocks. It will be better to use declaration for md-tab-group. Or make possible changes width with css

[frankspin89]

Vertical tabs aren't part of Material Layout Guidelines. So I don't see any reason to include this feature to Material2 library? (https://material.io/guidelines/components/tabs.html)

Is there any reason why you don't use a menu component or list component?

[RostyslavAH]

Yes, main reason that it`s web and clients like some custom features. List requires addition styling, but tabs dont

[mattheiler]

My personal use case would be for a card with tabs that is reoriented as the screen sizes changes (i.e., horizontal/stacked [on desktop] to vertical/inline [on mobile]).

[Bhushan001]

is this feature implemented already?

[paqogomez]

I'll add my use case to this as well. I have a monitor powered with raspberry pi and chromium in kiosk mode mounted on my wall. I want to be able to have vertical tabs down the side of the monitor that each display a different page. (eg. calendar, smart home settings, recipies, etc. ). Tabs across the top do not work in this instance and a list takes up too much screen space.

[naveenpatibanda]

Is this feature implemented yet?

[andrewseguin]

Since this is not part of the spec, it's not clear how this would work. I imagine the ink bar would be to the left/right of the labels depending on which side they are on. How would you see the animations working? They cannot show left-to-right anymore, and up-to-down would be jarring.

It seems that this would be more suited for the tab-nav-bar rather than the tab-group

[weijyewang]

This feature is much needed. Ng Prime has it but the styling is pretty ugly: https://www.primefaces.org/primeng/#/tabview

[rushendra1987]

Hi, is this feature implemented now? What is the status? Please respond.

[ppppersy]

is this feature implemented? thanks

[banha-serhii]

Only with css redesign, but not functionality, like horizontal

[jpike88]

Vertical tabs aren't part of Material Layout Guidelines. So I don't see any reason to include this feature to Material2 library

How about the reason that it's in high demand, and there's a clear use case for it?

[banha-serhii]

I fully support what is written above

[robertbrower-technologies]

https://stackblitz.com/edit/angular-sfjaox

You're welcome.

[vpArth]

There is correct implementation in react material-ui: https://material-ui.com/ru/components/tabs/#vertical-tabs
Nice control with orientation input property

Last solution can be sufficient if mat-ink-bar will track not CSS left only, but also vertical position(CSS top, for example)

[banha-serhii]

There is correct implementation in react material-ui: https://material-ui.com/ru/components/tabs/#vertical-tabs
Nice control with orientation input property

@vpArth I do not know what is easier:
Study the react of losing (in my case 1 year) on the Angular, or write the crutch that was described above, because dear @frankspin89 wrote that it is not part of the guidelines or rework wit h angular community and finally add this functionality?)

[tgilino]

@frankspin89 @andrewseguin I believe this has been essentially added to the material guidelines now via "Navigation rail", although as pointed out previously it has been also already been implemented in react material-ui: "Vertical tabs".