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 UP

Browse Source
This commit is contained in:
Max Lynch
2015-07-06 19:52:09 -05:00
parent 7a8ba2654c
commit 6ffa2343ca
6 changed files with 53 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -26,7 +26,7 @@ import {SinkPage} from '../sink-page';
</p> </p>
<form (^submit)="doSubmit($event)" [ng-form-model]="form"> <form (^submit)="doSubmit($event)" [ng-form-model]="form">
<ion-input> <ion-input>
<input control="email" type="email" placeholder="Your email"> <input ng-control="email" type="email" placeholder="Your email">
</ion-input> </ion-input>
<ion-input> <ion-input>
<input control="password" type="password" placeholder="Your password"> <input control="password" type="password" placeholder="Your password">
@ -37,7 +37,7 @@ import {SinkPage} from '../sink-page';
`, `,
directives: [formDirectives, NavbarTemplate, Navbar, Content, List, Item, Input] directives: [formDirectives, NavbarTemplate, Navbar, Content, List, Item, Input]
}) })
export class FormPage { export class FormPage extends SinkPage {
constructor(app: IonicApp) { constructor(app: IonicApp) {
super(app); super(app);

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

@ -23,6 +23,7 @@ import {SinkPage} from '../sink-page';
with unicode characters. with unicode characters.
</p> </p>
<div> <div>
<img src="http://ionic-io-assets.s3.amazonaws.com/v2/ionicons.png" style="max-width: 100%">
</div> </div>
</ion-content> </ion-content>
`, `,

17
ionic/components/app/test/sink/pages/modal.ts
View File

@ -1,14 +1,16 @@
import {Component, Directive, View} from 'angular2/angular2'; import {Component, Directive, View} from 'angular2/angular2';
import {IonicView, ActionMenu, Modal, NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic'; import {IonicApp, IonicView, ActionMenu, Modal,
NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
import {SinkPage} from '../sink-page';
@Component({ @Component({
selector: 'ion-view' selector: 'ion-view'
}) })
@IonicView({ @IonicView({
template: ` template: `
<ion-navbar *navbar><ion-title>Modal</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>Modal</ion-title></ion-navbar>
<ion-content class="padding"> <ion-content class="padding">
<h2>Modal</h2> <h2>Modal</h2>
@ -24,19 +26,16 @@ import {IonicView, ActionMenu, Modal, NavbarTemplate, Navbar, NavController, Con
</ion-content> </ion-content>
` `
}) })
export class ModalPage { export class ModalPage extends SinkPage {
constructor(modal: Modal) { constructor(app: IonicApp, modal: Modal) {
super(app);
this.modal = modal; this.modal = modal;
} }
openModal() { openModal() {
console.log('Opening modal'); console.log('Opening modal');
this.modal.open(MyModal, { this.modal.open(MyModal);
enterAnimation: 'my-fade-in',
leaveAnimation: 'my-fade-out',
handle: 'my-awesome-modal'
});
} }
} }

15
ionic/components/app/test/sink/pages/search-bar.ts
View File

@ -1,9 +1,10 @@
import {Component, Directive, View} from 'angular2/angular2'; import {Component, Directive, View} from 'angular2/angular2';
import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms'; import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
import {Segment, SegmentButton, SearchBar, List, Item, ActionMenu, Modal, ModalRef, import {IonicApp, Segment, SegmentButton, SearchBar, 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',
@ -11,7 +12,7 @@ import {Segment, SegmentButton, SearchBar, List, Item, ActionMenu, Modal, ModalR
}) })
@View({ @View({
template: ` template: `
<ion-navbar *navbar><ion-title>Search Bar</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>Search Bar</ion-title></ion-navbar>
<ion-content class="padding"> <ion-content class="padding">
<h2>Search Bar</h2> <h2>Search Bar</h2>
@ -23,8 +24,8 @@ import {Segment, SegmentButton, SearchBar, List, Item, ActionMenu, Modal, ModalR
or it can also handle and display a list of search results. or it can also handle and display a list of search results.
</p> </p>
<form (^submit)="doSubmit($event)" [control-group]="form"> <form (^submit)="doSubmit($event)" [ng-form-model]="form">
<ion-search-bar placeholder="Search" control="searchQuery"></ion-search-bar> <ion-search-bar placeholder="Search" ng-control="searchQuery"></ion-search-bar>
<div> <div>
Query: <b>{{form.controls.searchQuery.value}}</b> Query: <b>{{form.controls.searchQuery.value}}</b>
</div> </div>
@ -33,8 +34,10 @@ import {Segment, SegmentButton, SearchBar, List, Item, ActionMenu, Modal, ModalR
`, `,
directives: [formDirectives, NavbarTemplate, Navbar, Content, SearchBar] directives: [formDirectives, NavbarTemplate, Navbar, Content, SearchBar]
}) })
export class SearchBarPage { export class SearchBarPage extends SinkPage {
constructor(formBuilder: FormBuilder) { constructor(app: IonicApp, formBuilder: FormBuilder) {
super(app);
//var fb = new FormBuilder(); //var fb = new FormBuilder();
this.form = formBuilder.group({ this.form = formBuilder.group({
searchQuery: ['', Validators.required] searchQuery: ['', Validators.required]

12
ionic/components/app/test/sink/pages/slides.ts
View File

@ -1,15 +1,16 @@
import {Component, Directive, View} from 'angular2/angular2'; import {Component, Directive, View} from 'angular2/angular2';
import {Slides, Slide, SlidePager, List, Item, ActionMenu, Modal, ModalRef, import {IonicApp, Slides, Slide, SlidePager, 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>Sink</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>Slides</ion-title></ion-navbar>
<ion-content class="padding"> <ion-content class="padding">
<h2>Slides</h2> <h2>Slides</h2>
@ -20,7 +21,7 @@ import {Slides, Slide, SlidePager, List, Item, ActionMenu, Modal, ModalRef,
Slides are perfect for making image slideshows, Slides are perfect for making image slideshows,
swipe tutorials, or document viewers. swipe tutorials, or document viewers.
</p> </p>
<ion-slides> <ion-slides style="left: -15px; right: -15px; height: 100px">
<ion-slide style="background-color: blue"> <ion-slide style="background-color: blue">
<h2>Page 1</h2> <h2>Page 1</h2>
</ion-slide> </ion-slide>
@ -43,7 +44,8 @@ import {Slides, Slide, SlidePager, List, Item, ActionMenu, Modal, ModalRef,
`, `,
directives: [NavbarTemplate, Navbar, Content, Slides, Slide, SlidePager] directives: [NavbarTemplate, Navbar, Content, Slides, Slide, SlidePager]
}) })
export class SlidePage { export class SlidePage extends SinkPage {
constructor() { constructor(app: IonicApp) {
super(app);
} }
} }

32
ionic/components/app/test/sink/pages/tabs.ts
View File

@ -1,20 +1,40 @@
import {Component, Directive, View} from 'angular2/angular2'; import {Component, Directive, View} from 'angular2/angular2';
import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms'; import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
import {NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic'; import {IonicApp, Tabs, Tab, 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>Tabs</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>Tabs</ion-title></ion-navbar>
<ion-content class="padding"></ion-content> <ion-tabs>
<ion-tab tab-title="Tab 1" tab-icon="ion-home">
<ion-content class="padding">
Tab 1 Content
</ion-content>
</ion-tab>
<ion-tab tab-title="Tab 2" tab-icon="ion-star">
<ion-content class="padding">
Tab 2 Content
</ion-content>
</ion-tab>
</ion-tabs>
`, `,
directives: [NavbarTemplate, Navbar, Content] directives: [NavbarTemplate, Navbar, Content, Tabs, Tab]
}) })
export class TabsPage { export class TabsPage extends SinkPage {
constructor() { constructor(app: IonicApp) {
super(app);
} }
} }