feat(item): sliding items work with list reorder

demos/item-sliding/index.ts

@@ -1,17 +1,52 @@
-import { Component } from '@angular/core';
+import { Component, ViewEncapsulation } from '@angular/core';
 
 import { ionicBootstrap, ItemSliding, NavController, Toast } from 'ionic-angular';
 
 
 @Component({
-  templateUrl: 'main.html'
+  templateUrl: 'main.html',
+  encapsulation: ViewEncapsulation.None
 })
 class ApiDemoPage {
   chats: any[];
   logins: any[];
+  editButton: string = 'Edit';
+  editing: boolean = false;
 
   constructor(private nav: NavController) {
     this.chats = [
+    {
+      img: './avatar-cher.png',
+      name: 'Cher',
+      message: 'Ugh. As if.',
+      time: '9:38 pm'
+    }, {
+      img: './avatar-dionne.png',
+      name: 'Dionne',
+      message: 'Mr. Hall was way harsh.',
+      time: '8:59 pm'
+    }, {
+      img: './avatar-murray.png',
+      name: 'Murray',
+      message: 'Excuse me, "Ms. Dione."',
+      time: 'Wed'
+    },
+    {
+      img: './avatar-cher.png',
+      name: 'Cher',
+      message: 'Ugh. As if.',
+      time: '9:38 pm'
+    }, {
+      img: './avatar-dionne.png',
+      name: 'Dionne',
+      message: 'Mr. Hall was way harsh.',
+      time: '8:59 pm'
+    }, {
+      img: './avatar-murray.png',
+      name: 'Murray',
+      message: 'Excuse me, "Ms. Dione."',
+      time: 'Wed'
+    },
     {
       img: './avatar-cher.png',
       name: 'Cher',
@@ -49,6 +84,15 @@ class ApiDemoPage {
     }];
   }
 
+  toggleEdit() {
+    this.editing = !this.editing;
+    if (this.editing) {
+      this.editButton = 'Done';
+    } else {
+      this.editButton = 'Edit';
+    }
+  }
+
   more(item: ItemSliding) {
     console.log('More');
     item.close();

demos/item-sliding/main.html

@@ -2,19 +2,24 @@
 
   <ion-navbar>
     <ion-title>Item Sliding</ion-title>
+    <ion-buttons end>
+      <button (click)="toggleEdit()">{{editButton}}</button>
+    </ion-buttons>
   </ion-navbar>
 
 </ion-header>
 
 
-<ion-content class="outer-content">
+<ion-content class="outer-content" fullscreen>
 
-  <ion-list class="chat-sliding-demo">
+  <ion-list class="chat-sliding-demo" [sliding]="!editing">
     <ion-list-header>
       Chats
     </ion-list-header>
 
-    <ion-item-sliding *ngFor="let chat of chats; let ref = index" [ref]="ref" #item>
+    <ion-item-group [reorder]="editing">
+
+    <ion-item-sliding *ngFor="let chat of chats" #item>
       <ion-item>
         <ion-avatar item-left>
           <img [src]="chat.img">
@@ -41,13 +46,14 @@
         </button>
       </ion-item-options>
 
-      <ion-item-options side="left">
+      <ion-item-options side="left" (ionSwipe)="archive(item)">
         <button primary expandable (click)="archive(item)">
           <ion-icon name="archive"></ion-icon>
           Archive
         </button>
       </ion-item-options>
     </ion-item-sliding>
+    </ion-item-group>
   </ion-list>
 
   <ion-list class="login-sliding-demo">
@@ -87,6 +93,12 @@
   #download-spinner {
     display: none;
   }
+  
+  div.toolbar-background {
+    background-color: rgba(255, 255, 255, 0.65);
+    -webkit-backdrop-filter: saturate(180%) blur(20px);
+    backdrop-filter: saturate(180%) blur(20px);
+  }
 
   svg circle {
     stroke: white;