mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
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);
|
|
}
|
|
}
|