ng2-encrm-components
Version:
33 lines (32 loc) • 1.32 kB
HTML
<div class="col-xs-12" >
<h1 id="tabs">Tabs</h1>
<p class="lead">from <a href="https://valor-software.com/ng2-bootstrap/#/tabs">ng2-bootstrap tabs</a></p>
<p>Select a tab by setting active binding to true:</p>
<p>
<button type="button" class="btn btn-primary btn-sm" (click)="tabs[0].active = true">Select second tab</button>
<button type="button" class="btn btn-primary btn-sm" (click)="tabs[1].active = true">Select third tab</button>
</p>
<p>
<button type="button" class="btn btn-primary btn-sm" (click)="tabs[1].disabled = ! tabs[1].disabled">Enable / Disable third tab</button>
</p>
<hr />
<tabset>
<tab heading="Static title">Static content</tab>
<tab *ngFor="let tabz of tabs"
[heading]="tabz.title"
[active]="tabz.active"
(select)="tabz.active = true"
(deselect)="tabz.active = false"
[disabled]="tabz.disabled"
[removable]="tabz.removable"
(removed)="removeTabHandler(tabz)">
{{tabz?.content}}
</tab>
<tab (select)="alertMe()">
<template tabHeading>
Alert!
</template>
I've got an HTML heading, and a select callback. Pretty cool!
</tab>
</tabset>
</div>