mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-23 05:58:26 +08:00
commit of code
This commit is contained in:
@ -26,8 +26,8 @@ import {IonicComponent} from 'ionic/config/component';
|
|||||||
hostProperties: {
|
hostProperties: {
|
||||||
'panelId': 'attr.id',
|
'panelId': 'attr.id',
|
||||||
'labeledBy': 'attr.aria-labelledby',
|
'labeledBy': 'attr.aria-labelledby',
|
||||||
'ariaHidden': 'attr.aria-hidden',
|
'!isSelected': 'attr.aria-hidden',
|
||||||
'isSelected': 'class.show-tab'
|
'isSelected': 'class.tab-selected'
|
||||||
},
|
},
|
||||||
hostAttributes: {
|
hostAttributes: {
|
||||||
'role': 'tabpanel'
|
'role': 'tabpanel'
|
||||||
@ -58,7 +58,6 @@ export class Tab {
|
|||||||
this.navBase.panes['_n'] = this;
|
this.navBase.panes['_n'] = this;
|
||||||
|
|
||||||
this.isSelected = false;
|
this.isSelected = false;
|
||||||
this.ariaHidden = true;
|
|
||||||
|
|
||||||
tabs.addTab(this);
|
tabs.addTab(this);
|
||||||
this.panelId = 'tab-panel-' + this.id;
|
this.panelId = 'tab-panel-' + this.id;
|
||||||
@ -83,7 +82,6 @@ export class Tab {
|
|||||||
}
|
}
|
||||||
|
|
||||||
this.isSelected = shouldSelect;
|
this.isSelected = shouldSelect;
|
||||||
this.ariaHidden = !shouldSelect;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
@ -47,6 +47,7 @@ export class Tabs {
|
|||||||
this.id = ++tabsId;
|
this.id = ++tabsId;
|
||||||
this.tabIds = 0;
|
this.tabIds = 0;
|
||||||
this.tabs = [];
|
this.tabs = [];
|
||||||
|
this._selected = null;
|
||||||
|
|
||||||
this.domElement = elementRef.domElement;
|
this.domElement = elementRef.domElement;
|
||||||
this.config = Tabs.config.invoke(this);
|
this.config = Tabs.config.invoke(this);
|
||||||
@ -75,6 +76,8 @@ export class Tabs {
|
|||||||
}
|
}
|
||||||
if (!tabToSelect || this._selected === tabToSelect) return;
|
if (!tabToSelect || this._selected === tabToSelect) return;
|
||||||
|
|
||||||
|
let tabToDeselect = this._selected;
|
||||||
|
|
||||||
this.tabs.forEach(tab => {
|
this.tabs.forEach(tab => {
|
||||||
tab.select( (tab === tabToSelect) );
|
tab.select( (tab === tabToSelect) );
|
||||||
});
|
});
|
||||||
|
@ -4,7 +4,13 @@
|
|||||||
<ion-tab [initial]="tab1Initial" tab-title="Tab 1">
|
<ion-tab [initial]="tab1Initial" tab-title="Tab 1">
|
||||||
</ion-tab>
|
</ion-tab>
|
||||||
|
|
||||||
<ion-tab [initial]="tab2Initial" tab-title="Tab 2">
|
<ion-tab [initial]="tab2Initial" tab-title="Tab 2" class="tab2">
|
||||||
</ion-tab>
|
</ion-tab>
|
||||||
|
|
||||||
</ion-tabs>
|
</ion-tabs>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.tab2 f {
|
||||||
|
background: green
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
107
ionic/tabs.js
107
ionic/tabs.js
@ -1,107 +0,0 @@
|
|||||||
import {Ancestor, Parent} from 'angular2/src/core/annotations_impl/visibility';
|
|
||||||
import {Optional} from 'angular2/src/di/annotations_impl'
|
|
||||||
import {Directive, Component, onInit} from 'angular2/src/core/annotations_impl/annotations';
|
|
||||||
import {View} from 'angular2/src/core/annotations_impl/view';
|
|
||||||
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
|
|
||||||
import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
|
|
||||||
import {Injector} from 'angular2/di';
|
|
||||||
import {NgFor} from 'angular2/angular2';
|
|
||||||
import {ViewContainerRef} from 'angular2/src/core/compiler/view_container_ref';
|
|
||||||
|
|
||||||
import {IonicComponent} from '../../config/component';
|
|
||||||
import {Tab} from './tab';
|
|
||||||
import {TabButton} from './tab-button';
|
|
||||||
import {Icon} from '../icon/icon';
|
|
||||||
import {Nav, NavPane} from '../nav/nav';
|
|
||||||
import {NavBase} from '../nav/nav-base';
|
|
||||||
import {NavItem} from '../nav/nav-item';
|
|
||||||
|
|
||||||
|
|
||||||
let tabsId = -1;
|
|
||||||
|
|
||||||
@Component({
|
|
||||||
selector: 'ion-tabs',
|
|
||||||
properties: [
|
|
||||||
'tabBarPlacement',
|
|
||||||
'tabBarIcons'
|
|
||||||
],
|
|
||||||
lifecycle: [onInit]
|
|
||||||
})
|
|
||||||
@View({
|
|
||||||
template: `
|
|
||||||
<nav class="navbar-container tab-bar-container">
|
|
||||||
<div class="tab-bar" role="tablist">
|
|
||||||
<button *ng-for="#t of tabs" [tab]="t" class="tab-button" role="tab">
|
|
||||||
<icon [name]="t.tabIcon" class="tab-button-icon"></icon>
|
|
||||||
<span class="tab-button-text">{{t.tabTitle}}</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
<section class="content-container">
|
|
||||||
<content></content>
|
|
||||||
</section>
|
|
||||||
`,
|
|
||||||
directives: [NgFor, TabButton, Icon]
|
|
||||||
})
|
|
||||||
export class Tabs {
|
|
||||||
constructor(
|
|
||||||
elementRef: ElementRef,
|
|
||||||
@Optional() parentNavBase: NavBase
|
|
||||||
) {
|
|
||||||
this.id = ++tabsId;
|
|
||||||
this.tabIds = 0;
|
|
||||||
this.tabs = [];
|
|
||||||
|
|
||||||
this.domElement = elementRef.domElement;
|
|
||||||
this.config = Tabs.config.invoke(this);
|
|
||||||
|
|
||||||
console.log('Tabs constructor', this.id, ' parentNavBase:', parentNavBase);
|
|
||||||
}
|
|
||||||
|
|
||||||
onInit() {
|
|
||||||
if (this.tabs.length > 0) {
|
|
||||||
this.selectTab(this.tabs[0]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
addTab(tab) {
|
|
||||||
tab.id = this.id + '' + (++this.tabIds);
|
|
||||||
this.tabs.push(tab);
|
|
||||||
}
|
|
||||||
|
|
||||||
selectTab(tabToSelect) {
|
|
||||||
if (typeof tabToSelect === 'number') {
|
|
||||||
let index = tabToSelect;
|
|
||||||
tabToSelect = null;
|
|
||||||
if (index < this.tabs.length) {
|
|
||||||
tabToSelect = this.tabs[index];
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (!tabToSelect || this._selected === tabToSelect) return;
|
|
||||||
|
|
||||||
this.tabs.forEach(tab => {
|
|
||||||
tab.select( (tab === tabToSelect) );
|
|
||||||
});
|
|
||||||
|
|
||||||
this._selected = tabToSelect;
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
new IonicComponent(Tabs, {
|
|
||||||
properties: {
|
|
||||||
tabBarPlacement: {
|
|
||||||
defaults: {
|
|
||||||
ios: 'bottom',
|
|
||||||
android: 'top',
|
|
||||||
core: 'bottom'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
tabBarIcons: {
|
|
||||||
defaults: {
|
|
||||||
ios: 'top',
|
|
||||||
android: 'top',
|
|
||||||
core: 'top'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
Reference in New Issue
Block a user