mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 19:57:22 +08:00
79 lines
2.1 KiB
HTML
79 lines
2.1 KiB
HTML
<ion-toolbar><ion-title>Item Media</ion-title></ion-toolbar>
|
|
|
|
<!--
|
|
class="line-media"
|
|
class="line-none"
|
|
class="line-full"
|
|
-->
|
|
|
|
<ion-list>
|
|
|
|
<button ion-item>
|
|
<div class="item-media" item-left>
|
|
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</div>
|
|
Media/Avatar left, button.item
|
|
</button>
|
|
|
|
<a ion-item href="#">
|
|
Media/Avatar right, a.item
|
|
<div class="item-media" item-right>
|
|
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</div>
|
|
</a>
|
|
|
|
<ion-item>
|
|
<div class="item-media" item-left>
|
|
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</div>
|
|
Media/Avatar, right button
|
|
<button outline item-right>View</button>
|
|
</ion-item>
|
|
|
|
<a ion-item href="#">
|
|
<div class="item-media" item-left>
|
|
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</div>
|
|
<h2>H2 Title Text</h2>
|
|
<p>Paragraph text</p>
|
|
</a>
|
|
|
|
<a ion-item href="#">
|
|
Media/Thumbnail right side, a.item
|
|
<div class="item-media" item-right>
|
|
<img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</div>
|
|
</a>
|
|
|
|
<ion-item>
|
|
<div class="item-media" item-left>
|
|
<img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</div>
|
|
<h2>H2 Title Text</h2>
|
|
<p>Button on right</p>
|
|
<button outline item-right>View</button>
|
|
</ion-item>
|
|
|
|
<button ion-item>
|
|
<div class="item-media" item-left>
|
|
<img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
|
|
</div>
|
|
<h3>H3 Title Text</h3>
|
|
<p>Icon on right</p>
|
|
<p>Vertically align top</p>
|
|
<p>button.item</p>
|
|
<icon close-circle item-right></icon>
|
|
</button>
|
|
|
|
</ion-list>
|
|
|
|
<style>
|
|
.avatar {
|
|
width: 80px !important;
|
|
height: 80px;
|
|
}
|
|
img {
|
|
height: 100px;
|
|
}
|
|
</style>
|