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
ionic-team · Jun 22, 2016 · 712ff81 · 712ff81
1 parent 4aa322d
commit 712ff81
Show file tree

Hide file tree

Showing 25 changed files with 402 additions and 110 deletions.
diff --git 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';
+
+@Component({
+  templateUrl: 'main.html'
+})
+class ApiDemoPage {
+
+}
 
-// Uses the list's demo but passes the demo var to change the title
 @Component({
-  templateUrl: '../list/main.html'
+  template: '<ion-nav [root]="root"></ion-nav>'
 })
 class ApiDemoApp {
-  demo = "Item";
+  root = ApiDemoPage;
 }
 
 ionicBootstrap(ApiDemoApp);
diff --git 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>
diff --git 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);
diff --git 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>

diff --git a/src/components/card/card.ios.scss b/src/components/card/card.ios.scss
@@ -48,22 +48,14 @@ ion-card {
 
   ion-list {
     margin-bottom: 0;
-
-    .item {
-      padding-right: 0;
-    }
-
-    ion-label {
-      padding: 0;
-    }
   }
 
   > .item:last-child,
   > .item-wrapper:last-child .item {
     border-bottom: 0;
   }
 
-  .item-inner {
+  .item .item-inner {
     border: 0;
   }
 

diff --git a/src/components/card/card.md.scss b/src/components/card/card.md.scss
@@ -50,22 +50,14 @@ ion-card {
 
   ion-list {
     margin-bottom: 0;
-
-    ion-label {
-      padding: 0;
-    }
-
-    .item-inner {
-      border-bottom: 1px solid $list-md-border-color;
-    }
   }
 
   > .item:last-child,
   > .item-wrapper:last-child .item {
     border-bottom: 0;
   }
 
-  .item-inner {
+  .item .item-inner {
     border: 0;
   }
 

diff --git a/src/components/card/card.wp.scss b/src/components/card/card.wp.scss
@@ -51,22 +51,14 @@ ion-card {
 
   ion-list {
     margin-bottom: 0;
-
-    ion-label {
-      padding: 0;
-    }
-
-    .item-inner {
-      border-bottom: 1px solid $list-wp-border-color;
-    }
   }
 
   > .item:last-child,
   > .item-wrapper:last-child .item {
     border-bottom: 0;
   }
 
-  .item-inner {
+  .item .item-inner {
     border: 0;
   }
 

diff --git 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({

diff --git 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>
diff --git 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;

diff --git 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;

diff --git 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] {