代码之家 › 专栏 › 技术社区 › amitairos

角度取消聚焦选项卡并将焦点设置为其他选项卡

tabs angular css

amitairos · 技术社区 · 6 年前

我在Angular 2中有一个材质选项卡组件。
我想在选项卡的末尾有一个按钮,用作添加选项卡按钮。单击后,将在其前面创建一个新选项卡。
我试着把一个按钮放在那里,但找不到如何把它正好放在最后一个选项卡旁边。

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

但是,单击此选项卡时,它会获得焦点。虽然我可以更改所选的选项卡,但该选项卡仍然有重点的UI(它是彩色的)。
我怎样才能让它完全失去焦点?

P、如果有一种方法可以在最后一个选项卡旁边添加一个常规按钮,而不将其设为选项卡,这也很好。

编辑-代码:

以下是我的选项卡的设置方式:

<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);
}

2 回复 | 直到 6 年前

SrAxi 6 年前

您可以尝试添加如下按钮:

<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

顺便说一句,如果你对按钮感到困扰 已禁用like 样式,您可以使用一些自定义CSS覆盖它!:D

Zze 6 年前

您可以使用 .blur() 上 event.currentTarget 已单击的按钮的。 .模糊() 与 .focus() 方法,并将从元素中移除焦点。

在你的问题中,你说:

单击后,将在其前面创建一个新选项卡。

您没有添加任何html,所以我只是创建了一个示例,说明如何通过数据绑定数组将按钮动态附加到html。

this.buttons.splice(clickedButtonIndex, 0, {Name: "New Button"});

要了解其工作原理,请参见 answer .

这是可以用来模糊元素焦点的组件代码的关键。

addButton(clickedButtonIndex, event){
    this.buttons.splice(clickedButtonIndex, 0, {Name: "New Button"});
    event.currentTarget.blur();
}

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

在这个示例中,我在css中设置了一个红色背景,以便在按钮聚焦时应用于按钮。您可以看到,当您单击一个按钮时,它会在再次被关闭之前立即变为红色。单击按钮将在单击的按钮之前添加一个新按钮。