使材质选项卡可滚动

Posted 2021-04-13

我在我的应用程序中使用了材料选项卡（mat-tab内部的mat-tab-group）当有多个选项卡可以显示时，会显示两个导航按钮以显示其他选项卡：

我的要求是让用户能够在标签栏上滚动，以便显示其他标签。

我试图做一些css更改但无法解决它。如果能给出任何解决方案或建议，我们将不胜感激。

答案

在这个stackblitz demo尝试我的解决方案。

First get a reference to the matTabGroup:

app.component.html

<mat-tab-group #tabGroup>
               ^^^^^^^^^  

app.component.ts

@ViewChild('tabGroup')
tabGroup;

Then listen to the mouse scroll wheel event and trigger a custom scroll function:

app.component.html

<mat-tab-group (wheel)="scrollTabs($event)" #tabGroup>
                        ^^^^^^^^^^^^^^^^^^  

app.component.ts

scrollTabs(event) {
  const children = this.tabGroup._tabHeader._elementRef.nativeElement.children;

  // get the tabGroup pagination buttons
  const back = children[0];
  const forward = children[2];

  // depending on scroll direction click forward or back
  if (event.deltaY > 0) {
    forward.click();
  } else {
    back.click();
  }
}

免责声明：此解决方案非常脆弱。 Angular Material选项卡不提供用于执行此操作的API。解决方案取决于可能在没有通知的情况下更改的内部引用（例如，此私有变量this.tabGroup._tabHeader）。此外，它还没有阻止页面滚动，只适用于垂直滚动。 （这两个可以解决。）