Slides

ionic/components/app/test/sink/index.js

@@ -17,6 +17,7 @@ import {SegmentPage} from './pages/segment'
 import {SearchBar} from './pages/search-bar'
 import {IconsPage} from './pages/ionicons'
 import {AsidePage} from './pages/aside'
+import {SlidePage} from './pages/slides'
 import {ActionMenuPage} from './pages/action-menu'
 import {ModalPage} from './pages/modal'
 
@@ -41,6 +42,7 @@ export class IonicApp {
       { title: 'Search Bar', component: SearchBar},
       { title: 'Icons', component: IconsPage },
       { title: 'Aside', component: AsidePage },
+      { title: 'Slides', component: SlidePage},
       { title: 'Action Menu', component: ActionMenuPage },
       { title: 'Modal', component: ModalPage }
     ];

ionic/components/app/test/sink/main.html

@@ -1,8 +1,5 @@
 <ion-aside #aside [content]="content">
   <ion-list inset>
-    <div class="list-header">
-      Ionic 2
-    </div>
     <ion-item *ng-for="#c of components" (^click)="openPage(aside, c)">
       {{c.title}}
     </ion-item>

ionic/components/app/test/sink/pages/slides.js

@@ -0,0 +1,51 @@
+import {NgFor, DynamicComponentLoader, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
+import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {Slides, Slide, SlidePager, List, Item, ActionMenu, Modal, ModalRef,
+  NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+
+@Component({
+  selector: 'ion-view'
+})
+@View({
+  template: `
+  <ion-navbar *navbar><ion-title>Cards</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>
+      <ion-slide style="background-color: blue">
+        <h2>Page 1</h2>
+      </ion-slide>
+      <ion-slide style="background-color: yellow">
+        <h2>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: cyan">
+        <h2>Page 5</h2>
+      </ion-slide>
+      <ion-pager>
+      </ion-pager>
+    </ion-slides>
+  </ion-content>
+  `,
+  directives: [NavbarTemplate, Navbar, Content, Slides, Slide, SlidePager]
+})
+export class SlidePage {
+  constructor() {
+  }
+}