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

refactor(tabs): remove tabbarIcons and add tabbarLayout which accepts different values

Browse Source 
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 #5625
This commit is contained in:
Brandy Carney
2016-02-26 16:44:32 -05:00
parent cb8afc58ca
commit 8cfebe1386
8 changed files with 57 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
demos/tabs/main.html
View File

@ -28,7 +28,7 @@
<!-- Icons below text -->
<ion-tabs tabbarIcons="bottom" no-navbar selectedIndex="1">
<ion-tabs tabbarLayout="icon-bottom" no-navbar selectedIndex="1">
<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"></ion-tab>
@ -36,7 +36,7 @@
<!-- Icons right of text -->
<ion-tabs tabbarIcons="right" no-navbar selectedIndex="0">
<ion-tabs tabbarLayout="icon-right" no-navbar selectedIndex="0">
<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"></ion-tab>
@ -44,7 +44,7 @@
<!-- Icons left of text -->
<ion-tabs tabbarIcons="left" no-navbar>
<ion-tabs tabbarLayout="icon-left" no-navbar>
<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"></ion-tab>
@ -52,7 +52,7 @@
<!-- No icons -->
<ion-tabs tabbarIcons="hide" no-navbar>
<ion-tabs tabbarLayout="icon-hide" no-navbar>
<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"></ion-tab>

11
ionic/components/tabs/tabs.ios.scss
View File

