javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 14:01:20 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch '2.0' into dark-theme

Browse Source
This commit is contained in:
Matheus Cruz Rocha
2016-02-04 10:52:09 -03:00
parent 70bee0fcc6 60fdc5c2f3
commit 0c97a0fdba
100 changed files with 1320 additions and 994 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
CHANGELOG.md
View File

@ -27,6 +27,14 @@
* **action-sheet:** Button `style` property renamed to `role` ([1c618b5](https://github.com/driftyco/ionic/commit/1c618b51eb0a31013f7d3509d34c796d65689836#diff-f61014c4fb6e166fa1b5645d126dd4f6L26))
##### Angular was updated to Beta 2
* Update the version of Angular in your `package.json` file:
```
"angular2": "2.0.0-beta.2",
```
<a name="2.0.0-alpha.53"></a>
# 2.0.0-alpha.53 (2016-01-28)

5
demos/action-sheet/main.html
View File

@ -2,6 +2,7 @@
<ion-title>Action Sheet</ion-title>
</ion-navbar>
<ion-content padding>
<button full block (click)="present()">Open Action Sheet</button>
<ion-content>
<button block (click)="present()">Basic Action Sheet</button>
<button block secondary (click)="present()">Custom Animation Action Sheet</button>
</ion-content>

1
demos/alert/app.html Normal file
View File

@ -0,0 +1 @@
<ion-nav [root]="rootPage"></ion-nav>

220
demos/alert/index.ts Normal file
View File

@ -0,0 +1,220 @@
import {App, Page, Alert, NavController} from 'ionic/ionic';
@App({
templateUrl: 'app.html'
})
class ApiDemoApp {
constructor() {
this.rootPage = InitialPage;
}
}
@Page({
templateUrl: 'main.html'
})
export class InitialPage {
constructor(nav: NavController) {
this.nav = nav;
}
doAlert() {
let alert = Alert.create({
title: 'New Friend!',
subTitle: 'Your friend, Obi wan Kenobi, just accepted your friend request!',
buttons: ['Ok']
});
this.nav.present(alert);
}
doConfirm() {
let alert = Alert.create({
title: 'Use this lightsaber?',
body: 'Do you agree to use this lightsaber to do good across the intergalactic galaxy?',
buttons: [
{
text: 'Disagree',
handler: () => {
console.log('Disagree clicked');
}
},
{
text: 'Agree',
handler: () => {
console.log('Agree clicked');
}
}
]
});
this.nav.present(alert);
}
doPrompt() {
let alert = Alert.create({
title: 'Login',
body: "Enter a name for this new album you're so keen on adding",
inputs: [
{
name: 'title',
placeholder: 'Title'
},
],
buttons: [
{
text: 'Cancel',
handler: data => {
console.log('Cancel clicked');
}
},
{
text: 'Save',
handler: data => {
console.log('Saved clicked');
}
}
]
});
this.nav.present(alert);
}
doRadio() {
let alert = Alert.create();
alert.setTitle('Lightsaber color');
alert.addInput({
type: 'radio',
label: 'Blue',
value: 'blue',
checked: true
});
alert.addInput({
type: 'radio',
label: 'Green',
value: 'green'
});
alert.addInput({
type: 'radio',
label: 'Red',
value: 'red'
});
alert.addInput({
type: 'radio',
label: 'Yellow',
value: 'yellow'
});
alert.addInput({
type: 'radio',
label: 'Purple',
value: 'purple'
});
alert.addInput({
type: 'radio',
label: 'White',
value: 'white'
});
alert.addInput({
type: 'radio',
label: 'Black',
value: 'black'
});
alert.addButton('Cancel');
alert.addButton({
text: 'Ok',
handler: data => {
console.log('Radio data:', data);
this.testRadioOpen = false;
this.testRadioResult = data;
}
});
this.nav.present(alert);
}
doCheckbox() {
let alert = Alert.create();
alert.setTitle('Which planets have you visited?');
alert.addInput({
type: 'checkbox',
label: 'Alderaan',
value: 'value1',
checked: true
});
alert.addInput({
type: 'checkbox',
label: 'Bespin',
value: 'value2'
});
alert.addInput({
type: 'checkbox',
label: 'Coruscant',
value: 'value3'
});
alert.addInput({
type: 'checkbox',
label: 'Endor',
value: 'value4'
});
alert.addInput({
type: 'checkbox',
label: 'Hoth',
value: 'value5'
});
alert.addInput({
type: 'checkbox',
label: 'Jakku',
value: 'value6'
});
alert.addInput({
type: 'checkbox',
label: 'Naboo',
value: 'value6'
});
alert.addInput({
type: 'checkbox',
label: 'Takodana',
value: 'value6'
});
alert.addInput({
type: 'checkbox',
label: 'Tatooine',
value: 'value6'
});
alert.addButton('Cancel');
alert.addButton({
text: 'Okay',
handler: data => {
console.log('Checkbox data:', data);
this.testCheckboxOpen = false;
this.testCheckboxResult = data;
}
});
this.nav.present(alert);
}
doCustomAnimation() {
}
}

12
demos/alert/main.html Normal file
View File

@ -0,0 +1,12 @@
<ion-navbar *navbar>
<ion-title>Alert</ion-title>
</ion-navbar>
<ion-content>
<button block (click)="doAlert()">Basic Alert</button>
<button light block (click)="doConfirm()">Confirm Alert</button>
<button secondary block (click)="doPrompt()">Prompt Alert</button>
<button danger block (click)="doRadio()">Radio Alert</button>
<button dark block (click)="doCheckbox()">Checkbox Alert</button>
<button block (click)="doCustomAnimation()">Custom Animation Alert</button>
</ion-content>

6
demos/blur/index.ts
View File

@ -3,8 +3,4 @@ import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class DemoApp {
blur() {
}
}
class ApiDemoApp {}

3
demos/buttons/index.ts → demos/button/index.ts
View File

@ -3,5 +3,4 @@ import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class DemoApp {}
class ApiDemoApp {}

64
demos/button/main.html Normal file
View File

@ -0,0 +1,64 @@
<ion-toolbar>
<ion-title>Button</ion-title>
</ion-toolbar>
<ion-content text-center>
<h4>Colors</h4>
<button>Default</button>
<button secondary>Secondary</button>
<button danger>Danger</button>
<button light>Light</button>
<button dark>Dark</button>
<h4>Shapes</h4>
<button full>Full Button</button>
<button block>Block Button</button>
<button round>Round Button</button>
<button fab style="position: relative;">FAB</button>
<h4>Outlines</h4>
<button secondary full outline>Outline + Full</button>
<button secondary block outline>Outline + Block</button>
<button secondary round outline>Outline + Round</button>
<button secondary fab outline style="position: relative;">FAB</button>
<h4>Icons</h4>
<button dark>
<ion-icon name="star"></ion-icon>
Left Icon
</button>
<button dark>
Right Icon
<ion-icon name="star"></ion-icon>
</button>
<button dark>
<ion-icon name="star"></ion-icon>
</button>
<h4>Sizes</h4>
<button light large>Large</button>
<button light>Default</button>
<button light small>Small</button>
</ion-content>

104
demos/buttons/main.html
View File

@ -1,104 +0,0 @@
<ion-toolbar>
<ion-title>Buttons</ion-title>
</ion-toolbar>
<ion-content padding style="text-align:center">
<h4>Colors</h4>
<p>
<button block>Default</button>
</p>
<p>
<button secondary block>Secondary</button>
</p>
<p>
<button danger block>Danger</button>
</p>
<p>
<button light block>Light</button>
</p>
<p>
<button dark block>Dark</button>
</p>
<h4>Shapes</h4>
<p>
<button full>Full Button</button>
</p>
<p>
<button block>Block Button</button>
</p>
<p>
<button round>Round Button</button>
</p>
<p>
<button fab style="position: relative;">FAB</button>
</p>
<h4>Outlines</h4>
<p>
<button secondary full outline>Outline + Full</button>
</p>
<p>
<button secondary block outline>Outline + Block</button>
</p>
<p>
<button secondary round outline>Outline + Round</button>
</p>
<p>
<button secondary fab outline style="position: relative;">FAB</button>
</p>
<h4>Icons</h4>
<p>
<button dark>
<ion-icon name="star"></ion-icon>
Left Icon
</button>
</p>
<p>
<button dark>
Right Icon
<ion-icon name="star"></ion-icon>
</button>
</p>
<p>
<button dark>
<ion-icon name="star"></ion-icon>
</button>
</p>
<h4>Sizes</h4>
<p>
<button light large>Large</button>
</p>
<p>
<button light>Default</button>
</p>
<p>
<button light small>Small</button>
</p>
</ion-content>

2
demos/checkbox/app.html
View File

@ -1,2 +0,0 @@
<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
<ion-overlay></ion-overlay>

18
demos/checkbox/index.ts
View File

@ -1,20 +1,6 @@
import {App, Page, IonicApp} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@App({
templateUrl: 'app.html'
})
class ApiDemoApp {
constructor() {
this.rootPage = InitialPage;
}
}
@Page({
templateUrl: 'main.html'
})
export class InitialPage {
constructor() {
}
}
class ApiDemoApp {}

4
demos/checkbox/main.html
View File

@ -1,6 +1,6 @@
<ion-navbar *navbar>
<ion-toolbar>
<ion-title>Checkbox</ion-title>
</ion-navbar>
</ion-toolbar>
<ion-content>
<ion-list>

13
demos/config/index.html
View File

@ -20,19 +20,6 @@
</ion-app>
<script src="bundle.js"></script>
<!-- <script src="../../js/ionic.bundle.js"></script>
<script>
System.config({
"paths": {
"*": "*.js",
"ionic/*": "ionic/*",
"angular2/*": "angular2/*",
"rx": "rx"
}
})
System.import("index");
</script> -->
</body>
</html>

2
demos/config/main.html
View File

@ -50,7 +50,7 @@
})</pre>
<div padding>
<button block light (click)="push()">
<button block secondary (click)="push()">
Go to Another Page
</button>
</div>

18
demos/hide-when/index.ts
View File

