mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
IonicComponent not required for views
This commit is contained in:
Adam Bradley
@ -1,7 +1,6 @@
|
||||
// DON'T reference this file in the source. Only in demos.
|
||||
|
||||
export * from 'ionic/components/app/app'
|
||||
export * from 'ionic/components/action-menu/action-menu'
|
||||
// export * from 'ionic/components/alert/alert'
|
||||
export * from 'ionic/components/aside/aside'
|
||||
export * from 'ionic/components/checkbox/checkbox'
|
||||
export * from 'ionic/components/content/content'
|
||||
@ -11,7 +10,6 @@ export * from 'ionic/components/item/item-group'
|
||||
export * from 'ionic/components/form/form'
|
||||
export * from 'ionic/components/form/input/input'
|
||||
export * from 'ionic/components/form/label/label'
|
||||
// export * from 'ionic/components/layout/layout'
|
||||
export * from 'ionic/components/list/list'
|
||||
export * from 'ionic/components/modal/modal'
|
||||
export * from 'ionic/components/nav/nav'
|
||||
@ -23,10 +21,8 @@ export * from 'ionic/components/radio/radio'
|
||||
export * from 'ionic/components/scroll/scroll'
|
||||
export * from 'ionic/components/scroll/pull-to-refresh'
|
||||
export * from 'ionic/components/search-bar/search-bar'
|
||||
// export * from 'ionic/components/split-view/split-view'
|
||||
export * from 'ionic/components/segment/segment'
|
||||
export * from 'ionic/components/switch/switch'
|
||||
export * from 'ionic/components/view/view'
|
||||
export * from 'ionic/components/tabs/tabs'
|
||||
export * from 'ionic/components/tabs/tab'
|
||||
export * from 'ionic/components/toolbar/toolbar'
|
||||
|
||||
@ -1,12 +1,9 @@
|
||||
import {Component, View, Directive} from 'angular2/angular2';
|
||||
|
||||
import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
|
||||
import {Log} from 'ionic/util'
|
||||
|
||||
import {App, IonicView, NavController} from 'ionic/ionic'
|
||||
|
||||
|
||||
@Component({selector: 'ion-view'})
|
||||
@IonicView({
|
||||
templateUrl: 'pages/login.html'
|
||||
})
|
||||
@ -37,7 +34,6 @@ class LoginPage {
|
||||
}
|
||||
|
||||
|
||||
@Component({selector: 'ion-view'})
|
||||
@IonicView({
|
||||
templateUrl: 'pages/signup.html'
|
||||
})
|
||||
@ -71,7 +67,6 @@ export class SignupPage {
|
||||
|
||||
|
||||
|
||||
@Component({selector: 'ion-view'})
|
||||
@IonicView({
|
||||
templateUrl: 'pages/app.html'
|
||||
})
|
||||
@ -82,7 +77,6 @@ export class AppPage {
|
||||
}
|
||||
}
|
||||
|
||||
@Component({selector: 'ion-view'})
|
||||
@IonicView({
|
||||
templateUrl: 'pages/tabs/home.html'
|
||||
})
|
||||
@ -104,7 +98,6 @@ class StreamTab {
|
||||
}
|
||||
}
|
||||
|
||||
@Component({selector: 'ion-view'})
|
||||
@IonicView({
|
||||
templateUrl: 'pages/post/detail.html'
|
||||
})
|
||||
@ -118,7 +111,6 @@ class PostDetail {
|
||||
}
|
||||
}
|
||||
|
||||
@Component({selector: 'ion-view'})
|
||||
@IonicView({
|
||||
templateUrl: 'pages/splash.html'
|
||||
})
|
||||
|
||||
@ -18,9 +18,6 @@ export class Story {
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'ion-view'
|
||||
})
|
||||
@IonicView({
|
||||
templateUrl: './pages/top.html'
|
||||
})
|
||||
|
||||
@ -1,14 +1,10 @@
|
||||
import {Component, View, NgFor} from 'angular2/angular2';
|
||||
|
||||
import {NavController, NavParams, NavbarTemplate, Navbar, Content, Nav, List, Item} from 'ionic/ionic';
|
||||
import {IonicView, NavController, NavParams} from 'ionic/ionic';
|
||||
|
||||
import {HackerNews} from '../hn'
|
||||
|
||||
|
||||
@Component({ selector: 'ion-view' })
|
||||
@View({
|
||||
templateUrl: 'pages/single.html',
|
||||
directives: [NavbarTemplate, Navbar, Content, NgFor, List, Item]
|
||||
@IonicView({
|
||||
templateUrl: 'pages/single.html'
|
||||
})
|
||||
export class HNSinglePost {
|
||||
constructor(
|
||||
|
||||
@ -1,10 +1,9 @@
|
||||
import {Component, Directive, ElementRef} from 'angular2/angular2';
|
||||
import {Directive, ElementRef} from 'angular2/angular2';
|
||||
import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
|
||||
|
||||
import {App, NavController, IonicView} from 'ionic/ionic';
|
||||
|
||||
|
||||
@Component({selector: 'ion-view'})
|
||||
@IonicView({
|
||||
templateUrl: 'pages/app.html'
|
||||
})
|
||||
|
||||
@ -1,17 +1,12 @@
|
||||
import {Component, Directive, View} from 'angular2/angular2';
|
||||
|
||||
import {IonicApp, ActionMenu, NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
|
||||
import {IonicApp, IonicView, NavController, ActionMenu} from 'ionic/ionic';
|
||||
|
||||
import {SinkPage} from '../sink-page';
|
||||
|
||||
@Component({
|
||||
selector: 'ion-view'
|
||||
})
|
||||
@View({
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Action Menu</ion-title></ion-navbar>
|
||||
|
||||
|
||||
<ion-content class="padding">
|
||||
<h2>Action Menu</h2>
|
||||
<p>
|
||||
@ -24,8 +19,7 @@ import {SinkPage} from '../sink-page';
|
||||
</p>
|
||||
<button primary (click)="openMenu()">Open Menu</button>
|
||||
</ion-content>
|
||||
`,
|
||||
directives: [NavbarTemplate, Navbar, Content]
|
||||
`
|
||||
})
|
||||
export class ActionMenuPage extends SinkPage {
|
||||
constructor(app: IonicApp, nav: NavController, actionMenu: ActionMenu) {
|
||||
|
||||
@ -1,20 +1,15 @@
|
||||
import {Component, Directive, View} from 'angular2/angular2';
|
||||
|
||||
import {Animation, IonicApp, List, Item, ActionMenu, Modal, ModalRef,
|
||||
NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
|
||||
import {IonicView, Animation, IonicApp} from 'ionic/ionic';
|
||||
|
||||
import {SinkPage} from '../sink-page';
|
||||
|
||||
|
||||
let opacity = 0.2;
|
||||
let rotateZ = '180deg';
|
||||
let translateX = '100px';
|
||||
let scale = 0.6;
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'ion-view'
|
||||
})
|
||||
@View({
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Animation</ion-title></ion-navbar>
|
||||
|
||||
@ -35,7 +30,6 @@ let scale = 0.6;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
<ion-content class="padding">
|
||||
<h2>Animation</h2>
|
||||
<p>
|
||||
@ -72,8 +66,7 @@ let scale = 0.6;
|
||||
</p>
|
||||
|
||||
</ion-content>
|
||||
`,
|
||||
directives: [NavbarTemplate, Navbar, Content, List, Item]
|
||||
`
|
||||
})
|
||||
export class AnimationPage extends SinkPage {
|
||||
constructor(app: IonicApp) {
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
import {Component, Directive, View} from 'angular2/angular2';
|
||||
|
||||
import {IonicApp, List, Item, ActionMenu, Modal, ModalRef,
|
||||
NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
|
||||
import {IonicApp, IonicView} from 'ionic/ionic';
|
||||
|
||||
import {SinkPage} from '../sink-page';
|
||||
|
||||
@Component({
|
||||
selector: 'ion-view'
|
||||
})
|
||||
@View({
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Aside</ion-title></ion-navbar>
|
||||
|
||||
@ -29,8 +24,7 @@ import {SinkPage} from '../sink-page';
|
||||
<button primary (click)="toggleMenu()">Toggle</button>
|
||||
</p>
|
||||
</ion-content>
|
||||
`,
|
||||
directives: [NavbarTemplate, Navbar, Content, List, Item]
|
||||
`
|
||||
})
|
||||
export class AsidePage extends SinkPage {
|
||||
constructor(app: IonicApp) {
|
||||
|
||||
@ -1,17 +1,12 @@
|
||||
import {Component, View, NgIf} from 'angular2/angular2';
|
||||
|
||||
import {IonicApp, Routable, NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
|
||||
import {IonicApp, IonicView, NavController} from 'ionic/ionic';
|
||||
|
||||
import {SinkPage} from '../sink-page';
|
||||
|
||||
@Component({
|
||||
selector: 'ion-view'
|
||||
})
|
||||
@View({
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Buttons</ion-title></ion-navbar>
|
||||
|
||||
|
||||
<ion-content class="padding">
|
||||
|
||||
<h2>Buttons</h2>
|
||||
@ -57,8 +52,7 @@ import {SinkPage} from '../sink-page';
|
||||
</div>
|
||||
</p>
|
||||
</ion-content>
|
||||
`,
|
||||
directives: [NavbarTemplate, Navbar, Content, NgIf]
|
||||
`
|
||||
})
|
||||
export class ButtonPage extends SinkPage {
|
||||
constructor(app: IonicApp, nav: NavController) {
|
||||
@ -78,7 +72,3 @@ export class ButtonPage extends SinkPage {
|
||||
|
||||
}
|
||||
|
||||
new Routable(ButtonPage, {
|
||||
url: '/components/button',
|
||||
tag: 'button'
|
||||
})
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
import {Component, Directive, View} from 'angular2/angular2';
|
||||
|
||||
import {IonicApp, List, Item, ActionMenu, Modal, ModalRef,
|
||||
NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
|
||||
import {IonicApp, IonicView} from 'ionic/ionic';
|
||||
|
||||
import {SinkPage} from '../sink-page';
|
||||
|
||||
@Component({
|
||||
selector: 'ion-view'
|
||||
})
|
||||
@View({
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<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>
|
||||
|
||||
@ -20,7 +15,7 @@ import {SinkPage} from '../sink-page';
|
||||
</p>
|
||||
<p>
|
||||
Cards are great for displaying contextual information in a small space,
|
||||
like a Tweet, today's weather report, or a photo.
|
||||
like a Tweet, todays weather report, or a photo.
|
||||
</p>
|
||||
<div class="card">
|
||||
|
||||
@ -48,8 +43,7 @@ import {SinkPage} from '../sink-page';
|
||||
|
||||
</div>
|
||||
</ion-content>
|
||||
`,
|
||||
directives: [NavbarTemplate, Navbar, Content, List, Item]
|
||||
`
|
||||
})
|
||||
export class CardPage extends SinkPage {
|
||||
constructor(app: IonicApp) {
|
||||
|
||||
@ -1,16 +1,11 @@
|
||||
import {Component, Directive, View} from 'angular2/angular2';
|
||||
import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/angular2';
|
||||
|
||||
import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
|
||||
|
||||
import {IonicApp, List, Item, Input, ActionMenu, Modal, ModalRef,
|
||||
NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
|
||||
import {IonicApp, IonicView} from 'ionic/ionic';
|
||||
|
||||
import {SinkPage} from '../sink-page';
|
||||
|
||||
@Component({
|
||||
selector: 'ion-view'
|
||||
})
|
||||
@View({
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<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>
|
||||
|
||||
@ -34,8 +29,7 @@ import {SinkPage} from '../sink-page';
|
||||
<button ion-button primary block type="submit">Submit</button>
|
||||
</form>
|
||||
</ion-content>
|
||||
`,
|
||||
directives: [formDirectives, NavbarTemplate, Navbar, Content, List, Item, Input]
|
||||
`
|
||||
})
|
||||
export class FormPage extends SinkPage {
|
||||
constructor(app: IonicApp) {
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
import {Component, Directive, View} from 'angular2/angular2';
|
||||
|
||||
import {IonicApp, List, Item, ActionMenu, Modal, ModalRef,
|
||||
NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
|
||||
import {IonicApp, IonicView} from 'ionic/ionic';
|
||||
|
||||
import {SinkPage} from '../sink-page';
|
||||
|
||||
@Component({
|
||||
selector: 'ion-view'
|
||||
})
|
||||
@View({
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<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>
|
||||
|
||||
@ -26,8 +21,7 @@ import {SinkPage} from '../sink-page';
|
||||
<img src="http://ionic-io-assets.s3.amazonaws.com/v2/ionicons.png" style="max-width: 100%">
|
||||
</div>
|
||||
</ion-content>
|
||||
`,
|
||||
directives: [NavbarTemplate, Navbar, Content, List, Item]
|
||||
`
|
||||
})
|
||||
export class IconsPage extends SinkPage {
|
||||
constructor(app: IonicApp) {
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
import {NgFor, Component, Directive, View} from 'angular2/angular2';
|
||||
|
||||
import {IonicApp, List, Item, ItemGroup, ItemGroupTitle, ActionMenu, Modal, ModalRef,
|
||||
NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
|
||||
import {IonicApp, IonicView} from 'ionic/ionic';
|
||||
|
||||
import {SinkPage} from '../sink-page';
|
||||
|
||||
@Component({
|
||||
selector: 'ion-view'
|
||||
})
|
||||
@View({
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>List Groups</ion-title></ion-navbar>
|
||||
|
||||
@ -23,8 +18,7 @@ import {SinkPage} from '../sink-page';
|
||||
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
`,
|
||||
directives: [NavbarTemplate, Navbar, Content, List, Item, ItemGroup, ItemGroupTitle, NgFor]
|
||||
`
|
||||
})
|
||||
export class ListGroupPage extends SinkPage {
|
||||
constructor(app: IonicApp) {
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
import {Component, Directive, View} from 'angular2/angular2';
|
||||
|
||||
import {IonicApp, List, Item, ActionMenu, Modal, ModalRef,
|
||||
NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
|
||||
import {IonicApp, IonicView} from 'ionic/ionic';
|
||||
|
||||
import {SinkPage} from '../sink-page';
|
||||
|
||||
@Component({
|
||||
selector: 'ion-view'
|
||||
})
|
||||
@View({
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Lists</ion-title></ion-navbar>
|
||||
|
||||
@ -42,8 +37,7 @@ import {SinkPage} from '../sink-page';
|
||||
</div>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
`,
|
||||
directives: [NavbarTemplate, Navbar, Content, List, Item]
|
||||
`
|
||||
})
|
||||
export class ListPage extends SinkPage {
|
||||
constructor(app: IonicApp) {
|
||||
|
||||
@ -1,13 +1,8 @@
|
||||
import {Component, Directive, View} from 'angular2/angular2';
|
||||
|
||||
import {IonicApp, IonicView, ActionMenu, Modal,
|
||||
NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
|
||||
import {IonicApp, IonicView, Modal} from 'ionic/ionic';
|
||||
|
||||
import {SinkPage} from '../sink-page';
|
||||
|
||||
@Component({
|
||||
selector: 'ion-view'
|
||||
})
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<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>
|
||||
|
||||
@ -1,13 +1,7 @@
|
||||
import {Component, Directive, View} from 'angular2/angular2';
|
||||
|
||||
import {List, Item, ActionMenu, Modal, ModalRef,
|
||||
NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
|
||||
import {IonicView, NavController} from 'ionic/ionic';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'ion-view'
|
||||
})
|
||||
@View({
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar><ion-title>Cards</ion-title></ion-navbar>
|
||||
|
||||
@ -23,8 +17,7 @@ import {List, Item, ActionMenu, Modal, ModalRef,
|
||||
</p>
|
||||
<button primary (click)="push()">Push</button>
|
||||
</ion-content>
|
||||
`,
|
||||
directives: [NavbarTemplate, Navbar, Content, List, Item]
|
||||
`
|
||||
})
|
||||
export class NavPage {
|
||||
constructor(nav: NavController) {
|
||||
@ -35,22 +28,17 @@ export class NavPage {
|
||||
}
|
||||
}
|
||||
|
||||
@Component({selector: 'ion-view'})
|
||||
@View({
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar><ion-title>Second Page</ion-title></ion-navbar>
|
||||
<ion-content padding>
|
||||
<button primary (click)="pop()">Pop</button>
|
||||
<ion-content class="padding">
|
||||
<button primary (click)="nav.pop()">Pop</button>
|
||||
</ion-content>
|
||||
`,
|
||||
directives: [NavbarTemplate, Navbar, Content]
|
||||
`
|
||||
})
|
||||
export class NavSecondPage {
|
||||
constructor(nav: NavController) {
|
||||
this.nav = nav;
|
||||
}
|
||||
|
||||
pop() {
|
||||
this.nav.pop();
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
import {NgFor, Component, Directive, View} from 'angular2/angular2';
|
||||
|
||||
import {IonicApp, List, Item, ActionMenu, Modal, ModalRef,
|
||||
NavbarTemplate, Navbar, NavController, Content, Refresher} from 'ionic/ionic';
|
||||
import {IonicApp, IonicView} from 'ionic/ionic';
|
||||
|
||||
import {SinkPage} from '../sink-page';
|
||||
|
||||
@Component({
|
||||
selector: 'ion-view'
|
||||
})
|
||||
@View({
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Pull to Refresh</ion-title></ion-navbar>
|
||||
|
||||
@ -21,8 +16,7 @@ import {SinkPage} from '../sink-page';
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
`,
|
||||
directives: [NgFor, NavbarTemplate, Navbar, Content, List, Item, Refresher]
|
||||
`
|
||||
})
|
||||
export class PullToRefreshPage extends SinkPage {
|
||||
constructor(app: IonicApp) {
|
||||
|
||||
@ -1,16 +1,16 @@
|
||||
import {Component, Directive, View} from 'angular2/angular2';
|
||||
import {Component} from 'angular2/angular2';
|
||||
import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
|
||||
|
||||
import {IonicApp, Segment, SegmentButton, SearchBar, List, Item, ActionMenu, Modal, ModalRef,
|
||||
NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
|
||||
import {IonicApp, IonicView} from 'ionic/ionic';
|
||||
|
||||
import {SinkPage} from '../sink-page';
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'ion-view',
|
||||
appInjector: [FormBuilder]
|
||||
})
|
||||
@View({
|
||||
@IonicView({
|
||||
template: `
|
||||
<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>
|
||||
|
||||
@ -31,8 +31,7 @@ import {SinkPage} from '../sink-page';
|
||||
</div>
|
||||
</form>
|
||||
</ion-content>
|
||||
`,
|
||||
directives: [formDirectives, NavbarTemplate, Navbar, Content, SearchBar]
|
||||
`
|
||||
})
|
||||
export class SearchBarPage extends SinkPage {
|
||||
constructor(app: IonicApp, formBuilder: FormBuilder) {
|
||||
|
||||
@ -1,13 +1,8 @@
|
||||
import {NgFor, Injector, DomRenderer, ElementRef, Ancestor} from 'angular2/angular2';
|
||||
import {Component, Directive, View} from 'angular2/angular2';
|
||||
import {FormBuilder, Validators, formDirectives, Control, ControlGroup} from 'angular2/forms';
|
||||
import {FormBuilder, Validators, formDirectives, Control, ControlGroup} from 'angular2/angular2';
|
||||
|
||||
import {IonicView} from 'ionic/ionic';
|
||||
|
||||
import {Segment, SegmentButton, List, Item, ActionMenu, Modal, ModalRef,
|
||||
NavbarTemplate, Navbar, NavController, Content, IonicView} from 'ionic/ionic';
|
||||
|
||||
@Component({
|
||||
selector: 'ion-view'
|
||||
})
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar><ion-title>Segment</ion-title></ion-navbar>
|
||||
@ -55,8 +50,7 @@ import {Segment, SegmentButton, List, Item, ActionMenu, Modal, ModalRef,
|
||||
</div>
|
||||
</div>
|
||||
</ion-content>
|
||||
`,
|
||||
directives: [formDirectives]
|
||||
`
|
||||
})
|
||||
export class SegmentPage {
|
||||
constructor() {
|
||||
|
||||
@ -1,14 +1,9 @@
|
||||
import {Component, Directive, View} from 'angular2/angular2';
|
||||
|
||||
import {IonicApp, Slides, Slide, SlidePager, List, Item, ActionMenu, Modal, ModalRef,
|
||||
NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
|
||||
import {IonicApp, IonicView} from 'ionic/ionic';
|
||||
|
||||
import {SinkPage} from '../sink-page';
|
||||
|
||||
@Component({
|
||||
selector: 'ion-view'
|
||||
})
|
||||
@View({
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<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>
|
||||
|
||||
@ -41,8 +36,7 @@ import {SinkPage} from '../sink-page';
|
||||
</ion-pager>
|
||||
</ion-slides>
|
||||
</ion-content>
|
||||
`,
|
||||
directives: [NavbarTemplate, Navbar, Content, Slides, Slide, SlidePager]
|
||||
`
|
||||
})
|
||||
export class SlidePage extends SinkPage {
|
||||
constructor(app: IonicApp) {
|
||||
|
||||
@ -1,9 +1,7 @@
|
||||
import {NgFor, Injector} from 'angular2/angular2';
|
||||
import {Component, Directive, View} from 'angular2/angular2';
|
||||
import {Component} from 'angular2/angular2';
|
||||
import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
|
||||
|
||||
import {Segment, SegmentButton, SearchBar, List, Item, ActionMenu, Modal, ModalRef,
|
||||
NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
|
||||
import {IonicView} from 'ionic/ionic';
|
||||
|
||||
|
||||
function randomTitle() {
|
||||
@ -15,7 +13,7 @@ function randomTitle() {
|
||||
selector: 'ion-view',
|
||||
appInjector: [FormBuilder]
|
||||
})
|
||||
@View({
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar><ion-title>Table Search</ion-title></ion-navbar>
|
||||
|
||||
@ -26,14 +24,13 @@ function randomTitle() {
|
||||
|
||||
<ion-list #list>
|
||||
|
||||
<ion-item *ng-for="#item of getItems()"><!--items | search:form.controls.searchControl.value">-->
|
||||
<ion-item *ng-for="#item of getItems()"><!--items | search:form.controls.searchControl.value-->
|
||||
{{item.title}}
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
</form>
|
||||
</ion-content>
|
||||
`,
|
||||
directives: [formDirectives].concat([Content, NavbarTemplate, Navbar, List, Item, SearchBar, NgFor])
|
||||
`
|
||||
})
|
||||
export class TableSearchPage {
|
||||
constructor(formBuilder: FormBuilder) {
|
||||
@ -43,16 +40,16 @@ export class TableSearchPage {
|
||||
searchQuery: ['', Validators.required]
|
||||
});
|
||||
|
||||
|
||||
this.query = 'HELLO';
|
||||
|
||||
this.items = []
|
||||
this.items = [];
|
||||
for(let i = 0; i < 100; i++) {
|
||||
this.items.push({
|
||||
title: randomTitle()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
getItems() {
|
||||
var q = this.form.controls.searchQuery.value;
|
||||
if(q.trim() == '') {
|
||||
|
||||
@ -1,11 +1,10 @@
|
||||
import {Component, Directive, View} from 'angular2/angular2';
|
||||
import {FormBuilder, Validators, formDirectives, ControlGroup} from 'angular2/forms';
|
||||
|
||||
import {IonicApp, IonicView, Tabs, Tab, NavbarTemplate, Navbar, NavController, Content} from 'ionic/ionic';
|
||||
import {IonicApp, IonicView, NavController} from 'ionic/ionic';
|
||||
|
||||
import {SinkPage} from '../sink-page';
|
||||
|
||||
@Component({selector: 'ion-view'})
|
||||
|
||||
@IonicView({
|
||||
template: '' +
|
||||
'<ion-navbar *navbar>' +
|
||||
@ -19,7 +18,7 @@ class FeaturedTabPage {
|
||||
this.nav = nav;
|
||||
}
|
||||
}
|
||||
@Component({selector: 'ion-view'})
|
||||
|
||||
@IonicView({
|
||||
template: '' +
|
||||
'<ion-navbar *navbar>' +
|
||||
@ -34,10 +33,7 @@ class TopTabPage {
|
||||
}
|
||||
}
|
||||
|
||||
@Component({
|
||||
selector: 'ion-view'
|
||||
})
|
||||
@View({
|
||||
@IonicView({
|
||||
template: `
|
||||
<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>
|
||||
|
||||
@ -51,8 +47,7 @@ class TopTabPage {
|
||||
<ion-navbar *navbar><ion-nav-items primary><button icon (^click)="toggleMenu()"><i class="icon ion-navicon"></i></button></ion-nav-items><ion-title>Updates</ion-title></ion-navbar>
|
||||
</ion-tab>
|
||||
</ion-tabs>
|
||||
`,
|
||||
directives: [NavbarTemplate, Navbar, Content, Tabs, Tab]
|
||||
`
|
||||
})
|
||||
export class TabsPage extends SinkPage {
|
||||
constructor(app: IonicApp) {
|
||||
|
||||
@ -1,10 +1,8 @@
|
||||
import {Component, Directive} from 'angular2/angular2';
|
||||
import {FormBuilder, Control, ControlGroup, Validators, formDirectives} from 'angular2/forms';
|
||||
|
||||
import {App, IonicView, Animation, Modal, NavController, NavParams} from 'ionic/ionic';
|
||||
|
||||
|
||||
@Component({ selector: 'ion-view' })
|
||||
@IonicView({
|
||||
templateUrl: 'detail.html'
|
||||
})
|
||||
@ -14,7 +12,6 @@ export class DetailPage {
|
||||
}
|
||||
}
|
||||
|
||||
@Component({ selector: 'ion-view' })
|
||||
@IonicView({
|
||||
templateUrl: 'feed.html'
|
||||
})
|
||||
|
||||
@ -1,5 +1,3 @@
|
||||
import {Component} from 'angular2/angular2';
|
||||
|
||||
import {App, IonicView, NavController} from 'ionic/ionic';
|
||||
|
||||
|
||||
@ -12,7 +10,7 @@ class IonicApp {
|
||||
}
|
||||
}
|
||||
|
||||
@Component({selector: 'ion-view'})
|
||||
|
||||
@IonicView({
|
||||
template: '' +
|
||||
'<ion-navbar *navbar>' +
|
||||
@ -30,7 +28,6 @@ class HomeTabPage {
|
||||
}
|
||||
}
|
||||
|
||||
@Component({selector: 'ion-view'})
|
||||
@IonicView({
|
||||
template: '' +
|
||||
'<ion-navbar *navbar>' +
|
||||
@ -49,7 +46,6 @@ class PeekTabPage {
|
||||
}
|
||||
|
||||
|
||||
@Component({selector: 'ion-view'})
|
||||
@IonicView({
|
||||
templateUrl: 'tabs.html'
|
||||
})
|
||||
|
||||
11
ionic/components/item/test/basic/index.ts
Normal file
11
ionic/components/item/test/basic/index.ts
Normal file
@ -0,0 +1,11 @@
|
||||
import {App} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class IonicApp {
|
||||
constructor() {
|
||||
this.items = [1, 2, 3, 4, 5]
|
||||
}
|
||||
}
|
||||
@ -1,7 +1,5 @@
|
||||
import {Component} from 'angular2/angular2';
|
||||
|
||||
import {App, IonicComponent, IonicView, IonicApp, IonicConfig, Platform} from 'ionic/ionic';
|
||||
import {Modal, NavController, NavParams, Animation, ActionMenu} from 'ionic/ionic';
|
||||
import {App, IonicView, IonicApp, IonicConfig, Platform} from 'ionic/ionic';
|
||||
import {Modal, ActionMenu, NavController, NavParams, Animation} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
@ -53,9 +51,6 @@ export class ContactModal {
|
||||
}
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'ion-view'
|
||||
})
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar><ion-title>First Page Header: {{ val }}</ion-title><ion-nav-items primary><button primary (click)="closeModal()">Close</button></ion-nav-items></ion-navbar>
|
||||
@ -127,7 +122,7 @@ export class ModalFirstPage {
|
||||
}
|
||||
}
|
||||
|
||||
@Component({selector: 'ion-view'})
|
||||
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar><ion-title>Second Page Header</ion-title></ion-navbar>
|
||||
|
||||
@ -2,7 +2,7 @@ import {App} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
router: {
|
||||
routes: {
|
||||
'FirstPage': {
|
||||
'path': '/firstpage',
|
||||
'module': 'dist/examples/nav/basic/pages/first-page',
|
||||
|
||||
@ -1,13 +1,10 @@
|
||||
import {IonicComponent, IonicView, IonicConfig, IonicApp} from 'ionic/ionic';
|
||||
import {IonicView, IonicConfig, IonicApp} from 'ionic/ionic';
|
||||
import {NavParams, Routable, NavController} from 'ionic/ionic';
|
||||
|
||||
import {SecondPage} from './second-page';
|
||||
import {ThirdPage} from './third-page';
|
||||
|
||||
|
||||
@IonicComponent({
|
||||
selector: 'ion-view'
|
||||
})
|
||||
@IonicView({
|
||||
template: '' +
|
||||
'<ion-navbar *navbar>' +
|
||||
|
||||
@ -1,14 +1,8 @@
|
||||
import {IonicComponent, IonicView, Routable, NavController, NavParams} from 'ionic/ionic';
|
||||
import {IonicView, Routable, NavController, NavParams} from 'ionic/ionic';
|
||||
import {ThirdPage} from './third-page';
|
||||
import {FirstPage} from './first-page';
|
||||
|
||||
|
||||
@IonicComponent({
|
||||
selector: 'ion-view',
|
||||
route: {
|
||||
path: '/secondpage'
|
||||
}
|
||||
})
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar><ion-title>Second Page Header</ion-title></ion-navbar>
|
||||
|
||||
@ -1,12 +1,6 @@
|
||||
import {IonicComponent, IonicView, Routable, NavController} from 'ionic/ionic';
|
||||
import {IonicView, Routable, NavController} from 'ionic/ionic';
|
||||
|
||||
|
||||
@IonicComponent({
|
||||
selector: 'ion-view',
|
||||
route: {
|
||||
path: '/thirdpage'
|
||||
}
|
||||
})
|
||||
@IonicView({
|
||||
template: `
|
||||
<ion-navbar *navbar><ion-title>Third Page Header</ion-title></ion-navbar>
|
||||
|
||||
@ -18,13 +18,14 @@ export class Overlay {
|
||||
return new Promise((resolve, reject) => {
|
||||
let app = this.app;
|
||||
|
||||
let annotation = new Component();
|
||||
annotation.selector = 'ion-' + overlayType;
|
||||
annotation.host = {
|
||||
let annotation = new Component({
|
||||
selector: 'ion-' + overlayType,
|
||||
host: {
|
||||
'[style.z-index]': 'zIndex',
|
||||
'class': overlayType + ' ion-app',
|
||||
'mode': this.ionicConfig.setting('mode')
|
||||
};
|
||||
}
|
||||
});
|
||||
let overlayComponent = DirectiveBinding.createFromType(ComponentType, annotation);
|
||||
|
||||
app.appendComponent(overlayComponent, context).then(ref => {
|
||||
|
||||
@ -9,20 +9,6 @@ $tab-button-min-width: 80px !default;
|
||||
$tab-button-max-width: 160px !default;
|
||||
|
||||
|
||||
ion-tabs-view {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: white;
|
||||
|
||||
display: none;
|
||||
&.show-view {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
ion-tabs {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@ -48,7 +34,7 @@ ion-tab {
|
||||
flex-direction: column;
|
||||
|
||||
display: none;
|
||||
&.show-tab {
|
||||
&.show-view {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,7 +3,6 @@ import {Component} from 'angular2/angular2';
|
||||
import {App, IonicView, NavController} from 'ionic/ionic';
|
||||
|
||||
|
||||
@Component({selector: 'ion-view'})
|
||||
@IonicView({
|
||||
template: '' +
|
||||
'<ion-navbar *navbar>' +
|
||||
@ -25,10 +24,6 @@ class SignIn {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'ion-tabs-view'
|
||||
})
|
||||
@IonicView({
|
||||
templateUrl: './tabs.html'
|
||||
})
|
||||
@ -44,7 +39,6 @@ class TabsPage {
|
||||
//
|
||||
// tab 1
|
||||
//
|
||||
@Component({selector: 'ion-view'})
|
||||
@IonicView({
|
||||
template: '' +
|
||||
'<ion-navbar *navbar>' +
|
||||
@ -66,7 +60,7 @@ class Tab1Page1 {
|
||||
}
|
||||
}
|
||||
|
||||
@Component({selector: 'ion-view'})
|
||||
|
||||
@IonicView({
|
||||
template: '' +
|
||||
'<ion-navbar *navbar>' +
|
||||
@ -89,7 +83,7 @@ class Tab1Page2 {
|
||||
}
|
||||
}
|
||||
|
||||
@Component({selector: 'ion-view'})
|
||||
|
||||
@IonicView({
|
||||
template: '' +
|
||||
'<ion-navbar *navbar>' +
|
||||
@ -112,7 +106,6 @@ class Tab1Page3 {
|
||||
//
|
||||
// tab 2
|
||||
//
|
||||
@Component({selector: 'ion-view'})
|
||||
@IonicView({
|
||||
template: '' +
|
||||
'<ion-navbar *navbar>' +
|
||||
@ -134,7 +127,7 @@ class Tab2Page1 {
|
||||
}
|
||||
}
|
||||
|
||||
@Component({selector: 'ion-view'})
|
||||
|
||||
@IonicView({
|
||||
template: '' +
|
||||
'<ion-navbar *navbar>' +
|
||||
@ -157,7 +150,7 @@ class Tab2Page2 {
|
||||
}
|
||||
}
|
||||
|
||||
@Component({selector: 'ion-view'})
|
||||
|
||||
@IonicView({
|
||||
template: '' +
|
||||
'<ion-navbar *navbar>' +
|
||||
@ -177,10 +170,12 @@ class Tab2Page3 {
|
||||
|
||||
|
||||
@App({
|
||||
template: '<ion-nav [root]="rootView"></ion-nav>'
|
||||
routes: {
|
||||
'SignIn': {
|
||||
'path': '/signin',
|
||||
'cls': SignIn,
|
||||
'root': true
|
||||
}
|
||||
}
|
||||
})
|
||||
class IonicApp {
|
||||
constructor() {
|
||||
this.rootView = SignIn;
|
||||
}
|
||||
}
|
||||
class IonicApp {}
|
||||
|
||||
@ -1,15 +1,14 @@
|
||||
import {EventEmitter} from 'angular2/angular2';
|
||||
import {ElementRef} from 'angular2/src/core/compiler/element_ref';
|
||||
import {bind} from 'angular2/di';
|
||||
import {Component, EventEmitter, ElementRef, bind} from 'angular2/angular2';
|
||||
import {DirectiveBinding} from 'angular2/src/core/compiler/element_injector';
|
||||
|
||||
import {NavParams} from '../nav/nav-controller';
|
||||
|
||||
|
||||
export class ViewItem {
|
||||
|
||||
constructor(viewCtrl, ComponentType, params = {}) {
|
||||
constructor(viewCtrl, cls, params = {}) {
|
||||
this.viewCtrl = viewCtrl;
|
||||
this.ComponentType = ComponentType;
|
||||
this.cls = cls;
|
||||
this.params = new NavParams(params);
|
||||
this.instance = null;
|
||||
this.state = 0;
|
||||
@ -32,8 +31,16 @@ export class ViewItem {
|
||||
return callback();
|
||||
}
|
||||
|
||||
let annotation = new Component({
|
||||
selector: 'ion-view',
|
||||
host: {
|
||||
'class': 'nav-item'
|
||||
}
|
||||
});
|
||||
let ionViewComponent = DirectiveBinding.createFromType(this.cls, annotation);
|
||||
|
||||
// compile the Component
|
||||
viewCtrl.compiler.compileInHost(this.ComponentType).then(componentProtoViewRef => {
|
||||
viewCtrl.compiler.compileInHost(ionViewComponent).then(componentProtoViewRef => {
|
||||
|
||||
// figure out the sturcture of this Component
|
||||
// does it have a navbar? Is it tabs? Should it not have a navbar or any toolbars?
|
||||
@ -178,10 +185,9 @@ export class ViewItem {
|
||||
}
|
||||
}
|
||||
|
||||
viewElement() {
|
||||
viewElement(val) {
|
||||
if (arguments.length) {
|
||||
this._vwEle = arguments[0];
|
||||
this._vwEle && this._vwEle.classList.add('nav-item');
|
||||
this._vwEle = val;
|
||||
}
|
||||
return this._vwEle;
|
||||
}
|
||||
|
||||
@ -1,15 +0,0 @@
|
||||
import {Directive, ElementRef, Optional} from 'angular2/angular2';
|
||||
|
||||
import {ViewItem} from './view-item';
|
||||
import {Ion} from '../ion';
|
||||
|
||||
|
||||
@Directive({
|
||||
selector: 'ion-view',
|
||||
})
|
||||
export class IonView extends Ion {
|
||||
constructor(@Optional() item: ViewItem, elementRef: ElementRef) {
|
||||
super(elementRef);
|
||||
this.ele = elementRef.nativeElement;
|
||||
}
|
||||
}
|
||||
@ -146,7 +146,7 @@ export function App(args={}) {
|
||||
// redefine with added annotations
|
||||
Reflect.defineMetadata('annotations', annotations, cls);
|
||||
|
||||
ionicBootstrap(cls, args.config, args.router);
|
||||
ionicBootstrap(cls, args.config, args.routes);
|
||||
|
||||
return cls;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user