mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-26 08:13:34 +08:00
ion-item-content
This commit is contained in:
@ -2,103 +2,70 @@
|
||||
|
||||
<ion-list>
|
||||
|
||||
<a class="item" href="#">
|
||||
<div class="item-content">
|
||||
a.item
|
||||
</div>
|
||||
<icon forward></icon>
|
||||
<a ion-item href="#">
|
||||
a.item
|
||||
<icon forward item-right></icon>
|
||||
</a>
|
||||
|
||||
<a class="item activated" href="#">
|
||||
<div class="item-content">
|
||||
a.item.activated
|
||||
</div>
|
||||
<icon forward></icon>
|
||||
<a ion-item class="activated" href="#">
|
||||
a.item.activated
|
||||
<icon forward item-right></icon>
|
||||
</a>
|
||||
|
||||
<button class="item">
|
||||
<div class="item-content">
|
||||
button.item
|
||||
</div>
|
||||
<icon forward></icon>
|
||||
<button ion-item>
|
||||
button.item
|
||||
<icon forward item-right></icon>
|
||||
</button>
|
||||
|
||||
<button class="item activated">
|
||||
<div class="item-content">
|
||||
button.item.activated
|
||||
</div>
|
||||
<icon forward></icon>
|
||||
<button ion-item class="activated">
|
||||
button.item.activated
|
||||
<icon forward item-right></icon>
|
||||
</button>
|
||||
|
||||
<div class="item">
|
||||
<button>Edit</button>
|
||||
<div class="item-content">
|
||||
div.item left button
|
||||
</div>
|
||||
</div>
|
||||
<ion-item>
|
||||
<button item-left>Edit</button>
|
||||
div.item left button
|
||||
</ion-item>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
div.item right button[outline][secondary]
|
||||
</div>
|
||||
<button secondary outline>Open</button>
|
||||
</div>
|
||||
<ion-item>
|
||||
div.item right button[outline][secondary]
|
||||
<button secondary outline item-right>Open</button>
|
||||
</ion-item>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
div.item icon only button
|
||||
</div>
|
||||
<button>
|
||||
<ion-item>
|
||||
div.item icon only button
|
||||
<button item-right>
|
||||
<icon name="ion-help-circled"></icon>
|
||||
</button>
|
||||
</div>
|
||||
</ion-item>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
div.item right icon/text button
|
||||
</div>
|
||||
<button>
|
||||
<ion-item>
|
||||
div.item right icon/text button
|
||||
<button item-right>
|
||||
<icon name="ion-refresh"></icon>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
</ion-item>
|
||||
|
||||
<div class="item">
|
||||
<button clear>
|
||||
<ion-item>
|
||||
<button clear item-left>
|
||||
<icon name="ion-wrench"></icon>
|
||||
Fix
|
||||
</button>
|
||||
<div class="item-content">
|
||||
div.item left clear button
|
||||
</div>
|
||||
</div>
|
||||
div.item left clear button
|
||||
</ion-item>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
div.item right clear button
|
||||
</div>
|
||||
<button secondary clear>
|
||||
<ion-item>
|
||||
div.item right clear button
|
||||
<button secondary clear item-right>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
</ion-item>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-content item-text-wrap">
|
||||
This is multiline text that has a
|
||||
long description of about how the text is really long.
|
||||
</div>
|
||||
<button outline>View</button>
|
||||
</div>
|
||||
<ion-item class="item-text-wrap">
|
||||
This is multiline text that has a
|
||||
long description of about how the text is really long.
|
||||
<button outline item-right>View</button>
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
|
||||
|
||||
<style>
|
||||
body {
|
||||
//background-image: url(/ionic2-iOS-component-design.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 3906px 634px;
|
||||
background-position: -384px -53px;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
Reference in New Issue
Block a user