@ -1,20 +1,6 @@
import {App, Page, IonicApp} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@App({
templateUrl: 'app.html'
})
class ApiDemoApp {
constructor() {
this.rootPage = InitialPage;
}
}
@Page({
templateUrl: 'main.html'
})
export class InitialPage {
constructor() {
}
}
class ApiDemoApp {}

41
demos/hide-when/main.html
View File

@ -1,30 +1,33 @@
<ion-navbar *navbar>
<ion-toolbar>
<ion-title>HideWhen</ion-title>
</ion-navbar>
</ion-toolbar>
<ion-content padding class="hide-when-demo">
<h5>If the platform is Android, it will hide the Apple logo. If the platform is iOS, it will hide the Android logo.</h5>
<ion-content class="hide-when-demo">
<h5 margin>Hide Icon Per Platform</h5>
<p margin>In this example we're using the <code>hideWhen</code> directive to decide whether to hide an icon based on the platform.</p>
<div class="icon-div" hideWhen="ios">
<ion-icon name="logo-android"></ion-icon><br>
<code>&lt;div hideWhen="ios"&gt;</code>
</div>
<div class="icon-div" hideWhen="android">
<ion-icon name="logo-apple"></ion-icon><br>
<code>&lt;div hideWhen="android"&gt;</code>
</div>
<ion-row text-center>
<ion-col>
<ion-icon name="logo-android" hideWhen="ios"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="logo-apple" hideWhen="android"></ion-icon>
</ion-col>
</ion-row>
</ion-content>
<style>
.hide-when-demo .icon-div {
text-align: center;
.hide-when-demo ion-col {
background: #f8f8f8;
border: 1px solid #ddd;
margin: 5px;
}
.hide-when-demo .icon-div ion-icon {
font-size: 200px;
}
.hide-when-demo .icon-div code {
.hide-when-demo code {
background: #f8f8f8;
}
.hide-when-demo ion-icon {
font-size: 200px;
}
</style>

6
demos/icon/index.ts Normal file
View File

@ -0,0 +1,6 @@
import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class ApiDemoApp {}

71
demos/icon/main.html Normal file
View File

@ -0,0 +1,71 @@
<ion-toolbar>
<ion-title>Icon</ion-title>
</ion-toolbar>
<ion-content text-center class="icon-demo">
<ion-row>
<ion-col><ion-icon name='ionic' primary></ion-icon></ion-col>
<ion-col><ion-icon name='logo-angular'></ion-icon></ion-col>
<ion-col><ion-icon name='heart' danger></ion-icon></ion-col>
<ion-col><ion-icon name='ionitron' primary></ion-icon></ion-col>
<ion-col><ion-icon name='happy'></ion-icon></ion-col>
<ion-col><ion-icon name='people'></ion-icon></ion-col>
<ion-col><ion-icon name='person'></ion-icon></ion-col>
<ion-col><ion-icon name='contact'></ion-icon></ion-col>
<ion-col><ion-icon name='apps'></ion-icon></ion-col>
<ion-col><ion-icon name='lock'></ion-icon></ion-col>
<ion-col><ion-icon name='key'></ion-icon></ion-col>
<ion-col><ion-icon name='unlock'></ion-icon></ion-col>
<ion-col><ion-icon name='map' secondary></ion-icon></ion-col>
<ion-col><ion-icon name='navigate'></ion-icon></ion-col>
<ion-col><ion-icon name='pin'></ion-icon></ion-col>
<ion-col><ion-icon name='locate'></ion-icon></ion-col>
<ion-col><ion-icon name='mic'></ion-icon></ion-col>
<ion-col><ion-icon name='musical-notes'></ion-icon></ion-col>
<ion-col><ion-icon name='volume-up'></ion-icon></ion-col>
<ion-col><ion-icon name='microphone'></ion-icon></ion-col>
<ion-col><ion-icon name='cafe'></ion-icon></ion-col>
<ion-col><ion-icon name='calculator'></ion-icon></ion-col>
<ion-col><ion-icon name='bus'></ion-icon></ion-col>
<ion-col><ion-icon name='wine' danger></ion-icon></ion-col>
<ion-col><ion-icon name='camera'></ion-icon></ion-col>
<ion-col><ion-icon name='image' secondary></ion-icon></ion-col>
<ion-col><ion-icon name='star'></ion-icon></ion-col>
<ion-col><ion-icon name='pin'></ion-icon></ion-col>
<ion-col><ion-icon name='arrow-dropup-circle'></ion-icon></ion-col>
<ion-col><ion-icon name='arrow-back'></ion-icon></ion-col>
<ion-col><ion-icon name='arrow-dropdown'></ion-icon></ion-col>
<ion-col><ion-icon name='arrow-forward'></ion-icon></ion-col>
<ion-col><ion-icon name='cloud'></ion-icon></ion-col>
<ion-col><ion-icon name='sunny'></ion-icon></ion-col>
<ion-col><ion-icon name='umbrella'></ion-icon></ion-col>
<ion-col><ion-icon name='rainy' primary></ion-icon></ion-col>
</ion-row>
</ion-content>
<style>
.icon-demo ion-icon {
font-size: 50px;
}
.icon-demo ion-row {
height: 100%;
padding: 0;
flex-wrap: wrap;
}
.icon-demo ion-col {
flex: 0 0 25%;
max-width: 25%;
text-align: center;
padding: 10px 5px;
}
</style>

1
demos/label/app.html
View File

@ -1 +0,0 @@
<ion-nav id="nav" [root]="rootPage" #content></ion-nav>

18
demos/label/index.ts
View File

@ -1,20 +1,6 @@
import {App, Page, IonicApp} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@App({
templateUrl: 'app.html'
})
class ApiDemoApp {
constructor() {
this.rootPage = InitialPage;
}
}
@Page({
templateUrl: 'main.html'
})
export class InitialPage {
constructor() {
}
}
class ApiDemoApp {}

19
demos/label/ionic.svg Normal file
View File

@ -0,0 +1,19 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
<![CDATA[
.st0{fill:#4E8EF7;}
]]>
</style>
<g>
<path class="st0" d="M434.6,121.3c4.5-5.4,7.2-12.4,7.2-20c0-17.3-14-31.3-31.3-31.3c-7.6,0-14.5,2.7-20,7.2
C353,48.8,306.3,32,255.8,32c-123.5,0-224,100.5-224,224c0,123.5,100.5,224,224,224s224-100.5,224-224
C479.8,205.4,463,158.8,434.6,121.3z M255.8,471c-118.6,0-215-96.5-215-215c0-118.6,96.5-215,215-215c48.2,0,92.8,16,128.7,42.8
c-3.4,5-5.3,11-5.3,17.5c0,17.3,14,31.3,31.3,31.3c6.5,0,12.5-2,17.5-5.3c26.9,35.9,42.8,80.5,42.8,128.7
C470.8,374.5,374.3,471,255.8,471z"/>
<ellipse class="st0" cx="255.8" cy="256" rx="96.2" ry="96.1"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

74
demos/label/main.html
View File

@ -1,32 +1,68 @@
<ion-navbar *navbar>
<ion-toolbar>
<ion-title>Label</ion-title>
</ion-navbar>
</ion-toolbar>
<ion-content>
<ion-row>
<ion-item>
<ion-input placeholder="Placeholder Label"></ion-input>
<ion-content class="label-demo">
<ion-list>
<ion-item no-lines>
<ion-avatar item-left>
<img src="ionic.svg">
</ion-avatar>
<ion-label>Ionic</ion-label>
</ion-item>
</ion-row>
<ion-row>
<!-- TODO the styling of the icons can be removed when #5319 is done -->
<ion-item>
<ion-label fixed>Fixed Label</ion-label>
<ion-input type="text" value=""></ion-input>
<ion-label stacked primary>Mobile</ion-label>
<ion-input type="tel" value="+1 (555) 123-1234"></ion-input>
<ion-icon primary item-right ios="ios-chatbubbles-outline" md="md-chatbubbles" class="mobile1"></ion-icon>
<ion-icon primary item-right ios="ios-call-outline" md="md-call" class="mobile2"></ion-icon>
</ion-item>
</ion-row>
<ion-row>
<ion-item>
<ion-label floating>Floating Label</ion-label>
<ion-input type="text" value=""></ion-input>
<ion-label stacked primary>Email</ion-label>
<ion-input type="email" value="hi@ionic.io"></ion-input>
</ion-item>
</ion-row>
<ion-row>
<ion-item>
<ion-label stacked>Stacked Label</ion-label>
<ion-input type="text" value=""></ion-input>
<ion-label stacked primary>Birthday</ion-label>
<ion-input type="text" value="November 21, 2013"></ion-input>
</ion-item>
</ion-row>
<ion-item>
<ion-label stacked primary>Address</ion-label>
<ion-textarea
value="121 S Pinckney St
Madison WI 53703
United States">
</ion-textarea>
</ion-item>
<ion-item>
<ion-label stacked dark>Notes</ion-label>
<ion-textarea></ion-textarea>
</ion-item>
<button ion-item detail-none>
<ion-label primary>Send Message</ion-label>
</button>
<button ion-item detail-none>
<ion-label primary>Share Contact</ion-label>
</button>
<button ion-item detail-none>
<ion-label primary>Add to Favorites</ion-label>
</button>
</ion-list>
</ion-content>
<style>
.label-demo .mobile1, .label-demo .mobile2 {
position: absolute;
right: 5px;
bottom: 5px;
}
.label-demo .mobile1 {
right: 35px;
}
</style>

24
demos/list/app.html
View File

@ -1,24 +0,0 @@
<ion-menu [content]="content" id="leftMenu" side="left">
<ion-toolbar primary>
<ion-title>Menu</ion-title>
</ion-toolbar>
<ion-content>
<ion-list>
<button ion-item *ngFor="#p of pages" (click)="openPage(p)">
{{p.title}}
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav id="nav" [root]="rootPage" #content></ion-nav>

85
demos/list/basic-list.html
View File

@ -1,85 +0,0 @@
<ion-navbar *navbar class="show-navbar">
<button menuToggle="leftMenu">
<ion-icon menu></ion-icon>
</button>
<ion-title>
Basic List
</ion-title>
</ion-navbar>
<ion-content class="outer-content">
<ion-list>
<ion-list-header>
List Header
</ion-list-header>
<ion-item>
<ion-icon name="wifi" item-left></ion-icon>
<ion-label>Wifi</ion-label>
<ion-toggle></ion-toggle>
</ion-item>
<ion-item>
<ion-icon name="heart" item-left></ion-icon>
Affection
<ion-note item-right>
Very Little
</ion-note>
</ion-item>
<ion-item>
<ion-icon name="home" item-left></ion-icon>
Home
<ion-note item-right>
Where the heart is
</ion-note>
</ion-item>
<ion-item>
<ion-icon name="color-wand" item-left></ion-icon>
<ion-label>Magic</ion-label>
<ion-toggle secondary checked="true"></ion-toggle>
</ion-item>
<ion-item>
<ion-icon name="star" item-left></ion-icon>
Star status
<ion-note item-right>
Super
</ion-note>
</ion-item>
<ion-item>
<ion-icon name="pizza" item-left></ion-icon>
Pizza
<ion-note item-right>
Always
</ion-note>
</ion-item>
<ion-item>
<ion-icon name="beer" item-left></ion-icon>
Beer
<ion-note item-right>
Yes Plz
</ion-note>
</ion-item>
<ion-item>
<ion-icon name="wine" item-left></ion-icon>
Wine
<ion-note item-right>
All the time
</ion-note>
</ion-item>
</ion-list>
</ion-content>

71
demos/list/index.ts
View File

@ -1,71 +1,6 @@
import {App, IonicApp, Page, Platform} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@App({
templateUrl: 'app.html'
templateUrl: 'main.html'
})
class ApiDemoApp {
constructor(app: IonicApp, platform: Platform) {
this.app = app;
this.platform = platform;
this.rootPage = PageOne;
this.pages = [
{ title: 'Basic List', component: PageOne },
{ title: 'Inset List', component: PageTwo },
{ title: 'No-lines List', component: PageThree },
{ title: 'List Headers', component: PageFour },
{ title: 'Sliding Items', component: PageFive },
];
}
openPage(page) {
this.app.getComponent('leftMenu').close();
let nav = this.app.getComponent('nav');
nav.setRoot(page.component);
}
}
@Page({
templateUrl: 'basic-list.html',
})
export class PageOne{
constructor() {
}
}
@Page({
templateUrl: 'inset-list.html',
})
export class PageTwo {
constructor() {
}
}
@Page({
templateUrl: 'no-lines-list.html',
})
export class PageThree {
constructor() {
}
}
@Page({
templateUrl: 'list-headers.html',
})
export class PageFour {
constructor() {
}
}
@Page({
templateUrl: 'sliding-items.html',
})
export class PageFive {
constructor() {
}
}
class ApiDemoApp {}

83
demos/list/inset-list.html
View File

@ -1,83 +0,0 @@
<ion-navbar *navbar class="show-navbar">
<button menuToggle="leftMenu">
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Inset List
</ion-title>
</ion-navbar>
<ion-content class="outer-content">
<ion-list inset>
<ion-list-header>
List Header
</ion-list-header>
<ion-toggle>
<ion-icon name="wifi" item-left></ion-icon>
Wifi
</ion-toggle>
<ion-item>
<ion-icon name="heart" item-left></ion-icon>
Affection
<ion-note item-right>
Very Little
</ion-note>
</ion-item>
<ion-item>
<ion-icon name="home" item-left></ion-icon>
Home
<ion-note item-right>
Where the heart is
</ion-note>
</ion-item>
<ion-toggle checked="true">
<ion-icon name="color-wand" item-left></ion-icon>
Magic
</ion-toggle>
<ion-item>
<ion-icon name="star" item-left></ion-icon>
Star status
<ion-note item-right>
Super
</ion-note>
</ion-item>
<ion-item>
<ion-icon name="pizza" item-left></ion-icon>
Pizza
<ion-note item-right>
Always
</ion-note>
</ion-item>
<ion-item>
<ion-icon name="beer" item-left></ion-icon>
Beer
<ion-note item-right>
Yes Plz
</ion-note>
</ion-item>
<ion-item>
<ion-icon name="wine" item-left></ion-icon>
Wine
<ion-note item-right>
All the time
</ion-note>
</ion-item>
</ion-list>
</ion-content>

37
demos/list/list-headers.html
View File

@ -1,37 +0,0 @@
<ion-navbar *navbar class="show-navbar">
<button menuToggle="leftMenu">
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
List Headers
</ion-title>
</ion-navbar>
<ion-content class="outer-content">
<ion-list>
<ion-list-header>Comedy</ion-list-header>
<ion-item>Airplane!</ion-item>
<ion-item>Caddyshack</ion-item>
<ion-item>Coming To America</ion-item>
</ion-list>
<ion-list>
<ion-list-header>Action</ion-list-header>
<ion-item>Terminator II</ion-item>
<ion-item>The Empire Strikes Back</ion-item>
<ion-item>Blade Runner</ion-item>
</ion-list>
<ion-list>
<ion-list-header>Horror</ion-list-header>
<ion-item>The Evil Dead</ion-item>
<ion-item>Poldergeist</ion-item>
<ion-item>Aliens</ion-item>
</ion-list>
</ion-content>

82
demos/list/main.html Normal file
View File

@ -0,0 +1,82 @@
<ion-toolbar>
<ion-title>List</ion-title>
</ion-toolbar>
<ion-content class="outer-content">
<ion-list>
<ion-list-header>
Settings
</ion-list-header>
<ion-item>
<ion-icon name="plane" item-left danger></ion-icon>
<ion-label>Airplane Mode</ion-label>
<ion-toggle secondary></ion-toggle>
</ion-item>
<button ion-item>
<ion-icon name="wifi" item-left primary></ion-icon>
<ion-label>Wi-Fi</ion-label>
<ion-note item-right>The Interwebz</ion-note>
</button>
<button ion-item>
<ion-icon name="bluetooth" item-left primary></ion-icon>
<ion-label>Bluetooth</ion-label>
<ion-note item-right>Off</ion-note>
</button>
<button ion-item>
<ion-icon name="call" item-left secondary></ion-icon>
<ion-label>Cellular</ion-label>
</button>
<button ion-item>
<ion-icon name="link" item-left secondary></ion-icon>
<ion-label>Personal Hotspot</ion-label>
<ion-note item-right>Off</ion-note>
</button>
</ion-list>
<ion-list radio-group>
<ion-list-header>
Silence Phone
</ion-list-header>
<ion-item>
<ion-label dark>Always</ion-label>
<ion-radio value="always" checked></ion-radio>
</ion-item>
<ion-item>
<ion-label dark>Only while phone is locked</ion-label>
<ion-radio value="locked"></ion-radio>
</ion-item>
</ion-list>
<ion-list>
<ion-list-header>
Apps Installed
</ion-list-header>
<ion-item>
<ion-icon name="ionic" item-left primary></ion-icon>
<ion-label>Ionic View</ion-label>
<button outline item-right>Uninstall</button>
</ion-item>
<ion-item>
<ion-icon name="brush" item-left primary></ion-icon>
<ion-label>Ionic Creator</ion-label>
<button outline item-right>Uninstall</button>
</ion-item>
<ion-item>
<ion-icon name="logo-octocat" item-left dark></ion-icon>
<ion-label>Hubstruck</ion-label>
<button outline item-right>Uninstall</button>
</ion-item>
<ion-item>
<ion-icon name="paw" item-left danger></ion-icon>
<ion-label>Barkpark</ion-label>
<button outline item-right>Uninstall</button>
</ion-item>
</ion-list>
</ion-content>

83
demos/list/no-lines-list.html
View File

@ -1,83 +0,0 @@
<ion-navbar *navbar class="show-navbar">
<button menuToggle="leftMenu">
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
No-lines List
</ion-title>
</ion-navbar>
<ion-content class="outer-content">
<ion-list no-lines>
<ion-list-header>
List Header
</ion-list-header>
<ion-toggle>
<ion-icon name="wifi" item-left></ion-icon>
Wifi
</ion-toggle>
<ion-item>
<ion-icon name="heart" item-left></ion-icon>
Affection
<ion-note item-right>
Very Little
</ion-note>
</ion-item>
<ion-item>
<ion-icon name="home" item-left></ion-icon>
Home
<ion-note item-right>
Where the heart is
</ion-note>
</ion-item>
<ion-toggle checked="true">
<ion-icon name="color-wand" item-left></ion-icon>
Magic
</ion-toggle>
<ion-item>
<ion-icon name="star" item-left></ion-icon>
Star status
<ion-note item-right>
Super
</ion-note>
</ion-item>
<ion-item>
<ion-icon name="pizza" item-left></ion-icon>
Pizza
<ion-note item-right>
Always
</ion-note>
</ion-item>
<ion-item>
<ion-icon name="beer" item-left></ion-icon>
Beer
<ion-note item-right>
Yes Plz
</ion-note>
</ion-item>
<ion-item>
<ion-icon name="wine" item-left></ion-icon>
Wine
<ion-note item-right>
All the time
</ion-note>
</ion-item>
</ion-list>
</ion-content>

59
demos/list/sliding-items.html
View File

@ -1,59 +0,0 @@
<ion-navbar *navbar class="show-navbar">
<button menuToggle="leftMenu">
<ion-icon name="menu"></ion-icon>
</button>
<ion-title>
Sliding Items
</ion-title>
</ion-navbar>
<ion-content class="outer-content">
<ion-list>
<ion-item-sliding #item>
<button ion-item text-wrap>
<h3>Max Lynch</h3>
<p>
Hey do you want to go to the game tonight?
</p>
</button>
<ion-item-options>
<button primary>Archive</button>
<button danger>Delete</button>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding #item>
<button ion-item text-wrap>
<h3>Adam Bradley</h3>
<p>
I think I figured out how to get more Mountain Dew
</p>
</button>
<ion-item-options>
<button primary>Archive</button>
<button danger>Delete</button>
</ion-item-options>
</ion-item-sliding>
<ion-item-sliding #item>
<button ion-item text-wrap>
<h3>Ben Sperry</h3>
<p>
I like paper
</p>
</button>
<ion-item-options>
<button primary>Archive</button>
<button danger>Delete</button>
</ion-item-options>
</ion-item-sliding>
</ion-list>
</ion-content>

2
demos/local-storage/app.html
View File

@ -1,2 +0,0 @@
<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
<ion-overlay></ion-overlay>

12
demos/local-storage/index.ts
View File

@ -3,19 +3,9 @@ import {Storage, LocalStorage} from 'ionic/ionic';
@App({
templateUrl: 'app.html'
})
class ApiDemoApp {
constructor() {
this.rootPage = InitialPage;
}
}
@Page({
templateUrl: 'main.html'
})
export class InitialPage {
class ApiDemoApp {
constructor() {
this.local = new Storage(LocalStorage);
this.myItem = {};

5
demos/local-storage/main.html
View File

@ -1,6 +1,7 @@
<ion-navbar *navbar>
<ion-toolbar>
<ion-title>Local Storage</ion-title>
</ion-navbar>
</ion-toolbar>
<ion-content class="local-storage-demo outer-content">

4
demos/menu/index.ts
View File

@ -8,12 +8,10 @@ class Page1 {}
@Page({templateUrl: 'page2.html'})
class Page2 {}
@App({
templateUrl: 'main.html'
})
class E2EApp {
class ApiDemoApp {
constructor(app: IonicApp) {
this.app = app;
this.rootView = Page1;

1
demos/nav-push-pop/app.html
View File

@ -1 +0,0 @@
<ion-nav id="nav" [root]="rootPage" #content></ion-nav>

0
demos/hide-when/app.html → demos/navigation/app.html
View File

0
demos/nav-push-pop/index.ts → demos/navigation/index.ts
View File

0
demos/nav-push-pop/main.html → demos/navigation/main.html
View File

0
demos/nav-push-pop/page-2.html → demos/navigation/page-2.html
View File

1
demos/platform/app.html
View File

@ -1 +0,0 @@
<ion-nav id="nav" [root]="rootPage" #content></ion-nav>

15
demos/platform/index.ts
View File

@ -1,23 +1,12 @@
import {App, Page, IonicApp, Platform} from 'ionic/ionic';
import {App, Platform} from 'ionic/ionic';
@App({
templateUrl: 'app.html'
})
class ApiDemoApp {
constructor() {
this.rootPage = InitialPage;
}
}
@Page({
templateUrl: 'main.html'
})
export class InitialPage {
class ApiDemoApp {
constructor(platform: Platform) {
this.isIos = platform.is('ios');
this.isAndroid = platform.is('android');
this.userAgent = platform.userAgent();
}
}

11
demos/platform/main.html
View File

@ -1,9 +1,9 @@
<ion-navbar *navbar>
<ion-toolbar>
<ion-title>Platform</ion-title>
</ion-navbar>
</ion-toolbar>
<ion-content class="platform-demo">
<p margin class="note">Change Devices to Update the Platform Values</p>
<p margin class="note">Change devices to see the platform values change.</p>
<ion-row>
<ion-col><b>Name</b></ion-col>
@ -37,6 +37,11 @@
</ion-content>
<style>
.platform-demo ion-col {
flex: 0 0 50%;
max-width: 50%;
}
.platform-demo pre {
background: #f8f8f8;
font-size: 13px;

6
demos/radio/index.ts
View File

@ -3,8 +3,4 @@ import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class DemoApp {
blur() {
}
}
class ApiDemoApp {}

10
demos/radio/main.html
View File

@ -1,10 +1,6 @@
<ion-navbar *navbar>
<ion-title>
Radio
</ion-title>
</ion-navbar>
<ion-toolbar>
<ion-title>Radio</ion-title>
</ion-toolbar>
<ion-content>
<ion-list radio-group>

2
demos/refresher/app.html
View File

@ -1,2 +0,0 @@
<ion-nav id="nav" [root]="rootPage" #content></ion-nav>
<ion-overlay></ion-overlay>

16
demos/refresher/index.ts
View File

@ -1,22 +1,9 @@
import {App, Page, IonicApp} from 'ionic/ionic';
@App({
templateUrl: 'app.html'
})
class ApiDemoApp {
constructor() {
this.rootPage = InitialPage;
}
}
@Page({
templateUrl: 'main.html'
})
export class InitialPage {
constructor() {
}
class ApiDemoApp {
doRefresh(refresher) {
console.log('DOREFRESH', refresher)
@ -33,4 +20,3 @@ export class InitialPage {
console.log('DOPULLING', amt);
}
}

5
demos/refresher/main.html
View File

@ -1,6 +1,7 @@
<ion-navbar *navbar>
<ion-toolbar>
<ion-title>Refresher</ion-title>
</ion-navbar>
</ion-toolbar>
<ion-content>
<ion-refresher (starting)="doStarting()" (refresh)="doRefresh($event, refresher)" (pulling)="doPulling($event, amt)">

6
demos/scroll/index.ts
View File

@ -3,8 +3,4 @@ import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class DemoApp {
blur() {
}
}
class ApiDemoApp {}

21
demos/scroll/main.html
View File

@ -1,15 +1,18 @@
<ion-navbar *navbar>
<ion-toolbar>
<ion-title>Scroll</ion-title>
</ion-toolbar>
<ion-title>
Scroll
</ion-title>
</ion-navbar>
<ion-content>
<ion-scroll scrollX="true" scrollY="true" style="width: 100%; height: 100%">
<div style="width: 3460px; height: 3008px; background: url('https://upload.wikimedia.org/wikipedia/commons/3/32/Paris_7th_arrondissement_map_with_listings.png') repeat"></div>
<div class="map-div"></div>
</ion-scroll>
</ion-content>
<style>
.map-div {
width: 2600px;
height: 1400px;
background: url('./map.jpeg') no-repeat;
}
</style>

BIN
demos/scroll/map.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 642 KiB

3
demos/segment/index.ts
View File

@ -3,8 +3,7 @@ import {App, Platform} from 'ionic/ionic';
@App({
templateUrl: 'main.html'
})
class DemoApp {
class ApiDemoApp {
constructor(platform: Platform) {
this.platform = platform;
this.pet = "puppies";

10
demos/segment/main.html
View File

@ -1,10 +1,7 @@
<ion-navbar *navbar hideBackButton class="android-attr">
<ion-toolbar>
<ion-title>Segment</ion-title>
</ion-toolbar>
<ion-title>
Segment
</ion-title>
</ion-navbar>
<ion-toolbar [attr.primary]="isAndroid ? '' : null">
<ion-segment [(ngModel)]="pet" [attr.light]="isAndroid ? '' : null">
@ -112,4 +109,3 @@
</ion-content>

1
demos/show-when/app.html
View File

@ -1 +0,0 @@
<ion-nav id="nav" [root]="rootPage" #content></ion-nav>

18
demos/show-when/index.ts
View File

@ -1,20 +1,6 @@
import {App, Page, IonicApp} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@App({
templateUrl: 'app.html'
})
class ApiDemoApp {
constructor() {
this.rootPage = InitialPage;
}
}
@Page({
templateUrl: 'main.html'
})
export class InitialPage {
constructor() {
}
}
class ApiDemoApp {}

41
demos/show-when/main.html
View File

@ -1,30 +1,33 @@
<ion-navbar *navbar>
<ion-toolbar>
<ion-title>ShowWhen</ion-title>
</ion-navbar>
</ion-toolbar>
<ion-content padding class="show-when-demo">
<h5>If the platform is Android, it will show the Android logo. If the platform is iOS, it will show the Apple logo.</h5>
<ion-content class="show-when-demo">
<h5 margin>Show Icon Per Platform</h5>
<p margin>In this example we're using the <code>showWhen</code> directive to decide whether to show an icon based on the platform.</p>
<div class="icon-div" showWhen="android">
<ion-icon name="logo-android"></ion-icon><br>
<code>&lt;div showWhen="android"&gt;</code>
</div>
<div class="icon-div" showWhen="ios">
<ion-icon name="logo-apple"></ion-icon><br>
<code>&lt;div showWhen="ios"&gt;</code>
</div>
<ion-row text-center>
<ion-col>
<ion-icon name="logo-android" showWhen="android"></ion-icon>
</ion-col>
<ion-col>
<ion-icon name="logo-apple" showWhen="ios"></ion-icon>
</ion-col>
</ion-row>
</ion-content>
<style>
.show-when-demo .icon-div {
text-align: center;
.show-when-demo ion-col {
background: #f8f8f8;
border: 1px solid #ddd;
margin: 5px;
}
.show-when-demo .icon-div ion-icon {
font-size: 200px;
}
.show-when-demo .icon-div code {
.show-when-demo code {
background: #f8f8f8;
}
.show-when-demo ion-icon {
font-size: 200px;
}
</style>

44
demos/slides/index.ts
View File

@ -1,46 +1,6 @@
import {App, IonicApp} from 'ionic/ionic';
import {Http} from 'angular2/http';
import {App} from 'ionic/ionic';
@App({
templateUrl: 'main.html',
})
class MyApp {
constructor(private app: IonicApp, http: Http) {
this.http = http;
this.extraOptions = {
loop: true
};
this.images = [];
let tags = "amsterdam";
let FLICKR_API_KEY = '504fd7414f6275eb5b657ddbfba80a2c';
let baseUrl = 'https://api.flickr.com/services/rest/';
this.http.get(baseUrl + '?method=flickr.groups.pools.getPhotos&group_id=1463451@N25&safe_search=1&api_key=' + FLICKR_API_KEY + '&format=json&nojsoncallback=1&tags=' + tags).subscribe(
data => {
let val = data.json();
this.images = val.photos.photo.slice(0, 20);
setTimeout(() => {
this.slider.update();
});
},
err => console.log(err),
() => console.log('complete')
);
}
ngOnInit() {
setTimeout(() => {
this.slider = this.app.getComponent('slider');
console.log('Got slider', this.slider);
});
}
getImageUrl(item) {
return "http://farm"+ item.farm +".static.flickr.com/"+ item.server +"/"+ item.id +"_"+ item.secret + "_z.jpg";
}
doRefresh() {
console.log('DOREFRESH')
}
}
class ApiDemoApp {}

14
demos/slides/main.html
View File

@ -1,13 +1,5 @@
<ion-slides [options]="extraOptions" id="slider" style="background-color: black" zoom>
<ion-slide *ngFor="#image of images">
<img data-src="{{getImageUrl(image)}}" slide-lazy>
<ion-slides loop="true" style="background-color: black">
<ion-slide *ngFor="#image of [1,2,3,4,5]">
<img data-src="./slide{{image}}.jpeg">
</ion-slide>
</ion-slides>
<style>
ion-scroll {
width: 100%;
height: 100%;
}
</style>

BIN
demos/slides/slide1.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 117 KiB

BIN
demos/slides/slide2.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 282 KiB

BIN
demos/slides/slide3.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 427 KiB

BIN
demos/slides/slide4.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 273 KiB

BIN
demos/slides/slide5.jpeg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 154 KiB

1
demos/toggle/app.html
View File

@ -1 +0,0 @@
<ion-nav id="nav" [root]="rootPage" #content></ion-nav>

18
demos/toggle/index.ts
View File

@ -1,20 +1,6 @@
import {App, Page, IonicApp} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@App({
templateUrl: 'app.html'
})
class ApiDemoApp {
constructor() {
this.rootPage = InitialPage;
}
}
@Page({
templateUrl: 'main.html'
})
export class InitialPage {
constructor() {
}
}
class ApiDemoApp {}

4
demos/toggle/main.html
View File

@ -1,6 +1,6 @@
<ion-navbar *navbar>
<ion-toolbar>
<ion-title>Toggle</ion-title>
</ion-navbar>
</ion-toolbar>
<ion-content>
<ion-list>

1
demos/toolbar/app.html
View File

@ -1 +0,0 @@
<ion-nav id="nav" [root]="rootPage" #content></ion-nav>

18
demos/toolbar/index.ts
View File

@ -1,20 +1,6 @@
import {App, Page, IonicApp} from 'ionic/ionic';
import {App} from 'ionic/ionic';
@App({
templateUrl: 'app.html'
})
class ApiDemoApp {
constructor() {
this.rootPage = InitialPage;
}
}
@Page({
templateUrl: 'main.html'
})
export class InitialPage {
constructor() {
}
}
class ApiDemoApp {}

4
demos/toolbar/main.html
View File

@ -1,6 +1,6 @@
<ion-navbar *navbar>
<ion-toolbar>
<ion-title>Toolbar</ion-title>
</ion-navbar>
</ion-toolbar>
<ion-content>

8
gulpfile.js
View File

@ -15,7 +15,7 @@ var connect = require('gulp-connect');
var docsConfig = require('./scripts/config.json');
var flagConfig = {
string: ['port', 'version', 'ngVersion', 'animations'],
string: ['port', 'version', 'ngVersion', 'animations', 'strip-debug'],
boolean: ['dry-run'],
alias: {'p': 'port', 'v': 'version', 'a': 'ngVersion'},
default: { port: 8000 }
@ -154,9 +154,10 @@ function tsCompile(options, cacheName){
gulp.task('transpile.no-typecheck', function(){
var gulpif = require('gulp-if');
var stripDebug = require('gulp-strip-debug');
var shouldStripDebug = (IS_RELEASE && flags['strip-debug'] !== 'false');
return tsCompile(tscOptionsNoTypeCheck, 'no-typecheck')
.pipe(gulpif(IS_RELEASE, stripDebug()))
.pipe(gulpif(shouldStripDebug, stripDebug()))
.pipe(gulp.dest('dist'));
});
@ -165,12 +166,13 @@ gulp.task('typecheck', ['transpile.typecheck']);
gulp.task('transpile.typecheck', function(){
var merge = require('merge2');
var stripDebug = require('gulp-strip-debug');
var shouldStripDebug = (IS_RELEASE && flags['strip-debug'] !== 'false');
var result = tsCompile(tscOptions, 'typecheck');
var js = result.js;
var dts = result.dts;
if (IS_RELEASE) {
if (shouldStripDebug) {
js = js.pipe(stripDebug());
}

1
ionic/components/alert/alert.ts
View File

@ -114,6 +114,7 @@ import {ViewController} from '../nav/view-controller';
* }
* ```
*
* @demo /docs/v2/demos/alert/
*/
export class Alert extends ViewController {

2
ionic/components/button/button.ts
View File

@ -24,7 +24,7 @@ import {Toolbar} from '../toolbar/toolbar';
* @property [color] - Dynamically set which color attribute this button should use.
* @description
* Buttons are simple components in Ionic, can consist of text, an icon, or both, and can be enhanced with a wide range of attributes.
* @demo /docs/v2/demos/buttons/
* @demo /docs/v2/demos/button/
* @see {@link /docs/v2/components#buttons Button Component Docs}
*/

11
ionic/components/card/card.scss
View File

@ -7,7 +7,6 @@
ion-card {
display: block;
overflow: hidden;
transform: translateZ(0);
}
ion-card img {
@ -25,3 +24,13 @@ ion-card-header {
ion-card-content {
display: block;
}
ion-card > :first-child {
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
ion-card > :last-child {
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
}

1
ionic/components/icon/icon.ts
View File

@ -38,6 +38,7 @@ import {Config} from '../../config/config';
* inactive icon on iOS will use an outlined version of the icon same icon.
* Material Design icons do not change appearance depending if they're active
* or not. The `isActive` property is largely used by the tabbar.
* @demo /docs/v2/demos/icon/
* @see {@link /docs/v2/components#icons Icon Component Docs}
*
*/

2
ionic/components/input/input-base.ts
View File

@ -353,7 +353,7 @@ export class InputBase {
* @private
*/
clearTextInput() {
console.log("Should clear input");
console.debug("Should clear input");
}
/**

6
ionic/components/list/list.ts
View File

@ -66,9 +66,9 @@ export class List extends Ion {
*/
ngOnInit() {
if (isDefined(this.virtual)) {
console.log('Content', this.content);
console.log('Virtual?', this.virtual);
console.log('Items?', this.items.length, 'of \'em');
console.debug('Content', this.content);
console.debug('Virtual?', this.virtual);
console.debug('Items?', this.items.length, 'of \'em');
this._initVirtualScrolling();
}
}

10
ionic/components/list/virtual.ts
View File

@ -44,7 +44,7 @@ export class ListVirtualScroll {
this.virtualHeight = this.list.items.length * this.itemHeight;
this.itemsPerScreen = this.viewportHeight / this.itemHeight;
console.log('VIRTUAL: resize(viewportHeight:', this.viewportHeight,
console.debug('VIRTUAL: resize(viewportHeight:', this.viewportHeight,
'viewportScrollHeight:', this.viewportScrollHeight, 'virtualHeight:', this.virtualHeight,
', itemsPerScreen:', this.itemsPerScreen, ')');
}
@ -78,7 +78,7 @@ export class ListVirtualScroll {
// virtual items we draw
for (let i = topIndex, realIndex = 0; i < bottomIndex && i < items.length; i++, realIndex++) {
item = items[i];
console.log('Drawing item', i, item.title);
console.debug('Drawing item', i, item.title);
shownItemRef = this.shownItems[i];
@ -100,12 +100,12 @@ export class ListVirtualScroll {
while (this.leavingItems.length) {
let itemRef = this.leavingItems.pop();
console.log('Removing item', itemRef.item, itemRef.realIndex);
console.debug('Removing item', itemRef.item, itemRef.realIndex);
this.viewContainer.remove(itemRef.realIndex);
}
console.log('VIRTUAL SCROLL: scroll(scrollTop:', st, 'topIndex:', topIndex, 'bottomIndex:', bottomIndex, ')');
console.log('Container has', this.list.getNativeElement().children.length, 'children');
console.debug('VIRTUAL SCROLL: scroll(scrollTop:', st, 'topIndex:', topIndex, 'bottomIndex:', bottomIndex, ')');
console.debug('Container has', this.list.getNativeElement().children.length, 'children');
}
cellAtIndex(index) {

33
ionic/components/menu/menu-gestures.ts
View File

@ -3,7 +3,6 @@ import {SlideEdgeGesture} from '../../gestures/slide-edge-gesture';
import {assign} from '../../util/util';
export class MenuContentGesture extends SlideEdgeGesture {
constructor(public menu: Menu, targetEl: Element, options = {}) {
@ -19,8 +18,36 @@ export class MenuContentGesture extends SlideEdgeGesture {
}
canStart(ev) {
let validAngle = ((-35 <= ev.angle && ev.angle <= 35) || (180 >= ev.angle && ev.angle >= 145) || (-180 <= ev.angle && ev.angle <= -145));
return this.menu.isOpen && this.menu.isEnabled && validAngle ? true : super.canStart(ev);
let menu = this.menu;
console.debug('menu canStart, id', menu.id, 'angle', ev.angle, 'distance', ev.distance);
if (!menu.isEnabled || !menu.isSwipeEnabled) {
console.debug('menu canStart, isEnabled', menu.isEnabled, 'isSwipeEnabled', menu.isSwipeEnabled, 'id', menu.id);
return false;
}
if (ev.distance > 50) {
// the distance is longer than you'd expect a side menu swipe to be
console.debug('menu canStart, distance too far', ev.distance, 'id', menu.id);
return false;
}
if (menu.side === 'left') {
// left side menu
if (ev.angle > -40 && ev.angle < 40) {
return super.canStart(ev);
}
} else if (menu.side === 'right') {
// right side menu
if ((ev.angle > 140 && ev.angle <= 180) || (ev.angle > -140 && ev.angle <= -180)) {
return super.canStart(ev);
}
}
// didn't pass the test, don't open this menu
return false;
}
// Set CSS, then wait one frame for it to apply before sliding starts

2
ionic/components/menu/menu.ts
View File

@ -282,7 +282,7 @@ export class Menu extends Ion {
setOpen(shouldOpen) {
// _isPrevented is used to prevent unwanted opening/closing after swiping open/close
// or swiping open the menu while pressing down on the menuToggle button
if (shouldOpen === this.isOpen || this._isPrevented()) {
if ((shouldOpen && this.isOpen) || this._isPrevented()) {
return Promise.resolve();
}

4
ionic/components/menu/test/basic/index.ts
View File

@ -64,8 +64,8 @@ class E2EApp {
console.log('onMenuOpening', ev);
}
isHidden() {
isChangeDetecting() {
console.log('Change detection', ++this.changeDetectionCount);
return false;
return true;
}
}

99
ionic/components/menu/test/basic/main.html
View File

@ -1,4 +1,4 @@
<ion-menu [content]="content" id="leftMenu" side="left" (opening)="onMenuOpening($event)">
<ion-menu [content]="content" id="leftMenu" side="left">
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
@ -12,7 +12,51 @@
{{p.title}}
</button>
<button ion-item menuClose="leftMenu" detail-none [hidden]="isHidden()">
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
@ -40,9 +84,60 @@
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>
<div [hidden]="isChangeDetecting()"></div>

2
ionic/components/menu/test/basic/page1.html
View File

@ -51,4 +51,6 @@
<button (click)="presentAlert()">Open alert</button>
</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><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
</ion-content>

4
ionic/components/nav/nav-push.ts
View File

@ -38,7 +38,7 @@ import {NavRegistry} from './nav-registry';
* ```html
* <button [navPush]="[pushPage, params]"></button>
* ```
* @demo /docs/v2/demos/nav-push-pop/
* @demo /docs/v2/demos/navigation/
* @see {@link /docs/v2/components#navigation Navigation Component Docs}
* @see {@link ../NavPop NavPop API Docs}
*/
@ -103,7 +103,7 @@ export class NavPush {
* This will go back one page in the navigation stack
*
* Similar to {@link /docs/v2/api/components/nav/NavPush/ `NavPush` }
* @demo /docs/v2/demos/nav-push-pop/
* @demo /docs/v2/demos/navigation/
* @see {@link /docs/v2/components#navigation Navigation Component Docs}
* @see {@link ../NavPush NavPush API Docs}
*/

1
ionic/components/nav/nav.ts
View File

@ -98,6 +98,7 @@ import {ViewController} from './view-controller';
* </pre>
* </div>
*
* @demo /docs/v2/demos/navigation/
* @see {@link /docs/v2/components#navigation Navigation Component Docs}
*/
@Component({

136
ionic/components/scroll/pull-to-refresh.ts
View File

@ -31,20 +31,20 @@ import {raf, ready, CSS} from '../../util/dom';
* export class MyClass {
* constructor(){}
* doRefresh(refresher) {
* console.log('Refreshing!', refresher);
* console.debug('Refreshing!', refresher);
*
* setTimeout(() => {
* console.log('Pull to refresh complete!', refresher);
* console.debug('Pull to refresh complete!', refresher);
* refresher.complete();
* })
* }
*
* doStarting() {
* console.log('Pull started!');
* console.debug('Pull started!');
* }
*
* doPulling(amt) {
* console.log('You have pulled', amt);
* console.debug('You have pulled', amt);
* }
* }
* ```
@ -81,54 +81,154 @@ import {raf, ready, CSS} from '../../util/dom';
directives: [NgIf, NgClass, Icon]
})
export class Refresher {
private ele: HTMLElement;
private _ele: HTMLElement;
private _touchMoveListener;
private _touchEndListener;
private _handleScrollListener;
/**
* @private
*/
isActive: boolean;
/**
* @private
*/
isDragging: boolean = false;
/**
* @private
*/
isOverscrolling: boolean = false;
/**
* @private
*/
dragOffset: number = 0;
/**
* @private
*/
lastOverscroll: number = 0;
/**
* @private
*/
ptrThreshold: number = 0;
/**
* @private
*/
activated: boolean = false;
/**
* @private
*/
scrollTime: number = 500;
/**
* @private
*/
canOverscroll: boolean = true;
/**
* @private
*/
startY;
/**
* @private
*/
deltaY;
/**
* @private
*/
scrollHost;
/**
* @private
*/
scrollChild;
/**
* @private
*/
showIcon: boolean;
/**
* @private
*/
showSpinner: boolean;
/**
* @private
*/
isRefreshing: boolean;
/**
* @private
*/
isRefreshingTail: boolean;
/**
* @private
*/
@Input() pullingIcon: string;
/**
* @private
*/
@Input() pullingText: string;
/**
* @private
*/
@Input() refreshingIcon: string;
/**
* @private
*/
@Input() refreshingText: string;
/**
* @private
*/
@Input() spinner: string;
/**
* @private
*/
@Output() pulling: EventEmitter<any> = new EventEmitter();
/**
* @private
*/
@Output() refresh: EventEmitter<any> = new EventEmitter();
/**
* @private
*/
@Output() starting: EventEmitter<any> = new EventEmitter();
constructor(
@Host() private content: Content,
element: ElementRef
@Host() private _content: Content,
_element: ElementRef
) {
this.ele = element.nativeElement;
this.ele.classList.add('content');
this._ele = _element.nativeElement;
this._ele.classList.add('content');
}
/**
* @private
*/
ngOnInit() {
let sp = this.content.getNativeElement();
let sc = this.content.scrollElement;
let sp = this._content.getNativeElement();
let sc = this._content.scrollElement;
this.startY = null;
this.deltaY = null;
@ -156,7 +256,7 @@ export class Refresher {
* @private
*/
ngOnDestroy() {
let sc = this.content.scrollElement;
let sc = this._content.scrollElement;
sc.removeEventListener('touchmove', this._touchMoveListener);
sc.removeEventListener('touchend', this._touchEndListener);
sc.removeEventListener('scroll', this._handleScrollListener);
@ -245,7 +345,7 @@ export class Refresher {
*/
show() {
// showCallback
this.ele.classList.remove('invisible');
this._ele.classList.remove('invisible');
}
/**
@ -253,7 +353,7 @@ export class Refresher {
*/
hide() {
// showCallback
this.ele.classList.add('invisible');
this._ele.classList.add('invisible');
}
/**
@ -261,7 +361,7 @@ export class Refresher {
*/
tail() {
// tailCallback
this.ele.classList.add('refreshing-tail');
this._ele.classList.add('refreshing-tail');
}
/**
@ -341,7 +441,7 @@ export class Refresher {
* @param {Event} e TODO
*/
_handleTouchMove(e) {
//console.log('TOUCHMOVE', e);
//console.debug('TOUCHMOVE', e);
// if multitouch or regular scroll event, get out immediately
if (!this.canOverscroll || e.touches.length > 1) {
@ -413,7 +513,7 @@ export class Refresher {
* @param {Event} e TODO
*/
_handleTouchEnd(e) {
console.log('TOUCHEND', e);
console.debug('TOUCHEND', e);
// if this wasn't an overscroll, get out immediately
if (!this.canOverscroll && !this.isDragging) {
return;
@ -448,6 +548,6 @@ export class Refresher {
* @param {Event} e TODO
*/
_handleScroll(e) {
console.log('SCROLL', e.target.scrollTop);
console.debug('SCROLL', e.target.scrollTop);
}
}

9
ionic/components/scroll/scroll.ts
View File

@ -45,8 +45,17 @@ import * as util from '../../util';
'</scroll-content>'
})
export class Scroll extends Ion {
/**
* @private
*/
private maxScale: number = 3;
/**
* @private
*/
private zoomDuration: number = 250;
/**
* @private
*/
private scrollElement: HTMLElement;
constructor(elementRef: ElementRef) {

30
ionic/components/searchbar/searchbar.ts
View File

@ -72,6 +72,9 @@ export class SearchbarInput {
directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, SearchbarInput]
})
export class Searchbar extends Ion {
/**
* @private
*/
@ViewChild(SearchbarInput) searchbarInput;
/**
@ -112,13 +115,40 @@ export class Searchbar extends Ion {
*/
@Output() clear: EventEmitter<Searchbar> = new EventEmitter();
/**
* @private
*/
value: string = '';
/**
* @private
*/
blurInput: boolean = true;
/**
* @private
*/
inputElement: any;
/**
* @private
*/
searchIconElement: any;
/**
* @private
*/
mode: string;
/**
* @private
*/
@HostBinding('class.searchbar-focused') isFocused;
/**
* @private
*/
@HostBinding('class.searchbar-left-aligned') shouldLeftAlign;
constructor(

23
ionic/components/segment/segment.ts
View File

@ -8,7 +8,6 @@ import {isDefined} from '../../util/util';
* @name SegmentButton
* @description
* The child buttons of the `ion-segment` component. Each `ion-segment-button` must have a value.
* @property {string} [value] - the value of the segment-button. Required.
* @usage
* ```html
* <ion-segment [(ngModel)]="relationship" primary>
@ -39,7 +38,9 @@ import {isDefined} from '../../util/util';
* </form>
* ```
*
* @property {string} [value] - the value of the segment-button. Required.
* @property {Any} [click] - expression to evaluate when a segment button has been clicked
* @property {Any} (select) - expression to evaluate when a segment selection has been changed
*
* @demo /docs/v2/demos/segment/
* @see {@link /docs/v2/components#segment Segment Component Docs}
@ -54,7 +55,15 @@ import {isDefined} from '../../util/util';
}
})
export class SegmentButton {
/**
* @private
*/
@Input() value: string;
/**
* @private
*/
@Output() select: EventEmitter<SegmentButton> = new EventEmitter();
constructor(private _renderer: Renderer, private _elementRef: ElementRef) {}
@ -137,10 +146,22 @@ export class SegmentButton {
selector: 'ion-segment'
})
export class Segment {
/**
* @private
*/
value: string;
/**
* @private
*/
@Output() change: EventEmitter<SegmentButton> = new EventEmitter();
/**
* @private
*/
@ContentChildren(SegmentButton) _buttons: QueryList<SegmentButton>;
constructor(@Optional() ngControl: NgControl) {

52
ionic/components/select/select.ts
View File

@ -92,7 +92,13 @@ import {Option} from '../option/option';
* subTitle: 'Select your toppings'
* };
* ```
*
* @property [cancelText] - The text of the cancel button. Defatuls to 'cancel'
* @property [okText] - The text of the ok button. Defatuls to 'OK'
* @property [alertOptions] - Any addition options that an alert can take. Title, Subtitle, etc.
* @property [multiple] - Whether or not the select component can accept multipl selections
* @property [disabled] - Whether or not the select component is disabled or not
* @property (change) - Any expression you want to evaluate when the selection has changed
*/
@Component({
selector: 'ion-select',
@ -125,11 +131,29 @@ export class Select {
*/
id: string;
/**
* @private
*/
@Input() cancelText: string = 'Cancel';
/**
* @private
*/
@Input() okText: string = 'OK';
/**
* @private
*/
@Input() alertOptions: any = {};
/**
* @private
*/
@Input() checked: any = false;
/**
* @private
*/
@Output() change: EventEmitter<any> = new EventEmitter();
constructor(
@ -215,6 +239,10 @@ export class Select {
this._nav.present(alert, alertOptions);
}
/**
* @private
*/
@Input()
get multiple() {
return this._multi;
@ -224,6 +252,10 @@ export class Select {
this._multi = isTrueProperty(val);
}
/**
* @private
*/
@Input()
get value(): any {
return (this._multi ? this._values : this._values.join());
@ -235,10 +267,17 @@ export class Select {
this.updateOptions();
}
/**
* @private
*/
get text() {
return (this._multi ? this._texts : this._texts.join());
}
/**
* @private
*/
@ContentChildren(Option)
private set options(val: QueryList<Option>) {
this._options = val;
@ -252,6 +291,9 @@ export class Select {
this.updateOptions();
}
/**
* @private
*/
private updateOptions() {
this._texts = [];
@ -268,6 +310,10 @@ export class Select {
this._text = this._texts.join(', ');
}
/**
* @private
*/
ngAfterContentInit() {
// using a setTimeout here to prevent
// "has changed after it was checked" error
@ -277,6 +323,10 @@ export class Select {
});
}
/**
* @private
*/
@Input()
get disabled() {
return this._disabled;

166
ionic/components/slides/slides.ts
View File

@ -18,17 +18,6 @@ import {Scroll} from '../scroll/scroll';
* @description
* Slides is a slide box implementation based on Swiper.js
*
* Swiper.js:
* The most modern mobile touch slider and framework with hardware accelerated transitions
*
* http://www.idangero.us/swiper/
*
* Copyright 2015, Vladimir Kharlampidi
* The iDangero.us
* http://www.idangero.us/
*
* Licensed under MIT
*
* @usage
* ```ts
* @Page({
@ -61,12 +50,27 @@ import {Scroll} from '../scroll/scroll';
*```
* @property {Boolean} [autoplay] - whether or not the slides should automatically change
* @property {Boolean} [loop] - whether the slides should loop from the last slide back to the first
* @property {Boolean} [bounce] - whether the slides should bounce
* @property {Number} [index] - The slide index to start on
* @property [pager] - add this property to enable the slide pager
* @property {Any} [change] - expression to evaluate when a slide has been changed
* @property {Boolean} [bounce] - whether the slides should bounce
* @property {Boolean} [pager] - Whether the slide should show the page or not
* @property {Any} [options] - Any additional slider options you want to pass
* @property {Number} [zoom] - Whether or not the slider can zoom in or out
* @property {Number} [zoomDuration] - how long it should take to zoom a slide
* @property {Number} [zoomMax] - the max scale an slide can be zoomed
* @property {Any} (change) - expression to evaluate when a slide has been changed
* @demo /docs/v2/demos/slides/
* @see {@link /docs/v2/components#slides Slides Component Docs}
*
* Swiper.js:
* The most modern mobile touch slider and framework with hardware accelerated transitions
*
* http://www.idangero.us/swiper/
*
* Copyright 2015, Vladimir Kharlampidi
* The iDangero.us
* http://www.idangero.us/
*
* Licensed under MIT
*/
@Component({
selector: 'ion-slides',
@ -81,18 +85,69 @@ import {Scroll} from '../scroll/scroll';
})
export class Slides extends Ion {
/**
* @private
*/
public rapidUpdate: Function;
/**
* @private
*/
private showPager: boolean;
/**
* @private
*/
private slider: Swiper;
/**
* @private
*/
private maxScale: number;
/**
* @private
*/
private zoomElement: HTMLElement;
/**
* @private
*/
private zoomGesture: Gesture;
/**
* @private
*/
private scale: number;
/**
* @private
*/
private zoomLastPosX: number;
/**
* @private
*/
private zoomLastPosY: number;
/**
* @private
*/
private viewportWidth: number;
/**
* @private
*/
private viewportHeight: number;
/**
* @private
*/
private enableZoom: boolean;
/**
* @private
*/
private touch: {
x: number,
y: number,
@ -108,16 +163,55 @@ export class Slides extends Ion {
zoomableHeight: number
}
/**
* @private
*/
@Input() autoplay: any;
/**
* @private
*/
@Input() loop: any;
/**
* @private
*/
@Input() index: any;
/**
* @private
*/
@Input() bounce: any;
/**
* @private
*/
@Input() pager: any;
/**
* @private
*/
@Input() options: any;
/**
* @private
*/
@Input() zoom: any;
/**
* @private
*/
@Input() zoomDuration: any;
/**
* @private
*/
@Input() zoomMax: any;
/**
* @private
*/
@Output() change: EventEmitter<any> = new EventEmitter();
/**
@ -284,12 +378,12 @@ export class Slides extends Ion {
this.zoomGesture.on('pinchstart', (e) => {
last_scale = this.scale;
console.log('Last scale', e.scale);
console.debug('Last scale', e.scale);
});
this.zoomGesture.on('pinch', (e) => {
this.scale = Math.max(1, Math.min(last_scale * e.scale, 10));
console.log('Scaling', this.scale);
console.debug('Scaling', this.scale);
this.zoomElement.style[CSS.transform] = 'scale(' + this.scale + ')'
zoomRect = this.zoomElement.getBoundingClientRect();
@ -330,10 +424,10 @@ export class Slides extends Ion {
* @private
*/
toggleZoom(swiper, e) {
console.log('Try toggle zoom');
console.debug('Try toggle zoom');
if (!this.enableZoom) { return; }
console.log('Toggling zoom', e);
console.debug('Toggling zoom', e);
/*
let x = e.pointers[0].clientX;
@ -357,7 +451,7 @@ export class Slides extends Ion {
ty = y-my;
}
console.log(y);
console.debug(y);
*/
let zi = new Animation(this.touch.target.children[0])
@ -418,7 +512,7 @@ export class Slides extends Ion {
* @private
*/
onTouchStart(e) {
console.log('Touch start', e);
console.debug('Touch start', e);
//TODO: Support mice as well
@ -438,7 +532,7 @@ export class Slides extends Ion {
zoomableWidth: target.offsetWidth,
zoomableHeight: target.offsetHeight
}
console.log('Target', this.touch.target);
console.debug('Target', this.touch.target);
//TODO: android prevent default
@ -461,25 +555,23 @@ export class Slides extends Ion {
let y1 = Math.min((this.viewportHeight / 2) - zoomableScaledHeight/2, 0)
let y2 = -y1;
console.log('BOUNDS', x1, x2, y1, y2);
console.debug('BOUNDS', x1, x2, y1, y2);
if (this.scale <= 1) {
return;
}
console.log('PAN', e);
console.debug('PAN', e);
// Move image
this.touch.x = this.touch.deltaX + this.touch.lastX;
this.touch.y = this.touch.deltaY + this.touch.lastY;
console.log(this.touch.x, this.touch.y);
if (this.touch.x < x1) {
console.log('OUT ON LEFT');
console.debug('OUT ON LEFT');
}
if (this.touch.x > x2 ){
console.log('OUT ON RIGHT');
console.debug('OUT ON RIGHT');
}
if (this.touch.x > this.viewportWidth) {
@ -487,7 +579,7 @@ export class Slides extends Ion {
} else if (-this.touch.x > this.viewportWidth) {
// Too far on the right side, let the event bubble up (to enable slider on edges, for example)
} else {
console.log('TRANSFORM', this.touch.x, this.touch.y, this.touch.target);
console.debug('TRANSFORM', this.touch.x, this.touch.y, this.touch.target);
//this.touch.target.style[CSS.transform] = 'translateX(' + this.touch.x + 'px) translateY(' + this.touch.y + 'px)';
this.touch.target.style[CSS.transform] = 'translateX(' + this.touch.x + 'px) translateY(' + this.touch.y + 'px)';
e.preventDefault();
@ -501,14 +593,14 @@ export class Slides extends Ion {
* @private
*/
onTouchEnd(e) {
console.log('PANEND', e);
console.debug('PANEND', e);
if (this.scale > 1) {
if (Math.abs(this.touch.x) > this.viewportWidth) {
// TODO what is posX?
var posX = posX > 0 ? this.viewportWidth - 1 : -(this.viewportWidth - 1);
console.log('Setting on posx', this.touch.x);
console.debug('Setting on posx', this.touch.x);
}
/*
@ -595,15 +687,27 @@ export class Slides extends Ion {
}
/**
* @private
* @name Slide
* @description
* `ion-slide` is a child component of `ion-slides` and is where all your individule slide content will be rendered too.
*
* @see {@link /docs/v2/api/components/slides/Slides/ Slides API Docs}
*/
@Component({
selector: 'ion-slide',
template: '<div class="slide-zoom"><ng-content></ng-content></div>'
})
export class Slide {
/**
* @private
*/
private ele: HTMLElement;
/**
* @private
*/
@Input() zoom;
constructor(

68
ionic/components/tabs/tab.ts
View File

@ -12,14 +12,6 @@ import {TabButton} from './tab-button';
/**
* @name Tab
* @usage
* ```html
* <ion-tabs>
* <ion-tab tabTitle="Home" tabIcon="home" [root]="tabOneRoot"></ion-tab>
* <ion-tab tabTitle="Login" tabIcon="star" [root]="tabTwoRoot"></ion-tab>
* </ion-tabs>
* ```
*
* @description
* _For basic Tabs usage, see the [Tabs section](../../../../components/#tabs)
* of the Component docs._
@ -34,11 +26,12 @@ import {TabButton} from './tab-button';
* See the [Tabs API reference](../Tabs/) for more details on configuring Tabs
* and the TabBar.
*
* @usage
* For most cases, you can give tab a `[root]` property along with the component you want to load.
*
* ```html
* <ion-tabs>
* <ion-tab [root]="chatRoot"><ion-tab>
* <ion-tab [root]="chatRoot" tabTitle="Chat" tabIcon="chat"><ion-tab>
* </ion-tabs>
* ```
*
@ -76,12 +69,12 @@ import {TabButton} from './tab-button';
* ```
*
*
* @property {any} [root] - set the root page for this tab
* @property {any} [tabTitle] - set the title of this tab
* @property {any} [tabIcon] - set the icon for this tab
* @property {any} [tabBadge] - set the badge for this tab
* @property {any} [tabBadgeStyle] - set the badge color for this tab
* @property {any} [select] - method to call when the current tab is selected
* @property {Page} [root] - set the root page for this tab
* @property {String} [tabTitle] - set the title of this tab
* @property {String} [tabIcon] - set the icon for this tab
* @property {Any} [tabBadge] - set the badge for this tab
* @property {String} [tabBadgeStyle] - set the badge color for this tab
* @property {Any} (select) - method to call when the current tab is selected
*
*/
@Component({
@ -95,6 +88,10 @@ import {TabButton} from './tab-button';
template: '<div #contents></div>'
})
export class Tab extends NavController {
/**
* @private
*/
public isSelected: boolean;
private _isInitial: boolean;
private _panelId: string;
@ -107,11 +104,35 @@ export class Tab extends NavController {
*/
btn: TabButton;
/**
* @private
*/
@Input() root: Type;
/**
* @private
*/
@Input() tabTitle: string;
/**
* @private
*/
@Input() tabIcon: string;
/**
* @private
*/
@Input() tabBadge: string;
/**
* @private
*/
@Input() tabBadgeStyle: string;
/**
* @private
*/
@Output() select: EventEmitter<any> = new EventEmitter();
constructor(
@ -156,6 +177,10 @@ export class Tab extends NavController {
}
}
/**
* @private
*/
preload(wait) {
this._loadTimer = setTimeout(() => {
if (!this._loaded) {
@ -212,18 +237,7 @@ export class Tab extends NavController {
}
/**
*
* ```ts
* export class MyClass{
* constructor(tab: Tab){
* this.tab = tab;
* console.log(this.tab.index);
* }
* }
* ```
*
* @returns {number} Returns the index of this page within its NavController.
*
* @private
*/
get index() {
return this.parent.getIndex(this);

26
ionic/components/tabs/tabs.ts
View File

@ -21,6 +21,7 @@ import {isUndefined} from '../../util/util';
* @property {any} [tabbarPlacement] - set position of the tabbar, top or bottom
* @property {any} [tabbarIcons] - set the position of the tabbar's icons: top, bottom, left, right, hide
* @property {any} [preloadTabs] - sets whether to preload all the tabs, true or false
* @property {any} (change) - expression you want to evaluate when the tabs chage
* @usage
* ```html
* <ion-tabs>
@ -81,15 +82,40 @@ export class Tabs extends Ion {
* @private
*/
navbarContainerRef: ViewContainerRef;
/**
* @private
*/
subPages: boolean;
/**
* @private
*/
@Input() selectedIndex: any;
/**
* @private
*/
@Input() preloadTabs: any;
/**
* @private
*/
@Input() tabbarIcons: string;
/**
* @private
*/
@Input() tabbarPlacement: string;
/**
* @private
*/
@Output() change: EventEmitter<Tab> = new EventEmitter();
/**
* @private
*/
@ViewChild(TabHighlight) private _highlight: TabHighlight;
/**
* @private
*/
@ViewChildren(TabButton) private _btns;
constructor(

12
ionic/components/toggle/toggle.ts
View File

@ -79,8 +79,14 @@ export class Toggle {
private _startX;
private _touched: number = 0;
/**
* @private
*/
id: string;
/**
* @private
*/
@Input() value: string = '';
constructor(
@ -119,6 +125,9 @@ export class Toggle {
this.checked = !this.checked;
}
/**
* @private
*/
@Input()
get checked() {
return this._checked;
@ -132,6 +141,9 @@ export class Toggle {
}
}
/**
* @private
*/
@Input()
get disabled() {
return this._disabled;

2
ionic/components/toolbar/toolbar.ts
View File

@ -92,7 +92,7 @@ export class ToolbarBase extends Ion {
*
* ```
*
* @property {any} [placement] - set position of the toolbar, top or bottom
* @property {any} [placement] - set position of the toolbar, top or bottom. If not set, defautls to top.
* @demo /docs/v2/demos/toolbar/
* @see {@link ../../navbar/Navbar/ Navbar API Docs}
*/

11
ionic/config/config.ts
View File

@ -29,6 +29,17 @@ import {isObject, isDefined, isFunction, isArray} from '../util/util';
* })
* ```
*
* Or change the whole mode
*
* ```ts
* @App({
* template: `<ion-nav [root]="root"></ion-nav>`
* config: {
* mode: md
* }
* })
* ```
*
* Config can be overwritting at multiple levels, allowing deeper configuration. Taking the example from earlier, we can override any setting we want based on a platform.
* ```ts
* @App({

3
ionic/decorators/page.ts
View File

@ -6,7 +6,6 @@ const _reflect: any=Reflect;
/**
* @name Page
* @description
*For more information on how pages are created, see the [NavController API reference](../../components/nav/NavController/#creating_pages)
*
* The Page decorator indicates that the decorated class is an Ionic
* navigation component, meaning it can be navigated to using a NavController.
@ -69,6 +68,8 @@ const _reflect: any=Reflect;
* Pages have their content automatically wrapped in `<ion-view>`, so although
* you may see these tags if you inspect your markup, you don't need to include
* them in your templates.
*
* For more information on how pages are created, see the [NavController API reference](../../components/nav/NavController/#creating_pages)
*/
export function Page(config: any={}) {
return function(cls) {

33
scripts/README.md
View File

@ -33,6 +33,26 @@
2. `gulp docs --doc-version=2.0.0` to build a specific API version
### Building NPM Module for Local Testing
From `ionic` repo root directory:
1. `gulp package --strip-debug false`
2. `cd dist`
3. `sudo npm link`
4. After ionic changes: `gulp transpile.no-typecheck --strip-debug false && gulp copy.scss`
From Testing App root directory:
1. `npm link ionic-framework`
2. `ionic serve` or `ionic run` or whatever
When done:
1. In testing app, `npm uninstall ionic-framework`
2. In ionic repo, `sudo gulp clean`
### Running Snapshot
1. Install [Protractor](https://angular.github.io/protractor/#/): `npm install -g protractor`
@ -65,7 +85,16 @@
6. Sit back and have a beer :beer: (or wine :wine_glass:)
### Releasing Component Demos
See [ionic-preview-app](https://github.com/driftyco/ionic-preview-app#updating-ionic-site)
(Copied from [ionic-preview-app](https://github.com/driftyco/ionic-preview-app#updating-ionic-site), check there for updates)
- Set [production mode](https://github.com/driftyco/ionic-preview-app/blob/master/app/app.ts#L11) to true
- Rebuild app
- Copy the contents of this entire repo to `ionic-site/dist/preview-app/` (`cp -R * ../path/to/ionic-site/dist/preview-app/`)
### Releasing API Demos
TODO
Ionic API demos are automatically compiled and deployed to the [ionic staging site](http://ionic-site-staging.herokuapp.com/) on every commit. No action is necessary.
If you'd like to manually update the demos, clone the [`ionic-site`](https://github.com/driftyco/ionic-site) repo as a sibling of `ionic`. From `ionic` run gulp docs, and it'll compile and copy the demos to the `ionic-site` repo, ready for testing or committing.

3
scripts/docs/templates/common.template.html vendored
View File

@ -118,9 +118,6 @@ Improve this doc
<@ endblock @>
<!-- description -->
<h2>Description</h2>
<@ block description @>
<$ doc.description | marked $>
<@ endblock @>

10
scripts/e2e/e2e-publish.js
View File

@ -7,13 +7,17 @@ module.exports = function(options) {
var inputDir = path.join(__dirname, '../../dist');
var uploadQueue = [];
var ignoreFiles = /(\/test\/|\/ts\/|\/q\/|\/ionic-site\/|\/docs\/|\/examples\/|\/inquirer\/|\/lodash\/|\/tooling\/|\/colors\/|\/bin\/|\.ts$|\.bin|\.map$|\.md$|\.git|\.scss$|\.yml$|\.yaml$|\.dart$|\.txt|\.npm|bower|DS_Store|LICENSE)/i;
function uploadFiles(dir, urlPath) {
fs.readdir(dir, function(err, list) {
list.forEach(function(file) {
var url = urlPath + '/' + file
if (url.indexOf('/test/') > -1 || url.indexOf('/ionic-site/') > -1 || url.indexOf('/docs/') > -1) return;
if (ignoreFiles.test(url)) {
return;
}
fs.stat(dir + '/' + file, function(err, stat) {
if (stat && stat.isDirectory()) {
@ -75,7 +79,7 @@ module.exports = function(options) {
function(err, httpResponse, body) {
if (err) {
uploadData.status = 'failed';
console.error('Get upload failed:', err);
console.error('Get upload failed:', uploadData.url_path, err);
} else {
if (httpResponse.statusCode == 200) {
@ -101,7 +105,7 @@ module.exports = function(options) {
setTimeout(postNextUpload, 100);
if (err) {
console.error('Upload failed:', err);
console.error('Upload failed:', uploadUrl, err);
uploadData.status = 'failed';
} else {

4
scripts/snapshot/snapshot.config.js
View File

@ -9,9 +9,9 @@ exports.config = {
//domain: 'localhost:8080',
specs: 'dist/e2e/**/*e2e.js',
// specs: 'dist/e2e/input/**/*e2e.js',
// specs: 'dist/e2e/button/**/*e2e.js',
sleepBetweenSpecs: 350,
sleepBetweenSpecs: 380,
platformDefauls: {
browser: 'chrome',

2
scripts/snapshot/snapshot.task.js
View File

@ -90,7 +90,7 @@ module.exports = function(gulp, argv, buildConfig) {
var chars = 'abcdefghijklmnopqrstuvwxyz';
var id = chars.charAt(Math.floor(Math.random() * chars.length));
chars += '0123456789';
while (id.length < 4) {
while (id.length < 3) {
id += chars.charAt(Math.floor(Math.random() * chars.length));
}
return id;