javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

tabs wip

Browse Source
This commit is contained in:
Adam Bradley
2015-06-04 13:36:42 -05:00
parent cd8f83cafc
commit 604ed818c8
4 changed files with 82 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ionic/components/nav/nav-base.js
View File

@ -110,7 +110,7 @@ export class NavBase {
}
push(Component, params = {}, opts = {}) {
if (this.isTransitioning()) {
if (!Component || this.isTransitioning()) {
return Promise.reject();
}

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

@ -54,7 +54,7 @@ export class Tab {
this.viewContainerRef = viewContainerRef;
this.sections = parentNavBase;
this.sections = parentNavBase.panes['_n'].sections;
this.navBase.panes['_n'] = this;
this.isSelected = false;

3
ionic/components/tabs/test/advanced/pages/tabs.html
View File

@ -4,4 +4,7 @@
<ion-tab [initial]="tab1Initial" tab-title="Tab 1">
</ion-tab>
<ion-tab [initial]="tab2Initial" tab-title="Tab 2">
</ion-tab>
</ion-tabs>

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

@ -15,7 +15,7 @@ import {Tabs, Tab, NavController, NavbarTemplate, Navbar, Content} from 'ionic/i
export class TabsPage {
constructor(nav: NavController) {
this.tab1Initial = Tab1Page1
//this.tab2Initial = Tab2Page1
this.tab2Initial = Tab2Page1
}
}
@ -39,7 +39,6 @@ export class TabsPage {
export class Tab1Page1 {
constructor(nav: NavController) {
this.nav = nav;
console.log('Tab1Page1 onInit')
}
push() {
@ -54,7 +53,8 @@ export class Tab1Page1 {
'<ion-title>Tabs 1 Page 2</ion-title>' +
'</ion-navbar>' +
'<ion-content class="padding">' +
'<p><button class="button" (click)="pop()">Back to Tab 1, Page 1</button></p>' +
'<p><button class="button" (click)="push()">Go to Tab 1, Page 3</button></p>' +
'<p><button class="button" (click)="nav.pop()">Back to Tab 1, Page 1</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><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
'</ion-content>',
@ -65,63 +65,97 @@ export class Tab1Page2 {
this.nav = nav;
}
pop() {
this.nav.push()
push() {
this.nav.push(Tab1Page3)
}
}
@Component({selector: 'ion-view'})
@View({
template: '' +
'<ion-navbar *navbar>' +
'<ion-title>Tabs 1 Page 3</ion-title>' +
'</ion-navbar>' +
'<ion-content class="padding">' +
'<p><button class="button" (click)="nav.pop()">Back to Tab 1, Page 2</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><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
'</ion-content>',
directives: [NavbarTemplate, Navbar, Content]
})
export class Tab1Page3 {
constructor(nav: NavController) {
this.nav = nav;
}
}
//
// tab 2
//
@Component({ selector: 't2p1' })
@Component({selector: 'ion-view'})
@View({
template: `
<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: [Content]
template: '' +
'<ion-navbar *navbar>' +
'<ion-title>Tabs 2 Page 1</ion-title>' +
'</ion-navbar>' +
'<ion-content class="padding">' +
'<p><button class="button" (click)="push()">Go to Tab 2, Page 2</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><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
'</ion-content>',
directives: [NavbarTemplate, Navbar, Content]
})
class Tab2Page1 {
// TODO change to 'Nav' injection when we're allowed to inject a tab as a nav.
export class Tab2Page1 {
constructor(nav: NavController) {
this.nav = nav
this.nav = nav;
}
next() {
push() {
this.nav.push(Tab2Page2)
}
}
@Component({ selector: 't2p2' })
@Component({selector: 'ion-view'})
@View({
template: `
<ion-tabs #view class="view-cover">
<ion-tab tab-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-tab>
<ion-tab tab-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-tab>
</ion-tabs>
`,
directives: [Tabs, Tab, Content]
template: '' +
'<ion-navbar *navbar>' +
'<ion-title>Tabs 2 Page 2</ion-title>' +
'</ion-navbar>' +
'<ion-content class="padding">' +
'<p><button class="button" (click)="push()">Go to Tab 2, Page 3</button></p>' +
'<p><button class="button" (click)="nav.pop()">Back to Tab 2, Page 1</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><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
'</ion-content>',
directives: [NavbarTemplate, Navbar, Content]
})
class Tab2Page2 {
// TODO change to 'Nav' injection when we're allowed to inject a tab as a nav.
export class Tab2Page2 {
constructor(nav: NavController) {
this.nav = nav
this.nav = nav;
}
push() {
this.nav.push(Tab2Page3)
}
}
@Component({selector: 'ion-view'})
@View({
template: '' +
'<ion-navbar *navbar>' +
'<ion-title>Tabs 2 Page 3</ion-title>' +
'</ion-navbar>' +
'<ion-content class="padding">' +
'<p><button class="button" (click)="nav.pop()">Back to Tab 2, Page 2</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><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>' +
'</ion-content>',
directives: [NavbarTemplate, Navbar, Content]
})
export class Tab2Page3 {
constructor(nav: NavController) {
this.nav = nav;
}
pop() { this.nav.pop() }
}