Добавить кнопки для навигации по вкладкам | Angular Материал

Question

Я пытаюсь отображать данные на каждой вкладке, но проблема в том, что данные, которые у меня есть, относительно велики, чтобы поместиться на одном экране.

Я ищу способ сделать вкладки прокручиваемыми, чтобы что я могу прокручивать данные.

Есть ли способ добавить кнопки по краям вкладок или добавить горизонтальную полосу прокрутки, чтобы сделать ее прокручиваемой?

Что-то вроде этого, который реагирует тоже.

Спасибо

Answer 1

Вы можете решить это с помощью Angular вкладок материалов. Вот документация angular.

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

Помните, вы должны импортировать MatTabModule в свой модуль angular, как показано ниже:

Я добавил его в свой проект, и образец изображения выглядит следующим образом:

Кроме того, если вы хотите добавить кнопку вместо текста, вы также можете это сделать. Вот вам образец изображения:

Вот пример кода для этого:

<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>

Вы можете использовать любой коврик. -icon здесь, чтобы изменить значок кнопки. Вы можете использовать эту ссылку https://material.io/resources/icons/?style=baseline.

Надеюсь, это решит вашу проблему.