2

How to make Angular material drag to scroll tab header

So I have a limited space real estate and getting with strollers. I was wondering if there is an easy way to make it so users can drag to scroll the tabs (in addition to having the ability to just click to scroll).

enter image description here

Here is a working example: https://stackblitz.com/edit/angular-dqqbfx?file=package.json

you can see that swipe DOES work, but I would like to be able to scroll the tabs so the user sees that they are moving while mouse is down.

and reduce size to see the arrow sliders.

thanks

Sean

born2net
  • 24,129
  • 22
  • 65
  • 104
  • Does this answer your question? [How to enable swipe gesture to move to next tab for tabs module in Angular Material? (looking for a solution that works for more than 2 tabs)](https://stackoverflow.com/questions/43751187/how-to-enable-swipe-gesture-to-move-to-next-tab-for-tabs-module-in-angular-mater) – spots Apr 20 '20 at 14:52
  • It's working for me in your link. I was able to swipe using using the browser to emulate a smart phone and my actual smart phone. – spots Apr 20 '20 at 15:13
  • I added an example and while swipe DOES work, I'd like the tabs to be moving (animating) in the direction the swipe is directing to. Sorry if I didn't explain properly. – born2net Apr 20 '20 at 15:17
  • @born2net found a solution? – JNF Jun 13 '22 at 09:19

1 Answers1

0

The labels are generated under mat-tab-label-container class, which does not scroll by default.

I solved this by changing the css. I needed :host ::ng-deep too because it's the generated DOM, not regular component.

In my-component.scss:

:host ::ng-deep .mat-tab-label-container {
  overflow: scroll;
}

You can customize the scrollbar if needed using ::webkit-scrollbar if applicable.

JNF
  • 3,696
  • 3
  • 31
  • 64