feat(slides): expose more options (#9992)

* feat(slides): expose more options Closes #9988 Exposes slidesPerView and spaceBetween. Also documents how to change unexposed options * docs(slides): update advanced usage
ionic-team · Jan 12, 2017 · 2d26edb · 2d26edb
1 parent 24d0052
commit 2d26edb
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 8 deletions.
diff --git a/src/components/slides/slides.ts b/src/components/slides/slides.ts
@@ -96,6 +96,27 @@ import { ViewController } from '../../navigation/view-controller';
  * }
  * ```
  *
+ * @advanced
+ *
+ * There are several options available to create customized slides. Ionic exposes
+ * the most commonly used options as [inputs](http://learnangular2.com/inputs/).
+ * In order to use an option that isn't exposed as an input the following code
+ * should be used, where `freeMode` is the option to change:
+ *
+ * ```ts
+ * class MyPage {
+ *   @ViewChild(Slides) slides: Slides;
+ *
+ *   ngAfterViewInit() {
+ *     this.slides.freeMode = true;
+ *   }
+ * }
+ *
+ * ```
+ *
+ * To see all of the available options, take a look at the
+ * [source for slides](https://github.com/driftyco/ionic/blob/master/src/components/slides/slides.ts).
+ *
  * @demo /docs/v2/demos/src/slides/
  * @see {@link /docs/v2/components#slides Slides Component Docs}
  *
@@ -291,14 +312,25 @@ export class Slides extends Ion {
   roundLengths = false;
 
   // Slides grid
-  /**
-   * @private
-   */
-  spaceBetween = 0;
-  /**
-   * @private
-   */
-  slidesPerView: number|string = 1;
+
+  @Input()
+  get spaceBetween() {
+    return this._spaceBetween;
+  }
+  set spaceBetween(val: any) {
+    this._spaceBetween = parseInt(val, 10);
+  }
+  private _spaceBetween = 0;
+
+  @Input()
+  get slidesPerView() {
+    return this._slidesPerView;
+  }
+  set slidesPerView(val: any) {
+    this._slidesPerView = parseInt(val, 10);
+  }
+  private _slidesPerView = 1;
+
   /**
    * @private
    */
@@ -470,11 +502,15 @@ export class Slides extends Ion {
   paginationHide = false;
 
   // Resistance
+  /** @private */
   resistance = true;
+  /** @private */
   resistanceRatio = 0.85;
 
   // Progress
+  /** @private */
   watchSlidesProgress = false;
+  /** @private */
   watchSlidesVisibility = false;
 
   // Clicks
@@ -512,6 +548,7 @@ export class Slides extends Ion {
   noSwiping = true;
 
   // Callbacks
+  /** @private */
   runCallbacksOnInit = true;
 
   // Keyboard
@@ -810,7 +847,9 @@ export class Slides extends Ion {
   /** @internal */
   _zoom: SlideZoom;
 
+  /** @private */
   nextButton: HTMLElement;
+  /** @private */
   prevButton: HTMLElement;
 
 

diff --git a/src/components/slides/test/options/app-module.ts b/src/components/slides/test/options/app-module.ts
@@ -0,0 +1,46 @@
+import { Component, ViewChild, NgModule } from '@angular/core';
+import { IonicApp, IonicModule, Slides } from '../../../..';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+export class E2EPage {
+  @ViewChild(Slides) slider: Slides;
+
+  onSlideWillChange(s: Slides) {
+    console.log(`onSlideWillChange: ${s}`);
+  }
+
+  onSlideDidChange(s: Slides) {
+    console.log(`onSlideDidChange: ${s}`);
+  }
+
+  onSlideDrag(s: Slides) {
+    console.log(`onSlideDrag: ${s}`);
+  }
+
+}
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+export class E2EApp {
+  root = E2EPage;
+}
+
+@NgModule({
+  declarations: [
+    E2EApp,
+    E2EPage
+  ],
+  imports: [
+    IonicModule.forRoot(E2EApp)
+  ],
+  bootstrap: [IonicApp],
+  entryComponents: [
+    E2EApp,
+    E2EPage
+  ]
+})
+export class AppModule {}
diff --git a/src/components/slides/test/options/main.html b/src/components/slides/test/options/main.html
@@ -0,0 +1,36 @@
+
+<ion-slides style="background: black"
+            (ionSlideWillChange)="onSlideWillChange($event)"
+            (ionSlideDidChange)="onSlideDidChange($event)"
+            (ionSlideDrag)="onSlideDrag($event)"
+            pager="true"
+            effect="slide"
+            paginationType="progress"
+            slidesPerView="2"
+            spaceBetween="40">
+
+  <ion-slide style="background: red; color: white;">
+    <h1>Slide 1</h1>
+  </ion-slide>
+
+  <ion-slide style="background: white; color: blue;">
+    <h1>Slide 2</h1>
+  </ion-slide>
+
+  <ion-slide style="background: blue; color: white;">
+    <h1>Slide 3</h1>
+  </ion-slide>
+
+  <ion-slide style="background: purple; color: white;">
+    <h1>Slide 4</h1>
+  </ion-slide>
+
+  <ion-slide style="background: aqua; color: black;">
+    <h1>Slide 5</h1>
+  </ion-slide>
+
+  <ion-slide style="background: goldenrod; color: white;">
+    <h1>Slide 6</h1>
+  </ion-slide>
+
+</ion-slides>