mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 05:21:52 +08:00
69 lines
1.9 KiB
HTML
69 lines
1.9 KiB
HTML
<ion-toolbar><ion-title>Item Media</ion-title></ion-toolbar>
|
|
|
|
<ion-content>
|
|
|
|
<button ion-item>
|
|
<ion-avatar item-left>
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</ion-avatar>
|
|
Media/Avatar left, button.item
|
|
</button>
|
|
|
|
<a ion-item href="#">
|
|
Media/Avatar right, a.item
|
|
<ion-avatar item-right>
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</ion-avatar>
|
|
</a>
|
|
|
|
<ion-item>
|
|
<ion-avatar item-left>
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</ion-avatar>
|
|
Media/Avatar, right button
|
|
<button outline item-right>View</button>
|
|
</ion-item>
|
|
|
|
<a ion-item href="#">
|
|
<ion-avatar item-left>
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</ion-avatar>
|
|
<h2>H2 Title Text</h2>
|
|
<p>Paragraph text</p>
|
|
</a>
|
|
|
|
<a ion-item href="#">
|
|
Media/Thumbnail right side, a.item
|
|
<ion-thumbnail item-right>
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</ion-thumbnail>
|
|
</a>
|
|
|
|
<ion-item>
|
|
<ion-thumbnail item-left>
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</ion-thumbnail>
|
|
<h2>H2 Title Text</h2>
|
|
<p>Button on right</p>
|
|
<button outline item-right>View</button>
|
|
</ion-item>
|
|
|
|
<button ion-item>
|
|
<ion-thumbnail item-left>
|
|
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</ion-thumbnail>
|
|
<h3>H3 Title Text</h3>
|
|
<p>Icon on right</p>
|
|
<p>Vertically align top</p>
|
|
<p>button.item</p>
|
|
<ion-icon name="close-circle" item-right></ion-icon>
|
|
</button>
|
|
|
|
</ion-content>
|
|
|
|
<style>
|
|
img {
|
|
height: 100px;
|
|
}
|
|
</style>
|