角材料的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（不赞成使用，但仍然可以使用），并且由于它是flex项目，因此您只需将其与中心对齐即可。

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

stackblitz demo

Answer 2

我对div.mat-tab-links有一个非常相似但不是那么简单的问题，当[some-material-directive]不能与尖括号一起使用并且我想设置时，这是mat-tab的另一种表示法（通过指令，但不是）有条件地确定其值-因此，comment很有帮助，但需要告知您，您可以有条件地动态地设置所需的内容

<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被弃用。而且工作原理相同。