javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(demos): move app tests to demos

Browse Source
This commit is contained in:
Tim Lancina
2015-09-09 15:49:06 -05:00
parent 347c8877a4
commit 50a4549e8e
74 changed files with 111 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

58
demos/sink/pages/slides.ts Normal file
View File

@ -0,0 +1,58 @@
import {IonicApp, IonicView} from 'ionic/ionic';
import {SinkPage} from '../sink-page';
@IonicView({
template: `
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Slides</ion-title></ion-navbar>
<ion-content class="padding">
<h2>Slides</h2>
<p>
Slides have a set of pages that can be swiped between.
</p>
<p>
Slides are perfect for making image slideshows,
swipe tutorials, or document viewers.
</p>
<ion-slides style="height: 300px">
<ion-slide style="background-color: #387ef5">
<h2 style="color: #fff">Page 1</h2>
</ion-slide>
<ion-slide style="background-color: rgb(245, 255, 96)">
<h2 style="color: #222;"">Page 2</h2>
</ion-slide>
<ion-slide style="background-color: pink">
<h2>Page 3</h2>
</ion-slide>
<ion-slide style="background-color: red">
<h2>Page 4</h2>
</ion-slide>
<ion-slide style="background-color: rgb(1, 157, 157)">
<h2>Page 5</h2>
</ion-slide>
<ion-pager>
</ion-pager>
</ion-slides>
</ion-content>
<style>
.slide {
display: flex !important;
align-items: center;
justify-content: center;
}
.slide h2 {
color: #fff;
text-transform: uppercase;
letter-spacing: 2px;
font-size: 16px;
}
</style>
`
})
export class SlidePage extends SinkPage {
constructor(app: IonicApp) {
super(app);
}
}