feat(list): add list headers and item dividers as items

- `ion-list-header` and `ion-item-divider` now take advantage of the same content projection as the `ion-item` - they are still styled as list headers and item dividers - added docs and demos on this addition closes #5561
2025-08-20 12:29:55 +08:00 · 2016-06-22 13:01:55 -04:00
parent 4aa322d33b
commit 712ff81fb5
25 changed files with 402 additions and 110 deletions
--- a/demos/item/index.ts
+++ b/demos/item/index.ts
@ -1,12 +1,19 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+import { Component } from '@angular/core';
+
+import { ionicBootstrap } from 'ionic-angular';

-// Uses the list's demo but passes the demo var to change the title
@Component({
-  templateUrl: '../list/main.html'
+  templateUrl: 'main.html'
+})
+class ApiDemoPage {
+
+}
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
 })
 class ApiDemoApp {
-  demo = "Item";
+  root = ApiDemoPage;
 }

 ionicBootstrap(ApiDemoApp);
--- a/demos/item/main.html
+++ b/demos/item/main.html
@ -0,0 +1,100 @@
+<ion-header>
+
+  <ion-toolbar>
+    <ion-title>Item</ion-title>
+  </ion-toolbar>
+
+</ion-header>
+
+
+<ion-content class="outer-content">
+
+  <ion-list>
+    <ion-list-header>
+      Settings
+      <button item-right clear>
+        <ion-icon name="cog"></ion-icon>
+      </button>
+    </ion-list-header>
+
+    <ion-item-group>
+      <ion-item>
+        <ion-icon name="plane" item-left danger></ion-icon>
+        <ion-label>Airplane Mode</ion-label>
+        <ion-toggle secondary></ion-toggle>
+      </ion-item>
+
+      <button ion-item>
+        <ion-icon name="wifi" item-left primary></ion-icon>
+        <ion-label>Wi-Fi</ion-label>
+        <ion-note item-right>The Interwebz</ion-note>
+      </button>
+
+      <button ion-item>
+        <ion-icon name="bluetooth" item-left primary></ion-icon>
+        <ion-label>Bluetooth</ion-label>
+        <ion-note item-right>Off</ion-note>
+      </button>
+    </ion-item-group>
+
+    <ion-item-divider primary>
+      Other Settings
+      <button item-right outline light>Clear</button>
+    </ion-item-divider>
+
+    <button ion-item>
+      <ion-icon name="call" item-left secondary></ion-icon>
+      <ion-label>Cellular</ion-label>
+    </button>
+
+    <button ion-item>
+      <ion-icon name="link" item-left secondary></ion-icon>
+      <ion-label>Personal Hotspot</ion-label>
+      <ion-note item-right>Off</ion-note>
+    </button>
+  </ion-list>
+
+  <ion-list radio-group>
+    <ion-list-header>
+      <ion-icon item-left name="phone-portrait"></ion-icon>
+      Silence Phone
+    </ion-list-header>
+
+    <ion-item>
+      <ion-label dark>Always</ion-label>
+      <ion-radio value="always" checked></ion-radio>
+    </ion-item>
+    <ion-item>
+      <ion-label dark>Only while phone is locked</ion-label>
+      <ion-radio value="locked"></ion-radio>
+    </ion-item>
+  </ion-list>
+
+  <ion-list>
+    <ion-list-header>
+      Apps Installed
+    </ion-list-header>
+
+    <ion-item>
+      <ion-icon name="ionic" item-left primary></ion-icon>
+      <ion-label>Ionic View</ion-label>
+      <button outline item-right>Uninstall</button>
+    </ion-item>
+    <ion-item>
+      <ion-icon name="brush" item-left primary></ion-icon>
+      <ion-label>Ionic Creator</ion-label>
+      <button outline item-right>Uninstall</button>
+    </ion-item>
+    <ion-item>
+      <ion-icon name="logo-octocat" item-left dark></ion-icon>
+      <ion-label>Hubstruck</ion-label>
+      <button outline item-right>Uninstall</button>
+    </ion-item>
+    <ion-item>
+      <ion-icon name="paw" item-left danger></ion-icon>
+      <ion-label>Barkpark</ion-label>
+      <button outline item-right>Uninstall</button>
+    </ion-item>
+  </ion-list>
+
+</ion-content>
--- a/demos/list/index.ts
+++ b/demos/list/index.ts
@ -1,12 +1,19 @@
-import {Component} from '@angular/core';
-import {ionicBootstrap} from 'ionic-angular';
+import { Component } from '@angular/core';

