角材料 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

据我所知，通过材料 api 调整mat-header水平位置是不可能的。

但是，您可以使用ng-deep （是的，已弃用但仍然有效）并且由于它是一个弹性项目，您可以简单地将其与中心对齐。

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

堆叠闪电战演示

Answer 2

我有非常相似，但不能算小问题div.mat-tab-links这是垫标签的另一个符号（由指令，但没有）时， [some-material-directive]不带尖括号的作品，我想有条件地设置它的值 - 所以这个评论非常有帮助，但需要通知你可以通过这种方式有条件地动态设置你想要的

<nav
  mat-tab-nav-bar
  [attr.mat-align-tabs]="(alignItToCenter$$|async) ? 'center' : 'left'" // <= mean this
>
  <a 
    *ngFor="let link of links"
    class="dashboard-menu"
    mat-tab-link
  >
    {{link.title}}
  </a>
</nav>

但当然，你可以通过 CSS 设置它

::ng-deep .mat-tab-link-container {
    //
  .mat-tab-list {
    //
    .mat-tab-links {
      //
    }
  }
}

Answer 3

在 css 文件中

 mat-tab-header { align-self: right!important; }

并在 ts 文件中添加：

 @Component({ selector: 'yourcomponent-component', templateUrl: './yourcomponent.component.html', styleUrls: ['./yourcomponent.component.scss'], encapsulation:ViewEncapsulation.None <---- add this })

在这里，您不必担心::ng-deep被弃用。 它的工作原理相同。