search

angular / components

Component infrastructure and Material Design components for Angular
https://material.angular.io
MIT License
24.2k stars 6.69k forks source link

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

Open guyyst opened 4 years ago

guyyst commented 4 years ago

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 for attempts at solving the issue.

blyndcide commented 3 years ago

Will this just be added in MDC Tabs?

SightAndSound-Roger commented 3 years ago

I've been waiting for this for ages, been using the @angular-mdc but it's discontinued as angular material should be supporting all functionality. Any ETA when we can expect this feature?

mhosman commented 3 years ago

I'm also waiting for this.

angular-robot[bot] commented 2 years ago

Just a heads up that we kicked off a community voting process for your feature request. There are 20 days until the voting process ends.

Find more details about Angular's feature request process in our documentation.

angular-robot[bot] commented 2 years ago

Thank you for submitting your feature request! Looks like during the polling process it didn't collect a sufficient number of votes to move to the next stage.

We want to keep Angular rich and ergonomic and at the same time be mindful about its scope and learning journey. If you think your request could live outside Angular's scope, we'd encourage you to collaborate with the community on publishing it as an open source package.

You can find more details about the feature request process in our documentation.

JWess commented 1 year ago

I'd also love to see this. Scrollable tabs are the standard.

anisabboud commented 4 days ago

When swiping on the mat-tabs header, the tab bar should scroll horizontally (to show the hidden tabs). Currently, when there are several tabs, you have to keep pressing the ">" arrow, which is not intuitive on mobile.

https://material.angular.io/components/tabs/examples

Related

JWess commented 2 days ago

Some of Google's own products, such as Sheets, allow for touch scrolling as seen in the following GIF: chrome_tUCkmEVDEk

Also, the Material 3 tabs accessibility spec states that touch scrolling should be in place: image