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

toolbarz

Browse Source
This commit is contained in:
Adam Bradley
2015-03-21 20:56:50 -05:00
parent 7385eba03f
commit f17c313e98
5 changed files with 39 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
playground/views/main.html
View File

@ -1,10 +1,10 @@
<ion-view>
<!-- <ion-view-title>
<ion-view-title>
ele Title
</ion-view-title>
<ion-view-buttons side="primary">
<!-- <ion-view-buttons side="primary">
<button>p1</button>
<button>p2</button>
<button>p3</button>

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

@ -24,4 +24,4 @@
"../aside/aside",
"../switch/switch",
"../tabs/tabs",
"../tool-bar/tool-bar";
"../toolbar/toolbar";

36
src/components/toolbar/toolbar.js Normal file
View File

@ -0,0 +1,36 @@
import {NgElement, Component, Template} from 'angular2/angular2'
import {Ion} from '../ion'
@Component({
selector: 'ion-toolbar'
})
@Template({
inline: `
<div class="bar bar-android">
<div class="bar-items">
<div class="back-button">
<div class="back-button-icon">&lt;</div>
<div class="back-button-text">
<div class="back-default">Back</div>
<div class="back-title"></div>
</div>
</div>
<div class="title">
<div class="inner-title">
{{ title }}
</div>
</div>
<div class="bar-primary-item" style="background:red">
PRIMARY
</div>
<div class="spacer"></div>
<div class="bar-secondary-item" style="background:green">
SECONDARY
</div>
</div>
</div>`
})
export class ToolBar {
constructor() {
}
}

0
src/components/tool-bar/tool-bar.scss → src/components/toolbar/toolbar.scss
View File

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

@ -1,58 +0,0 @@
import {NgElement, Component, Template} from 'angular2/angular2';
import {Ion} from '../ion';
@Component({
selector: 'ion-view',
bind: {
title: 'view-title'
}
})
@Template({
inline: `
<div class="bar bar-android2">
<div class="bar-items">
<div class="back-button">
<div class="back-button-icon">&lt;</div>
<div class="back-button-text">
<div class="back-default">Back</div>
<div class="back-title"></div>
</div>
</div>
<div class="title">
<div class="inner-title">
Create hybrid mobile apps with the web technologies you love. Free and open source, Ionic offers a library of mobile-optimized HTML, CSS and JS components, gestures, and tools for building highly interactive apps. Built with Sass and optimized for AngularJS.
</div>
</div>
<div class="bar-primary-item" style="background:red">
PRIMARY
</div>
<div class="spacer"></div>
<div class="bar-secondary-item" style="background:green">
SECONDARY
</div>
</div>
</div>
<div class="container">
<content></content>
</div>`
})
export class View extends Ion {
constructor(@NgElement() ele:NgElement) {
ele.domElement.classList.add('view');
}
}
// <div class="title">
// <div class="inner-title">
// {{title}}
// <content select="ion-view-title"></content>
// </div>
// </div>
// <div class="tool-buttons buttons-primary">
// <content select="ion-view-buttons[side='primary']"></content>
// </div>
// <div class="tool-buttons buttons-secondary">
// <content select="ion-view-buttons[side='secondary']"></content>
// </div>