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): rename tab input/config options to be more clear/consistent

Browse Source 
BREAKING CHANGES:

Tab input/config options have been renamed. The following options were
renamed:

- `tabbarHighlight` -> `tabsHighlight`
- `tabbarLayout` -> `tabsLayout`
- `tabSubPages` -> `tabsHideOnSubPages`
- `tabbarPlacement` -> `tabsPlacement`

The previous names have been deprecated. They will still work in the
current release but will be removed in the future so please update to
the new names.

references #7143
This commit is contained in:
Brandy Carney
2016-07-07 13:09:00 -04:00
parent 580b8d5f0b
commit 41064bf2be
19 changed files with 167 additions and 112 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
demos/config/index.ts
View File

@ -94,13 +94,13 @@ export class ApiDemoPage {
this.config = {
'backButtonIcon': 'ios-arrow-back',
'iconMode': 'ios',
'tabbarPlacement': 'bottom'
'tabsPlacement': 'bottom'
};
} else {
this.config = {
'backButtonIcon': 'md-arrow-back',
'iconMode': 'md',
'tabbarPlacement': 'top'
'tabsPlacement': 'top'
};
}

4
demos/config/main.html
View File

@ -31,7 +31,7 @@
<ion-item>
<ion-label>Tab Placement</ion-label>
<ion-select [(ngModel)]="config.tabbarPlacement">
<ion-select [(ngModel)]="config.tabsPlacement">
<ion-option value="bottom">bottom</ion-option>
<ion-option value="top">top</ion-option>
</ion-select>
@ -53,7 +53,7 @@
ionicBootstrap(MyApp, [], {
backButtonIcon: "{{initialConfig.backButtonIcon}}"
iconMode: "{{initialConfig.iconMode}}"
tabbarPlacement: "{{initialConfig.tabbarPlacement}}"
tabsPlacement: "{{initialConfig.tabsPlacement}}"
});</pre>
<div padding>

8
demos/tabs/main.html
View File

@ -33,7 +33,7 @@
<!-- Icons below text -->
<ion-tabs tabbarLayout="icon-bottom" selectedIndex="1" danger>
<ion-tabs tabsLayout="icon-bottom" selectedIndex="1" danger>
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="47" tabBadgeStyle="light"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
@ -41,7 +41,7 @@
<!-- Icons right of text -->
<ion-tabs tabbarLayout="icon-right" selectedIndex="0" light>
<ion-tabs tabsLayout="icon-right" selectedIndex="0" 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 tabbarLayout="icon-left" dark>
<ion-tabs tabsLayout="icon-left" 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>
@ -57,7 +57,7 @@
<!-- No icons -->
<ion-tabs tabbarLayout="icon-hide">
<ion-tabs tabsLayout="icon-hide">
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root" tabBadge="61" tabBadgeStyle="dark"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>

2
src/components/app/structure.scss
View File

