import {Component, View as NgView, Parent} from 'angular2/angular2'
import {View, Tabs, Tab, Aside, Content, NavPane} from 'ionic/ionic'
@Component({
selector: 'tabs-page'
})
@NgView({
templateUrl: 'pages/tabs.html',
directives: [Tabs, Tab, View, Content]
})
export class TabsPage {
constructor() {
this.tab1Initial = Tab1Page1
this.tab2Initial = Tab2Page1
}
}
//
// tab 1
//
@Component({ selector: 't1p1' })
@NgView({
template: `
Tab 1 Page 1.
`,
directives: [View, Content]
})
class Tab1Page1 {
constructor(navPane: NavPane) {
this.navPane = navPane
}
next() {
this.navPane.push(Tab1Page2)
}
}
@Component({ selector: 't1p2' })
@NgView({
template: `
Tab 1 Page 2.
`,
directives: [View, Content]
})
class Tab1Page2 {
constructor(navPane: NavPane) {
this.navPane = navPane
}
pop() { this.navPane.pop() }
}
//
// tab 2
//
@Component({ selector: 't2p1' })
@NgView({
template: `
Left aside for Tab 2 Page 1
Tab 2 Page 1.
I have got an aside on the left.
`,
directives: [View, Aside, Content]
})
class Tab2Page1 {
constructor(navPane: NavPane) {
this.navPane = navPane
}
next() {
this.navPane.push(Tab2Page2)
}
}
@Component({ selector: 't2p2' })
@NgView({
template: `
Left aside for Tab 2 Page 2
Nested Tab 1, static content
Nested Tab 2, static content
`,
directives: [View, Aside, Tabs, Tab, Content]
})
class Tab2Page2 {
constructor(navPane: NavPane) {
this.navPane = navPane
}
pop() { this.navPane.pop() }
}