Angular材料如何制作<mat-tab />拖動以滾動選項卡 header

Question

如何使 Angular 材料拖動到滾動選項卡 header

所以我有一個有限的空間房地產和嬰兒車。 我想知道是否有一種簡單的方法可以使用戶可以拖動以滾動選項卡（除了能夠單擊滾動）。

這是一個工作示例： https://stackblitz.com/edit/angular-dqqbfx?file=package.json

您可以看到滑動確實有效，但我希望能夠滾動選項卡，以便用戶在鼠標按下時看到它們正在移動。

並縮小尺寸以查看箭頭滑塊。

謝謝

肖恩

Answer 1

標簽在mat-tab-label-container class 下生成，默認不滾動。

我通過更改 css 解決了這個問題。 我也需要:host::ng-deep因為它是生成的 DOM，而不是常規組件。

在my-component.scss ：

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

如果需要，您可以使用::webkit-scrollbar如果適用）自定義滾動條。