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

basic tabs

Browse Source
This commit is contained in:
Adam Bradley
2015-05-30 20:51:56 -05:00
parent 0bd6915a98
commit 0cb0a1c600
5 changed files with 106 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
ionic/components/app/structure.scss
View File

@ -36,6 +36,22 @@ ion-tabs {
padding: 0; padding: 0;
} }
ion-tab {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
display: none;
&.show-tab {
display: block;
}
}
ion-nav { ion-nav {
position: absolute; position: absolute;
top: 0; top: 0;

40
ionic/components/tabs/tab-button.js Normal file
View File

@ -0,0 +1,40 @@
import {Parent} from 'angular2/src/core/annotations_impl/visibility';
import {Directive, onInit} from 'angular2/src/core/annotations_impl/annotations';
import {View} from 'angular2/src/core/annotations_impl/view';
import {Tabs} from './tabs';
@Directive({
selector: '.tab-button',
properties: ['tab'],
hostProperties: {
'btnId': 'attr.id',
'ariaControls': 'attr.aria-controls',
'tab.isSelected': 'attr.aria-selected'
},
hostAttributes: {
'role': 'tab'
},
hostListeners: {
'^click': 'onClick($event)'
},
lifecycle: [onInit]
})
export class TabButton {
constructor(@Parent() tabs: Tabs) {
this.tabs = tabs;
}
onInit() {
this.btnId = 'tab-button-' + this.tab.id;
this.ariaControls = 'tab-content-' + this.tab.id;
}
onClick(ev) {
ev.stopPropagation();
ev.preventDefault();
this.tabs.selectTab(this.tab);
}
}

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

@ -21,7 +21,8 @@ import {NavBase} from '../nav/nav-base';
], ],
hostProperties: { hostProperties: {
'contentId': 'attr.id', 'contentId': 'attr.id',
'labeledBy': 'attr.aria-labelledby' 'labeledBy': 'attr.aria-labelledby',
'isSelected': 'class.show-tab'
}, },
hostAttributes: { hostAttributes: {
'role': 'tabpanel' 'role': 'tabpanel'
@ -39,9 +40,9 @@ export class Tab {
this.config = Tab.config.invoke(this); this.config = Tab.config.invoke(this);
this.tabId = util.nextUid(); this.id = util.nextUid();
this.contentId = 'tab-content-' + this.tabId; this.contentId = 'tab-content-' + this.id;
this.labeledBy = 'tab-item-' + this.tabId; this.labeledBy = 'tab-button-' + this.id;
tabs.addTab(this); tabs.addTab(this);
} }
@ -54,7 +55,7 @@ export class Tab {
this.nav.initial = value; this.nav.initial = value;
} }
setSelected(isSelected) { select(isSelected) {
this.isSelected = isSelected; this.isSelected = isSelected;
} }

60
ionic/components/tabs/tabs.js
View File

@ -1,35 +1,30 @@
import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations'; import {Component, onInit} 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 {NgFor} from 'angular2/angular2';
import {ElementRef} from 'angular2/src/core/compiler/element_ref'; import {ElementRef} from 'angular2/src/core/compiler/element_ref';
import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader'; import {DynamicComponentLoader} from 'angular2/src/core/compiler/dynamic_component_loader';
import {Injector} from 'angular2/di'; import {Injector} from 'angular2/di';
import {NgFor} from 'angular2/angular2';
import {IonicComponent} from 'ionic/config/component'; import {IonicComponent} from '../../config/component';
import {Tab} from './tab'; import {Tab} from './tab';
import {TabButton} from './tab-button';
@Component({ @Component({
selector: 'ion-tabs', selector: 'ion-tabs',
properties: { properties: [
tabBarPlacement: 'tab-bar-placement', 'tabBarPlacement',
tabBarIcons: 'tab-bar-icons' 'tabBarIcons'
} ],
lifecycle: [onInit]
}) })
@View({ @View({
template: ` template: `
<nav class="navbar-container tab-bar-container"> <nav class="navbar-container tab-bar-container">
<div class="tab-bar"> <div class="tab-bar">
<button *ng-for="#t of tabs" <button *ng-for="#t of tabs" [tab]="t" class="tab-button" role="tab">
role="tab" <icon [class-name]="'tab-button-icon ' + t.tabIcon"></icon>
class="tab-bar-item" <span class="tab-button-text">{{t.tabTitle}}</span>
[attr.id]="'tab-item-' + t.tabId"
[attr.aria-controls]="'tab-content-' + t.tabId"
[attr.aria-selected]="t.isSelected"
[style.color]="t.isSelected ? 'red' : ''"
(^click)="onClickTabItem($event, t)">
<icon [class-name]="'tab-bar-item-icon ' + t.tabIcon" [hidden]="!t.tabIcon"></icon>
<span class="tab-bar-item-text" [hidden]="!t.tabTitle">{{t.tabTitle}}</span>
</button> </button>
</div> </div>
</nav> </nav>
@ -37,39 +32,34 @@ import {Tab} from './tab';
<content></content> <content></content>
</section> </section>
`, `,
directives: [NgFor] directives: [NgFor, TabButton]
}) })
export class Tabs { export class Tabs {
constructor(elementRef: ElementRef, loader: DynamicComponentLoader, injector: Injector) { constructor(elementRef: ElementRef, loader: DynamicComponentLoader, injector: Injector) {
this.domElement = elementRef.domElement; this.domElement = elementRef.domElement;
this.config = Tabs.config.invoke(this); this.config = Tabs.config.invoke(this);
this.tabs = []; this.tabs = [];
} }
onInit() {
if (this.tabs.length > 0) {
this.selectTab(this.tabs[0]);
}
}
addTab(tab) { addTab(tab) {
this.tabs.push(tab); this.tabs.push(tab);
if (this.tabs.length == 1) {
this.select(tab);
}
} }
select(tab) { selectTab(tab) {
if (!tab || this._selected === tab) return;
this.tabs.forEach(otherTab => { this.tabs.forEach(otherTab => {
otherTab.setSelected(false); otherTab.select(false);
}); });
tab.setSelected(true); tab.select(true);
this.selectedTab = tab; this._selected = tab;
}
onClickTabItem(ev, tab) {
ev.preventDefault();
ev.stopPropagation();
if (this.selectedTab !== tab) {
this.select(tab);
}
} }
} }

