mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
nav wip
This commit is contained in:
@ -18,9 +18,6 @@ var watch = require('gulp-watch');
|
|||||||
var exec = require('child_process').exec;
|
var exec = require('child_process').exec;
|
||||||
|
|
||||||
|
|
||||||
// !!! TEMP HACK !!!
|
|
||||||
// first run ./update-angular.sh
|
|
||||||
|
|
||||||
gulp.task('build', function() {
|
gulp.task('build', function() {
|
||||||
runSequence(
|
runSequence(
|
||||||
'clean',
|
'clean',
|
||||||
|
@ -19,10 +19,11 @@ export class NavItem {
|
|||||||
let injector = null;
|
let injector = null;
|
||||||
|
|
||||||
|
|
||||||
this.nav.loader.loadIntoExistingLocation(this.Class, this.nav.itemContent.elementRef, injector)
|
this.nav.loader.loadNextToExistingLocation(this.Class, this.nav.itemContent.elementRef, injector)
|
||||||
.then((componentRef) => {
|
.then((componentRef) => {
|
||||||
|
|
||||||
console.log('Component loadIntoExistingLocation completed')
|
this.component = componentRef;
|
||||||
|
this.domElement = componentRef.location.domElement;
|
||||||
|
|
||||||
resolve();
|
resolve();
|
||||||
});
|
});
|
||||||
|
@ -17,13 +17,13 @@ import {ToolbarContainer} from 'ionic/components/toolbar/toolbar';
|
|||||||
})
|
})
|
||||||
@View({
|
@View({
|
||||||
template: `
|
template: `
|
||||||
<header class="toolbar-container">
|
<header class="toolbar-container" style="display:none">
|
||||||
<header-container></header-container>
|
<header-container></header-container>
|
||||||
</header>
|
</header>
|
||||||
<section class="nav-item-container">
|
<section class="nav-item-container">
|
||||||
<content-container></content-container>
|
<content-container></content-container>
|
||||||
</section>
|
</section>
|
||||||
<footer class="toolbar-container">
|
<footer class="toolbar-container" style="display:none">
|
||||||
<footer-container></footer-container>
|
<footer-container></footer-container>
|
||||||
</footer>
|
</footer>
|
||||||
`,
|
`,
|
||||||
@ -44,17 +44,19 @@ export class Nav extends NavBase {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@Directive({
|
@Component({
|
||||||
selector: 'header-container'
|
selector: 'header-container'
|
||||||
})
|
})
|
||||||
class HeaderContainer {
|
class HeaderContainer {
|
||||||
constructor(@Ancestor() nav: Nav) {
|
constructor(@Ancestor() nav: Nav, elementRef: ElementRef) {
|
||||||
nav.itemHeader = this;
|
nav.itemHeader = {
|
||||||
|
elementRef: elementRef
|
||||||
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@Directive({
|
@Component({
|
||||||
selector: 'content-container'
|
selector: 'content-container'
|
||||||
})
|
})
|
||||||
class ContentContainer {
|
class ContentContainer {
|
||||||
@ -66,11 +68,13 @@ class ContentContainer {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@Directive({
|
@Component({
|
||||||
selector: 'footer-container'
|
selector: 'footer-container'
|
||||||
})
|
})
|
||||||
class FooterContainer {
|
class FooterContainer {
|
||||||
constructor(@Ancestor() nav: Nav) {
|
constructor(@Ancestor() nav: Nav, elementRef: ElementRef) {
|
||||||
nav.footerContainer = this;
|
nav.footerContainer = {
|
||||||
|
elementRef: elementRef
|
||||||
|
};
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -7,14 +7,13 @@ import {SecondPage} from './second-page'
|
|||||||
|
|
||||||
@Component()
|
@Component()
|
||||||
@View({
|
@View({
|
||||||
templateUrl: 'pages/first-page.html',
|
templateUrl: 'pages/first-page.html'
|
||||||
directives: []
|
|
||||||
})
|
})
|
||||||
export class FirstPage {
|
export class FirstPage {
|
||||||
constructor(
|
constructor(
|
||||||
nav: NavController
|
//nav: NavController
|
||||||
) {
|
) {
|
||||||
this.nav = nav;
|
//this.nav = nav;
|
||||||
}
|
}
|
||||||
|
|
||||||
push() {
|
push() {
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
|
||||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
import {View} from 'angular2/src/core/annotations_impl/view';
|
||||||
|
|
||||||
import {NavController} from 'ionic/ionic'
|
import {NavController} from 'ionic/ionic';
|
||||||
|
|
||||||
|
|
||||||
@Component()
|
@Component()
|
||||||
|
@ -10,12 +10,12 @@ class NoneTransition {
|
|||||||
let leavingItem = navCtrl.getStagedLeavingItem();
|
let leavingItem = navCtrl.getStagedLeavingItem();
|
||||||
|
|
||||||
// show the entering item
|
// show the entering item
|
||||||
enteringItem.navItem.domElement.style.display = 'block';
|
enteringItem.domElement.style.display = 'block';
|
||||||
enteringItem.navItem.domElement.style.transform = 'translateX(0%)';
|
enteringItem.domElement.style.transform = 'translateX(0%)';
|
||||||
|
|
||||||
// hide the leaving item
|
// hide the leaving item
|
||||||
if (leavingItem && leavingItem.navItem) {
|
if (leavingItem && leavingItem.domElement) {
|
||||||
leavingItem.navItem.domElement.style.display = '';
|
leavingItem.domElement.style.display = '';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user