添加按钮以导航选项卡 |角材料

Question

我正在尝试在每个选项卡上显示数据，但问题是我拥有的数据相对较大，无法放入单个屏幕。

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

有什么办法可以在标签的边缘添加按钮或添加水平滚动条使其可滚动？

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

谢谢

Answer 1

您可以通过 Angular 材质选项卡来解决它。这里是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>

您可以在此处使用任何 mat-icon 类来更改按钮图标。您可以使用此链接https://material.io/resources/icons/?style=baseline。

希望它能解决您的问题。