mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
@@ -1,47 +0,0 @@
|
||||
import {App, Animation} from 'ionic/ionic';
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class IonicApp {
|
||||
|
||||
constructor() {
|
||||
|
||||
this.animation = new Animation();
|
||||
this.animation
|
||||
.duration(2000)
|
||||
|
||||
var ionitronSpin = new Animation(document.querySelector('#ionitron'));
|
||||
ionitronSpin
|
||||
.from('transform', 'rotate(0deg)')
|
||||
.to('transform', 'rotate(360deg)')
|
||||
|
||||
this.animation.add(ionitronSpin);
|
||||
|
||||
this.animation.onReady(animation => {
|
||||
console.log('onReady', animation);
|
||||
});
|
||||
|
||||
this.animation.onPlay(animation => {
|
||||
console.log('onPlay', animation);
|
||||
});
|
||||
|
||||
this.animation.onFinish(animation => {
|
||||
console.log('onFinish', animation);
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
play() {
|
||||
this.animation.play();
|
||||
}
|
||||
|
||||
pause() {
|
||||
this.animation.pause();
|
||||
}
|
||||
|
||||
progress(ev) {
|
||||
this.animation.progress( parseFloat(ev.srcElement.value) );
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
<html>
|
||||
<head>
|
||||
<title>Animations</title>
|
||||
<style>
|
||||
#ionitron {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
top: 45%;
|
||||
margin-top: -50px;
|
||||
left: 50%;
|
||||
margin-left: -50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<img src="http://ionicframework.com/present-ionic/slides/img/me.png" id="ionitron">
|
||||
|
||||
<div style="position:absolute; bottom: 0; display:inline;">
|
||||
<button primary (click)="pause($event)">
|
||||
Pause
|
||||
<ion-icon name="pause"></ion-icon>
|
||||
</button>
|
||||
<button secondary (click)="play($event)">
|
||||
Play
|
||||
<ion-icon name="play"></ion-icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,21 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<!-- https://www.chromium.org/developers/design-documents/chromium-graphics/how-to-get-gpu-rasterization -->
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
|
||||
|
||||
<link href="../../css/ionic.css" rel="stylesheet">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<ion-app>
|
||||
<ion-loading-icon></ion-loading-icon>
|
||||
</ion-app>
|
||||
|
||||
<script src="../../js/ionic.bundle.js"></script>
|
||||
|
||||
<script>System.import("index");</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@@ -1,11 +0,0 @@
|
||||
import {App} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
|
||||
class DemoApp {
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
@@ -1,62 +0,0 @@
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-title>Cards</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-content class="outer-content" style="background:#eee">
|
||||
|
||||
<ion-card>
|
||||
|
||||
<ion-card-header>
|
||||
Card Header
|
||||
</ion-card-header>
|
||||
|
||||
<ion-card-content>
|
||||
Keep close to Nature's heart... and break clear away, once in awhile,
|
||||
and climb a mountain or spend a week in the woods. Wash your spirit clean.
|
||||
</ion-card-content>
|
||||
|
||||
</ion-card>
|
||||
|
||||
|
||||
<ion-card>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="pin" item-left></ion-icon>
|
||||
ion-iteam in a card, icon left, button right
|
||||
<button outline item-right>View</button>
|
||||
</ion-item>
|
||||
|
||||
<ion-card-content>
|
||||
This is content, without any paragraph or header tags,
|
||||
within an ion-card-content element.
|
||||
</ion-card-content>
|
||||
|
||||
</ion-card>
|
||||
|
||||
|
||||
<ion-card>
|
||||
|
||||
<a ion-item href="#">
|
||||
<ion-icon name="wifi" item-left></ion-icon>
|
||||
Card Link Item 1
|
||||
</a>
|
||||
|
||||
<a ion-item href="#">
|
||||
<ion-icon name="wine" item-left></ion-icon>
|
||||
Card Link Item 2
|
||||
</a>
|
||||
|
||||
<button ion-item>
|
||||
<ion-icon name="warning" item-left></ion-icon>
|
||||
Card Button Item 1
|
||||
</button>
|
||||
|
||||
<button ion-item>
|
||||
<ion-icon name="walk" item-left></ion-icon>
|
||||
Card Button Item 2
|
||||
</button>
|
||||
|
||||
</ion-card>
|
||||
|
||||
</ion-content>
|
||||
@@ -1,27 +0,0 @@
|
||||
import {Component} from 'angular2/core';
|
||||
import {Control, ControlGroup} from 'angular2/common';
|
||||
|
||||
import {IonicApp, App} from 'ionic/ionic';
|
||||
import {Translate, TranslatePipe} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html',
|
||||
pipes: [TranslatePipe]
|
||||
})
|
||||
class MyApp {
|
||||
constructor(app: IonicApp, trans: Translate) {
|
||||
this.app = app;
|
||||
this.trans = trans;
|
||||
|
||||
this.trans.translations('de', {
|
||||
'Location': 'lage'
|
||||
});
|
||||
|
||||
console.log(this.trans.translate('Location'));
|
||||
console.log(this.trans.translate('Location', 'de'));
|
||||
//this.trans.setLanguage('de');
|
||||
console.log(this.trans.translate('Location'));
|
||||
|
||||
}
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
<ion-view>
|
||||
<ion-content>
|
||||
Hello! What is your {{ 'Location' | translate }}
|
||||
</ion-content>
|
||||
</ion-view>
|
||||
@@ -1,13 +0,0 @@
|
||||
import {App} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
|
||||
class DemoApp {
|
||||
constructor() {
|
||||
this.homeIcon = 'home';
|
||||
this.isActive = false;
|
||||
}
|
||||
}
|
||||
@@ -1,74 +0,0 @@
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-title>Icons</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-content>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<ion-list-header>
|
||||
Favorite Icons
|
||||
</ion-list-header>
|
||||
|
||||
<ion-toggle>
|
||||
<ion-icon name="wifi" item-left></ion-icon>
|
||||
Wifi
|
||||
</ion-toggle>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="heart" item-left></ion-icon>
|
||||
Affection
|
||||
<ion-note item-right>
|
||||
Very Little
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="home" item-left></ion-icon>
|
||||
Home
|
||||
<ion-note item-right>
|
||||
Where the heart is
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-toggle checked="true">
|
||||
<ion-icon name="color-wand" item-left></ion-icon>
|
||||
Magic
|
||||
</ion-toggle>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="star" item-left></ion-icon>
|
||||
Star status
|
||||
<ion-note item-right>
|
||||
Super
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="pizza" item-left></ion-icon>
|
||||
Pizza
|
||||
<ion-note item-right>
|
||||
Always
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="beer" item-left></ion-icon>
|
||||
Beer
|
||||
<ion-note item-right>
|
||||
Yes Plz
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<ion-icon name="wine" item-left></ion-icon>
|
||||
Wine
|
||||
<ion-note item-right>
|
||||
All the time
|
||||
</ion-note>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
|
||||
</ion-content>
|
||||
@@ -1,104 +0,0 @@
|
||||
import {Component, Directive} from 'angular2/core';
|
||||
|
||||
import {App, ActionSheet, IonicApp, IonicView, Register} from 'ionic/ionic';
|
||||
|
||||
@IonicView({
|
||||
template: '<ion-navbar *navbar primary>' +
|
||||
'<ion-title>Heading</ion-title>' +
|
||||
'<button menuToggle="menu">' +
|
||||
'<ion-icon name="menu"></ion-icon>' +
|
||||
'</button>' +
|
||||
'<ion-buttons end>' +
|
||||
'<button><ion-icon md="ion-android-search" ios="ion-ios-search-strong"></i></button>' +
|
||||
'<button (click)="showMoreMenu()"><i class="icon ion-android-more-vertical"></i></button>' +
|
||||
'</ion-buttons>' +
|
||||
'</ion-navbar>' +
|
||||
'<ion-content>' +
|
||||
`
|
||||
<button md-ripple>Cleeek</button>
|
||||
<ion-list>
|
||||
<ion-item>
|
||||
<h3>All Genres</h3>
|
||||
<h4>Jan 17 2015</h4>
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Alternative
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Blues
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
<div padding>
|
||||
<ion-card>
|
||||
<ion-card-header>
|
||||
New Post
|
||||
</ion-card-header>
|
||||
<div class="card-content">
|
||||
Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean.
|
||||
</div>
|
||||
<img src="http://ionic-io-assets.s3.amazonaws.com/images/p4.png">
|
||||
<ion-item>
|
||||
Posted 5 days ago
|
||||
</ion-item>
|
||||
</ion-card>
|
||||
</div>
|
||||
|
||||
` +
|
||||
'</ion-content>'
|
||||
})
|
||||
export class FirstPage {
|
||||
constructor(app: IonicApp, actionSheet: ActionSheet) {
|
||||
this.app = app;
|
||||
this.actionSheet = actionSheet;
|
||||
}
|
||||
showMoreMenu() {
|
||||
this.actionSheet.open({
|
||||
buttons: [
|
||||
{ icon: 'ion-android-share-alt', text: 'Share' },
|
||||
{ icon: 'ion-arrow-move', text: 'Move' }
|
||||
],
|
||||
destructiveText: 'Delete',
|
||||
titleText: 'Modify your album',
|
||||
cancelText: 'Cancel',
|
||||
cancel: function() {
|
||||
console.log('Canceled');
|
||||
},
|
||||
destructiveButtonClicked: () => {
|
||||
console.log('Destructive clicked');
|
||||
},
|
||||
buttonClicked: function(index) {
|
||||
console.log('Button clicked', index);
|
||||
if(index == 1) { return false; }
|
||||
return true;
|
||||
}
|
||||
}).then(actionSheetRef => {
|
||||
this.actionSheetRef = actionSheetRef;
|
||||
});
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@App({
|
||||
template: `<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700,500' rel='stylesheet' type='text/css'>
|
||||
<ion-menu id="menu" side="left" [content]="content">
|
||||
<ion-toolbar primary><ion-title>Menu</ion-title></ion-toolbar>
|
||||
<ion-list>
|
||||
<ion-item>Your Profile</ion-item>
|
||||
<ion-item>Playlists</ion-item>
|
||||
<ion-item>Artists</ion-item>
|
||||
</ion-list>
|
||||
</ion-menu>
|
||||
<ion-nav #content></ion-nav>`,
|
||||
routes: [
|
||||
{
|
||||
path: '/first',
|
||||
component: FirstPage,
|
||||
root: true
|
||||
}
|
||||
]
|
||||
})
|
||||
class MyApp {
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
import {Component} from 'angular2/core';
|
||||
import {Control, ControlGroup} from 'angular2/common';
|
||||
|
||||
import {IonicApp, App} from 'ionic/ionic';
|
||||
|
||||
import {Camera, Geolocation, Vibration, Battery, Device, Events} from 'ionic/ionic';
|
||||
|
||||
import {CameraPage} from 'pages/camera';
|
||||
import {BatteryPage} from 'pages/battery';
|
||||
import {ContactsPage} from 'pages/contacts';
|
||||
import {DevicePage} from 'pages/device';
|
||||
import {DeviceMotionPage} from 'pages/device-motion';
|
||||
import {DeviceOrientationPage} from 'pages/device-orientation';
|
||||
import {DialogsPage} from 'pages/dialogs';
|
||||
import {GeolocationPage} from 'pages/geolocation';
|
||||
import {StatusBarPage} from 'pages/statusbar';
|
||||
import {VibrationPage} from 'pages/vibration';
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class MyApp {
|
||||
constructor(app: IonicApp, events: Events) {
|
||||
this.app = app;
|
||||
|
||||
console.log('Events', events);
|
||||
|
||||
let handler = (user) => {
|
||||
console.log('User created', user);
|
||||
return {
|
||||
what: 'what'
|
||||
}
|
||||
}
|
||||
let handler2 = (user) => {
|
||||
console.log('2User created', user);
|
||||
return {
|
||||
things: 'yes'
|
||||
}
|
||||
}
|
||||
|
||||
events.subscribe('user:created', handler);
|
||||
events.subscribe('user:created', handler2);
|
||||
|
||||
setInterval(() => {
|
||||
var results = events.publish('user:created', {
|
||||
name: 'Max Lynch',
|
||||
id: 1
|
||||
})
|
||||
console.log('Got results', results);
|
||||
}, 2000);
|
||||
|
||||
setTimeout(() => {
|
||||
events.unsubscribe('user:created');
|
||||
console.log(events.channels);
|
||||
}, 6000);
|
||||
|
||||
this.firstPage = CameraPage;
|
||||
|
||||
this.plugins = [
|
||||
{title: 'Camera', page: CameraPage},
|
||||
{title: 'Device', page: DevicePage},
|
||||
{title: 'Device Motion', page: DeviceMotionPage},
|
||||
{title: 'Device Orientation', page: DeviceOrientationPage},
|
||||
{title: 'Dialogs', page: DialogsPage},
|
||||
{title: 'Geolocation', page: GeolocationPage},
|
||||
{title: 'Contacts', page: ContactsPage},
|
||||
{title: 'Battery', page: BatteryPage},
|
||||
{title: 'StatusBar', page: StatusBarPage},
|
||||
{title: 'Vibration', page: VibrationPage},
|
||||
]
|
||||
}
|
||||
|
||||
openPage(menu, page) {
|
||||
menu.close();
|
||||
|
||||
let nav = this.app.getComponent('myNav');
|
||||
nav.setRoot(page.page);
|
||||
}
|
||||
}
|
||||
@@ -1,12 +0,0 @@
|
||||
<ion-menu #menu [content]="content">
|
||||
<ion-toolbar><ion-title>Plugins</ion-title></ion-toolbar>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<button ion-item *ngFor="#p of plugins" (click)="openPage(menu, p)">
|
||||
{{p.title}}
|
||||
</button>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<ion-nav #content swipe-back-enabled="false" [root]="firstPage" id="myNav"></ion-nav>
|
||||
@@ -1,31 +0,0 @@
|
||||
import {IonicView, Battery} from 'ionic/ionic';
|
||||
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<button menuToggle>
|
||||
<ion-icon name="menu"></ion-icon>
|
||||
</button>
|
||||
<ion-title>Battery</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
<h2>Battery</h2>
|
||||
<button primary outline (click)="doBatteryStatus()">Get Status</button>
|
||||
<div *ngIf="battery">
|
||||
Battery charging: <b>{{battery.charging}}</b><br>
|
||||
Battery level: <b>{{battery.level * 100}}</b>%<br>
|
||||
Battery charging time: <b>{{battery.chargingTime}}</b>s<br>
|
||||
Battery discharging time: <b>{{battery.dischargingTime}}</b>s<br>
|
||||
</div>
|
||||
|
||||
</ion-content>
|
||||
`
|
||||
})
|
||||
export class BatteryPage {
|
||||
doBatteryStatus() {
|
||||
Battery.getStatus().then((battery) => {
|
||||
this.battery = battery;
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,32 +0,0 @@
|
||||
import {IonicView} from 'ionic/ionic';
|
||||
|
||||
import {Camera} from 'ionic/ionic';
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<button menuToggle>
|
||||
<ion-icon name="menu"></ion-icon>
|
||||
</button>
|
||||
<ion-title>Camera</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
<h2>Camera</h2>
|
||||
<button primary outline (click)="getPicture()">Get Picture</button>
|
||||
</ion-content>
|
||||
`
|
||||
})
|
||||
export class CameraPage {
|
||||
constructor() {
|
||||
|
||||
}
|
||||
getPicture() {
|
||||
Camera.getPicture({
|
||||
|
||||
}).then(data => {
|
||||
console.log('Data', data);
|
||||
}, err => {
|
||||
alert('Unable to take picture')
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -1,22 +0,0 @@
|
||||
import {IonicView} from 'ionic/ionic';
|
||||
|
||||
import {Contacts} from 'ionic/ionic';
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<button menuToggle>
|
||||
<ion-icon name="menu"></ion-icon>
|
||||
</button>
|
||||
<ion-title>Contacts</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
<h2>Contacts</h2>
|
||||
<div>
|
||||
</div>
|
||||
</ion-content>
|
||||
`
|
||||
})
|
||||
export class ContactsPage {
|
||||
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
import {IonicView, DeviceMotion} from 'ionic/ionic';
|
||||
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<button menuToggle>
|
||||
<ion-icon name="menu"></ion-icon>
|
||||
</button>
|
||||
<ion-title>Device Motion</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
<div *ngIf="accel">{{accel.x}} {{accel.y}} {{accel.z}}</div>
|
||||
</ion-content>
|
||||
`
|
||||
})
|
||||
export class DeviceMotionPage {
|
||||
constructor() {
|
||||
DeviceMotion.watchAcceleration().source.subscribe((accel) => {
|
||||
this.accel = accel.acceleration;
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
import {IonicView, DeviceOrientation} from 'ionic/ionic';
|
||||
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<button menuToggle>
|
||||
<ion-icon name="menu"></ion-icon>
|
||||
</button>
|
||||
<ion-title>Device Orientation</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
<div style="text-align: center">
|
||||
<img src="http://ionic-io-assets.s3.amazonaws.com/ionitron-avatar.png" [ng-style]="imageStyle">
|
||||
</div>
|
||||
</ion-content>
|
||||
`
|
||||
})
|
||||
export class DeviceOrientationPage {
|
||||
|
||||
constructor() {
|
||||
this.imageStyle = {
|
||||
'max-width': '100%'
|
||||
}
|
||||
|
||||
DeviceOrientation.watchHeading().source.subscribe((heading) => {
|
||||
this.imageStyle['-webkit-transform'] = 'rotate(' + heading.magneticHeading + 'deg)';
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import {IonicView, Device} from 'ionic/ionic';
|
||||
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<button menuToggle>
|
||||
<ion-icon name="menu"></ion-icon>
|
||||
</button>
|
||||
<ion-title>Device</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
<h2>Device</h2>
|
||||
<button primary outline (click)="doDevice()">Get Device</button>
|
||||
<div *ngIf="device">
|
||||
Device name: {{device.name}}
|
||||
</div>
|
||||
</ion-content>
|
||||
`
|
||||
})
|
||||
export class DevicePage {
|
||||
|
||||
doDevice() {
|
||||
this.device = Device.getDevice();
|
||||
console.log('Got device', this.device);
|
||||
}
|
||||
}
|
||||
@@ -1,34 +0,0 @@
|
||||
import {IonicView, Dialogs} from 'ionic/ionic';
|
||||
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<button menuToggle>
|
||||
<ion-icon name="menu"></ion-icon>
|
||||
</button>
|
||||
<ion-title>Dialogs</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
<h2>Dialogs</h2>
|
||||
<button primary outline (click)="doAlert()">Do Alert</button>
|
||||
<button primary outline (click)="doConfirm()">Do Confirm</button>
|
||||
<button primary outline (click)="doPrompt()">Do Prompt</button>
|
||||
</ion-content>
|
||||
`
|
||||
})
|
||||
export class DialogsPage {
|
||||
doAlert() {
|
||||
Dialogs.alert('Hello');
|
||||
}
|
||||
doConfirm() {
|
||||
Dialogs.confirm('Do you want to click that?').then((resp) => {
|
||||
console.log(resp);
|
||||
});
|
||||
}
|
||||
doPrompt() {
|
||||
Dialogs.prompt('What is your fav ice cream?').then((resp) => {
|
||||
console.log(resp);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
import {IonicView} from 'ionic/ionic';
|
||||
|
||||
import {Geolocation} from 'ionic/ionic';
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<button menuToggle>
|
||||
<ion-icon name="menu"></ion-icon>
|
||||
</button>
|
||||
<ion-title>Geolocation</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
<h2>Geolocation</h2>
|
||||
<button primary outline (click)="doGetLocation()">Get Location</button>
|
||||
<div>
|
||||
<b *ngIf="gettingLocation">Fetching location...</b>
|
||||
<b *ngIf="location">{{location.coords.latitude}}, {{location.coords.longitude}}</b>
|
||||
</div>
|
||||
<button primary outline (click)="doTrackLocation()">Track Location</button>
|
||||
<div>
|
||||
<b *ngIf="gettingTrackLocation">Fetching location...</b>
|
||||
<b *ngIf="trackLocation">{{trackLocation.coords.latitude}}, {{trackLocation.coords.longitude}}</b>
|
||||
</div>
|
||||
</ion-content>
|
||||
`
|
||||
})
|
||||
export class GeolocationPage {
|
||||
doGetLocation() {
|
||||
console.log('Getting location');
|
||||
this.gettingLocation = true;
|
||||
Geolocation.getCurrentPosition().then((pos) => {
|
||||
this.gettingLocation = false;
|
||||
console.log('Got location', pos);
|
||||
this.location = pos;
|
||||
}, (err) => {
|
||||
this.gettingLocation = false;
|
||||
console.error('Unable to get location', err);
|
||||
});
|
||||
}
|
||||
doTrackLocation() {
|
||||
this.gettingTrackLocation = true;
|
||||
Geolocation.watchPosition().source.subscribe((pos) => {
|
||||
this.gettingTrackLocation = false;
|
||||
console.log('Got location', pos);
|
||||
this.trackLocation = pos;
|
||||
}, (err) => {
|
||||
this.gettingTrackLocation = false;
|
||||
console.error('Unable to get location', pos);
|
||||
});
|
||||
}
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
import {IonicView} from 'ionic/ionic';
|
||||
|
||||
import {StatusBar} from 'ionic/ionic';
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<button menuToggle>
|
||||
<ion-icon name="menu"></ion-icon>
|
||||
</button>
|
||||
<ion-title>StatusBar</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
<h2>StatusBar</h2>
|
||||
<div>
|
||||
<button primary outline (click)="hide()">Hide</button>
|
||||
<button primary outline (click)="show()">Show</button>
|
||||
<button primary outline (click)="toggleOverlays()">Toggle Overlays</button>
|
||||
<button primary outline (click)="setStyle()">Cycle Style</button>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<input [(ngModel)]="colorHex">
|
||||
</div>
|
||||
<button primary outline (click)="setColor()">Set Color</button>
|
||||
</div>
|
||||
</ion-content>
|
||||
`
|
||||
})
|
||||
export class StatusBarPage {
|
||||
constructor() {
|
||||
this.styles = [
|
||||
StatusBar.DEFAULT,
|
||||
StatusBar.LIGHT_CONTENT,
|
||||
StatusBar.BLACK_TRANSLUCENT,
|
||||
StatusBar.BLACK_OPAQUE
|
||||
];
|
||||
this.currentStyle = 0;
|
||||
|
||||
this.colorHex = '#fff';
|
||||
}
|
||||
hide() { StatusBar.hide(); }
|
||||
show() { StatusBar.show(); }
|
||||
toggleOverlays() {
|
||||
this.doesOverlay = !!!this.doesOverlay;
|
||||
StatusBar.setOverlays(this.doesOverlay);
|
||||
}
|
||||
setStyle() {
|
||||
StatusBar.setStyle(this.styles[++this.currentStyle]);
|
||||
}
|
||||
setColor() {
|
||||
console.log('Setting color', this.colorHex);
|
||||
StatusBar.setHexColor(this.colorHex);
|
||||
}
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
import {IonicView} from 'ionic/ionic';
|
||||
|
||||
import {Vibration} from 'ionic/ionic';
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<button menuToggle>
|
||||
<ion-icon name="menu"></ion-icon>
|
||||
</button>
|
||||
<ion-title>Vibration</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
<h2>Vibration</h2>
|
||||
<button primary outline (click)="doVibrate()">Vibrate</button>
|
||||
</ion-content>
|
||||
`
|
||||
})
|
||||
export class VibrationPage {
|
||||
doVibrate() {
|
||||
Vibration.vibrate(1000);
|
||||
}
|
||||
}
|
||||
@@ -1,121 +0,0 @@
|
||||
import {App, NavController} from 'ionic/ionic';
|
||||
import {IonicView, Config, IonicApp} from 'ionic/ionic';
|
||||
import {NavParams, NavController} from 'ionic/ionic';
|
||||
|
||||
|
||||
@IonicView({
|
||||
template: '' +
|
||||
'<ion-navbar *navbar primary>' +
|
||||
'<ion-title>{{title}}</ion-title>' +
|
||||
'</ion-navbar>' +
|
||||
'<ion-content padding>' +
|
||||
'<h1>{{title}}</h1>' +
|
||||
'<p><button id="from1To2" secondary (click)="push()">(Push) Go to Second Page</button></p>' +
|
||||
'<p><button secondary [nav-push]="pushPage" [nav-params]="pushData">(Nav-Push) Go to Second Page</button></p>' +
|
||||
'<p><button danger (click)="setPages()">(setPages) Go to Third Page</button></p>' +
|
||||
'</ion-content>'
|
||||
})
|
||||
class FirstPage {
|
||||
constructor(
|
||||
nav: NavController,
|
||||
app: IonicApp,
|
||||
config: Config
|
||||
) {
|
||||
this.nav = nav;
|
||||
this.title = 'First Page';
|
||||
this.pushPage = SecondPage;
|
||||
this.pushData = {
|
||||
id: 420
|
||||
}
|
||||
}
|
||||
|
||||
setPages() {
|
||||
let items = [
|
||||
ThirdPage
|
||||
];
|
||||
this.nav.setPages(items);
|
||||
}
|
||||
|
||||
push() {
|
||||
this.nav.push(SecondPage, { id: 8675309, myData: [1,2,3,4] } );
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar secondary *navbar>
|
||||
<ion-title>{{title}}</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
<h1>Second page</h1>
|
||||
<p><button (click)="pop()">(Pop) Go back to First Page</button></p>
|
||||
<p><button id="from2To1" nav-pop>(NavPop) Go back to First Page</button></p>
|
||||
<p><button danger id="from2To3" (click)="push()">(Push) Go to Third Page</button></p>
|
||||
<p><button danger (click)="setPages()">(setPages) Go to Third Page</button></p>
|
||||
</ion-content>
|
||||
`
|
||||
})
|
||||
class SecondPage {
|
||||
constructor(
|
||||
nav: NavController,
|
||||
params: NavParams
|
||||
) {
|
||||
this.nav = nav;
|
||||
this.params = params;
|
||||
console.log('Second page params:', params);
|
||||
}
|
||||
|
||||
setPages() {
|
||||
let items = [
|
||||
FirstPage,
|
||||
ThirdPage
|
||||
];
|
||||
this.nav.setPages(items);
|
||||
}
|
||||
|
||||
pop() {
|
||||
this.nav.pop();
|
||||
}
|
||||
|
||||
push() {
|
||||
this.nav.push(ThirdPage);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar danger *navbar>
|
||||
<ion-title>Third Page Header</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
<p>
|
||||
<button secondary id="from3To2" (click)="pop()">(Pop) Go back to Second Page</button>
|
||||
</p>
|
||||
</ion-content>
|
||||
`
|
||||
})
|
||||
class ThirdPage {
|
||||
constructor(
|
||||
nav: NavController
|
||||
) {
|
||||
this.nav = nav
|
||||
}
|
||||
|
||||
pop() {
|
||||
this.nav.pop()
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
@App({
|
||||
template: '<ion-nav [root]="root"></ion-nav>'
|
||||
})
|
||||
class DemoApp {
|
||||
constructor() {
|
||||
this.root = FirstPage;
|
||||
}
|
||||
}
|
||||
@@ -1,2 +0,0 @@
|
||||
<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
|
||||
<ion-overlay></ion-overlay>
|
||||
@@ -1,53 +0,0 @@
|
||||
import {App, Page, IonicApp, Config, Platform} from 'ionic/ionic';
|
||||
import {Popup} from 'ionic/ionic';
|
||||
|
||||
@App({
|
||||
templateUrl: 'app.html'
|
||||
})
|
||||
class ApiDemoApp {
|
||||
|
||||
constructor() {
|
||||
this.rootPage = InitialPage;
|
||||
}
|
||||
}
|
||||
|
||||
@Page({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
export class InitialPage {
|
||||
constructor(popup: Popup) {
|
||||
this.popup = popup;
|
||||
this.confirmOpen = false;
|
||||
this.confirmResult = '';
|
||||
}
|
||||
|
||||
doAlert() {
|
||||
this.popup.alert({
|
||||
title: "New Friend!",
|
||||
template: "Your friend, Obi wan Kenobi, just accepted your friend request!",
|
||||
cssClass: 'my-alert'
|
||||
});
|
||||
}
|
||||
|
||||
doPrompt() {
|
||||
this.popup.prompt({
|
||||
title: "New Album",
|
||||
template: "Enter a name for this new album you're so keen on adding",
|
||||
inputPlaceholder: "Title",
|
||||
okText: "Save"
|
||||
});
|
||||
}
|
||||
|
||||
doConfirm() {
|
||||
this.confirmOpen = true;
|
||||
this.popup.confirm({
|
||||
title: "Use this lightsaber?",
|
||||
subTitle: "You can't exchange lightsabers",
|
||||
template: "Do you agree to use this lightsaber to do good across the intergalactic galaxy?",
|
||||
cancelText: "Disagree",
|
||||
okText: "Agree"
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user