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-05-30 22:29:39 -05:00
parent b5d6bf26bd
commit 11ac26ee00
6 changed files with 208 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
ionic/components/app/test/sink/index.js
View File

@ -10,12 +10,11 @@ import {Ionic, Nav, Toolbar, ViewContainer, Aside, List, Item, Content, Button}
import {ButtonPage} from './pages/button'
import {ActionMenuPage} from './pages/action-menu'
import {ModalPage} from './pages/modal'
import {ListPage} from './pages/list'
@Component({
selector: 'ion-app',
properties: [
'aside: aside'
]
})
@View({
templateUrl: 'main.html',
@ -27,17 +26,17 @@ export class IonicApp {
this.components = [
{ title: 'Buttons', component: ButtonPage },
{ title: 'Action Menu', component: ActionMenuPage }
{ title: 'Lists', component: ListPage },
{ title: 'Action Menu', component: ActionMenuPage },
{ title: 'Modal', component: ModalPage }
];
this.firstPage = ButtonPage
}
openPage(aside, component) {
console.log('Opening', aside, component);
aside.close();
window.nav.clear().then(() => {
console.log('Cleared!');
window.nav.push(component.component, {}, {
animate: false
});

10
ionic/components/app/test/sink/main.html
View File

@ -10,6 +10,16 @@
</ion-aside>
<ion-nav #content [initial]="firstPage"></ion-nav>
<style>
my-modal {
display: block;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
}
</style>
<!--
<ion-view #content>
<ion-toolbar>

11
ionic/components/app/test/sink/pages/action-menu.js
View File

@ -10,9 +10,18 @@ import {ActionMenu, NavbarTemplate, Navbar, NavController, Button, Content} from
})
@View({
template: `
<ion-navbar *navbar><ion-title>Aciton Menu</ion-title></ion-navbar>
<ion-navbar *navbar><ion-title>Action Menu</ion-title></ion-navbar>
<ion-content class="padding">
<h2>Action Menu</h2>
<p>
The Action Menu, similar to Action Sheet's on iOS, is a slide-up prompt
that displays several options for the user to choose from before an action is performed.
</p>
<p>
Action Menu's are great for prompting for dangerous actions (like deleting a photo album),
or showing a "context menu" with multiple actions the user can perform on something.
</p>
<button primary (click)="openMenu()">Open Menu</button>
</ion-content>
`,

109
ionic/components/app/test/sink/pages/button.js
View File

@ -16,65 +16,72 @@ import {NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ioni
<h2>Buttons</h2>
<p>
<div>
<a class="button" href="#">a (default)</a>
<button class="button">button (default)</button>
<button class="button hover">hover</button>
<button class="button activated">activated</button>
</div>
The faithful button. Not only our favorite place to click, but a true friend.
</p>
<p>
Buttons come in lots of different colors, sizes (like those that take up the full width
and those that flow inline), and shapes.
</p>
<p>
<div>
<a class="button" href="#">a (default)</a>
<button class="button">button (default)</button>
<button class="button hover">hover</button>
<button class="button activated">activated</button>
</div>
<div>
<a class="button button-primary" href="#">a.primary</a>
<button class="button button-primary">button.primary</button>
<button class="button button-primary hover">hover</button>
<button class="button button-primary activated">activated</button>
</div>
<div>
<a class="button button-primary" href="#">a.primary</a>
<button class="button button-primary">button.primary</button>
<button class="button button-primary hover">hover</button>
<button class="button button-primary activated">activated</button>
</div>
<div>
<a class="button button-secondary" href="#">a.secondary</a>
<button class="button button-secondary">button.secondary</button>
<button class="button button-secondary hover">hover</button>
<button class="button button-secondary activated">activated</button>
</div>
<div>
<a class="button button-secondary" href="#">a.secondary</a>
<button class="button button-secondary">button.secondary</button>
<button class="button button-secondary hover">hover</button>
<button class="button button-secondary activated">activated</button>
</div>
<div>
<a class="button button-danger" href="#">a.danger</a>
<button class="button button-danger">button.danger</button>
<button class="button button-danger hover">hover</button>
<button class="button button-danger activated">activated</button>
</div>
<div>
<a class="button button-danger" href="#">a.danger</a>
<button class="button button-danger">button.danger</button>
<button class="button button-danger hover">hover</button>
<button class="button button-danger activated">activated</button>
</div>
<div>
<a class="button button-light" href="#">a.light</a>
<button class="button button-light">button.light</button>
<button class="button button-light hover">hover</button>
<button class="button button-light activated">activated</button>
</div>
<div>
<a class="button button-light" href="#">a.light</a>
<button class="button button-light">button.light</button>
<button class="button button-light hover">hover</button>
<button class="button button-light activated">activated</button>
</div>
<div>
<a class="button button-stable" href="#">a.stable</a>
<button class="button button-stable">button.stable</button>
<button class="button button-stable hover">hover</button>
<button class="button button-stable activated">activated</button>
</div>
<div>
<a class="button button-stable" href="#">a.stable</a>
<button class="button button-stable">button.stable</button>
<button class="button button-stable hover">hover</button>
<button class="button button-stable activated">activated</button>
</div>
<div>
<a class="button button-dark" href="#">a.dark</a>
<button class="button button-dark">button.dark</button>
<button class="button button-dark hover">hover</button>
<button class="button button-dark activated">activated</button>
</div>
<div>
<a class="button button-dark" href="#">a.dark</a>
<button class="button button-dark">button.dark</button>
<button class="button button-dark hover">hover</button>
<button class="button button-dark activated">activated</button>
</div>
<h2>With Properties</h2>
<h2>With Properties</h2>
<div>
<button primary>button.primary</button>
<button secondary>button.secondary</button>
<button stable>button.stable</button>
<button light>button.light</button>
<button dark>button.dark</button>
<button danger>button.danger</button>
</div>
<div>
<button primary>button.primary</button>
<button secondary>button.secondary</button>
<button stable>button.stable</button>
<button light>button.light</button>
<button dark>button.dark</button>
<button danger>button.danger</button>
</div>
</p>
</ion-content>

52
ionic/components/app/test/sink/pages/list.js Normal file
View File

@ -0,0 +1,52 @@
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>Lists</ion-title></ion-navbar>
<ion-content class="padding">
<h2>Lists</h2>
<p>
Lists display data as rows in a table.
</p>
<p>
Lists are great for displaying sets of things like contacts,
songs, and documents.
</p>
<ion-list inset>
<div class="list-header">
List Header
</div>
<ion-item>
<input control="email" type="email" placeholder="Your email">
</ion-item>
<div class="item">
<div class="item-content">
<div class="item-title">
Item
</div>
</div>
</div>
<ion-item>Item</ion-item>
<div class="list-footer">
List Footer
</div>
</ion-list>
</ion-content>
`,
directives: [NavbarTemplate, Navbar, Content, List, Item]
})
export class ListPage {
constructor() {
}
}

73
ionic/components/app/test/sink/pages/modal.js Normal file
View File

@ -0,0 +1,73 @@
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 {ActionMenu, Modal, ModalRef,
NavbarTemplate, Navbar, NavController, Button, Content} from 'ionic/ionic';
@Component({
selector: 'ion-view'
})
@View({
template: `
<ion-navbar *navbar><ion-title>Modal</ion-title></ion-navbar>
<ion-content class="padding">
<h2>Modal</h2>
<p>
Modals are entire views that slide in off screen.
</p>
<p>
Modals make it easy to open a new "context" for the user, without taking them
out of the current context. For example, clicking the "compose" button
on a mail app might slide up a Compose modal.
</p>
<button primary (click)="openModal()">Open Modal</button>
</ion-content>
`,
directives: [NavbarTemplate, Navbar, Content, Button]
})
export class ModalPage {
constructor(nav: NavController, loader: DynamicComponentLoader, injector: Injector, domRenderer: DomRenderer, elementRef: ElementRef) {
this.loader = loader;
this.domRenderer = domRenderer;
this.elementRef = elementRef;
this.injector = injector;
this.nav = nav;
window.nav = nav;
console.log('IonicApp Start', loader, domRenderer, elementRef);
}
openModal() {
console.log('Opening modal');
Modal.show(MyModal, this.loader, this.injector, this.domRenderer, this.elementRef);
}
openMenu() {
console.log('Opening Modal')
}
}
@Component({
selector: 'my-modal'
})
@View({
template: '<ion-content padding><button (click)="close()" primary>Close Modal</button></ion-content>',
directives: [Button, Content]
})
export class MyModal {
constructor(modalRef: ModalRef) {
//this.initial = ModalFirstPage;
this.modalRef = modalRef;
}
close() {
console.log('Closing modal');
this.modalRef.close();
}
}