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

rearrange structure

Browse Source
This commit is contained in:
Andrew
2015-04-26 10:30:44 -05:00
parent 8ff24082ee
commit 1db96e703d
10 changed files with 387 additions and 302 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
ionic/components/tabs/tab.js
View File

@ -1,17 +1,16 @@
import {
NgElement,
Component,
NgElement,
View as NgView,
Ancestor,
PropertySetter,
For
} from 'angular2/angular2';
import {Nav} from 'ionic/components/nav/nav'
import {NavPane} from 'ionic/components/nav-pane/nav-pane'
import {Tabs} from 'ionic/components/tabs/tabs'
import * as util from 'ionic/util'
import {IonicComponent} from 'ionic/config/component'
import {NavControllerBase} from 'ionic/components/nav/nav-controller';
import {NavItem} from 'ionic/components/nav/nav-item';
import {Tabs} from 'ionic/components/tabs/tabs';
import * as util from 'ionic/util';
import {IonicComponent} from 'ionic/config/component';
@Component({
selector: 'ion-tab',
@ -19,19 +18,26 @@ import {IonicComponent} from 'ionic/config/component'
title: 'tab-title',
icon: 'tab-icon',
initial: 'initial'
}
},
})
@NgView({
template: `
<div class="nav-pane-container">
<header class="toolbar-container">
<ion-toolbar class="view-toolbar">
<ion-nav-title>
Test Nonfunctional Toolbar
</ion-nav-title>
</ion-toolbar>
</header>
<div class="nav-item-container">
<!-- COLLECTION OF PANES WITHIN THIS NAV-VIEWPORT, EACH PANE AS ONE VIEW -->
<!-- EACH VIEW HAS A TOOLBAR WHICH NEEDS TO HAVE THE SAME CONTEXT -->
<section class="nav-pane" *for="#item of _ngForLoopArray" [item]="item"></section>
<ion-nav-item class="nav-pane" *for="#item of _ngForLoopArray" [item]="item"></section>
</div>
`,
directives: [For, NavPane]
directives: [For, NavItem]
})
export class Tab extends Nav {
export class Tab extends NavControllerBase {
constructor(
element: NgElement,
@Ancestor() tabs: Tabs,
@ -40,8 +46,8 @@ export class Tab extends Nav {
@PropertySetter('attr.id') setId: Function,
@PropertySetter('attr.aria-labelledby') setLabelby: Function
) {
super(element)
this.config = Tab.config.invoke(this)
super(element);
this.config = Tab.config.invoke(this);
this.setHidden = setHidden
this.tabId = util.uid()

3
ionic/components/tabs/tabs.js
View File

@ -37,10 +37,11 @@ import {IonicComponent} from 'ionic/config/component'
`,
directives: [For]
})
export class Tabs {
export class Tabs {
constructor(
@NgElement() ngElement: NgElement
) {
console.log("Tabs");
this.domElement = ngElement.domElement
this.config = Tabs.config.invoke(this)

40
ionic/components/tabs/test/advanced/pages/sign-in.html
View File

@ -1,28 +1,24 @@
<ion-view nav-title="Sign In">
<ion-nav-items side="primary">
<button class="button" (click)="instanceCheck()">
<icon class="ion-star"></icon>
</button>
</ion-nav-items>
<ion-nav-items side="primary">
<button class="button" (click)="instanceCheck()">
<ion-content class="padding">
<p>
<button class="button button-primary" (click)="signIn()">
Sign In
</button>
<button class="button button-primary button-outline" (click)="instanceCheck()">
<icon class="ion-star"></icon>
</button>
</ion-nav-items>
</p>
<ion-content class="padding">
<p>
<input>
</p>
<p>
<button class="button button-primary" (click)="signIn()">
Sign In
</button>
<button class="button button-primary button-outline" (click)="instanceCheck()">
<icon class="ion-star"></icon>
</button>
</p>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
<p>
<input>
</p>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
</ion-content>
</ion-view>
</ion-content>

12
ionic/components/tabs/test/advanced/pages/sign-in.js
View File

@ -1,5 +1,5 @@
import {Component, View as NgView, Ancestor} from 'angular2/angular2'
import {View, NavPane, Content, TestNav, Nav} from 'ionic/ionic'
import {NavPane, Content, Nav} from 'ionic/ionic'
import {TabsPage} from 'pages/tabs'
@Component({
@ -7,19 +7,19 @@ import {TabsPage} from 'pages/tabs'
})
@NgView({
templateUrl: 'pages/sign-in.html',
directives: [View, Content]
directives: [Content]
})
export class SignInPage {
constructor(
nav: Nav,
t: TestNav
nav: Nav
) {
debugger;
this.nav = nav;
this.instanceVal = Math.random()
}
signIn() {
this.nav.push(TabsPage)
this.nav.push(TabsPage, {
my: 'param'
})
}
instanceCheck() {
window.alert("Instance: " + this.instanceVal)

99
ionic/components/tabs/test/advanced/pages/tabs.js
View File

@ -1,6 +1,17 @@
import {Component, View as NgView, Parent} from 'angular2/angular2'
import {View, Tabs, Tab, Aside, Content, NavPane} from 'ionic/ionic'
import {
Component,
View as NgView,
Parent,
} from 'angular2/angular2'
import {
View,
Tabs,
Tab,
Aside,
Content,
Nav,
NavItem,
} from 'ionic/ionic'
@Component({
selector: 'tabs-page'
@ -10,7 +21,10 @@ import {View, Tabs, Tab, Aside, Content, NavPane} from 'ionic/ionic'
directives: [Tabs, Tab, View, Content]
})
export class TabsPage {
constructor() {
constructor(
navItem: NavItem,
nav: Nav
) {
this.tab1Initial = Tab1Page1
this.tab2Initial = Tab2Page1
}
@ -22,44 +36,43 @@ export class TabsPage {
//
@Component({ selector: 't1p1' })
@NgView({
template: `<ion-view nav-title="Tab 1 Page 1">
<ion-content class="padding">
template: `<ion-content class="padding">
<p>Tab 1 Page 1.</p>
<button class="button button-primary" (click)="next()">
Go to Tab 1, Page 2 (push)
</button>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
</ion-content>
</ion-view>`,
</ion-content>`,
directives: [View, Content]
})
class Tab1Page1 {
constructor(navPane: NavPane) {
this.navPane = navPane
// TODO change to 'Nav' injection when we're allowed to inject a tab as a nav.
constructor(nav: Tab) {
this.nav = nav;
}
next() {
this.navPane.push(Tab1Page2)
this.nav.push(Tab1Page2)
}
}
@Component({ selector: 't1p2' })
@NgView({
template: `<ion-view nav-title="Tab 1 Page 2">
<ion-content class="padding">
template: `<ion-content class="padding">
<p>Tab 1 Page 2.</p>
<button class="button button-primary" (click)="pop()">
Back to Tab 1, Page 1 (pop)
</button>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
</ion-content>
</ion-view>`,
`,
directives: [View, Content]
})
class Tab1Page2 {
constructor(navPane: NavPane) {
this.navPane = navPane
// TODO change to 'Nav' injection when we're allowed to inject a tab as a nav.
constructor(nav: Tab) {
this.nav = nav;
}
pop() { this.navPane.pop() }
pop() { this.nav.pop(); }
}
@ -72,25 +85,24 @@ class Tab1Page2 {
<ion-aside side="left" [content]="view">
Left aside for Tab 2 Page 1
</ion-aside>
<ion-view nav-title="Tab 2 Page 1" #view>
<ion-content class="padding">
<p>Tab 2 Page 1.</p>
<button class="button button-primary" (click)="next()">
Go to Tab 2 Page 2 (push)
</button>
<br/><span style="color:red">I have got an aside on the left.</span>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
</ion-content>
</ion-view>
<ion-content class="padding">
<p>Tab 2 Page 1.</p>
<button class="button button-primary" (click)="next()">
Go to Tab 2 Page 2 (push)
</button>
<br/><span style="color:red">I have got an aside on the left.</span>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
</ion-content>
`,
directives: [View, Aside, Content]
})
class Tab2Page1 {
constructor(navPane: NavPane) {
this.navPane = navPane
// TODO change to 'Nav' injection when we're allowed to inject a tab as a nav.
constructor(nav: Tab) {
this.nav = nav
}
next() {
this.navPane.push(Tab2Page2)
this.nav.push(Tab2Page2)
}
}
@ -102,28 +114,25 @@ class Tab2Page1 {
</ion-aside>
<ion-tabs #view class="view-cover">
<ion-tab tab-title="Nested Tab 1">
<ion-view nav-title="Nested Tab 1">
<ion-content class="padding">
Nested Tab 1, static content
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
</ion-content>
</ion-view>
<ion-content class="padding">
Nested Tab 1, static content
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
</ion-content>
</ion-tab>
<ion-tab tab-title="Nested Tab 2">
<ion-view nav-title="Nested Tab 2">
<ion-content class="padding">
Nested Tab 2, static content
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
</ion-content>
</ion-view>
<ion-content class="padding">
Nested Tab 2, static content
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
</ion-content>
</ion-tab>
</ion-tabs>
`,
directives: [View, Aside, Tabs, Tab, Content]
})
class Tab2Page2 {
constructor(navPane: NavPane) {
this.navPane = navPane
// TODO change to 'Nav' injection when we're allowed to inject a tab as a nav.
constructor(nav: Tab) {
this.nav = nav
}
pop() { this.navPane.pop() }
pop() { this.nav.pop() }
}