combine segment and slides to have swipeable tabs

ionic/components/segment/test/swipe/index.ts

@@ -0,0 +1,58 @@
+import {Validators, Control, ControlGroup} from 'angular2/common';
+import {Http} from 'angular2/http';
+import {App, Page, IonicApp, NavController} from 'ionic/ionic';
+import _ from 'lodash';
+
+
+@Page({
+  templateUrl: 'main.html',
+})
+class SegmentPage {
+  constructor(app: IonicApp) {
+    this.app = app;
+
+    this.selectedSegment = "first";
+    this.slides = [
+      {
+        id: "first",
+        title: "First Slide"
+      },
+      {
+        id: "second",
+        title: "Second Slide"
+      },
+      {
+        id: "third",
+        title: "Third Slide"
+      }
+    ];
+  }
+
+  onSegmentChanged(segmentButton) {
+    console.log("Segment changed to", segmentButton.value);
+
+    this.sliderComponent = this.app.getComponent('loopSlider');
+    const selectedIndex = this.slides.findIndex((slide) => {
+      return slide.id === segmentButton.value;
+    });
+    this.sliderComponent.slider.slideTo(selectedIndex);
+  }
+
+  onSlideChanged(slider) {
+    console.log('Slide changed', slider);
+
+    const currentSlide = this.slides[slider.activeIndex];
+    this.selectedSegment = currentSlide.id;
+  }
+}
+
+
+@App({
+  pages: [SegmentPage],
+  template: `<ion-nav [root]="root"></ion-nav>`
+})
+class MyApp {
+  constructor() {
+    this.root = SegmentPage;
+  }
+}

ionic/components/segment/test/swipe/main.html

@@ -0,0 +1,35 @@
+<ion-navbar *navbar>
+  <ion-title>
+    Segment Swipeable under Navbar
+  </ion-title>
+</ion-navbar>
+<ion-toolbar>
+  <ion-segment [(ngModel)]="selectedSegment" (change)="onSegmentChanged($event)">
+    <ion-segment-button value="first">
+      First
+    </ion-segment-button>
+    <ion-segment-button value="second">
+      Second
+    </ion-segment-button>
+    <ion-segment-button value="third">
+      Third
+    </ion-segment-button>
+  </ion-segment>
+</ion-toolbar>
+
+<ion-content padding>
+
+  <ion-slides (change)="onSlideChanged($event)" id="loopSlider">
+    <ion-slide *ngFor="#slide of slides">
+      <h1>{{ slide.title }}</h1>
+    </ion-slide>
+  </ion-slides>
+
+</ion-content>
+
+<style>
+  ion-scroll {
+    width: 100%;
+    height: 100%;
+  }
+</style>