List groups

ionic/components/app/test/sink/index.ts

@@ -5,6 +5,7 @@ import {IonicApp, IonicView, Register} from 'ionic/ionic';
 import {ButtonPage} from './pages/button'
 import {NavPage} from './pages/nav'
 import {ListPage} from './pages/list'
+import {ListGroupPage} from './pages/list-group'
 import {CardPage} from './pages/card'
 import {FormPage} from './pages/form'
 import {SegmentPage} from './pages/segment'
@@ -34,6 +35,7 @@ class MyApp {
       { title: 'Navigation', component: NavPage },
       { title: 'Buttons', component: ButtonPage },
       { title: 'Lists', component: ListPage },
+      { title: 'List Groups', component: ListGroupPage },
       { title: 'Cards', component: CardPage },
       { title: 'Forms', component: FormPage },
       { title: 'Segments', component: SegmentPage },

ionic/components/app/test/sink/pages/action-menu.ts

@@ -40,7 +40,7 @@ export class ActionMenuPage extends SinkPage {
 
     this.actionMenu.open({
       buttons: [
-        { text: '<b>Share</b> This' },
+        { text: 'Share This' },
         { text: 'Move' }
       ],
       destructiveText: 'Delete',

ionic/components/app/test/sink/pages/list-group.ts

@@ -0,0 +1,51 @@
+import {NgFor, Component, Directive, View} from 'angular2/angular2';
+
+import {IonicApp, List, Item, ItemGroup, ItemGroupTitle, ActionMenu, Modal, ModalRef,
+  NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
+
+import {SinkPage} from '../sink-page';
+
+@Component({
+  selector: 'ion-view'
+})
+@View({
+  template: `
+  <ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>List Groups</ion-title></ion-navbar>
+
+  <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>
+  `,
+  directives: [NavbarTemplate, Navbar, Content, List, Item, ItemGroup, ItemGroupTitle, NgFor]
+})
+export class ListGroupPage extends SinkPage {
+  constructor(app: IonicApp) {
+    super(app)
+
+    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
+      });
+    }
+
+  }
+}