Активировать вкладку Nebular Theme - PullRequest
0 голосов
/ 24 октября 2018

Я использую компонент 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>

Любая помощь приветствуется.Спасибо

Ответы [ 2 ]

0 голосов
/ 09 августа 2019
<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);
}

0 голосов
/ 24 октября 2018

Да, почему бы не

есть атрибут active для вкладки nb-tab, который указывает активную вкладку

, поэтому вы можете обрабатывать это как

<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 : bollean = flase;
setActiveAdd: bollean = flase;

ActivateTabAdd(){
this.setActiveAdd = true;
}
...