MOBILE-3833 tabs: Reduce tabs layouts
Pau Ferrer Ocaña
parent
b2246a01c5
commit
73d5648cb0
|
|
@ -1,37 +1,36 @@
|
||||||
<ion-tabs class="hide-header">
|
<ion-tabs class="hide-header">
|
||||||
<ion-tab-bar slot="top" class="core-tabs-bar" [hidden]="!tabs || numTabsShown <= 1" #tabBar>
|
<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>
|
<ion-spinner *ngIf="!hideUntil" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
|
||||||
<ion-row *ngIf="hideUntil">
|
<ng-container *ngIf="hideUntil">
|
||||||
<ion-col class="col-with-arrow ion-no-padding" (click)="slidePrev()" size="1" [class.clickable]="showPrevButton">
|
<ion-button fill="clear" class="arrow-button" (click)="slidePrev()" [disabled]="!showPrevButton"
|
||||||
<ion-icon *ngIf="showPrevButton" name="fas-chevron-left" [attr.aria-label]="'core.previous' | translate"></ion-icon>
|
[attr.aria-label]="'core.previous' | translate">
|
||||||
</ion-col>
|
<ion-icon *ngIf="showPrevButton" name="fas-chevron-left" aria-hidden="true" slot="icon-only"></ion-icon>
|
||||||
<ion-col class="ion-no-padding" size="10">
|
</ion-button>
|
||||||
<ion-slides [options]="slidesOpts" [dir]="direction" role="tablist" [attr.aria-label]="description">
|
<ion-slides [options]="slidesOpts" [dir]="direction" role="tablist" [attr.aria-label]="description">
|
||||||
<ng-container *ngFor="let tab of tabs">
|
<ng-container *ngFor="let tab of tabs">
|
||||||
<ion-slide role="presentation" class="tab-slide" [id]=" tab.id! + '-tab'" tabindex="-1"
|
<ion-slide role="presentation" [id]="tab.id! + '-tab'" tabindex="-1" [class.selected]="selected == tab.id">
|
||||||
[class.selected]="selected == tab.id">
|
<ion-tab-button (ionTabButtonClick)="selectTab(tab.id, $event)" (keydown)="tabAction.keyDown($event)"
|
||||||
<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"
|
||||||
(keyup)="tabAction.keyUp(tab.id, $event)" [tab]="tab.page" [layout]="layout" class="{{tab.class}}"
|
[attr.aria-controls]="tab.id" [attr.aria-selected]="selected == tab.id"
|
||||||
role="tab" [attr.aria-controls]="tab.id" [attr.aria-selected]="selected == tab.id"
|
[tabindex]="selected == tab.id ? 0 : -1">
|
||||||
[tabindex]="selected == tab.id ? 0 : -1">
|
<ion-icon *ngIf="tab.icon" [name]="tab.icon" aria-hidden="true"></ion-icon>
|
||||||
<ion-icon *ngIf="tab.icon" [name]="tab.icon" aria-hidden="true"></ion-icon>
|
<ion-label>
|
||||||
<ion-label>
|
{{ tab.title | translate}}
|
||||||
{{ tab.title | translate}}
|
<ion-badge *ngIf="tab.badge">
|
||||||
<ion-badge *ngIf="tab.badge">
|
<span [attr.aria-hidden]="!!tab.badgeA11yText">{{ tab.badge }}</span>
|
||||||
<span [attr.aria-hidden]="!!tab.badgeA11yText">{{ tab.badge }}</span>
|
<span *ngIf="tab.badgeA11yText" class="sr-only">
|
||||||
<span *ngIf="tab.badgeA11yText" class="sr-only">
|
{{ tab.badgeA11yText | translate: {$a : tab.badge } }}
|
||||||
{{ tab.badgeA11yText | translate: {$a : tab.badge } }}
|
</span>
|
||||||
</span>
|
</ion-badge>
|
||||||
</ion-badge>
|
</ion-label>
|
||||||
</ion-label>
|
</ion-tab-button>
|
||||||
</ion-tab-button>
|
</ion-slide>
|
||||||
</ion-slide>
|
</ng-container>
|
||||||
</ng-container>
|
</ion-slides>
|
||||||
</ion-slides>
|
<ion-button fill="clear" class="arrow-button" (click)="slideNext()" [disabled]="!showNextButton"
|
||||||
</ion-col>
|
[attr.aria-label]="'core.next' | translate">
|
||||||
<ion-col class="col-with-arrow ion-no-padding" (click)="slideNext()" size="1" [class.clickable]="showNextButton">
|
<ion-icon *ngIf="showNextButton" name="fas-chevron-right" aria-hidden="true" slot="icon-only"></ion-icon>
|
||||||
<ion-icon *ngIf="showNextButton" name="fas-chevron-right" [attr.aria-label]="'core.next' | translate"></ion-icon>
|
</ion-button>
|
||||||
</ion-col>
|
</ng-container>
|
||||||
</ion-row>
|
|
||||||
</ion-tab-bar>
|
</ion-tab-bar>
|
||||||
</ion-tabs>
|
</ion-tabs>
|
||||||
|
|
|
||||||
|
|
@ -1,37 +1,35 @@
|
||||||
<ion-tab-bar slot="top" class="core-tabs-bar" [hidden]="!tabs || numTabsShown <= 1" #tabBar>
|
<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>
|
<ion-spinner *ngIf="!hideUntil" [attr.aria-label]="'core.loading' | translate"></ion-spinner>
|
||||||
<ion-row *ngIf="hideUntil">
|
<ng-container *ngIf="hideUntil">
|
||||||
<ion-col class="col-with-arrow ion-no-padding" (click)="slidePrev()" size="1" [class.clickable]="showPrevButton">
|
<ion-button fill="clear" class="arrow-button" (click)="slidePrev()" [disabled]="!showPrevButton"
|
||||||
<ion-icon *ngIf="showPrevButton" name="fas-chevron-left" [attr.aria-label]="'core.previous' | translate"></ion-icon>
|
[attr.aria-label]="'core.previous' | translate">
|
||||||
</ion-col>
|
<ion-icon *ngIf="showPrevButton" name="fas-chevron-left" aria-hidden="true" slot="icon-only"></ion-icon>
|
||||||
<ion-col class="ion-no-padding" size="10">
|
</ion-button>
|
||||||
<ion-slides [options]="slidesOpts" [dir]="direction" role="tablist" [attr.aria-label]="description">
|
<ion-slides [options]="slidesOpts" [dir]="direction" role="tablist" [attr.aria-label]="description">
|
||||||
<ng-container *ngFor="let tab of tabs">
|
<ng-container *ngFor="let tab of tabs">
|
||||||
<ion-slide *ngIf="tab.enabled" role="presentation" class="tab-slide" [id]="tab.id! + '-tab'"
|
<ion-slide *ngIf="tab.enabled" role="presentation" [id]="tab.id! + '-tab'" [class.selected]="selected == tab.id">
|
||||||
[class.selected]="selected == tab.id">
|
<ion-tab-button (click)="selectTab(tab.id, $event)" (keydown)="tabAction.keyDown($event)"
|
||||||
<ion-tab-button (click)="selectTab(tab.id, $event)" (keydown)="tabAction.keyDown($event)"
|
(keyup)="tabAction.keyUp(tab.id, $event)" class="{{tab.class}}" [layout]="layout" role="tab"
|
||||||
(keyup)="tabAction.keyUp(tab.id, $event)" class="{{tab.class}}" [layout]="layout" role="tab"
|
[attr.aria-controls]="tab.id" [attr.aria-selected]="selected == tab.id" [tabindex]="selected == tab.id ? 0 : -1">
|
||||||
[attr.aria-controls]="tab.id" [attr.aria-selected]="selected == tab.id"
|
<ion-icon *ngIf="tab.icon" [name]="tab.icon" aria-hidden="true"></ion-icon>
|
||||||
[tabindex]="selected == tab.id ? 0 : -1">
|
<ion-label>
|
||||||
<ion-icon *ngIf="tab.icon" [name]="tab.icon" aria-hidden="true"></ion-icon>
|
{{ tab.title | translate}}
|
||||||
<ion-label>
|
<ion-badge *ngIf="tab.badge">
|
||||||
{{ tab.title | translate}}
|
<span [attr.aria-hidden]="!!tab.badgeA11yText">{{ tab.badge }}</span>
|
||||||
<ion-badge *ngIf="tab.badge">
|
<span *ngIf="tab.badgeA11yText" class="sr-only">
|
||||||
<span [attr.aria-hidden]="!!tab.badgeA11yText">{{ tab.badge }}</span>
|
{{ tab.badgeA11yText | translate: {$a : tab.badge } }}
|
||||||
<span *ngIf="tab.badgeA11yText" class="sr-only">
|
</span>
|
||||||
{{ tab.badgeA11yText | translate: {$a : tab.badge } }}
|
</ion-badge>
|
||||||
</span>
|
</ion-label>
|
||||||
</ion-badge>
|
</ion-tab-button>
|
||||||
</ion-label>
|
</ion-slide>
|
||||||
</ion-tab-button>
|
</ng-container>
|
||||||
</ion-slide>
|
</ion-slides>
|
||||||
</ng-container>
|
<ion-button fill="clear" class="arrow-button" (click)="slideNext()" [disabled]="!showNextButton"
|
||||||
</ion-slides>
|
[attr.aria-label]="'core.next' | translate">
|
||||||
</ion-col>
|
<ion-icon *ngIf="showNextButton" name="fas-chevron-right" aria-hidden="true" slot="icon-only"></ion-icon>
|
||||||
<ion-col class="col-with-arrow ion-no-padding" (click)="slideNext()" size="1" [class.clickable]="showNextButton">
|
</ion-button>
|
||||||
<ion-icon *ngIf="showNextButton" name="fas-chevron-right" [attr.aria-label]="'core.next' | translate"></ion-icon>
|
</ng-container>
|
||||||
</ion-col>
|
|
||||||
</ion-row>
|
|
||||||
</ion-tab-bar>
|
</ion-tab-bar>
|
||||||
<div class="core-tabs-content-container" #originalTabs>
|
<div class="core-tabs-content-container" #originalTabs>
|
||||||
<ng-content></ng-content>
|
<ng-content></ng-content>
|
||||||
|
|
|
||||||
|
|
@ -14,7 +14,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
ion-tab-bar.core-tabs-bar {
|
ion-tab-bar {
|
||||||
position: relative;
|
position: relative;
|
||||||
background: var(--tabs-background);
|
background: var(--tabs-background);
|
||||||
@include safe-area-padding-end(null, 0px);
|
@include safe-area-padding-end(null, 0px);
|
||||||
|
|
@ -22,57 +22,65 @@
|
||||||
color: var(--tabs-color);
|
color: var(--tabs-color);
|
||||||
border-bottom: 1px solid var(--stroke);
|
border-bottom: 1px solid var(--stroke);
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: flex-end;
|
flex-direction: row;
|
||||||
|
justify-content: space-between;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|
||||||
ion-row {
|
ion-spinner {
|
||||||
width: 100%;
|
flex-grow: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab-slide {
|
ion-button.arrow-button {
|
||||||
border-bottom: 2px solid transparent;
|
flex-shrink: 1;
|
||||||
min-width: 100px;
|
margin: 0;
|
||||||
min-height: var(--height);
|
padding: 0;
|
||||||
cursor: pointer;
|
--padding-start: 0;
|
||||||
overflow: hidden;
|
--padding-end: 0;
|
||||||
|
min-width: 30px;
|
||||||
ion-tab-button {
|
height: var(--height);
|
||||||
max-width: 100%;
|
--border-radius: 0;
|
||||||
ion-label {
|
ion-icon {
|
||||||
font-size: 14px;
|
font-size: 16px;
|
||||||
font-weight: 400;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
word-wrap: break-word;
|
|
||||||
max-width: 100%;
|
|
||||||
line-height: 1.2em;
|
|
||||||
margin-top: 16px;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&[aria-selected=true],
|
|
||||||
&.selected {
|
|
||||||
color: var(--color-active);
|
|
||||||
border-bottom-color: var(--border-color-active);
|
|
||||||
ion-tab-button {
|
|
||||||
color: var(--color-active);
|
|
||||||
ion-label {
|
|
||||||
font-weight: var(--font-weight-active);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
ion-col {
|
ion-slides {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
line-height: 1.6rem;
|
line-height: 1.6rem;
|
||||||
|
flex-grow: 1;
|
||||||
|
|
||||||
&.col-with-arrow {
|
ion-slide {
|
||||||
display: flex;
|
border-bottom: 2px solid transparent;
|
||||||
justify-content: center;
|
min-width: 100px;
|
||||||
align-items: center;
|
height: var(--height);
|
||||||
|
cursor: pointer;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
ion-tab-button {
|
||||||
|
max-width: 100%;
|
||||||
|
ion-label {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
word-wrap: break-word;
|
||||||
|
max-width: 100%;
|
||||||
|
line-height: 1.2em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&[aria-selected=true],
|
||||||
|
&.selected {
|
||||||
|
color: var(--color-active);
|
||||||
|
border-bottom-color: var(--border-color-active);
|
||||||
|
ion-tab-button {
|
||||||
|
color: var(--color-active);
|
||||||
|
ion-label {
|
||||||
|
font-weight: var(--font-weight-active);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue