css - Angular 取消焦点选项卡并将焦点设置到不同的选项卡

Question

我在 Angular 2 中有一个 Material Tab 组件。
我想在选项卡的末尾有一个按钮，用作添加选项卡按钮。单击它后，会在它之前创建一个新选项卡。
我试着在那里放一个按钮，但找不到如何将它恰好放在最后一个选项卡旁边。

所以我所做的是添加一个类似于按钮的选项卡。单击此选项卡时，将创建一个新选项卡。

但是，单击此选项卡时，它会获得焦点。虽然我可以更改选择哪个选项卡，但该选项卡仍然具有焦点用户界面(它是彩色的)。
我怎样才能让它完全失去焦点？

附言如果有一种方法可以在最后一个选项卡旁边添加一个常规按钮，而不是将其变成一个选项卡，这也很好。

编辑 - 代码:

这是我的标签设置方式:

<mat-tab-group (selectedTabChange)="selectedTab($event)">
    <mat-tab>
      <ng-template mat-tab-label>
        Basic Details
      </ng-template>
    </mat-tab>

    <mat-tab #categoryTab *ngFor="let table of mCase.Tables; let tableIndex = index" [attr.data-index]="tableIndex">
    <mat-tab>

    <mat-tab #addCategory>
      <ng-template mat-tab-label>
        <div color="white" class="center">Add category</div>
      </ng-template>
    </mat-tab>
</mat-tab-group>

代码隐藏:

public selectedTab(e) {
    if (e.index == 1 + this.mCase.Tables.length) {
      //Add new category
      this.CreateTable();
      this.selectedIndex = this.mCase.Tables.length;
    }
Promise.resolve().then(() => this.selectedIndex = e.index);
}

Answer 1

你可以尝试像这样添加按钮:

<mat-tab-group>
  <mat-tab>
    <ng-template mat-tab-label>
       Basic Details
    </ng-template>
  </mat-tab>
  <mat-tab disabled>
        <ng-template mat-tab-label>
            <button mat-icon-button (click)="foo()">
                <mat-icon>add_circle</mat-icon>
            </button>
        </ng-template>
    </mat-tab>
</mat-tab-group>

工作示例:https://stackblitz.com/edit/angular-zrklwg

顺便说一句，如果您对具有类似 样式的按钮感到困扰，您可以使用一些自定义 CSS 覆盖它! :D