javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

ion-item-content

Browse Source
This commit is contained in:
Adam Bradley
2015-08-24 16:37:39 -05:00
parent 5d7caada93
commit 2ac11fb716
22 changed files with 340 additions and 520 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
ionic/components/app/test/music/main.html
View File

@ -40,7 +40,7 @@
background: transparent; background: transparent;
min-height: 55px; min-height: 55px;
} }
.mode-ios ion-list .item .item-content { .mode-ios ion-list .item ion-item-content {
background: transparent; background: transparent;
color: rgba(255,255,255,0.8); color: rgba(255,255,255,0.8);
padding: 10px; padding: 10px;
@ -57,7 +57,7 @@
ion-content { ion-content {
background: transparent !important; background: transparent !important;
} }
.mode-ios #menu .item-content:after { .mode-ios #menu ion-item-content:after {
background: none; background: none;
} }
.mode-ios .item:first-of-type:before { .mode-ios .item:first-of-type:before {

14
ionic/components/app/test/sink/pages/list.ts
View File

@ -26,14 +26,12 @@ import {SinkPage} from '../sink-page';
<ion-item> <ion-item>
<input control="email" type="email" placeholder="Your email"> <input control="email" type="email" placeholder="Your email">
</ion-item> </ion-item>
<div class="item"> <ion-item>
<div class="item-content"> Item
<div class="item-title"> </ion-item>
Item <ion-item>
</div> Item
</div> </ion-item>
</div>
<ion-item>Item</ion-item>
</ion-list> </ion-list>
</ion-content> </ion-content>

4
ionic/components/app/test/snapcat/main.html
View File

@ -64,7 +64,7 @@
font-family: 'lato'; font-family: 'lato';
font-size: 16px; font-size: 16px;
} }
.item-content { ion-item-content {
min-height: 70px !important; min-height: 70px !important;
} }
ion-toolbar { ion-toolbar {
@ -83,7 +83,7 @@
} }
.mode-ios .item:first-of-type:before, .mode-ios .item:first-of-type:before,
.mode-ios .item:last-of-type:after, .mode-ios .item:last-of-type:after,
.mode-ios .item-content:after { .mode-ios ion-item-content:after {
background-color: #F5F5F5 !important; background-color: #F5F5F5 !important;
} }
#p1toolbar { #p1toolbar {

4
ionic/components/card/modes/material.scss
View File

@ -50,8 +50,8 @@ $card-md-header-font-size: 1.6rem !default;
} }
} }
.item-content button:first-child, ion-item-content button:first-child,
.item-content [button]:first-child { ion-item-content [button]:first-child {
margin-left: 0; margin-left: 0;
} }

16
ionic/components/card/test/advanced/main.html
View File

@ -10,7 +10,7 @@
<div class="item item-text-wrap"> <div class="item item-text-wrap">
<div class="item-content"> <ion-item-content>
<h2 class="card-title"> <h2 class="card-title">
Card Title Goes Here Card Title Goes Here
@ -20,15 +20,15 @@
Keep close to Nature's heart... and break clear away, Keep close to Nature's heart... and break clear away,
once in awhile, and climb a mountain. I am within a paragraph element. once in awhile, and climb a mountain. I am within a paragraph element.
</p> </p>
</div> </ion-item-content>
</div> </div>
<ion-item actions> <ion-item actions>
<button clear> <button clear item-left>
<icon name="ion-star"></icon> <icon name="ion-star"></icon>
Favorite Favorite
</button> </button>
<button clear> <button clear item-right>
<icon name="ion-reply"></icon> <icon name="ion-reply"></icon>
Reply Reply
</button> </button>
@ -43,10 +43,10 @@
<div class="item-media"> <div class="item-media">
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div> </div>
<div class="item-content"> <ion-item-content>
<h2>Card With An Inset Picture</h2> <h2>Card With An Inset Picture</h2>
<p>Isn't it beautiful</p> <p>Isn't it beautiful</p>
</div> </ion-item-content>
</div> </div>
<div class="item"> <div class="item">
@ -54,9 +54,9 @@
</div> </div>
<div class="item item-text-wrap"> <div class="item item-text-wrap">
<div class="item-content"> <ion-item-content>
Hello. I am a one liner, not a paragraph. Hello. I am a one liner, not a paragraph.
</div> </ion-item-content>
</div> </div>
</ion-card> </ion-card>

28
ionic/components/card/test/basic/main.html
View File

