38 lines
2.3 KiB
HTML
38 lines
2.3 KiB
HTML
<ion-tab-bar slot="top" class="core-tabs-bar" [hidden]="hideUntil && (!tabs || numTabsShown <= 1)">
|
|
<ion-spinner *ngIf="!hideUntil" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
|
|
<ng-container *ngIf="hideUntil">
|
|
<ion-button fill="clear" class="arrow-button" (click)="slidePrev()" [disabled]="!showPrevButton"
|
|
[attr.aria-label]="'core.previous' | translate">
|
|
<ion-icon *ngIf="showPrevButton" name="fas-chevron-left" aria-hidden="true" slot="icon-only"></ion-icon>
|
|
</ion-button>
|
|
<ion-slides [options]="slidesOpts" [dir]="direction" role="tablist" [attr.aria-label]="description">
|
|
<ng-container *ngFor="let tab of tabs">
|
|
<ion-slide *ngIf="tab.enabled" role="presentation" [id]="tab.id! + '-tab'" [class.selected]="selected == tab.id"
|
|
class="{{tab.class}}">
|
|
<ion-tab-button (click)="selectTab(tab.id, $event)" (keydown)="tabAction.keyDown($event)"
|
|
(keyup)="tabAction.keyUp(tab.id, $event)" [layout]="layout" role="tab" [attr.aria-controls]="tab.id"
|
|
[attr.aria-selected]="selected == tab.id" [tabindex]="selected == tab.id ? 0 : -1">
|
|
<ion-icon *ngIf="tab.icon" [name]="tab.icon" aria-hidden="true"></ion-icon>
|
|
<ion-label>
|
|
{{ tab.title | translate}}
|
|
<ion-badge *ngIf="tab.badge">
|
|
<span [attr.aria-hidden]="!!tab.badgeA11yText">{{ tab.badge }}</span>
|
|
<span *ngIf="tab.badgeA11yText" class="sr-only">
|
|
{{ tab.badgeA11yText | translate: {$a : tab.badge } }}
|
|
</span>
|
|
</ion-badge>
|
|
</ion-label>
|
|
</ion-tab-button>
|
|
</ion-slide>
|
|
</ng-container>
|
|
</ion-slides>
|
|
<ion-button fill="clear" class="arrow-button" (click)="slideNext()" [disabled]="!showNextButton"
|
|
[attr.aria-label]="'core.next' | translate">
|
|
<ion-icon *ngIf="showNextButton" name="fas-chevron-right" aria-hidden="true" slot="icon-only"></ion-icon>
|
|
</ion-button>
|
|
</ng-container>
|
|
</ion-tab-bar>
|
|
<div class="core-tabs-content-container" #originalTabs>
|
|
<ng-content></ng-content>
|
|
</div>
|