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>
<form (^submit)="doSubmit($event)" [ng-form-model]="form">
<ion-input>
<input control="email" type="email" placeholder="Your email">
<input ng-control="email" type="email" placeholder="Your email">
</ion-input>
<ion-input>
<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]
})
export class FormPage {
export class FormPage extends SinkPage {
constructor(app: IonicApp) {
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.
</p>
<div>
<img src="http://ionic-io-assets.s3.amazonaws.com/v2/ionicons.png" style="max-width: 100%">
</div>
</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 {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({
selector: 'ion-view'
})
@IonicView({
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">
<h2>Modal</h2>
@ -24,19 +26,16 @@ import {IonicView, ActionMenu, Modal, NavbarTemplate, Navbar, NavController, Con
</ion-content>
`
})
export class ModalPage {
constructor(modal: Modal) {
export class ModalPage extends SinkPage {
constructor(app: IonicApp, modal: Modal) {
super(app);
this.modal = modal;
}
openModal() {
console.log('Opening modal');
this.modal.open(MyModal, {
enterAnimation: 'my-fade-in',
leaveAnimation: 'my-fade-out',
handle: 'my-awesome-modal'
});
this.modal.open(MyModal);
}
}

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

@ -1,9 +1,10 @@
import {Component, Directive, View} from 'angular2/angular2';
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';
import {SinkPage} from '../sink-page';
@Component({
selector: 'ion-view',
@ -11,7 +12,7 @@ import {Segment, SegmentButton, SearchBar, List, Item, ActionMenu, Modal, ModalR
})
@View({
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">
<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.
</p>
<form (^submit)="doSubmit($event)" [control-group]="form">
<ion-search-bar placeholder="Search" control="searchQuery"></ion-search-bar>
<form (^submit)="doSubmit($event)" [ng-form-model]="form">
<ion-search-bar placeholder="Search" ng-control="searchQuery"></ion-search-bar>
<div>
Query: <b>{{form.controls.searchQuery.value}}</b>
</div>
@ -33,8 +34,10 @@ import {Segment, SegmentButton, SearchBar, List, Item, ActionMenu, Modal, ModalR
`,
directives: [formDirectives, NavbarTemplate, Navbar, Content, SearchBar]
})
export class SearchBarPage {
constructor(formBuilder: FormBuilder) {
export class SearchBarPage extends SinkPage {
constructor(app: IonicApp, formBuilder: FormBuilder) {
super(app);
//var fb = new FormBuilder();
this.form = formBuilder.group({
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 {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';
import {SinkPage} from '../sink-page';
@Component({
selector: 'ion-view'
})
@View({
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">
<h2>Slides</h2>
@ -20,7 +21,7 @@ import {Slides, Slide, SlidePager, List, Item, ActionMenu, Modal, ModalRef,
Slides are perfect for making image slideshows,
swipe tutorials, or document viewers.
</p>
<ion-slides>
<ion-slides style="left: -15px; right: -15px; height: 100px">
<ion-slide style="background-color: blue">
<h2>Page 1</h2>
</ion-slide>
@ -43,7 +44,8 @@ import {Slides, Slide, SlidePager, List, Item, ActionMenu, Modal, ModalRef,
`,
directives: [NavbarTemplate, Navbar, Content, Slides, Slide, SlidePager]
})
export class SlidePage {
constructor() {
export class SlidePage extends SinkPage {
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 {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({
selector: 'ion-view'
})
@View({
template: `
<ion-navbar *navbar><ion-title>Tabs</ion-title></ion-navbar>
<ion-content class="padding"></ion-content>
<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-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 {
constructor() {
export class TabsPage extends SinkPage {
constructor(app: IonicApp) {
super(app);
}
}