将按钮添加到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

一种方法是添加另一个没有内容的禁用选项卡,并将click事件附加到选项卡标签中的按钮.

<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 选择器。

看起来像这样： 带有添加按钮的选项卡