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

init tabs

Browse Source
This commit is contained in:
Adam Bradley
2015-04-01 16:03:21 -05:00
parent d1c4accec1
commit c20e510147
22 changed files with 125 additions and 159 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/components.js
View File

@ -5,5 +5,6 @@ export * from 'ionic2/components/icon/icon'
export * from 'ionic2/components/item/item'
export * from 'ionic2/components/list/list'
export * from 'ionic2/components/nav-view/nav-view'
export * from 'ionic2/components/tabs/tabs'
export * from 'ionic2/components/toolbar/toolbar'
export * from 'ionic2/components/view/view'

2
src/components/checkbox/test/basic/main.html
View File

@ -1,5 +1,5 @@
<ion-view view-title="Checkboxes">
<ion-view nav-title="Checkboxes">
<ion-content>

2
src/components/item/test/basic/main.html
View File

@ -1,4 +1,4 @@
<ion-view view-title="List of Items">
<ion-view nav-title="List of Items">
<ion-list>
<ion-list-header>
List Header

2
src/components/list/test/basic/main.html
View File

@ -1,5 +1,5 @@
<ion-view view-title="List">
<ion-view nav-title="List">
<ion-content>

2
src/components/nav-view/test/basic/pages/first-page.html
View File

@ -1,3 +1,3 @@
<ion-view view-title="First Page">
<ion-view nav-title="First Page">
<button (click)="nextPage()">Push Page 2</button>
</ion-view>

2
src/components/nav-view/test/basic/pages/second-page.html
View File

@ -1,3 +1,3 @@
<ion-view view-title="Second Page">
<ion-view nav-title="Second Page">
<button (click)="prevPage()">Pop This Page</button>
</ion-view>

2
src/components/radio/test/basic/main.html
View File

@ -1,5 +1,5 @@
<ion-view view-title="Radio Buttons">
<ion-view nav-title="Radio Buttons">
<ion-content>

2
src/components/search-bar/test/basic/main.html
View File

@ -1,5 +1,5 @@
<ion-view view-title="Search Bar">
<ion-view nav-title="Search Bar">
<ion-content>

2
src/components/switch/test/basic/main.html
View File

@ -1,5 +1,5 @@
<ion-view view-title="Switches">
<ion-view nav-title="Switches">
<ion-content>

36
src/components/tabs/tab.js
View File

