Skip to content

Commit 8cfebe1

Browse files
brandyscarneybrandyscarney
committed
refactor(tabs): remove tabbarIcons and add tabbarLayout which accepts different values
BREAKING CHANGES: `tabbarIcons` has been replaced with `tabbarLayout` with the following values: `icon-top`, `icon-left`, `icon-right`, `icon-bottom`, `icon-hide`, `title-hide`. closes ionic-team#5625
1 parent cb8afc5 commit 8cfebe1

8 files changed

Lines changed: 57 additions & 43 deletions

File tree

‎demos/tabs/main.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -28,31 +28,31 @@
2828

2929

3030
<!-- Icons below text -->
31-
<ion-tabs tabbarIcons="bottom" no-navbar selectedIndex="1">
31+
<ion-tabs tabbarLayout="icon-bottom" no-navbar selectedIndex="1">
3232
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
3333
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
3434
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
3535
</ion-tabs>
3636

3737

3838
<!-- Icons right of text -->
39-
<ion-tabs tabbarIcons="right" no-navbar selectedIndex="0">
39+
<ion-tabs tabbarLayout="icon-right" no-navbar selectedIndex="0">
4040
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
4141
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
4242
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
4343
</ion-tabs>
4444

4545

4646
<!-- Icons left of text -->
47-
<ion-tabs tabbarIcons="left" no-navbar>
47+
<ion-tabs tabbarLayout="icon-left" no-navbar>
4848
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
4949
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
5050
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
5151
</ion-tabs>
5252

5353

5454
<!-- No icons -->
55-
<ion-tabs tabbarIcons="hide" no-navbar>
55+
<ion-tabs tabbarLayout="icon-hide" no-navbar>
5656
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
5757
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
5858
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>

‎ionic/components/tabs/tabs.ios.scss‎

Lines changed: 4 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -59,8 +59,8 @@ ion-tabs[tabbarPlacement=top] tabbar {
5959
}
6060
}
6161

