在角度材料的垂直选项卡列表中添加选项卡按钮答案

【问题标题】：add tab button in vertical tab listing in angular material在角度材料的垂直选项卡列表中添加选项卡按钮
【发布时间】：2020-03-21 11:19:58
【问题描述】：

我已经使用 Angular 材质创建了垂直选项卡并想添加 Add Tab 按钮，我可以添加该按钮，但它添加在底部。我想在垂直选项卡列表中添加该按钮。

这里是stackblitz 链接，它在单击按钮时添加选项卡。 Add Tab 按钮应位于垂直选项卡中。

html：

<mat-tab-group [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)">
  <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
    Contents for {{tab}} tab
  </mat-tab>
</mat-tab-group>
<button mat-raised-button class="example-add-tab-button add-tab-btn" (click)="addTab()">  Add Tab </button>

TS：

import {Component} from '@angular/core';
import { FormControl} from '@angular/forms';

/**
 * @title Basic use of the tab group
 */
@Component({
  selector: 'tab-group-basic-example',
  templateUrl: 'tab-group-basic-example.html',
  styleUrls: ['tab-group-basic-example.css'],
})
export class TabGroupBasicExample {
  tabs = ['First', 'Second'];
  selected = new FormControl(0);
  selectAfterAdding: boolean;
  addTab() {
    this.selectAfterAdding = true;
    this.tabs.push('New');
    if(this.selectAfterAdding) {
      this.selected.setValue(this.tabs.length - 1);
    }
  }
}

如何添加Add Tab按钮垂直标签？

【问题讨论】：

标签： css angular tabs angular-material material-design

【解决方案1】：

您的 flex-direction 是“列”。您需要将此“列”更改为“行”；

 .mat-tab-labels{ 
     flex-direction:row !important;
 }

【讨论】：

但是我需要垂直制表符，如果我改成row，方向也变了！

【解决方案2】：

<mat-tab-group [selectedIndex]="selected.value" (selectedIndexChange)="selected.setValue($event)">

<mat-tab disabled>
                <ng-template mat-tab-label>
                    <button mat-icon-button (click)="addTab()">
                        <mat-icon>add_circle</mat-icon>
                    </button>
                </ng-template>
          </mat-tab>

  <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
    Contents for {{tab}} tab
  </mat-tab>
</mat-tab-group>

在你的 ng-for 之前或之后使用它

【讨论】：