Свойства угловых материалов mat-align-tabs не выровнены должным образом

Question

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

<mat-tab-group mat-align-tabs="start">
      <mat-tab label="First">Content 1</mat-tab>
      <mat-tab label="Second">Content 2</mat-tab>
      <mat-tab label="Third">Content 3</mat-tab>
    </mat-tab-group>

    <mat-tab-group mat-align-tabs="center">
      <mat-tab label="First">Content 1</mat-tab>
      <mat-tab label="Second">Content 2</mat-tab>
      <mat-tab label="Third">Content 3</mat-tab>
    </mat-tab-group>

    <mat-tab-group mat-align-tabs="end">
      <mat-tab label="First">Content 1</mat-tab>
      <mat-tab label="Second">Content 2</mat-tab>
      <mat-tab label="Third">Content 3</mat-tab>
    </mat-tab-group>

Мой класс CSS следующий:

.mat-tab-group {
    margin-bottom: 48px;
  }

Но в качестве вывода я получаю все вышеупомянутые группы вкладок, расположенные в той же позиции, что и ниже. Я хочу, чтобы группа вкладок была централизованной.

Моя версия на Angular 6. Любая помощь?

Answer 1

Настройка mat-header Горизонтальное положение с помощью API материала, насколько я знаю, невозможно.

вы можете, однако, использовать ng-deep (да, не рекомендуется, но все еще работает), и, поскольку это гибкий элемент, вы можете просто выровнять его по центру.

::ng-deep mat-tab-header {
  align-self: center;
}

демонстрация стекаблиц