@ -1,6 +1,5 @@
import {NgElement, Component, Template, Parent} from 'angular2/angular2';
import {Tabs} from 'ionic2/components/tabs/tabs';
import {NavView} from 'ionic2/components/nav-view/nav-view';
@Component({
selector: 'ion-tab',
@ -10,34 +9,11 @@ import {NavView} from 'ionic2/components/nav-view/nav-view';
})
@Template({
inline: `
<div class="container">
<div class="content">
<div class="scroll-content">
<content></content>
</div>
</div>
</div>
`
<div [hidden]="!isSelected">
<content></content>
</div>
`
})
export class Tab extends NavView {
export class Tab {
constructor(@NgElement() ele:NgElement, @Parent() tabs: Tabs) {
super();
this.ele = ele;
ele.domElement.classList.add('view');
ele.domElement.classList.add('tab-view');
tabs.add(this);
setTimeout(() => {
// HACK!!!!! "this" doesn't have tabTitle when not in setTimeout
console.log(this.tabTitle)
})
}
show(shouldShow) {
this.ele.domElement.classList[shouldShow ? 'remove' : 'add']('hide');
}
}

68
src/components/tabs/tabs.js
View File

@ -1,45 +1,49 @@
import {NgElement, Component, Template, Parent} from 'angular2/angular2';
import {View} from 'ionic2/components/view/view';
import {NgElement, Component, Template, Foreach, Parent} from 'angular2/angular2';
import {ComponentConfig} from 'ionic2/config/component-config';
export let TabsConfig = new ComponentConfig('tabs');
@Component({
selector: 'ion-tabs'
selector: 'ion-tabs',
bind: {
tabBarPlacement: 'tab-bar-placement'
},
services: [TabsConfig]
})
@Template({
inline: `
<div class="tool-bar">
Tabs
<div class="toolbar tab-bar toolbar-ios toolbar-bottom">
<div class="tab-bar-content">
<a class="tab-bar-item" class="tab-active" href="#">
Tab 1
</a>
<a class="tab-bar-item" href="#">
Tab 2
</a>
<a class="tab-bar-item" href="#">
Tab 3
</a>
</div>
</div>
<div class="tool-bar tab-bar">
<a class="tab-item">1</a>
<a class="tab-item">2</a>
<a class="tab-item">3</a>
<div class="pane-container">
<div class="content">
<content></content>
</div>
</div>
<div class="container">
<content select="ion-tab"></content>
</div>
`
`,
})
export class Tabs {
constructor(
configFactory: TabsConfig,
element: NgElement
) {
this.domElement = element.domElement
this.domElement.classList.add('pane')
configFactory.create(this)
constructor(@NgElement() ele:NgElement) {
ele.domElement.classList.add('pane');
ele.domElement.classList.add('tabs-container');
this.tabs = [];
this.tabBarPlacement = this.tabBarPlacement || 'bottom'
}
add(tab) {
this.tabs.push(tab);
tab.show(this.tabs.length === 1);
}
selectTab(tab) {
this.showHistory(tab.history);
}
}

20
src/components/tabs/tabs.scss
View File

@ -1,2 +1,22 @@
// Tabs
// --------------------------------------------------
.tabs {
background: red;
}
.toolbar.tab-bar {
@include flex-justify-content(center);
}
.tab-bar-content {
@include flex-display();
}
.tab-bar-item {
@include flex(1);
min-width: 100px;
text-align: center;
}

65
src/components/tabs/tabs2.js
View File

@ -1,65 +0,0 @@
import {Component, Template, Foreach, Parent} from 'angular2/angular2';
import {Inject} from 'angular2/di';
@Component({
selector: 'ion-tabs'
})
@Template({
inline: `
<div class="content">
<content></content>
</div>
<div class="tabs">
<a *foreach="#tab in tabs" (click)="select(tab)"
class="tab-item"
[class.active]="tab.isSelected">
{{tab.title}}
</a>
</div>
`,
directives: [Foreach],
})
export class Tabs {
// constructor() {
// this.tabs = [];
// }
addTab(tab: Tab) {
this.tabs.push(tab);
if (this.tabs.length === 1) {
this.select(tab);
}
}
select(tab: Tab) {
this.tabs.forEach(otherTab => {
otherTab.setSelected(false);
});
tab.setSelected(true);
}
}
@Component({
selector: 'ion-tab',
bind: {
title: 'title'
}
})
@Template({
inline: `
<div [hidden]="!isSelected">
<content></content>
</div>
`
})
export class Tab {
// constructor(
// @Parent() tabs: Tabs
// ) {
// tabs.addTab(this);
// this.isSelected = false;
// }
setSelected(isSelected: Boolean) {
this.isSelected = isSelected;
}
}

1
src/components/tabs/test/basic/e2e.js Normal file
View File

@ -0,0 +1 @@

12
src/components/tabs/test/basic/main.html Normal file
View File

@ -0,0 +1,12 @@
<ion-view>
<ion-tabs>
<ion-tab>
Tab 1 Content
</ion-tab>
</ion-tabs>
</ion-view>

17
src/components/tabs/test/basic/main.js Normal file
View File

@ -0,0 +1,17 @@
import {bootstrap} from 'angular2/core';
import {Component, Template} from 'angular2/angular2';
import {View, Tabs} from 'ionic2/components';
@Component({ selector: '[ion-app]' })
@Template({
url: 'main.html',
directives: [View, Tabs]
})
class IonicApp {
constructor() {
console.log('IonicApp Start')
}
}
bootstrap(IonicApp)

4
src/components/toolbar/test/html-title/main.html
View File

@ -1,11 +1,11 @@
<ion-view>
<ion-view-title>
<ion-nav-title>
<span style="color:red">Awesome</span>
<strong style="color:green">HTML</strong>
<em style="color:purple">Title</em>
</ion-view-title>
</ion-nav-title>
<ion-nav-items side="primary">
<button class="button">p1</button>

2
src/components/toolbar/test/long-title/main.html
View File

@ -1,5 +1,5 @@
<ion-view view-title="What we have here is an extremely long title that probably would not fit inside of a standard title block that is on top of the view and things.">
<ion-view nav-title="What we have here is an extremely long title that probably would not fit inside of a standard title block that is on top of the view and things.">
<ion-nav-items side="primary">
<button class="button">p1</button>

2
src/components/toolbar/test/lopsided-buttons/main.html
View File

@ -1,5 +1,5 @@
<ion-view view-title="Attribute Title">
<ion-view nav-title="Attribute Title">
<ion-nav-items side="primary">
<button class="button">p1</button>

16
src/components/toolbar/toolbar.js
View File

@ -8,24 +8,24 @@ export let ToolbarConfig = new ComponentConfig('toolbar')
@Component({
selector: 'ion-toolbar',
bind: {
title: 'view-title'
title: 'nav-title'
},
services: [ToolbarConfig]
})
@Template({
inline: `
<div class="bar-items">
<div class="toolbar-items">
<button class="button back-button bar-item"></button>
<div class="bar-title">
<div class="bar-inner-title">
<div class="toolbar-title">
<div class="toolbar-inner-title">
{{ title }}
<content select="ion-view-title"></content>
<content select="ion-nav-title"></content>
</div>
</div>
<div class="bar-item bar-primary-item">
<div class="toolbar-item bar-primary-item">
<content select="ion-nav-items[side=primary]"></content>
</div>
<div class="bar-item bar-secondary-item">
<div class="toolbar-item bar-secondary-item">
<content select="ion-nav-items[side=secondary]"></content>
</div>
</div>`,
@ -45,7 +45,7 @@ export class Toolbar {
alignTitle() {
let ele = this.domElement
this.titleEle = this.titleEle || ele.querySelector('.bar-inner-title')
this.titleEle = this.titleEle || ele.querySelector('.toolbar-inner-title')
this.textAlign = this.textAlign || window.getComputedStyle(this.titleEle).textAlign

18
src/components/toolbar/toolbar.scss
View File

@ -14,22 +14,22 @@ $toolbar-background: #f7f7f8 !default;
background: $toolbar-background;
}
.bar-top {
.toolbar-top {
@include flex-order(20);
}
.bar-bottom {
.toolbar-bottom {
@include flex-order(80);
}
.bar-items {
.toolbar-items {
@include flex-display();
@include flex(1);
@include flex-justify-content(space-between);
}
.bar-item,
.bar-item ion-nav-items {
.toolbar-item,
.toolbar-item ion-nav-items {
@include flex-display();
@include flex-align-items(center);
}
@ -49,14 +49,14 @@ $toolbar-background: #f7f7f8 !default;
min-width: 12px;
}
.bar-title {
.toolbar-title {
@include flex-display();
@include flex(1);
@include flex-align-items(center);
@include flex-order(2);
}
.bar-inner-title {
.toolbar-inner-title {
width: 100%;
padding: 0 15px;
overflow: hidden;
@ -64,10 +64,10 @@ $toolbar-background: #f7f7f8 !default;
text-overflow: ellipsis;
}
.bar-primary-item {
.toolbar-primary-item {
@include flex-order(3);
}
.bar-secondary-item {
.toolbar-secondary-item {
@include flex-order(4);
}

6
src/components/view/view.js
View File

@ -7,14 +7,14 @@ export let ViewConfig = new ComponentConfig('view')
@Component({
selector: 'ion-view',
bind: {
title: 'view-title'
title: 'nav-title'
},
services: [ViewConfig]
})
@Template({
inline: `
<ion-toolbar [view-title]="title">
<content select="ion-view-title"></content>
<ion-toolbar [nav-title]="title">
<content select="ion-nav-title"></content>
<content select="ion-nav-items[side=primary]"></content>
<content select="ion-nav-items[side=secondary]"></content>
</ion-toolbar>