angular - 在角度材质选项卡中设置水平滚动

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>

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

解决方法：

（步骤 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 这里。

标签： angularangular-material

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：滚动的元素下方的滚动条，我们可以执行以下操作：

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

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

StackBlitz