feat(item): Sticky dividers

ionic/components.ts

@@ -7,6 +7,7 @@ export * from 'ionic/components/checkbox/checkbox'
 export * from 'ionic/components/content/content'
 export * from 'ionic/components/icon/icon'
 export * from 'ionic/components/item/item'
+export * from 'ionic/components/item/item-group'
 export * from 'ionic/components/form/form'
 export * from 'ionic/components/form/input/input'
 export * from 'ionic/components/form/label/label'

ionic/components/item/extensions/ios.scss

@@ -50,3 +50,7 @@ $item-ios-border-color:          $list-ios-border-color !default;
     }
   }
 }
+
+.list-ios .item-group-title {
+  @include hairline(bottom, $item-ios-border-color, $z-index-list-border);
+}

ionic/components/item/item-group.ts

@@ -0,0 +1,29 @@
+import {Component, Directive, View, ElementRef} from 'angular2/angular2';
+
+@Component({
+  selector: 'ion-item-group',
+  host: {
+    'class': 'item-group'
+  }
+})
+@View({
+  template: `<content></content>`
+})
+export class ItemGroup {
+  constructor(elementRef: ElementRef) {
+    this.ele = elementRef.nativeElement;
+  }
+}
+@Directive({
+  selector: 'ion-item-group-title',
+  host: {
+    'class': 'item-group-title',
+    '[class.sticky]': 'isSticky'
+  }
+})
+export class ItemGroupTitle {
+  constructor(elementRef: ElementRef) {
+    this.isSticky = true;
+    this.ele = elementRef.nativeElement;
+  }
+}

ionic/components/item/item.scss

@@ -5,6 +5,11 @@
 $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;
+
+
 
 .item {
   position: relative;
@@ -21,6 +26,27 @@ $item-padding:            15px !default;
   text-align: initial;
 }
 
+.item-group {
+}
+.item-group-title {
+  display: block;
+  padding: $item-padding;
+  padding-top: ceil($item-padding / 2);
+  padding-bottom: ceil($item-padding / 2);
+  min-height: 30px;
+  background-color: $item-divider-bg;
+  color: $item-divider-color;
+  font-weight: 500;
+
+  width: 100%;
+  z-index: 100;
+
+  &.sticky {
+    position: -webkit-sticky;
+  	top: 0;
+  }
+}
+
 ion-primary-swipe-buttons,
 .item-content {
   transition: transform 0.3s;

ionic/components/list/test/sticky/index.ts

@@ -0,0 +1,36 @@
+import {NgFor, ProtoViewRef, ViewContainerRef} from 'angular2/angular2'
+import {Component, Directive, View, Parent} from 'angular2/angular2';
+
+import {Content, List, Item, ItemGroup, ItemGroupTitle} from 'ionic/ionic';
+
+@Component({ selector: 'ion-app' })
+@View({
+  templateUrl: 'main.html',
+  directives: [Content, List, Item, ItemGroup, ItemGroupTitle, NgFor]
+})
+class IonicApp {
+  constructor() {
+    console.log('IonicApp Start')
+
+    this.groups = [];
+
+    var letters = "abcdefghijklmnopqrstuvwxyz".split('');
+
+    for(let i = 0; i < letters.length; i++) {
+      let group = [];
+      for(let j = 0; j < 10; j++) {
+        group.push({
+          title: letters[i] + j
+        });
+      }
+      this.groups.push({
+        title: letters[i].toUpperCase(),
+        items: group
+      });
+    }
+  }
+}
+
+export function main(ionicBootstrap) {
+  ionicBootstrap(IonicApp);
+}

ionic/components/list/test/sticky/main.html

@@ -0,0 +1,18 @@
+
+<ion-view nav-title="List">
+
+  <ion-content>
+
+    <ion-list inset>
+      <ion-item-group *ng-for="#group of groups">
+        <ion-item-group-title>{{group.title}}</ion-item-group-title>
+        <ion-item *ng-for="#item of group.items">
+          {{item.title}}
+        </ion-item>
+      </ion-item-group>
+
+    </ion-list>
+
+  </ion-content>
+
+</ion-view>

ionic/config/annotations.ts

@@ -8,7 +8,7 @@ import {
   Aside, Content, Scroll, Refresher,
   Slides, Slide, SlidePager,
   Tabs, Tab,
-  List, Item,
+  List, Item, ItemGroup, ItemGroupTitle,
   Toolbar,
   Icon,
   Checkbox, Switch, Label, Input,
@@ -27,7 +27,7 @@ export function IonicView(config) {
 
       // Content
       Aside, Content, Scroll, Refresher,
-      List, Item,
+      List, Item, ItemGroup, ItemGroupTitle,
       Slides, Slide, SlidePager,
       Tabs, Tab,
       Toolbar,