ionic-framework/ionic/components/item/test/sliding/main.html

<ion-toolbar>
  <ion-title>Sliding Items</ion-title>
  <ion-buttons end>
    <button (click)="reload()">Reload</button>
  </ion-buttons>
</ion-toolbar>

<ion-content>

  <ion-list id="myList">

    <ion-item-sliding #item>
      <button ion-item text-wrap (click)="didClick(item)">
        <h3>Max Lynch</h3>
        <p>
          Hey do you want to go to the game tonight?
        </p>
      </button>
      <ion-item-options>
        <button primary (click)="archive(item)">Archive</button>
        <button danger (click)="del(item)">Delete</button>
      </ion-item-options>
    </ion-item-sliding>

    <ion-item-sliding #item>
      <ion-item text-wrap detail-push class="activated">
        <h3>Adam Bradley</h3>
        <p>
          I think I figured out how to get more Mountain Dew
        </p>
      </ion-item>
      <ion-item-options>
        <button primary (click)="archive(item)">
          <ion-icon name="mail"></ion-icon>
          Archive
        </button>
        <button danger (click)="del(item)">
          <ion-icon name="trash"></ion-icon>
          Delete
        </button>
      </ion-item-options>
    </ion-item-sliding>

    <ion-item-sliding *ngIf="shouldShow" #item>
      <ion-item text-wrap detail-push>
        <h3>Ben Sperry</h3>
        <p>
          I like paper
        </p>
      </ion-item>
      <ion-item-options>
        <button primary (click)="archive(item)">Archive</button>
        <button danger (click)="del(item)">Delete</button>
      </ion-item-options>
    </ion-item-sliding>

    <ion-item-sliding #item>
      <ion-item>
        <ion-icon name="mail" item-left></ion-icon>
        One Line w/ Icon, div only text
      </ion-item>
      <ion-item-options icon-left>
        <button primary (click)="archive(item)">
          <ion-icon name="archive"></ion-icon>Archive
        </button>
      </ion-item-options>
    </ion-item-sliding>

    <ion-item-sliding #item>
      <ion-item>
        <ion-avatar item-left>
          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
        </ion-avatar>
        One Line w/ Avatar, div only text
      </ion-item>
      <ion-item-options>
        <button primary>
          <ion-icon name="more"></ion-icon>More
        </button>
        <button secondary (click)="archive(item)">
          <ion-icon name="archive"></ion-icon>Archive
        </button>
        <button danger (click)="del(item)">
          <ion-icon name="trash"></ion-icon>Delete
        </button>

      </ion-item-options>
    </ion-item-sliding>

    <ion-item-sliding #item>
      <ion-item>
        <ion-thumbnail item-left>
          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
        </ion-thumbnail>
        <h2>Two Lines w/ Thumbnail, H2 Header</h2>
        <p>Paragraph text.</p>
      </ion-item>
      <ion-item-options>
        <button primary (click)="archive(item)">Archive</button>
      </ion-item-options>
    </ion-item-sliding>

    <ion-item-sliding *ngFor="#data of items" #item>
      <ion-item text-wrap detail-push>
        <h3>ng-for {{data}}</h3>
      </ion-item>
      <ion-item-options>
        <button primary (click)="archive(item)">Archive</button>
      </ion-item-options>
    </ion-item-sliding>

  </ion-list>

  <p>
    <button (click)="closeOpened()">Close opened items</button>
  </p>

</ion-content>

<style>
  img {
    height: 100px;
  }
</style>