startin' tabs

ionic/components.js

@@ -24,5 +24,5 @@ export * from 'ionic/components/radio/radio'
 // export * from 'ionic/components/split-view/split-view'
 export * from 'ionic/components/segment/segment'
 export * from 'ionic/components/switch/switch'
-//export * from 'ionic/components/tabs/tabs'
-//export * from 'ionic/components/tabs/tab'
+export * from 'ionic/components/tabs/tabs'
+export * from 'ionic/components/tabs/tab'

ionic/components/app/structure.scss

@@ -24,6 +24,18 @@ 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-nav {
   position: absolute;
   top: 0;

ionic/components/tabs/tab.js

@@ -1,62 +1,73 @@
-import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
+import {Parent} from 'angular2/src/core/annotations_impl/visibility';
 import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
 import {View} from 'angular2/src/core/annotations_impl/view';
 import {ElementRef} from 'angular2/src/core/compiler/element_ref';
+import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
+import {Injector} from 'angular2/di';
 
-import {Tabs} from 'ionic/components/tabs/tabs';
+import {Tabs} from './tabs';
+import {Content} from '../content/content';
 import * as util from 'ionic/util';
 import {IonicComponent} from 'ionic/config/component';
+import {NavBase} from '../nav/nav-base';
 
 
-@Component({
+@Directive({
   selector: 'ion-tab',
-  properties: {
-    title: 'tab-title',
-    icon: 'tab-icon',
-    initial: 'initial'
+  properties: [
+    'initial',
+    'tabTitle',
+    'tabIcon'
+  ],
+  hostProperties: {
+    'contentId': 'attr.id',
+    'labeledBy': 'attr.aria-labelledby'
+  },
+  hostAttributes: {
+    'role': 'tabpanel'
   }
 })
-@View({
-  template: `
-    <section class="nav-item-container">
-      <template content-anchor></template>
-    </section>
-  `
-})
 export class Tab {
   constructor(
+    @Parent() tabs: Tabs,
     elementRef: ElementRef,
-    @Ancestor() tabs: Tabs
+    loader: DynamicComponentLoader,
+    injector: Injector
   ) {
-    // this.nav = new NavBase(element);
-    // this.domElement = element.domElement;
+    this.nav = new NavBase(loader, injector);
+    this.domElement = elementRef.domElement;
 
-    // let setHidden = (v) => this.domElement.classList[v?'add':'remove']('hide');
-    // let setRole = (v) => this.domElement.setAttribute('role', v);
-    // let setId = (v) => this.domElement.setAttribute('id', v);
-    // let setLabelby = (v) => this.domElement.setAttribute('aria-labelledby', v);
+    this.config = Tab.config.invoke(this);
 
-    // this.config = Tab.config.invoke(this);
-    // this.setHidden = setHidden;
+    this.tabId = util.nextUid();
+    this.contentId = 'tab-content-' + this.tabId;
+    this.labeledBy = 'tab-item-' + this.tabId;
 
-    // this.tabId = util.nextUid();
-    // setId('tab-content-' + this.tabId);
-    // setLabelby('tab-item-' + this.tabId);
-    // setRole('tabpanel');
-
-    // this.setSelected(false);
     tabs.addTab(this);
   }
 
+  setRef(ref) {
+    this.nav.contentElementRef = ref;
+  }
+
   set initial(value) {
     this.nav.initial = value;
   }
 
   setSelected(isSelected) {
-    this.isSelected = !!isSelected;
-    //this.setHidden(!this.isSelected);
+    this.isSelected = isSelected;
   }
 
 }
 
 new IonicComponent(Tab, {});
+
+
+@Directive({
+  selector: '[content-anchor]'
+})
+class ContentAnchor {
+  constructor(@Parent() tab: Tab, elementRef: ElementRef) {
+    tab.setRef(elementRef);
+  }
+}

ionic/components/tabs/tabs.js

@@ -5,7 +5,6 @@ import {ElementRef} from 'angular2/src/core/compiler/element_ref';
 import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
 import {Injector} from 'angular2/di';
 
-import {NavBase} from '../nav/nav-base';
 import {IonicComponent} from 'ionic/config/component';
 import {Tab} from './tab';
 
@@ -19,7 +18,7 @@ import {Tab} from './tab';
 })
 @View({
   template: `
-    <nav class="toolbar-container tab-bar-container">
+    <nav class="navbar-container tab-bar-container">
       <div class="tab-bar">
         <button *ng-for="#t of tabs"
           role="tab"
@@ -29,20 +28,19 @@ import {Tab} from './tab';
           [attr.aria-selected]="t.isSelected"
           [style.color]="t.isSelected ? 'red' : ''"
           (^click)="onClickTabItem($event, t)">
-            <icon [class-name]="'tab-bar-item-icon ' + t.icon" [hidden]="!t.icon"></icon>
-            <span class="tab-bar-item-text" [hidden]="!t.title">{{t.title}}</span>
+            <icon [class-name]="'tab-bar-item-icon ' + t.tabIcon" [hidden]="!t.tabIcon"></icon>
+            <span class="tab-bar-item-text" [hidden]="!t.tabTitle">{{t.tabTitle}}</span>
         </button>
       </div>
     </nav>
-    <section class="tab-item-container">
+    <section class="content-container">
       <content></content>
     </section>
   `,
   directives: [NgFor]
 })
-export class Tabs extends NavBase {
+export class Tabs {
   constructor(elementRef: ElementRef, loader: DynamicComponentLoader, injector: Injector) {
-    super(loader, injector);
     this.domElement = elementRef.domElement;
     this.config = Tabs.config.invoke(this);
 

ionic/components/tabs/tabs.scss

@@ -9,12 +9,6 @@ $tab-bar-item-min-width:           80px !default;
 $tab-bar-item-max-width:           160px !default;
 
 
-ion-tabs {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-}
-
 .tab-bar-container {
   order: $flex-order-tab-bar-bottom;
 }

ionic/components/tabs/test/advanced/main.html

@@ -1,21 +1,3 @@
 
-<!-- <ion-aside side="left" [content]="viewport">
-  Hello! I'm a side menu in the root.
-</ion-aside> -->
-
 <ion-nav [initial]="initial">
 </ion-nav>
-
-
-<style>
-  f {
-    display: block;
-    width: 50px;
-    height: 200px;
-    margin: 20px auto;
-    background: blue;
-  }
-  f:last-of-type {
-    background: red;
-  }
-</style>