将取消按钮添加到角度材质中的制表符组件

我正在使用选项卡组件(i,带有自定义标签模板的选项卡) . 这是stackblitz链接 . 如何在选项卡的右上角添加取消按钮?我不想用取消按钮执行任何操作,我只需要添加取消按钮 . 如下图所示

enter image description here

回答(2)

3 years ago

看看这个,在这里我添加角度材料按钮作为取消按钮 .

<div class="button-row" style="float:right">
      <button mat-flat-button>Basic</button>
    </div>

Click Here

3 years ago

DEMO

HTML:

<div style="float:left">
    <mat-tab-group style="width:98%;">
        <mat-tab>
            <ng-template mat-tab-label>
                <mat-icon class="example-tab-icon">thumb_up</mat-icon>
                First
            </ng-template>
            Content 1
        </mat-tab>

        <mat-tab>
            <ng-template mat-tab-label>
                <mat-icon class="example-tab-icon">thumb_up</mat-icon>
                Second
            </ng-template>
            Content 2
        </mat-tab>

        <mat-tab>
            <ng-template mat-tab-label>
                <mat-icon class="example-tab-icon">thumb_up</mat-icon>
                Third
            </ng-template>

            Content 3
        </mat-tab>

    </mat-tab-group>
</div>
<div style="width:2%;" style="float-right; ">
    <button style="position:fixed;" mat-icon-button>
    <mat-icon >cancel</mat-icon>
  </button>
</div>