62-
[tabbarIcons=right] .tab-button,
63-
[tabbarIcons=left] .tab-button {
62+
[tabbarLayout=icon-right] .tab-button,
63+
[tabbarLayout=icon-left] .tab-button {
6464

6565
.tab-button-text {
6666
font-size: 1.4rem;
@@ -76,11 +76,7 @@ ion-tabs[tabbarPlacement=top] tabbar {
7676
}
7777
}
7878

79-
[tabbarIcons=hide] .tab-button-text {
80-
font-size: 1.4rem;
81-
line-height: 1.1;
82-
}
83-
79+
[tabbarLayout=icon-hide] .tab-button,
8480
.tab-button.has-title-only {
8581
min-height: $tabbar-ios-height - 8;
8682

@@ -90,6 +86,7 @@ ion-tabs[tabbarPlacement=top] tabbar {
9086
}
9187
}
9288

89+
[tabbarLayout=title-hide] .tab-button,
9390
.tab-button.icon-only {
9491
min-height: $tabbar-ios-height - 8;
9592
}

‎ionic/components/tabs/tabs.md.scss‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -49,20 +49,22 @@ tabbar {
4949
min-width: $tabbar-md-item-icon-size + 5;
5050
}
5151

52-
[tabbarIcons=bottom] .tab-button {
52+
[tabbarLayout=icon-bottom] .tab-button {
5353
padding-top: 8px;
5454
padding-bottom: 8px;
5555
}
5656

57-
[tabbarIcons=right] .tab-button,
58-
[tabbarIcons=left] .tab-button {
57+
[tabbarLayout=icon-right] .tab-button,
58+
[tabbarLayout=icon-left] .tab-button {
5959
padding-bottom: 10px;
6060

6161
ion-icon {
6262
min-width: 24px;
6363
}
6464
}
6565

66+
[tabbarLayout=icon-hide] .tab-button,
67+
[tabbarLayout=title-hide] .tab-button,
6668
.tab-button.icon-only,
6769
.tab-button.has-title-only {
6870
padding: 6px 10px 6px 10px;

‎ionic/components/tabs/tabs.scss‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -108,13 +108,13 @@ tab-highlight {
108108
display: none;
109109
}
110110

111-
[tabbarIcons=bottom] .tab-button {
111+
[tabbarLayout=icon-bottom] .tab-button {
112112
.tab-button-icon {
113113
order: 10;
114114
}
115115
}
116116

117-
[tabbarIcons=left] .tab-button {
117+
[tabbarLayout=icon-left] .tab-button {
118118
flex-direction: row;
119119

120120
.tab-button-icon {
@@ -123,7 +123,7 @@ tab-highlight {
123123
}
124124
}
125125

126-
[tabbarIcons=right] .tab-button {
126+
[tabbarLayout=icon-right] .tab-button {
127127
flex-direction: row;
128128

129129
.tab-button-icon {
@@ -133,7 +133,11 @@ tab-highlight {
133133
}
134134
}
135135

136-
[tabbarIcons=hide] .tab-button-icon {
136+
[tabbarLayout=icon-hide] .tab-button-icon {
137+
display: none;
138+
}
139+
140+
[tabbarLayout=title-hide] .tab-button-text {
137141
display: none;
138142
}
139143

@@ -155,8 +159,8 @@ tab-highlight {
155159
right: calc(50% - 30px);
156160
}
157161

158-
[tabbarIcons=bottom] .tab-badge,
159-
[tabbarIcons=left] .tab-badge,
160-
[tabbarIcons=right] .tab-badge {
162+
[tabbarLayout=icon-bottom] .tab-badge,
163+
[tabbarLayout=icon-left] .tab-badge,
164+
[tabbarLayout=icon-right] .tab-badge {
161165
right: calc(50% - 50px);
162166
}

‎ionic/components/tabs/tabs.ts‎

Lines changed: 16 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -90,27 +90,32 @@ export class Tabs extends Ion {
9090
subPages: boolean;
9191

9292
/**
93-
* @input {number} The default selected tab index when first loaded. If a selected index wasn't provided then it'll use `0`, the first tab.
93+
* @input {number} The default selected tab index when first loaded. If a selected index isn't provided then it will use `0`, the first tab.
9494
*/
9595
@Input() selectedIndex: any;
9696

9797
/**
98-
* @input {boolean} Sets whether to preload all the tabs, true or false
98+
* @input {boolean} Set whether to preload all the tabs: `true`, `false`.
9999
*/
100100
@Input() preloadTabs: any;
101101

102102
/**
103-
* @input {string} set the position of the tabbar's icons: top, bottom, left, right, hide
103+
* @input {string} Deprecated, use `tabbarLayout` instead. Set the position of the tabbar's icons: `top`, `bottom`, `left`, `right`, `hide`.
104104
*/
105105
@Input() tabbarIcons: string;
106106

107107
/**
108-
* @input {string} Set position of the tabbar, top or bottom
108+
* @input {string} Set the tabbar layout: `icon-top`, `icon-left`, `icon-right`, `icon-bottom`, `icon-hide`, `title-hide`.
109+
*/
110+
@Input() tabbarLayout: string;
111+
112+
/**
113+
* @input {string} Set position of the tabbar: `top`, `bottom`.
109114
*/
110115
@Input() tabbarPlacement: string;
111116

112117
/**
113-
* @input {any} expression you want to evaluate when the tabs change
118+
* @input {any} Expression to evaluate when the tab changes.
114119
*/
115120
@Output() change: EventEmitter<Tab> = new EventEmitter();
116121

@@ -162,8 +167,13 @@ export class Tabs extends Ion {
162167
*/
163168
ngAfterViewInit() {
164169
this._setConfig('tabbarPlacement', 'bottom');
170+
this._setConfig('tabbarLayout', 'icon-top');
165171
this._setConfig('tabbarIcons', 'top');
166172

173+
if (this.tabbarIcons) {
174+
console.warn("DEPRECATION WARNING: 'tabbarIcons' is no longer supported and will be removed in next major release. Use 'tabbarLayout' instead. Available values: 'icon-top', 'icon-left', 'icon-right', 'icon-bottom', 'icon-hide', 'title-hide'.");
175+
}
176+
167177
if (this._useHighlight) {
168178
this._platform.onResize(() => {
169179
this._highlight.select(this.getSelected());
@@ -201,7 +211,7 @@ export class Tabs extends Ion {
201211
private _setConfig(attrKey, fallback) {
202212
var val = this[attrKey];
203213
if (isUndefined(val)) {
204-
val = this._config.get(attrKey);
214+
val = this._config.get(attrKey, fallback);
205215
}
206216
this._renderer.setElementAttribute(this._elementRef.nativeElement, attrKey, val);
207217
}

‎ionic/components/tabs/test/badges/main.html‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -24,29 +24,29 @@
2424

2525

2626
<!-- Icons below text -->
27-
<ion-tabs tabbarIcons="bottom" no-navbar>
27+
<ion-tabs tabbarLayout="icon-bottom" no-navbar>
2828
<ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
2929
<ion-tab tabTitle="Favorites" tabIcon="heart" tabBadge="577" tabBadgeStyle="dark"></ion-tab>
3030
<ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
3131
</ion-tabs>
3232

3333

3434
<!-- Icons right of text -->
35-
<ion-tabs tabbarIcons="right" no-navbar>
35+
<ion-tabs tabbarLayout="icon-right" no-navbar>
3636
<ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
3737
<ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
3838
<ion-tab tabTitle="Settings" tabIcon="settings" tabBadge="1030" tabBadgeStyle="light"></ion-tab>
3939
</ion-tabs>
4040

4141
<!-- Icons left of text -->
42-
<ion-tabs tabbarIcons="left" no-navbar>
42+
<ion-tabs tabbarLayout="icon-left" no-navbar>
4343
<ion-tab tabTitle="Recents" tabIcon="call" tabBadge="32" tabBadgeStyle="danger"></ion-tab>
4444
<ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
4545
<ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
4646
</ion-tabs>
4747

4848
<!-- Dynamic Badge -->
49-
<ion-tabs tabbarIcons="left" no-navbar>
49+
<ion-tabs tabbarLayout="icon-left" no-navbar>
5050
<ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
5151
<ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
5252
<ion-tab tabTitle="Settings" tabIcon="settings" [tabBadge]="myBadge" tabBadgeStyle="primary"></ion-tab>

‎ionic/components/tabs/test/tab-bar-scenarios/main.html‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,31 +24,39 @@
2424

2525

2626
<!-- Icons below text -->
27-
<ion-tabs tabbarIcons="bottom" no-navbar selectedIndex="1">
27+
<ion-tabs tabbarLayout="icon-bottom" no-navbar selectedIndex="1">
2828
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
2929
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
3030
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
3131
</ion-tabs>
3232

3333

3434
<!-- Icons right of text -->
35-
<ion-tabs tabbarIcons="right" no-navbar selectedIndex="0">
35+
<ion-tabs tabbarLayout="icon-right" no-navbar selectedIndex="0">
3636
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
3737
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
3838
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
3939
</ion-tabs>
4040

4141

4242
<!-- Icons left of text -->
43-
<ion-tabs tabbarIcons="left" no-navbar>
43+
<ion-tabs tabbarLayout="icon-left" no-navbar>
4444
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
4545
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
4646
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
4747
</ion-tabs>
4848

4949

5050
<!-- No icons -->
51-
<ion-tabs tabbarIcons="hide" no-navbar>
51+
<ion-tabs tabbarLayout="icon-hide" no-navbar>
52+
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
53+
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
54+
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
55+
</ion-tabs>
56+
57+
58+
<!-- No title -->
59+
<ion-tabs tabbarLayout="title-hide" no-navbar secondary>
5260
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
5361
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
5462
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
@@ -61,11 +69,3 @@
6169
<ion-tab tabTitle="Indiana Jones and the Temple of Doom" [root]="root"></ion-tab>
6270
<ion-tab tabTitle="Indiana Jones and the Last Crusade" [root]="root"></ion-tab>
6371
</ion-tabs>
64-
65-
66-
<!-- primary color tabbar -->
67-
<ion-tabs no-navbar primary>
68-
<ion-tab tabIcon="call" [root]="root"></ion-tab>
69-
<ion-tab tabIcon="heart" [root]="root"></ion-tab>
70-
<ion-tab tabIcon="settings" [root]="root"></ion-tab>
71-
</ion-tabs>

‎ionic/config/config.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,7 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
101101
* | pageTransitionDelay | 16 | 120 |
102102
* | tabbarPlacement | bottom | top |
103103
* | tabbarHighlight | | top |
104+
* | tabbarLayout | | |
104105
* | tabSubPages | | true |
105106
*
106107
**/

0 commit comments

Comments
 (0)