@ -9,9 +9,9 @@
</ion-header> </ion-header>
<div class="item item-text-wrap"> <div class="item item-text-wrap">
<div class="item-content"> <ion-item-content>
Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean. Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean.
</div> </ion-item-content>
</div> </div>
</ion-card> </ion-card>
@ -21,32 +21,32 @@
<div class="item"> <div class="item">
<icon name="ion-location"></icon> <icon name="ion-location"></icon>
<div class="item-content"> <ion-item-content>
All Out Card All Out Card
</div> </ion-item-content>
<button outline>View</button> <button outline>View</button>
</div> </div>
<div class="item item-text-wrap"> <div class="item item-text-wrap">
<div class="item-content"> <ion-item-content>
This is a multiline content within a card that should This is a multiline content within a card that should
take up multiple lines and stuff. take up multiple lines and stuff.
</div> </ion-item-content>
</div> </div>
<div class="item"> <div class="item">
<div class="item-content"> <ion-item-content>
<icon small name="ion-star"></icon> <icon small name="ion-star"></icon>
<span>255</span> <span>255</span>
</div> </ion-item-content>
<div class="item-content"> <ion-item-content>
<icon small name="ion-reply"></icon> <icon small name="ion-reply"></icon>
<span>Reply</span> <span>Reply</span>
</div> </ion-item-content>
<div class="item-content"> <ion-item-content>
<icon small name="ion-forward"></icon> <icon small name="ion-forward"></icon>
Forward Forward
</div> </ion-item-content>
</div> </div>
</ion-card> </ion-card>
@ -55,9 +55,9 @@
<ion-card> <ion-card>
<div class="item"> <div class="item">
<div class="item-content"> <ion-item-content>
Card, no header Card, no header
</div> </ion-item-content>
</div> </div>
</ion-card> </ion-card>

36
ionic/components/card/test/images/main.html
View File

@ -7,22 +7,22 @@
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div> </div>
<div class="item no-border-bottom"> <div class="item no-border-bottom">
<div class="item-content"> <ion-item-content>
<h4 style="color:gray">Item with no-border-bottom</h4> <h4 style="color:gray">Item with no-border-bottom</h4>
</div> </ion-item-content>
</div> </div>
<div class="item item-text-wrap"> <div class="item item-text-wrap">
<div class="item-content"> <ion-item-content>
<p>This is content text and stuff.</p> <p>This is content text and stuff.</p>
</div> </ion-item-content>
</div> </div>
<div class="item"> <div class="item">
<div class="item-content"> <ion-item-content>
<a href="#">Like</a> <a href="#">Like</a>
</div> </ion-item-content>
<div class="item-content align-right"> <ion-item-content class="align-right">
<a href="#">Share</a> <a href="#">Share</a>
</div> </ion-item-content>
</div> </div>
</ion-card> </ion-card>
@ -33,31 +33,31 @@
<div class="item-media"> <div class="item-media">
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div> </div>
<div class="item-content"> <ion-item-content>
<h2>Card With An Inset Picture</h2> <h2>Card With An Inset Picture</h2>
<p>Isn't it beautiful</p> <p>Isn't it beautiful</p>
</div> </ion-item-content>
</div> </div>
<div class="item"> <div class="item">
<div class="item-content"> <ion-item-content>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div> </ion-item-content>
</div> </div>
<div class="item"> <div class="item">
<div class="item-content"> <ion-item-content>
<icon small name="ion-star"></icon> <icon small name="ion-star"></icon>
<span>255</span> <span>255</span>
</div> </ion-item-content>
<div class="item-content"> <ion-item-content>
<icon small name="ion-reply"></icon> <icon small name="ion-reply"></icon>
<span>Reply</span> <span>Reply</span>
</div> </ion-item-content>
<div class="item-content"> <ion-item-content>
<icon small name="ion-forward"></icon> <icon small name="ion-forward"></icon>
Forward Forward
</div> </ion-item-content>
</div> </div>
</ion-card> </ion-card>

32
ionic/components/card/test/links/main.html
View File

