启用无箭头的 mat-tab 滚动

Question

我愿意在移动设备上重现可用手指滚动的选项卡，例如 Google 页面：

但是使用 mat-tab（材料设计和角度），我显示了两个箭头：

我设法用

disablePagination = true

删除了箭头，但是用手指滚动不起作用：

有人有办法让它工作吗？

代码：

<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>

Answer 1

我希望有人可以使用这个：

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

Answer 2

如果您只想删除禁用的箭头，您也可以这样做（在您的情况下，左箭头已被禁用，目前不执行任何操作）。此外，当您转到最后一个选项卡时，向右箭头将被禁用。

mat-tab-header .mat-tab-header-pagination:disabled { display: none; }