角度4材料2 - 中心选项卡组件

Question

我无法找到如何使Angular Material Tab组件居中。

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

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

以下是文档的屏幕截图。 属性是什么意思？它是在HTML中还是需要在打字稿中设置？

我真的很感谢你的帮助。

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

Answer 2

这是一个不应该公开的内部调用。已经提出了解决此问题的拉取请求的问题，但您将无法使用此API调用。

检查this issue on github是否有更新。

对不起，这不是你要找的答案。

Answer 3

您可以在使用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 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

由@Edrik提到的

“ md-stretch-tab”属性（如名称中所述）会扩展选项卡。但是，通过这种方法，我们只是将它们对齐在中心。