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

view this

Browse Source
This commit is contained in:
Adam Bradley
2015-03-18 17:34:47 -05:00
parent c96c713574
commit 5938f0b65f
5 changed files with 115 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
playground/views/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('views/main');
</script>
</html>

15
playground/views/main.html Normal file
View File

@ -0,0 +1,15 @@
<ion-view [view-title]="attrTitle + '!!!'">
<ion-nav-title>
NAV Title <button (click)></button>
</ion-nav-title>
<!-- <ion-nav-buttons side="left">
<button>left</button>
</ion-nav-buttons> -->
<ion-content>
CONTENT!!
</ion-content>
</ion-view>

18
playground/views/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';
@Component({ selector: '[ion-app]' })
@Template({
url: 'main.html',
directives: [View, Content]
})
class IonicApp {
constructor() {
console.log('IonicApp Start');
this.attrTitle = 'banana title';
}
}
bootstrap(IonicApp)

3
src/components/app/_scaffolding.scss
View File

@ -1,3 +1,6 @@
html {
height: 100%;
}
[ion-app] { [ion-app] {
@include flex-display(); @include flex-display();

42
src/components/view/view.js Normal file
View File

@ -0,0 +1,42 @@
import {NgElement, Component, Template} from 'angular2/angular2';
import {Ion} from '../ion';
@Component({
selector: 'ion-view',
bind: {
title: 'view-title'
}
})
@Template({
inline: `
<div class="container">
<div class="tool-bar">
<div class="title">
{{title}}
<content select="ion-nav-title"></content>
</div>
</div>
<content></content>
</div>`
})
export class View extends Ion {
constructor(@NgElement() ele:NgElement) {
ele.domElement.classList.add('view');
}
}
@Component({
selector: 'ion-content'
})
@Template({
inline: `
<div class="scroll-content">
<content></content>
</div>`
})
export class Content extends Ion {
constructor(@NgElement() ele:NgElement) {
ele.domElement.classList.add('content');
}
}