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

Question

我找不到如何居中Angular Material Tab组件的方法。

可以在此处查看： https://material.angular.io/components/tabs/overview

我认为甚至包含一种方法来实现它，只是我觉得不太清楚该怎么做。

下面是文档的截图。 属性是什么意思？它是在HTML中还是需要在TypeScript中设置？

我真的很感激你的帮助。

- Cryptic Pug

---

我已经更新了答案。这个项不应该出现在API调用文档中。最终我创建了一个PR来修复它，文档很快就会更新。 - Z. Bagley

Answer 1

看起来你要找的是 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

- Edric

Answer 2

这是一个不应该被公开的内部调用。已经发现了一个问题和拉取请求来修复它，但您将无法使用此API调用。

请查看GitHub上的此问题以获取更新。

很抱歉，这不是您正在寻找的答案。

- Z. Bagley

Answer 3

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

应使用typescript代码来设置此position值。

<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>

Typescript代码

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

实时演示

- Aravind

---

这似乎没有改变相对于其他选项卡的位置，而这正是位置标签应该做的。 - Z. Bagley

Answer 4

我也尝试过首先使用API调用中的定位将它们对齐到中心。但是，在放弃后，我将以下内容添加到组件样式中：

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

然后，在我的组件 TypeScript 文件中包含了封装装饰器：

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

在 Stackblitz 上试试吧

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

- Hedeshy