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> <h4>Icons</h4>
<button ion-button icon-left color="dark"> <button ion-button icon-start color="dark">
<ion-icon name="star"></ion-icon> <ion-icon name="star"></ion-icon>
Left Icon Left Icon
</button> </button>
<button ion-button icon-right color="dark"> <button ion-button icon-end color="dark">
Right Icon Right Icon
<ion-icon name="star"></ion-icon> <ion-icon name="star"></ion-icon>
</button> </button>

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

@ -67,7 +67,7 @@
<ion-icon name="trash"></ion-icon> <ion-icon name="trash"></ion-icon>
</button> </button>
</ion-item-options> </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)"> <button ion-button color="dark" (click)="more(item)">
<ion-icon name="volume-off"></ion-icon> <ion-icon name="volume-off"></ion-icon>
Mute Mute

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

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

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

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

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

@ -41,7 +41,7 @@
<!-- Icons right of text --> <!-- 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="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [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> <ion-tab tabTitle="Settings" tabIcon="settings" [root]="root" tabBadge="4" tabBadgeStyle="secondary"></ion-tab>
@ -49,7 +49,7 @@
<!-- Icons left of text --> <!-- 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="Recents" tabIcon="call" [root]="root" tabBadge="1" tabBadgeStyle="danger"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab> <ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [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-buttons>
<ion-title>Solid</ion-title> <ion-title>Solid</ion-title>
<ion-buttons end> <ion-buttons end>
<button ion-button icon-right solid color="secondary"> <button ion-button icon-end solid color="secondary">
Help Help
<ion-icon name="help-circle"></ion-icon> <ion-icon name="help-circle"></ion-icon>
</button> </button>
@ -69,7 +69,7 @@
</button> </button>
</ion-buttons> </ion-buttons>
<ion-buttons end> <ion-buttons end>
<button ion-button icon-right outline color="secondary"> <button ion-button icon-end outline color="secondary">
Help Help
<ion-icon name="help-circle"></ion-icon> <ion-icon name="help-circle"></ion-icon>
</button> </button>

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

@ -55,7 +55,7 @@
</ion-buttons> </ion-buttons>
<ion-title>Solid</ion-title> <ion-title>Solid</ion-title>
<ion-buttons end> <ion-buttons end>
<button ion-button icon-right solid color="secondary"> <button ion-button icon-end solid color="secondary">
Help Help
<ion-icon name="help-circle"></ion-icon> <ion-icon name="help-circle"></ion-icon>
</button> </button>
@ -69,7 +69,7 @@
</button> </button>
</ion-buttons> </ion-buttons>
<ion-buttons end> <ion-buttons end>
<button ion-button icon-right outline color="secondary"> <button ion-button icon-end outline color="secondary">
Help Help
<ion-icon name="help-circle"></ion-icon> <ion-icon name="help-circle"></ion-icon>
</button> </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-group">' +
'<div class="action-sheet-title" id="{{hdrId}}" *ngIf="d.title">{{d.title}}</div>' + '<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>' + '<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>' + '<ion-icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></ion-icon>' +
'{{b.text}}' + '{{b.text}}' +
'</button>' + '</button>' +
'</div>' + '</div>' +
'<div class="action-sheet-group" *ngIf="cancelButton">' + '<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>' + '<ion-icon [name]="cancelButton.icon" *ngIf="cancelButton.icon" class="action-sheet-icon"></ion-icon>' +
'{{cancelButton.text}}' + '{{cancelButton.text}}' +
'</button>' + '</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 /// @prop - Top of the icon in the radio alert
$alert-ios-radio-icon-top: -7px !default; $alert-ios-radio-icon-top: -7px !default;
/// @prop - Left of the icon in the radio alert // deprecated
$alert-ios-radio-icon-left: 7px !default; $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 /// @prop - Width of the icon in the radio alert
$alert-ios-radio-icon-width: 6px !default; $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 /// @prop - Top of the icon in the checkbox alert
$alert-ios-checkbox-icon-top: 4px !default; $alert-ios-checkbox-icon-top: 4px !default;
/// @prop - Left of the icon in the checkbox alert // deprecated
$alert-ios-checkbox-icon-left: 7px !default; $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 /// @prop - Width of the icon in the checkbox alert
$alert-ios-checkbox-icon-width: 4px !default; $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 { .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; position: absolute;
@ -519,7 +523,7 @@ $alert-ios-checkbox-icon-transform: rotate(45deg) !default;
// ----------------------------------------- // -----------------------------------------
.alert-ios [aria-checked=true] .alert-checkbox-inner { .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; 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 /// @prop - Top of the icon in the alert radio
$alert-md-radio-icon-top: 2px !default; $alert-md-radio-icon-top: 2px !default;
/// @prop - Left of the icon in the alert radio // deprecated
$alert-md-radio-icon-left: 2px !default; $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 /// @prop - Width of the icon in the alert radio
$alert-md-radio-icon-width: 8px !default; $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 /// @prop - Top of the icon in the checkbox alert
$alert-md-checkbox-icon-top: 0 !default; $alert-md-checkbox-icon-top: 0 !default;
/// @prop - Left of the icon in the checkbox alert // deprecated
$alert-md-checkbox-icon-left: 3px !default; $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 /// @prop - Width of the icon in the checkbox alert
$alert-md-checkbox-icon-width: 6px !default; $alert-md-checkbox-icon-width: 6px !default;
@ -481,7 +485,7 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
// --------------------------------------------------- // ---------------------------------------------------
.alert-md .alert-radio-inner { .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); @include border-radius($alert-md-radio-icon-border-radius);
position: absolute; position: absolute;
@ -559,7 +563,7 @@ $alert-md-checkbox-icon-transform: rotate(45deg) !default;
} }
.alert-md [aria-checked=true] .alert-checkbox-inner { .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; 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 /// @prop - Top of the icon in the radio alert
$alert-wp-radio-icon-top: 2px !default; $alert-wp-radio-icon-top: 2px !default;
/// @prop - Left of the icon in the radio alert // deprecated
$alert-wp-radio-icon-left: 2px !default; $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 /// @prop - Width of the icon in the radio alert
$alert-wp-radio-icon-width: 8px !default; $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 /// @prop - Top of the icon in the checkbox alert
$alert-wp-checkbox-icon-top: -2px !default; $alert-wp-checkbox-icon-top: -2px !default;
/// @prop - Left of the icon in the checkbox alert // deprecated
$alert-wp-checkbox-icon-left: 3px !default; $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 /// @prop - Width of the icon in the checkbox alert
$alert-wp-checkbox-icon-width: 6px !default; $alert-wp-checkbox-icon-width: 6px !default;
@ -495,7 +499,7 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default;
// --------------------------------------------------- // ---------------------------------------------------
.alert-wp .alert-radio-inner { .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); @include border-radius($alert-wp-radio-icon-border-radius);
position: absolute; position: absolute;
@ -575,7 +579,7 @@ $alert-wp-checkbox-icon-transform: rotate(45deg) !default;
// -------------------------------------------------- // --------------------------------------------------
.alert-wp [aria-checked=true] .alert-checkbox-inner { .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; position: absolute;

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

@ -11,13 +11,15 @@
pointer-events: none; pointer-events: none;
} }
[icon-left] ion-icon { [icon-left] ion-icon, // deprecated
[icon-start] ion-icon {
@include button-icon; @include button-icon;
@include padding-horizontal(null, .3em); @include padding-horizontal(null, .3em);
} }
[icon-right] ion-icon { [icon-right] ion-icon, // deprecated
[icon-end] ion-icon {
@include button-icon; @include button-icon;
@include padding-horizontal(.4em, null); @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> * <button ion-button round outline>Outline + Round</button>
* *
* <!-- Icons --> * <!-- Icons -->
* <button ion-button icon-left> * <button ion-button icon-start>
* <ion-icon name="star"></ion-icon> * <ion-icon name="star"></ion-icon>
* Left Icon * Left Icon
* </button> * </button>
* *
* <button ion-button icon-right> * <button ion-button icon-end>
* Right Icon * Right Icon
* <ion-icon name="star"></ion-icon> * <ion-icon name="star"></ion-icon>
* </button> * </button>

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

@ -51,7 +51,8 @@ ion-item-options .button {
box-sizing: content-box; 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 { .button-inner {
flex-direction: column; flex-direction: column;
} }

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

@ -91,11 +91,11 @@ const enum SlidingState {
* ### Button Layout * ### Button Layout
* If an icon is placed with text in the option button, by default it will * 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 * 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. * `<ion-item-options>` element.
* *
* ```html * ```html
* <ion-item-options icon-left> * <ion-item-options icon-start>
* <button ion-button (click)="archive(item)"> * <button ion-button (click)="archive(item)">
* <ion-icon name="archive"></ion-icon> * <ion-icon name="archive"></ion-icon>
* Archive * Archive

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

@ -106,14 +106,18 @@ $tabs-ios-tab-icon-size: 30px !default;
vertical-align: top; vertical-align: top;
} }
.tabs-ios[tabsLayout=icon-right] .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 { .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; font-size: 1.4rem;
line-height: 1.1; line-height: 1.1;
} }
.tabs-ios[tabsLayout=icon-right] .tab-button ion-icon, .tabs-ios[tabsLayout=icon-right] .tab-button ion-icon, // deprecated
.tabs-ios[tabsLayout=icon-left] .tab-button ion-icon { .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; min-width: 24px;
height: 26px; 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 /// @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; $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; $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 /// @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; $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; $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 /// @prop - Transform origin for the tab button text
$tabs-md-tab-icon-transform-origin: 50% 150% !default; $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; transform: $tabs-md-tab-icon-transform-active;
} }
// Tab layout: icon-right // Tab layout: icon-end
.tabs-md[tabsLayout=icon-right] .tab-button[aria-selected=true] .tab-button-icon { .tabs-md[tabsLayout=icon-right] .tab-button[aria-selected=true] .tab-button-icon, // deprecated
transform: $tabs-md-tab-icon-right-transform-active; .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 // Tab layout: icon-bottom
@ -200,9 +205,10 @@ $tabs-md-tab-icon-size: 2.4rem !default;
transform: $tabs-md-tab-icon-bottom-transform-active; transform: $tabs-md-tab-icon-bottom-transform-active;
} }
// Tab layout: icon-left // Tab layout: icon-start
.tabs-md[tabsLayout=icon-left] .tab-button[aria-selected=true] .tab-button-icon { .tabs-md[tabsLayout=icon-left] .tab-button[aria-selected=true] .tab-button-icon, // deprecated
transform: $tabs-md-tab-icon-left-transform-active; .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; order: 10;
} }
[tabsLayout=icon-left] .tab-button, [tabsLayout=icon-left] .tab-button, // deprecated
[tabsLayout=icon-right] .tab-button { [tabsLayout=icon-right] .tab-button, // deprecated
[tabsLayout=icon-start] .tab-button,
[tabsLayout=icon-end] .tab-button {
flex-direction: row; 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 padding-horizontal(null, 8px);
@include text-align(end); @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 padding-horizontal(8px, null);
@include text-align(start); @include text-align(start);
@ -138,7 +142,9 @@
} }
[tabsLayout=icon-bottom] .tab-badge, [tabsLayout=icon-bottom] .tab-badge,
[tabsLayout=icon-left] .tab-badge, [tabsLayout=icon-left] .tab-badge, // deprecated
[tabsLayout=icon-right] .tab-badge { [tabsLayout=icon-right] .tab-badge, // deprecated
[tabsLayout=icon-start] .tab-badge,
[tabsLayout=icon-end] .tab-badge {
@include position(null, calc(50% - 50px), null, null); @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() 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; @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; padding-bottom: 8px;
} }
.tabs-wp[tabsLayout=icon-right] .tab-button, .tabs-wp[tabsLayout=icon-right] .tab-button, // deprecated
.tabs-wp[tabsLayout=icon-left] .tab-button { .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; padding-bottom: 10px;
} }
.tabs-wp[tabsLayout=icon-right] .tab-button ion-icon, .tabs-wp[tabsLayout=icon-right] .tab-button ion-icon, // deprecated
.tabs-wp[tabsLayout=icon-left] .tab-button ion-icon { .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; 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 // 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); @include padding-horizontal(null, .3em);
font-size: 1.4em; font-size: 1.4em;
@ -284,7 +284,7 @@ $toolbar-button-ios-strong-font-weight: 600 !default;
pointer-events: none; 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); @include padding-horizontal(.4em, null);
font-size: 1.4em; 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 // 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); @include padding-horizontal(null, .3em);
font-size: 1.4em; font-size: 1.4em;
@ -304,7 +304,7 @@ $toolbar-button-md-strong-font-weight: bold !default;
pointer-events: none; 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); @include padding-horizontal(.4em, null);
font-size: 1.4em; 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 // 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); @include padding-horizontal(null, .3em);
font-size: 1.4em; font-size: 1.4em;
@ -274,7 +274,7 @@ $toolbar-button-wp-strong-font-weight: bold !default;
pointer-events: none; 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); @include padding-horizontal(.4em, null);
font-size: 1.4em; 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. | * | `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. | * | `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. | * | `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"` | * | `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. | * | `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. | * | `toastEnter` | `string` | The name of the transition to use while a toast is presented. |