angular / angular/components

[Tabs] Allow tabs to show vertical labels

Open
#3,223 19 comments 55 reactions 0 assignees View on GitHub
area: material/tabs feature P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### 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:
```


{{tabLink.label}}

```

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

Contributor guide

Open the contributing guide

Research direction

Start with the md-tab-nav-bar entry point and the .mat-tab-links styling shown in the issue, then trace how tab links are laid out. Done means tabs can opt into vertically oriented labels while preserving the existing horizontal behavior.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.