角度材质 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;
}

stackblitz 演示

Answer 2

我对

div.mat-tab-links

有非常相似但不那么微不足道的问题，这是 mat-tabs 的另一种表示法（通过指令，但不是 ），当

[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

被弃用。而且效果是一样的。

Answer 4

只需将 mat-strech-tabs 设置为 false，如下所示：

<mat-tab-group
    dynamicHeight
    mat-align-tabs="end"
    mat-stretch-tabs="false"
    fitInkBarToContent
    preserveContent
    (selectedTabChange)="onTabSelectionChange($event)"
  >