SINK

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

@@ -9,9 +9,16 @@ console.log(Query, QueryList);
 import {Ionic, Nav, Toolbar, ViewContainer, Aside, List, Item, Content, Button} from 'ionic/ionic';
 
 import {ButtonPage} from './pages/button'
+import {NavPage} from './pages/nav'
+import {ListPage} from './pages/list'
+import {CardPage} from './pages/card'
+import {FormPage} from './pages/form'
+import {SegmentPage} from './pages/segment'
+import {SearchBar} from './pages/search-bar'
+import {IconsPage} from './pages/ionicons'
+import {AsidePage} from './pages/aside'
 import {ActionMenuPage} from './pages/action-menu'
 import {ModalPage} from './pages/modal'
-import {ListPage} from './pages/list'
 
 @Component({
   selector: 'ion-app',
@@ -25,8 +32,15 @@ export class IonicApp {
     Ionic.setRootElementRef(elementRef);
 
     this.components = [
+      { title: 'Navigation', component: NavPage },
       { title: 'Buttons', component: ButtonPage },
       { title: 'Lists', component: ListPage },
+      { title: 'Cards', component: CardPage },
+      { title: 'Forms', component: FormPage },
+      { title: 'Segments', component: SegmentPage },
+      { title: 'Search Bar', component: SearchBar},
+      { title: 'Icons', component: IconsPage },
+      { title: 'Aside', component: AsidePage },
       { title: 'Action Menu', component: ActionMenuPage },
       { title: 'Modal', component: ModalPage }
     ];

ionic/components/app/test/sink/pages/aside.js

@@ -0,0 +1,42 @@
+import {NgFor, DynamicComponentLoader, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
+import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {List, Item, ActionMenu, Modal, ModalRef,
+  NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+
+@Component({
+  selector: 'ion-view'
+})
+@View({
+  template: `
+  <ion-navbar *navbar><ion-title>Asides</ion-title></ion-navbar>
+
+  <ion-content class="padding">
+    <h2>Aside</h2>
+    <p>
+      Asides, also known as side menus or "hamburger" menus, are menus that slide
+      or swipe in to show menus or information.
+    </p>
+    <p>
+      Try it! Just swipe from the left edge of the screen to the right to expose
+      the app menu.
+    </p>
+    <p>
+      <div class="height: 50px; background-color: E05780; width: 5px; margin-left: -15px"></div>
+    </p>
+    <p>
+      <button primary (click)="openMenu()">Open Menu</button>
+    </p>
+  </ion-content>
+  `,
+  directives: [NavbarTemplate, Navbar, Content, List, Item]
+})
+export class AsidePage {
+  constructor() {
+  }
+  openMenu() {
+
+  }
+}

ionic/components/app/test/sink/pages/card.js

@@ -0,0 +1,58 @@
+import {NgFor, DynamicComponentLoader, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
+import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {List, Item, ActionMenu, Modal, ModalRef,
+  NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+
+@Component({
+  selector: 'ion-view'
+})
+@View({
+  template: `
+  <ion-navbar *navbar><ion-title>Cards</ion-title></ion-navbar>
+
+  <ion-content class="padding">
+    <h2>Cards</h2>
+    <p>
+      Cards are an emerging UI concept where a bit of content is displayed
+      like it would be on an index card or a piece of paper.
+    </p>
+    <p>
+      Cards are great for displaying contextual informaion in a small amount of space,
+      like a Tweet, today's weather report, and a photo.
+    </p>
+    <div class="card">
+
+      <div class="item card-header">
+        <div class="item-content">
+          <div class="item-label">
+            Card Header
+          </div>
+        </div>
+      </div>
+
+      <div class="item">
+          <div class="item-media">
+            <img src="http://i.imgur.com/7BEPcGo.jpg">
+          </div>
+      </div>
+
+      <div class="item card-footer">
+        <div class="item-content">
+          <div class="item-label">
+            Card Footer
+          </div>
+        </div>
+      </div>
+
+    </div>
+  </ion-content>
+  `,
+  directives: [NavbarTemplate, Navbar, Content, List, Item]
+})
+export class CardPage {
+  constructor() {
+  }
+}

ionic/components/app/test/sink/pages/form.js

@@ -0,0 +1,33 @@
+import {NgFor, DynamicComponentLoader, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
+import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {List, Item, ActionMenu, Modal, ModalRef,
+  NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+
+@Component({
+  selector: 'ion-view'
+})
+@View({
+  template: `
+  <ion-navbar *navbar><ion-title>Cards</ion-title></ion-navbar>
+
+  <ion-content class="padding">
+    <h2>Forms</h2>
+    <p>
+      Forms help you gather important information from the user, like
+      login information or content to send to your server.
+    </p>
+    <p>
+      Ionic comes with a variety of useful from controls, like
+      text inputs, text areas, toggle switches, and sliders.
+    </p>
+  </ion-content>
+  `,
+  directives: [NavbarTemplate, Navbar, Content, List, Item]
+})
+export class FormPage {
+  constructor() {
+  }
+}

ionic/components/app/test/sink/pages/ionicons.js

@@ -0,0 +1,35 @@
+import {NgFor, DynamicComponentLoader, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
+import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {List, Item, ActionMenu, Modal, ModalRef,
+  NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+
+@Component({
+  selector: 'ion-view'
+})
+@View({
+  template: `
+  <ion-navbar *navbar><ion-title>Ionicons</ion-title></ion-navbar>
+
+  <ion-content class="padding">
+    <h2>Ionicons</h2>
+    <p>
+      Ionic comes with a totally free (in price and license), icon pack with over 700
+      icons for your app.
+    </p>
+    <p>
+      Ionicons is an icon font, and can be used with simple CSS icon classes (recommended), or
+      with unicode characters.
+    </p>
+    <div>
+    </div>
+  </ion-content>
+  `,
+  directives: [NavbarTemplate, Navbar, Content, List, Item]
+})
+export class IconsPage {
+  constructor() {
+  }
+}

ionic/components/app/test/sink/pages/nav.js

@@ -0,0 +1,58 @@
+import {NgFor, DynamicComponentLoader, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
+import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
+
+import {List, Item, ActionMenu, Modal, ModalRef,
+  NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+
+@Component({
+  selector: 'ion-view'
+})
+@View({
+  template: `
+  <ion-navbar *navbar><ion-title>Cards</ion-title></ion-navbar>
+
+  <ion-content class="padding">
+    <h2>Navigation</h2>
+    <p>
+      Navigation makes your app feel like, well, an app!
+    </p>
+    <p>
+      With the navigation features in Ionic, we can navigate to new pages,
+      go back in history (including swipe-to-go-back), and control the stack
+      of pages the user can navigate between.
+    </p>
+    <button primary (click)="push()">Push</button>
+  </ion-content>
+  `,
+  directives: [NavbarTemplate, Navbar, Content, List, Item, Button]
+})
+export class NavPage {
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+  push() {
+    this.nav.push(NavSecondPage);
+  }
+}
+
+@Component({selector: 'ion-view'})
+@View({
+  template: `
+  <ion-navbar *navbar><ion-title>Second Page</ion-title></ion-navbar>
+  <ion-content padding>
+    <button primary (click)="pop()">Pop</button>
+  </ion-content>
+  `,
+  directives: [NavbarTemplate, Navbar, Content, Button]
+})
+export class NavSecondPage {
+  constructor(nav: NavController) {
+    this.nav = nav;
+  }
+
+  pop() {
+    this.nav.pop();
+  }
+}

ionic/components/app/test/sink/pages/search-bar.js

@@ -0,0 +1,41 @@
+import {NgFor, DynamicComponentLoader, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
+import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
+import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
+
+import {Segment, SegmentButton, List, Item, ActionMenu, Modal, ModalRef,
+  NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+
+@Component({
+  selector: 'ion-view'
+})
+@View({
+  template: `
+  <ion-navbar *navbar><ion-title>Cards</ion-title></ion-navbar>
+
+  <ion-content class="padding">
+    <h2>Search Bar</h2>
+    <p>
+      The Search Bar is a multi-function search component.
+    </p>
+    <p>
+      The bar can sit standalone as part of a form or header search,
+      or it can also handle and display a list of search results.
+    </p>
+
+    <form (^submit)="doSubmit($event)" [control-group]="form">
+    </form>
+  </ion-content>
+  `,
+  directives: [NavbarTemplate, Navbar, Content, List, Item, Segment, SegmentButton]
+})
+export class SegmentPage {
+  constructor() {
+    var fb = new FormBuilder();
+    this.form = fb.group({
+      mapStyle: ['hybrid', Validators.required]
+    });
+
+  }
+}

ionic/components/app/test/sink/pages/segment.js

@@ -0,0 +1,85 @@
+import {NgFor, DynamicComponentLoader, Injector, DomRenderer, ElementRef} from 'angular2/angular2';
+import {Ancestor} from 'angular2/src/core/annotations_impl/visibility';
+import {Component, Directive} from 'angular2/src/core/annotations_impl/annotations';
+import {View} from 'angular2/src/core/annotations_impl/view';
+import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
+
+import {Segment, SegmentButton, List, Item, ActionMenu, Modal, ModalRef,
+  NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
+
+console.log('imporrted', formDirectives, Segment, SegmentButton);
+
+@Component({
+  selector: 'ion-view'
+})
+@View({
+  template: `
+  <ion-navbar *navbar><ion-title>Cards</ion-title></ion-navbar>
+
+  <ion-content class="padding">
+    <h2>Segment</h2>
+    <p>
+      A segment is a radio-style filter bar to let the user toggle between
+      multiple, exclusive options.
+    </p>
+    <p>
+      Segments are useful for quick filtering, like switching the
+      the map display between street, hybrid, and satellite.
+    </p>
+
+    <form (^submit)="doSubmit($event)" [control-group]="form">
+
+      <ion-segment control="mapStyle">
+        <ion-segment-button value="standard" ion-button>
+          Standard
+        </ion-segment-button>
+        <ion-segment-button value="hybrid" ion-button>
+          Hybrid
+        </ion-segment-button>
+        <ion-segment-button value="sat" ion-button>
+          Satellite
+        </ion-segment-button>
+        <!--
+        <button ion-button class="active" [segment-value]="standard">
+          Standard
+        </button>
+
+        <button ion-button [segment-value]="hybrid">
+          Hybrid
+        </button>
+
+        <button #sat ion-button [segment-value]="sat">
+          Satellite
+        </button>
+      -->
+
+      </ion-segment>
+      <button type="submit" button primary>Submit</button>
+    </form>
+
+    Map mode: <b>{{form.controls.mapStyle.value}}</b>
+
+    <div [switch]="form.controls.mapStyle.value">
+      <div *switch-when="'standard'">
+        <h2>Standard</h2>
+      </div>
+      <div *switch-when="'hybrid'">
+        <h2>Hybrid</h2>
+      </div>
+      <div *switch-when="'sat'">
+        <h2>Satellite!!</h2>
+      </div>
+    </div>
+  </ion-content>
+  `,
+  directives: [NavbarTemplate, Navbar, Content, List, Item, Button, Segment, SegmentButton, formDirectives]
+})
+export class SegmentPage {
+  constructor() {
+    var fb = new FormBuilder();
+    this.form = fb.group({
+      mapStyle: ['hybrid', Validators.required]
+    });
+
+  }
+}

ionic/components/item/item.scss

@@ -95,6 +95,7 @@ ion-primary-swipe-buttons {
   flex-wrap: nowrap;
   align-items: center;
 
+  max-width: 100%;
   min-height: $item-min-height;
   padding: 0;