Enable mat-tab scroll without arrows

Question

I am willing to reproduce tabs scrollable with a finger on mobile like Google page:

But with mat-tab (Material Design & Angular), I have two arrows displaying:

I managed to remove the arrows with disablePagination = true, however scrolling with finger is not working:

Anyone has a solution to make it work?

Code:

<mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third"> Content 3 </mat-tab>
  <mat-tab label="Fourth"> Content 4 </mat-tab>
  <mat-tab label="Fifth"> Content 5 </mat-tab>
  <mat-tab label="Sixth"> Content 6 </mat-tab>
  <mat-tab label="Seventh"> Content 7 </mat-tab>
  <mat-tab label="Eight"> Content 8 </mat-tab>
  <mat-tab label="Nineth"> Content 9 </mat-tab>
  <mat-tab label="Tenth"> Content 10 </mat-tab>
  <mat-tab label="Eleventh"> Content 11 </mat-tab>
  <mat-tab label="Twelves"> Content 12 </mat-tab>
  <mat-tab label="Thirteenth"> Content 13 </mat-tab>
  <mat-tab label="Forteenth"> Content 14 </mat-tab>
</mat-tab-group>

Try to enable overflow and customise overflow control bar to be like tab color. — Vasile Radeanu, Jan 28 '21 at 22:48
@Radeanu thanks for advice! Would you have some ressources to redirect me to do this? — LoWay, Jan 29 '21 at 10:24
My example: https://codepen.io/radeanu/pen/yLVLMMY Go to mobile for it to work. — Vasile Radeanu, Jan 29 '21 at 12:04
@Radeanu Nice workaround, but it doesn't solve my issue since I would loose benefits of mat-tab, especially the beautiful style (underlying, focus, ripples) — LoWay, Jan 29 '21 at 13:49

score 1 · Answer 1 · edited Aug 16 '22 at 15:32

1

I hope someone can use this:

::ng-deep.mat-tab-header-pagination-controls-enabled .mat-tab-header-pagination {
    display: none !important;
}

edited Aug 16 '22 at 15:32

Maciej Wojcik

2,115
2
28
47

answered Aug 11 '22 at 22:44

PabloRuiz117

11
2

Enable mat-tab scroll without arrows

1 Answers1