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;
min-height: 55px;
}
.mode-ios ion-list .item .item-content {
.mode-ios ion-list .item ion-item-content {
background: transparent;
color: rgba(255,255,255,0.8);
padding: 10px;
@ -57,7 +57,7 @@
ion-content {
background: transparent !important;
}
.mode-ios #menu .item-content:after {
.mode-ios #menu ion-item-content:after {
background: none;
}
.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>
<input control="email" type="email" placeholder="Your email">
</ion-item>
<div class="item">
<div class="item-content">
<div class="item-title">
Item
</div>
</div>
</div>
<ion-item>Item</ion-item>
<ion-item>
Item
</ion-item>
<ion-item>
Item
</ion-item>
</ion-list>
</ion-content>

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

@ -64,7 +64,7 @@
font-family: 'lato';
font-size: 16px;
}
.item-content {
ion-item-content {
min-height: 70px !important;
}
ion-toolbar {
@ -83,7 +83,7 @@
}
.mode-ios .item:first-of-type:before,
.mode-ios .item:last-of-type:after,
.mode-ios .item-content:after {
.mode-ios ion-item-content:after {
background-color: #F5F5F5 !important;
}
#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,
.item-content [button]:first-child {
ion-item-content button:first-child,
ion-item-content [button]:first-child {
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-content">
<ion-item-content>
<h2 class="card-title">
Card Title Goes Here
@ -20,15 +20,15 @@
Keep close to Nature's heart... and break clear away,
once in awhile, and climb a mountain. I am within a paragraph element.
</p>
</div>
</ion-item-content>
</div>
<ion-item actions>
<button clear>
<button clear item-left>
<icon name="ion-star"></icon>
Favorite
</button>
<button clear>
<button clear item-right>
<icon name="ion-reply"></icon>
Reply
</button>
@ -43,10 +43,10 @@
<div class="item-media">
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="item-content">
<ion-item-content>
<h2>Card With An Inset Picture</h2>
<p>Isn't it beautiful</p>
</div>
</ion-item-content>
</div>
<div class="item">
@ -54,9 +54,9 @@
</div>
<div class="item item-text-wrap">
<div class="item-content">
<ion-item-content>
Hello. I am a one liner, not a paragraph.
</div>
</ion-item-content>
</div>
</ion-card>

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

@ -9,9 +9,9 @@
</ion-header>
<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.
</div>
</ion-item-content>
</div>
</ion-card>
@ -21,32 +21,32 @@
<div class="item">
<icon name="ion-location"></icon>
<div class="item-content">
<ion-item-content>
All Out Card
</div>
</ion-item-content>
<button outline>View</button>
</div>
<div class="item item-text-wrap">
<div class="item-content">
<ion-item-content>
This is a multiline content within a card that should
take up multiple lines and stuff.
</div>
</ion-item-content>
</div>
<div class="item">
<div class="item-content">
<ion-item-content>
<icon small name="ion-star"></icon>
<span>255</span>
</div>
<div class="item-content">
</ion-item-content>
<ion-item-content>
<icon small name="ion-reply"></icon>
<span>Reply</span>
</div>
<div class="item-content">
</ion-item-content>
<ion-item-content>
<icon small name="ion-forward"></icon>
Forward
</div>
</ion-item-content>
</div>
</ion-card>
@ -55,9 +55,9 @@
<ion-card>
<div class="item">
<div class="item-content">
<ion-item-content>
Card, no header
</div>
</ion-item-content>
</div>
</ion-card>

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

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

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

@ -6,33 +6,33 @@
<a class="item" href="#">
<icon name="ion-ionic"></icon>
<div class="item-content">
<ion-item-content>
Link 1
</div>
</ion-item-content>
<icon forward></icon>
</a>
<a class="item" href="#">
<icon name="ion-ionic"></icon>
<div class="item-content">
<ion-item-content>
Link 2
</div>
</ion-item-content>
<icon forward></icon>
</a>
<button class="item">
<icon name="ion-ionic"></icon>
<div class="item-content">
<ion-item-content>
Button 1
</div>
</ion-item-content>
<icon forward></icon>
</button>
<button class="item">
<icon name="ion-ionic"></icon>
<div class="item-content">
<ion-item-content>
Button 2
</div>
</ion-item-content>
<icon forward></icon>
</button>
@ -47,33 +47,33 @@
<a class="item" href="#">
<icon name="ion-ionic"></icon>
<div class="item-content">
<ion-item-content>
Link 1
</div>
</ion-item-content>
<icon forward></icon>
</a>
<a class="item" href="#">
<icon name="ion-ionic"></icon>
<div class="item-content">
<ion-item-content>
Link 2
</div>
</ion-item-content>
<icon forward></icon>
</a>
<a class="item" href="#">
<icon name="ion-ionic"></icon>
<div class="item-content">
<ion-item-content>
Link 3
</div>
</ion-item-content>
<icon forward></icon>
</a>
<a class="item" href="#">
<icon name="ion-ionic"></icon>
<div class="item-content">
<ion-item-content>
Link 4
</div>
</ion-item-content>
<icon forward></icon>
</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="checkbox-icon"></div>' +
'</div>' +
'<div class="item-content" id="{{labelId}}">' +
'<ion-item-content id="{{labelId}}">' +
'<ng-content></ng-content>' +
'</div>'
'</ion-item-content>'
})
export class Checkbox extends Ion {
constructor(

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

@ -34,7 +34,7 @@ button.item.item {
font-weight: normal;
}
.item-content {
ion-item-content {
margin: 0;
flex: 1;
white-space: nowrap;
@ -42,8 +42,7 @@ button.item.item {
text-overflow: ellipsis;
}
.item-text-wrap,
.item-text-wrap .item-content {
.item-text-wrap ion-item-content {
white-space: normal;
}
@ -72,15 +71,15 @@ button.item.item {
.list .item.item {
.item-content + button,
.item-content + [button],
button + .item-content,
[button] + .item-content,
ion-item-content + button,
ion-item-content + [button],
button + ion-item-content,
[button] + ion-item-content,
icon + icon,
.item-content + icon,
.item-media + .item-content,
.item-content + .item-media,
.item-content + .item-content,
ion-item-content + icon,
.item-media + ion-item-content,
ion-item-content + .item-media,
ion-item-content + ion-item-content,
icon + .input,
.input + icon,
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 {ItemPrimarySwipeButtons, ItemSecondarySwipeButtons} from './item-swipe-buttons';
@ -6,16 +6,19 @@ import {dom} from 'ionic/util';
@Component({
selector: 'ion-item',
selector: 'ion-item,[ion-item]',
host: {
'class': 'item'
}
})
@View({
template:
'<div class="item-content">' +
'<ng-content select="[item-left]"></ng-content>' +
'<ion-item-content>' +
'<ng-content></ng-content>'+
'</div>'
'</ion-item-content>' +
'<ng-content select="[item-right]"></ng-content>',
directives: [NgIf]
})
export class Item {
constructor(elementRef: ElementRef) {
@ -28,6 +31,7 @@ export class Item {
this.swipeButtons = {};
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,
.item-content,
ion-item-content,
.item-note {
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;
}
.item icon + .item-content {
.item icon + ion-item-content {
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,
.item-content,
ion-item-content,
.item-note {
margin: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
}
.item-text-wrap,
.item-text-wrap .item-content {
.item-text-wrap ion-item-content {
font-size: $item-md-body-text-font-size;
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;
}
.item[actions] .item-content {
.item[actions] ion-item-content {
margin: 8px;
}

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

@ -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>

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

@ -2,94 +2,62 @@
<ion-list>
<div class="item">
<div class="item-content">
Div with forward icon
</div>
<icon forward></icon>
</div>
<ion-item>
Div with forward icon
<icon forward item-right></icon>
</ion-item>
<a class="item" href="#">
<div class="item-content">
Link with forward icon
</div>
<icon forward></icon>
<a ion-item href="#">
Link with forward icon
<icon forward item-right></icon>
</a>
<button class="item">
<div class="item-content">
Button with forward icon
</div>
<icon forward></icon>
<button ion-item>
Button with forward icon
<icon forward item-right></icon>
</button>
<a class="item" href="#">
<div class="item-content">
Link with right side default icon
</div>
<icon name="ion-ios-information-outline"></icon>
<a ion-item href="#">
Link with right side default icon
<icon name="ion-ios-information-outline" item-right></icon>
</a>
<a class="item" href="#">
<div class="item-content">
Link with right side large icon
</div>
<icon large name="ion-ios-information-outline"></icon>
<a ion-item href="#">
Link with right side large icon
<icon large name="ion-ios-information-outline" item-right></icon>
</a>
<a class="item" href="#">
<div class="item-content">
Link with right side small icon
</div>
<icon small name="ion-ios-information-outline"></icon>
<a ion-item href="#">
Link with right side small icon
<icon small name="ion-ios-information-outline" item-right></icon>
</a>
<button class="item">
<icon name="ion-star"></icon>
<div class="item-content">
Button with left side icon
</div>
<button ion-item>
<icon name="ion-star" item-left></icon>
Button with left side icon
</button>
<button class="item">
<icon name="ion-flag"></icon>
<div class="item-content">
Button with both side icons
</div>
<icon name="ion-ios-checkmark"></icon>
<button ion-item>
<icon name="ion-flag" item-left></icon>
Button with both side icons
<icon name="ion-ios-checkmark" item-right></icon>
</button>
<a class="item" href="#">
<div class="item-content">
Link with two right side icons
</div>
<icon name="ion-checkmark-circled"></icon>
<icon name="ion-shuffle"></icon>
<a ion-item href="#">
Link with two right side icons
<icon name="ion-checkmark-circled" item-right></icon>
<icon name="ion-shuffle" item-right></icon>
</a>
<button class="item">
<icon name="ion-clipboard"></icon>
<icon name="ion-minus-circled"></icon>
<div class="item-content">
Button with two left side icons
</div>
<button ion-item>
<icon name="ion-clipboard" item-left></icon>
<icon name="ion-minus-circled" item-left></icon>
Button with two left side icons
</button>
<button class="item">
<div class="item-content">
Red Balloons
</div>
<div class="badge">99</div>
<button ion-item>
Red Balloons
<div class="badge" item-right>99</div>
</button>
</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>
<div class="item">
<div class="item-content">
Plain Ol' div w/ some text, no images
</div>
</div>
<ion-item>
Plain Ol' div w/ some text, no images
</ion-item>
<div class="item">
<icon name="ion-email"></icon>
<div class="item-content">
One Line w/ Icon, div only text
</div>
</div>
<ion-item>
<icon name="ion-email" item-left></icon>
One Line w/ Icon, div only text
</ion-item>
<div class="item">
<icon name="ion-email"></icon>
<div class="item-content">
<h2>Two Lines w/ Icon, H2 Header</h2>
<p>Paragraph text.</p>
</div>
</div>
<ion-item>
<icon name="ion-email" item-left></icon>
<h2>Two Lines w/ Icon, H2 Header</h2>
<p>Paragraph text.</p>
</ion-item>
<div class="item">
<div class="item-media">
<ion-item>
<div class="item-media" item-left>
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="item-content">
One Line w/ Avatar, div only text
</div>
</div>
One Line w/ Avatar, div only text
</ion-item>
<div class="item">
<div class="item-media">
<ion-item>
<div class="item-media" item-left>
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="item-content">
<h2>Two Lines w/ Avatar, H2 Header</h2>
<p>Paragraph text.</p>
</div>
</div>
<h2>Two Lines w/ Avatar, H2 Header</h2>
<p>Paragraph text.</p>
</ion-item>
<div class="item">
<div class="item-media">
<ion-item>
<div class="item-media" item-left>
<img class="avatar" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="item-content">
<h2>Three Lines w/ Avatar, H2 Header</h2>
<p>Paragraph text.</p>
<p>Paragraph text.</p>
</div>
</div>
<h2>Three Lines w/ Avatar, H2 Header</h2>
<p>Paragraph text.</p>
<p>Paragraph text.</p>
</ion-item>
<div class="item">
<div class="item-media">
<ion-item>
<div class="item-media" item-left>
<img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="item-content">
<h2>Two Lines w/ Thumbnail, H2 Header</h2>
<p>Paragraph text.</p>
</div>
</div>
<h2>Two Lines w/ Thumbnail, H2 Header</h2>
<p>Paragraph text.</p>
</ion-item>
<div class="item">
<div class="item-media">
<ion-item>
<div class="item-media" item-left>
<img class="thumbnail" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
</div>
<div class="item-content">
<h2>Three Lines w/ Thumbnail, H2 Header</h2>
<p>Paragraph text.</p>
<p>Paragraph text.</p>
</div>
</div>
<h2>Three Lines w/ Thumbnail, H2 Header</h2>
<p>Paragraph text.</p>
<p>Paragraph text.</p>
</ion-item>
</ion-list>

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

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

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

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

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

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

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

@ -6,55 +6,33 @@
<ion-header>
Inset List Header
</ion-header>
<div class="item item-text-wrap">
<div class="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.
</div>
</div>
<ion-item class="item-text-wrap">
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.
</ion-item>
</ion-list>
<ion-list inset>
<div class="item">
<icon name="ion-location"></icon>
<div class="item-content">
All Out Inset List
</div>
<button outline>View</button>
</div>
<ion-item>
<icon name="ion-location" item-left></icon>
All Out Inset List
<button outline item-right>View</button>
</ion-item>
<div class="item item-text-wrap">
<div class="item-content">
This is a multiline content within a list that should
take up multiple lines and stuff.
</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-item class="item-text-wrap">
This is a multiline content within a list that should
take up multiple lines and stuff.
</ion-item>
</ion-list>
<ion-list inset>
<div class="item">
<div class="item-content">
Inset List, no header
</div>
</div>
<ion-item>
Inset List, no header
</ion-item>
</ion-list>

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

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

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

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