mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
wip
This commit is contained in:
@@ -1,44 +1,49 @@
|
||||
import {NgElement, Component, View, Parent} from 'angular2/angular2'
|
||||
import {ComponentConfig} from 'ionic/config/component-config'
|
||||
import {NgElement, Component, View as NgView, Parent} from 'angular2/angular2'
|
||||
import {IonicComponent} from 'ionic/config/component'
|
||||
import {Icon} from 'ionic/components/icon/icon'
|
||||
import {Item} from 'ionic/components/item/item'
|
||||
|
||||
export let ActionMenuConfig = new ComponentConfig('action-menu')
|
||||
|
||||
@Component({
|
||||
selector: 'ion-action-menu',
|
||||
injectables: [ActionMenuConfig]
|
||||
selector: 'ion-action-menu'
|
||||
})
|
||||
@View({
|
||||
@NgView({
|
||||
template: `
|
||||
<div class="overlay-backdrop"></div>
|
||||
<div class="overlay-container">
|
||||
<div class="action-menu-container">
|
||||
|
||||
<div class="action-menu-group">
|
||||
<div class="action-menu-label">Action Menu Label</div>
|
||||
<button class="button action-menu-button">Button 1</button>
|
||||
<button class="button action-menu-button">Button 2</button>
|
||||
<div class="list-header">Action Menu List Header</div>
|
||||
<div class="list">
|
||||
<button ion-item class="item">
|
||||
Button 1
|
||||
</button>
|
||||
<button ion-item class="item">
|
||||
Button 2
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="action-menu-group">
|
||||
<div class="action-menu-label">Action Menu Label</div>
|
||||
<button class="button action-menu-button">Button 1</button>
|
||||
<button class="button action-menu-button">Button 2</button>
|
||||
<div class="list-header">Action Menu Label</div>
|
||||
<div class="list">
|
||||
<button ion-item class="item">Button 1</button>
|
||||
<button ion-item class="item">Button 2</button>
|
||||
</div>
|
||||
|
||||
<div class="action-menu-group">
|
||||
<button class="button action-menu-button">Button 1</button>
|
||||
<div class="list">
|
||||
<button ion-item class="item">Button 1</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>`
|
||||
</div>`,
|
||||
directives: [Item,Icon]
|
||||
})
|
||||
export class ActionMenu {
|
||||
constructor(
|
||||
configFactory: ActionMenuConfig,
|
||||
@NgElement() ngElement:NgElement
|
||||
) {
|
||||
this.domElement = ngElement.domElement
|
||||
this.domElement.classList.add('pane')
|
||||
this.domElement.classList.add('pane-overlay')
|
||||
this.config = configFactory.create(this)
|
||||
this.config = ActionMenu.config.invoke(this)
|
||||
}
|
||||
}
|
||||
|
||||
new IonicComponent(ActionMenu, {})
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
import {ActionMenu} from 'ionic/ionic';
|
||||
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
|
||||
import {ActionMenu} from 'ionic/components/action-menu/action-menu';
|
||||
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
@View({
|
||||
@NgView({
|
||||
templateUrl: 'main.html',
|
||||
directives: [ActionMenu]
|
||||
})
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import {NgElement, Component, View, Parent} from 'angular2/angular2'
|
||||
import {NgElement, Component, View as NgView, Parent} from 'angular2/angular2'
|
||||
import {IonicComponent} from 'ionic/config/component'
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'ion-alert'
|
||||
})
|
||||
@View({
|
||||
@NgView({
|
||||
template: `
|
||||
<div class="overlay-backdrop"></div>
|
||||
<div class="overlay-container">
|
||||
@@ -27,13 +27,8 @@ export class Alert {
|
||||
@NgElement() ngElement:NgElement
|
||||
) {
|
||||
this.domElement = ngElement.domElement
|
||||
this.domElement.classList.add('pane')
|
||||
this.domElement.classList.add('pane-overlay')
|
||||
|
||||
this.config = Alert.config.invoke(this)
|
||||
}
|
||||
}
|
||||
|
||||
new IonicComponent(Alert, {
|
||||
bind: {}
|
||||
})
|
||||
new IonicComponent(Alert, {})
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
import {Alert} from 'ionic/ionic';
|
||||
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
|
||||
import {Alert} from 'ionic/components/alert/alert';
|
||||
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
@View({
|
||||
@NgView({
|
||||
templateUrl: 'main.html',
|
||||
directives: [Alert]
|
||||
})
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import {Ion} from 'ionic/ion';
|
||||
|
||||
export function main() {
|
||||
it('should be true', () => {
|
||||
|
||||
2
ionic/components/app/test/barkpark/main.html
Normal file
2
ionic/components/app/test/barkpark/main.html
Normal file
@@ -0,0 +1,2 @@
|
||||
<ion-nav-viewport #viewport [initial]="firstPage">
|
||||
</ion-nav-viewport>
|
||||
@@ -1,18 +1,14 @@
|
||||
import {
|
||||
For, Component, Template, Parent, bootstrap,
|
||||
FormBuilder, Validators, FormDirectives, CongrolGroup
|
||||
} from 'angular2/angular2'
|
||||
|
||||
import {Log} from 'ionic/util'
|
||||
import {Router} from 'ionic/routing/router'
|
||||
|
||||
import {For, Component, View as NgView, Parent, bootstrap} from 'angular2/angular2'
|
||||
import {FormBuilder, Validators, FormDirectives, ControlGroup} from 'angular2/forms';
|
||||
import {Log} from 'ionic/util'
|
||||
import {List, Item, NavViewport, View, Button, Input, Tabs, Tab, Content, NavPane, Aside} from 'ionic/ionic'
|
||||
|
||||
@Component({
|
||||
selector: 'login-page'
|
||||
})
|
||||
@Template({
|
||||
url: 'pages/login.html',
|
||||
@NgView({
|
||||
templateUrl: 'pages/login.html',
|
||||
directives: [View, FormDirectives, Button, Input]
|
||||
})
|
||||
export class LoginPage {
|
||||
@@ -44,8 +40,8 @@ export class LoginPage {
|
||||
@Component({
|
||||
selector: 'signup-page'
|
||||
})
|
||||
@Template({
|
||||
url: 'pages/signup.html',
|
||||
@NgView({
|
||||
templateUrl: 'pages/signup.html',
|
||||
directives: [View, FormDirectives, Button, Input]
|
||||
})
|
||||
export class SignupPage {
|
||||
@@ -81,8 +77,8 @@ export class SignupPage {
|
||||
@Component({
|
||||
selector: 'app-page'
|
||||
})
|
||||
@Template({
|
||||
url: 'pages/app.html',
|
||||
@NgView({
|
||||
templateUrl: 'pages/app.html',
|
||||
directives: [View, FormDirectives, Button, Input, Tabs, Tab]
|
||||
})
|
||||
export class AppPage {
|
||||
@@ -93,8 +89,8 @@ export class AppPage {
|
||||
}
|
||||
|
||||
@Component({ selector: 'stream-tab' })
|
||||
@Template({
|
||||
url: 'pages/tabs/home.html',
|
||||
@NgView({
|
||||
templateUrl: 'pages/tabs/home.html',
|
||||
directives: [For, View, Content, List, Item]
|
||||
})
|
||||
class StreamTab {
|
||||
@@ -116,8 +112,8 @@ class StreamTab {
|
||||
}
|
||||
|
||||
@Component({ selector: 'post-detail-tab' })
|
||||
@Template({
|
||||
url: 'pages/post/detail.html',
|
||||
@NgView({
|
||||
templateUrl: 'pages/post/detail.html',
|
||||
directives: [View, Content]
|
||||
})
|
||||
class PostDetail {
|
||||
@@ -131,8 +127,8 @@ class PostDetail {
|
||||
}
|
||||
|
||||
@Component({ selector: 'splash-page' })
|
||||
@Template({
|
||||
url: 'pages/splash.html',
|
||||
@NgView({
|
||||
templateUrl: 'pages/splash.html',
|
||||
directives: [View, Content]
|
||||
})
|
||||
class SplashPage {
|
||||
@@ -142,14 +138,13 @@ class SplashPage {
|
||||
}
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* Main app entry point
|
||||
*/
|
||||
@Component({ selector: '[ion-app]' })
|
||||
@Template({
|
||||
@NgView({
|
||||
directives: [NavViewport],
|
||||
url: 'main.html'
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class IonicApp {
|
||||
constructor() {
|
||||
@@ -179,10 +174,5 @@ class IonicApp {
|
||||
})
|
||||
*/
|
||||
}, 2000);
|
||||
|
||||
console.log('IonicApp Start')
|
||||
}
|
||||
}
|
||||
|
||||
bootstrap(IonicApp)
|
||||
|
||||
|
||||
6
ionic/components/app/test/barkpark/pages/app.html
Normal file
6
ionic/components/app/test/barkpark/pages/app.html
Normal file
@@ -0,0 +1,6 @@
|
||||
<ion-tabs>
|
||||
|
||||
<ion-tab [initial]="streamTab" tab-title="Stream">
|
||||
</ion-tab>
|
||||
|
||||
</ion-tabs>
|
||||
14
ionic/components/app/test/barkpark/pages/login.html
Normal file
14
ionic/components/app/test/barkpark/pages/login.html
Normal file
@@ -0,0 +1,14 @@
|
||||
<ion-view nav-title="Login" style="padding: 20px">
|
||||
<form (^submit)="doLogin($event)" [control-group]="loginForm">
|
||||
<ion-input>
|
||||
<input control="email" type="email" placeholder="Your email">
|
||||
</ion-input>
|
||||
<ion-input>
|
||||
<input control="password" type="password" placeholder="Your password">
|
||||
</ion-input>
|
||||
<button ion-button stable block type="submit">Log in</button>
|
||||
<div>
|
||||
<button ion-button primary block (click)="doSignup()">Create an account</button>
|
||||
</div>
|
||||
</form>
|
||||
</ion-view>
|
||||
@@ -0,0 +1 @@
|
||||
<h1>{{title}}</h1>
|
||||
18
ionic/components/app/test/barkpark/pages/signup.html
Normal file
18
ionic/components/app/test/barkpark/pages/signup.html
Normal file
@@ -0,0 +1,18 @@
|
||||
<ion-view nav-title="Signup" style="padding: 20px">
|
||||
<form (^submit)="doSignup($event)" [control-group]="signupForm">
|
||||
<ion-input>
|
||||
<input control="name" type="text" placeholder="Your name">
|
||||
</ion-input>
|
||||
<ion-input>
|
||||
<input control="email" type="email" placeholder="Your email">
|
||||
</ion-input>
|
||||
<ion-input>
|
||||
<input control="password" type="password" placeholder="Your password">
|
||||
</ion-input>
|
||||
<button ion-button stable block type="submit">Create account</button>
|
||||
<div>
|
||||
<button ion-button primary block (click)="doLogin()">Log in</button>
|
||||
</div>
|
||||
</form>
|
||||
</ion-view>
|
||||
|
||||
@@ -1,160 +0,0 @@
|
||||
<style>
|
||||
|
||||
body * {
|
||||
display: block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
box-sizing: border-box;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: maroon;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
navview {
|
||||
position: absolute;
|
||||
background: gray;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
toolbars {
|
||||
background: blue;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
min-height: 50px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
toolbar {
|
||||
background: green;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
tabs {
|
||||
background: red;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
tab {
|
||||
background: blue;
|
||||
color: white;
|
||||
height: 50px;
|
||||
padding: 0 20px;
|
||||
border: 1px solid white;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content:center;
|
||||
}
|
||||
|
||||
view-container {
|
||||
background: yellow;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
view {
|
||||
position: absolute;
|
||||
background: orange;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.entering {
|
||||
box-shadow: 0px 0px 5px 5px black;
|
||||
}
|
||||
|
||||
.entering-1 {
|
||||
transform: translateX(20%);
|
||||
}
|
||||
|
||||
.entering-2 {
|
||||
transform: translateX(40%);
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
<navview>
|
||||
|
||||
<toolbars>
|
||||
<toolbar>
|
||||
Level 1, View 1 Toolbar
|
||||
</toolbar>
|
||||
<toolbar class="entering entering-1">
|
||||
Level 1, View 2 Toolbar
|
||||
</toolbar>
|
||||
</toolbars>
|
||||
|
||||
<view-container>
|
||||
|
||||
<view>
|
||||
Level 1, View 1 Content
|
||||
<div id="holder1"></div>
|
||||
</view>
|
||||
|
||||
<view class="entering entering-1">
|
||||
Level 1, View 2 Content
|
||||
<div id="holder2"></div>
|
||||
</view>
|
||||
|
||||
<navview class="entering entering-2">
|
||||
|
||||
<toolbars>
|
||||
<toolbar style="background:red">
|
||||
Level 3, View 1 Toolbar
|
||||
</toolbar>
|
||||
<toolbar class="entering entering-1" style="background:red">
|
||||
Level 3, View 2 Toolbar
|
||||
</toolbar>
|
||||
</toolbars>
|
||||
|
||||
<view-container>
|
||||
|
||||
<view style="background:blue">
|
||||
Level 3, View 1 Content
|
||||
</view>
|
||||
|
||||
<view class="entering entering-1" style="background:blue">
|
||||
Level 3, View 2 Content
|
||||
</view>
|
||||
|
||||
</view-container>
|
||||
|
||||
</navview>
|
||||
|
||||
</view-container>
|
||||
|
||||
</navview>
|
||||
|
||||
<script>
|
||||
|
||||
var btn = document.createElement('button');
|
||||
btn.textContent = 'Button!'
|
||||
btn.addEventListener('click', function() {
|
||||
alert('CLICK!')
|
||||
});
|
||||
|
||||
var holder1 = document.getElementById('holder1');
|
||||
var holder2 = document.getElementById('holder2');
|
||||
|
||||
holder1.appendChild(btn);
|
||||
|
||||
setTimeout(function(){
|
||||
holder1.removeChild(btn);
|
||||
holder2.appendChild(btn);
|
||||
}, 2000);
|
||||
|
||||
</script>
|
||||
12
ionic/components/app/test/transitions/main.html
Normal file
12
ionic/components/app/test/transitions/main.html
Normal file
@@ -0,0 +1,12 @@
|
||||
|
||||
<div animation>
|
||||
|
||||
<div class="square" style="position:absolute; width:100px; height:100px; background:red; top: 100px; left: 100px;"></div>
|
||||
<div class="square" style="position:absolute; width:100px; height:100px; background:green; top: 100px; left: 200px;"></div>
|
||||
<div class="square" style="position:absolute; width:100px; height:100px; background:blue; top: 100px; left: 300px;"></div>
|
||||
|
||||
<button class="button button-primary" (click)="start($event)">Start</button>
|
||||
<button class="button button-primary" (click)="stop($event)">Stop</button>
|
||||
|
||||
</div>
|
||||
|
||||
34
ionic/components/app/test/transitions/main.js
Normal file
34
ionic/components/app/test/transitions/main.js
Normal file
@@ -0,0 +1,34 @@
|
||||
import {Component, Decorator, View as NgView, NgElement, bootstrap} from 'angular2/angular2';
|
||||
import {Transition, IOSTransition} from 'ionic/ionic';
|
||||
|
||||
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
@NgView({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class IonicApp {
|
||||
constructor(
|
||||
@NgElement ngElement:NgElement
|
||||
) {
|
||||
|
||||
this.trans = new Transition( ngElement.domElement.querySelector('.square') )
|
||||
|
||||
this.trans.duration(500)
|
||||
this.trans.easing('linear')
|
||||
|
||||
this.trans.property('opacity', 0)
|
||||
|
||||
}
|
||||
|
||||
start() {
|
||||
this.trans.start()
|
||||
}
|
||||
|
||||
stop() {
|
||||
this.trans.stop()
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
bootstrap(IonicApp)
|
||||
@@ -1,7 +1,7 @@
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
@View({
|
||||
@NgView({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class IonicApp {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Component, View, Inject, Parent, NgElement, EventEmitter} from 'angular2/angular2'
|
||||
import {Component, View as NgView, Inject, Parent, NgElement, EventEmitter} from 'angular2/angular2'
|
||||
import * as types from 'ionic/components/aside/extensions/types'
|
||||
import * as gestures from 'ionic/components/aside/extensions/gestures'
|
||||
import {dom} from 'ionic/util'
|
||||
@@ -16,7 +16,7 @@ import {IonicComponent} from 'ionic/config/component'
|
||||
dragThreshold: 'dragThreshold'
|
||||
}
|
||||
})
|
||||
@View({
|
||||
@NgView({
|
||||
template: `<content></content>`
|
||||
})
|
||||
export class Aside {
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import {Aside, Content, View} from 'ionic/ionic';
|
||||
import {Aside} from 'ionic/components/aside/aside';
|
||||
import {Content} from 'ionic/components/content/content';
|
||||
import {View} from 'ionic/components/view/view';
|
||||
import {View as NgView, Component, bootstrap} from 'angular2/angular2';
|
||||
|
||||
@Component({
|
||||
|
||||
@@ -2,7 +2,7 @@ import {NgElement, Decorator} from 'angular2/angular2'
|
||||
import {IonicComponent} from 'ionic/config/component'
|
||||
|
||||
@Decorator({
|
||||
selector: '.button',
|
||||
selector: 'ion-button, [ion-button],.button',
|
||||
})
|
||||
export class Button {
|
||||
constructor(
|
||||
@@ -12,4 +12,6 @@ export class Button {
|
||||
this.config = Button.config.invoke(this)
|
||||
}
|
||||
}
|
||||
new IonicComponent(Button, {})
|
||||
new IonicComponent(Button, {
|
||||
propClasses: ['primary', 'secondary', 'danger', 'light', 'stable', 'dark', 'block']
|
||||
})
|
||||
|
||||
@@ -47,3 +47,14 @@
|
||||
<button class="button button-dark hover">hover</button>
|
||||
<button class="button button-dark activated">activated</button>
|
||||
</div>
|
||||
|
||||
<h2>With Properties</h2>
|
||||
|
||||
<div>
|
||||
<button ion-button primary>button.primary</button>
|
||||
<button ion-button secondary>button.secondary</button>
|
||||
<button ion-button stable>button.stable</button>
|
||||
<button ion-button light>button.light</button>
|
||||
<button ion-button dark>button.dark</button>
|
||||
<button ion-button danger>button.danger</button>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import {Component, View, bootstrap} from 'angular2/angular2'
|
||||
import {Button} from 'ionic/ionic'
|
||||
import {Component, View as NgView, bootstrap} from 'angular2/angular2'
|
||||
import {Button} from 'ionic/components/button/button'
|
||||
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
@View({
|
||||
@NgView({
|
||||
templateUrl: 'main.html',
|
||||
directives: [Button]
|
||||
})
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import {Component, View, bootstrap} from 'angular2/angular2'
|
||||
import {Button} from 'ionic/ionic'
|
||||
import {Component, View as NgView, bootstrap} from 'angular2/angular2'
|
||||
import {Button} from 'ionic/components/button/button'
|
||||
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
@View({
|
||||
@NgView({
|
||||
templateUrl: 'main.html',
|
||||
directives: [Button]
|
||||
})
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import {Component, View, bootstrap} from 'angular2/angular2'
|
||||
import {Button} from 'ionic/ionic'
|
||||
import {Component, View as NgView, bootstrap} from 'angular2/angular2'
|
||||
import {Button} from 'ionic/components/button/button'
|
||||
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
@View({
|
||||
@NgView({
|
||||
templateUrl: 'main.html',
|
||||
directives: [Button]
|
||||
})
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import {Component, View, bootstrap} from 'angular2/angular2'
|
||||
import {Button} from 'ionic/ionic'
|
||||
import {Component, View as NgView, bootstrap} from 'angular2/angular2'
|
||||
import {Button} from 'ionic/components/button/button'
|
||||
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
@View({
|
||||
@NgView({
|
||||
templateUrl: 'main.html',
|
||||
directives: [Button]
|
||||
})
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import {Component, View, bootstrap} from 'angular2/angular2'
|
||||
import {Button} from 'ionic/ionic'
|
||||
import {Component, View as NgView, bootstrap} from 'angular2/angular2'
|
||||
import {Button} from 'ionic/components/button/button'
|
||||
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
@View({
|
||||
@NgView({
|
||||
templateUrl: 'main.html',
|
||||
directives: [Button]
|
||||
})
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import {Component, View, bootstrap} from 'angular2/angular2'
|
||||
import {Button} from 'ionic/ionic'
|
||||
import {Component, View as NgView, bootstrap} from 'angular2/angular2'
|
||||
import {Button} from 'ionic/components/button/button'
|
||||
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
@View({
|
||||
@NgView({
|
||||
templateUrl: 'main.html',
|
||||
directives: [Button]
|
||||
})
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import {Component, View, bootstrap} from 'angular2/angular2'
|
||||
import {Button} from 'ionic/ionic'
|
||||
import {Component, View as NgView, bootstrap} from 'angular2/angular2'
|
||||
import {Button} from 'ionic/components/button/button'
|
||||
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
@View({
|
||||
@NgView({
|
||||
templateUrl: 'main.html',
|
||||
directives: [Button]
|
||||
})
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
|
||||
import {View, Content, List} from 'ionic/components';
|
||||
import {View} from 'ionic/components/view/view';
|
||||
import {Content} from 'ionic/components/content/content';
|
||||
import {List} from 'ionic/components/list/list';
|
||||
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
import {Component, View, NgElement, PropertySetter} from 'angular2/angular2'
|
||||
import {ComponentConfig} from 'ionic/config/component-config'
|
||||
import {Component, View as NgView, NgElement, PropertySetter} from 'angular2/angular2'
|
||||
import {IonicComponent} from 'ionic/config/component'
|
||||
|
||||
export let CheckboxConfig = new ComponentConfig('checkbox')
|
||||
|
||||
@Component({
|
||||
selector: 'ion-checkbox',
|
||||
@@ -11,10 +9,9 @@ export let CheckboxConfig = new ComponentConfig('checkbox')
|
||||
},
|
||||
events: {
|
||||
'^click': 'onClick()'
|
||||
},
|
||||
injectables: [CheckboxConfig]
|
||||
}
|
||||
})
|
||||
@View({
|
||||
@NgView({
|
||||
template: `
|
||||
<div class="item-media media-checkbox">
|
||||
<icon class="checkbox-off"></icon>
|
||||
@@ -31,7 +28,6 @@ export let CheckboxConfig = new ComponentConfig('checkbox')
|
||||
})
|
||||
export class Checkbox {
|
||||
constructor(
|
||||
configFactory: CheckboxConfig,
|
||||
@NgElement() ngElement: NgElement,
|
||||
@PropertySetter('attr.role') setAriaRole: Function,
|
||||
@PropertySetter('attr.aria-checked') setAriaChecked: Function,
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
import {View as NgView} from 'ionic/components/view/view';
|
||||
import {Content, Icon, Checkbox, List} from 'ionic/components';
|
||||
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
|
||||
import {View} from 'ionic/components/view/view';
|
||||
import {Content} from 'ionic/components/content/content';
|
||||
import {Icon} from 'ionic/components/icon/icon';
|
||||
import {Checkbox} from 'ionic/components/checkbox/checkbox';
|
||||
import {List} from 'ionic/components/list/list';
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
@View({
|
||||
@NgView({
|
||||
templateUrl: 'main.html',
|
||||
directives: [View, Content, Icon, Checkbox, List]
|
||||
})
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import {NgElement, Component, View, PropertySetter} from 'angular2/angular2';
|
||||
import {NgElement, Component, View as NgView, PropertySetter} from 'angular2/angular2';
|
||||
|
||||
@Component({
|
||||
selector: 'ion-content'
|
||||
})
|
||||
@View({
|
||||
@NgView({
|
||||
template: `
|
||||
<div class="scroll-content">
|
||||
<content></content>
|
||||
|
||||
17
ionic/components/input/input.js
Normal file
17
ionic/components/input/input.js
Normal file
@@ -0,0 +1,17 @@
|
||||
import {NgElement, Decorator} from 'angular2/angular2'
|
||||
import {IonicComponent} from 'ionic/config/component'
|
||||
|
||||
@Decorator({
|
||||
selector: 'ion-input'
|
||||
})
|
||||
export class Input {
|
||||
constructor(
|
||||
@NgElement() ngElement:NgElement
|
||||
) {
|
||||
this.domElement = ngElement.domElement
|
||||
//this.config = Button.config.invoke(this)
|
||||
console.log('INPUT');
|
||||
}
|
||||
}
|
||||
new IonicComponent(Input, {
|
||||
})
|
||||
@@ -1,4 +1,4 @@
|
||||
import {NgElement, Component, View} from 'angular2/angular2'
|
||||
import {NgElement, Component, View as NgView} from 'angular2/angular2'
|
||||
import {IonicComponent} from 'ionic/config/component'
|
||||
import {
|
||||
ItemPrimaryOptions, ItemSecondaryOptions
|
||||
@@ -8,9 +8,9 @@ import {
|
||||
} from 'ionic/components/item/item-swipe-buttons'
|
||||
|
||||
@Component({
|
||||
selector: 'ion-item'
|
||||
selector: 'ion-item,[ion-item]'
|
||||
})
|
||||
@View({
|
||||
@NgView({
|
||||
template: `
|
||||
<content select="ion-primary-options"></content>
|
||||
<content select="ion-primary-swipe-buttons"></content>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import {Component, View as NgView, For, bootstrap} from 'angular2/angular2'
|
||||
import {Item, View, List} from 'ionic/components'
|
||||
import {Item, View, List} from 'ionic/ionic'
|
||||
|
||||
// import {ItemPrimarySwipeButtons} from 'ionic/components/item/item-swipe-buttons'
|
||||
import {ItemPrimarySwipeButtons} from 'ionic/components/item/item-swipe-buttons'
|
||||
|
||||
@Component({
|
||||
selector: '[ion-app]'
|
||||
})
|
||||
@NgView({
|
||||
templateUrl: 'main.html',
|
||||
directives: [Item, View, List, For/*, ItemPrimarySwipeButtons*/]
|
||||
directives: [Item, View, List, For, ItemPrimarySwipeButtons]
|
||||
})
|
||||
class App{
|
||||
constructor() {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import {Component, View as NgView, For, bootstrap} from 'angular2/angular2'
|
||||
import {Item, View, List} from 'ionic/components'
|
||||
import {Item, View, List} from 'ionic/ionic'
|
||||
|
||||
import {ItemPrimarySwipeButtons} from 'ionic/components/item/item-swipe-buttons'
|
||||
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import {NgElement, Component, View, Parent} from 'angular2/angular2'
|
||||
import {NgElement, Component, View as NgView, Parent} from 'angular2/angular2'
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'layout,[layout]'
|
||||
})
|
||||
@View({
|
||||
@NgView({
|
||||
template: `
|
||||
<content></content>
|
||||
<object class="ele-qry" data="about:blank"></object>
|
||||
|
||||
@@ -1,5 +1,7 @@
|
||||
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
|
||||
import {View, Content, Layout} from 'ionic/components';
|
||||
import {View} from 'ionic/components/view/view';
|
||||
import {Content} from 'ionic/components/content/content';
|
||||
import {Layout} from 'ionic/components/layout/layout';
|
||||
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
|
||||
@@ -1,21 +1,20 @@
|
||||
import {NgElement, Component, View} from 'angular2/angular2'
|
||||
import {ComponentConfig} from 'ionic/config/component-config';
|
||||
import {NgElement, Component, View as NgView} from 'angular2/angular2'
|
||||
import {IonicComponent} from 'ionic/config/component'
|
||||
|
||||
export let ListConfig = new ComponentConfig('list')
|
||||
|
||||
@Component({
|
||||
selector: 'ion-list',
|
||||
injectables: [ListConfig]
|
||||
selector: 'ion-list'
|
||||
})
|
||||
@View({
|
||||
@NgView({
|
||||
template: `<content></content>`
|
||||
})
|
||||
export class List {
|
||||
constructor(
|
||||
configFactory: ListConfig,
|
||||
ngElement: NgElement
|
||||
) {
|
||||
this.domElement = ngElement.domElement;
|
||||
configFactory.create(this);
|
||||
this.config = List.config.invoke(this)
|
||||
}
|
||||
}
|
||||
|
||||
new IonicComponent(List, {})
|
||||
|
||||
@@ -3,6 +3,7 @@
|
||||
|
||||
<ion-content>
|
||||
|
||||
|
||||
<div class="list-header">
|
||||
List Header
|
||||
</div>
|
||||
@@ -77,6 +78,7 @@
|
||||
|
||||
</ion-list>
|
||||
|
||||
|
||||
</ion-content>
|
||||
|
||||
</ion-view>
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
|
||||
import {View, Content, List} from 'ionic/components';
|
||||
import {View} from 'ionic/components/view/view';
|
||||
import {Content} from 'ionic/components/content/content';
|
||||
import {List} from 'ionic/components/list/list';
|
||||
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
@NgView({
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import {Compiler, NgElement, Component, View} from 'angular2/angular2';
|
||||
import {Compiler, NgElement, Component, View as NgView} from 'angular2/angular2';
|
||||
|
||||
@Component({
|
||||
selector: 'ion-modal-wrapper'
|
||||
})
|
||||
@View({
|
||||
@NgView({
|
||||
template: `
|
||||
<div class="modal-backdrop active">
|
||||
<div class="modal-backdrop-bg"></div>
|
||||
@@ -25,7 +25,7 @@ class ModalWrapper {
|
||||
@Component({
|
||||
selector: 'ion-modal'
|
||||
})
|
||||
@View({
|
||||
@NgView({
|
||||
directives: [ModalWrapper],
|
||||
template: `
|
||||
<ion-modal-wrapper>
|
||||
|
||||
@@ -1,4 +1,11 @@
|
||||
import {DynamicComponent, Parent, NgElement, DynamicComponentLocation, DynamicComponentLoader, Optional} from 'angular2/angular2'
|
||||
import {
|
||||
DynamicComponent,
|
||||
Parent,
|
||||
NgElement,
|
||||
DynamicComponentLoader,
|
||||
DynamicComponentLocation,
|
||||
Optional
|
||||
} from 'angular2/angular2'
|
||||
import {NavViewport} from 'ionic/components/nav-viewport/nav-viewport'
|
||||
import {Tab} from 'ionic/components/tabs/tab'
|
||||
|
||||
@@ -53,3 +60,6 @@ export class NavPane {
|
||||
return this.viewport.popTo(index, opts)
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
Ideal API: inject a tN
|
||||
|
||||
@@ -1,5 +1,4 @@
|
||||
import {Component, View, For, NgElement, bind} from 'angular2/angular2'
|
||||
import {ComponentConfig} from 'ionic/config/component-config'
|
||||
import {Component, View as NgView, For, NgElement, bind} from 'angular2/angular2'
|
||||
import {NavPane} from 'ionic/components/nav-pane/nav-pane'
|
||||
import * as util from 'ionic/util'
|
||||
|
||||
@@ -26,11 +25,11 @@ class NavStack {
|
||||
bind: {
|
||||
initial: 'initial'
|
||||
},
|
||||
injectables: [
|
||||
services: [
|
||||
NavStack
|
||||
]
|
||||
})
|
||||
@View({
|
||||
@NgView({
|
||||
template: `
|
||||
<header class="toolbar-container">
|
||||
<!-- COLLECTION OF TOOLBARS FOR EACH OF ITS VIEWS WITHIN THIS NAV-VIEWPORT -->
|
||||
@@ -89,12 +88,12 @@ export class NavViewport {
|
||||
// TODO make sure the timing is together
|
||||
// TODO allow starting an animation in the middle (eg gestures). Leave
|
||||
// most of this up to the animation's implementation.
|
||||
push(Class: Function, opts = {}) {
|
||||
push(Class: Function, data = {}, opts = {}) {
|
||||
util.defaults(opts, {
|
||||
sync: this._stack.length === 0
|
||||
})
|
||||
|
||||
let pushedItem = new NavItem(Class)
|
||||
let pushedItem = new NavItem(Class, data)
|
||||
this._stack.push(pushedItem)
|
||||
this._ngForLoopArray.push(pushedItem)
|
||||
|
||||
@@ -178,8 +177,9 @@ export class NavViewport {
|
||||
}
|
||||
|
||||
class NavItem {
|
||||
constructor(ComponentClass) {
|
||||
constructor(ComponentClass, data = {}) {
|
||||
this.Class = ComponentClass
|
||||
this.data = data
|
||||
this._setupPromise = new Promise((resolve) => {
|
||||
this._resolveSetupPromise = resolve
|
||||
})
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import {Component, View, bootstrap} from 'angular2/angular2'
|
||||
import {NavViewport} from 'ionic/components'
|
||||
import {Component, View as NgView, bootstrap} from 'angular2/angular2'
|
||||
import {NavViewport} from 'ionic/components/nav-viewport/nav-viewport'
|
||||
import {Log} from 'ionic/util'
|
||||
import {FirstPage} from 'app/pages/first-page'
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
@View({
|
||||
@NgView({
|
||||
directives: [NavViewport],
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import {Component, View as NgView, Parent} from 'angular2/angular2'
|
||||
import {NavViewport, View} from 'ionic/components'
|
||||
import {NavViewport, View} from 'ionic/ionic'
|
||||
import {SecondPage} from 'app/pages/second-page'
|
||||
|
||||
@Component({
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import {Component, View as NgView, Parent} from 'angular2/angular2'
|
||||
import {NavViewport, View} from 'ionic/components'
|
||||
import {NavViewport} from 'ionic/components'
|
||||
import {View} from 'ionic/components/view/view'
|
||||
|
||||
@Component({
|
||||
selector: 'second-page'
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
import {NgElement, Component, View} from 'angular2/angular2'
|
||||
import {ComponentConfig} from 'ionic/config/component-config';
|
||||
import {NgElement, Component, View as NgView} from 'angular2/angular2'
|
||||
import {IonicComponent} from 'ionic/config/component'
|
||||
|
||||
export let RadioConfig = new ComponentConfig('radio');
|
||||
|
||||
@Component({
|
||||
selector: 'ion-radio',
|
||||
injectables: [RadioConfig]
|
||||
selector: 'ion-radio'
|
||||
})
|
||||
@View({
|
||||
@NgView({
|
||||
template: `
|
||||
<div class="item-content">
|
||||
|
||||
@@ -25,13 +23,14 @@ export let RadioConfig = new ComponentConfig('radio');
|
||||
})
|
||||
export class RadioButton {
|
||||
constructor(
|
||||
configFactory: RadioConfig,
|
||||
element: NgElement
|
||||
) {
|
||||
this.domElement = element.domElement
|
||||
this.config = RadioButton.config.invoke(this)
|
||||
|
||||
this.domElement.classList.add('item')
|
||||
this.domElement.setAttribute('aria-checked', true)
|
||||
|
||||
configFactory.create(this)
|
||||
}
|
||||
}
|
||||
|
||||
new IonicComponent(RadioButton, {})
|
||||
|
||||
@@ -1,23 +1,22 @@
|
||||
import {NgElement, Component, View} from 'angular2/angular2'
|
||||
import {ComponentConfig} from 'ionic/config/component-config';
|
||||
import {NgElement, Component, View as NgView} from 'angular2/angular2'
|
||||
import {IonicComponent} from 'ionic/config/component'
|
||||
|
||||
export let RadioConfig = new ComponentConfig('radio');
|
||||
|
||||
@Component({
|
||||
selector: 'ion-radio-group',
|
||||
injectables: [RadioConfig]
|
||||
selector: 'ion-radio-group'
|
||||
})
|
||||
@View({
|
||||
@NgView({
|
||||
template: `<content></content>`
|
||||
})
|
||||
export class RadioGroup {
|
||||
constructor(
|
||||
configFactory: RadioConfig,
|
||||
element: NgElement
|
||||
) {
|
||||
this.domElement = element.domElement
|
||||
this.config = RadioGroup.config.invoke(this)
|
||||
|
||||
this.domElement.classList.add('list')
|
||||
this.domElement.classList.add('radio-group')
|
||||
configFactory.create(this)
|
||||
}
|
||||
}
|
||||
|
||||
new IonicComponent(RadioGroup, {})
|
||||
|
||||
@@ -1,5 +1,9 @@
|
||||
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
|
||||
import {View, Content, Icon, RadioGroup, RadioButton} from 'ionic/components';
|
||||
import {View} from 'ionic/components/view/view';
|
||||
import {Content} from 'ionic/components/content/content';
|
||||
import {Icon} from 'ionic/components/icon/icon';
|
||||
import {RadioGroup} from 'ionic/components/radio/radio-group';
|
||||
import {RadioButton} from 'ionic/components/radio/radio-button';
|
||||
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Component, View, Inject, Parent, NgElement} from 'angular2/angular2'
|
||||
import {Component, View as NgView, Inject, Parent, NgElement} from 'angular2/angular2'
|
||||
import {Log} from 'ionic/util'
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,33 +1,44 @@
|
||||
import {NgElement, Component, View} from 'angular2/angular2'
|
||||
import {ComponentConfig} from 'ionic/config/component-config';
|
||||
import {NgElement, Component, View as NgView} from 'angular2/angular2'
|
||||
import {IonicComponent} from 'ionic/config/component'
|
||||
|
||||
export let SearchBarConfig = new ComponentConfig('search-bar')
|
||||
|
||||
@Component({
|
||||
selector: 'ion-search-bar',
|
||||
bind: {
|
||||
cancelText: 'cancel-text',
|
||||
placeholderText: 'placeholder-text'
|
||||
},
|
||||
injectables: [SearchBarConfig]
|
||||
}
|
||||
})
|
||||
@View({
|
||||
@NgView({
|
||||
template: `<div class="search-bar-input-container">
|
||||
<input class="search-bar-input" type="search" [placeholder]="placeholderText">
|
||||
<input class="search-bar-input" type="search" [attr.placeholder]="placeholderText">
|
||||
</div>
|
||||
<button class="button search-bar-cancel">{{ cancelText }}</button>`
|
||||
})
|
||||
export class SearchBar {
|
||||
constructor(
|
||||
configFactory: SearchBarConfig,
|
||||
ngElement: NgElement
|
||||
) {
|
||||
this.domElement = ngElement.domElement;
|
||||
configFactory.create(this);
|
||||
|
||||
// Defaults
|
||||
this.cancelText = this.cancelText || 'Cancel'
|
||||
this.placeholderText = this.placeholderText || 'Search'
|
||||
this.domElement = ngElement.domElement
|
||||
this.config = SearchBar.config.invoke(this)
|
||||
}
|
||||
}
|
||||
|
||||
new IonicComponent(SearchBar, {
|
||||
bind: {
|
||||
cancelText: {
|
||||
defaults: {
|
||||
ios: 'Cancel',
|
||||
android: 'Cancel',
|
||||
core: 'Cancel'
|
||||
}
|
||||
},
|
||||
placeholderText: {
|
||||
defaults: {
|
||||
ios: 'Search',
|
||||
android: 'Search',
|
||||
core: 'Search'
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
|
||||
import {View, Content, List, SearchBar} from 'ionic/components';
|
||||
import {View} from 'ionic/components/view/view';
|
||||
import {Content} from 'ionic/components/content/content';
|
||||
import {List} from 'ionic/components/list/list';
|
||||
import {SearchBar} from 'ionic/components/search-bar/search-bar';
|
||||
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import {Component, View} from 'angular2/angular2'
|
||||
import {View} from 'ionic/components'
|
||||
import {Component, View as NgView} from 'angular2/angular2'
|
||||
import {View} from 'ionic/ionic'
|
||||
|
||||
@Component({
|
||||
selector: 'settings-general'
|
||||
})
|
||||
@View({
|
||||
@NgView({
|
||||
template: `
|
||||
<ion-view nav-title="General Stuff">
|
||||
General Settings
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import {Component, View} from 'angular2/angular2'
|
||||
import {View, NavPane} from 'ionic/components'
|
||||
import {Component, View as NgView} from 'angular2/angular2'
|
||||
import {View, NavPane} from 'ionic/ionic'
|
||||
|
||||
@Component({ selector: 'privacy-settings' })
|
||||
@View({
|
||||
@NgView({
|
||||
template: `
|
||||
<ion-view nav-title="Privacy">
|
||||
Privacy
|
||||
@@ -22,7 +22,7 @@ export class PrivacyPage {
|
||||
}
|
||||
|
||||
@Component({ selector: 'privp1' })
|
||||
@View({
|
||||
@NgView({
|
||||
template: `
|
||||
<ion-view nav-title="Privacy Page 1">
|
||||
This is page 1
|
||||
@@ -51,7 +51,7 @@ class PrivacyP1 {
|
||||
}
|
||||
|
||||
@Component({ selector: 'privp2' })
|
||||
@View({
|
||||
@NgView({
|
||||
template: `
|
||||
<ion-view nav-title="Privacy Page 2">
|
||||
Page 2 here
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import {Component, View, NgElement, PropertySetter} from 'angular2/angular2'
|
||||
import {ComponentConfig} from 'ionic/config/component-config'
|
||||
import {Component, View as NgView, NgElement, PropertySetter} from 'angular2/angular2'
|
||||
import {IonicComponent} from 'ionic/config/component'
|
||||
|
||||
export let SwitchConfig = new ComponentConfig('switch')
|
||||
|
||||
@Component({
|
||||
selector: 'ion-switch',
|
||||
@@ -10,10 +9,9 @@ export let SwitchConfig = new ComponentConfig('switch')
|
||||
},
|
||||
events: {
|
||||
'click': 'onClick()'
|
||||
},
|
||||
injectables: [SwitchConfig]
|
||||
}
|
||||
})
|
||||
@View({
|
||||
@NgView({
|
||||
template: `
|
||||
<div class="item-content">
|
||||
|
||||
@@ -29,30 +27,27 @@ export let SwitchConfig = new ComponentConfig('switch')
|
||||
})
|
||||
export class Switch {
|
||||
constructor(
|
||||
configFactory: SwitchConfig,
|
||||
element: NgElement,
|
||||
@PropertySetter('attr.role') setAriaRole: Function,
|
||||
@PropertySetter('attr.aria-checked') setAriaChecked: Function,
|
||||
@PropertySetter('attr.aria-invalid') setAriaInvalid: Function,
|
||||
@PropertySetter('attr.aria-disabled') setAriaDisabled: Function
|
||||
@PropertySetter('attr.aria-checked') setChecked: Function,
|
||||
@PropertySetter('attr.aria-invalid') setInvalid: Function,
|
||||
@PropertySetter('attr.aria-disabled') setDisabled: Function
|
||||
) {
|
||||
this.domElement = element.domElement
|
||||
this.config = Switch.config.invoke(this)
|
||||
|
||||
this.domElement.classList.add('item')
|
||||
this.config = configFactory.create(this)
|
||||
|
||||
setAriaRole('checkbox')
|
||||
setAriaInvalid('false')
|
||||
setAriaDisabled('false')
|
||||
setInvalid('false')
|
||||
setDisabled('false')
|
||||
|
||||
this.setAriaRole = setAriaRole
|
||||
this.setAriaChecked = setAriaChecked
|
||||
this.setAriaInvalid = setAriaInvalid
|
||||
this.setAriaDisabled = setAriaDisabled
|
||||
this.setChecked = setChecked
|
||||
}
|
||||
|
||||
set checked(checked) {
|
||||
this._checked = checked
|
||||
this.setAriaChecked(checked)
|
||||
this.setChecked(checked)
|
||||
}
|
||||
get checked() {
|
||||
return this._checked
|
||||
@@ -62,3 +57,4 @@ export class Switch {
|
||||
}
|
||||
}
|
||||
|
||||
new IonicComponent(Switch, {})
|
||||
|
||||
@@ -1,5 +1,8 @@
|
||||
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
|
||||
import {View, Content, Switch, List} from 'ionic/components';
|
||||
import {View} from 'ionic/components/view/view';
|
||||
import {Content} from 'ionic/components/content/content';
|
||||
import {Switch} from 'ionic/components/switch/switch';
|
||||
import {List} from 'ionic/components/list/list';
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
@NgView({
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import {
|
||||
NgElement,
|
||||
Component,
|
||||
View,
|
||||
View as NgView,
|
||||
Ancestor,
|
||||
PropertySetter,
|
||||
For
|
||||
@@ -9,6 +9,7 @@ import {
|
||||
import {NavViewport} from 'ionic/components/nav-viewport/nav-viewport'
|
||||
import {NavPane} from 'ionic/components/nav-pane/nav-pane'
|
||||
import {Tabs} from 'ionic/components/tabs/tabs'
|
||||
import * as util from 'ionic/util'
|
||||
import {IonicComponent} from 'ionic/config/component'
|
||||
|
||||
|
||||
@@ -16,10 +17,11 @@ import {IonicComponent} from 'ionic/config/component'
|
||||
selector: 'ion-tab',
|
||||
bind: {
|
||||
title: 'tab-title',
|
||||
icon: 'tab-icon',
|
||||
initial: 'initial'
|
||||
}
|
||||
})
|
||||
@View({
|
||||
@NgView({
|
||||
template: `
|
||||
<div class="nav-pane-container">
|
||||
<!-- COLLECTION OF PANES WITHIN THIS NAV-VIEWPORT, EACH PANE AS ONE VIEW -->
|
||||
@@ -33,12 +35,20 @@ export class Tab extends NavViewport {
|
||||
constructor(
|
||||
element: NgElement,
|
||||
@Ancestor() tabs: Tabs,
|
||||
@PropertySetter('class.hide') setHidden: Function
|
||||
@PropertySetter('class.hide') setHidden: Function,
|
||||
@PropertySetter('attr.role') setRole: Function,
|
||||
@PropertySetter('attr.id') setId: Function,
|
||||
@PropertySetter('attr.aria-labelledby') setLabelby: Function
|
||||
) {
|
||||
super(element)
|
||||
this.config = Tab.config.invoke(this)
|
||||
this.setHidden = setHidden
|
||||
|
||||
this.tabId = util.uid()
|
||||
setId('tab-content-' + this.tabId)
|
||||
setLabelby('tab-item-' + this.tabId)
|
||||
setRole('tabpanel')
|
||||
|
||||
this.setSelected(false)
|
||||
tabs.addTab(this)
|
||||
}
|
||||
|
||||
@@ -1,33 +1,33 @@
|
||||
import {NgElement, Component, View, For} from 'angular2/angular2'
|
||||
import {NgElement, Component, View as NgView, For, PropertySetter} from 'angular2/angular2'
|
||||
import {IonicComponent} from 'ionic/config/component'
|
||||
|
||||
@Component({
|
||||
selector: 'ion-tabs',
|
||||
bind: {
|
||||
placement: 'placement',
|
||||
tabBarIcons: 'tab-bar-icons',
|
||||
tabBarText: 'tab-bar-text'
|
||||
tabBarPlacement: 'tab-bar-placement',
|
||||
tabBarIcons: 'tab-bar-icons'
|
||||
}
|
||||
})
|
||||
@View({
|
||||
@NgView({
|
||||
template: `
|
||||
<header class="toolbar-container">
|
||||
<!-- COLLECTION OF TOOLBARS FOR EACH VIEW WITHIN EACH TAB-VIEWPORT -->
|
||||
<!-- TOOLBARS FOR EACH VIEW SHOULD HAVE THE SAME CONTEXT AS ITS VIEW -->
|
||||
</header>
|
||||
|
||||
<nav class="tab-bar-container">
|
||||
<nav class="tab-bar-container" role="tablist"
|
||||
[attr.aria-activedescendant]="'tab-item-' + selectedTab.tabId">
|
||||
<div class="tab-bar">
|
||||
<a *for="#tab of tabs"
|
||||
<button *for="#t of tabs"
|
||||
role="tab"
|
||||
class="tab-bar-item"
|
||||
[class.tab-active]="tab.isSelected"
|
||||
(^click)="onClickTabItem($event, tab)">
|
||||
<icon class="tab-bar-item-icon ion-home"
|
||||
[hidden]="tabBarIcons=='none'"
|
||||
[class.tab-bar-icon-bottom]="tabBarIcons=='bottom'"
|
||||
[class.tab-bar-icon-top]="tabBarIcons=='top'"></icon>
|
||||
<span class="tab-bar-item-text" [hidden]="tabBarText=='none'">{{tab.title}}</span>
|
||||
</a>
|
||||
[attr.id]="'tab-item-' + t.tabId"
|
||||
[attr.aria-controls]="'tab-content-' + t.tabId"
|
||||
[attr.aria-selected]="t.isSelected"
|
||||
(^click)="onClickTabItem($event, t)">
|
||||
<icon [class-name]="'tab-bar-item-icon ' + t.icon" [hidden]="!t.icon"></icon>
|
||||
<span class="tab-bar-item-text" [hidden]="!t.title">{{t.title}}</span>
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
@@ -42,21 +42,8 @@ export class Tabs {
|
||||
@NgElement() ngElement: NgElement
|
||||
) {
|
||||
this.domElement = ngElement.domElement
|
||||
|
||||
// should be used to cover up sibling .nav-pane's and it's parent
|
||||
this.domElement.classList.add('nav-pane-cover-parent')
|
||||
|
||||
// .tab-bar-top/bottom should be added to the entire element when specified
|
||||
// TODO: MAKE MORE GOOD!!!
|
||||
setTimeout(() => {
|
||||
if (this.placement == 'top') {
|
||||
this.domElement.classList.add('tab-bar-top')
|
||||
} else {
|
||||
this.domElement.classList.add('tab-bar-bottom')
|
||||
}
|
||||
})
|
||||
|
||||
this.config = Tabs.config.invoke(this)
|
||||
|
||||
this.tabs = []
|
||||
}
|
||||
|
||||
@@ -88,7 +75,7 @@ export class Tabs {
|
||||
|
||||
new IonicComponent(Tabs, {
|
||||
bind: {
|
||||
placement: {
|
||||
tabBarPlacement: {
|
||||
defaults: {
|
||||
ios: 'bottom',
|
||||
android: 'top',
|
||||
@@ -98,10 +85,9 @@ new IonicComponent(Tabs, {
|
||||
tabBarIcons: {
|
||||
defaults: {
|
||||
ios: 'top',
|
||||
android: 'none',
|
||||
android: 'top',
|
||||
core: 'top'
|
||||
}
|
||||
},
|
||||
tabBarText: {}
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
import {Component, View, bootstrap} from 'angular2/angular2'
|
||||
import {NavViewport, Aside} from 'ionic/components'
|
||||
import {Component, View as NgView, bootstrap} from 'angular2/angular2'
|
||||
import {NavViewport, Aside} from 'ionic/ionic'
|
||||
import {SignInPage} from 'app/pages/sign-in'
|
||||
|
||||
|
||||
@Component({
|
||||
selector: '[ion-app]',
|
||||
})
|
||||
@View({
|
||||
@NgView({
|
||||
templateUrl: 'main.html',
|
||||
directives: []
|
||||
directives: [NavViewport, Aside]
|
||||
})
|
||||
class App {
|
||||
constructor() {
|
||||
|
||||
@@ -17,6 +17,10 @@
|
||||
</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<input>
|
||||
</p>
|
||||
|
||||
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
|
||||
|
||||
</ion-content>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import {Component, View as NgView} from 'angular2/angular2'
|
||||
import {View, NavPane, Content} from 'ionic/components'
|
||||
import {View, NavPane, Content} from 'ionic/ionic'
|
||||
import {TabsPage} from 'app/pages/tabs'
|
||||
|
||||
@Component({
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
|
||||
<ion-tabs>
|
||||
|
||||
<ion-tab [initial]="tab1Initial" tab-title="Tab 1">
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import {Component, View as NgView, Parent} from 'angular2/angular2'
|
||||
import {View, Tabs, Tab, Aside, Content, NavPane} from 'ionic/components'
|
||||
import {View, Tabs, Tab, Aside, Content, NavPane} from 'ionic/ionic'
|
||||
|
||||
|
||||
@Component({
|
||||
selector: 'tabs-page'
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
|
||||
<ion-tabs>
|
||||
|
||||
<ion-tab tab-title="Tab 1">
|
||||
<ion-tab tab-title="Tab 1" tab-icon="ion-home">
|
||||
<ion-view nav-title="Tab 1">
|
||||
<ion-content class="padding">
|
||||
Tab 1 Content
|
||||
@@ -9,7 +9,7 @@
|
||||
</ion-view>
|
||||
</ion-tab>
|
||||
|
||||
<ion-tab tab-title="Tab 2">
|
||||
<ion-tab tab-title="Tab 2" tab-icon="ion-star">
|
||||
<ion-view nav-title="Tab 2">
|
||||
<ion-content class="padding">
|
||||
Tab 2 Content
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import {Component, View as NgView, bootstrap} from 'angular2/angular2'
|
||||
import {View, Tabs, Tab} from 'ionic/components'
|
||||
import {View, Tabs, Tab} from 'ionic/ionic'
|
||||
import {webview} from 'ionic/webview/webview'
|
||||
import {cordova} from 'ionic/webview/cordova/cordova'
|
||||
import {nodeWebkit} from 'ionic/webview/node-webkit/node-webkit'
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
|
||||
import {View, Tabs, Tab} from 'ionic/components';
|
||||
import {View, Tabs, Tab} from 'ionic/ionic';
|
||||
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import {Component, View, bootstrap} from 'angular2/angular2';
|
||||
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
|
||||
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
@View({
|
||||
@NgView({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class IonicApp {
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import {Component, View as NgView, bootstrap} from 'angular2/angular2';
|
||||
import {View, Tabs, Tab} from 'ionic/components';
|
||||
import {View, Tabs, Tab} from 'ionic/ionic';
|
||||
|
||||
|
||||
@Component({ selector: '[ion-app]' })
|
||||
@View({
|
||||
@NgView({
|
||||
templateUrl: 'main.html',
|
||||
directives: [View, Tabs, Tab]
|
||||
})
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import {NgElement, Component, View} from 'angular2/angular2'
|
||||
import {NgElement, Component, View as NgView} from 'angular2/angular2'
|
||||
import {IonicComponent} from 'ionic/config/component'
|
||||
|
||||
@Component({
|
||||
selector: '.back-button',
|
||||
})
|
||||
@View({
|
||||
@NgView({
|
||||
template: `
|
||||
<icon [class-name]="'back-button-icon ' + icon"></icon>
|
||||
<span class="back-button-text">
|
||||
|
||||
@@ -1,18 +1,16 @@
|
||||
import {NgElement, Component, View, Ancestor, Optional} from 'angular2/angular2'
|
||||
import {NgElement, Component, View as NgView, Ancestor} from 'angular2/angular2'
|
||||
import {Optional} from 'angular2/src/di/annotations'
|
||||
import {BackButton} from 'ionic/components/toolbar/back-button'
|
||||
import {ComponentConfig} from 'ionic/config/component-config'
|
||||
import {IonicComponent} from 'ionic/config/component'
|
||||
import {raf} from 'ionic/util/dom'
|
||||
|
||||
export let ToolbarConfig = new ComponentConfig('toolbar')
|
||||
|
||||
@Component({
|
||||
selector: 'ion-toolbar',
|
||||
bind: {
|
||||
title: 'nav-title'
|
||||
},
|
||||
injectables: [ToolbarConfig]
|
||||
}
|
||||
})
|
||||
@View({
|
||||
@NgView({
|
||||
template: `
|
||||
<div class="toolbar-items">
|
||||
<button class="button back-button toolbar-item" style="display:none"></button>
|
||||
@@ -34,12 +32,10 @@ export let ToolbarConfig = new ComponentConfig('toolbar')
|
||||
})
|
||||
export class Toolbar {
|
||||
constructor(
|
||||
@NgElement() ngEle:NgElement,
|
||||
configFactory: ToolbarConfig
|
||||
@NgElement() ngEle:NgElement
|
||||
) {
|
||||
this.domElement = ngEle.domElement
|
||||
|
||||
this.config = configFactory.create(this);
|
||||
this.config = Toolbar.config.invoke(this)
|
||||
|
||||
// TODO: make more better plz
|
||||
setTimeout(() => {
|
||||
@@ -87,3 +83,5 @@ export class Toolbar {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
new IonicComponent(Toolbar, {})
|
||||
|
||||
@@ -1,15 +1,13 @@
|
||||
import {NgElement, Component, View as NgView, Parent, Ancestor} from 'angular2/angular2'
|
||||
import {Toolbar} from 'ionic/components/toolbar/toolbar'
|
||||
import {ComponentConfig} from 'ionic/config/component-config'
|
||||
import {IonicComponent} from 'ionic/config/component'
|
||||
|
||||
export let ViewConfig = new ComponentConfig('view')
|
||||
|
||||
@Component({
|
||||
selector: 'ion-view',
|
||||
bind: {
|
||||
title: 'nav-title'
|
||||
},
|
||||
injectables: [ViewConfig]
|
||||
}
|
||||
})
|
||||
@NgView({
|
||||
template: `
|
||||
@@ -23,12 +21,11 @@ export let ViewConfig = new ComponentConfig('view')
|
||||
})
|
||||
export class View {
|
||||
constructor(
|
||||
configFactory: ViewConfig,
|
||||
@NgElement() ngElement:NgElement
|
||||
) {
|
||||
this.domElement = ngElement.domElement
|
||||
this.domElement.classList.add('pane')
|
||||
this.config = configFactory.create(this)
|
||||
this.config = View.config.invoke(this)
|
||||
|
||||
|
||||
/*** TODO: MAKE MORE GOOD!! HACK HACK HACK!!!!!!!!! *****/
|
||||
/*
|
||||
@@ -65,3 +62,5 @@ export class View {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
new IonicComponent(View, {})
|
||||
|
||||
Reference in New Issue
Block a user