2021-02-01 12:32:10 +01:00
|
|
|
<ion-tabs class="hide-header">
|
|
|
|
|
<ion-tab-bar slot="top" class="core-tabs-bar" [hidden]="!tabs || numTabsShown <= 1" #tabBar>
|
2021-06-11 13:13:15 +02:00
|
|
|
<ion-spinner *ngIf="!hideUntil" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
|
2021-02-01 12:32:10 +01:00
|
|
|
<ion-row *ngIf="hideUntil">
|
2021-05-31 12:28:58 +02:00
|
|
|
<ion-col class="col-with-arrow ion-no-padding" (click)="slidePrev()" size="1" [class.clickable]="showPrevButton">
|
2021-04-27 13:14:31 +02:00
|
|
|
<ion-icon *ngIf="showPrevButton" name="fas-chevron-left" [attr.aria-label]="'core.previous' | translate"></ion-icon>
|
2021-02-01 12:32:10 +01:00
|
|
|
</ion-col>
|
|
|
|
|
<ion-col class="ion-no-padding" size="10">
|
|
|
|
|
<ion-slides (ionSlideDidChange)="slideChanged()" [options]="slidesOpts" [dir]="direction" role="tablist"
|
2021-05-04 17:19:57 +02:00
|
|
|
[attr.aria-label]="description">
|
2021-02-01 12:32:10 +01:00
|
|
|
<ng-container *ngFor="let tab of tabs">
|
2021-05-04 17:19:57 +02:00
|
|
|
<ion-slide
|
|
|
|
|
role="presentation"
|
|
|
|
|
[id]="tab.id! + '-tab'"
|
|
|
|
|
class="tab-slide"
|
2021-05-11 10:04:32 +02:00
|
|
|
tabindex="-1"
|
2021-05-04 17:19:57 +02:00
|
|
|
[class.selected]="selected == tab.id">
|
|
|
|
|
<ion-tab-button
|
|
|
|
|
(ionTabButtonClick)="selectTab(tab.id, $event)"
|
|
|
|
|
(keydown)="tabAction.keyDown($event)"
|
|
|
|
|
(keyup)="tabAction.keyUp(tab.id, $event)"
|
|
|
|
|
[tab]="tab.page"
|
|
|
|
|
[layout]="layout"
|
|
|
|
|
class="{{tab.class}}"
|
|
|
|
|
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-label>
|
2021-05-14 12:44:58 +02:00
|
|
|
<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>
|
2021-02-01 12:32:10 +01:00
|
|
|
</ion-tab-button>
|
|
|
|
|
</ion-slide>
|
|
|
|
|
</ng-container>
|
|
|
|
|
</ion-slides>
|
|
|
|
|
</ion-col>
|
2021-05-31 12:28:58 +02:00
|
|
|
<ion-col class="col-with-arrow ion-no-padding" (click)="slideNext()" size="1" [class.clickable]="showNextButton">
|
2021-04-27 13:14:31 +02:00
|
|
|
<ion-icon *ngIf="showNextButton" name="fas-chevron-right" [attr.aria-label]="'core.next' | translate"></ion-icon>
|
2021-02-01 12:32:10 +01:00
|
|
|
</ion-col>
|
|
|
|
|
</ion-row>
|
|
|
|
|
</ion-tab-bar>
|
|
|
|
|
</ion-tabs>
|