@ -6,33 +6,33 @@
<a class="item" href="#"> <a class="item" href="#">
<icon name="ion-ionic"></icon> <icon name="ion-ionic"></icon>
<div class="item-content"> <ion-item-content>
Link 1 Link 1
</div> </ion-item-content>
<icon forward></icon> <icon forward></icon>
</a> </a>
<a class="item" href="#"> <a class="item" href="#">
<icon name="ion-ionic"></icon> <icon name="ion-ionic"></icon>
<div class="item-content"> <ion-item-content>
Link 2 Link 2
</div> </ion-item-content>
<icon forward></icon> <icon forward></icon>
</a> </a>
<button class="item"> <button class="item">
<icon name="ion-ionic"></icon> <icon name="ion-ionic"></icon>
<div class="item-content"> <ion-item-content>
Button 1 Button 1
</div> </ion-item-content>
<icon forward></icon> <icon forward></icon>
</button> </button>
<button class="item"> <button class="item">
<icon name="ion-ionic"></icon> <icon name="ion-ionic"></icon>
<div class="item-content"> <ion-item-content>
Button 2 Button 2
</div> </ion-item-content>
<icon forward></icon> <icon forward></icon>
</button> </button>
@ -47,33 +47,33 @@
<a class="item" href="#"> <a class="item" href="#">
<icon name="ion-ionic"></icon> <icon name="ion-ionic"></icon>
<div class="item-content"> <ion-item-content>
Link 1 Link 1
</div> </ion-item-content>
<icon forward></icon> <icon forward></icon>
</a> </a>
<a class="item" href="#"> <a class="item" href="#">
<icon name="ion-ionic"></icon> <icon name="ion-ionic"></icon>
<div class="item-content"> <ion-item-content>
Link 2 Link 2
</div> </ion-item-content>
<icon forward></icon> <icon forward></icon>
</a> </a>
<a class="item" href="#"> <a class="item" href="#">
<icon name="ion-ionic"></icon> <icon name="ion-ionic"></icon>
<div class="item-content"> <ion-item-content>
Link 3 Link 3
</div> </ion-item-content>
<icon forward></icon> <icon forward></icon>
</a> </a>
<a class="item" href="#"> <a class="item" href="#">
<icon name="ion-ionic"></icon> <icon name="ion-ionic"></icon>
<div class="item-content"> <ion-item-content>
Link 4 Link 4
</div> </ion-item-content>
<icon forward></icon> <icon forward></icon>
</a> </a>

4
ionic/components/checkbox/checkbox.ts
View File