+import { ionicBootstrap } from 'ionic-angular';

@Component({
  templateUrl: 'main.html'
 })
+class ApiDemoPage {
+
+}
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
 class ApiDemoApp {
-  demo = "List";
+  root = ApiDemoPage;
 }

 ionicBootstrap(ApiDemoApp);
--- a/demos/list/main.html
+++ b/demos/list/main.html
@ -1,7 +1,7 @@
 <ion-header>

  <ion-toolbar>
-    <ion-title>{{demo}}</ion-title>
+    <ion-title>List</ion-title>
  </ion-toolbar>

 </ion-header>
--- a/src/components/card/card.ios.scss
+++ b/src/components/card/card.ios.scss
@ -48,14 +48,6 @@ ion-card {

  ion-list {
    margin-bottom: 0;
-
-    .item {
-      padding-right: 0;
-    }
-
-    ion-label {
-      padding: 0;
-    }
  }

  > .item:last-child,
@ -63,7 +55,7 @@ ion-card {
    border-bottom: 0;
  }

-  .item-inner {
+  .item .item-inner {
    border: 0;
  }

--- a/src/components/card/card.md.scss
+++ b/src/components/card/card.md.scss
@ -50,14 +50,6 @@ ion-card {

  ion-list {
    margin-bottom: 0;
-
-    ion-label {
-      padding: 0;
-    }
-
-    .item-inner {
-      border-bottom: 1px solid $list-md-border-color;
-    }
  }

  > .item:last-child,
@ -65,7 +57,7 @@ ion-card {
    border-bottom: 0;
  }

-  .item-inner {
+  .item .item-inner {
    border: 0;
  }

--- a/src/components/card/card.wp.scss
+++ b/src/components/card/card.wp.scss
@ -51,14 +51,6 @@ ion-card {

  ion-list {
    margin-bottom: 0;
-
-    ion-label {
-      padding: 0;
-    }
-
-    .item-inner {
-      border-bottom: 1px solid $list-wp-border-color;
-    }
  }

  > .item:last-child,
@ -66,7 +58,7 @@ ion-card {
    border-bottom: 0;
  }

-  .item-inner {
+  .item .item-inner {
    border: 0;
  }

--- a/src/components/input/test/clear-input/index.ts
+++ b/src/components/input/test/clear-input/index.ts
@ -7,6 +7,10 @@ import {ionicBootstrap} from '../../../../../src';
 })
 class E2EPage {
  myValue = 'value';
+
+  clicked() {
+    console.log("clicked button");
+  }
 }

@Component({
--- a/src/components/input/test/clear-input/main.html
+++ b/src/components/input/test/clear-input/main.html
@ -12,10 +12,16 @@
  <ion-list>

    <ion-item>
-      <ion-label>Text 1:</ion-label>
+      <ion-label>Input Clear:</ion-label>
      <ion-input class="e2eClearInput" [(ngModel)]="myValue" clearInput></ion-input>
    </ion-item>

+    <ion-item>
+      <ion-label>Button:</ion-label>
+      <ion-input class="e2eClearInput" [(ngModel)]="myValue"></ion-input>
+      <button item-right (click)="clicked()">Button</button>
+    </ion-item>
+
  </ion-list>

 </ion-content>
--- a/src/components/item/item.ios.scss
+++ b/src/components/item/item.ios.scss
@ -88,7 +88,7 @@ $item-ios-sliding-content-background:     $list-ios-background-color !default;
  transition-duration: 0ms;
 }

-.item-inner {
+.item .item-inner {
  padding-right: ($item-ios-padding-right / 2);

  border-bottom: 1px solid $list-ios-border-color;
@ -211,7 +211,7 @@ ion-item-group {
 // --------------------------------------------------

 ion-item-divider {
-  padding: $item-ios-padding-top $item-ios-padding-right $item-ios-padding-bottom $item-ios-padding-left;
+  padding-left: $item-ios-padding-left;

  color: $item-ios-divider-color;
  background-color: $item-ios-divider-background;
--- a/src/components/item/item.md.scss
+++ b/src/components/item/item.md.scss
@ -81,7 +81,7 @@ $item-md-sliding-content-background: $list-md-background-color !default;
  border-width: 0;
 }

-.item-inner {
+.item .item-inner {
  padding-right: ($item-md-padding-right / 2);

  border-bottom: 1px solid $list-md-border-color;
@ -202,7 +202,7 @@ ion-item-group {
 // --------------------------------------------------

 ion-item-divider {
-  padding: $item-md-padding-top $item-md-padding-right $item-md-padding-bottom $item-md-padding-left;
+  padding-left: $item-md-padding-left;

  color: $item-md-divider-color;
  background-color: $item-md-divider-background;
--- a/src/components/item/item.scss
+++ b/src/components/item/item.scss
@ -67,9 +67,17 @@ ion-item-group {

 ion-item-divider {
  z-index: 1000;
-  display: block;
+  display: flex;
+  overflow: hidden;
+
+  align-items: center;
+  justify-content: space-between;
+
+  margin: 0;
+  padding: 0;

  width: 100%;
+
  min-height: 30px;

  &[sticky] {
--- a/src/components/item/item.ts
+++ b/src/components/item/item.ts
@ -1,10 +1,10 @@
-import {Component, ContentChildren, forwardRef, Input, ViewChild, ContentChild, Renderer, ElementRef, ChangeDetectionStrategy, ViewEncapsulation} from '@angular/core';
+import { ChangeDetectionStrategy, Component, ContentChild, ContentChildren, Directive, ElementRef, forwardRef, Input, Renderer, ViewChild, ViewEncapsulation } from '@angular/core';

-import {Button} from '../button/button';
-import {Form} from '../../util/form';
-import {Icon} from '../icon/icon';
-import {Label} from '../label/label';
-import {ItemReorder} from './item-reorder';
+import { Button } from '../button/button';
+import { Form } from '../../util/form';
+import { Icon } from '../icon/icon';
+import { ItemReorder } from '../item/item-reorder';
+import { Label } from '../label/label';


 /**
@ -17,11 +17,13 @@ import {ItemReorder} from './item-reorder';
 *
 *
 * ## Common Usage
- * An item can be written as an `<ion-item>` element or it can be added to any element by adding
- * `ion-item` as an attribute.
+ * There are a few elements that are considered items, but not all of them are styled to look the same.
+ * The basic item can be written as an `<ion-item>` element or it can be added to any element by adding
+ * `ion-item` as an attribute. List headers and item dividers, although styled differently, are also items
+ * and can be written as `<ion-list-header>` and `<ion-item-divider>`, respectively.
 *
 * ### As an Element
- * An item should be written as a `<ion-item>` element when it is not clickable.
+ * A basic item should be written as a `<ion-item>` element when it is not clickable.
 *
 * ```html
 * <ion-item>
@ -29,6 +31,22 @@ import {ItemReorder} from './item-reorder';
 * </ion-item>
 * ```
 *
+ * A list header should be written as `<ion-list-header>`.
+ *
+ * ```html
+ * <ion-list-header>
+ *   List Header
+ * </ion-list-header>
+ * ```
+ *
+ * An item divider should be written as `<ion-item-divider>`.
+ *
+ * ```html
+ * <ion-item-divider>
+ *   Item Divider
+ * </ion-item-divider>
+ * ```
+ *
 * ### As an Attribute
 * The attribute `ion-item` should be added to a `<button>` when the item can be clicked or tapped. It
 * should be added to an `<a>` element when the item needs to contain a `href`. It can be added as an
@ -44,6 +62,9 @@ import {ItemReorder} from './item-reorder';
 * </a>
 * ```
 *
+ * Note: do not add `ion-item` as an attribute to an `<ion-list-header>` or `<ion-item-divider>` element
+ * as they are already items and their styling will be changed to look like a basic item.
+ *
 * ## Detail Arrows
 * By default, `<button>` and `<a>` elements with the `ion-item` attribute will display a right arrow icon
 * on `ios` mode. To hide the right arrow icon on either of these elements, add the `detail-none` attribute
@ -107,6 +128,10 @@ import {ItemReorder} from './item-reorder';
 * ```html
 * <ion-list>
 *
+ *   <ion-list-header>
+ *     Header
+ *   </ion-list-header>
+ *
 *   <ion-item>
 *     Item
 *   </ion-item>
@ -119,6 +144,10 @@ import {ItemReorder} from './item-reorder';
 *     Button Item
 *   </button>
 *
+ *   <ion-item-divider>
+ *     Item Divider
+ *   </ion-item-divider>
+ *
 *   <button ion-item detail-none (click)="buttonClick()">
 *     Button Item with no Detail Arrow
 *   </button>
@ -145,6 +174,13 @@ import {ItemReorder} from './item-reorder';
 * ```html
 * <ion-list>
 *
+ *   <!-- List header with buttons on each side -->
+ *   <ion-list-header>
+ *     <button item-left (click)="buttonClick()">Button</button>
+ *     List Header
+ *     <button outline item-right (click)="buttonClick()">Outline</button>
+ *   </ion-list-header>
+ *
 *   <!-- Loops through and creates multiple items -->
 *   <ion-item *ngFor="let item of items">
 *     Item {% raw %}{{item}}{% endraw %}
@ -173,6 +209,12 @@ import {ItemReorder} from './item-reorder';
 *     <button outline item-right (click)="buttonClick()">Outline</button>
 *   </ion-item>
 *
+ *   <!-- Item divider with a right button -->
+ *   <ion-item-divider>
+ *     Item Divider
+ *     <button item-right>Button</button>
+ *   </ion-item-divider>
+ *
 *   <!-- Disabled button item with left and right buttons -->
 *   <button ion-item disabled>
 *     <button item-left (click)="buttonClick()">
@ -224,7 +266,7 @@ import {ItemReorder} from './item-reorder';
 * @see {@link ../ItemSliding ItemSliding API Docs}
 */
@Component({
-  selector: 'ion-item,[ion-item]',
+  selector: 'ion-list-header,ion-item,[ion-item],ion-item-divider',
  template:
    '<ng-content select="[item-left],ion-checkbox:not([item-right])"></ng-content>' +
    '<div class="item-inner">' +
@ -239,9 +281,6 @@ import {ItemReorder} from './item-reorder';
      '<ion-reorder></ion-reorder>' +
    '</div>' +
    '<ion-button-effect></ion-button-effect>',
-  host: {
-    'class': 'item'
-  },
  directives: [forwardRef(() => ItemReorder)],
  changeDetection: ChangeDetectionStrategy.OnPush,
  encapsulation: ViewEncapsulation.None,
@ -256,7 +295,7 @@ export class Item {
   * @private
   */
  @Input() index: number;
-  
+
  /**
   * @private
   */
@ -366,8 +405,21 @@ export class Item {

  /**
   * @private
-   */  
+   */
  height(): number {
    return this._elementRef.nativeElement.offsetHeight;
  }
 }
+
+/**
+ * @private
+ */
+@Directive({
+  selector: 'ion-item,[ion-item]',
+  host: {
+    'class': 'item'
+  }
+})
+export class ItemContent {
+
+}
--- a/src/components/item/item.wp.scss
+++ b/src/components/item/item.wp.scss
@ -82,7 +82,7 @@ $item-wp-sliding-content-background: $list-wp-background-color !default;
  border-width: 0;
 }

-.item-inner {
+.item .item-inner {
  padding-right: ($item-wp-padding-right / 2);

  border-bottom: 1px solid $list-wp-border-color;
@ -191,7 +191,7 @@ ion-note {
 // --------------------------------------------------

 ion-item-divider {
-  padding: $item-wp-padding-top $item-wp-padding-right $item-wp-padding-bottom $item-wp-padding-left;
+  padding-left: $item-wp-padding-left;

  color: $item-wp-divider-color;
  background-color: $item-wp-divider-background;
--- a/src/components/item/test/dividers/main.html
+++ b/src/components/item/test/dividers/main.html
@ -13,15 +13,12 @@
    <ion-item>
      Plain Ol' div with some text
    </ion-item>
-
-    <ion-item>
-      Single line text that should have ellipses when it doesn't all fit in the item
-    </ion-item>
  </ion-item-group>

  <ion-item-group>
    <ion-item-divider>
      Item Divider
+      <button item-right>button</button>
    </ion-item-divider>

    <ion-item text-wrap>
@ -31,37 +28,51 @@
  </ion-item-group>

  <ion-item-group>
-    <ion-item-divider dark>Dark</ion-item-divider>
+    <ion-item-divider dark>
+      <button item-left clear>
+        <ion-icon name="cloudy"></ion-icon>
+      </button>
+      <button item-left clear light>
+        <ion-icon name="rainy"></ion-icon>
+      </button>
+      Dark
+    </ion-item-divider>

    <ion-item text-wrap>
      <h1>H1 Title Text</h1>
-      <p>Paragraph line 1</p>
    </ion-item>

    <ion-item text-wrap>
      <h2>H2 Title Text</h2>
-      <p>Paragraph line 1</p>
    </ion-item>
  </ion-item-group>

  <ion-item-group>
-    <ion-item-divider light>Light</ion-item-divider>
+    <ion-item-divider light>
+      <ion-avatar item-left>
+        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+      </ion-avatar>
+      Light
+      <button item-right clear danger>
+        <ion-icon name="sunny"></ion-icon>
+      </button>
+    </ion-item-divider>

    <ion-item text-wrap>
      <h3>H3 Title Text</h3>
-      <p>Paragraph line 1</p>
-      <p>Paragraph line 2</p>
    </ion-item>
  </ion-item-group>

  <ion-item-group>
-    <ion-item-divider primary>Primary</ion-item-divider>
+    <ion-item-divider primary>
+      Primary
+      <ion-thumbnail item-right>
+        <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+      </ion-thumbnail>
+    </ion-item-divider>

    <ion-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-item-group>

@ -80,5 +91,10 @@
      </ion-label>
    </ion-item>
  </ion-item-group>
-
 </ion-content>
+
+<style>
+  img {
+    height: 100px;
+  }
+</style>
--- a/src/components/list/list.ios.scss
+++ b/src/components/list/list.ios.scss
@ -15,7 +15,7 @@ $list-inset-ios-margin-bottom:        16px !default;
 $list-inset-ios-margin-left:          16px !default;
 $list-inset-ios-border-radius:        4px !default;

-$list-ios-header-padding:             10px $item-ios-padding-right 10px $item-ios-padding-left !default;
+$list-ios-header-padding-left:             $item-ios-padding-left !default;
 $list-ios-header-font-size:           1.2rem !default;
 $list-ios-header-font-weight:         500 !default;
 $list-ios-header-letter-spacing:      .1rem !default;
@ -29,7 +29,7 @@ $list-ios-header-color:               #333 !default;
 ion-list-header {
  position: relative;

-  padding: $list-ios-header-padding;
+  padding-left: $list-ios-header-padding-left;

  border-bottom: 1px solid $list-ios-border-color;
  font-size: $list-ios-header-font-size;
@ -58,7 +58,7 @@ ion-list {
    }
  }

-  .item-inner {
+  .item .item-inner {
    border-bottom: 1px solid $list-ios-border-color;
  }

@ -97,8 +97,6 @@ ion-list {
 }

 ion-list + ion-list {
-  margin-top: $list-ios-margin-top + $list-ios-margin-bottom;
-
  ion-list-header {
    margin-top: -$list-ios-margin-top;
    padding-top: 0;
--- a/src/components/list/list.md.scss
+++ b/src/components/list/list.md.scss
@ -15,7 +15,7 @@ $list-inset-md-margin-bottom:    16px !default;
 $list-inset-md-margin-left:      16px !default;
 $list-inset-md-border-radius:    2px !default;

-$list-md-header-padding:         16px $item-md-padding-right 16px $item-md-padding-left !default;
+$list-md-header-padding-left:         $item-md-padding-left !default;
 $list-md-header-font-size:       1.4rem !default;
 $list-md-header-color:           #858585 !default;

@ -27,7 +27,7 @@ $list-md-header-color:           #858585 !default;
 ion-list-header,
 ion-item-divider {
  margin-left: 0;
-  padding: $list-md-header-padding;
+  padding-left: $list-md-header-padding-left;

  border-bottom: 1px solid $list-md-border-color;
  font-size: $list-md-header-font-size;
@ -37,7 +37,7 @@ ion-item-divider {
 ion-list {
  margin: 0 $list-md-margin-right $list-md-margin-bottom $list-md-margin-left;

-  .item-inner {
+  .item .item-inner {
    border-bottom: 1px solid $list-md-border-color;
  }

@ -93,8 +93,6 @@ ion-list {
  }

  + ion-list {
-    margin-top: $list-md-margin-top + $list-md-margin-bottom;
-
    ion-list-header {
      margin-top: -$list-md-margin-top;
      padding-top: 0;
--- a/src/components/list/list.scss
+++ b/src/components/list/list.scss
@ -4,11 +4,17 @@
 // --------------------------------------------------

 ion-list-header {
-  display: block;
+  display: flex;
  overflow: hidden;

-  text-overflow: ellipsis;
-  white-space: nowrap;
+  align-items: center;
+  justify-content: space-between;
+
+  margin: 0;
+  padding: 0;
+
+  width: 100%;
+  min-height: 4rem;
 }

 ion-list {
--- a/src/components/list/list.ts
+++ b/src/components/list/list.ts
@ -1,11 +1,11 @@
-import {Directive, ElementRef, EventEmitter, Renderer, Input, Optional, Output, Attribute, NgZone} from '@angular/core';
+import { Attribute, Directive, ElementRef, EventEmitter, Input, NgZone, Optional, Output, Renderer } from '@angular/core';

-import {Content} from '../content/content';
-import {Ion} from '../ion';
-import {ItemSlidingGesture} from '../item/item-sliding-gesture';
-import {ItemReorderGesture} from '../item/item-reorder-gesture';
-import {isTrueProperty} from '../../util/util';
-import {nativeTimeout} from '../../util/dom';
+import { Content } from '../content/content';
+import { Ion } from '../ion';
+import { isTrueProperty } from '../../util/util';
+import { ItemSlidingGesture } from '../item/item-sliding-gesture';
+import { ItemReorderGesture } from '../item/item-reorder-gesture';
+import { nativeTimeout } from '../../util/dom';

 /**
 * The List is a widely used interface element in almost any mobile app,
@ -26,7 +26,7 @@ import {nativeTimeout} from '../../util/dom';
@Directive({
  selector: 'ion-list',
  host: {
-    '[class.reorder-enabled]': '_enableReorder', 
+    '[class.reorder-enabled]': '_enableReorder',
  }
 })
 export class List extends Ion {
@ -79,7 +79,6 @@ export class List extends Ion {
    if (shouldEnable) {
      console.debug('enableSlidingItems');
      nativeTimeout(() => this._slidingGesture = new ItemSlidingGesture(this));
-
    } else {
      this._slidingGesture && this._slidingGesture.unlisten();
    }
@ -125,7 +124,7 @@ export class List extends Ion {

  /**
   * @private
-   */  
+   */
  scrollContent(scroll: number) {
    let scrollTop = this._content.getScrollTop() + scroll;
    if (scroll !== 0) {
@ -133,10 +132,10 @@ export class List extends Ion {
    }
    return scrollTop;
  }
-  
+
  /**
   * @private
-   */  
+   */
  reorderReset() {
    let children = this.elementRef.nativeElement.children;
    let len = children.length;
@ -145,10 +144,10 @@ export class List extends Ion {
    }
    this._lastToIndex = -1;
  }
-  
+
  /**
   * @private
-   */  
+   */
  reorderMove(fromIndex: number, toIndex: number, itemHeight: number) {
    if (this._lastToIndex === -1) {
      this._lastToIndex = fromIndex;
@ -176,7 +175,7 @@ export class List extends Ion {
    }
  }

-  @Input()  
+  @Input()
  get reorder(): boolean {
    return this._enableReorder;
  }
@ -207,7 +206,6 @@ export class List extends Ion {
  selector: 'ion-list-header'
 })
 export class ListHeader {
-
  constructor(private _renderer: Renderer, private _elementRef: ElementRef, @Attribute('id') private _id: string) { }

  public get id(): string {
@ -218,5 +216,4 @@ export class ListHeader {
    this._id = val;
    this._renderer.setElementAttribute(this._elementRef.nativeElement, 'id', val);
  }
-
 }
--- a/src/components/list/list.wp.scss
+++ b/src/components/list/list.wp.scss
@ -15,7 +15,7 @@ $list-inset-wp-margin-bottom:    16px !default;
 $list-inset-wp-margin-left:      16px !default;
 $list-inset-wp-border-radius:    2px !default;

-$list-wp-header-padding:         16px $item-wp-padding-right 16px $item-wp-padding-left !default;
+$list-wp-header-padding-left:    $item-wp-padding-left !default;
 $list-wp-header-font-size:       2rem !default;
 $list-wp-header-color:           $list-wp-text-color !default;

@ -27,7 +27,7 @@ $list-wp-header-color:           $list-wp-text-color !default;
 ion-list-header,
 ion-item-divider {
  margin-left: 0;
-  padding: $list-wp-header-padding;
+  padding-left: $list-wp-header-padding-left;

  border-bottom: 1px solid $list-wp-border-color;
  font-size: $list-wp-header-font-size;
@ -37,7 +37,7 @@ ion-item-divider {
 ion-list {
  margin: 0 $list-wp-margin-right $list-wp-margin-bottom $list-wp-margin-left;

-  .item-inner {
+  .item .item-inner {
    border-bottom: 1px solid $list-wp-border-color;
  }

@ -93,8 +93,6 @@ ion-list {
  }

  + ion-list {
-    margin-top: $list-wp-margin-top + $list-wp-margin-bottom;
-
    ion-list-header {
      margin-top: -$list-wp-margin-top;
      padding-top: 0;
--- a/src/components/list/test/header-scenarios/e2e.ts
+++ b/src/components/list/test/header-scenarios/e2e.ts
--- a/src/components/list/test/header-scenarios/index.ts
+++ b/src/components/list/test/header-scenarios/index.ts
@ -0,0 +1,22 @@
+import {Component} from '@angular/core';
+import {ionicBootstrap} from '../../../../../src';
+
+
+@Component({
+  templateUrl: 'main.html'
+})
+class E2EPage {
+  testClick(ev: UIEvent) {
+    console.log(ev);
+  }
+}
+
+
+@Component({
+  template: '<ion-nav [root]="root"></ion-nav>'
+})
+class E2EApp {
+  root = E2EPage;
+}
+
+ionicBootstrap(E2EApp);
--- a/src/components/list/test/header-scenarios/main.html
+++ b/src/components/list/test/header-scenarios/main.html
@ -0,0 +1,93 @@
+<ion-toolbar><ion-title>Items as Links/Buttons</ion-title></ion-toolbar>
+
+<ion-content class="outer-content">
+  <ion-list>
+    <ion-list-header>
+      ion-list-header
+    </ion-list-header>
+
+    <ion-list-header text-wrap>
+      This is multiline text that has a
+      long description of about how the text is really long
+      and a <a href="#" (click)="testClick($event)">link</a>.
+      <button outline item-right (click)="testClick($event)">View</button>
+    </ion-list-header>
+
+    <ion-list-header>
+      <button item-left (click)="testClick($event)">Default</button>
+      Inner Buttons
+      <button outline item-right (click)="testClick($event)">Outline</button>
+    </ion-list-header>
+
+    <ion-list-header disabled>
+      <button item-left (click)="testClick($event)">
+        <ion-icon name="home"></ion-icon>
+        Left Icon
+      </button>
+      disabled left icon buttons
+      <button outline item-right (click)="testClick($event)">
+        <ion-icon name="star"></ion-icon>
+        Left Icon
+      </button>
+    </ion-list-header>
+
+    <ion-list-header>
+      <button item-left (click)="testClick($event)">
+        Right Icon
+        <ion-icon name="home"></ion-icon>
+      </button>
+      right icon buttons
+      <button outline item-right (click)="testClick($event)">
+        Right Icon
+        <ion-icon name="star"></ion-icon>
+      </button>
+    </ion-list-header>
+
+    <ion-list-header>
+      <button clear item-left default (click)="testClick($event)">
+        <ion-icon name="navigate"></ion-icon>
+      </button>
+      icon only buttons default
+      <button clear item-right default (click)="testClick($event)">
+        <ion-icon name="navigate"></ion-icon>
+      </button>
+    </ion-list-header>
+
+    <ion-list-header>
+      ion-list-header right icon/text button large
+      <button item-right large (click)="testClick($event)">
+        <ion-icon name="refresh"></ion-icon>
+        Refresh
+      </button>
+    </ion-list-header>
+
+    <ion-list-header>
+      <button clear item-left small (click)="testClick($event)">
+        <ion-icon name="settings"></ion-icon>
+        Settings
+      </button>
+      ion-list-header left clear button small
+    </ion-list-header>
+
+    <ion-list-header>
+      ion-list-header right clear button
+      <button secondary clear item-right (click)="testClick($event)">
+        Edit
+      </button>
+    </ion-list-header>
+
+    <ion-list-header *ngFor="let data of [0,1,2,3,4]; let i = index" [class.activated]="i == 1">
+      <ion-avatar item-left>
+          <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAAAAAAALAAAAAABAAEAAAICTAEAOw==">
+      </ion-avatar>
+      <p>ng-for {{i}}</p>
+      <ion-badge item-right>{{i + 1}}</ion-badge>
+    </ion-list-header>
+  </ion-list>
+</ion-content>
+
+<style>
+  img {
+    height: 100px;
+  }
+</style>
--- a/src/components/list/test/headers/main.html
+++ b/src/components/list/test/headers/main.html
@ -13,6 +13,7 @@

    <ion-list-header>
      List Header
+      <ion-icon item-right name="star" primary></ion-icon>
    </ion-list-header>

    <ion-item>
@ -44,6 +45,7 @@

    <ion-list-header>
      List Header
+      <button item-right outline>Info</button>
    </ion-list-header>

    <ion-item>
--- a/src/config/directives.ts
+++ b/src/config/directives.ts
@ -18,7 +18,7 @@ import {Slides, Slide, SlideLazy} from '../components/slides/slides';
 import {Tabs} from '../components/tabs/tabs';
 import {Tab} from '../components/tabs/tab';
 import {List, ListHeader} from '../components/list/list';
-import {Item} from '../components/item/item';
+import {Item, ItemContent} from '../components/item/item';
 import {ItemSliding, ItemOptions} from '../components/item/item-sliding';
 import {VirtualScroll} from '../components/virtual-scroll/virtual-scroll';
 import {VirtualItem, VirtualHeader, VirtualFooter} from '../components/virtual-scroll/virtual-item';
@ -75,6 +75,7 @@ import {ShowWhen, HideWhen} from '../components/show-hide-when/show-hide-when';
 * - List
 * - ListHeader
 * - Item
+ * - ItemContent
 * - ItemSliding
 * - VirtualScroll
 * - VirtualItem
@ -140,6 +141,7 @@ export const IONIC_DIRECTIVES: any[] = [
  List,
  ListHeader,
  Item,
+  ItemContent,
  ItemSliding,
  ItemOptions,
  VirtualScroll,