ionic-framework/demos/item-sliding/main.html

<ion-header>

  <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" fullscreen>

  <ion-list class="chat-sliding-demo" [sliding]="!editing">
    <ion-list-header>
      Chats
    </ion-list-header>

    <ion-item-group [reorder]="editing">

    <ion-item-sliding *ngFor="let chat of chats" #item>
      <ion-item>
        <ion-avatar item-left>
          <img [src]="chat.img">
        </ion-avatar>
        <h2>{{chat.name}}</h2>
        <p>{{chat.message}}</p>
        <ion-note item-right>
          {{chat.time}}
        </ion-note>
      </ion-item>

      <ion-item-options>
        <button secondary (click)="more(item)">
          <ion-icon name="menu"></ion-icon>
          More
        </button>
        <button dark (click)="mute(item)">
          <ion-icon name="volume-off"></ion-icon>
          Mute
        </button>
        <button danger (click)="delete(item)">
          <ion-icon name="trash"></ion-icon>
          Delete
        </button>
      </ion-item-options>

      <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">
    <ion-list-header>
      Logins
    </ion-list-header>

    <ion-item-sliding *ngFor="let login of logins" #item>
      <ion-item>
        <ion-icon [name]="login.icon" item-left></ion-icon>
        <h2>{{login.name}}</h2>
        <p>{{login.username}}</p>
      </ion-item>
      <ion-item-options side="left">
        <button danger>
          <ion-icon name="trash"></ion-icon>
        </button>
      </ion-item-options>
      <ion-item-options (ionSwipe)="download(item)">
        <button dark (click)="more(item)">
          <ion-icon name="volume-off"></ion-icon>
          Mute
        </button>
        <button light expandable (click)="download(item)">
          <ion-icon name="download" class="download-hide"></ion-icon>
          <div class="download-hide">Download</div>
          <ion-spinner id="download-spinner"></ion-spinner>
        </button>
      </ion-item-options>
    </ion-item-sliding>

  </ion-list>

</ion-content>

<style>
  #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;
  }
  .downloading #download-spinner {
    display: block;
  }
  .downloading .download-hide {
    display: none;
  }
  .chat-sliding-demo ion-note {
    font-size: 13px;
    margin-top: -8px;
  }

  .chat-sliding-demo ion-item-options .button-inner {
    font-size: 14px;
    flex-direction: column;
  }

  .chat-sliding-demo ion-item-options ion-icon {
    padding-right: 0;
    padding-bottom: 0.3em;
  }

  .login-sliding-demo .ion-logo-twitter {
    color: #53ACEB;
  }

  .login-sliding-demo .ion-logo-github {
    color: #000000;
  }

  .login-sliding-demo .ion-logo-instagram {
    color: #235D8D;
  }

</style>