Vmeda.Online/src/core/components/tabs-outlet/core-tabs-outlet.html
2023-02-16 16:05:56 +01:00

38 lines
2.5 KiB
HTML

<ion-tabs class="hide-header">
<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 role="presentation" [id]="tab.id! + '-tab'" tabindex="-1" [class.selected]="selected == tab.id"
class="{{tab.class}}">
<ion-tab-button (ionTabButtonClick)="selectTab(tab.id, $event)" (keydown)="tabAction.keyDown(tab.id, $event)"
(keyup)="tabAction.keyUp(tab.id, $event)" [tab]="tab.page" [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>
<h2>{{ tab.title | translate}}</h2>
<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>
</ion-tabs>