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

tabs

Browse Source
This commit is contained in:
Adam Bradley
2015-03-19 11:07:18 -05:00
parent 616fa72aef
commit ecd1ca168a
20 changed files with 178 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
gulpfile.js
View File

@ -17,7 +17,7 @@ var config = {
src: { src: {
js: ['src/**/*.js', '!src/**/*.spec.js'], js: ['src/**/*.js', '!src/**/*.spec.js'],
html: 'src/**/*.html', html: 'src/**/*.html',
scss: 'src/**/*.scss', scss: 'src/components/**/*.scss',
playgroundJs: 'playground/**/*.js', playgroundJs: 'playground/**/*.js',
playgroundFiles: ['playground/**/*', '!playground/**/*.js'], playgroundFiles: ['playground/**/*', '!playground/**/*.js'],
}, },
@ -41,7 +41,7 @@ gulp.task('watch', ['default'], function () {
gulp.watch(config.src.html, ['html']); gulp.watch(config.src.html, ['html']);
gulp.watch(config.src.js, ['js']); gulp.watch(config.src.js, ['js']);
gulp.watch(config.src.sass, ['sass']); gulp.watch(config.src.scss, ['sass']);
gulp.watch(config.src.playgroundJs, ['playgroundJs']); gulp.watch(config.src.playgroundJs, ['playgroundJs']);
gulp.watch(config.src.playgroundFiles, ['playgroundFiles']); gulp.watch(config.src.playgroundFiles, ['playgroundFiles']);

8
playground/layouts/tabs.html
View File

@ -10,10 +10,10 @@
Tabs Tabs
</div> </div>
<div class="tool-bar nav-bar" ng-class="tabsLocation"> <div class="tool-bar tab-bar" ng-class="tabsLocation">
<button ng-click="tab1()" class="nav-item">1</button> <button ng-click="tab1()" class="tab-item">1</button>
<button ng-click="tab2()" class="nav-item">2</button> <button ng-click="tab2()" class="tab-item">2</button>
<button ng-click="tab3()" class="nav-item">3</button> <button ng-click="tab3()" class="tab-item">3</button>
</div> </div>
<div class="container"> <div class="container">

8
playground/layouts/view.css
View File

@ -3,8 +3,12 @@ body {
} }
.tool-bar button { .tool-bar button {
position: absolute; /*position: absolute;
right: 0; right: 0;*/
}
.tab-bar .tab-item {
color: blue;
} }
.tool-bar { .tool-bar {

37
playground/tabs/index.html Normal file
View File

@ -0,0 +1,37 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<link rel="stylesheet" href="/css/ionic.css">
<link rel="stylesheet" href="/layouts/view.css">
<!-- ES6-related imports -->
<script src="/lib/traceur-runtime.js"></script>
<script src="/lib/es6-module-loader-sans-promises.src.js"></script>
<script src="/lib/extension-register.js"></script>
<script>
register(System);
</script>
<!-- Third party imports -->
<script src="/lib/angular2.js"></script>
<script src="/lib/zone.js"></script>
</head>
<body ion-app>
Loading...
</body>
<!-- Application bootstrap logic -->
<script>
System.baseURL = 'http://localhost:9000/';
System.register({
map: {
'ionic': '../ionic'
}
});
System.import('tabs/main');
</script>
</html>

16
playground/tabs/main.html Normal file
View File

@ -0,0 +1,16 @@
<ion-tabs>
<ion-tab tab-title="Home">
Home Content
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
</ion-tab>
<ion-tab tab-title="About">
About Content
</ion-tab>
<ion-tab tab-title="Contact">
Contact Content
</ion-tab>
</ion-tabs>

18
playground/tabs/main.js Normal file
View File

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

4
src/components/app/_util.scss Normal file
View File

@ -0,0 +1,4 @@
.hide.hide.hide {
display: none;
}

12
src/components/app/ionic.scss
View File

@ -11,13 +11,15 @@
@import @import
"normalize", "normalize",
"globals", "globals",
"util",
"scaffolding", "scaffolding",
"typography"; "typography";
// Components // Components
@import "../button/button"; @import
@import "../tabbar/tabbar"; "../button/button",
@import "../modal/modal"; "../modal/modal",
@import "../sidemenu/sidemenu"; "../sidemenu/sidemenu",
@import "../switch/switch"; "../switch/switch",
"../tabs/tabs";

0
src/components/button/_button.scss → src/components/button/button.scss
View File

0
src/components/tabbar/_tabbar.scss
View File

0
src/components/tabbar/mixins/android/android-tabbar.html
View File

9
src/components/tabbar/mixins/android/android-tabbar.js
View File

@ -1,9 +0,0 @@
import {TabbarConfig} from '../../tabbar';
// import {Draggable} from '/behaviors/draggable'
TabbarConfig.platform('android')
.template('./android-template.html')
.mixin(function(tabbar) {
});

8
src/components/tabbar/mixins/android/android-tabbar.scss
View File

@ -1,8 +0,0 @@
.tabbar.with-inkbar {
.inkbar {
bottom: 0;
height: 3px;
color: yellow;
}
}

0
src/components/tabbar/mixins/placement/placement.js
View File

0
src/components/tabbar/mixins/placement/placement.scss
View File

0
src/components/tabbar/mixins/placement/placement.spec.js
View File

29
src/components/tabbar/tabbar.js
View File

@ -1,29 +0,0 @@
import {Component, Template} from 'angular2/angular2';
import {Inject} from 'angular2/di';
import {Ion} from '../ion';
import {IonConfigService} from '../../config';
export var TabbarConfig = new IonConfigService();
@Component({
selector: 'ion-tabbar',
bind: {
title: 'view-title'
},
services: [TabbarConfig]
})
@Template({
inline: `<button (click)="press()">
Tabbar: {{title}} {{$config.id}}
</button>`
})
export class Tabbar extends Ion {
constructor(
config: TabbarConfig
) {
this.$config = config;
super();
}
}

81
src/components/tabs/tabs.js Normal file
View File

@ -0,0 +1,81 @@
import {NgElement, Component, Template, Parent} from 'angular2/angular2';
import {Ion} from '../ion';
@Component({
selector: 'ion-tabs'
})
@Template({
inline: `
<div class="tool-bar">
Tabs
</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>
<div class="container">
<content select="ion-tab"></content>
</div>
`
})
export class Tabs extends Ion {
constructor(@NgElement() ele:NgElement) {
ele.domElement.classList.add('view');
ele.domElement.classList.add('tabs-container');
this.tabs = [];
}
add(tab) {
this.tabs.push(tab);
tab.show(this.tabs.length === 1);
}
}
@Component({
selector: 'ion-tab',
bind: {
tabTitle: 'tab-title'
}
})
@Template({
inline: `
<div class="container">
<div class="content">
<div class="scroll-content">
<content></content>
</div>
</div>
</div>
`
})
export class Tab extends Ion {
constructor(@NgElement() ele:NgElement, @Parent() tabs: Tabs) {
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');
}
}

2
src/components/tabs/tabs.scss Normal file
View File

@ -0,0 +1,2 @@

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

@ -37,6 +37,7 @@ export class View extends Ion {
}) })
export class Content extends Ion { export class Content extends Ion {
constructor(@NgElement() ele:NgElement) { constructor(@NgElement() ele:NgElement) {
console.log('content!')
ele.domElement.classList.add('content'); ele.domElement.classList.add('content');
} }
} }