@ -59,8 +59,8 @@ ion-tabs[tabbarPlacement=top] tabbar {
}
}
[tabbarIcons=right] .tab-button,
[tabbarIcons=left] .tab-button {
[tabbarLayout=icon-right] .tab-button,
[tabbarLayout=icon-left] .tab-button {
.tab-button-text {
font-size: 1.4rem;
@ -76,11 +76,7 @@ ion-tabs[tabbarPlacement=top] tabbar {
}
}
[tabbarIcons=hide] .tab-button-text {
font-size: 1.4rem;
line-height: 1.1;
}
[tabbarLayout=icon-hide] .tab-button,
.tab-button.has-title-only {
min-height: $tabbar-ios-height - 8;
@ -90,6 +86,7 @@ ion-tabs[tabbarPlacement=top] tabbar {
}
}
[tabbarLayout=title-hide] .tab-button,
.tab-button.icon-only {
min-height: $tabbar-ios-height - 8;
}

8
ionic/components/tabs/tabs.md.scss
View File

@ -49,13 +49,13 @@ tabbar {
min-width: $tabbar-md-item-icon-size + 5;
}
[tabbarIcons=bottom] .tab-button {
[tabbarLayout=icon-bottom] .tab-button {
padding-top: 8px;
padding-bottom: 8px;
}
[tabbarIcons=right] .tab-button,
[tabbarIcons=left] .tab-button {
[tabbarLayout=icon-right] .tab-button,
[tabbarLayout=icon-left] .tab-button {
padding-bottom: 10px;
ion-icon {
@ -63,6 +63,8 @@ tabbar {
}
}
[tabbarLayout=icon-hide] .tab-button,
[tabbarLayout=title-hide] .tab-button,
.tab-button.icon-only,
.tab-button.has-title-only {
padding: 6px 10px 6px 10px;

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

@ -108,13 +108,13 @@ tab-highlight {
display: none;
}
[tabbarIcons=bottom] .tab-button {
[tabbarLayout=icon-bottom] .tab-button {
.tab-button-icon {
order: 10;
}
}
[tabbarIcons=left] .tab-button {
[tabbarLayout=icon-left] .tab-button {
flex-direction: row;
.tab-button-icon {
@ -123,7 +123,7 @@ tab-highlight {
}
}
[tabbarIcons=right] .tab-button {
[tabbarLayout=icon-right] .tab-button {
flex-direction: row;
.tab-button-icon {
@ -133,7 +133,11 @@ tab-highlight {
}
}
[tabbarIcons=hide] .tab-button-icon {
[tabbarLayout=icon-hide] .tab-button-icon {
display: none;
}
[tabbarLayout=title-hide] .tab-button-text {
display: none;
}
@ -155,8 +159,8 @@ tab-highlight {
right: calc(50% - 30px);
}
[tabbarIcons=bottom] .tab-badge,
[tabbarIcons=left] .tab-badge,
[tabbarIcons=right] .tab-badge {
[tabbarLayout=icon-bottom] .tab-badge,
[tabbarLayout=icon-left] .tab-badge,
[tabbarLayout=icon-right] .tab-badge {
right: calc(50% - 50px);
}

22
ionic/components/tabs/tabs.ts
View File

@ -90,27 +90,32 @@ export class Tabs extends Ion {
subPages: boolean;
/**
* @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.
* @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.
*/
@Input() selectedIndex: any;
/**
* @input {boolean} Sets whether to preload all the tabs, true or false
* @input {boolean} Set whether to preload all the tabs: `true`, `false`.
*/
@Input() preloadTabs: any;
/**
* @input {string} set the position of the tabbar's icons: top, bottom, left, right, hide
* @input {string} Deprecated, use `tabbarLayout` instead. Set the position of the tabbar's icons: `top`, `bottom`, `left`, `right`, `hide`.
*/
@Input() tabbarIcons: string;
/**
* @input {string} Set position of the tabbar, top or bottom
* @input {string} Set the tabbar layout: `icon-top`, `icon-left`, `icon-right`, `icon-bottom`, `icon-hide`, `title-hide`.
*/
@Input() tabbarLayout: string;
/**
* @input {string} Set position of the tabbar: `top`, `bottom`.
*/
@Input() tabbarPlacement: string;
/**
* @input {any} expression you want to evaluate when the tabs change
* @input {any} Expression to evaluate when the tab changes.
*/
@Output() change: EventEmitter<Tab> = new EventEmitter();
@ -162,8 +167,13 @@ export class Tabs extends Ion {
*/
ngAfterViewInit() {
this._setConfig('tabbarPlacement', 'bottom');
this._setConfig('tabbarLayout', 'icon-top');
this._setConfig('tabbarIcons', 'top');
if (this.tabbarIcons) {
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'.");
}
if (this._useHighlight) {
this._platform.onResize(() => {
this._highlight.select(this.getSelected());
@ -201,7 +211,7 @@ export class Tabs extends Ion {
private _setConfig(attrKey, fallback) {
var val = this[attrKey];
if (isUndefined(val)) {
val = this._config.get(attrKey);
val = this._config.get(attrKey, fallback);
}
this._renderer.setElementAttribute(this._elementRef.nativeElement, attrKey, val);
}

8
ionic/components/tabs/test/badges/main.html
View File

@ -24,7 +24,7 @@
<!-- Icons below text -->
<ion-tabs tabbarIcons="bottom" no-navbar>
<ion-tabs tabbarLayout="icon-bottom" no-navbar>
<ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" tabBadge="577" tabBadgeStyle="dark"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
@ -32,21 +32,21 @@
<!-- Icons right of text -->
<ion-tabs tabbarIcons="right" no-navbar>
<ion-tabs tabbarLayout="icon-right" no-navbar>
<ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" tabBadge="1030" tabBadgeStyle="light"></ion-tab>
</ion-tabs>
<!-- Icons left of text -->
<ion-tabs tabbarIcons="left" no-navbar>
<ion-tabs tabbarLayout="icon-left" no-navbar>
<ion-tab tabTitle="Recents" tabIcon="call" tabBadge="32" tabBadgeStyle="danger"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings"></ion-tab>
</ion-tabs>
<!-- Dynamic Badge -->
<ion-tabs tabbarIcons="left" no-navbar>
<ion-tabs tabbarLayout="icon-left" no-navbar>
<ion-tab tabTitle="Recents" tabIcon="call"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [tabBadge]="myBadge" tabBadgeStyle="primary"></ion-tab>

24
ionic/components/tabs/test/tab-bar-scenarios/main.html
View File

@ -24,7 +24,7 @@
<!-- Icons below text -->
<ion-tabs tabbarIcons="bottom" no-navbar selectedIndex="1">
<ion-tabs tabbarLayout="icon-bottom" no-navbar selectedIndex="1">
<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"></ion-tab>
@ -32,7 +32,7 @@
<!-- Icons right of text -->
<ion-tabs tabbarIcons="right" no-navbar selectedIndex="0">
<ion-tabs tabbarLayout="icon-right" no-navbar selectedIndex="0">
<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"></ion-tab>
@ -40,7 +40,7 @@
<!-- Icons left of text -->
<ion-tabs tabbarIcons="left" no-navbar>
<ion-tabs tabbarLayout="icon-left" no-navbar>
<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"></ion-tab>
@ -48,7 +48,15 @@
<!-- No icons -->
<ion-tabs tabbarIcons="hide" no-navbar>
<ion-tabs tabbarLayout="icon-hide" no-navbar>
<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"></ion-tab>
</ion-tabs>
<!-- No title -->
<ion-tabs tabbarLayout="title-hide" no-navbar secondary>
<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"></ion-tab>
@ -61,11 +69,3 @@
<ion-tab tabTitle="Indiana Jones and the Temple of Doom" [root]="root"></ion-tab>
<ion-tab tabTitle="Indiana Jones and the Last Crusade" [root]="root"></ion-tab>
</ion-tabs>
<!-- primary color tabbar -->
<ion-tabs no-navbar primary>
<ion-tab tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs>

1
ionic/config/config.ts
View File

@ -101,6 +101,7 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
* | pageTransitionDelay | 16 | 120 |
* | tabbarPlacement | bottom | top |
* | tabbarHighlight | | top |
* | tabbarLayout | | |
* | tabSubPages | | true |
*
**/