將按鈕添加到 mat-tab-group

Question

我是 Angular 2/4 的新手，並且一直在享受 Material Design 組件（ https://material.angular.io ）。 我有一個簡單的 SPA，它使用選項卡組在動態視圖之間切換。 我有一個用於添加更多選項卡的加號按鈕，每個選項卡都可以自行刪除。

我的問題是 mat-tab-group 是否可以更改為包含上欄中的“加號”按鈕（選項卡出現的位置）。 現在它位於 mat-tab-group div 旁邊的一個 div 中，因此在我的網頁的整個右側占據了 20px，這看起來不太好。

Answer 1

一種方法是添加另一個沒有內容的禁用選項卡，並將單擊事件附加到選項卡標簽中的按鈕。

<mat-tab-group>
    <mat-tab label="Tab 1">Tab 1 Content</mat-tab>
    <mat-tab label="Tab 2">Tab 2 Content</mat-tab>
    <mat-tab disabled>
        <ng-template mat-tab-label>
            <button mat-icon-button (click)="someFn()">
                <mat-icon>add_circle</mat-icon>
            </button>
        </ng-template>
    </mat-tab>
</mat-tab-group>

唯一奇怪的是標簽標簽的寬度。 我一直無法弄清楚如何減少那個特定的。

Answer 2

在我的 styles.css 中這樣做以刪除禁用的樣式並減小選項卡的大小：

my-component .mat-tab-labels :last-child.mat-tab-label {
  min-width: 0;
  padding: 0 12px;
  color: unset;
  opacity: unset;
}

其中“my-component”是組件的 html 選擇器。

看起來像這樣：帶有添加按鈕的標簽

Answer 3

正如傑瑞德回答的那樣。 雖然，您可以通過在組件中將 ViewEncapsulation設置為None來更改最后一個選項卡的寬度。

打字稿代碼：

import {Component, ViewEncapsulation} from '@angular/core';

@Component({
  ....
  encapsulation: ViewEncapsulation.None
})

現在您可以設置最后一個標簽的樣式

組件 CSS：

.mat-tab-label:last-child {
  opacity: 1;
  min-width: 20px;
  padding: 0;
}