mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
rearrange structure
This commit is contained in:
Andrew
@ -11,8 +11,9 @@ export * from 'ionic/components/form/form'
|
||||
export * from 'ionic/components/input/input'
|
||||
export * from 'ionic/components/layout/layout'
|
||||
export * from 'ionic/components/list/list'
|
||||
export * from 'ionic/components/nav-pane/nav-pane'
|
||||
export * from 'ionic/components/nav-pane/nav-pane' //TODO remove
|
||||
export * from 'ionic/components/nav/nav'
|
||||
export * from 'ionic/components/nav/nav-item'
|
||||
export * from 'ionic/components/radio/radio-button'
|
||||
export * from 'ionic/components/radio/radio-group'
|
||||
export * from 'ionic/components/search-bar/search-bar'
|
||||
|
||||
@ -43,7 +43,7 @@ html {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.nav-pane-container {
|
||||
.nav-item-container {
|
||||
// container of many .nav-pane's, each one containing one view
|
||||
position: relative;
|
||||
@include flex(1);
|
||||
|
||||
199
ionic/components/nav/nav-controller.js
Normal file
199
ionic/components/nav/nav-controller.js
Normal file
@ -0,0 +1,199 @@
|
||||
import {NgElement} from 'angular2/angular2';
|
||||
import * as util from 'ionic/util';
|
||||
|
||||
export class NavControllerBase {
|
||||
constructor(
|
||||
element: NgElement
|
||||
) {
|
||||
this.domElement = element.domElement
|
||||
this.domElement.classList.add('nav')
|
||||
|
||||
// this is our sane stack of items. This is synchronous and says an item
|
||||
// is removed even if it's still animating out.
|
||||
this._stack = []
|
||||
|
||||
// _ngForLoopArray is what adds/removes components from the dom. It won't
|
||||
// remove a component until it's done animating out.
|
||||
this._ngForLoopArray = []
|
||||
}
|
||||
|
||||
containsClass(Class) {
|
||||
for (let i = 0; i < this._stack.length; i++) {
|
||||
if (this._stack[i].Class === Class) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
set initial(Class) {
|
||||
if (!this.initialized) {
|
||||
this.initialized = true
|
||||
this.push(Class)
|
||||
}
|
||||
}
|
||||
//TODO let the view handle enter/leave so splitview can override
|
||||
|
||||
/**
|
||||
* Push a new view into the history stack.
|
||||
*
|
||||
* @param view the new view
|
||||
* @param shouldAnimate whether to animate
|
||||
*/
|
||||
// TODO don't push same component twice if one is already pushing
|
||||
// TODO only animate if state hasn't changed
|
||||
// TODO make sure the timing is together
|
||||
// TODO allow starting an animation in the middle (eg gestures). Leave
|
||||
// most of this up to the animation's implementation.
|
||||
push(Class: Function, params = {}, opts = {}) {
|
||||
util.defaults(opts, {
|
||||
sync: this._stack.length === 0
|
||||
})
|
||||
|
||||
let pushedItem = new NavStackData(Class, params)
|
||||
this._stack.push(pushedItem)
|
||||
this._ngForLoopArray.push(pushedItem)
|
||||
|
||||
return pushedItem.waitForSetup().then(() => {
|
||||
let current = this._getPrevious(pushedItem)
|
||||
current && current.leaveReverse(opts)
|
||||
return pushedItem.enter(opts)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Pop a view off the history
|
||||
*
|
||||
* @param shouldAnimate whether to animate
|
||||
*/
|
||||
pop(opts = {}) {
|
||||
util.defaults(opts, {
|
||||
sync: false
|
||||
})
|
||||
let current = this._stack.pop()
|
||||
let dest = this.peek()
|
||||
|
||||
dest && dest.enterReverse(opts)
|
||||
return current && current.leave(opts).then(() => this._destroy(current))
|
||||
}
|
||||
|
||||
peek() {
|
||||
return this._stack[this._stack.length - 1]
|
||||
}
|
||||
|
||||
popAll() {
|
||||
while (this._stack.length) {
|
||||
const item = this._stack.pop()
|
||||
this._destroy(item)
|
||||
}
|
||||
}
|
||||
|
||||
// Pop from the current item to the item at the specified index.
|
||||
// Removes every item in the stack between the current and the given index,
|
||||
// then performs a normal pop.
|
||||
popTo(index, opts = {}) {
|
||||
// Abort if we're already here.
|
||||
if (this._stack.length <= index + 1) {
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
// Save the current navItem, and remove all the other ones in front of our
|
||||
// target nav item.
|
||||
const current = this._stack.pop()
|
||||
while (this._stack.length > index + 1) {
|
||||
const item = this._stack.pop()
|
||||
this._destroy(item)
|
||||
}
|
||||
|
||||
// Now put the current navItem back on the stack and run a normal pop animation.
|
||||
this._stack.push(current)
|
||||
return this.pop(opts)
|
||||
}
|
||||
|
||||
setStack(stack) {
|
||||
this._stack = stack.slice()
|
||||
this._ngForLoopArray = stack.slice()
|
||||
}
|
||||
|
||||
remove(index) {
|
||||
const item = this._stack[index]
|
||||
this._stack.splice(index, 1)
|
||||
this._destroy(item)
|
||||
}
|
||||
|
||||
_destroy(navItem) {
|
||||
console.warn(
|
||||
`Component "${navItem.Class.name}" was popped from the nav stack, But were keeping its element in the DOM for now because of an ng2 bug.`
|
||||
);
|
||||
//util.array.remove(this._ngForLoopArray, navItem)
|
||||
}
|
||||
|
||||
_getPrevious(item) {
|
||||
return this._stack[ this._stack.indexOf(item) - 1 ]
|
||||
}
|
||||
}
|
||||
|
||||
class NavStackData {
|
||||
constructor(ComponentClass, params = {}) {
|
||||
this.Class = ComponentClass
|
||||
this.params = params
|
||||
this._setupPromise = new Promise((resolve) => {
|
||||
this._resolveSetupPromise = resolve
|
||||
})
|
||||
}
|
||||
waitForSetup() {
|
||||
return this._setupPromise
|
||||
}
|
||||
finishSetup(navItem, componentInstance) {
|
||||
this.navItem = navItem
|
||||
this.instance = componentInstance
|
||||
this._resolveSetupPromise()
|
||||
}
|
||||
setAnimation(state) {
|
||||
if (!state) {
|
||||
this.navItem.domElement.removeAttribute('animate')
|
||||
this.navItem.domElement.classList.remove('start')
|
||||
} else {
|
||||
this.navItem.domElement.setAttribute('animate', state)
|
||||
}
|
||||
}
|
||||
setShown(isShown) {
|
||||
this.navItem.domElement.classList[isShown?'add':'remove']('shown')
|
||||
}
|
||||
startAnimation() {
|
||||
this.navItem.domElement.classList.add('start')
|
||||
}
|
||||
_animate({ isShown, animation }) {
|
||||
this.setAnimation(animation)
|
||||
this.setShown(isShown)
|
||||
if (animation) {
|
||||
// We have to wait two rafs for the element to show. Yawn.
|
||||
return util.dom.rafPromise().then(util.dom.rafPromise).then(() => {
|
||||
this.startAnimation()
|
||||
return util.dom.transitionEndPromise(this.navItem.domElement).then(() => {
|
||||
this.setAnimation(null)
|
||||
})
|
||||
})
|
||||
} else {
|
||||
return Promise.resolve()
|
||||
}
|
||||
}
|
||||
enterReverse(opts) {
|
||||
return this.enter( util.extend({reverse: true}, opts) )
|
||||
}
|
||||
enter({ reverse = false, sync = false } = {}) {
|
||||
return this._animate({
|
||||
isShown: true,
|
||||
animation: sync ? null : (reverse ? 'enter-reverse' : 'enter')
|
||||
})
|
||||
}
|
||||
leave({ reverse = false, sync = false } = {}) {
|
||||
return this._animate({
|
||||
isShown: false,
|
||||
animation: sync ? null : (reverse ? 'leave-reverse' : 'leave')
|
||||
})
|
||||
}
|
||||
leaveReverse(opts) {
|
||||
return this.leave( util.extend({reverse: true}, opts) )
|
||||
}
|
||||
}
|
||||
71
ionic/components/nav/nav-item.js
Normal file
71
ionic/components/nav/nav-item.js
Normal file
@ -0,0 +1,71 @@
|
||||
import {
|
||||
DynamicComponent,
|
||||
Parent,
|
||||
NgElement,
|
||||
DynamicComponentLoader,
|
||||
ElementRef,
|
||||
} from 'angular2/angular2';
|
||||
import {
|
||||
Injectable,
|
||||
bind,
|
||||
Optional,
|
||||
} from 'angular2/di';
|
||||
import {Nav} from 'ionic/components/nav/nav'
|
||||
import {Tab} from 'ionic/components/tabs/tab'
|
||||
import * as util from 'ionic/util';
|
||||
|
||||
@DynamicComponent({
|
||||
selector: 'ion-nav-item',
|
||||
properties: {
|
||||
_item: 'item'
|
||||
}
|
||||
})
|
||||
export class NavItem {
|
||||
constructor(
|
||||
@NgElement() element: NgElement,
|
||||
loader: DynamicComponentLoader,
|
||||
elementRef: ElementRef
|
||||
|
||||
// FIXME: this is temporary until ng2 lets us inject tabs as a Nav
|
||||
// @Optional() @Parent() viewportNav: Nav,
|
||||
// @Optional() @Parent() viewportTab: Tab
|
||||
) {
|
||||
this._loader = loader;
|
||||
this._elementRef = elementRef;
|
||||
// this.viewport = viewportTab || viewportNav;
|
||||
this.domElement = element.domElement;
|
||||
this.params = {};
|
||||
}
|
||||
|
||||
set _item(data) {
|
||||
if (this.initialized) return;
|
||||
this.initialized = true;
|
||||
this.Class = data.Class;
|
||||
this._item = data;
|
||||
|
||||
util.extend(this.params, data.params);
|
||||
|
||||
this._loader.loadIntoExistingLocation(data.Class, this._elementRef).then(instance => {
|
||||
this.instance = instance
|
||||
data.finishSetup(this, instance)
|
||||
})
|
||||
}
|
||||
|
||||
// /**
|
||||
// * Push out of this view into another view
|
||||
// */
|
||||
// push(Class: Function, opts = {}) {
|
||||
// return this.viewport.push(Class, opts)
|
||||
// }
|
||||
|
||||
// /**
|
||||
// * Go back
|
||||
// */
|
||||
// pop(opts) {
|
||||
// return this.viewport.pop(opts)
|
||||
// }
|
||||
|
||||
// popTo(index, opts) {
|
||||
// return this.viewport.popTo(index, opts)
|
||||
// }
|
||||
}
|
||||
@ -3,239 +3,41 @@ import {
|
||||
View as NgView,
|
||||
For,
|
||||
NgElement,
|
||||
ComponentInjector
|
||||
} from 'angular2/angular2';
|
||||
import {bind} from 'angular2/di';
|
||||
import {NavPane} from 'ionic/components/nav-pane/nav-pane';
|
||||
import * as util from 'ionic/util';
|
||||
import {NavControllerBase} from 'ionic/components/nav/nav-controller';
|
||||
import {NavItem} from 'ionic/components/nav/nav-item';
|
||||
import {Toolbar} from 'ionic/components/toolbar/toolbar';
|
||||
|
||||
export class TestNav {
|
||||
constructor(v) {
|
||||
this.value = v;
|
||||
}
|
||||
};
|
||||
|
||||
console.log(ComponentInjector)
|
||||
@Component({
|
||||
selector: 'ion-nav',
|
||||
properties: {
|
||||
initial: 'initial'
|
||||
},
|
||||
injectables: [
|
||||
bind(TestNav).toFactory((e) => {
|
||||
debugger;
|
||||
return e;
|
||||
}, [Nav])
|
||||
]
|
||||
}
|
||||
})
|
||||
@NgView({
|
||||
template: `
|
||||
<header class="toolbar-container">
|
||||
<ion-toolbar class="view-toolbar">
|
||||
<ion-nav-title>
|
||||
Test Nonfunctional Toolbar
|
||||
</ion-nav-title>
|
||||
</ion-toolbar>
|
||||
<!-- COLLECTION OF TOOLBARS FOR EACH OF ITS VIEWS WITHIN THIS NAV-VIEWPORT -->
|
||||
<!-- TOOLBARS FOR EACH VIEW SHOULD HAVE THE SAME CONTEXT AS ITS VIEW -->
|
||||
</header>
|
||||
|
||||
<div class="nav-pane-container">
|
||||
<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: [NavPane, For]
|
||||
directives: [NavItem, For, Toolbar]
|
||||
})
|
||||
export class Nav {
|
||||
export class Nav extends NavControllerBase {
|
||||
constructor(
|
||||
element: NgElement
|
||||
) {
|
||||
this.domElement = element.domElement
|
||||
this.domElement.classList.add('nav')
|
||||
|
||||
// this is our sane stack of items. This is synchronous and says an item
|
||||
// is removed even if it's still animating out.
|
||||
this._stack = []
|
||||
|
||||
// _ngForLoopArray is actually adds/removes components from the dom. It won't
|
||||
// remove a component until it's done animating out.
|
||||
this._ngForLoopArray = []
|
||||
}
|
||||
|
||||
containsClass(Class) {
|
||||
for (let i = 0; i < this._stack.length; i++) {
|
||||
if (this._stack[i].Class === Class) {
|
||||
return true
|
||||
}
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
set initial(Class) {
|
||||
if (!this.initialized) {
|
||||
this.initialized = true
|
||||
this.push(Class)
|
||||
}
|
||||
}
|
||||
//TODO let the view handle enter/leave so splitview can override
|
||||
|
||||
/**
|
||||
* Push a new view into the history stack.
|
||||
*
|
||||
* @param view the new view
|
||||
* @param shouldAnimate whether to animate
|
||||
*/
|
||||
// TODO don't push same component twice if one is already pushing
|
||||
// TODO only animate if state hasn't changed
|
||||
// TODO make sure the timing is together
|
||||
// TODO allow starting an animation in the middle (eg gestures). Leave
|
||||
// most of this up to the animation's implementation.
|
||||
push(Class: Function, data = {}, opts = {}) {
|
||||
util.defaults(opts, {
|
||||
sync: this._stack.length === 0
|
||||
})
|
||||
|
||||
let pushedItem = new NavItem(Class, data)
|
||||
this._stack.push(pushedItem)
|
||||
this._ngForLoopArray.push(pushedItem)
|
||||
|
||||
return pushedItem.waitForSetup().then(() => {
|
||||
let current = this._getPrevious(pushedItem)
|
||||
current && current.leaveReverse(opts)
|
||||
return pushedItem.enter(opts)
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* Pop a view off the history
|
||||
*
|
||||
* @param shouldAnimate whether to animate
|
||||
*/
|
||||
pop(opts = {}) {
|
||||
util.defaults(opts, {
|
||||
sync: false
|
||||
})
|
||||
let current = this._stack.pop()
|
||||
let dest = this.peek()
|
||||
|
||||
dest && dest.enterReverse(opts)
|
||||
return current && current.leave(opts).then(() => this._destroy(current))
|
||||
}
|
||||
|
||||
peek() {
|
||||
return this._stack[this._stack.length - 1]
|
||||
}
|
||||
|
||||
popAll() {
|
||||
while (this._stack.length) {
|
||||
const item = this._stack.pop()
|
||||
this._destroy(item)
|
||||
}
|
||||
}
|
||||
|
||||
// Pop from the current item to the item at the specified index.
|
||||
// Removes every item in the stack between the current and the given index,
|
||||
// then performs a normal pop.
|
||||
popTo(index, opts = {}) {
|
||||
// Abort if we're already here.
|
||||
if (this._stack.length <= index + 1) {
|
||||
return Promise.resolve()
|
||||
}
|
||||
|
||||
// Save the current navItem, and remove all the other ones in front of our
|
||||
// target nav item.
|
||||
const current = this._stack.pop()
|
||||
while (this._stack.length > index + 1) {
|
||||
const item = this._stack.pop()
|
||||
this._destroy(item)
|
||||
}
|
||||
|
||||
// Now put the current navItem back on the stack and run a normal pop animation.
|
||||
this._stack.push(current)
|
||||
return this.pop(opts)
|
||||
}
|
||||
|
||||
setStack(stack) {
|
||||
this._stack = stack.slice()
|
||||
this._ngForLoopArray = stack.slice()
|
||||
}
|
||||
|
||||
remove(index) {
|
||||
const item = this._stack[index]
|
||||
this._stack.splice(index, 1)
|
||||
this._destroy(item)
|
||||
}
|
||||
|
||||
_destroy(navItem) {
|
||||
console.warn(
|
||||
`Component "${navItem.Class.name}" was popped from the nav stack, But were keeping its element in the DOM for now because of an ng2 bug.`
|
||||
);
|
||||
//util.array.remove(this._ngForLoopArray, navItem)
|
||||
}
|
||||
|
||||
_getPrevious(item) {
|
||||
return this._stack[ this._stack.indexOf(item) - 1 ]
|
||||
}
|
||||
}
|
||||
|
||||
class NavItem {
|
||||
constructor(ComponentClass, data = {}) {
|
||||
this.Class = ComponentClass
|
||||
this.data = data
|
||||
this._setupPromise = new Promise((resolve) => {
|
||||
this._resolveSetupPromise = resolve
|
||||
})
|
||||
}
|
||||
waitForSetup() {
|
||||
return this._setupPromise
|
||||
}
|
||||
finishSetup(navPane, componentInstance) {
|
||||
this.navPane = navPane
|
||||
this.instance = componentInstance
|
||||
this._resolveSetupPromise()
|
||||
}
|
||||
setAnimation(state) {
|
||||
if (!state) {
|
||||
this.navPane.domElement.removeAttribute('animate')
|
||||
this.navPane.domElement.classList.remove('start')
|
||||
} else {
|
||||
this.navPane.domElement.setAttribute('animate', state)
|
||||
}
|
||||
}
|
||||
setShown(isShown) {
|
||||
this.navPane.domElement.classList[isShown?'add':'remove']('shown')
|
||||
}
|
||||
startAnimation() {
|
||||
this.navPane.domElement.classList.add('start')
|
||||
}
|
||||
_animate({ isShown, animation }) {
|
||||
this.setAnimation(animation)
|
||||
this.setShown(isShown)
|
||||
if (animation) {
|
||||
// We have to wait two rafs for the element to show. Yawn.
|
||||
return util.dom.rafPromise().then(util.dom.rafPromise).then(() => {
|
||||
this.startAnimation()
|
||||
return util.dom.transitionEndPromise(this.navPane.domElement).then(() => {
|
||||
this.setAnimation(null)
|
||||
})
|
||||
})
|
||||
} else {
|
||||
return Promise.resolve()
|
||||
}
|
||||
}
|
||||
enterReverse(opts) {
|
||||
return this.enter( util.extend({reverse: true}, opts) )
|
||||
}
|
||||
enter({ reverse = false, sync = false } = {}) {
|
||||
return this._animate({
|
||||
isShown: true,
|
||||
animation: sync ? null : (reverse ? 'enter-reverse' : 'enter')
|
||||
})
|
||||
}
|
||||
leave({ reverse = false, sync = false } = {}) {
|
||||
return this._animate({
|
||||
isShown: false,
|
||||
animation: sync ? null : (reverse ? 'leave-reverse' : 'leave')
|
||||
})
|
||||
}
|
||||
leaveReverse(opts) {
|
||||
return this.leave( util.extend({reverse: true}, opts) )
|
||||
super(element);
|
||||
}
|
||||
}
|
||||
|
||||
@ -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()
|
||||
|
||||
@ -41,6 +41,7 @@ export class Tabs {
|
||||
constructor(
|
||||
@NgElement() ngElement: NgElement
|
||||
) {
|
||||
console.log("Tabs");
|
||||
this.domElement = ngElement.domElement
|
||||
this.config = Tabs.config.invoke(this)
|
||||
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
<ion-view nav-title="Sign In">
|
||||
|
||||
<ion-nav-items side="primary">
|
||||
<button class="button" (click)="instanceCheck()">
|
||||
<icon class="ion-star"></icon>
|
||||
@ -24,5 +22,3 @@
|
||||
<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>
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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,7 +85,6 @@ 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()">
|
||||
@ -81,16 +93,16 @@ class Tab1Page2 {
|
||||
<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>
|
||||
`,
|
||||
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-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-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() }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user