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

test(slides): add navigation to the intro test

Browse Source
This commit is contained in:
Brandy Carney
2016-02-13 14:03:33 -05:00
parent 80cbd32abc
commit ebeb940105
2 changed files with 73 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
ionic/components/slides/test/intro/index.ts
View File

@@ -1,11 +1,44 @@
import {App} from '../../../../../ionic/ionic';
import {App, Page, NavController} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
template: '<ion-nav [root]="rootPage"></ion-nav>'
})
class MyApp {
constructor() {
this.rootPage = IntroPage;
}
}
@Page({
templateUrl: 'main.html'
})
class IntroPage {
constructor(nav: NavController) {
this.nav = nav;
}
onSlideChanged(slider) {
console.log('Slide changed', slider);
}
skip() {
this.nav.push(MainPage);
}
}
@Page({
template: `
<ion-navbar *navbar>
<ion-title>Slides</ion-title>
</ion-navbar>
<ion-content padding>
<h1>Another Page</h1>
</ion-content>
`
})
class MainPage {
}

77
ionic/components/slides/test/intro/main.html
View File

@@ -1,3 +1,41 @@
<ion-navbar *navbar>
<ion-buttons end>
<button (click)="skip()">
Skip
</button>
</ion-buttons>
<ion-title>Slides</ion-title>
</ion-navbar>
<ion-content>
<ion-slides pager (change)="onSlideChanged($event)" loop="true">
<ion-slide>
<h3>Thank you for choosing the Awesome App!</h3>
<div id="logo">
<img src="appicon.png" style="max-width: 128px">
</div>
<p>
The number one app for everything awesome.
</p>
</ion-slide>
<ion-slide>
<h3>Using Awesome</h3>
<div id="list">
<h5>Just three steps:</h5>
<ol>
<li>Be awesome</li>
<li>Stay awesome</li>
<li>There is no step 3</li>
</ol>
</div>
</ion-slide>
<ion-slide>
<h3>Any questions?</h3>
</ion-slide>
</ion-slides>
</ion-content>
<style>
.slide {
color: #000;
@@ -29,42 +67,3 @@
display:none;
}
</style>
<ion-navbar *navbar>
<ion-buttons start>
<button>
Skip
</button>
</ion-buttons>
<ion-buttons end>
<button (click)="next()">
Next
</button>
</ion-buttons>
<ion-title>Grid Icons</ion-title>
</ion-navbar>
<ion-slides pager (change)="onSlideChanged($event)" loop="true" autoplay="true">
<ion-slide>
<h3>Thank you for choosing the Awesome App!</h3>
<div id="logo">
<img src="appicon.png" style="max-width: 128px">
</div>
<p>
The number one app for everything awesome.
</p>
</ion-slide>
<ion-slide>
<h3>Using Awesome</h3>
<div id="list">
<h5>Just three steps:</h5>
<ol>
<li>Be awesome</li>
<li>Stay awesome</li>
<li>There is no step 3</li>
</ol>
</div>
</ion-slide>
<ion-slide>
<h3>Any questions?</h3>
</ion-slide>
</ion-slides>