激活星雲主題選項卡

Question

我正在使用 Nebular Theme 組件，並希望通過單擊按鈕手動激活特定選項卡。 我在他們的文檔https://akveo.github.io/nebular/docs/components/tabs/overview#nbtabsetcomponent 中找不到任何信息

<nb-tabset>
  <nb-tab tabTitle="Search">xxxx</ng-tab>
  <nb-tab tabTitle="Add">yyyyy</ng-tab>
</nb-tabset>

<button (click)="ActivateTabAdd()">Add</button>

任何幫助表示贊賞。 謝謝

Answer 1

是的，為什么不

選項卡nb-tab有一個active屬性，它指定活動選項卡

所以你可以像這樣處理

<nb-tabset>
  <nb-tab tabTitle="Search" active="{{setActiveSearch}}">xxxx</ng-tab>
  <nb-tab tabTitle="Add" active="{{setActiveAdd}}" >yyyyy</ng-tab>
</nb-tabset>
<button (click)="ActivateTabAdd()">Add</button>

並在 TS 文件中

setActiveSearch : boolean = false;
setActiveAdd: boolean = false;

ActivateTabAdd(){
this.setActiveAdd = true;
}

Answer 2

<nb-tabset id="tabset" name="tabset" #tabset>
  <nb-tab tabTitle="Search" id="searchTab" name="searchTab" #searchTab >xxxx</ng-tab>
  <nb-tab tabTitle="Add" id="addTab" name="addTab" #addTab >yyyyy</ng-tab>
</nb-tabset>
<button (click)="ActivateTabAdd()">Add</button>

import { NbTabsetComponent, NbTabComponent } from '@nebular/theme/components/tabset/tabset.component';

@ViewChild("tabset") tabsetEl: NbTabsetComponent;
@ViewChild("addTab") addTabEl: NbTabComponent;

ActivateTabAdd(){
  this.tabsetEl.selectTab(this.addTabEl);
}