mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
list/item scss wip
This commit is contained in:
Adam Bradley
@@ -36,7 +36,7 @@ button,
|
||||
will-change: transform;
|
||||
|
||||
margin: $button-margin;
|
||||
line-height: 1.1;
|
||||
line-height: 1;
|
||||
|
||||
@include appearance(none);
|
||||
|
||||
|
||||
@@ -76,7 +76,7 @@ textarea {
|
||||
align-items: center;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
padding: ($item-padding / 3) * 2;
|
||||
//padding: ($item-padding / 3) * 2;
|
||||
}
|
||||
|
||||
.item-input-wrapper {
|
||||
@@ -97,7 +97,7 @@ textarea {
|
||||
}
|
||||
|
||||
.item-input-wrapper ~ .button {
|
||||
margin-left: ($item-padding / 3) * 2;
|
||||
//margin-left: ($item-padding / 3) * 2;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Directive, View, CSSClass, ElementRef, Optional, Parent} from 'angular2/angular2';
|
||||
import {Directive, View, CSSClass, ElementRef, Optional, Parent, Attribute} from 'angular2/angular2';
|
||||
|
||||
import {IonicConfig} from '../../config/config';
|
||||
import {IonicComponent} from '../../config/annotations';
|
||||
@@ -64,20 +64,30 @@ Custom Font Icon
|
||||
}
|
||||
})
|
||||
export class IconDirective {
|
||||
constructor(elementRef: ElementRef, @Optional() @Parent() parentButton: Button) {
|
||||
var ele = this.ele = elementRef.nativeElement;
|
||||
constructor(
|
||||
elementRef: ElementRef,
|
||||
@Optional() @Parent() parentButton: Button,
|
||||
@Attribute('forward') forward: string,
|
||||
config: IonicConfig
|
||||
) {
|
||||
let ele = this.ele = elementRef.nativeElement;
|
||||
|
||||
this.iconLeft = this.iconRight = this.iconOnly = false;
|
||||
this.ariaHidden = true;
|
||||
|
||||
if (forward !== null) {
|
||||
this.fwdIcon = config.setting('forwardIcon');
|
||||
}
|
||||
|
||||
if (parentButton) {
|
||||
// this icon is within a button
|
||||
this.withinButton = true;
|
||||
|
||||
// check if there is a sibling element (that's not aria hidden)
|
||||
let hasPreviousSiblingElement = !!ele.previousElementSibling;
|
||||
let hasNextSiblingElement = ele.nextElementSibling && ele.nextElementSibling.getAttribute('aria-hidden') !== 'true';
|
||||
|
||||
if (!hasNextSiblingElement) {
|
||||
if (!hasPreviousSiblingElement && !hasNextSiblingElement) {
|
||||
// this icon is within a button, and doesn't have a sibling element
|
||||
// check for text nodes to the right and left of this icon element
|
||||
this.iconLeft = (ele.nextSibling && ele.nextSibling.textContent || '').trim() !== '';
|
||||
@@ -92,6 +102,9 @@ export class IconDirective {
|
||||
}
|
||||
|
||||
onInit() {
|
||||
if (this.fwdIcon) {
|
||||
this.name = this.fwdIcon;
|
||||
}
|
||||
if (!this.name) return;
|
||||
|
||||
// add the css class to show the icon font
|
||||
|
||||
@@ -2,13 +2,102 @@
|
||||
// iOS Item
|
||||
// --------------------------------------------------
|
||||
|
||||
$item-ios-background-color: #fff !default;
|
||||
$item-ios-min-height: 44px !default;
|
||||
$item-ios-padding-left: 15px !default;
|
||||
$item-ios-accessory-color: #8e8e93 !default;
|
||||
$item-ios-border-color: $list-ios-border-color !default;
|
||||
$item-ios-font-size: 1.6rem !default;
|
||||
|
||||
$item-ios-padding-top: 13px !default;
|
||||
$item-ios-padding-right: 15px !default;
|
||||
$item-ios-padding-bottom: 14px !default;
|
||||
$item-ios-padding-left: 15px !default;
|
||||
|
||||
$item-ios-border-color: $list-ios-border-color !default;
|
||||
$item-ios-avatar-size: 4rem;
|
||||
$item-ios-thumbnail-size: 8rem;
|
||||
|
||||
|
||||
.list[mode="ios"] {
|
||||
|
||||
.item {
|
||||
font-size: $item-ios-font-size;
|
||||
margin-top: -1px;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: $item-ios-padding-left;
|
||||
border-top: 1px solid $item-ios-border-color;
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
content: '';
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: $item-ios-padding-left;
|
||||
border-top: 1px solid $item-ios-border-color;
|
||||
}
|
||||
|
||||
&:last-child:after {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.item-media,
|
||||
.item-content,
|
||||
.item-note {
|
||||
margin: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
|
||||
}
|
||||
|
||||
.item-note {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.item > icon {
|
||||
margin-left: $item-ios-padding-left;
|
||||
margin-right: $item-ios-padding-right;
|
||||
}
|
||||
|
||||
icon[forward] {
|
||||
font-size: 2rem;
|
||||
color: #cfcfcf;
|
||||
}
|
||||
|
||||
button {
|
||||
margin: 0 $item-ios-padding-right 0 $item-ios-padding-left;
|
||||
padding: 2px 6px;
|
||||
min-height: 26px;
|
||||
}
|
||||
|
||||
.badge {
|
||||
margin-right: $item-ios-padding-right;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
max-width: $item-ios-avatar-size;
|
||||
max-height: $item-ios-avatar-size;
|
||||
border-radius: $item-ios-avatar-size / 2;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
max-width: $item-ios-thumbnail-size;
|
||||
max-height: $item-ios-thumbnail-size;
|
||||
}
|
||||
|
||||
.vertical-align-top {
|
||||
button,
|
||||
[button] {
|
||||
margin-top: $item-ios-padding-top;
|
||||
}
|
||||
> icon {
|
||||
margin-top: $item-ios-padding-top / 2;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
.list[mode="ios"] {
|
||||
margin-top: -1px;
|
||||
|
||||
@@ -50,3 +139,4 @@ $item-ios-border-color: $list-ios-border-color !default;
|
||||
}
|
||||
|
||||
}
|
||||
*/
|
||||
|
||||
@@ -1,16 +1,135 @@
|
||||
|
||||
// Item
|
||||
// --------------------------------------------------
|
||||
|
||||
$item-min-height: 44px !default;
|
||||
$item-padding: 15px !default;
|
||||
|
||||
$item-divider-bg: #f5f5f5 !default;
|
||||
$item-divider-color: #222 !default;
|
||||
$item-divider-padding: 5px 15px !default;
|
||||
// Core structure only, dimensions belong in platform specific extensions
|
||||
|
||||
|
||||
.item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
min-height: 4.4rem;
|
||||
text-align: initial;
|
||||
}
|
||||
|
||||
a.item,
|
||||
button.item {
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
width: 100%;
|
||||
line-height: normal;
|
||||
justify-content: inherit;
|
||||
}
|
||||
|
||||
.item-content {
|
||||
margin: 0;
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.item-text-wrap,
|
||||
.item-text-wrap .item-content {
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.list .item {
|
||||
border-radius: 0;
|
||||
|
||||
icon:first-child {
|
||||
min-width: 26px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.activated {
|
||||
background-color: #d9d9d9;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.list .item.item {
|
||||
|
||||
.item-content + button,
|
||||
.item-content + [button],
|
||||
button + .item-content,
|
||||
[button] + .item-content,
|
||||
icon + icon,
|
||||
icon + .item-content,
|
||||
.item-content + icon,
|
||||
.item-media + .item-content,
|
||||
.item-content + .item-media {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.list a.item.item,
|
||||
.list button.item.item {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.list .item button.icon-only,
|
||||
.item button.icon-only icon {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item > button.icon-left icon,
|
||||
.item > button.icon-right icon {
|
||||
font-size: 1.2em;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.item {
|
||||
|
||||
h2 {
|
||||
margin: 0 0 2px;
|
||||
font-size: 1.6rem;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: normal;
|
||||
margin: 0 0 3px 0;
|
||||
font-size: 1.4rem;
|
||||
}
|
||||
|
||||
p {
|
||||
line-height: normal;
|
||||
color: #666;
|
||||
font-size: 1.4rem;
|
||||
margin: 0 0 2px;
|
||||
}
|
||||
|
||||
h2:last-child,
|
||||
h3:last-child,
|
||||
h4:last-child,
|
||||
h5:last-child,
|
||||
h6:last-child,
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.vertical-align-top {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
/*
|
||||
.item {
|
||||
position: relative;
|
||||
|
||||
@@ -192,3 +311,4 @@ ion-primary-swipe-buttons {
|
||||
line-height: 14px;
|
||||
color: #858585;
|
||||
}
|
||||
*/
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
import {App} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class IonicApp {
|
||||
constructor() {
|
||||
this.items = [1, 2, 3, 4, 5]
|
||||
}
|
||||
}
|
||||
@@ -1,121 +0,0 @@
|
||||
<ion-view nav-title="Item Accessories">
|
||||
|
||||
<ion-list>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
<div class="item-label">
|
||||
Item Label
|
||||
</div>
|
||||
<div class="item-media item-note">
|
||||
Item Note
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<icon class="item-media ion-ios-home"></icon>
|
||||
<div class="item-content">
|
||||
<div class="item-label">
|
||||
Icon Left, outside item-content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
<icon class="item-media ion-ios-home"></icon>
|
||||
<div class="item-label">
|
||||
Icon Left, inside item-content
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
<div class="item-label">
|
||||
Icon Right
|
||||
</div>
|
||||
<icon class="item-media ion-ios-arrow-forward"></icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
<div class="item-label">
|
||||
I tried to picture clusters of information
|
||||
as they moved through the computer.
|
||||
What do they look like?
|
||||
Ships, motorcycles?
|
||||
|
||||
With the circuits like freeways.
|
||||
I kept dreaming of a world
|
||||
I thought I'd never see.
|
||||
|
||||
And then, one day,
|
||||
I got in.
|
||||
</div>
|
||||
<div class="item-media">
|
||||
<div class="badge">
|
||||
5
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
<div class="item-media">
|
||||
</div>
|
||||
<div class="item-label">
|
||||
Red Balloons
|
||||
</div>
|
||||
<div class="item-media">
|
||||
<div class="badge">
|
||||
99
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-media item-avatar">
|
||||
<img style="background:gray; width:40px; height:40px;">
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<div class="item-label">
|
||||
Avatar Left, item-label
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
<div class="item-label">
|
||||
Avatar Right, item-label
|
||||
</div>
|
||||
<div class="item-media item-avatar">
|
||||
<img style="background:gray; width:40px; height:40px;">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-media item-avatar">
|
||||
<img style="background:gray; width:40px; height:40px;">
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<div class="item-label">
|
||||
<h2>
|
||||
Avatar Right, h2 header, p content
|
||||
</h2>
|
||||
<p>
|
||||
Your mother was a hamster and your father smelt of elderberries!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-list>
|
||||
|
||||
</ion-view>
|
||||
@@ -1,11 +0,0 @@
|
||||
import {App} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class IonicApp {
|
||||
constructor() {
|
||||
this.items = [1, 2, 3, 4, 5]
|
||||
}
|
||||
}
|
||||
@@ -1,19 +0,0 @@
|
||||
<ion-view nav-title="List of Items">
|
||||
<ion-list>
|
||||
<ion-list-header>
|
||||
List Header
|
||||
</ion-list-header>
|
||||
|
||||
<ion-item *ng-for="#item of items">
|
||||
|
||||
<ion-primary-swipe-buttons>
|
||||
<div style="width: 200px; background: red; height: 100%">
|
||||
</div>
|
||||
</ion-primary-swipe-buttons>
|
||||
|
||||
Item {{item}}
|
||||
|
||||
</ion-item>
|
||||
|
||||
</ion-list>
|
||||
</ion-view>
|
||||
104
ionic/components/item/test/buttons/main.html
Normal file
104
ionic/components/item/test/buttons/main.html
Normal file
@@ -0,0 +1,104 @@
|
||||
<ion-toolbar><ion-title>Items as Links/Buttons</ion-title></ion-toolbar>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<a class="item" href="#">
|
||||
<div class="item-content">
|
||||
a.item
|
||||
</div>
|
||||
<icon forward></icon>
|
||||
</a>
|
||||
|
||||
<a class="item activated" href="#">
|
||||
<div class="item-content">
|
||||
a.item.activated
|
||||
</div>
|
||||
<icon forward></icon>
|
||||
</a>
|
||||
|
||||
<button class="item">
|
||||
<div class="item-content">
|
||||
button.item
|
||||
</div>
|
||||
<icon forward></icon>
|
||||
</button>
|
||||
|
||||
<button class="item activated">
|
||||
<div class="item-content">
|
||||
button.item.activated
|
||||
</div>
|
||||
<icon forward></icon>
|
||||
</button>
|
||||
|
||||
<div class="item" href="#">
|
||||
<button primary>Edit</button>
|
||||
<div class="item-content">
|
||||
div.item left button[primary]
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item" href="#">
|
||||
<div class="item-content">
|
||||
div.item right button[outline][secondary]
|
||||
</div>
|
||||
<button secondary outline>Open</button>
|
||||
</div>
|
||||
|
||||
<div class="item" href="#">
|
||||
<div class="item-content">
|
||||
div.item icon only button
|
||||
</div>
|
||||
<button>
|
||||
<icon name="ion-help-circled"></icon>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="item" href="#">
|
||||
<div class="item-content">
|
||||
div.item right icon/text button
|
||||
</div>
|
||||
<button primary>
|
||||
<icon name="ion-refresh"></icon>
|
||||
Refresh
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="item" href="#">
|
||||
<button primary clear>
|
||||
<icon name="ion-wrench"></icon>
|
||||
Fix
|
||||
</button>
|
||||
<div class="item-content">
|
||||
div.item left clear button
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item" href="#">
|
||||
<div class="item-content">
|
||||
div.item right clear button
|
||||
</div>
|
||||
<button secondary clear>
|
||||
Edit
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="item" href="#">
|
||||
<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 primary outline>View</button>
|
||||
</div>
|
||||
|
||||
</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>
|
||||
|
||||
1
ionic/components/item/test/icons/e2e.ts
Normal file
1
ionic/components/item/test/icons/e2e.ts
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
7
ionic/components/item/test/icons/index.ts
Normal file
7
ionic/components/item/test/icons/index.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import {App} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class IonicApp {}
|
||||
81
ionic/components/item/test/icons/main.html
Normal file
81
ionic/components/item/test/icons/main.html
Normal file
@@ -0,0 +1,81 @@
|
||||
<ion-toolbar><ion-title>Item Icons</ion-title></ion-toolbar>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
Div with forward icon
|
||||
</div>
|
||||
<icon forward></icon>
|
||||
</div>
|
||||
|
||||
<a class="item" href="#">
|
||||
<div class="item-content">
|
||||
Link with forward icon
|
||||
</div>
|
||||
<icon forward></icon>
|
||||
</a>
|
||||
|
||||
<button class="item">
|
||||
<div class="item-content">
|
||||
Button with forward icon
|
||||
</div>
|
||||
<icon forward></icon>
|
||||
</button>
|
||||
|
||||
<a class="item" href="#">
|
||||
<div class="item-content">
|
||||
Link with right side icon
|
||||
</div>
|
||||
<icon name="ion-ios-information-outline"></icon>
|
||||
</a>
|
||||
|
||||
<button class="item">
|
||||
<icon name="ion-star"></icon>
|
||||
<div class="item-content">
|
||||
Button with left side icon
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<button class="item">
|
||||
<icon name="ion-flag"></icon>
|
||||
<div class="item-content">
|
||||
Button with both side icons
|
||||
</div>
|
||||
<icon name="ion-settings"></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>
|
||||
|
||||
<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>
|
||||
|
||||
<button class="item">
|
||||
<div class="item-content">
|
||||
Red Balloons
|
||||
</div>
|
||||
<div class="badge">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>
|
||||
1
ionic/components/item/test/media/e2e.ts
Normal file
1
ionic/components/item/test/media/e2e.ts
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
7
ionic/components/item/test/media/index.ts
Normal file
7
ionic/components/item/test/media/index.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import {App} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class IonicApp {}
|
||||
58
ionic/components/item/test/media/main.html
Normal file
58
ionic/components/item/test/media/main.html
Normal file
@@ -0,0 +1,58 @@
|
||||
<ion-toolbar><ion-title>Item Media</ion-title></ion-toolbar>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<button class="item">
|
||||
<div class="item-media">
|
||||
<div class="avatar"></div>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
Media/Avatar left, button.item
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<a class="item" href="#">
|
||||
<div class="item-content">
|
||||
Media/Thumbnail right side, a.item
|
||||
</div>
|
||||
<div class="item-media">
|
||||
<div class="thumbnail"></div>
|
||||
</div>
|
||||
</a>
|
||||
|
||||
<div class="item vertical-align-top">
|
||||
<div class="item-media">
|
||||
<div class="thumbnail"></div>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<h3>Media w/ Multiline</h3>
|
||||
<p>Button on right</p>
|
||||
<p>Vertically align top</p>
|
||||
</div>
|
||||
<button primary outline>View</button>
|
||||
</div>
|
||||
|
||||
<button class="item vertical-align-top">
|
||||
<div class="item-media">
|
||||
<div class="thumbnail"></div>
|
||||
</div>
|
||||
<div class="item-content">
|
||||
<h3>Media w/ Multiline</h3>
|
||||
<p>Icon on right</p>
|
||||
<p>Vertically align top</p>
|
||||
<p>button.item</p>
|
||||
</div>
|
||||
<icon name="ion-close-circled"></icon>
|
||||
</button>
|
||||
|
||||
</ion-list>
|
||||
|
||||
<style>
|
||||
.avatar,
|
||||
.thumbnail {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background: black;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
1
ionic/components/item/test/text/e2e.ts
Normal file
1
ionic/components/item/test/text/e2e.ts
Normal file
@@ -0,0 +1 @@
|
||||
|
||||
7
ionic/components/item/test/text/index.ts
Normal file
7
ionic/components/item/test/text/index.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import {App} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class IonicApp {}
|
||||
53
ionic/components/item/test/text/main.html
Normal file
53
ionic/components/item/test/text/main.html
Normal file
@@ -0,0 +1,53 @@
|
||||
<ion-toolbar><ion-title>Item Text</ion-title></ion-toolbar>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
Plain Ol' div with some text
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
|
||||
<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>
|
||||
@@ -15,7 +15,7 @@ $list-ios-footer-color: #8f8f94 !default;
|
||||
|
||||
|
||||
.list[mode="ios"] {
|
||||
|
||||
/*
|
||||
.list-header {
|
||||
position: relative;
|
||||
margin: $list-ios-header-margin;
|
||||
@@ -35,5 +35,5 @@ $list-ios-footer-color: #8f8f94 !default;
|
||||
font-size: $list-ios-footer-font-size;
|
||||
color: $list-ios-footer-color;
|
||||
}
|
||||
|
||||
*/
|
||||
}
|
||||
|
||||
@@ -2,12 +2,17 @@
|
||||
// List
|
||||
// --------------------------------------------------
|
||||
|
||||
$list-margin-top: 0px !default;
|
||||
$list-margin-bottom: 0px !default;
|
||||
|
||||
.list {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
.list-header {
|
||||
position: relative;
|
||||
margin-top: $list-margin-top;
|
||||
margin-bottom: $list-margin-bottom;
|
||||
overflow: hidden;
|
||||
@@ -42,3 +47,4 @@ $list-margin-bottom: 0px !default;
|
||||
.list-header + .list {
|
||||
margin-top: 0;
|
||||
}
|
||||
*/
|
||||
|
||||
@@ -1,91 +0,0 @@
|
||||
|
||||
<ion-view nav-title="List">
|
||||
|
||||
<ion-content class="padding">
|
||||
|
||||
<ion-list inset>
|
||||
<div class="list-header">
|
||||
I'm a header!
|
||||
</div>
|
||||
<ion-item>
|
||||
<input control="email" type="email" placeholder="Your email">
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
|
||||
<ion-list inset>
|
||||
|
||||
<div class="list-header">
|
||||
List Header
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
<div class="item-title">
|
||||
Item
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="list-footer">
|
||||
List Footer
|
||||
</div>
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
<div class="list-header">
|
||||
List Header
|
||||
</div>
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
<div class="item-title">
|
||||
Item
|
||||
<div class="item-subtitle">
|
||||
A really cool item
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<div class="list-header">
|
||||
List Header
|
||||
</div>
|
||||
|
||||
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
<div class="item-title">
|
||||
Item
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-list>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
<div class="item-title">
|
||||
Item
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item">
|
||||
<div class="item-content">
|
||||
<div class="item-title">
|
||||
Item
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</ion-list>
|
||||
|
||||
|
||||
</ion-content>
|
||||
|
||||
</ion-view>
|
||||
Reference in New Issue
Block a user