Tabs¶
Tabs are basicly included into Ionic. But for a simply tab implementation with html you can use the following Sample (have a look at Tab animations:
- Reference Implementation: Profile DApp
@Component({
...
animations: [
createTabSlideTransition(),
]
})
<div class="evan-tabs evan-content evan-small-content">
<button ion-button icon-left clear
[class.active]="activeTab === 0"
(click)="activateTab(0);">
<ion-icon name="person"></ion-icon>
Tab 1
</button>
<button ion-button icon-left clear
[class.active]="activeTab === 1"
(click)="activateTab(1);">
<ion-icon name="people"></ion-icon>
{{ '_dappprofile.accounts' | translate }}
</button>
<button ion-button icon-left clear
[class.active]="activeTab === 2"
(click)="activateTab(2);">
<ion-icon name="settings"></ion-icon>
{{ '_dappprofile.settings' | translate }}
</button>
</div>
<div class="evan-tabs-container" [@tabSlideTransition]="activeTab">
<div class="evan-content" *ngIf="activeTab === 0">
Content left
</div>
<div class="evan-content" *ngIf="activeTab === 1">
Content center
</div>
<div class="evan-content" *ngIf="activeTab === 2">
Content right
</div>
</div>
View Example¶
