javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

Sink

Browse Source
This commit is contained in:
Max Lynch
2015-07-06 19:32:50 -05:00
parent 1445013d0a
commit 7a8ba2654c
5 changed files with 27 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
ionic/components/app/test/sink/pages/aside.ts
View File

@ -15,18 +15,18 @@ import {SinkPage} from '../sink-page';
<ion-content class="padding"> <ion-content class="padding">
<h2>Aside</h2> <h2>Aside</h2>
<p> <p>
Asides, also known as side menus or "hamburger" menus, are menus that slide Asides, also known as side menus or "hamburger" menus (mmmmm), are menus that slide
or swipe in to show menus or information. or swipe in to show menus or information.
</p> </p>
<p> <p>
Try it! Just swipe from the left edge of the screen to the right to expose Try it! Just swipe from the left edge of the screen to the right to expose
the app menu. the app menu, or tap the button to toggle the menu:
</p> </p>
<p> <p>
<div class="height: 50px; background-color: E05780; width: 5px; margin-left: -15px"></div> <div class="height: 50px; background-color: E05780; width: 5px; margin-left: -15px"></div>
</p> </p>
<p> <p>
<button primary (click)="openMenu()">Open Menu</button> <button primary (click)="toggleMenu()">Toggle</button>
</p> </p>
</ion-content> </ion-content>
`, `,

10
ionic/components/app/test/sink/pages/card.ts
View File

@ -1,15 +1,16 @@
import {Component, Directive, View} from 'angular2/angular2'; import {Component, Directive, View} from 'angular2/angular2';
import {List, Item, ActionMenu, Modal, ModalRef, import {IonicApp, List, Item, ActionMenu, Modal, ModalRef,
NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic'; NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
import {SinkPage} from '../sink-page';
@Component({ @Component({
selector: 'ion-view' selector: 'ion-view'
}) })
@View({ @View({
template: ` template: `
<ion-navbar *navbar><ion-title>Cards</ion-title></ion-navbar> <ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Cards</ion-title></ion-navbar>
<ion-content class="padding"> <ion-content class="padding">
<h2>Cards</h2> <h2>Cards</h2>
@ -50,7 +51,8 @@ import {List, Item, ActionMenu, Modal, ModalRef,
`, `,
directives: [NavbarTemplate, Navbar, Content, List, Item] directives: [NavbarTemplate, Navbar, Content, List, Item]
}) })
export class CardPage { export class CardPage extends SinkPage {
constructor() { constructor(app: IonicApp) {
super(app);
} }
} }

11
ionic/components/app/test/sink/pages/form.ts
View File

@ -2,16 +2,17 @@ import {Component, Directive, View} from 'angular2/angular2';
import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms'; import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
import {List, Item, Input, ActionMenu, Modal, ModalRef, import {IonicApp, List, Item, Input, ActionMenu, Modal, ModalRef,
NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic'; NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
import {SinkPage} from '../sink-page';
@Component({ @Component({
selector: 'ion-view' selector: 'ion-view'
}) })
@View({ @View({
template: ` template: `
<ion-navbar *navbar><ion-title>Cards</ion-title></ion-navbar> <ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Form</ion-title></ion-navbar>
<ion-content class="padding"> <ion-content class="padding">
<h2>Forms</h2> <h2>Forms</h2>
@ -23,7 +24,7 @@ import {List, Item, Input, ActionMenu, Modal, ModalRef,
Ionic comes with a variety of useful from controls, like Ionic comes with a variety of useful from controls, like
text inputs, text areas, toggle switches, and sliders. text inputs, text areas, toggle switches, and sliders.
</p> </p>
<form (^submit)="doSubmit($event)" [control-group]="form"> <form (^submit)="doSubmit($event)" [ng-form-model]="form">
<ion-input> <ion-input>
<input control="email" type="email" placeholder="Your email"> <input control="email" type="email" placeholder="Your email">
</ion-input> </ion-input>
@ -37,7 +38,9 @@ import {List, Item, Input, ActionMenu, Modal, ModalRef,
directives: [formDirectives, NavbarTemplate, Navbar, Content, List, Item, Input] directives: [formDirectives, NavbarTemplate, Navbar, Content, List, Item, Input]
}) })
export class FormPage { export class FormPage {
constructor() { constructor(app: IonicApp) {
super(app);
var fb = new FormBuilder() var fb = new FormBuilder()
this.form = fb.group({ this.form = fb.group({

14
ionic/components/app/test/sink/pages/ionicons.ts
View File

@ -1,20 +1,21 @@
import {Component, Directive, View} from 'angular2/angular2'; import {Component, Directive, View} from 'angular2/angular2';
import {List, Item, ActionMenu, Modal, ModalRef, import {IonicApp, List, Item, ActionMenu, Modal, ModalRef,
NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic'; NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
import {SinkPage} from '../sink-page';
@Component({ @Component({
selector: 'ion-view' selector: 'ion-view'
}) })
@View({ @View({
template: ` template: `
<ion-navbar *navbar><ion-title>Ionicons</ion-title></ion-navbar> <ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Icons</ion-title></ion-navbar>
<ion-content class="padding"> <ion-content class="padding">
<h2>Ionicons</h2> <h2>Icons</h2>
<p> <p>
Ionic comes with a totally free (in price and license), icon pack with over 700 Ionic comes with a totally free (in price and license), icon pack (known as "Ionicons") with over 700
icons for your app. icons for your app.
</p> </p>
<p> <p>
@ -27,7 +28,8 @@ import {List, Item, ActionMenu, Modal, ModalRef,
`, `,
directives: [NavbarTemplate, Navbar, Content, List, Item] directives: [NavbarTemplate, Navbar, Content, List, Item]
}) })
export class IconsPage { export class IconsPage extends SinkPage {
constructor() { constructor(app: IonicApp) {
super(app);
} }
} }

5
ionic/components/segment/segment.ts
View File

@ -1,10 +1,11 @@
import {Renderer, ElementRef, EventEmitter, onInit, Ancestor, forwardRef} from 'angular2/angular2'; import {View, Renderer, ElementRef, EventEmitter, onInit, Ancestor, forwardRef} from 'angular2/angular2';
import {Control, NgControl,NgFormControl} from 'angular2/forms'; import {Control, NgControl,NgFormControl} from 'angular2/forms';
import {ControlGroup, ControlDirective} from 'angular2/forms' import {ControlGroup, ControlDirective} from 'angular2/forms'
import {IonicDirective, IonicComponent, IonicView} from '../../config/annotations' import {IonicDirective, IonicComponent, IonicView} from '../../config/annotations'
import {dom} from 'ionic/util'; import {dom} from 'ionic/util';
console.log(forwardRef(() => SegmentButton));
@IonicComponent({ @IonicComponent({
selector: 'ion-segment', selector: 'ion-segment',
@ -27,7 +28,7 @@ import {dom} from 'ionic/util';
*/ */
} }
}) })
@IonicView({ @View({
template: '<div class="ion-segment"><content></content></div>', template: '<div class="ion-segment"><content></content></div>',
directives: [forwardRef(() => SegmentButton)] directives: [forwardRef(() => SegmentButton)]
}) })