javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

demo: make examples require no build-step. more in README

Browse Source
This commit is contained in:
Andrew
2015-03-21 18:42:36 -06:00
parent 7f5193f009
commit 7385eba03f
18 changed files with 189 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
playground/basic-example/index.html
View File

@@ -1,46 +1,23 @@
<!--
EVERYTHING in index.html file will change
Don't feel like you have to learn all of this boilerplate.
It's not important and will change.
-->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
<link rel="stylesheet" href="/css/ionic.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>
<script src="/lib/hammer.js"></script>
<link rel="stylesheet" href="/dist/css/ionic.css" />
<script src="/jspm_packages/system.js"></script>
<script src="/example-bootstrap.js"></script>
</head>
<body>
<div playground-main>
Loading...
</div>
<body my-app>
Loading...
</body>
<script>
function exampleReady() {
System.import('./main');
}
</script>
</body>
<!-- Application bootstrap logic -->
<script>
System.baseURL = 'http://localhost:9000/';
System.register({
map: {
'ionic': '../ionic'
}
});
System.import('basic-example/main');
</script>
</html>

59
playground/basic-example/main.html
View File

@@ -1,31 +1,4 @@
<ion-aside-parent>
<ion-aside side="right">
Hello ...
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
Side menu!
</ion-aside>
<ion-aside side="bottom">
Hello ...
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
Side menu!
</ion-aside>
<ion-aside side="top">
Hello ...
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
<p>...</p>
Side menu!
</ion-aside>
<ion-aside side="left">
Hello ...
<p>...</p>
@@ -35,14 +8,36 @@
<p>...</p>
Side menu!
</ion-aside>
<!-- <ion-aside side="bottom"> -->
<!-- Hello ... -->
<!-- <p>...</p> -->
<!-- <p>...</p> -->
<!-- <p>...</p> -->
<!-- <p>...</p> -->
<!-- <p>...</p> -->
<!-- Side menu! -->
<!-- </ion-aside> -->
<!-- <ion-aside side="top"> -->
<!-- Hello ... -->
<!-- <p>...</p> -->
<!-- <p>...</p> -->
<!-- <p>...</p> -->
<!-- <p>...</p> -->
<!-- <p>...</p> -->
<!-- Side menu! -->
<!-- </ion-aside> -->
<!-- <ion-aside side="left"> -->
<!-- Hello ... -->
<!-- <p>...</p> -->
<!-- <p>...</p> -->
<!-- <p>...</p> -->
<!-- <p>...</p> -->
<!-- <p>...</p> -->
<!-- Side menu! -->
<!-- </ion-aside> -->
<div class="content">
<ion-tabbar view-title="My Tabs"></ion-tabbar>
<ion-tabbar view-title="Tabs 2"></ion-tabbar>
<ion-tabbar view-title="Tabs 4"></ion-tabbar>
<button (click)="showModal()">Show Modal</button>
<ion-switch></ion-switch>
<!--
<ion-modal>

4
playground/basic-example/main.js
View File

@@ -1,8 +1,8 @@
import {bootstrap} from 'angular2/core';
import {Component, Template} from 'angular2/angular2';
import {Aside, AsideParent} from 'ionic/components';
import {Aside, AsideParent} from 'ionic2/components';
@Component({ selector: '[playground-main]' })
@Component({ selector: '[my-app]' })
@Template({
url: 'main.html',
directives: [Aside, AsideParent]