angular / angular/components

feat(tabs): Enable rendering tabs list and tab content in independent locations

Open
#23,404 5 comments 6 reactions 0 assignees View on GitHub
area: material/tabs feature G needs: discussion P3
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Feature Description

Currently, `MatTabGroup` renders the tab content immediately below the list of tab labels:
```
[ Tab 1 ] [ Tab 2 ] [ Tab 3 ]
-----------------------------
Tab content
```
This new feature will enable consumers to specify a separate location where the tab content should be rendered.

#### Use Case

The goal is to render content between the tab labels and tab content.

Example:
```
[ Tab 1 ] [ Tab 2 ] [ Tab 3 ] [ Button ]
---------------------------------------------------
Tab content
```

Usage example:
```

Content 1
Content 2
Content 3

Button

```

#### Contribution

I have an in progress PR that I will link to this issue.

Contributor guide

Open the contributing guide

Research direction

Start with the MatTabGroup behavior described in the issue and review the provided usage example. Done means consumers can place tab content independently from the tab labels, with content rendered at the specified separate location.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
30/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.