javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 12:29:55 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(rtl): add icon-start and icon-end attributes (#11737)

Browse Source 
* feat(icon): add start/end

* fix(icon): add all relevant deprecations

* fix(deprecation): add deprecation to missing selector

* revert(tests): revert icon-start/end from tests
This commit is contained in:
Amit Moryossef
2017-06-02 21:00:18 +03:00
committed by Brandy Carney
parent 57dc22d173
commit a40b872975
24 changed files with 98 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
demos/src/button/pages/page-one/page-one.html
View File

@ -39,12 +39,12 @@
<h4>Icons</h4>
<button ion-button icon-left color="dark">
<button ion-button icon-start color="dark">
<ion-icon name="star"></ion-icon>
Left Icon
</button>
<button ion-button icon-right color="dark">
<button ion-button icon-end color="dark">
Right Icon
<ion-icon name="star"></ion-icon>
</button>

2
demos/src/item-sliding/pages/page-one/page-one.html
View File

@ -67,7 +67,7 @@
<ion-icon name="trash"></ion-icon>
</button>
</ion-item-options>
<ion-item-options (ionSwipe)="download(item)" icon-left>
<ion-item-options (ionSwipe)="download(item)" icon-start>
<button ion-button color="dark" (click)="more(item)">
<ion-icon name="volume-off"></ion-icon>
Mute

2
demos/src/loading/pages/page-one/page-one.html
View File

@ -58,7 +58,7 @@
<ion-toolbar>
<ion-buttons end>
<button ion-button icon-right (click)="goToPage2()">
<button ion-button icon-end (click)="goToPage2()">
Show Loading and Navigate
<ion-icon name="arrow-forward"></ion-icon>
</button>

4
demos/src/navbar/pages/page-one/page-one.html
View File

@ -55,7 +55,7 @@
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons end>
<button ion-button icon-right solid color="secondary">
<button ion-button icon-end solid color="secondary">
Help
<ion-icon name="help-circle"></ion-icon>
</button>
@ -69,7 +69,7 @@
</button>
</ion-buttons>
<ion-buttons end>
<button ion-button icon-right outline color="secondary">
<button ion-button icon-end outline color="secondary">
Help
<ion-icon name="help-circle"></ion-icon>
</button>

4
demos/src/tabs/pages/page-one/page-one.html
View File

@ -41,7 +41,7 @@
<!-- Icons right of text -->
<ion-tabs tabs-only tabsLayout="icon-right" selectedIndex="0" color="light">
<ion-tabs tabs-only tabsLayout="icon-end" selectedIndex="0" color="light">
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root" tabBadge="4" tabBadgeStyle="secondary"></ion-tab>
@ -49,7 +49,7 @@
<!-- Icons left of text -->
<ion-tabs tabs-only tabsLayout="icon-left" color="dark">
<ion-tabs tabs-only tabsLayout="icon-start" color="dark">
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="1" tabBadgeStyle="danger"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>

4
demos/src/title/pages/page-one/page-one.html
View File

@ -55,7 +55,7 @@
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons end>
<button ion-button icon-right solid color="secondary">
<button ion-button icon-end solid color="secondary">
Help
<ion-icon name="help-circle"></ion-icon>
</button>
@ -69,7 +69,7 @@
</button>
</ion-buttons>
<ion-buttons end>
<button ion-button icon-right outline color="secondary">
<button ion-button icon-end outline color="secondary">
Help
<ion-icon name="help-circle"></ion-icon>
</button>

4
demos/src/toolbar/pages/page-one/page-one.html
View File

@ -55,7 +55,7 @@
</ion-buttons>
<ion-title>Solid</ion-title>
<ion-buttons end>
<button ion-button icon-right solid color="secondary">
<button ion-button icon-end solid color="secondary">
Help
<ion-icon name="help-circle"></ion-icon>
</button>
@ -69,7 +69,7 @@
</button>
</ion-buttons>
<ion-buttons end>
<button ion-button icon-right outline color="secondary">
<button ion-button icon-end outline color="secondary">
Help
<ion-icon name="help-circle"></ion-icon>
</button>

4
src/components/action-sheet/action-sheet-component.ts
View File

@ -22,13 +22,13 @@ import { ViewController } from '../../navigation/view-controller';
'<div class="action-sheet-group">' +
'<div class="action-sheet-title" id="{{hdrId}}" *ngIf="d.title">{{d.title}}</div>' +
'<div class="action-sheet-sub-title" id="{{descId}}" *ngIf="d.subTitle">{{d.subTitle}}</div>' +
'<button ion-button="action-sheet-button" (click)="click(b)" *ngFor="let b of d.buttons" class="disable-hover" [attr.icon-left]="b.icon ? \'\' : null" [ngClass]="b.cssClass">' +
'<button ion-button="action-sheet-button" (click)="click(b)" *ngFor="let b of d.buttons" class="disable-hover" [attr.icon-start]="b.icon ? \'\' : null" [ngClass]="b.cssClass">' +
'<ion-icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></ion-icon>' +
'{{b.text}}' +
'</button>' +
'</div>' +
'<div class="action-sheet-group" *ngIf="cancelButton">' +
'<button ion-button="action-sheet-button" (click)="click(cancelButton)" class="action-sheet-cancel disable-hover" [attr.icon-left]="cancelButton.icon ? \'\' : null" [ngClass]="cancelButton.cssClass">' +
'<button ion-button="action-sheet-button" (click)="click(cancelButton)" class="action-sheet-cancel disable-hover" [attr.icon-start]="cancelButton.icon ? \'\' : null" [ngClass]="cancelButton.cssClass">' +
'<ion-icon [name]="cancelButton.icon" *ngIf="cancelButton.icon" class="action-sheet-icon"></ion-icon>' +
'{{cancelButton.text}}' +
'</button>' +

12
src/components/alert/alert.ios.scss
View File

@ -193,8 +193,10 @@ $alert-ios-radio-min-width: 30px !default;
/// @prop - Top of the icon in the radio alert
$alert-ios-radio-icon-top: -7px !default;
/// @prop - Left of the icon in the radio alert
// deprecated
$alert-ios-radio-icon-left: 7px !default;
/// @prop - Start of the icon in the radio alert
$alert-ios-radio-icon-start: $alert-ios-radio-icon-left !default;
/// @prop - Width of the icon in the radio alert
$alert-ios-radio-icon-width: 6px !default;
@ -277,8 +279,10 @@ $alert-ios-checkbox-background-color-on: color($colors-ios, primary) !def
/// @prop - Top of the icon in the checkbox alert
$alert-ios-checkbox-icon-top: 4px !default;
/// @prop - Left of the icon in the checkbox alert
// deprecated
$alert-ios-checkbox-icon-left: 7px !default;
/// @prop - Start of the icon in the checkbox alert
$alert-ios-checkbox-icon-start: $alert-ios-checkbox-icon-left !default;
/// @prop - Width of the icon in the checkbox alert
$alert-ios-checkbox-icon-width: 4px !default;
@ -446,7 +450,7 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default;
// -----------------------------------------
.alert-ios [aria-checked=true] .alert-radio-inner {
@include position($alert-ios-radio-icon-top, null, null, $alert-ios-radio-icon-left);
@include position($alert-ios-radio-icon-top, null, null, $alert-ios-radio-icon-start);
position: absolute;
@ -519,7 +523,7 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default;
// -----------------------------------------
.alert-ios [aria-checked=true] .alert-checkbox-inner {
@include position($alert-ios-checkbox-icon-top, null, null, $alert-ios-checkbox-icon-left);
@include position($alert-ios-checkbox-icon-top, null, null, $alert-ios-checkbox-icon-start);
position: absolute;

12
src/components/alert/alert.md.scss
View File

@ -249,8 +249,10 @@ $alert-md-radio-border-color-on: $alert-md-button-text-color !defau
/// @prop - Top of the icon in the alert radio
$alert-md-radio-icon-top: 2px !default;
/// @prop - Left of the icon in the alert radio
// deprecated
$alert-md-radio-icon-left: 2px !default;
/// @prop - Start of the icon in the radio alert
$alert-md-radio-icon-start: $alert-md-radio-icon-left !default;
/// @prop - Width of the icon in the alert radio
$alert-md-radio-icon-width: 8px !default;
@ -323,8 +325,10 @@ $alert-md-checkbox-border-color-on: $alert-md-button-text-color !defau
/// @prop - Top of the icon in the checkbox alert
$alert-md-checkbox-icon-top: 0 !default;
/// @prop - Left of the icon in the checkbox alert
// deprecated
$alert-md-checkbox-icon-left: 3px !default;
/// @prop - Start of the icon in the checkbox alert
$alert-md-checkbox-icon-start: $alert-md-checkbox-icon-left !default;
/// @prop - Width of the icon in the checkbox alert
$alert-md-checkbox-icon-width: 6px !default;
@ -481,7 +485,7 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
// ---------------------------------------------------
.alert-md .alert-radio-inner {
@include position($alert-md-radio-icon-top, null, null, $alert-md-radio-icon-left);
@include position($alert-md-radio-icon-top, null, null, $alert-md-radio-icon-start);
@include border-radius($alert-md-radio-icon-border-radius);
position: absolute;
@ -559,7 +563,7 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
}
.alert-md [aria-checked=true] .alert-checkbox-inner {
@include position($alert-md-checkbox-icon-top, null, null, $alert-md-checkbox-icon-left);
@include position($alert-md-checkbox-icon-top, null, null, $alert-md-checkbox-icon-start);
position: absolute;

12
src/components/alert/alert.wp.scss
View File

@ -262,8 +262,10 @@ $alert-wp-radio-border-color: $input-wp-border-color !default;
/// @prop - Top of the icon in the radio alert
$alert-wp-radio-icon-top: 2px !default;
/// @prop - Left of the icon in the radio alert
// deprecated
$alert-wp-radio-icon-left: 2px !default;
/// @prop - Start of the icon in the radio alert
$alert-wp-radio-icon-start: $alert-wp-radio-icon-left !default;
/// @prop - Width of the icon in the radio alert
$alert-wp-radio-icon-width: 8px !default;
@ -328,8 +330,10 @@ $alert-wp-checkbox-background-on: color($colors-wp, primary) !defau
/// @prop - Top of the icon in the checkbox alert
$alert-wp-checkbox-icon-top: -2px !default;
/// @prop - Left of the icon in the checkbox alert
// deprecated
$alert-wp-checkbox-icon-left: 3px !default;
/// @prop - Start of the icon in the checkbox alert
$alert-wp-checkbox-icon-start: $alert-wp-checkbox-icon-left !default;
/// @prop - Width of the icon in the checkbox alert
$alert-wp-checkbox-icon-width: 6px !default;
@ -495,7 +499,7 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default;
// ---------------------------------------------------
.alert-wp .alert-radio-inner {
@include position($alert-wp-radio-icon-top, null, null, $alert-wp-radio-icon-left);
@include position($alert-wp-radio-icon-top, null, null, $alert-wp-radio-icon-start);
@include border-radius($alert-wp-radio-icon-border-radius);
position: absolute;
@ -575,7 +579,7 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default;
// --------------------------------------------------
.alert-wp [aria-checked=true] .alert-checkbox-inner {
@include position($alert-wp-checkbox-icon-top, null, null, $alert-wp-checkbox-icon-left);
@include position($alert-wp-checkbox-icon-top, null, null, $alert-wp-checkbox-icon-start);
position: absolute;

6
src/components/button/button-icon.scss
View File

@ -11,13 +11,15 @@
pointer-events: none;
}
[icon-left] ion-icon {
[icon-left] ion-icon, // deprecated
[icon-start] ion-icon {
@include button-icon;
@include padding-horizontal(null, .3em);
}
[icon-right] ion-icon {
[icon-right] ion-icon, // deprecated
[icon-end] ion-icon {
@include button-icon;
@include padding-horizontal(.4em, null);

4
src/components/button/button.ts
View File

@ -42,12 +42,12 @@ import { isTrueProperty } from '../../util/util';
* <button ion-button round outline>Outline + Round</button>
*
* <!-- Icons -->
* <button ion-button icon-left>
* <button ion-button icon-start>
* <ion-icon name="star"></ion-icon>
* Left Icon
* </button>
*
* <button ion-button icon-right>
* <button ion-button icon-end>
* Right Icon
* <ion-icon name="star"></ion-icon>
* </button>

3
src/components/item/item-sliding.scss
View File

@ -51,7 +51,8 @@ ion-item-options .button {
box-sizing: content-box;
}
ion-item-options:not([icon-left]) .button:not([icon-only]) {
ion-item-options:not([icon-left]) .button:not([icon-only]), // deprecated
ion-item-options:not([icon-start]) .button:not([icon-only]) {
.button-inner {
flex-direction: column;
}

4
src/components/item/item-sliding.ts
View File

@ -91,11 +91,11 @@ const enum SlidingState {
* ### Button Layout
* If an icon is placed with text in the option button, by default it will
* display the icon on top of the text. This can be changed to display the icon
* to the left of the text by setting `icon-left` as an attribute on the
* to the left of the text by setting `icon-start` as an attribute on the
* `<ion-item-options>` element.
*
* ```html
* <ion-item-options icon-left>
* <ion-item-options icon-start>
* <button ion-button (click)="archive(item)">
* <ion-icon name="archive"></ion-icon>
* Archive

12
src/components/tabs/tabs.ios.scss
View File

@ -106,14 +106,18 @@ $tabs-ios-tab-icon-size: 30px !default;
vertical-align: top;
}
.tabs-ios[tabsLayout=icon-right] .tab-button .tab-button-text,
.tabs-ios[tabsLayout=icon-left] .tab-button .tab-button-text {
.tabs-ios[tabsLayout=icon-right] .tab-button .tab-button-text, // deprecated
.tabs-ios[tabsLayout=icon-left] .tab-button .tab-button-text, // deprecated
.tabs-ios[tabsLayout=icon-end] .tab-button .tab-button-text,
.tabs-ios[tabsLayout=icon-start] .tab-button .tab-button-text {
font-size: 1.4rem;
line-height: 1.1;
}
.tabs-ios[tabsLayout=icon-right] .tab-button ion-icon,
.tabs-ios[tabsLayout=icon-left] .tab-button ion-icon {
.tabs-ios[tabsLayout=icon-right] .tab-button ion-icon, // deprecated
.tabs-ios[tabsLayout=icon-left] .tab-button ion-icon, // deprecated
.tabs-ios[tabsLayout=icon-end] .tab-button ion-icon,
.tabs-ios[tabsLayout=icon-start] .tab-button ion-icon {
min-width: 24px;
height: 26px;

22
src/components/tabs/tabs.md.scss
View File

@ -90,14 +90,18 @@ $tabs-md-tab-text-transition: transform .3s ease-in-out !default
/// @prop - Transform for the active tab button icon when the layout is icon-top, icon-only, or title-only
$tabs-md-tab-icon-transform-active: translate3d(0, -2px, 0) !default;
/// @prop - Transform for the active tab button icon when the layout is icon-right
// deprecated
$tabs-md-tab-icon-right-transform-active: translate3d(2px, 0, 0) !default;
/// @prop - Transform for the active tab button icon when the layout is icon-end
$tabs-md-tab-icon-end-transform-active: $tabs-md-tab-icon-right-transform-active !default;
/// @prop - Transform for the active tab button icon when the layout is icon-bottom
$tabs-md-tab-icon-bottom-transform-active: translate3d(0, 2px, 0) !default;
/// @prop - Transform for the active tab button icon when the layout is icon-left
// deprecated
$tabs-md-tab-icon-left-transform-active: translate3d(-2px, 0, 0) !default;
/// @prop - Transform for the active tab button icon when the layout is icon-start
$tabs-md-tab-icon-start-transform-active: $tabs-md-tab-icon-left-transform-active !default;
/// @prop - Transform origin for the tab button text
$tabs-md-tab-icon-transform-origin: 50% 150% !default;
@ -190,9 +194,10 @@ $tabs-md-tab-icon-size: 2.4rem !default;
transform: $tabs-md-tab-icon-transform-active;
}
// Tab layout: icon-right
.tabs-md[tabsLayout=icon-right] .tab-button[aria-selected=true] .tab-button-icon {
transform: $tabs-md-tab-icon-right-transform-active;
// Tab layout: icon-end
.tabs-md[tabsLayout=icon-right] .tab-button[aria-selected=true] .tab-button-icon, // deprecated
.tabs-md[tabsLayout=icon-end] .tab-button[aria-selected=true] .tab-button-icon {
transform: $tabs-md-tab-icon-end-transform-active;
}
// Tab layout: icon-bottom
@ -200,9 +205,10 @@ $tabs-md-tab-icon-size: 2.4rem !default;
transform: $tabs-md-tab-icon-bottom-transform-active;
}
// Tab layout: icon-left
.tabs-md[tabsLayout=icon-left] .tab-button[aria-selected=true] .tab-button-icon {
transform: $tabs-md-tab-icon-left-transform-active;
// Tab layout: icon-start
.tabs-md[tabsLayout=icon-left] .tab-button[aria-selected=true] .tab-button-icon, // deprecated
.tabs-md[tabsLayout=icon-start] .tab-button[aria-selected=true] .tab-button-icon {
transform: $tabs-md-tab-icon-start-transform-active;
}

18
src/components/tabs/tabs.scss
View File

@ -93,17 +93,21 @@
order: 10;
}
[tabsLayout=icon-left] .tab-button,
[tabsLayout=icon-right] .tab-button {
[tabsLayout=icon-left] .tab-button, // deprecated
[tabsLayout=icon-right] .tab-button, // deprecated
[tabsLayout=icon-start] .tab-button,
[tabsLayout=icon-end] .tab-button {
flex-direction: row;
}
[tabsLayout=icon-left] .tab-button .tab-button-icon {
[tabsLayout=icon-left] .tab-button .tab-button-icon, // deprecated
[tabsLayout=icon-start] .tab-button .tab-button-icon {
@include padding-horizontal(null, 8px);
@include text-align(end);
}
[tabsLayout=icon-right] .tab-button .tab-button-icon {
[tabsLayout=icon-right] .tab-button .tab-button-icon, // deprecated
[tabsLayout=icon-end] .tab-button .tab-button-icon {
@include padding-horizontal(8px, null);
@include text-align(start);
@ -138,7 +142,9 @@
}
[tabsLayout=icon-bottom] .tab-badge,
[tabsLayout=icon-left] .tab-badge,
[tabsLayout=icon-right] .tab-badge {
[tabsLayout=icon-left] .tab-badge, // deprecated
[tabsLayout=icon-right] .tab-badge, // deprecated
[tabsLayout=icon-start] .tab-badge,
[tabsLayout=icon-end] .tab-badge {
@include position(null, calc(50% - 50px), null, null);
}

2
src/components/tabs/tabs.ts
View File

@ -184,7 +184,7 @@ export class Tabs extends Ion implements AfterViewInit, RootNode, ITabs {
@Input() selectedIndex: number;
/**
* @input {string} Set the tabbar layout: `icon-top`, `icon-left`, `icon-right`, `icon-bottom`, `icon-hide`, `title-hide`.
* @input {string} Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
*/
@Input() tabsLayout: string;

12
src/components/tabs/tabs.wp.scss
View File

@ -123,13 +123,17 @@ $tabs-wp-tab-icon-size: 2.4rem !default;
padding-bottom: 8px;
}
.tabs-wp[tabsLayout=icon-right] .tab-button,
.tabs-wp[tabsLayout=icon-left] .tab-button {
.tabs-wp[tabsLayout=icon-right] .tab-button, // deprecated
.tabs-wp[tabsLayout=icon-left] .tab-button, // deprecated
.tabs-wp[tabsLayout=icon-end] .tab-button,
.tabs-wp[tabsLayout=icon-start] .tab-button {
padding-bottom: 10px;
}
.tabs-wp[tabsLayout=icon-right] .tab-button ion-icon,
.tabs-wp[tabsLayout=icon-left] .tab-button ion-icon {
.tabs-wp[tabsLayout=icon-right] .tab-button ion-icon, // deprecated
.tabs-wp[tabsLayout=icon-left] .tab-button ion-icon, // deprecated
.tabs-wp[tabsLayout=icon-end] .tab-button ion-icon,
.tabs-wp[tabsLayout=icon-start] .tab-button ion-icon {
min-width: 24px;
}

4
src/components/toolbar/toolbar.ios.scss
View File

@ -275,7 +275,7 @@ $toolbar-button-ios-strong-font-weight: 600 !default;
// iOS Toolbar Button Icon
// --------------------------------------------------
.bar-button-ios.bar-button-icon-left ion-icon {
.bar-button-ios.bar-button-icon-start ion-icon {
@include padding-horizontal(null, .3em);
font-size: 1.4em;
@ -284,7 +284,7 @@ $toolbar-button-ios-strong-font-weight: 600 !default;
pointer-events: none;
}
.bar-button-ios.bar-button-icon-right ion-icon {
.bar-button-ios.bar-button-icon-end ion-icon {
@include padding-horizontal(.4em, null);
font-size: 1.4em;

4
src/components/toolbar/toolbar.md.scss
View File

@ -295,7 +295,7 @@ $toolbar-button-md-strong-font-weight: bold !default;
// Material Design Toolbar Button Icon
// --------------------------------------------------
.bar-button-md.bar-button-icon-left ion-icon {
.bar-button-md.bar-button-icon-start ion-icon {
@include padding-horizontal(null, .3em);
font-size: 1.4em;
@ -304,7 +304,7 @@ $toolbar-button-md-strong-font-weight: bold !default;
pointer-events: none;
}
.bar-button-md.bar-button-icon-right ion-icon {
.bar-button-md.bar-button-icon-end ion-icon {
@include padding-horizontal(.4em, null);
font-size: 1.4em;

4
src/components/toolbar/toolbar.wp.scss
View File

@ -265,7 +265,7 @@ $toolbar-button-wp-strong-font-weight: bold !default;
// Windows Toolbar Button Icon
// --------------------------------------------------
.bar-button-wp.bar-button-icon-left ion-icon {
.bar-button-wp.bar-button-icon-start ion-icon {
@include padding-horizontal(null, .3em);
font-size: 1.4em;
@ -274,7 +274,7 @@ $toolbar-button-wp-strong-font-weight: bold !default;
pointer-events: none;
}
.bar-button-wp.bar-button-icon-right ion-icon {
.bar-button-wp.bar-button-icon-end ion-icon {
@include padding-horizontal(.4em, null);
font-size: 1.4em;

2
src/config/config.ts
View File

@ -120,7 +120,7 @@ import { isObject, isDefined, isFunction, isArray } from '../util/util';
* | `spinner` | `string` | The default spinner to use when a name is not defined. |
* | `swipeBackEnabled` | `boolean` | Whether native iOS swipe to go back functionality is enabled. |
* | `tabsHighlight` | `boolean` | Whether to show a highlight line under the tab when it is selected. |
* | `tabsLayout` | `string` | The layout to use for all tabs. Available options: `"icon-top"`, `"icon-left"`, `"icon-right"`, `"icon-bottom"`, `"icon-hide"`, `"title-hide"`. |
* | `tabsLayout` | `string` | The layout to use for all tabs. Available options: `"icon-top"`, `"icon-start"`, `"icon-end"`, `"icon-bottom"`, `"icon-hide"`, `"title-hide"`. |
* | `tabsPlacement` | `string` | The position of the tabs relative to the content. Available options: `"top"`, `"bottom"` |
* | `tabsHideOnSubPages` | `boolean` | Whether to hide the tabs on child pages or not. If `true` it will not show the tabs on child pages. |
* | `toastEnter` | `string` | The name of the transition to use while a toast is presented. |