Question

是否可以向md-tab-group添加按钮或图标？我有以下模板：

<md-tab-group  [selectedIndex]="selectedIndex">

  <md-tab *ngFor="let tab of getTabs() let i=index">

    <ng-template md-tab-label>
      {{tab.title}} <md-icon class="tabRemove" (click)="removeTab(i)">close</md-icon>
    </ng-template>

    <tab [tabData]="tab"></tab>
  </md-tab>
</md-tab-group>

我尝试在md-tab-group中添加一个按钮，但它没有显示出来。这甚至可能还是我应该找到另一种方式？

Answer 1

可能。

我也在使用这个范围。只需添加新的md-tab代码

即可

我的代码：

    <md-tab-group class='fixSize' [selectedIndex]='currentTab'>
        <md-tab *ngFor="let tab of tabs; let i = index;">
           <ng-template md-tab-label>
              <div class="tabName" (click)="tabRender(i)" (dblclick)="editTab(i)" mdTooltip="Duplo clique para editar" [mdTooltipPosition]="toolTipDirection">{{tab.name}}</div>
              <div *ngIf="tab.closable" class="delete" style="float: right;" (click)="removeTab(i)">x</div>
           </ng-template>
        </md-tab>
        <md-tab>
            <ng-template md-tab-label>
               <div class="tabAdd" (click)="tabAdd()" mdTooltip="Adicionar Tab" [mdTooltipPosition]="toolTipDirection">+</div>
            </ng-template>
        </md-tab>
    </md-tab-group>

Answer 2

您可以在<md-tab-group></md-tab-group>之后添加一个按钮，并将css位置更改为所需位置，并将z-index设为10：

button{
 postion:absolute;
 top:0;
 right:0;
 z-index:10;
}

Angular 2添加按钮到md-tab-group

2 个答案: