Angular 4 Material 2 - 中心选项卡组件

Question

我找不到如何使 Angular Material 选项卡组件居中。

可以在这里看到： https://material.angular.io/components/tabs/overview

我认为甚至有一种方法可以做到这一点，我只是不清楚该怎么做。

下面是文档的截图。属性指的是什么？是在html中还是需要在打字稿中设置？

非常感谢您的帮助。

Answer 1

投影内容时，可以使用md-tab-body属性设置位置值。

此 position 值应使用 typescript code 设置。

<md-tab-group>
  <md-tab label="Tab 1"  >
     <div md-tab-body #tab >
      <button (click)="clickedMe()">Clicked</button>
    </div>
  </md-tab>
  <md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>

打字稿代码

  @ViewChild('tab') tab: TemplateRef;
   ngAfterViewInit(){
     console.log(this.tab);
     this.tab.position = 100;
   }
   ngAfterContentInit(){
     console.log(this.tab);
   }
   clickedMe(){
     console.log(this.tab);
   }

LIVE DEMO

Answer 2

这是不应公开的内部调用。已发出修复此问题的拉取请求，但您将无法使用此 API 调用。

检查 this issue on github 更新。

抱歉，这不是您要找的答案。

Answer 3

您要找的似乎是 md-stretch-tabs 属性，应该应用于 <md-tab-group>:

<md-tab-group md-stretch-tabs>
    <md-tab label="Tab 1">
        <p>Content for tab 1.</p>
    </md-tab>
    <md-tab label="Tab 2">
        <p>Content for tab 2.</p>
    </md-tab>
    ...
</md-tab-group>

Plunker

Answer 4

我还尝试先使用 API 调用中的位置将它们居中对齐。不过放弃后，我在组件样式中添加了如下内容：

.mat-tab-labels{
    justify-content: center;
}

然后，在我的组件打字稿文件中包含封装装饰器：

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
@Component({
    selector: 'mytabs',
    templateUrl: './mytabs.component.html',
    styleUrls: ['./mytabs.component.scss'],
    encapsulation: ViewEncapsulation.None
})

Try it on Stackblitz

"md-stretch-tab" @Edrik 提到的属性，如其名称所示，拉伸选项卡。然而，在这种方法中，我们只是将它们居中对齐。

Angular 4 Material 2 - 中心选项卡组件

Angular 4 Material 2 - Center Tab Components

angular-material2

angular