angular / angular/components

feat(Tabs): Tab list should be scrollable to match Material Design Guidelines

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

Description

#### Reproduction

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

Steps to reproduce:
1. Load above stackblitz in mobile view.
2. Try to grab and swipe the tabs left or right.
* Alternatively use `Shift` + `Mouse Scroll` to attempt to scroll the tabs left/right.

#### Expected Behavior

The tabs should be x-scrollable as defined in the spec: https://material.io/components/tabs (Switch from `Fixed` to `Scrollable` type)

#### Actual Behavior

Tabs can not be scrolled by swiping/shift scrolling.

This is mainly a big issue for mobile devices. As tapping the left and right buttons is much slower and unnatural than swiping over the tabs.
You can manually set `overflow-x: scroll` on the container, but that breaks as soon as you select another tab since angular applies translation to the whole thing. See [this stackoverflow ](https://stackoverflow.com/questions/57888846/set-horizontal-scroll-in-angular-material-tabs) for attempts at solving the issue.

Contributor guide

Open the contributing guide

Research direction

Start with the linked StackBlitz reproduction and compare the current tabs behavior with the Material Design tabs specification. Trace the Angular Material tabs implementation responsible for tab scrolling and translation, then verify that mobile swiping and Shift-plus-mouse-wheel scrolling work without breaking selection or positioning.

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
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.