38
ionic/components/tabs/tabs.scss
View File

@ -4,9 +4,9 @@
$tab-bar-background-color: #f7f7f8 !default; $tab-bar-background-color: #f7f7f8 !default;
$tab-bar-item-padding: 10px !default; $tab-button-padding: 10px !default;
$tab-bar-item-min-width: 80px !default; $tab-button-min-width: 80px !default;
$tab-bar-item-max-width: 160px !default; $tab-button-max-width: 160px !default;
.tab-bar-container { .tab-bar-container {
@ -24,7 +24,7 @@ $tab-bar-item-max-width: 160px !default;
background: $tab-bar-background-color; background: $tab-bar-background-color;
} }
.tab-bar-item { .tab-button {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
@ -32,9 +32,9 @@ $tab-bar-item-max-width: 160px !default;
align-self: center; align-self: center;
align-items: center; align-items: center;
padding: $tab-bar-item-padding; padding: $tab-button-padding;
min-width: $tab-bar-item-min-width; min-width: $tab-button-min-width;
max-width: $tab-bar-item-max-width; max-width: $tab-button-max-width;
text-align: center; text-align: center;
cursor: pointer; cursor: pointer;
@ -44,33 +44,33 @@ $tab-bar-item-max-width: 160px !default;
background: none; background: none;
} }
[tab-bar-icons="bottom"] > .tab-bar-container .tab-bar-item { [tab-bar-icons="bottom"] > .tab-bar-container .tab-button {
.tab-bar-item-icon { .tab-button-icon {
order: 10; order: 10;
} }
} }
[tab-bar-icons="left"] > .tab-bar-container .tab-bar-item { [tab-bar-icons="left"] > .tab-bar-container .tab-button {
flex-direction: row; flex-direction: row;
.tab-bar-item-icon { .tab-button-icon {
text-align: right; text-align: right;
padding-right: 5px; padding-right: 5px;
} }
} }
[tab-bar-icons="right"] > .tab-bar-container .tab-bar-item { [tab-bar-icons="right"] > .tab-bar-container .tab-button {
flex-direction: row; flex-direction: row;
.tab-bar-item-icon { .tab-button-icon {
order: 10; order: 10;
text-align: left; text-align: left;
padding-left: 5px; padding-left: 5px;
} }
} }
.tab-bar-item-text, .tab-button-text,
.tab-bar-item-icon { .tab-button-icon {
align-self: center; align-self: center;
min-width: 26px; min-width: 26px;
@ -81,15 +81,15 @@ $tab-bar-item-max-width: 160px !default;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.tab-bar-icon-only .tab-bar-item-text, .tab-bar-icon-only .tab-button-text,
.tab-bar-text-only .tab-bar-item-icon { .tab-bar-text-only .tab-button-icon {
display: none; display: none;
} }
.tab-bar-item:hover { .tab-button:hover {
opacity: 0.6; opacity: 0.6;
} }
.tab-bar-item[aria-selected="true"] { .tab-button[aria-selected="true"] {
color: red; color: red;
} }