添加按钮以导航选项卡 | Angular Material

Question

我试图在每个选项卡上显示数据，但问题是我拥有的数据相对较大，无法容纳在一个屏幕中。

我正在寻找一种使选项卡可滚动的方法，以便我可以滚动数据。

有没有办法在选项卡的边缘添加按钮或添加水平滚动条使其可滚动？

类似这样的东西，也是响应式的。

谢谢

Answer 1

可以通过Angular material Tabs解决。这里是 angular.

的文档

https://material.angular.io/components/tabs/examples

记住，您必须在 angular 模块上导入 MatTabModule，如下所示：

我已经将它添加到我的项目中，示例图像如下所示：

此外，如果您想添加一个按钮而不是文本，您也可以这样做。这是给您的示例图片：

此处，示例代码为

<mat-tab-group>
  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon class="example-tab-icon">thumb_up</mat-icon>
      First
    </ng-template>
    Content 1
  </mat-tab>

  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon class="example-tab-icon">thumb_up</mat-icon>
      Second
    </ng-template>
    Content 2
  </mat-tab>

  <mat-tab>
    <ng-template mat-tab-label>
      <mat-icon class="example-tab-icon">thumb_up</mat-icon>
      Third
    </ng-template>

    Content 3
  </mat-tab>
</mat-tab-group>

您可以在此处使用任何垫子图标 class 来更改按钮图标。你可以使用这个 link https://material.io/resources/icons/?style=baseline .

希望它能解决您的问题。

添加按钮以导航选项卡 | Angular Material

Add Buttons to navigate Tabs | Angular Material

tabs

angular-material