mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 05:21:52 +08:00
108 lines
2.9 KiB
HTML
108 lines
2.9 KiB
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)">Archive</button>
|
|
<button danger (click)="del(item)"><icon trash></icon></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>
|
|
<icon mail item-left></icon>
|
|
One Line w/ Icon, div only text
|
|
</ion-item>
|
|
<ion-item-options>
|
|
<button primary (click)="archive(item)">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 (click)="archive(item)">Archive</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 getItems()" #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>
|