siddhartha-gupta / ionic-3-swipe-able-segments Goto Github PK

 import { SwipeSegmentDirective } from '../directives/swipe- segment.directive';

 @NgModule({
 declarations: [
   MyApp,
   SwipeSegmentDirective
   // ProgressBarComponent
 ],

export class InvitefriendPage {

 public category: string = 'everyone';
 public categories: Array<string> = ['everyone', 'group', 'contact', 
 'directory']

 // tab1Root: any = "EveryonePage";
 // tab2Root: any = "GroupPage";
// tab3Root: any = "ContactPage";
// tab4Root: any = "DirectoryPage";
// public categories: Array<string> = ['everyone', 'group', 'contact', 
'directory']

 constructor(public navCtrl: NavController, public navParams: 
  NavParams) {
 }

 ionViewDidLoad() {
  console.log('ionViewDidLoad InvitefriendPage');
 }

 onTabChanged(tabName) {
  this.category = tabName;
 }

 <ion-header>
  <ion-navbar color="danger">   
   <ion-grid>
    <ion-row>
     <ion-col col-2 col-xl-2 class="wholeCol">
      <img src="assets/imgs/iconRn.png" class="iconHeader" item-start>
     </ion-col>
     <ion-col col-9 col-xl-9>
      <ion-grid class="search-css">
       <ion-row>
        <ion-col col-2 col-xl-2 class="search-div">
         <img src="assets/imgs/search.png" class="img-css">
        </ion-col>
        <ion-col col-10 col-xl-10>
          <ion-input type="text" (ionInput)="getItems($event)" 
            [(ngModel)]="searchTerm" class="inputSearch" 
             placeholder="Search by name"></ion-input>
           </ion-col>
          </ion-row>
         </ion-grid>

        </ion-col>
        <ion-col col-1 col-xl-1 class="colSetting">
         <img src="assets/imgs/close.png" class="iconclose" 
            (click)="closePage()">
         </ion-col>
        </ion-row>
       </ion-grid>

<ion-toolbar class="toolbar-color myToolbar">
 <ion-segment [(ngModel)]="category" class="tabsSeg">

  <ion-segment-button value="everyone" class="segBtn tabname 
    active activated">
     Everyone
  </ion-segment-button>
  <ion-segment-button value="group" class="segBtn tabname">
    Group
  </ion-segment-button>
  <ion-segment-button value="contact" class="segBtn tabname">
    Contact
  </ion-segment-button>
  <ion-segment-button value="directory" class="segBtn tabname">
    Directory
  </ion-segment-button>
</ion-segment>

 <ion-content padding>
   <div [ngSwitch]="category" swipeSegment [tabsList]="categories" 
    [(currentTab)]="category" (tabChanged)="onTabChanged($event)" 
     class="swipe-area">
   <ion-list *ngSwitchCase="'everyone'">
    <ion-item>
      Batman Begins
     </ion-item>
      <ion-item>
      Transporter
     </ion-item>
     <ion-item>
      Million Dollar Baby
      </ion-item>
     </ion-list>

     <ion-list *ngSwitchCase="'group'">
      <ion-item>
        Game of Thrones
      </ion-item>
      <ion-item>
        Daredevil
       </ion-item>
       <ion-item>
        Arrow
       </ion-item>
     </ion-list>

    <ion-list *ngSwitchCase="'contact'">
     <ion-item>
       Ice Age
     </ion-item>
      <ion-item>
      Lion King
      </ion-item>
      <ion-item>
         Up
     </ion-item>
     </ion-list>

      <ion-list *ngSwitchCase="'directory'">
     <ion-item>
      Ice Age1
       </ion-item>
       <ion-item>
       Lion King1
      </ion-item>
       <ion-item>
        Up1
     </ion-item>
    </ion-list>
   </div>
  </ion-content>