角度4材料2 - 中心選項卡組件

Question

我無法找到如何使Angular Material Tab組件居中。

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

我認為甚至還有一種方法可以做到這一點，目前還不清楚該做什么。

以下是文檔的屏幕截圖。 屬性是什么意思？ 它是在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調用。

在github上檢查此問題是否有更新。

對不起，這不是你要找的答案。

Answer 3

使用md-tab-body屬性投影內容時，可以設置位置值。

應使用typescript code設置此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>

打字稿代碼

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

現場演示

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”屬性，如其名稱所示，拉伸標簽。 但是，在這種方法中，我們只是在中心對齊它們。