mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 11:41:20 +08:00
108 lines
2.5 KiB
JavaScript
108 lines
2.5 KiB
JavaScript
import {NgElement, Component, View, For} from 'angular2/angular2'
|
|
import {IonicComponent} from 'ionic/config/component'
|
|
|
|
@Component({
|
|
selector: 'ion-tabs',
|
|
bind: {
|
|
placement: 'placement',
|
|
tabBarIcons: 'tab-bar-icons',
|
|
tabBarText: 'tab-bar-text'
|
|
}
|
|
})
|
|
@View({
|
|
template: `
|
|
<header class="toolbar-container">
|
|
<!-- COLLECTION OF TOOLBARS FOR EACH VIEW WITHIN EACH TAB-VIEWPORT -->
|
|
<!-- TOOLBARS FOR EACH VIEW SHOULD HAVE THE SAME CONTEXT AS ITS VIEW -->
|
|
</header>
|
|
|
|
<nav class="tab-bar-container">
|
|
<div class="tab-bar">
|
|
<a *for="#tab of tabs"
|
|
class="tab-bar-item"
|
|
[class.tab-active]="tab.isSelected"
|
|
(^click)="onClickTabItem($event, tab)">
|
|
<icon class="tab-bar-item-icon ion-home"
|
|
[hidden]="tabBarIcons=='none'"
|
|
[class.tab-bar-icon-bottom]="tabBarIcons=='bottom'"
|
|
[class.tab-bar-icon-top]="tabBarIcons=='top'"></icon>
|
|
<span class="tab-bar-item-text" [hidden]="tabBarText=='none'">{{tab.title}}</span>
|
|
</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<section class="tab-pane-container">
|
|
<content></content>
|
|
</section>
|
|
`,
|
|
directives: [For]
|
|
})
|
|
export class Tabs {
|
|
constructor(
|
|
@NgElement() ngElement: NgElement
|
|
) {
|
|
this.domElement = ngElement.domElement
|
|
|
|
// should be used to cover up sibling .nav-pane's and it's parent
|
|
this.domElement.classList.add('nav-pane-cover-parent')
|
|
|
|
// .tab-bar-top/bottom should be added to the entire element when specified
|
|
// TODO: MAKE MORE GOOD!!!
|
|
setTimeout(() => {
|
|
if (this.placement == 'top') {
|
|
this.domElement.classList.add('tab-bar-top')
|
|
} else {
|
|
this.domElement.classList.add('tab-bar-bottom')
|
|
}
|
|
})
|
|
|
|
this.config = Tabs.config.invoke(this)
|
|
this.tabs = []
|
|
}
|
|
|
|
addTab(tab) {
|
|
this.tabs.push(tab)
|
|
if (this.tabs.length == 1) {
|
|
this.select(tab)
|
|
}
|
|
}
|
|
|
|
onClickTabItem(ev, tab) {
|
|
ev.preventDefault()
|
|
if (this.selectedTab !== tab) {
|
|
this.select(tab)
|
|
} else if (tab._stack.length >= 2) {
|
|
tab.popTo(0)
|
|
}
|
|
}
|
|
|
|
select(tab) {
|
|
this.tabs.forEach(otherTab => {
|
|
otherTab.setSelected(false)
|
|
})
|
|
tab.setSelected(true)
|
|
this.selectedTab = tab
|
|
}
|
|
|
|
}
|
|
|
|
new IonicComponent(Tabs, {
|
|
bind: {
|
|
placement: {
|
|
defaults: {
|
|
ios: 'bottom',
|
|
android: 'top',
|
|
core: 'bottom'
|
|
}
|
|
},
|
|
tabBarIcons: {
|
|
defaults: {
|
|
ios: 'top',
|
|
android: 'none',
|
|
core: 'top'
|
|
}
|
|
},
|
|
tabBarText: {}
|
|
}
|
|
})
|