diff --git a/ionic/components/app/structure.scss b/ionic/components/app/structure.scss
index f8561cfd84..289deeed4d 100644
--- a/ionic/components/app/structure.scss
+++ b/ionic/components/app/structure.scss
@@ -24,35 +24,6 @@ ion-app {
padding: 0;
}
-ion-tabs {
- display: flex;
- flex-direction: column;
-
- overflow: hidden;
- height: 100%;
- max-width: 100%;
- max-height: 100%;
- margin: 0;
- padding: 0;
-}
-
-ion-tab {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- width: 100%;
- height: 100%;
- overflow: hidden;
- flex-direction: column;
-
- display: none;
- &.show-tab {
- display: flex;
- }
-}
-
ion-nav-pane {
position: absolute;
top: 0;
diff --git a/ionic/components/nav/nav-item.js b/ionic/components/nav/nav-item.js
index ded6d8c086..2fc4d2b078 100644
--- a/ionic/components/nav/nav-item.js
+++ b/ionic/components/nav/nav-item.js
@@ -5,7 +5,7 @@ import {bind} from 'angular2/di';
import * as util from 'ionic/util';
import {NavController} from './nav-controller';
import {Nav} from './nav';
-import {NavPane, NavPaneSection} from './nav';
+import {TabPane, NavPane, NavPaneSection} from './nav';
export class NavItem {
@@ -37,8 +37,8 @@ export class NavItem {
}
render() {
-
if (this.instance) {
+ // already compiled this view
return Promise.resolve();
}
@@ -50,10 +50,10 @@ export class NavItem {
// figure out the sturcture of this Component
// does it have a navbar? Is it tabs? Should it not have a navbar or any toolbars?
- let itemStructure = this.getStructure(componentProtoViewRef);
+ let itemStructure = getProtoViewStructure(componentProtoViewRef);
// get the appropriate NavPane which this NavItem will fit into
- this.nav.getNavPane(itemStructure).then(navPane => {
+ this.nav.getPane(itemStructure).then(navPane => {
// create a new injector just for this NavItem
let injector = this.nav.injector.resolveAndCreateChild([
@@ -84,8 +84,8 @@ export class NavItem {
};
// add only the sections it needs
- if (itemStructure.navbar) {
- let navbarViewContainer = navPane.sections.navbar.viewContainerRef;
+ let navbarViewContainer = navPane.sections.navbar.viewContainerRef;
+ if (navbarViewContainer && itemStructure.navbar && this.protos.navbar) {
this.navbarView = navbarViewContainer.create(this.protos.navbar, -1, context, injector);
this.disposals.push(() => {
@@ -103,18 +103,6 @@ export class NavItem {
return promise;
}
- getStructure(componentProtoViewRef) {
- // navbar - toolbar - toolbar - content - toolbar - tabbar
- let itemStructure = {
- navbar: true,
- tabbar: false,
- toolbars: [],
- key: 'c'
- };
-
- return itemStructure;
- }
-
cache() {
this.didCache();
}
@@ -255,3 +243,36 @@ export class NavParams {
util.extend(this, params);
}
}
+
+function getProtoViewStructure(componentProtoViewRef) {
+ let navbar = true;
+ let tabs = false;
+ let toolbars = [];
+ let key = '_';
+
+ // componentProtoViewRef._protoView.elementBinders.forEach(rootElementBinder => {
+ // if (!rootElementBinder.componentDirective || !rootElementBinder.nestedProtoView) return;
+
+ // rootElementBinder.nestedProtoView.elementBinders.forEach(nestedElementBinder => {
+ // let componentDirective = nestedElementBinder.componentDirective;
+ // if (componentDirective && componentDirective.metadata.id == 'Tab') {
+ // navbar = tabs = true;
+ // }
+ // });
+ // });
+
+ if (navbar) {
+ key += 'n'
+ }
+
+ if (toolbars.length) {
+ key += 'b' + toolbars.length;
+ }
+
+ return {
+ navbar: navbar,
+ tabs: tabs,
+ toolbars: toolbars,
+ key: key
+ };
+}
diff --git a/ionic/components/nav/nav.js b/ionic/components/nav/nav.js
index db98e31312..36ca6e0bc4 100644
--- a/ionic/components/nav/nav.js
+++ b/ionic/components/nav/nav.js
@@ -10,6 +10,7 @@ import {bind} from 'angular2/di';
import {NavController} from './nav-controller';
import {NavItem, NavParams} from './nav-item';
+import {Tabs} from '../tabs/tabs';
import {nav} from './nav-base';
import {SwipeHandle} from './swipe-handle';
import {IonicComponent} from '../../config/component';
@@ -48,7 +49,7 @@ export class Nav {
this.navPanes = {};
}
- getNavPane(itemStructure) {
+ getPane(itemStructure) {
// this gets or creates the NavPane which similar nav items live in
// Nav items with just a navbar/content would all use the same NavPane
// Tabs and view's without a navbar would get a different NavPanes
@@ -100,7 +101,7 @@ export class Nav {
return promise;
}
- addNavPane(navPane) {
+ addPane(navPane) {
for (let np in this.navPanes) {
if (this.navPanes[np] === null) {
this.navPanes[np] = navPane;
@@ -510,11 +511,11 @@ class NavPaneAnchor {
`,
directives: [NavPaneSectionAnchor, NavPaneContentAnchor]
})
-class NavPane {
+export class NavPane {
constructor(@Parent() nav: Nav, viewContainerRef: ViewContainerRef) {
this.viewContainerRef = viewContainerRef;
this.sections = {};
- nav.addNavPane(this);
+ nav.addPane(this);
}
addSection(sectionName, instance) {
this.sections[sectionName] = instance;
@@ -522,6 +523,50 @@ class NavPane {
}
+
+@Component({selector:'ion-tab-pane'})
+@View({
+ template: `
+
+
+
+
+
+
+
+ `,
+ directives: [TabPaneContentAnchor, TabPaneSectionAnchor]
+})
+export class TabPane extends NavPane {
+ constructor(@Parent() nav: Nav, viewContainerRef: ViewContainerRef) {
+ super(nav, viewContainerRef);
+ }
+}
+
+
+@Directive({
+ selector: 'template[content-anchor]'
+})
+class TabPaneContentAnchor {
+ constructor(@Parent() tabPane: TabPane, viewContainerRef: ViewContainerRef) {
+ tabPane.contentContainerRef = viewContainerRef;
+ }
+}
+
+
+// Used to dynamically create new sections for a NavPane
+// This is simply a reference point to create new sections
+// Navbar, toolbar, and tabbar sections would be created next to this
+@Directive({
+ selector: 'template[section-anchor]'
+})
+class TabSectionAnchor {
+ constructor(@Parent() tabPane: TabPane, elementRef: ElementRef) {
+ tabPane.sectionAnchorElementRef = elementRef;
+ }
+}
+
+
// Used to dynamically create new sections for a NavPane
// This is simply a reference point to create new sections
// Navbar, toolbar, and tabbar sections would be created next to this
diff --git a/ionic/components/tabs/tab-bar.js b/ionic/components/tabs/tab-bar.js
new file mode 100644
index 0000000000..00f4dbd616
--- /dev/null
+++ b/ionic/components/tabs/tab-bar.js
@@ -0,0 +1,28 @@
+import {Parent} from 'angular2/src/core/annotations_impl/visibility';
+import {Component} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
+import {NgFor} from 'angular2/angular2';
+
+import {TabButton} from './tab-button';
+import {Icon} from '../icon/icon';
+
+
+@Component({
+ selector: 'ion-tab-bar'
+})
+@View({
+ template: `
+