mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 11:41:20 +08:00
basic tabs
This commit is contained in:
Adam Bradley
@ -36,6 +36,22 @@ ion-tabs {
|
||||
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 {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
40
ionic/components/tabs/tab-button.js
Normal file
40
ionic/components/tabs/tab-button.js
Normal 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);
|
||||
}
|
||||
}
|
||||
@ -21,7 +21,8 @@ import {NavBase} from '../nav/nav-base';
|
||||
],
|
||||
hostProperties: {
|
||||
'contentId': 'attr.id',
|
||||
'labeledBy': 'attr.aria-labelledby'
|
||||
'labeledBy': 'attr.aria-labelledby',
|
||||
'isSelected': 'class.show-tab'
|
||||
},
|
||||
hostAttributes: {
|
||||
'role': 'tabpanel'
|
||||
@ -39,9 +40,9 @@ export class Tab {
|
||||
|
||||
this.config = Tab.config.invoke(this);
|
||||
|
||||
this.tabId = util.nextUid();
|
||||
this.contentId = 'tab-content-' + this.tabId;
|
||||
this.labeledBy = 'tab-item-' + this.tabId;
|
||||
this.id = util.nextUid();
|
||||
this.contentId = 'tab-content-' + this.id;
|
||||
this.labeledBy = 'tab-button-' + this.id;
|
||||
|
||||
tabs.addTab(this);
|
||||
}
|
||||
@ -54,7 +55,7 @@ export class Tab {
|
||||
this.nav.initial = value;
|
||||
}
|
||||
|
||||
setSelected(isSelected) {
|
||||
select(isSelected) {
|
||||
this.isSelected = isSelected;
|
||||
}
|
||||
|
||||
|
||||
@ -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 {NgFor} from 'angular2/angular2';
|
||||
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 {IonicComponent} from 'ionic/config/component';
|
||||
import {IonicComponent} from '../../config/component';
|
||||
import {Tab} from './tab';
|
||||
import {TabButton} from './tab-button';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'ion-tabs',
|
||||
properties: {
|
||||
tabBarPlacement: 'tab-bar-placement',
|
||||
tabBarIcons: 'tab-bar-icons'
|
||||
}
|
||||
properties: [
|
||||
'tabBarPlacement',
|
||||
'tabBarIcons'
|
||||
],
|
||||
lifecycle: [onInit]
|
||||
})
|
||||
@View({
|
||||
template: `
|
||||
<nav class="navbar-container tab-bar-container">
|
||||
<div class="tab-bar">
|
||||
<button *ng-for="#t of tabs"
|
||||
role="tab"
|
||||
class="tab-bar-item"
|
||||
[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 *ng-for="#t of tabs" [tab]="t" class="tab-button" role="tab">
|
||||
<icon [class-name]="'tab-button-icon ' + t.tabIcon"></icon>
|
||||
<span class="tab-button-text">{{t.tabTitle}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
@ -37,39 +32,34 @@ import {Tab} from './tab';
|
||||
<content></content>
|
||||
</section>
|
||||
`,
|
||||
directives: [NgFor]
|
||||
directives: [NgFor, TabButton]
|
||||
})
|
||||
export class Tabs {
|
||||
constructor(elementRef: ElementRef, loader: DynamicComponentLoader, injector: Injector) {
|
||||
this.domElement = elementRef.domElement;
|
||||
this.config = Tabs.config.invoke(this);
|
||||
|
||||
this.tabs = [];
|
||||
}
|
||||
|
||||
onInit() {
|
||||
if (this.tabs.length > 0) {
|
||||
this.selectTab(this.tabs[0]);
|
||||
}
|
||||
}
|
||||
|
||||
addTab(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 => {
|
||||
otherTab.setSelected(false);
|
||||
otherTab.select(false);
|
||||
});
|
||||
|
||||
tab.setSelected(true);
|
||||
this.selectedTab = tab;
|
||||
}
|
||||
|
||||
onClickTabItem(ev, tab) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
|
||||
if (this.selectedTab !== tab) {
|
||||
this.select(tab);
|
||||
}
|
||||
tab.select(true);
|
||||
this._selected = tab;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@ -4,9 +4,9 @@
|
||||
|
||||
$tab-bar-background-color: #f7f7f8 !default;
|
||||
|
||||
$tab-bar-item-padding: 10px !default;
|
||||
$tab-bar-item-min-width: 80px !default;
|
||||
$tab-bar-item-max-width: 160px !default;
|
||||
$tab-button-padding: 10px !default;
|
||||
$tab-button-min-width: 80px !default;
|
||||
$tab-button-max-width: 160px !default;
|
||||
|
||||
|
||||
.tab-bar-container {
|
||||
@ -24,7 +24,7 @@ $tab-bar-item-max-width: 160px !default;
|
||||
background: $tab-bar-background-color;
|
||||
}
|
||||
|
||||
.tab-bar-item {
|
||||
.tab-button {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@ -32,9 +32,9 @@ $tab-bar-item-max-width: 160px !default;
|
||||
align-self: center;
|
||||
align-items: center;
|
||||
|
||||
padding: $tab-bar-item-padding;
|
||||
min-width: $tab-bar-item-min-width;
|
||||
max-width: $tab-bar-item-max-width;
|
||||
padding: $tab-button-padding;
|
||||
min-width: $tab-button-min-width;
|
||||
max-width: $tab-button-max-width;
|
||||
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
@ -44,33 +44,33 @@ $tab-bar-item-max-width: 160px !default;
|
||||
background: none;
|
||||
}
|
||||
|
||||
[tab-bar-icons="bottom"] > .tab-bar-container .tab-bar-item {
|
||||
.tab-bar-item-icon {
|
||||
[tab-bar-icons="bottom"] > .tab-bar-container .tab-button {
|
||||
.tab-button-icon {
|
||||
order: 10;
|
||||
}
|
||||
}
|
||||
|
||||
[tab-bar-icons="left"] > .tab-bar-container .tab-bar-item {
|
||||
[tab-bar-icons="left"] > .tab-bar-container .tab-button {
|
||||
flex-direction: row;
|
||||
|
||||
.tab-bar-item-icon {
|
||||
.tab-button-icon {
|
||||
text-align: right;
|
||||
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;
|
||||
|
||||
.tab-bar-item-icon {
|
||||
.tab-button-icon {
|
||||
order: 10;
|
||||
text-align: left;
|
||||
padding-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-bar-item-text,
|
||||
.tab-bar-item-icon {
|
||||
.tab-button-text,
|
||||
.tab-button-icon {
|
||||
align-self: center;
|
||||
|
||||
min-width: 26px;
|
||||
@ -81,15 +81,15 @@ $tab-bar-item-max-width: 160px !default;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.tab-bar-icon-only .tab-bar-item-text,
|
||||
.tab-bar-text-only .tab-bar-item-icon {
|
||||
.tab-bar-icon-only .tab-button-text,
|
||||
.tab-bar-text-only .tab-button-icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tab-bar-item:hover {
|
||||
.tab-button:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.tab-bar-item[aria-selected="true"] {
|
||||
.tab-button[aria-selected="true"] {
|
||||
color: red;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user