@ -176,7 +176,7 @@ ion-tabbar.show-tabbar {
opacity: 1;
}
[tabbarPlacement=top] > ion-tabbar {
[tabsPlacement=top] > ion-tabbar {
top: 0;
bottom: auto;
}

20
src/components/content/content.ts
View File

@ -68,7 +68,7 @@ export class Content extends Ion {
private _headerHeight: number;
private _footerHeight: number;
private _tabbarHeight: number;
private _tabbarPlacement: string;
private _tabsPlacement: string;
private _inputPolling: boolean = false;
private _scroll: ScrollView;
private _scLsn: Function;
@ -492,7 +492,7 @@ export class Content extends Ion {
this._paddingLeft = 0;
this._headerHeight = 0;
this._footerHeight = 0;
this._tabbarPlacement = null;
this._tabsPlacement = null;
let ele: HTMLElement = this._elementRef.nativeElement;
if (!ele) return;
@ -530,9 +530,9 @@ export class Content extends Ion {
tabbarEle = <HTMLElement>ele.firstElementChild;
this._tabbarHeight = tabbarEle.clientHeight;
if (this._tabbarPlacement === null) {
if (this._tabsPlacement === null) {
// this is the first tabbar found, remember it's position
this._tabbarPlacement = ele.getAttribute('tabbarplacement');
this._tabsPlacement = ele.getAttribute('tabsplacement');
}
}
@ -558,7 +558,7 @@ export class Content extends Ion {
// have come from the app's css, is different than the new padding value
newVal = this._headerHeight + this._paddingTop;
if (this._tabbarPlacement === 'top') {
if (this._tabsPlacement === 'top') {
newVal += this._tabbarHeight;
}
if (newVal !== this.contentTop) {
@ -567,7 +567,7 @@ export class Content extends Ion {
}
newVal = this._footerHeight + this._paddingBottom;
if (this._tabbarPlacement === 'bottom') {
if (this._tabsPlacement === 'bottom') {
newVal += this._tabbarHeight;
if (newVal > 0 && this._footerEle) {
@ -582,7 +582,7 @@ export class Content extends Ion {
} else {
// adjust the content with margins
newVal = this._headerHeight;
if (this._tabbarPlacement === 'top') {
if (this._tabsPlacement === 'top') {
newVal += this._tabbarHeight;
}
if (newVal !== this.contentTop) {
@ -591,7 +591,7 @@ export class Content extends Ion {
}
newVal = this._footerHeight;
if (this._tabbarPlacement === 'bottom') {
if (this._tabsPlacement === 'bottom') {
newVal += this._tabbarHeight;
}
if (newVal !== this.contentBottom) {
@ -605,9 +605,9 @@ export class Content extends Ion {
}
if (this._tabbarPlacement !== null && this._tabs) {
if (this._tabsPlacement !== null && this._tabs) {
// set the position of the tabbar
if (this._tabbarPlacement === 'top') {
if (this._tabsPlacement === 'top') {
this._tabs.setTabbarPosition(this._headerHeight, -1);
} else {

9
src/components/tabs/tab-button.ts
View File

@ -37,12 +37,17 @@ export class TabButton extends Ion {
constructor(config: Config, elementRef: ElementRef) {
super(elementRef);
this.disHover = (config.get('hoverCSS') === false);
this.layout = config.get('tabbarLayout');
this.layout = config.get('tabsLayout');
// TODO deprecated 07-07-2016 beta.11
if (config.get('tabbarLayout') !== undefined) {
this.layout = config.get('tabbarLayout');
}
}
ngOnInit() {
this.tab.btn = this;
this.layout = this.tab.parent.tabbarLayout || this.layout;
this.layout = this.tab.parent.tabsLayout || this.layout;
this.hasTitle = !!this.tab.tabTitle;
this.hasIcon = !!this.tab.tabIcon && this.layout !== 'icon-hide';

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

@ -22,7 +22,7 @@ ion-tabbar {
background: $tabbar-ios-background;
}
ion-tabs[tabbarPlacement=top] ion-tabbar {
ion-tabs[tabsPlacement=top] ion-tabbar {
border-top: 0;
border-bottom: 1px solid $toolbar-ios-border-color;
}
@ -65,8 +65,8 @@ ion-tabs[tabbarPlacement=top] ion-tabbar {
}
}
[tabbarLayout=icon-right] .tab-button,
[tabbarLayout=icon-left] .tab-button {
[tabsLayout=icon-right] .tab-button,
[tabsLayout=icon-left] .tab-button {
.tab-button-text {
font-size: 1.4rem;
@ -81,7 +81,7 @@ ion-tabs[tabbarPlacement=top] ion-tabbar {
}
}
[tabbarLayout=icon-hide] .tab-button,
[tabsLayout=icon-hide] .tab-button,
.tab-button.has-title-only {
min-height: $tabbar-ios-height - 8;
@ -93,7 +93,7 @@ ion-tabs[tabbarPlacement=top] ion-tabbar {
}
}
[tabbarLayout=title-hide] .tab-button,
[tabsLayout=title-hide] .tab-button,
.tab-button.icon-only {
min-height: $tabbar-ios-height - 8;
}
@ -104,7 +104,7 @@ ion-tabs[tabbarPlacement=top] ion-tabbar {
border-top-width: $hairlines-width;
}
&[tabbarPlacement="top"] ion-tabbar {
&[tabsPlacement="top"] ion-tabbar {
border-bottom-width: $hairlines-width;
}

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

@ -52,13 +52,13 @@ ion-tabbar {
font-size: $tabbar-md-item-icon-size;
}
[tabbarLayout=icon-bottom] .tab-button {
[tabsLayout=icon-bottom] .tab-button {
padding-top: 8px;
padding-bottom: 8px;
}
[tabbarLayout=icon-right] .tab-button,
[tabbarLayout=icon-left] .tab-button {
[tabsLayout=icon-right] .tab-button,
[tabsLayout=icon-left] .tab-button {
padding-bottom: 10px;
ion-icon {
@ -66,8 +66,8 @@ ion-tabbar {
}
}
[tabbarLayout=icon-hide] .tab-button,
[tabbarLayout=title-hide] .tab-button,
[tabsLayout=icon-hide] .tab-button,
[tabsLayout=title-hide] .tab-button,
.tab-button.icon-only,
.tab-button.has-title-only {
padding: 6px 10px;
@ -91,7 +91,7 @@ tab-highlight {
}
}
[tabbarPlacement=bottom] tab-highlight {
[tabsPlacement=bottom] tab-highlight {
top: 0;
}

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

@ -75,13 +75,13 @@ tab-highlight {
display: none;
}
[tabbarLayout=icon-bottom] .tab-button {
[tabsLayout=icon-bottom] .tab-button {
.tab-button-icon {
order: 10;
}
}
[tabbarLayout=icon-left] .tab-button {
[tabsLayout=icon-left] .tab-button {
flex-direction: row;
.tab-button-icon {
@ -91,7 +91,7 @@ tab-highlight {
}
}
[tabbarLayout=icon-right] .tab-button {
[tabsLayout=icon-right] .tab-button {
flex-direction: row;
.tab-button-icon {
@ -103,11 +103,11 @@ tab-highlight {
}
}
[tabbarLayout=icon-hide] .tab-button-icon {
[tabsLayout=icon-hide] .tab-button-icon {
display: none;
}
[tabbarLayout=title-hide] .tab-button-text {
[tabsLayout=title-hide] .tab-button-text {
display: none;
}
@ -132,8 +132,8 @@ tab-highlight {
right: calc(50% - 30px);
}
[tabbarLayout=icon-bottom] .tab-badge,
[tabbarLayout=icon-left] .tab-badge,
[tabbarLayout=icon-right] .tab-badge {
[tabsLayout=icon-bottom] .tab-badge,
[tabsLayout=icon-left] .tab-badge,
[tabsLayout=icon-right] .tab-badge {
right: calc(50% - 50px);
}

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

@ -29,21 +29,21 @@ import { ViewController } from '../nav/view-controller';
* The position of the tabs relative to the content varies based on
* the mode. By default, the tabs are placed at the bottom of the screen
* for `ios` mode, and at the top for the `md` and `wp` modes. You can
* configure the position using the `tabbarPlacement` property on the
* configure the position using the `tabsPlacement` property on the
* `<ion-tabs>` element, or in your app's [config](../../config/Config/).
* See the [Input Properties](#input-properties) below for the available
* values of `tabbarPlacement`.
* values of `tabsPlacement`.
*
* ### Layout
*
* The layout for all of the tabs can be defined using the `tabbarLayout`
* The layout for all of the tabs can be defined using the `tabsLayout`
* property. If the individual tab has a title and icon, the icons will
* show on top of the title by default. All tabs can be changed by setting
* the value of `tabbarLayout` on the `<ion-tabs>` element, or in your
* the value of `tabsLayout` on the `<ion-tabs>` element, or in your
* app's [config](../../config/Config/). For example, this is useful if
* you want to show tabs with a title only on Android, but show icons
* and a title for iOS. See the [Input Properties](#input-properties)
* below for the available values of `tabbarLayout`.
* below for the available values of `tabsLayout`.
*
* ### Selecting a Tab
*
@ -187,15 +187,25 @@ export class Tabs extends Ion {
*/
@Input() preloadTabs: any;
/**
* @private DEPRECATED. Please use `tabsLayout` instead.
*/
@Input() private tabbarLayout: string;
/**
* @input {string} Set the tabbar layout: `icon-top`, `icon-left`, `icon-right`, `icon-bottom`, `icon-hide`, `title-hide`.
*/
@Input() tabbarLayout: string;
@Input() tabsLayout: string;
/**
* @private DEPRECATED. Please use `tabsPlacement` instead.
*/
@Input() private tabbarPlacement: string;
/**
* @input {string} Set position of the tabbar: `top`, `bottom`.
*/
@Input() tabbarPlacement: string;
@Input() tabsPlacement: string;
/**
* @input {any} Expression to evaluate when the tab changes.
@ -235,9 +245,21 @@ export class Tabs extends Ion {
this.parent = parent;
this.id = ++tabIds;
this.subPages = _config.getBoolean('tabSubPages');
this._useHighlight = _config.getBoolean('tabbarHighlight');
this._sbPadding = _config.getBoolean('statusbarPadding');
this.subPages = _config.getBoolean('tabsHideOnSubPages');
this._useHighlight = _config.getBoolean('tabsHighlight');
// TODO deprecated 07-07-2016 beta.11
if (_config.get('tabSubPages') !== null) {
console.warn("Config option 'tabSubPages' has been deprecated. Please use 'tabsHideOnSubPages' instead.");
this.subPages = _config.getBoolean('tabSubPages');
}
// TODO deprecated 07-07-2016 beta.11
if (_config.get('tabbarHighlight') !== null) {
console.warn("Config option 'tabbarHighlight' has been deprecated. Please use 'tabsHighlight' instead.");
this._useHighlight = _config.getBoolean('tabbarHighlight');
}
if (parent) {
// this Tabs has a parent Nav
@ -265,9 +287,39 @@ export class Tabs extends Ion {
* @private
*/
ngAfterViewInit() {
this._setConfig('tabsPlacement', 'bottom');
this._setConfig('tabsLayout', 'icon-top');
// TODO deprecated 07-07-2016 beta.11
this._setConfig('tabbarPlacement', 'bottom');
this._setConfig('tabbarLayout', 'icon-top');
// TODO deprecated 07-07-2016 beta.11
if (this.tabbarPlacement !== undefined) {
console.warn("Input 'tabbarPlacement' has been deprecated. Please use 'tabsPlacement' instead.");
this._renderer.setElementAttribute(this._elementRef.nativeElement, 'tabsPlacement', this.tabbarPlacement);
this.tabsPlacement = this.tabbarPlacement;
}
// TODO deprecated 07-07-2016 beta.11
if (this._config.get('tabbarPlacement') !== null) {
console.warn("Config option 'tabbarPlacement' has been deprecated. Please use 'tabsPlacement' instead.");
this._renderer.setElementAttribute(this._elementRef.nativeElement, 'tabsPlacement', this._config.get('tabbarPlacement'));
}
// TODO deprecated 07-07-2016 beta.11
if (this.tabbarLayout !== undefined) {
console.warn("Input 'tabbarLayout' has been deprecated. Please use 'tabsLayout' instead.");
this._renderer.setElementAttribute(this._elementRef.nativeElement, 'tabsLayout', this.tabbarLayout);
this.tabsLayout = this.tabbarLayout;
}
// TODO deprecated 07-07-2016 beta.11
if (this._config.get('tabbarLayout') !== null) {
console.warn("Config option 'tabbarLayout' has been deprecated. Please use 'tabsLayout' instead.");
this._renderer.setElementAttribute(this._elementRef.nativeElement, 'tabsLayout', this._config.get('tabsLayout'));
}
if (this._useHighlight) {
this._platform.onResize(() => {
this._highlight.select(this.getSelected());

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

@ -56,13 +56,13 @@ ion-tabbar {
font-size: $tabbar-wp-item-icon-size;
}
[tabbarLayout=icon-bottom] .tab-button {
[tabsLayout=icon-bottom] .tab-button {
padding-top: 8px;
padding-bottom: 8px;
}
[tabbarLayout=icon-right] .tab-button,
[tabbarLayout=icon-left] .tab-button {
[tabsLayout=icon-right] .tab-button,
[tabsLayout=icon-left] .tab-button {
padding-bottom: 10px;
ion-icon {
@ -70,14 +70,14 @@ ion-tabbar {
}
}
[tabbarLayout=icon-hide] .tab-button,
[tabbarLayout=title-hide] .tab-button,
[tabsLayout=icon-hide] .tab-button,
[tabsLayout=title-hide] .tab-button,
.tab-button.icon-only,
.tab-button.has-title-only {
padding: 6px 10px;
}
[tabbarPlacement=bottom] .tab-button {
[tabsPlacement=bottom] .tab-button {
border-top: 2px solid transparent;
border-bottom-width: 0;

12
src/components/tabs/test/badges/main.html
View File

@ -24,7 +24,7 @@
<!-- Icons below text -->
<ion-tabs tabbarLayout="icon-bottom" no-navbar>
<ion-tabs tabsLayout="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 tabbarLayout="icon-right" primary no-navbar>
<ion-tabs tabsLayout="icon-right" primary 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 tabbarLayout="icon-left" no-navbar>
<ion-tabs tabsLayout="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>
<!-- No icons -->
<ion-tabs no-navbar tabbarLayout="icon-hide">
<ion-tabs no-navbar tabsLayout="icon-hide">
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root" tabBadge="4"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
@ -54,14 +54,14 @@
<!-- No title -->
<ion-tabs tabbarLayout="title-hide" secondary no-navbar>
<ion-tabs tabsLayout="title-hide" secondary no-navbar>
<ion-tab tabTitle="Recents" tabIcon="call" [root]="root" tabBadge="7" tabBadgeStyle="light"></ion-tab>
<ion-tab tabTitle="Favorites" tabIcon="heart" [root]="root"></ion-tab>
<ion-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs>
<!-- Dynamic Badge -->
<ion-tabs tabbarLayout="icon-left" no-navbar>
<ion-tabs tabsLayout="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>

10
src/components/tabs/test/colors/main.html
View File

@ -24,7 +24,7 @@
<!-- Icons below text -->
<ion-tabs tabbarLayout="icon-bottom" no-navbar selectedIndex="1" dark>
<ion-tabs tabsLayout="icon-bottom" no-navbar selectedIndex="1" dark>
<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 tabbarLayout="icon-right" no-navbar selectedIndex="0" danger>
<ion-tabs tabsLayout="icon-right" no-navbar selectedIndex="0" danger>
<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 tabbarLayout="icon-left" no-navbar light>
<ion-tabs tabsLayout="icon-left" no-navbar 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"></ion-tab>
@ -48,7 +48,7 @@
<!-- No icons -->
<ion-tabs tabbarLayout="icon-hide" no-navbar primary>
<ion-tabs tabsLayout="icon-hide" no-navbar primary>
<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>
@ -56,7 +56,7 @@
<!-- No title -->
<ion-tabs tabbarLayout="title-hide" no-navbar secondary>
<ion-tabs tabsLayout="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>

12
src/components/tabs/test/tab-bar-scenarios/main.html
View File

@ -24,7 +24,7 @@
<!-- Icons below text -->
<ion-tabs tabbarLayout="icon-bottom" no-navbar selectedIndex="1">
<ion-tabs tabsLayout="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 tabbarLayout="icon-right" no-navbar selectedIndex="0">
<ion-tabs tabsLayout="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 tabbarLayout="icon-left" no-navbar>
<ion-tabs tabsLayout="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,15 +48,15 @@
<!-- No icons -->
<ion-tabs tabbarLayout="icon-hide" no-navbar>
<ion-tabs tabsLayout="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-tab tabTitle="Settings" tabIcon="settings" [root]="root"></ion-tab>
</ion-tabs>
<!-- No title -->
<ion-tabs tabbarLayout="title-hide" secondary no-navbar>
<ion-tabs tabsLayout="title-hide" secondary 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="Radio" tabIcon="musical-notes" [root]="root"></ion-tab>

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

@ -30,9 +30,9 @@ $navbar-md-height: $toolbar-md-height !default;
ion-header::after,
[tabbarplacement="top"] > ion-tabbar::after,
[tabsPlacement="top"] > ion-tabbar::after,
ion-footer::before,
[tabbarplacement="bottom"] > ion-tabbar::before {
[tabsPlacement="bottom"] > ion-tabbar::before {
// using datauri png background image for improved scroll performance
// rather than using `box-shadow: 0 2px 5px rgba(0,0,0,0.26);`
// noticable performance difference on older Android devices
@ -51,7 +51,7 @@ ion-footer::before,
}
ion-footer::before,
[tabbarplacement="bottom"] > ion-tabbar::before {
[tabsPlacement="bottom"] > ion-tabbar::before {
top: -2px;
bottom: auto;

2
src/config/bootstrap.ts
View File

@ -27,7 +27,7 @@ const _reflect: any = Reflect;
* })
* export class MyClass{}
*
* ionicBootstrap(MyClass, null, {tabbarPlacement: 'bottom'})
* ionicBootstrap(MyClass, null, {tabsPlacement: 'bottom'})
* ```
*/
export function ionicBootstrap(appRootComponent: any, customProviders?: Array<any>, config?: any) {

20
src/config/config.ts
View File

@ -24,7 +24,7 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
* iconMode: 'ios',
* modalEnter: 'modal-slide-in',
* modalLeave: 'modal-slide-out',
* tabbarPlacement: 'bottom',
* tabsPlacement: 'bottom',
* pageTransition: 'ios',
* });
* ```
@ -37,19 +37,19 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
* import {ionicBootstrap} from 'ionic-angular';
*
* ionicBootstrap(AppRoot, customProviders, {
* tabbarPlacement: 'bottom',
* tabsPlacement: 'bottom',
* platforms: {
* ios: {
* tabbarPlacement: 'top',
* tabsPlacement: 'top',
* }
* });
* ```
*
* We could also configure these values at a component level. Take `tabbarPlacement`,
* We could also configure these values at a component level. Take `tabsPlacement`,
* we can configure this as a property on our `ion-tabs`.
*
* ```html
* <ion-tabs tabbarPlacement="top">
* <ion-tabs tabsPlacement="top">
* <ion-tab tabTitle="Dash" tabIcon="pulse" [root]="tabRoot"></ion-tab>
* </ion-tabs>
* ```
@ -58,7 +58,7 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
* while in the browser. Simply add `?ionic<PROPERTYNAME>=<value>` to the url.
*
* ```bash
* http://localhost:8100/?ionicTabbarPlacement=bottom
* http://localhost:8100/?ionicTabsPlacement=bottom
* ```
*
* Any value can be added to config, and looked up at a later in any component.
@ -100,10 +100,10 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
* | `popoverLeave` | `string` | The name of the transition to use while a popover is dismissed. |
* | `prodMode` | `boolean` | Disable development mode, which turns off assertions and other checks within the framework. One important assertion this disables verifies that a change detection pass does not result in additional changes to any bindings (also known as unidirectional data flow).
* | `spinner` | `string` | The default spinner to use when a name is not defined. |
* | `tabbarHighlight` | `boolean` | Whether to show a highlight line under the tab when it is selected. |
* | `tabbarLayout` | `string` | The layout to use for all tabs. Available options: `"icon-top"`, `"icon-left"`, `"icon-right"`, `"icon-bottom"`, `"icon-hide"`, `"title-hide"`. |
* | `tabbarPlacement` | `string` | The position of the tabs. Available options: `"top"`, `"bottom"` |
* | `tabSubPages` | `boolean` | Whether to hide the tabs on child pages or not. If `true` it will not show the tabs on child pages. |
* | `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"`. |
* | `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. |
* | `toastLeave` | `string` | The name of the transition to use while a toast is dismissed. |
*

20
src/config/modes.ts
View File

@ -37,10 +37,9 @@ Config.setModeConfig('ios', {
spinner: 'ios',
tabbarHighlight: false,
tabbarPlacement: 'bottom',
tabSubPages: false,
tabsHighlight: false,
tabsPlacement: 'bottom',
tabsHideOnSubPages: false,
toastEnter: 'toast-slide-in',
toastLeave: 'toast-slide-out',
@ -82,10 +81,9 @@ Config.setModeConfig('md', {
spinner: 'crescent',
tabbarHighlight: true,
tabbarPlacement: 'top',
tabSubPages: true,
tabsHighlight: true,
tabsPlacement: 'top',
tabsHideOnSubPages: true,
toastEnter: 'toast-md-slide-in',
toastLeave: 'toast-md-slide-out',
@ -127,9 +125,9 @@ Config.setModeConfig('wp', {
spinner: 'circles',
tabbarPlacement: 'top',
tabSubPages: true,
tabsHighlight: false,
tabsPlacement: 'top',
tabsHideOnSubPages: true,
toastEnter: 'toast-wp-slide-in',
toastLeave: 'toast-wp-slide-out',

28
src/config/test/config.spec.ts
View File

@ -105,7 +105,7 @@ export function run() {
config.setPlatform(platform);
expect(config.get('mode')).toEqual('md');
expect(config.get('tabbarPlacement')).toEqual('top');
expect(config.get('tabsPlacement')).toEqual('top');
});
it('should override mode settings from platforms setting', () => {
@ -120,7 +120,7 @@ export function run() {
config.setPlatform(platform);
expect(config.get('mode')).toEqual('md');
expect(config.get('tabbarPlacement')).toEqual('top');
expect(config.get('tabsPlacement')).toEqual('top');
});
it('should get boolean value from querystring', () => {
@ -231,27 +231,27 @@ export function run() {
it('should override ios mode config with user platform setting', () => {
let config = new Config({
tabbarPlacement: 'hide',
tabsPlacement: 'hide',
platforms: {
ios: {
tabbarPlacement: 'top'
tabsPlacement: 'top'
}
}
});
let platform = new Platform(['ios']);
config.setPlatform(platform);
expect(config.get('tabbarPlacement')).toEqual('top');
expect(config.get('tabsPlacement')).toEqual('top');
});
it('should override ios mode config with user setting', () => {
let config = new Config({
tabbarPlacement: 'top'
tabsPlacement: 'top'
});
let platform = new Platform(['ios']);
config.setPlatform(platform);
expect(config.get('tabbarPlacement')).toEqual('top');
expect(config.get('tabsPlacement')).toEqual('top');
});
it('should get setting from md mode', () => {
@ -259,7 +259,7 @@ export function run() {
let platform = new Platform(['android']);
config.setPlatform(platform);
expect(config.get('tabbarPlacement')).toEqual('top');
expect(config.get('tabsPlacement')).toEqual('top');
});
it('should get setting from ios mode', () => {
@ -267,7 +267,7 @@ export function run() {
let platform = new Platform(['ios']);
config.setPlatform(platform);
expect(config.get('tabbarPlacement')).toEqual('bottom');
expect(config.get('tabsPlacement')).toEqual('bottom');
});
it('should set/get platform setting from set()', () => {
@ -275,10 +275,10 @@ export function run() {
let platform = new Platform(['ios']);
config.setPlatform(platform);
config.set('tabbarPlacement', 'bottom');
config.set('ios', 'tabbarPlacement', 'top');
config.set('tabsPlacement', 'bottom');
config.set('ios', 'tabsPlacement', 'top');
expect(config.get('tabbarPlacement')).toEqual('top');
expect(config.get('tabsPlacement')).toEqual('top');
});
it('should set/get setting from set()', () => {
@ -286,9 +286,9 @@ export function run() {
let platform = new Platform(['ios']);
config.setPlatform(platform);
config.set('tabbarPlacement', 'top');
config.set('tabsPlacement', 'top');
expect(config.get('tabbarPlacement')).toEqual('top');
expect(config.get('tabsPlacement')).toEqual('top');
});
it('should set ios platform settings from settings()', () => {