angular - 在 Angular Material 选项卡中设置水平滚动

Question

如果我们在手机浏览器中看到下面的标签，有两个按钮[分页控件](第一个在右边，另一个在左边)

<mat-tab-group mat-stretch-tabs class="example-stretched-tabs mat-elevation-z4">
    <mat-tab label="Item-1"> Content 1 </mat-tab>
    <mat-tab label="Item-2"> Content 2 </mat-tab>
    <mat-tab label="Item-3"> Content 3 </mat-tab>
    <mat-tab label="Item-4"> Content 4 </mat-tab>
    <mat-tab label="Item-5"> Content 5 </mat-tab>
    <mat-tab label="Item-6"> Content 6 </mat-tab>
    <mat-tab label="Item-7"> Content 7 </mat-tab>
    <mat-tab label="Item-8"> Content 8 </mat-tab>
    <mat-tab label="Item-9"> Content 9 </mat-tab>
    <mat-tab label="Item-10"> Content 10 </mat-tab>
</mat-tab-group>

我将删除这两个按钮并改用滚动。

解决方法:

(step-1) 使用以下代码删除两个按钮:

ngAfterViewInit(): void {
  document.getElementsByClassName('mat-tab-header-pagination-before')[0].remove();
  document.getElementsByClassName('mat-tab-header-pagination-after')[0].remove();
}

(第 2 步) 将以下样式放入 style.css:

.mat-tab-label-container {
    display: flex;
    flex-grow: 1;
    overflow: hidden;
    z-index: 1;
    overflow-x: scroll !important;
}

问题:

上述方法的问题是当我们选择item-10时无法向左滚动

StackBlitz Here.

Answer 1

我们可以将它应用于 .mat-tab-header 类，而不是将溢出样式应用于 .mat-tab-label-container。

::ng-deep .mat-tab-header {
  overflow-x: scroll !important;
}

::ng-deep .mat-tab-label-container { 
  overflow: visible !important;
}

此外，如果你想删除使用 overflow-x: scroll 的元素下方的滚动条，我们可以执行以下操作:

::ng-deep .mat-tab-header::-webkit-scrollbar {
  display: none;
}

解决方案:item-10无法向左滚动的问题通过以上样式解决。我已经 fork @AbolfazlR 存储库并进行了上述更改。下面是工作示例

StackBlitz