@ -36,9 +36,9 @@ import {TapClick} from '../button/button';
'<div class="item-media media-checkbox">' + '<div class="item-media media-checkbox">' +
'<div class="checkbox-icon"></div>' + '<div class="checkbox-icon"></div>' +
'</div>' + '</div>' +
'<div class="item-content" id="{{labelId}}">' + '<ion-item-content id="{{labelId}}">' +
'<ng-content></ng-content>' + '<ng-content></ng-content>' +
'</div>' '</ion-item-content>'
}) })
export class Checkbox extends Ion { export class Checkbox extends Ion {
constructor( constructor(

21
ionic/components/item/item.scss
View File

@ -34,7 +34,7 @@ button.item.item {
font-weight: normal; font-weight: normal;
} }
.item-content { ion-item-content {
margin: 0; margin: 0;
flex: 1; flex: 1;
white-space: nowrap; white-space: nowrap;
@ -42,8 +42,7 @@ button.item.item {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.item-text-wrap, .item-text-wrap ion-item-content {
.item-text-wrap .item-content {
white-space: normal; white-space: normal;
} }
@ -72,15 +71,15 @@ button.item.item {
.list .item.item { .list .item.item {
.item-content + button, ion-item-content + button,
.item-content + [button], ion-item-content + [button],
button + .item-content, button + ion-item-content,
[button] + .item-content, [button] + ion-item-content,
icon + icon, icon + icon,
.item-content + icon, ion-item-content + icon,
.item-media + .item-content, .item-media + ion-item-content,
.item-content + .item-media, ion-item-content + .item-media,
.item-content + .item-content, ion-item-content + ion-item-content,
icon + .input, icon + .input,
.input + icon, .input + icon,
icon + .input-label, icon + .input-label,

12
ionic/components/item/item.ts
View File

@ -1,4 +1,4 @@
import {Component, View, ElementRef} from 'angular2/angular2'; import {Component, Directive, View, ElementRef, NgIf, ViewQuery, QueryList} from 'angular2/angular2';
import {ItemPrimaryOptions, ItemSecondaryOptions} from './item-options'; import {ItemPrimaryOptions, ItemSecondaryOptions} from './item-options';
import {ItemPrimarySwipeButtons, ItemSecondarySwipeButtons} from './item-swipe-buttons'; import {ItemPrimarySwipeButtons, ItemSecondarySwipeButtons} from './item-swipe-buttons';
@ -6,16 +6,19 @@ import {dom} from 'ionic/util';
@Component({ @Component({
selector: 'ion-item', selector: 'ion-item,[ion-item]',
host: { host: {
'class': 'item' 'class': 'item'
} }
}) })
@View({ @View({
template: template:
'<div class="item-content">' + '<ng-content select="[item-left]"></ng-content>' +
'<ion-item-content>' +
'<ng-content></ng-content>'+ '<ng-content></ng-content>'+
'</div>' '</ion-item-content>' +
'<ng-content select="[item-right]"></ng-content>',
directives: [NgIf]
}) })
export class Item { export class Item {
constructor(elementRef: ElementRef) { constructor(elementRef: ElementRef) {
@ -28,6 +31,7 @@ export class Item {
this.swipeButtons = {}; this.swipeButtons = {};
this.optionButtons = {}; this.optionButtons = {};
} }
} }

4
ionic/components/item/modes/ios.scss
View File

@ -66,7 +66,7 @@ $item-ios-forward-icon-color: $item-ios-border-color !default;
} }
.input-label, .input-label,
.item-content, ion-item-content,
.item-note { .item-note {
margin: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left; margin: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
} }
@ -79,7 +79,7 @@ $item-ios-forward-icon-color: $item-ios-border-color !default;
color: $item-ios-note-color; color: $item-ios-note-color;
} }
.item icon + .item-content { .item icon + ion-item-content {
margin-left: 0; margin-left: 0;
} }

7
ionic/components/item/modes/material.scss
View File

@ -49,13 +49,12 @@ $item-md-forward-icon-color: $item-md-border-color !default;
} }
.input-label, .input-label,
.item-content, ion-item-content,
.item-note { .item-note {
margin: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left; margin: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
} }
.item-text-wrap, .item-text-wrap ion-item-content {
.item-text-wrap .item-content {
font-size: $item-md-body-text-font-size; font-size: $item-md-body-text-font-size;
line-height: $item-md-body-text-line-height; line-height: $item-md-body-text-line-height;
} }
@ -92,7 +91,7 @@ $item-md-forward-icon-color: $item-md-border-color !default;
margin-top: $item-md-padding-media-top; margin-top: $item-md-padding-media-top;
} }
.item[actions] .item-content { .item[actions] ion-item-content {
margin: 8px; margin: 8px;
} }

115
ionic/components/item/test/buttons/main.html
View File

@ -2,103 +2,70 @@
<ion-list> <ion-list>
<a class="item" href="#"> <a ion-item href="#">
<div class="item-content"> a.item
a.item <icon forward item-right></icon>
</div>
<icon forward></icon>
</a> </a>
<a class="item activated" href="#"> <a ion-item class="activated" href="#">
<div class="item-content"> a.item.activated
a.item.activated <icon forward item-right></icon>
</div>
<icon forward></icon>
</a> </a>
<button class="item"> <button ion-item>
<div class="item-content"> button.item
button.item <icon forward item-right></icon>
</div>
<icon forward></icon>
</button> </button>
<button class="item activated"> <button ion-item class="activated">
<div class="item-content"> button.item.activated
button.item.activated <icon forward item-right></icon>
</div>
<icon forward></icon>
</button> </button>
<div class="item"> <ion-item>
<button>Edit</button> <button item-left>Edit</button>
<div class="item-content"> div.item left button
div.item left button </ion-item>
</div>
</div>
<div class="item"> <ion-item>
<div class="item-content"> div.item right button[outline][secondary]
div.item right button[outline][secondary] <button secondary outline item-right>Open</button>
</div> </ion-item>
<button secondary outline>Open</button>
</div>
<div class="item"> <ion-item>
<div class="item-content"> div.item icon only button
div.item icon only button <button item-right>
</div>
<button>
<icon name="ion-help-circled"></icon> <icon name="ion-help-circled"></icon>
</button> </button>
</div> </ion-item>
<div class="item"> <ion-item>
<div class="item-content"> div.item right icon/text button
div.item right icon/text button <button item-right>
</div>
<button>
<icon name="ion-refresh"></icon> <icon name="ion-refresh"></icon>
Refresh Refresh
</button> </button>
</div> </ion-item>
<div class="item"> <ion-item>
<button clear> <button clear item-left>
<icon name="ion-wrench"></icon> <icon name="ion-wrench"></icon>
Fix Fix
</button> </button>
<div class="item-content"> div.item left clear button
div.item left clear button </ion-item>
</div>
</div>
<div class="item"> <ion-item>
<div class="item-content"> div.item right clear button
div.item right clear button <button secondary clear item-right>
</div>
<button secondary clear>
Edit Edit
</button> </button>
</div> </ion-item>
<div class="item"> <ion-item class="item-text-wrap">
<div class="item-content item-text-wrap"> This is multiline text that has a
This is multiline text that has a long description of about how the text is really long.
long description of about how the text is really long. <button outline item-right>View</button>
</div> </ion-item>
<button outline>View</button>
</div>
</ion-list> </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>

106
ionic/components/item/test/icons/main.html
View File

@ -2,94 +2,62 @@
<ion-list> <ion-list>
<div class="item"> <ion-item>
<div class="item-content"> Div with forward icon
Div with forward icon <icon forward item-right></icon>
</div> </ion-item>
<icon forward></icon>
</div>
<a class="item" href="#"> <a ion-item href="#">
<div class="item-content"> Link with forward icon
Link with forward icon <icon forward item-right></icon>
</div>
<icon forward></icon>
</a> </a>
<button class="item"> <button ion-item>
<div class="item-content"> Button with forward icon
Button with forward icon <icon forward item-right></icon>
</div>
<icon forward></icon>
</button> </button>
<a class="item" href="#"> <a ion-item href="#">
<div class="item-content"> Link with right side default icon
Link with right side default icon <icon name="ion-ios-information-outline" item-right></icon>
</div>
<icon name="ion-ios-information-outline"></icon>
</a> </a>
<a class="item" href="#"> <a ion-item href="#">
<div class="item-content"> Link with right side large icon
Link with right side large icon <icon large name="ion-ios-information-outline" item-right></icon>
</div>
<icon large name="ion-ios-information-outline"></icon>
</a> </a>
<a class="item" href="#"> <a ion-item href="#">
<div class="item-content"> Link with right side small icon
Link with right side small icon <icon small name="ion-ios-information-outline" item-right></icon>
</div>
<icon small name="ion-ios-information-outline"></icon>
</a> </a>
<button class="item"> <button ion-item>
<icon name="ion-star"></icon> <icon name="ion-star" item-left></icon>
<div class="item-content"> Button with left side icon
Button with left side icon
</div>
</button> </button>
<button class="item"> <button ion-item>
<icon name="ion-flag"></icon> <icon name="ion-flag" item-left></icon>
<div class="item-content"> Button with both side icons
Button with both side icons <icon name="ion-ios-checkmark" item-right></icon>
</div>
<icon name="ion-ios-checkmark"></icon>
</button> </button>
<a class="item" href="#"> <a ion-item href="#">
<div class="item-content"> Link with two right side icons
Link with two right side icons <icon name="ion-checkmark-circled" item-right></icon>
</div> <icon name="ion-shuffle" item-right></icon>
<icon name="ion-checkmark-circled"></icon>
<icon name="ion-shuffle"></icon>
</a> </a>
<button class="item"> <button ion-item>
<icon name="ion-clipboard"></icon> <icon name="ion-clipboard" item-left></icon>
<icon name="ion-minus-circled"></icon> <icon name="ion-minus-circled" item-left></icon>
<div class="item-content"> Button with two left side icons
Button with two left side icons
</div>
</button> </button>
<button class="item"> <button ion-item>
<div class="item-content"> Red Balloons
Red Balloons <div class="badge" item-right>99</div>
</div>
<div class="badge">99</div>
</button> </button>
</ion-list> </ion-list>
<style>
body {
//background-image: url(/ionic2-iOS-component-design.png);
background-repeat: no-repeat;
background-size: 3906px 634px;
background-position: -34px -53px;
}
</style>

92
ionic/components/item/test/images/main.html
View File

@ -2,77 +2,61 @@
<ion-list> <ion-list>
<div class="item"> <ion-item>
<div class="item-content"> Plain Ol' div w/ some text, no images
Plain Ol' div w/ some text, no images </ion-item>
</div>
</div>
<div class="item"> <ion-item>
<icon name="ion-email"></icon> <icon name="ion-email" item-left></icon>
<div class="item-content"> One Line w/ Icon, div only text
One Line w/ Icon, div only text </ion-item>
</div>
</div>
<div class="item"> <ion-item>
<icon name="ion-email"></icon> <icon name="ion-email" item-left></icon>
<div class="item-content"> <h2>Two Lines w/ Icon, H2 Header</h2>
<h2>Two Lines w/ Icon, H2 Header</h2> <p>Paragraph text.</p>
<p>Paragraph text.</p> </ion-item>
</div>
</div>
<div class="item"> <ion-item>
<div class="item-media"> <div class="item-media" item-left>
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div> </div>
<div class="item-content"> One Line w/ Avatar, div only text
One Line w/ Avatar, div only text </ion-item>
</div>
</div>
<div class="item"> <ion-item>
<div class="item-media"> <div class="item-media" item-left>
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div> </div>
<div class="item-content"> <h2>Two Lines w/ Avatar, H2 Header</h2>
<h2>Two Lines w/ Avatar, H2 Header</h2> <p>Paragraph text.</p>
<p>Paragraph text.</p> </ion-item>
</div>
</div>
<div class="item"> <ion-item>
<div class="item-media"> <div class="item-media" item-left>
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div> </div>
<div class="item-content"> <h2>Three Lines w/ Avatar, H2 Header</h2>
<h2>Three Lines w/ Avatar, H2 Header</h2> <p>Paragraph text.</p>
<p>Paragraph text.</p> <p>Paragraph text.</p>
<p>Paragraph text.</p> </ion-item>
</div>
</div>
<div class="item"> <ion-item>
<div class="item-media"> <div class="item-media" item-left>
<img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div> </div>
<div class="item-content"> <h2>Two Lines w/ Thumbnail, H2 Header</h2>
<h2>Two Lines w/ Thumbnail, H2 Header</h2> <p>Paragraph text.</p>
<p>Paragraph text.</p> </ion-item>
</div>
</div>
<div class="item"> <ion-item>
<div class="item-media"> <div class="item-media" item-left>
<img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div> </div>
<div class="item-content"> <h2>Three Lines w/ Thumbnail, H2 Header</h2>
<h2>Three Lines w/ Thumbnail, H2 Header</h2> <p>Paragraph text.</p>
<p>Paragraph text.</p> <p>Paragraph text.</p>
<p>Paragraph text.</p> </ion-item>
</div>
</div>
</ion-list> </ion-list>

76
ionic/components/item/test/media/main.html
View File

@ -8,75 +8,61 @@
<ion-list> <ion-list>
<button class="item"> <button ion-item>
<div class="item-media"> <div class="item-media" item-left>
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div> </div>
<div class="item-content"> Media/Avatar left, button.item
Media/Avatar left, button.item
</div>
</button> </button>
<a class="item" href="#"> <a ion-item href="#">
<div class="item-content"> Media/Avatar right, a.item
Media/Avatar right, a.item <div class="item-media" item-right>
</div>
<div class="item-media">
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div> </div>
</a> </a>
<div class="item"> <ion-item>
<div class="item-media"> <div class="item-media" item-left>
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div> </div>
<div class="item-content"> Media/Avatar, right button
Media/Avatar, right button <button outline item-right>View</button>
</div> </ion-item>
<button outline>View</button>
</div>
<a class="item" href="#"> <a ion-item href="#">
<div class="item-media"> <div class="item-media" item-left>
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div> </div>
<div class="item-content"> <h2>H2 Title Text</h2>
<h2>H2 Title Text</h2> <p>Paragraph text</p>
<p>Paragraph text</p>
</div>
</a> </a>
<a class="item" href="#"> <a ion-item href="#">
<div class="item-content"> Media/Thumbnail right side, a.item
Media/Thumbnail right side, a.item <div class="item-media" item-right>
</div>
<div class="item-media">
<img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div> </div>
</a> </a>
<div class="item"> <ion-item>
<div class="item-media"> <div class="item-media" item-left>
<img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div> </div>
<div class="item-content"> <h2>H2 Title Text</h2>
<h2>H2 Title Text</h2> <p>Button on right</p>
<p>Button on right</p> <button outline item-right>View</button>
</div> </ion-item>
<button outline>View</button>
</div>
<button class="item"> <button ion-item>
<div class="item-media"> <div class="item-media" item-left>
<img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw=="> <img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div> </div>
<div class="item-content"> <h3>H3 Title Text</h3>
<h3>H3 Title Text</h3> <p>Icon on right</p>
<p>Icon on right</p> <p>Vertically align top</p>
<p>Vertically align top</p> <p>button.item</p>
<p>button.item</p> <icon name="ion-close-circled" item-right></icon>
</div>
<icon name="ion-close-circled"></icon>
</button> </button>
</ion-list> </ion-list>

104
ionic/components/item/test/text/main.html
View File

@ -2,86 +2,40 @@
<ion-list> <ion-list>
<div class="item"> <ion-item>
<div class="item-content"> Plain Ol' div with some text
Plain Ol' div with some text </ion-item>
</div>
</div>
<div class="item"> <ion-item>
<div class="item-content"> Single line text that should have ellipses when it doesn't all fit in the item
Single line text that should have ellipses when it doesn't all fit in the item </ion-item>
</div>
</div>
<div class="item"> <ion-item class="item-text-wrap">
<div class="item-content"> Multiline text that should wrap when it is too long
Column to fit on one line in the item. Class on .item
</div> </ion-item>
<div class="item-content">
Column
</div>
<div class="item-content">
Column
</div>
<div class="item-content">
Column
</div>
</div>
<div class="item"> <ion-item class="item-text-wrap">
<div class="item-content align-left"> <h1>H1 Title Text</h1>
align-left <p>Paragraph line 1</p>
</div> </ion-item>
<div class="item-content align-center">
align-center
</div>
<div class="item-content align-right">
align-right
</div>
</div>
<div class="item"> <ion-item class="item-text-wrap">
<div class="item-content item-text-wrap"> <h2>H2 Title Text</h2>
Multiline text that should wrap when it is too long to fit on one line in the item. Class on .item-content <p>Paragraph line 1</p>
</div> </ion-item>
</div>
<div class="item item-text-wrap"> <ion-item class="item-text-wrap">
<div class="item-content"> <h3>H3 Title Text</h3>
Multiline text that should wrap when it is too long to fit on one line in the item. Class on .item <p>Paragraph line 1</p>
</div> <p>Paragraph line 2</p>
</div> </ion-item>
<div class="item item-text-wrap"> <ion-item class="item-text-wrap">
<div class="item-content"> <h4>H4 Title Text</h4>
<h1>H1 Title Text</h1> <p>Paragraph line 1</p>
<p>Paragraph line 1</p> <p>Paragraph line 2</p>
</div> <p>Paragraph line 3</p>
</div> </ion-item>
<div class="item item-text-wrap">
<div class="item-content">
<h2>H2 Title Text</h2>
<p>Paragraph line 1</p>
</div>
</div>
<div class="item item-text-wrap">
<div class="item-content">
<h3>H3 Title Text</h3>
<p>Paragraph line 1</p>
<p>Paragraph line 2</p>
</div>
</div>
<div class="item item-text-wrap">
<div class="item-content">
<h4>H4 Title Text</h4>
<p>Paragraph line 1</p>
<p>Paragraph line 2</p>
<p>Paragraph line 3</p>
</div>
</div>
</ion-list> </ion-list>

119
ionic/components/list/test/headers/main.html
View File

@ -6,118 +6,101 @@
List Header List Header
</ion-header> </ion-header>
<div class="item"> <ion-item>
<icon name="ion-wifi"></icon> <icon name="ion-wifi" item-left></icon>
<div class="item-content"> Wifi
Wifi <div class="item-note" item-right>
</div>
<div class="item-note">
Terrible Terrible
</div> </div>
</div> </ion-item>
<div class="item"> <ion-item>
<icon name="ion-heart"></icon> <icon name="ion-heart" item-left></icon>
<div class="item-content"> Affection
Affection <div class="item-note" item-right>
</div>
<div class="item-note">
Very Little Very Little
</div> </div>
</div> </ion-item>
<div class="item"> <ion-item>
<icon name="ion-home"></icon> <icon name="ion-home" item-left></icon>
<div class="item-content"> Home
Home <div class="item-note" item-right>
</div>
<div class="item-note">
Where the heart is Where the heart is
</div> </div>
</div> </ion-item>
</ion-list> </ion-list>
<ion-list> <ion-list>
<ion-header> <ion-header>
List Header List Header
</ion-header> </ion-header>
<div class="item"> <ion-item>
<icon name="ion-wand"></icon> <icon name="ion-wand" item-left></icon>
<div class="item-content"> Magic
Magic <div class="item-note" item-right>
</div>
<div class="item-note">
Activated Activated
</div> </div>
</div> </ion-item>
<div class="item"> <ion-item>
<icon name="ion-star"></icon> <icon name="ion-star" item-left></icon>
<div class="item-content"> Star status
Star status <div class="item-note" item-right>
</div>
<div class="item-note">
Super Super
</div> </div>
</div> </ion-item>
</ion-list> </ion-list>
<ion-list> <ion-list>
<ion-header> <ion-header>
List Header with text that is too long to fit inside the list header List Header with text that is too long to fit inside the list header
</ion-header> </ion-header>
<div class="item"> <ion-item>
<icon name="ion-pizza"></icon> <icon name="ion-pizza" item-left></icon>
<div class="item-content"> Pizza
Pizza <div class="item-note" item-right>
</div>
<div class="item-note">
Always Always
</div> </div>
</div> </ion-item>
<div class="item"> <ion-item>
<icon name="ion-beer"></icon> <icon name="ion-beer" item-left></icon>
<div class="item-content"> Beer
Beer <div class="item-note" item-right>
</div>
<div class="item-note">
Yes Plz Yes Plz
</div> </div>
</div> </ion-item>
<div class="item"> <ion-item>
<icon name="ion-wineglass"></icon> <icon name="ion-wineglass" item-left></icon>
<div class="item-content"> Wine
Wine <div class="item-note" item-right>
</div>
<div class="item-note">
All the time All the time
</div> </div>
</div> </ion-item>
</ion-list> </ion-list>
<ion-list> <ion-list>
<div class="item"> <ion-item>
<icon name="ion-chatbox"></icon> <icon name="ion-chatbox" item-left></icon>
<div class="item-content"> New List, no header, Item 1
New List, no header, Item 1 </ion-item>
</div>
</div>
<div class="item"> <ion-item>
<icon name="ion-chatbox"></icon> <icon name="ion-chatbox" item-left></icon>
<div class="item-content"> New List, no header, Item 2
New List, no header, Item 2 </ion-item>
</div>
</div>
</ion-list> </ion-list>

54
ionic/components/list/test/inset/main.html
View File

@ -6,55 +6,33 @@
<ion-header> <ion-header>
Inset List Header Inset List Header
</ion-header> </ion-header>
<div class="item item-text-wrap"> <ion-item class="item-text-wrap">
<div class="item-content"> Keep close to Nature's heart... and break clear away, once in awhile, and
Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods. Wash your spirit clean. climb a mountain or spend a week in the woods. Wash your spirit clean.
</div> </ion-item>
</div>
</ion-list> </ion-list>
<ion-list inset> <ion-list inset>
<div class="item"> <ion-item>
<icon name="ion-location"></icon> <icon name="ion-location" item-left></icon>
<div class="item-content"> All Out Inset List
All Out Inset List <button outline item-right>View</button>
</div> </ion-item>
<button outline>View</button>
</div>
<div class="item item-text-wrap"> <ion-item class="item-text-wrap">
<div class="item-content"> This is a multiline content within a list that should
This is a multiline content within a list that should take up multiple lines and stuff.
take up multiple lines and stuff. </ion-item>
</div>
</div>
<div class="item">
<div class="item-content">
<icon small name="ion-star"></icon>
<span>255</span>
</div>
<div class="item-content">
<icon small name="ion-reply"></icon>
<span>Reply</span>
</div>
<div class="item-content">
<icon small name="ion-forward"></icon>
Forward
</div>
</div>
</ion-list> </ion-list>
<ion-list inset> <ion-list inset>
<div class="item"> <ion-item>
<div class="item-content"> Inset List, no header
Inset List, no header </ion-item>
</div>
</div>
</ion-list> </ion-list>

4
ionic/components/radio/radio.ts
View File

@ -101,9 +101,9 @@ export class RadioGroup extends Ion {
}) })
@IonicView({ @IonicView({
template: template:
'<div class="item-content" id="{{labelId}}">' + '<ion-item-content id="{{labelId}}">' +
'<ng-content></ng-content>' + '<ng-content></ng-content>' +
'</div>' + '</ion-item-content>' +
'<div class="item-media media-radio">' + '<div class="item-media media-radio">' +
'<div class="radio-icon"></div>' + '<div class="radio-icon"></div>' +
'</div>' '</div>'

4
ionic/components/switch/switch.ts
View File

@ -124,9 +124,9 @@ class MediaSwitch {
}) })
@IonicView({ @IonicView({
template: template:
'<div class="item-content" id="{{labelId}}">' + '<ion-item-content id="{{labelId}}">' +
'<ng-content></ng-content>' + '<ng-content></ng-content>' +
'</div>' + '</ion-item-content>' +
'<div class="item-media media-switch">' + '<div class="item-media media-switch">' +
'<div class="switch-icon"></div>' + '<div class="switch-icon"></div>' +
'</div>', '</div>',