mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
working examples
This commit is contained in:
Andrew
@ -1,26 +0,0 @@
|
||||
var exampleReady = function() {
|
||||
console.error('Implement exampleReady to bootstrap your app.\n' +
|
||||
'For example: `function exampleReady() { System.import("./main"); }`');
|
||||
};
|
||||
|
||||
(function() {
|
||||
|
||||
var loaded = 0;
|
||||
var scripts = [
|
||||
'/jspm-config.js',
|
||||
'https://cdn.rawgit.com/angular/zone.js/v0.4.1/zone.js',
|
||||
'https://cdn.rawgit.com/angular/zone.js/v0.4.1/long-stack-trace-zone.js',
|
||||
'https://cdn.rawgit.com/robwormald/50b6b855a6ce21af6967/raw/aa9e1c0eed78defd890ccfcc50c4b4648d4d891d/angular2.js'
|
||||
];
|
||||
|
||||
scripts.forEach(function(src) {
|
||||
var script = document.createElement('script');
|
||||
script.async = true;
|
||||
script.onload = function() {
|
||||
if (++loaded == scripts.length) exampleReady();
|
||||
};
|
||||
document.head.appendChild(script);
|
||||
script.src = src;
|
||||
});
|
||||
|
||||
})();
|
||||
21
gulpfile.js
21
gulpfile.js
@ -12,13 +12,14 @@ var concat = require('gulp-concat');
|
||||
var debug = require('gulp-debug');
|
||||
var del = require('del');
|
||||
var exec = require('gulp-exec');
|
||||
var gulpif = require('gulp-if');
|
||||
var karma = require('karma').server;
|
||||
var plumber = require('gulp-plumber');
|
||||
var rename = require('gulp-rename');
|
||||
var sass = require('gulp-sass');
|
||||
var shell = require('gulp-shell');
|
||||
var traceur = require('gulp-traceur');
|
||||
var template = require('gulp-template');
|
||||
var wrap = require('gulp-wrap');
|
||||
|
||||
gulp.task('default', ['js', 'html', 'sass', 'libs', 'playgroundJs', 'playgroundFiles']);
|
||||
|
||||
@ -39,10 +40,6 @@ gulp.task('watch', ['default'], function() {
|
||||
console.log('Serving `dist` on http://localhost:' + port);
|
||||
});
|
||||
|
||||
gulp.task('lint', shell.task([
|
||||
'./node_modules/.bin/standard'
|
||||
]));
|
||||
|
||||
gulp.task('karma', function() {
|
||||
return karma.start({ configFile: __dirname + '/scripts/test/karma.conf.js' });
|
||||
});
|
||||
@ -139,3 +136,17 @@ gulp.task('angular2', function () {
|
||||
.pipe(gulp.dest('dist/lib'));
|
||||
});
|
||||
|
||||
gulp.task('examples', function() {
|
||||
var mainFileRegex = /(main|index).html$/;
|
||||
return gulp.src('src/components/**/examples/**/*')
|
||||
.pipe(gulpif(mainFileRegex, wrap({
|
||||
src: 'scripts/examples/index.template.html'
|
||||
})))
|
||||
.pipe(gulpif(mainFileRegex, rename({
|
||||
basename: 'index.html'
|
||||
})))
|
||||
.pipe(rename(function(file) {
|
||||
file.dirname = file.dirname.replace('/examples/', '/');
|
||||
}))
|
||||
.pipe(gulp.dest('dist/examples/'));
|
||||
});
|
||||
|
||||
@ -1,12 +1,12 @@
|
||||
System.config({
|
||||
traceurOptions: {
|
||||
annotations: true,
|
||||
types: true,
|
||||
memberVariables: true
|
||||
},
|
||||
"paths": {
|
||||
"*": "*.js",
|
||||
"github:*": "/jspm_packages/github/*.js"
|
||||
},
|
||||
"traceurOptions": {
|
||||
"annotations": true,
|
||||
"types": true,
|
||||
"memberVariables": true
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
@ -16,7 +16,7 @@
|
||||
"gulp-sass": "^1.3.3",
|
||||
"gulp-shell": "^0.4.0",
|
||||
"gulp-traceur": "0.16.*",
|
||||
"gulp-wrap": "~0.11.0",
|
||||
"gulp-wrap": "^0.11.0",
|
||||
"karma": "^0.12.31",
|
||||
"serve-static": "~1.8.1",
|
||||
"systemjs": "^0.11.3",
|
||||
@ -27,7 +27,6 @@
|
||||
"es6-module-loader": "~0.11.0",
|
||||
"event-stream": "^3.3.0",
|
||||
"gulp-template": "^3.0.0",
|
||||
"hammerjs": "^2.0.4",
|
||||
"jasmine-core": "^2.2.0",
|
||||
"karma-chrome-launcher": "^0.1.7",
|
||||
"karma-jasmine": "^0.3.5",
|
||||
|
||||
@ -1,33 +1,22 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head lang="en">
|
||||
<link rel="stylesheet" href="/css/ionic.css">
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<!-- 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>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
<title>Ionic 2 Example</title>
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no" />
|
||||
<link rel="stylesheet" href="/dist/css/ionic.css" />
|
||||
<script src="/jspm_packages/system.js"></script>
|
||||
<script src="/jspm-config.js"></script>
|
||||
<script src="https://cdn.rawgit.com/angular/zone.js/v0.4.1/zone.js"></script>
|
||||
<script src="https://cdn.rawgit.com/angular/zone.js/v0.4.1/long-stack-trace-zone.js"></script>
|
||||
<script src="https://cdn.rawgit.com/robwormald/50b6b855a6ce21af6967/raw/aa9e1c0eed78defd890ccfcc50c4b4648d4d891d/angular2.js"></script>
|
||||
</head>
|
||||
<body ion-app>
|
||||
<body>
|
||||
<%= contents %>
|
||||
</body>
|
||||
<script>
|
||||
System.register({
|
||||
map: {
|
||||
'ionic': '/ionic'
|
||||
}
|
||||
});
|
||||
System.import('main.js'):
|
||||
System.import('./main');
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
1
src/components.js
Normal file
1
src/components.js
Normal file
@ -0,0 +1 @@
|
||||
export * from './components/aside/aside';
|
||||
0
src/components/app/app.js
Normal file
0
src/components/app/app.js
Normal file
32
src/components/aside/examples/basic/index.html
Normal file
32
src/components/aside/examples/basic/index.html
Normal file
@ -0,0 +1,32 @@
|
||||
<aside-app>
|
||||
<ion-aside-parent>
|
||||
<ion-aside side="left">
|
||||
LEFT
|
||||
<p>...</p>
|
||||
<p>...</p>
|
||||
<p>...</p>
|
||||
Side menu!
|
||||
</ion-aside>
|
||||
<ion-aside side="right">
|
||||
RIGHT
|
||||
<p>...</p>
|
||||
<p>...</p>
|
||||
<p>...</p>
|
||||
Side menu!
|
||||
</ion-aside>
|
||||
<ion-aside side="top">
|
||||
TOP
|
||||
<p>...</p>
|
||||
<p>...</p>
|
||||
<p>...</p>
|
||||
Side menu!
|
||||
</ion-aside>
|
||||
<ion-aside side="bottom">
|
||||
BOTTOM
|
||||
<p>...</p>
|
||||
<p>...</p>
|
||||
<p>...</p>
|
||||
Side menu!
|
||||
</ion-aside>
|
||||
</ion-aside-parent>
|
||||
</aside-app>
|
||||
14
src/components/aside/examples/basic/main.js
Normal file
14
src/components/aside/examples/basic/main.js
Normal file
@ -0,0 +1,14 @@
|
||||
import {Aside, AsideParent} from 'ionic2/components/aside/aside';
|
||||
import {Template, Component, bootstrap} from 'angular2/angular2';
|
||||
|
||||
@Component({
|
||||
selector: 'aside-app'
|
||||
})
|
||||
@Template({
|
||||
// Inlined version of main.html
|
||||
inline: `<content></content>`,
|
||||
directives: [Aside, AsideParent]
|
||||
})
|
||||
class AsideApp {}
|
||||
|
||||
bootstrap(AsideApp);
|
||||
@ -1,46 +0,0 @@
|
||||
<ion-aside-parent>
|
||||
<ion-aside side="left">
|
||||
LEFT
|
||||
<p>...</p>
|
||||
<p>...</p>
|
||||
<p>...</p>
|
||||
Side menu!
|
||||
</ion-aside>
|
||||
<ion-aside side="right">
|
||||
RIGHT
|
||||
<p>...</p>
|
||||
<p>...</p>
|
||||
<p>...</p>
|
||||
Side menu!
|
||||
</ion-aside>
|
||||
<ion-aside side="top">
|
||||
TOP
|
||||
<p>...</p>
|
||||
<p>...</p>
|
||||
<p>...</p>
|
||||
Side menu!
|
||||
</ion-aside>
|
||||
<ion-aside side="bottom">
|
||||
BOTTOM
|
||||
<p>...</p>
|
||||
<p>...</p>
|
||||
<p>...</p>
|
||||
Side menu!
|
||||
</ion-aside>
|
||||
<div class="content">
|
||||
<button (click)="showModal()">Show Modal</button>
|
||||
|
||||
<ion-switch></ion-switch>
|
||||
<!--
|
||||
<ion-modal>
|
||||
<h2>I'm a modal!</h2>
|
||||
</ion-modal>
|
||||
-->
|
||||
<button (click)="showModal()">Show Modal</button>
|
||||
<!--
|
||||
<ion-modal>
|
||||
<h2>I'm a modal!</h2>
|
||||
</ion-modal>
|
||||
-->
|
||||
</div>
|
||||
</ion-aside-parent>
|
||||
Reference in New Issue
Block a user