mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
Merge remote-tracking branch 'origin/master' into WIP-api-demos
This commit is contained in:
Drew Rygh
@@ -5,23 +5,27 @@ import {extend} from '../util/util';
|
||||
/**
|
||||
Animation Steps/Process
|
||||
-----------------------
|
||||
1) Construct animation (doesn't start)
|
||||
2) Client play()'s animation, returns promise
|
||||
3) Add before classes to elements
|
||||
4) Remove before classes from elements
|
||||
5) Elements staged in "from" effect w/ inline styles
|
||||
6) Call onReady()
|
||||
7) Wait for RENDER_DELAY milliseconds (give browser time to render)
|
||||
8) Call onPlay()
|
||||
8) Run from/to animation on elements
|
||||
9) Animations finish async
|
||||
10) Set inline styles w/ the "to" effects on elements
|
||||
11) Add after classes to elements
|
||||
12) Remove after classes from elements
|
||||
13) Call onFinish()
|
||||
14) Resolve play()'s promise
|
||||
|
||||
- Construct animation (doesn't start)
|
||||
- Client play()'s animation, returns promise
|
||||
- Add before classes to elements
|
||||
- Remove before classes from elements
|
||||
- Elements staged in "from" effect w/ inline styles
|
||||
- Call onReady()
|
||||
- Wait for RENDER_DELAY milliseconds (give browser time to render)
|
||||
- Call onPlay()
|
||||
- Run from/to animation on elements
|
||||
- Animations finish async
|
||||
- Set inline styles w/ the "to" effects on elements
|
||||
- Add after classes to elements
|
||||
- Remove after classes from elements
|
||||
- Call onFinish()
|
||||
- Resolve play()'s promise
|
||||
**/
|
||||
|
||||
/**
|
||||
* @private
|
||||
**/
|
||||
export class Animation {
|
||||
|
||||
constructor(ele, opts={}) {
|
||||
@@ -539,11 +543,10 @@ export class Animation {
|
||||
}
|
||||
|
||||
static createTransition(enteringView, leavingView, opts = {}) {
|
||||
const name = opts.animation || 'ios-transition';
|
||||
|
||||
let TransitionClass = AnimationRegistry[name];
|
||||
let TransitionClass = AnimationRegistry[opts.animation];
|
||||
if (!TransitionClass) {
|
||||
TransitionClass = Animation;
|
||||
// didn't find a transition animation, default to ios-transition
|
||||
TransitionClass = AnimationRegistry['ios-transition'];
|
||||
}
|
||||
|
||||
return new TransitionClass(enteringView, leavingView, opts);
|
||||
@@ -555,6 +558,9 @@ export class Animation {
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
**/
|
||||
class Animate {
|
||||
|
||||
constructor(ele, fromEffect, toEffect, duration, easingConfig, playbackRate) {
|
||||
@@ -766,6 +772,8 @@ function inlineStyle(ele, effect) {
|
||||
if (transforms.length) {
|
||||
transforms.push('translateZ(0px)');
|
||||
ele.style[CSS.transform] = transforms.join(' ');
|
||||
} else {
|
||||
ele.style[CSS.transform] = 'translateZ(0px)';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import {Animation} from './animation';
|
||||
|
||||
const DURATION = 550;
|
||||
const DURATION = 400;
|
||||
const EASING = 'cubic-bezier(0.36,0.66,0.04,1)';
|
||||
const OPACITY = 'opacity';
|
||||
const TRANSLATEX = 'translateX';
|
||||
@@ -50,6 +50,7 @@ class IOSTransition extends Animation {
|
||||
if (enteringHasNavbar) {
|
||||
// entering page has a navbar
|
||||
let enteringNavBar = new Animation(enteringView.navbarRef());
|
||||
enteringNavBar.before.addClass('show-navbar');
|
||||
this.add(enteringNavBar);
|
||||
|
||||
let enteringTitle = new Animation(enteringView.titleRef());
|
||||
|
||||
@@ -36,6 +36,7 @@ class MDTransition extends Animation {
|
||||
|
||||
if (enteringHasNavbar) {
|
||||
let enteringNavBar = new Animation(enteringView.navbarRef());
|
||||
enteringNavBar.before.addClass('show-navbar');
|
||||
this.add(enteringNavBar);
|
||||
|
||||
let enteringBackButton = new Animation(enteringView.backBtnRef());
|
||||
|
||||
@@ -20,7 +20,12 @@
|
||||
"components/radio/radio.ios",
|
||||
"components/searchbar/searchbar.ios",
|
||||
"components/segment/segment.ios",
|
||||
"components/switch/switch.ios",
|
||||
"components/tabs/tabs.ios",
|
||||
"components/text-input/text-input.ios",
|
||||
"components/toggle/toggle.ios",
|
||||
"components/toolbar/toolbar.ios";
|
||||
|
||||
|
||||
// iOS Platform
|
||||
@import
|
||||
"platform/cordova.ios";
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
"components/tap-click/ripple",
|
||||
"components/searchbar/searchbar.md",
|
||||
"components/segment/segment.md",
|
||||
"components/switch/switch.md",
|
||||
"components/tabs/tabs.md",
|
||||
"components/text-input/text-input.md",
|
||||
"components/toggle/toggle.md",
|
||||
"components/toolbar/toolbar.md";
|
||||
|
||||
@@ -1,39 +1,38 @@
|
||||
|
||||
export * from 'ionic/components/app/app'
|
||||
export * from 'ionic/components/app/id'
|
||||
export * from 'ionic/components/action-sheet/action-sheet'
|
||||
export * from 'ionic/components/blur/blur'
|
||||
export * from 'ionic/components/button/button'
|
||||
export * from 'ionic/components/checkbox/checkbox'
|
||||
export * from 'ionic/components/content/content'
|
||||
export * from 'ionic/components/icon/icon'
|
||||
export * from 'ionic/components/item/item'
|
||||
export * from 'ionic/components/item/item-sliding'
|
||||
export * from 'ionic/components/menu/menu'
|
||||
export * from 'ionic/components/menu/menu-types'
|
||||
export * from 'ionic/components/menu/menu-toggle'
|
||||
export * from 'ionic/components/menu/menu-close'
|
||||
export * from 'ionic/components/text-input/text-input'
|
||||
export * from 'ionic/components/text-input/label'
|
||||
export * from 'ionic/components/list/list'
|
||||
export * from 'ionic/components/show-hide-when/show-hide-when'
|
||||
export * from 'ionic/components/modal/modal'
|
||||
export * from 'ionic/components/nav/nav'
|
||||
export * from 'ionic/components/nav/nav-controller'
|
||||
export * from 'ionic/components/nav/view-controller'
|
||||
export * from 'ionic/components/nav/nav-push'
|
||||
export * from 'ionic/components/nav/nav-router'
|
||||
export * from 'ionic/components/navbar/navbar'
|
||||
export * from 'ionic/components/overlay/overlay'
|
||||
export * from 'ionic/components/popup/popup'
|
||||
export * from 'ionic/components/slides/slides'
|
||||
export * from 'ionic/components/radio/radio'
|
||||
export * from 'ionic/components/scroll/scroll'
|
||||
export * from 'ionic/components/scroll/pull-to-refresh'
|
||||
export * from 'ionic/components/searchbar/searchbar'
|
||||
export * from 'ionic/components/segment/segment'
|
||||
export * from 'ionic/components/switch/switch'
|
||||
export * from 'ionic/components/tabs/tabs'
|
||||
export * from 'ionic/components/tabs/tab'
|
||||
export * from 'ionic/components/tap-click/tap-click'
|
||||
export * from 'ionic/components/toolbar/toolbar'
|
||||
export * from './components/app/app'
|
||||
export * from './components/app/id'
|
||||
export * from './components/action-sheet/action-sheet'
|
||||
export * from './components/blur/blur'
|
||||
export * from './components/button/button'
|
||||
export * from './components/checkbox/checkbox'
|
||||
export * from './components/content/content'
|
||||
export * from './components/icon/icon'
|
||||
export * from './components/item/item'
|
||||
export * from './components/item/item-sliding'
|
||||
export * from './components/menu/menu'
|
||||
export * from './components/menu/menu-types'
|
||||
export * from './components/menu/menu-toggle'
|
||||
export * from './components/menu/menu-close'
|
||||
export * from './components/text-input/text-input'
|
||||
export * from './components/text-input/label'
|
||||
export * from './components/list/list'
|
||||
export * from './components/show-hide-when/show-hide-when'
|
||||
export * from './components/modal/modal'
|
||||
export * from './components/nav/nav'
|
||||
export * from './components/nav/nav-controller'
|
||||
export * from './components/nav/view-controller'
|
||||
export * from './components/nav/nav-push'
|
||||
export * from './components/nav/nav-router'
|
||||
export * from './components/navbar/navbar'
|
||||
export * from './components/overlay/overlay'
|
||||
export * from './components/popup/popup'
|
||||
export * from './components/slides/slides'
|
||||
export * from './components/radio/radio'
|
||||
export * from './components/scroll/scroll'
|
||||
export * from './components/scroll/pull-to-refresh'
|
||||
export * from './components/searchbar/searchbar'
|
||||
export * from './components/segment/segment'
|
||||
export * from './components/tabs/tabs'
|
||||
export * from './components/tabs/tab'
|
||||
export * from './components/tap-click/tap-click'
|
||||
export * from './components/toggle/toggle'
|
||||
export * from './components/toolbar/toolbar'
|
||||
|
||||
@@ -1,11 +1,5 @@
|
||||
/**
|
||||
* @ngdoc service
|
||||
* @name ActionSheet
|
||||
* @module ionic
|
||||
* @description
|
||||
* The ActionSheet is a modal menu with options to select based on an action.
|
||||
*/
|
||||
import {Component, Injectable, Renderer, NgFor, NgIf} from 'angular2/angular2';
|
||||
import {Component, Injectable, Renderer} from 'angular2/core';
|
||||
import {NgFor, NgIf} from 'angular2/common';
|
||||
|
||||
import {OverlayController} from '../overlay/overlay-controller';
|
||||
import {Config} from '../../config/config';
|
||||
@@ -21,19 +15,19 @@ import {extend} from '../../util/util';
|
||||
'<div class="action-sheet-wrapper">' +
|
||||
'<div class="action-sheet-container">' +
|
||||
'<div class="action-sheet-group action-sheet-options">' +
|
||||
'<div class="action-sheet-title" *ng-if="d.titleText">{{d.titleText}}</div>' +
|
||||
'<button (click)="buttonClicked(i)" *ng-for="#b of d.buttons; #i=index" class="action-sheet-button action-sheet-option disable-hover">' +
|
||||
'<icon [name]="b.icon" *ng-if="b.icon" class="action-sheet-icon"></icon> ' +
|
||||
'<div class="action-sheet-title" *ngIf="d.titleText">{{d.titleText}}</div>' +
|
||||
'<button (click)="buttonClicked(i)" *ngFor="#b of d.buttons; #i=index" class="action-sheet-button action-sheet-option disable-hover">' +
|
||||
'<icon [name]="b.icon" *ngIf="b.icon" class="action-sheet-icon"></icon> ' +
|
||||
'{{b.text}}' +
|
||||
'</button>' +
|
||||
'<button *ng-if="d.destructiveText" (click)="destructive()" class="action-sheet-button action-sheet-destructive disable-hover">' +
|
||||
'<icon [name]="d.destructiveIcon" *ng-if="d.destructiveIcon" class="action-sheet-icon"></icon> ' +
|
||||
'<button *ngIf="d.destructiveText" (click)="destructive()" class="action-sheet-button action-sheet-destructive disable-hover">' +
|
||||
'<icon [name]="d.destructiveIcon" *ngIf="d.destructiveIcon" class="action-sheet-icon"></icon> ' +
|
||||
'{{d.destructiveText}}' +
|
||||
'</button>' +
|
||||
'</div>' +
|
||||
'<div class="action-sheet-group" *ng-if="d.cancelText">' +
|
||||
'<div class="action-sheet-group" *ngIf="d.cancelText">' +
|
||||
'<button (click)="cancel()" class="action-sheet-button action-sheet-cancel disable-hover">' +
|
||||
'<icon [name]="d.cancelIcon" *ng-if="d.cancelIcon" class="action-sheet-icon"></icon> ' +
|
||||
'<icon [name]="d.cancelIcon" *ngIf="d.cancelIcon" class="action-sheet-icon"></icon> ' +
|
||||
'{{d.cancelText}}' +
|
||||
'</button>' +
|
||||
'</div>' +
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import {Injectable, NgZone, Title} from 'angular2/angular2';
|
||||
import {Injectable, NgZone} from 'angular2/core';
|
||||
import {Title} from 'angular2/platform/browser';
|
||||
|
||||
import {Config} from '../../config/config';
|
||||
import {ClickBlock} from '../../util/click-block';
|
||||
@@ -7,6 +8,7 @@ import {ScrollTo} from '../../animations/scroll-to';
|
||||
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Component registry service. For more information on registering
|
||||
* components see the [IdRef API reference](../id/IdRef/).
|
||||
*/
|
||||
@@ -26,6 +28,7 @@ export class IonicApp {
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Sets the document title.
|
||||
* @param {string} val Value to set the document title to.
|
||||
*/
|
||||
@@ -43,6 +46,7 @@ export class IonicApp {
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Sets if the app is currently enabled or not, meaning if it's
|
||||
* available to accept new user commands. For example, this is set to `false`
|
||||
* while views transition, a modal slides up, an action-sheet
|
||||
@@ -63,6 +67,7 @@ export class IonicApp {
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Boolean if the app is actively enabled or not.
|
||||
* @return {bool}
|
||||
*/
|
||||
@@ -71,6 +76,7 @@ export class IonicApp {
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Register a known component with a key, for easy lookups later.
|
||||
* @param {TODO} id The id to use to register the component
|
||||
* @param {TODO} component The component to register
|
||||
@@ -83,6 +89,7 @@ export class IonicApp {
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Unregister a known component with a key.
|
||||
* @param {TODO} id The id to use to unregister
|
||||
*/
|
||||
@@ -91,6 +98,7 @@ export class IonicApp {
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Get a registered component with the given type (returns the first)
|
||||
* @param {Object} cls the type to search for
|
||||
* @return the matching component, or undefined if none was found
|
||||
@@ -104,6 +112,7 @@ export class IonicApp {
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Get the component for the given key.
|
||||
* @param {TODO} key TODO
|
||||
* @return {TODO} TODO
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import {AppViewManager, ElementRef, Directive, Renderer} from 'angular2/angular2';
|
||||
import {AppViewManager, ElementRef, Directive, Renderer} from 'angular2/core';
|
||||
|
||||
import {IonicApp} from './app';
|
||||
|
||||
/**
|
||||
* @name Id
|
||||
* @description
|
||||
* IdRef is an easy way to identify unique components in an app and access them
|
||||
* no matter where in the UI heirarchy you are. For example, this makes toggling
|
||||
* a global side menu feasible from any place in the application.
|
||||
@@ -10,6 +12,7 @@ import {IonicApp} from './app';
|
||||
* See the [Menu section](http://ionicframework.com/docs/v2/components/#menus) of
|
||||
* the Component docs for an example of how Menus rely on ID's.
|
||||
*
|
||||
* @usage
|
||||
* To give any component an ID, simply set its `id` property:
|
||||
* ```html
|
||||
* <ion-checkbox id="myCheckbox"></ion-checkbox>
|
||||
@@ -19,8 +22,13 @@ import {IonicApp} from './app';
|
||||
* service:
|
||||
* ```ts
|
||||
* constructor(app: IonicApp) {
|
||||
* var checkbox = app.getComponent("myCheckbox");
|
||||
* if (checkbox.checked) console.log('checkbox is checked');
|
||||
* this.app = app
|
||||
* }
|
||||
* ngAfterViewInit{
|
||||
* var checkbox = this.app.getComponent("myCheckbox");
|
||||
* if (checkbox.checked) {
|
||||
* console.log('checkbox is checked');
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
*
|
||||
@@ -70,12 +78,13 @@ export class IdRef {
|
||||
selector: '[attr]',
|
||||
inputs: ['attr']
|
||||
})
|
||||
|
||||
export class Attr {
|
||||
constructor(private renderer: Renderer, private elementRef: ElementRef) {}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ngOnInit() {
|
||||
this.renderer.setElementAttribute(this.elementRef, this.attr, '');
|
||||
}
|
||||
|
||||
4
ionic/components/app/normalize.scss
vendored
4
ionic/components/app/normalize.scss
vendored
@@ -36,6 +36,7 @@ strong {
|
||||
// Remove border when inside `a` element in IE 8/9/10.
|
||||
img {
|
||||
border: 0;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
// Correct overflow not hidden in IE 9/10/11.
|
||||
@@ -126,7 +127,8 @@ button {
|
||||
}
|
||||
|
||||
// Re-set default cursor for disabled elements.
|
||||
button[disabled],
|
||||
a[disabled],
|
||||
button[disabled]
|
||||
html input[disabled] {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import {Component, Control, ControlGroup} from 'angular2/angular2';
|
||||
import {Component} from 'angular2/core';
|
||||
import {Control, ControlGroup} from 'angular2/common';
|
||||
|
||||
import {App, Storage, LocalStorage, SqlStorage} from 'ionic/ionic';
|
||||
|
||||
|
||||
11
ionic/components/app/test/typography/index.ts
Normal file
11
ionic/components/app/test/typography/index.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import {App, IonicApp} from 'ionic/ionic';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EApp {
|
||||
constructor(app: IonicApp) {
|
||||
app.setTitle('Basic Buttons');
|
||||
}
|
||||
}
|
||||
32
ionic/components/app/test/typography/main.html
Normal file
32
ionic/components/app/test/typography/main.html
Normal file
@@ -0,0 +1,32 @@
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-title>Typography</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-content padding>
|
||||
|
||||
<h1>H1: The quick brown fox jumps over the lazy dog</h1>
|
||||
|
||||
<h2>H2: The quick brown fox jumps over the lazy dog</h2>
|
||||
|
||||
<h3>H3: The quick brown fox jumps over the lazy dog</h3>
|
||||
|
||||
<h4>H4: The quick brown fox jumps over the lazy dog</h4>
|
||||
|
||||
<h5>H5: The quick brown fox jumps over the lazy dog</h5>
|
||||
|
||||
<h6>H6: The quick brown fox jumps over the lazy dog</h6>
|
||||
|
||||
<p>
|
||||
p: The quick brown fox jumps over the lazy dog.
|
||||
The quick brown fox jumps over the lazy dog.
|
||||
The quick brown fox jumps over the lazy dog.
|
||||
The quick brown fox jumps over the lazy dog.
|
||||
The quick brown fox jumps over the lazy dog.
|
||||
The quick brown fox jumps over the lazy dog.
|
||||
The quick brown fox jumps over the lazy dog.
|
||||
The quick brown fox jumps over the lazy dog.
|
||||
The quick brown fox jumps over the lazy dog.
|
||||
</p>
|
||||
|
||||
</ion-content>
|
||||
@@ -11,6 +11,13 @@ $font-size-root: 62.5% !default;
|
||||
$headings-font-weight: 500 !default;
|
||||
$headings-line-height: 1.2 !default;
|
||||
|
||||
$h1-font-size: 2.6rem !default;
|
||||
$h2-font-size: 2.4rem !default;
|
||||
$h3-font-size: 2.2rem !default;
|
||||
$h4-font-size: 2.0rem !default;
|
||||
$h5-font-size: 1.8rem !default;
|
||||
$h6-font-size: 1.6rem !default;
|
||||
|
||||
|
||||
html {
|
||||
font-size: $font-size-root;
|
||||
@@ -42,29 +49,29 @@ h2 + h3 {
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.6rem;
|
||||
font-size: $h1-font-size;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 3rem;
|
||||
font-size: $h2-font-size;
|
||||
margin-top: 1.8rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2.4rem;
|
||||
font-size: $h3-font-size;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 2rem;
|
||||
font-size: $h4-font-size;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.6rem;
|
||||
font-size: $h5-font-size;
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1.4rem;
|
||||
font-size: $h6-font-size;
|
||||
}
|
||||
|
||||
small {
|
||||
|
||||
@@ -1,14 +1,23 @@
|
||||
import {Directive, Renderer, ElementRef} from 'angular2/angular2';
|
||||
import {Directive, Renderer, ElementRef} from 'angular2/core';
|
||||
|
||||
|
||||
/**
|
||||
* @name Blur
|
||||
* @description
|
||||
* The blur attribute applies the CSS blur attribute to an element. If the CSS attribute is not supported,
|
||||
* it will fall back to applying a semi-transparent background color to the element.
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-card blur>
|
||||
* This card will blur the content behind it.
|
||||
* </ion-card>
|
||||
* ```
|
||||
*
|
||||
* @demo /docs/v2/demos/blur/
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[ion-blur]'
|
||||
selector: '[blur]'
|
||||
})
|
||||
export class Blur {
|
||||
constructor(private elementRef: ElementRef, private renderer: Renderer) {
|
||||
|
||||
@@ -35,7 +35,7 @@ a.button {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.button-disabled {
|
||||
.button[disabled] {
|
||||
opacity: 0.4;
|
||||
cursor: default !important;
|
||||
pointer-events: none;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Directive, ElementRef, Renderer, Attribute, Optional} from 'angular2/angular2';
|
||||
import {Directive, ElementRef, Renderer, Attribute, Optional} from 'angular2/core';
|
||||
|
||||
import {Config} from '../../config/config';
|
||||
import {Toolbar} from '../toolbar/toolbar';
|
||||
@@ -14,6 +14,7 @@ import {Toolbar} from '../toolbar/toolbar';
|
||||
* @property [full] - for a full width button
|
||||
* @property [small] - sets button size to small
|
||||
* @property [large] - sets button size to large
|
||||
* @property [disabled] - disables the button
|
||||
* @property [fab] - for a floating action button
|
||||
* @property [fab-left] - position a fab button to the left
|
||||
* @property [fab-right] - position a fab button to the right
|
||||
@@ -43,6 +44,7 @@ export class Button {
|
||||
this._display = null; // block/full
|
||||
this._colors = []; // primary/secondary
|
||||
this._icon = null; // left/right/only
|
||||
this._disabled = false; // disabled
|
||||
|
||||
let element = elementRef.nativeElement;
|
||||
|
||||
@@ -56,14 +58,24 @@ export class Button {
|
||||
return;
|
||||
}
|
||||
|
||||
if (element.hasAttribute('disabled')) {
|
||||
this._disabled = true;
|
||||
}
|
||||
|
||||
this._readAttrs(element);
|
||||
this._readIcon(element);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ngAfterContentInit() {
|
||||
this._assignCss(true);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
setRole(val) {
|
||||
this._role = val;
|
||||
}
|
||||
@@ -156,6 +168,9 @@ export class Button {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
static setRoles(contentButtonChildren, role) {
|
||||
let buttons = contentButtonChildren.toArray();
|
||||
buttons.forEach(button => {
|
||||
|
||||
@@ -35,4 +35,8 @@
|
||||
<button dark class="activated">Dark.activated</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button disabled>Disabled</button>
|
||||
</p>
|
||||
|
||||
</ion-content>
|
||||
|
||||
@@ -11,10 +11,10 @@
|
||||
Card List
|
||||
</ion-list-header>
|
||||
|
||||
<ion-switch>
|
||||
<ion-toggle>
|
||||
<icon wifi item-left></icon>
|
||||
Wifi
|
||||
</ion-switch>
|
||||
</ion-toggle>
|
||||
|
||||
<ion-item>
|
||||
<icon heart item-left></icon>
|
||||
@@ -44,10 +44,10 @@
|
||||
Card List Without Lines
|
||||
</ion-list-header>
|
||||
|
||||
<ion-switch>
|
||||
<ion-toggle>
|
||||
<icon wifi item-left></icon>
|
||||
Wifi
|
||||
</ion-switch>
|
||||
</ion-toggle>
|
||||
|
||||
<ion-item>
|
||||
<icon heart item-left></icon>
|
||||
@@ -75,10 +75,10 @@
|
||||
Card With Items (No List)
|
||||
</ion-card-header>
|
||||
|
||||
<ion-switch>
|
||||
<ion-toggle>
|
||||
<icon wifi item-left></icon>
|
||||
Wifi
|
||||
</ion-switch>
|
||||
</ion-toggle>
|
||||
|
||||
<ion-item>
|
||||
<icon heart item-left></icon>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import {Component, Directive, Optional, NgControl, ElementRef} from 'angular2/angular2';
|
||||
import {Component, Directive, Optional, ElementRef} from 'angular2/core';
|
||||
import {NgControl} from 'angular2/common';
|
||||
|
||||
import {Ion} from '../ion';
|
||||
import {Form} from '../../util/form';
|
||||
@@ -10,10 +11,11 @@ import {Form} from '../../util/form';
|
||||
*
|
||||
* @property [checked] - whether or not the checkbox is checked (defaults to false)
|
||||
* @property [value] - the value of the checkbox component
|
||||
* @property [disabled] - whether or not the checkbox is disabled or not.
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-checkbox checked="true" value="isChecked" ng-control="htmlCtrl">
|
||||
* <ion-checkbox checked="true" value="isChecked" ngControl="htmlCtrl">
|
||||
* HTML5
|
||||
* </ion-checkbox>
|
||||
* ```
|
||||
@@ -31,6 +33,7 @@ import {Form} from '../../util/form';
|
||||
host: {
|
||||
'role': 'checkbox',
|
||||
'tappable': 'true',
|
||||
'[attr.id]': 'id',
|
||||
'[attr.tab-index]': 'tabIndex',
|
||||
'[attr.aria-checked]': 'checked',
|
||||
'[attr.aria-disabled]': 'disabled',
|
||||
@@ -51,7 +54,7 @@ import {Form} from '../../util/form';
|
||||
export class Checkbox {
|
||||
|
||||
constructor(
|
||||
form: Form,
|
||||
private form: Form,
|
||||
@Optional() ngControl: NgControl,
|
||||
elementRef: ElementRef
|
||||
) {
|
||||
@@ -66,8 +69,15 @@ export class Checkbox {
|
||||
if (ngControl) ngControl.valueAccessor = this;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ngOnInit() {
|
||||
this.labelId = 'label-' + this.inputId;
|
||||
if (!this.id) {
|
||||
this.id = 'chk-' + this.form.nextId();
|
||||
}
|
||||
|
||||
this.labelId = 'lbl-' + this.id;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
|
||||
it('should check apple, enable/check grape, submit form', function() {
|
||||
element(by.css('[ng-control=appleCtrl] .checkbox-media')).click();
|
||||
element(by.css('[ngControl=appleCtrl] .checkbox-media')).click();
|
||||
element(by.css('.e2eGrapeDisabled')).click();
|
||||
element(by.css('.e2eGrapeChecked')).click();
|
||||
element(by.css('.e2eSubmit')).click();
|
||||
|
||||
@@ -9,7 +9,8 @@ import {
|
||||
NgControlName,
|
||||
NgFormModel,
|
||||
FormBuilder
|
||||
} from 'angular2/angular2';
|
||||
} from 'angular2/common';
|
||||
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
|
||||
@@ -4,23 +4,23 @@
|
||||
|
||||
<ion-content>
|
||||
|
||||
<form (submit)="doSubmit($event)" [ng-form-model]="fruitsForm">
|
||||
<form (submit)="doSubmit($event)" [ngFormModel]="fruitsForm">
|
||||
|
||||
<ion-list>
|
||||
|
||||
<ion-checkbox value="apple" checked="true" ng-control="appleCtrl">
|
||||
<ion-checkbox value="apple" checked="true" ngControl="appleCtrl">
|
||||
Apple, value=apple, init checked
|
||||
</ion-checkbox>
|
||||
|
||||
<ion-checkbox ng-control="bananaCtrl">
|
||||
<ion-checkbox ngControl="bananaCtrl">
|
||||
Banana, init no checked/value attributes
|
||||
</ion-checkbox>
|
||||
|
||||
<ion-checkbox value="cherry" disabled="true" ng-control="cherryCtrl">
|
||||
<ion-checkbox value="cherry" disabled="true" ngControl="cherryCtrl">
|
||||
Cherry, value=cherry, init disabled
|
||||
</ion-checkbox>
|
||||
|
||||
<ion-checkbox value="grape" [checked]="grapeChecked" [disabled]="grapeDisabled" ng-control="grapeCtrl">
|
||||
<ion-checkbox value="grape" [checked]="grapeChecked" [disabled]="grapeDisabled" ngControl="grapeCtrl">
|
||||
Grape, value=grape, init checked, disabled
|
||||
</ion-checkbox>
|
||||
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Component, ElementRef, Optional, NgZone} from 'angular2/angular2';
|
||||
import {Component, ElementRef, Optional, NgZone} from 'angular2/core';
|
||||
|
||||
import {Ion} from '../ion';
|
||||
import {Config} from '../../config/config';
|
||||
@@ -9,6 +9,8 @@ import {Animation} from '../../animations/animation';
|
||||
import {ScrollTo} from '../../animations/scroll-to';
|
||||
|
||||
/**
|
||||
* @name Content
|
||||
* @description
|
||||
* The Content component provides an easy to use content area that can be configured to use Ionic's custom Scroll View, or the built in overflow scrolling of the browser.
|
||||
*
|
||||
* While we recommend using the custom Scroll features in Ionic in most cases, sometimes (for performance reasons) only the browser's native overflow scrolling will suffice, and so we've made it easy to toggle between the Ionic scroll implementation and overflow scrolling.
|
||||
@@ -17,7 +19,7 @@ import {ScrollTo} from '../../animations/scroll-to';
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-content>
|
||||
* <ion-content id="myContent">
|
||||
* Add your content here!
|
||||
* </ion-content>
|
||||
* ```
|
||||
@@ -56,7 +58,27 @@ export class Content extends Ion {
|
||||
|
||||
/**
|
||||
* Adds the specified scroll handler to the content' scroll element.
|
||||
* @param {Function} handler The scroll event handler.
|
||||
*
|
||||
* ```ts
|
||||
* @Page({
|
||||
* template: `<ion-content id="my-content"></ion-content>`
|
||||
* )}
|
||||
* export class MyPage{
|
||||
* constructor(app: IonicApp){
|
||||
* this.app = app;
|
||||
* }
|
||||
* // Need to wait until the component has been initialized
|
||||
* ngAfterViewInit() {
|
||||
* // Here 'my-content' is the ID of my ion-content
|
||||
* this.content = this.app.getComponent('my-content');
|
||||
* this.content.addScrollEventListener(this.myScroll);
|
||||
* }
|
||||
* myScroll() {
|
||||
* console.info('They see me scrolling...');
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
* @param {Function} handler The method you want perform when scrolling
|
||||
* @returns {Function} A function that removes the scroll handler.
|
||||
*/
|
||||
addScrollEventListener(handler) {
|
||||
@@ -104,7 +126,27 @@ export class Content extends Ion {
|
||||
|
||||
/**
|
||||
* Adds the specified touchmove handler to the content's scroll element.
|
||||
* @param {Function} handler The touchmove handler.
|
||||
*
|
||||
* ```ts
|
||||
* @Page({
|
||||
* template: `<ion-content id="my-content"></ion-content>`
|
||||
* )}
|
||||
* export class MyPage{
|
||||
* constructor(app: IonicApp){
|
||||
* this.app = app;
|
||||
* }
|
||||
* // Need to wait until the component has been initialized
|
||||
* ngAfterViewInit() {
|
||||
* // Here 'my-content' is the ID of my ion-content
|
||||
* this.content = this.app.getComponent('my-content');
|
||||
* this.content.addTouchMoveListener(this.touchHandler);
|
||||
* }
|
||||
* touchHandler() {
|
||||
* console.log("I'm touching all the magazines!!");
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
* @param {Function} handler The method you want to perform when touchmove is firing
|
||||
* @returns {Function} A function that removes the touchmove handler.
|
||||
*/
|
||||
addTouchMoveListener(handler) {
|
||||
@@ -122,11 +164,32 @@ export class Content extends Ion {
|
||||
|
||||
/**
|
||||
* Scroll to the specified position.
|
||||
* @param {TODO} x The x-value to scroll to.
|
||||
* @param {TODO} y The y-value to scroll to.
|
||||
* @param {Number} duration Duration of the scroll animation.
|
||||
*
|
||||
* ```ts
|
||||
* @Page({
|
||||
* template: `<ion-content id="my-content">
|
||||
* <button (click)="scrollTo()"> Down 500px</button>
|
||||
* </ion-content>`
|
||||
* )}
|
||||
* export class MyPage{
|
||||
* constructor(app: IonicApp){
|
||||
* this.app = app;
|
||||
* }
|
||||
* // Need to wait until the component has been initialized
|
||||
* ngAfterViewInit() {
|
||||
* // Here 'my-content' is the ID of my ion-content
|
||||
* this.content = this.app.getComponent('my-content');
|
||||
* }
|
||||
* scrollTo() {
|
||||
* this.content.scrollTo(0, 500, 200);
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
* @param {Number} x The x-value to scroll to.
|
||||
* @param {Number} y The y-value to scroll to.
|
||||
* @param {Number} duration Duration of the scroll animation in ms.
|
||||
* @param {TODO} tolerance TODO
|
||||
* @returns {TODO} TODO
|
||||
* @returns {Promise} Returns a promise when done
|
||||
*/
|
||||
scrollTo(x, y, duration, tolerance) {
|
||||
if (this._scrollTo) {
|
||||
@@ -138,6 +201,31 @@ export class Content extends Ion {
|
||||
return this._scrollTo.start(x, y, duration, tolerance);
|
||||
}
|
||||
|
||||
/**
|
||||
* Scroll to the specified position.
|
||||
*
|
||||
* ```ts
|
||||
* @Page({
|
||||
* template: `<ion-content id="my-content">
|
||||
* <button (click)="scrollTop()"> Down 500px</button>
|
||||
* </ion-content>`
|
||||
* )}
|
||||
* export class MyPage{
|
||||
* constructor(app: IonicApp){
|
||||
* this.app = app;
|
||||
* }
|
||||
* // Need to wait until the component has been initialized
|
||||
* ngAfterViewInit() {
|
||||
* // Here 'my-content' is the ID of my ion-content
|
||||
* this.content = this.app.getComponent('my-content');
|
||||
* }
|
||||
* scrollTop() {
|
||||
* this.content.scrollTop();
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
* @returns {Promise} Returns a promise when done
|
||||
*/
|
||||
scrollToTop() {
|
||||
if (this._scrollTo) {
|
||||
this._scrollTo.dispose();
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Directive, ElementRef, Attribute, Renderer} from 'angular2/angular2';
|
||||
import {Directive, ElementRef, Attribute, Renderer} from 'angular2/core';
|
||||
|
||||
import {Config} from '../../config/config';
|
||||
|
||||
@@ -7,9 +7,18 @@ import {Config} from '../../config/config';
|
||||
* @name Icon
|
||||
* @description
|
||||
* Icons can be used on their own, or inside of a number of Ionic components. For a full list of available icons,
|
||||
* check out the [Ionicons resource docs](../../../../../resources/ionicons).
|
||||
* check out the [Ionicons resource docs](../../../../resources/ionicons).
|
||||
*
|
||||
* @property {boolean} [is-active] - Whether or not the icon is active. Icons that are not active will use an outlined version of the icon.
|
||||
* @usage
|
||||
* ```html
|
||||
* <!-- use the appropriate home icon for ios and md -->
|
||||
* <icon home></icon>
|
||||
*
|
||||
* <!-- explicity set the icon for each platform -->
|
||||
* <icon ios="ion-ios-home" md="ion-md-home"></icon>
|
||||
* ```
|
||||
*
|
||||
* @property {boolean} [isActive] - Whether or not the icon is active. Icons that are not active will use an outlined version of the icon.
|
||||
* If there is not an outlined version for the particular icon, it will use the default (full) version.
|
||||
* @property {string} [ios] - Explicitly set the icon to use on iOS.
|
||||
* @property {string} [md] - Explicitly set the icon to use on Android.
|
||||
@@ -55,7 +64,7 @@ export class Icon {
|
||||
// looping through native dom attributes, eww
|
||||
// https://github.com/angular/angular/issues/1818
|
||||
for (let i = 0, l = ele.attributes.length; i < l; i++) {
|
||||
if (ele.attributes[i].value === '' && /_|item-|is-active|large|small|class/.test(ele.attributes[i].name) !== true) {
|
||||
if (ele.attributes[i].value === '' && /_|item-|isActive|large|small|class/.test(ele.attributes[i].name) !== true) {
|
||||
this.name = ele.attributes[i].name;
|
||||
break;
|
||||
}
|
||||
|
||||
@@ -15,16 +15,16 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<icon home is-active="true" item-left></icon>
|
||||
<icon home isActive="true" item-left></icon>
|
||||
<code>
|
||||
<icon home is-active="true"></icon>
|
||||
<icon home isActive="true"></icon>
|
||||
</code>
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<icon home is-active="false" item-left></icon>
|
||||
<icon home isActive="false" item-left></icon>
|
||||
<code>
|
||||
<icon home is-active="false"></icon>
|
||||
<icon home isActive="false"></icon>
|
||||
</code>
|
||||
</ion-item>
|
||||
|
||||
@@ -57,9 +57,9 @@
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
<icon [is-active]="isActive" ios="ion-social-apple" md="ion-social-android" item-left></icon>
|
||||
<icon [isActive]="isActive" ios="ion-social-apple" md="ion-social-android" item-left></icon>
|
||||
<code>
|
||||
<icon [is-active]="isActive" ios="ion-social-apple" md="ion-social-android"></icon>
|
||||
<icon [isActive]="isActive" ios="ion-social-apple" md="ion-social-android"></icon>
|
||||
</code>
|
||||
</ion-item>
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import {ElementRef} from 'angular2/core';
|
||||
import {Config} from '../config/config';
|
||||
import {isArray} from 'ionic/util';
|
||||
import * as dom from 'ionic/util/dom';
|
||||
import {isArray} from '../util';
|
||||
import * as dom from '../util/dom';
|
||||
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import {Hammer} from 'ionic/gestures/hammer';
|
||||
import {DragGesture} from 'ionic/gestures/drag-gesture';
|
||||
import {Hammer} from '../../gestures/hammer';
|
||||
import {DragGesture} from '../../gestures/drag-gesture';
|
||||
import {List} from '../list/list';
|
||||
|
||||
import {CSS, raf, closest} from 'ionic/util/dom';
|
||||
import {CSS, raf, closest} from '../../util/dom';
|
||||
|
||||
|
||||
export class ItemSlidingGesture extends DragGesture {
|
||||
|
||||
@@ -1,17 +1,18 @@
|
||||
import {Component, ElementRef, Optional} from 'angular2/angular2';
|
||||
import {Component, ElementRef, Optional} from 'angular2/core';
|
||||
|
||||
import {List} from '../list/list';
|
||||
|
||||
|
||||
/**
|
||||
* @name ItemSliding
|
||||
*
|
||||
* @description
|
||||
* Creates a list-item that can easily be swiped,
|
||||
* deleted, reordered, edited, and more.
|
||||
* Creates a list-item that can easily be swiped, deleted, reordered, edited, and more.
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-list>
|
||||
* <ion-item-sliding *ng-for="#item of items">
|
||||
* <ion-item-sliding *ngFor="#item of items">
|
||||
* <ion-item (click)="itemTapped(item)">
|
||||
* {{item.title}}
|
||||
* </ion-item>
|
||||
|
||||
@@ -88,5 +88,12 @@ ion-item-content + ion-item-content[cnt] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@each $color-name, $color-value in $colors {
|
||||
ion-item-divider[#{$color-name}] {
|
||||
background-color: $color-value;
|
||||
color: inverse($color-value);
|
||||
}
|
||||
}
|
||||
|
||||
@import "item-media";
|
||||
@import "item-sliding";
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import {Component} from 'angular2/angular2';
|
||||
import {Component} from 'angular2/core';
|
||||
|
||||
|
||||
/**
|
||||
* @name Item
|
||||
* @description
|
||||
* Creates a list-item that can easily be swiped, deleted, reordered, edited, and more.
|
||||
*
|
||||
* There are three common ways to use an item:
|
||||
|
||||
@@ -1,59 +1,76 @@
|
||||
<ion-toolbar><ion-title>Item Divider</ion-title></ion-toolbar>
|
||||
|
||||
<ion-content class="outer-content">
|
||||
<ion-item-group>
|
||||
<ion-item>
|
||||
Plain Ol' div with some text
|
||||
</ion-item>
|
||||
|
||||
<ion-item>
|
||||
Plain Ol' div with some text
|
||||
</ion-item>
|
||||
<ion-item>
|
||||
Single line text that should have ellipses when it doesn't all fit in the item
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
|
||||
<ion-item>
|
||||
Single line text that should have ellipses when it doesn't all fit in the item
|
||||
</ion-item>
|
||||
<ion-item-group>
|
||||
<ion-item-divider>
|
||||
Item Divider
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item-divider>
|
||||
Item Divider
|
||||
</ion-item-divider>
|
||||
<ion-item text-wrap>
|
||||
Multiline text that should wrap when it is too long
|
||||
to fit on one line in the item. Attribute on .item
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
|
||||
<ion-item text-wrap>
|
||||
Multiline text that should wrap when it is too long
|
||||
to fit on one line in the item. Attribute on .item
|
||||
</ion-item>
|
||||
<ion-item-group>
|
||||
<ion-item-divider dark>Dark</ion-item-divider>
|
||||
|
||||
<ion-item text-wrap>
|
||||
<h1>H1 Title Text</h1>
|
||||
<p>Paragraph line 1</p>
|
||||
</ion-item>
|
||||
<ion-item text-wrap>
|
||||
<h1>H1 Title Text</h1>
|
||||
<p>Paragraph line 1</p>
|
||||
</ion-item>
|
||||
|
||||
<ion-item text-wrap>
|
||||
<h2>H2 Title Text</h2>
|
||||
<p>Paragraph line 1</p>
|
||||
</ion-item>
|
||||
<ion-item text-wrap>
|
||||
<h2>H2 Title Text</h2>
|
||||
<p>Paragraph line 1</p>
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
|
||||
<ion-item-divider></ion-item-divider>
|
||||
<ion-item-group>
|
||||
<ion-item-divider light>Light</ion-item-divider>
|
||||
|
||||
<ion-item text-wrap>
|
||||
<h3>H3 Title Text</h3>
|
||||
<p>Paragraph line 1</p>
|
||||
<p>Paragraph line 2</p>
|
||||
</ion-item>
|
||||
<ion-item text-wrap>
|
||||
<h3>H3 Title Text</h3>
|
||||
<p>Paragraph line 1</p>
|
||||
<p>Paragraph line 2</p>
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
|
||||
<ion-item text-wrap>
|
||||
<h4>H4 Title Text</h4>
|
||||
<p>Paragraph line 1</p>
|
||||
<p>Paragraph line 2</p>
|
||||
<p>Paragraph line 3</p>
|
||||
</ion-item>
|
||||
<ion-item-group>
|
||||
<ion-item-divider primary>Primary</ion-item-divider>
|
||||
|
||||
<ion-item>
|
||||
<ion-item-content>
|
||||
Column 1
|
||||
</ion-item-content>
|
||||
<ion-item-content>
|
||||
Column 2
|
||||
</ion-item-content>
|
||||
<ion-item-content>
|
||||
Column 3
|
||||
</ion-item-content>
|
||||
</ion-item>
|
||||
<ion-item text-wrap>
|
||||
<h4>H4 Title Text</h4>
|
||||
<p>Paragraph line 1</p>
|
||||
<p>Paragraph line 2</p>
|
||||
<p>Paragraph line 3</p>
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
|
||||
<ion-item-group>
|
||||
<ion-item-divider secondary>Secondary</ion-item-divider>
|
||||
|
||||
<ion-item>
|
||||
<ion-item-content>
|
||||
Column 1
|
||||
</ion-item-content>
|
||||
<ion-item-content>
|
||||
Column 2
|
||||
</ion-item-content>
|
||||
<ion-item-content>
|
||||
Column 3
|
||||
</ion-item-content>
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
|
||||
</ion-content>
|
||||
|
||||
@@ -8,13 +8,13 @@
|
||||
<ion-content class="outer-content">
|
||||
|
||||
<ion-list>
|
||||
<ion-item-group *ng-for="#timeSlot of data">
|
||||
<ion-item-group *ngFor="#timeSlot of data">
|
||||
|
||||
<ion-item-divider sticky>
|
||||
{{timeSlot.time}}
|
||||
</ion-item-divider>
|
||||
|
||||
<ion-item-sliding *ng-for="#session of timeSlot.talks" [attr.category]="session.category" #sliding-item>
|
||||
<ion-item-sliding *ngFor="#session of timeSlot.talks" [attr.category]="session.category" #slidingItem>
|
||||
<button ion-item (click)="openSession(session)">
|
||||
<h3>{{session.name}}</h3>
|
||||
<p>
|
||||
|
||||
@@ -35,7 +35,7 @@
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
|
||||
<ion-item-sliding *ng-if="shouldShow" #item>
|
||||
<ion-item-sliding *ngIf="shouldShow" #item>
|
||||
<ion-item text-wrap detail-push>
|
||||
<h3>Ben Sperry</h3>
|
||||
<p>
|
||||
@@ -83,7 +83,7 @@
|
||||
</ion-item-options>
|
||||
</ion-item-sliding>
|
||||
|
||||
<ion-item-sliding *ng-for="#data of getItems()" #item>
|
||||
<ion-item-sliding *ngFor="#data of getItems()" #item>
|
||||
<ion-item text-wrap detail-push>
|
||||
<h3>ng-for {{data}}</h3>
|
||||
</ion-item>
|
||||
|
||||
@@ -1,10 +1,10 @@
|
||||
import {Directive, ElementRef, NgZone} from 'angular2/angular2';
|
||||
import {Directive, ElementRef, NgZone} from 'angular2/core';
|
||||
|
||||
import {Ion} from '../ion';
|
||||
import {Config} from '../../config/config';
|
||||
import {ListVirtualScroll} from './virtual';
|
||||
import {ItemSlidingGesture} from '../item/item-sliding-gesture';
|
||||
import * as util from 'ionic/util';
|
||||
import * as util from '../../util';
|
||||
|
||||
/**
|
||||
* The List is a widely used interface element in almost any mobile app, and can include
|
||||
|
||||
@@ -8,10 +8,10 @@
|
||||
List Header
|
||||
</ion-list-header>
|
||||
|
||||
<ion-switch>
|
||||
<ion-toggle>
|
||||
<icon wifi item-left></icon>
|
||||
Wifi
|
||||
</ion-switch>
|
||||
</ion-toggle>
|
||||
|
||||
<ion-item>
|
||||
<icon heart item-left></icon>
|
||||
@@ -38,10 +38,10 @@
|
||||
List Header
|
||||
</ion-list-header>
|
||||
|
||||
<ion-switch checked="true">
|
||||
<ion-toggle checked="true">
|
||||
<icon color-wand item-left></icon>
|
||||
Magic
|
||||
</ion-switch>
|
||||
</ion-toggle>
|
||||
|
||||
<ion-item>
|
||||
<icon star item-left></icon>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import {ProtoViewRef, ViewContainerRef} from 'angular2/angular2'
|
||||
import {Directive, Host, forwardRef} from 'angular2/angular2';
|
||||
import {ProtoViewRef, ViewContainerRef} from 'angular2/core'
|
||||
import {Directive, Host, forwardRef} from 'angular2/core';
|
||||
|
||||
import {App, List} from 'ionic/ionic';
|
||||
|
||||
|
||||
@@ -20,9 +20,9 @@
|
||||
List Link Item 2
|
||||
</a>
|
||||
|
||||
<ion-switch checked="true">
|
||||
Switch
|
||||
</ion-switch>
|
||||
<ion-toggle checked="true">
|
||||
Toggle
|
||||
</ion-toggle>
|
||||
|
||||
<ion-checkbox checked="true">
|
||||
Checkbox
|
||||
|
||||
@@ -6,10 +6,10 @@
|
||||
List With No Lines
|
||||
</ion-list-header>
|
||||
|
||||
<ion-switch>
|
||||
<ion-toggle>
|
||||
<icon wifi item-left></icon>
|
||||
Wifi
|
||||
</ion-switch>
|
||||
</ion-toggle>
|
||||
|
||||
<ion-item>
|
||||
<icon heart item-left></icon>
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
|
||||
<ion-content class="outer-content">
|
||||
|
||||
<ion-list class="outer-content" *ng-for="#person of people">
|
||||
<ion-list class="outer-content" *ngFor="#person of people">
|
||||
<ion-list-header>
|
||||
{{person.name}}
|
||||
</ion-list-header>
|
||||
<ion-item *ng-for="#component of person.components">
|
||||
<ion-item *ngFor="#component of person.components">
|
||||
{{component}}
|
||||
<div item-right>
|
||||
<icon pin></icon>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item-group *ng-for="#group of groups">
|
||||
<ion-item-group *ngFor="#group of groups">
|
||||
<ion-item-divider sticky>{{group.title}}</ion-item-divider>
|
||||
<ion-item *ng-for="#item of group.items">
|
||||
<ion-item *ngFor="#item of group.items">
|
||||
{{item.title}}
|
||||
</ion-item>
|
||||
</ion-item-group>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Directive} from 'angular2/angular2';
|
||||
import {Directive} from 'angular2/core';
|
||||
|
||||
import {IonicApp} from '../app/app';
|
||||
import {Menu} from './menu';
|
||||
@@ -11,7 +11,7 @@ import {Menu} from './menu';
|
||||
* @see {@link ../../menu/Menu Menu API Docs}
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[menu-close]',
|
||||
selector: '[menuClose]',
|
||||
inputs: [
|
||||
'menuClose'
|
||||
],
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import {Menu} from './menu';
|
||||
import {SlideEdgeGesture} from '../../gestures/slide-edge-gesture';
|
||||
|
||||
import * as util from 'ionic/util';
|
||||
import * as util from '../../util';
|
||||
|
||||
class MenuContentGesture extends SlideEdgeGesture {
|
||||
export class MenuContentGesture extends SlideEdgeGesture {
|
||||
constructor(menu: Menu, targetEl: Element, options = {}) {
|
||||
|
||||
super(targetEl, util.extend({
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Directive, ElementRef, Optional} from 'angular2/angular2';
|
||||
import {Directive, ElementRef, Optional} from 'angular2/core';
|
||||
|
||||
import {IonicApp} from '../app/app';
|
||||
import {ViewController} from '../nav/view-controller';
|
||||
@@ -13,14 +13,14 @@ import {Menu} from './menu';
|
||||
* @see {@link ../../menu/Menu Menu API Docs}
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[menu-toggle]',
|
||||
selector: '[menuToggle]',
|
||||
inputs: [
|
||||
'menuToggle'
|
||||
],
|
||||
host: {
|
||||
'(click)': 'toggle()',
|
||||
'[hidden]': 'isHidden',
|
||||
'menu-toggle': '' //ensures the attr is there for css when using [menu-toggle]
|
||||
'menuToggle': '' //ensures the attr is there for css when using [menuToggle]
|
||||
}
|
||||
})
|
||||
export class MenuToggle {
|
||||
@@ -37,7 +37,7 @@ export class MenuToggle {
|
||||
|
||||
// Deprecation warning
|
||||
if (this.withinNavbar && elementRef.nativeElement.tagName === 'A') {
|
||||
console.warn('Menu toggles within a navbar should use <button menu-toggle> instead of <a toggle>')
|
||||
console.warn('Menu toggles within a navbar should use <button menuToggle> instead of <a menu-toggle>')
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import {Menu} from './menu';
|
||||
import {Animation} from 'ionic/animations/animation';
|
||||
import {Animation} from '../../animations/animation';
|
||||
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Component, forwardRef, Directive, Host, EventEmitter, ElementRef} from 'angular2/angular2';
|
||||
import {Component, forwardRef, Directive, Host, EventEmitter, ElementRef} from 'angular2/core';
|
||||
|
||||
import {Ion} from '../ion';
|
||||
import {IonicApp} from '../app/app';
|
||||
@@ -39,8 +39,8 @@ import * as gestures from './menu-gestures';
|
||||
* to get ahold of menu references. If no `id` is given then the menu
|
||||
* automatically receives an `id` created from the side it is on, such as
|
||||
* `leftMenu` or `rightMenu`. When using more than one menu it is always
|
||||
* recommended to give each menu a unique `id`. Additionally menu-toggle and
|
||||
* menu-close directives should be given menu id values of their respective
|
||||
* recommended to give each menu a unique `id`. Additionally menuToggle and
|
||||
* menuClose directives should be given menu id values of their respective
|
||||
* menu.
|
||||
*
|
||||
* Menu supports two display styles: overlay, and reveal. Overlay
|
||||
@@ -62,7 +62,6 @@ import * as gestures from './menu-gestures';
|
||||
selector: 'ion-menu',
|
||||
inputs: [
|
||||
'content',
|
||||
'dragThreshold',
|
||||
'id',
|
||||
'side',
|
||||
'type'
|
||||
@@ -192,7 +191,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 menu-toggle button
|
||||
// or swiping open the menu while pressing down on the menuToggle button
|
||||
if (shouldOpen === this.isOpen || this._isPrevented()) {
|
||||
return Promise.resolve();
|
||||
}
|
||||
@@ -287,7 +286,7 @@ export class Menu extends Ion {
|
||||
*/
|
||||
_prevent() {
|
||||
// used to prevent unwanted opening/closing after swiping open/close
|
||||
// or swiping open the menu while pressing down on the menu-toggle
|
||||
// or swiping open the menu while pressing down on the menuToggle
|
||||
this._preventTime = Date.now() + 20;
|
||||
}
|
||||
|
||||
@@ -381,7 +380,7 @@ export class Menu extends Ion {
|
||||
if (menuId) {
|
||||
menu = app.getComponent(menuId);
|
||||
if (!menu) {
|
||||
console.error('Menu with id "' + menuId + '" cannot be found for menu-toggle');
|
||||
console.error('Menu with id "' + menuId + '" cannot be found for menuToggle');
|
||||
return;
|
||||
}
|
||||
|
||||
@@ -391,7 +390,7 @@ export class Menu extends Ion {
|
||||
menu = app.getComponent('rightMenu');
|
||||
}
|
||||
if (!menu) {
|
||||
console.error('Menu with id "leftMenu" or "rightMenu" cannot be found for menu-toggle');
|
||||
console.error('Menu with id "leftMenu" or "rightMenu" cannot be found for menuToggle');
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,5 +5,5 @@ it('should toggle open menu', function() {
|
||||
|
||||
|
||||
it('should close menu', function() {
|
||||
element(by.css('[menu-close=leftMenu]')).click();
|
||||
element(by.css('[menuClose=leftMenu]')).click();
|
||||
});
|
||||
|
||||
@@ -8,11 +8,11 @@
|
||||
|
||||
<ion-list>
|
||||
|
||||
<button ion-item *ng-for="#p of pages" (click)="openPage(p)">
|
||||
<button ion-item *ngFor="#p of pages" (click)="openPage(p)">
|
||||
{{p.title}}
|
||||
</button>
|
||||
|
||||
<button ion-item menu-close="leftMenu" detail-none>
|
||||
<button ion-item menuClose="leftMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
@@ -32,11 +32,11 @@
|
||||
|
||||
<ion-list>
|
||||
|
||||
<button ion-item *ng-for="#p of pages" (click)="openPage(p)">
|
||||
<button ion-item *ngFor="#p of pages" (click)="openPage(p)">
|
||||
{{p.title}}
|
||||
</button>
|
||||
|
||||
<button ion-item menu-close="rightMenu" detail-none>
|
||||
<button ion-item menuClose="rightMenu" detail-none>
|
||||
Close Menu
|
||||
</button>
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<button menu-toggle="leftMenu">
|
||||
<button menuToggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
|
||||
@@ -21,7 +21,7 @@
|
||||
</button>
|
||||
</ion-buttons>
|
||||
|
||||
<button menu-toggle="rightMenu" right secondary>
|
||||
<button menuToggle="rightMenu" right secondary>
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
|
||||
@@ -33,11 +33,11 @@
|
||||
<h3>Page 1</h3>
|
||||
|
||||
<p>
|
||||
<button class="e2eContentToggleMenu" menu-toggle="leftMenu">Toggle Left Menu</button>
|
||||
<button class="e2eContentToggleMenu" menuToggle="leftMenu">Toggle Left Menu</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button class="e2eContentToggleMenu" menu-toggle="rightMenu">Toggle Right Menu</button>
|
||||
<button class="e2eContentToggleMenu" menuToggle="rightMenu">Toggle Right Menu</button>
|
||||
</p>
|
||||
|
||||
<ion-card>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<button menu-toggle="leftMenu">
|
||||
<button menuToggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
<h3>Page 2</h3>
|
||||
|
||||
<p>
|
||||
<button menu-toggle="leftMenu" class="e2eContentToggleMenu">Toggle Left Menu</button>
|
||||
<button menuToggle="leftMenu" class="e2eContentToggleMenu">Toggle Left Menu</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
Menu
|
||||
</ion-title>
|
||||
|
||||
<button menu-toggle="rightMenu" right>
|
||||
<button menuToggle="rightMenu" right>
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
<h3>Page 3</h3>
|
||||
|
||||
<p>
|
||||
<button menu-toggle="rightMenu">Toggle Right Menu</button>
|
||||
<button menuToggle="rightMenu">Toggle Right Menu</button>
|
||||
</p>
|
||||
|
||||
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
|
||||
|
||||
@@ -7,7 +7,7 @@
|
||||
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<button ion-item menu-close="menu1" detail-none>
|
||||
<button ion-item menuClose="menu1" detail-none>
|
||||
Close Menu 1
|
||||
</button>
|
||||
</ion-list>
|
||||
@@ -24,7 +24,7 @@
|
||||
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<button ion-item menu-close="menu2" detail-none>
|
||||
<button ion-item menuClose="menu2" detail-none>
|
||||
Close Menu 2
|
||||
</button>
|
||||
</ion-list>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
<button [menu-toggle]="activeMenu">
|
||||
<button [menuToggle]="activeMenu">
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
<ion-title>
|
||||
@@ -22,7 +22,7 @@
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button [menu-toggle]="activeMenu">Toggle Menu</button>
|
||||
<button [menuToggle]="activeMenu">Toggle Menu</button>
|
||||
</p>
|
||||
|
||||
<p>This page has two left menus, but only one is active at a time.</p>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
<ion-list>
|
||||
|
||||
<button ion-item menu-toggle="leftMenu" detail-none>
|
||||
<button ion-item menuToggle="leftMenu" detail-none>
|
||||
Close Left Menu
|
||||
</button>
|
||||
|
||||
@@ -18,24 +18,4 @@
|
||||
</ion-menu>
|
||||
|
||||
|
||||
<!-- <ion-menu [content]="content" id="rightMenu" type="reveal" side="right">
|
||||
|
||||
<ion-toolbar secondary>
|
||||
<ion-title>Right Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-content>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<button ion-item menu-toggle="rightMenu">
|
||||
Close Right Menu
|
||||
</button>
|
||||
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
</ion-menu> -->
|
||||
|
||||
|
||||
<ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<button menu-toggle="leftMenu">
|
||||
<button menuToggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
|
||||
@@ -17,11 +17,11 @@
|
||||
<h3>Content</h3>
|
||||
|
||||
<p>
|
||||
<button menu-toggle="leftMenu">Toggle Left Menu</button>
|
||||
<button menuToggle="leftMenu">Toggle Left Menu</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button menu-toggle="rightMenu">Toggle Right Menu</button>
|
||||
<button menuToggle="rightMenu">Toggle Right Menu</button>
|
||||
</p>
|
||||
|
||||
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
<ion-list>
|
||||
|
||||
<button ion-item menu-toggle="leftMenu" detail-none>
|
||||
<button ion-item menuToggle="leftMenu" detail-none>
|
||||
Close Left Menu
|
||||
</button>
|
||||
|
||||
@@ -18,24 +18,4 @@
|
||||
</ion-menu>
|
||||
|
||||
|
||||
<!-- <ion-menu [content]="content" id="rightMenu" type="reveal" side="right">
|
||||
|
||||
<ion-toolbar secondary>
|
||||
<ion-title>Right Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-content>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<button ion-item menu-toggle="rightMenu">
|
||||
Close Right Menu
|
||||
</button>
|
||||
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
</ion-menu> -->
|
||||
|
||||
|
||||
<ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<button menu-toggle="leftMenu">
|
||||
<button menuToggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
|
||||
@@ -17,11 +17,11 @@
|
||||
<h3>Content</h3>
|
||||
|
||||
<p>
|
||||
<button menu-toggle="leftMenu">Toggle Left Menu</button>
|
||||
<button menuToggle="leftMenu">Toggle Left Menu</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button menu-toggle="rightMenu">Toggle Right Menu</button>
|
||||
<button menuToggle="rightMenu">Toggle Right Menu</button>
|
||||
</p>
|
||||
|
||||
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
|
||||
<ion-list>
|
||||
|
||||
<button ion-item menu-toggle="leftMenu" detail-none>
|
||||
<button ion-item menuToggle="leftMenu" detail-none>
|
||||
Close Left Menu
|
||||
</button>
|
||||
|
||||
@@ -18,24 +18,4 @@
|
||||
</ion-menu>
|
||||
|
||||
|
||||
<!-- <ion-menu [content]="content" id="rightMenu" type="reveal" side="right">
|
||||
|
||||
<ion-toolbar secondary>
|
||||
<ion-title>Right Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-content>
|
||||
|
||||
<ion-list>
|
||||
|
||||
<button ion-item menu-toggle="rightMenu">
|
||||
Close Right Menu
|
||||
</button>
|
||||
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
|
||||
</ion-menu> -->
|
||||
|
||||
|
||||
<ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
|
||||
<button menu-toggle="leftMenu">
|
||||
<button menuToggle="leftMenu">
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
|
||||
@@ -17,11 +17,11 @@
|
||||
<h3>Content</h3>
|
||||
|
||||
<p>
|
||||
<button menu-toggle="leftMenu">Toggle Left Menu</button>
|
||||
<button menuToggle="leftMenu">Toggle Left Menu</button>
|
||||
</p>
|
||||
|
||||
<p>
|
||||
<button menu-toggle="rightMenu">Toggle Right Menu</button>
|
||||
<button menuToggle="rightMenu">Toggle Right Menu</button>
|
||||
</p>
|
||||
|
||||
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
|
||||
|
||||
@@ -1,9 +1,9 @@
|
||||
import {Injectable} from 'angular2/angular2';
|
||||
import {Injectable, Type} from 'angular2/core';
|
||||
|
||||
import {OverlayController} from '../overlay/overlay-controller';
|
||||
import {Config} from '../../config/config';
|
||||
import {Animation} from '../../animations/animation';
|
||||
import {extend} from 'ionic/util';
|
||||
import {extend} from '../../util';
|
||||
|
||||
/**
|
||||
* The Modal is a content pane that can go over the user's current page.
|
||||
|
||||
@@ -174,7 +174,7 @@ class ModalFirstPage {
|
||||
push() {
|
||||
let page = ModalSecondPage;
|
||||
let params = { id: 8675309, myData: [1,2,3,4] };
|
||||
let opts = { animation: 'ios' };
|
||||
let opts = { animation: 'ios-transition' };
|
||||
|
||||
this.nav.push(page, params, opts);
|
||||
}
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import {ChangeDetectorRef, Compiler, ElementRef, Injector, provide, NgZone, AppViewManager, Renderer} from 'angular2/angular2';
|
||||
import {wtfLeave, wtfCreateScope, WtfScopeFn, wtfStartTimeRange, wtfEndTimeRange} from 'angular2/angular2';
|
||||
import {ChangeDetectorRef, Compiler, ElementRef, Injector, provide, NgZone, AppViewManager, Renderer} from 'angular2/core';
|
||||
import {wtfLeave, wtfCreateScope, WtfScopeFn, wtfStartTimeRange, wtfEndTimeRange} from 'angular2/instrumentation';
|
||||
|
||||
import {Ion} from '../ion';
|
||||
import {IonicApp} from '../app/app';
|
||||
@@ -56,7 +56,7 @@ import {raf, rafFrames} from '../../util/dom';
|
||||
*
|
||||
* <h2 id="creating_pages">Page creation</h2>
|
||||
* _For more information on the `@Page` decorator see the [@Page API
|
||||
* reference](../../../config/Page/)._
|
||||
* reference](../../../config/decorators/Page/)._
|
||||
*
|
||||
* Pages are created when they are added to the navigation stack. For methods
|
||||
* like [push()](#push), the NavController takes any component class that is
|
||||
@@ -232,7 +232,9 @@ export class NavController extends Ion {
|
||||
*/
|
||||
push(componentType, params = {}, opts = {}, callback) {
|
||||
if (!componentType) {
|
||||
return Promise.reject('invalid componentType to push');
|
||||
let errMsg = 'invalid componentType to push';
|
||||
console.error(errMsg)
|
||||
return Promise.reject(errMsg);
|
||||
}
|
||||
|
||||
if (typeof componentType !== 'function') {
|
||||
@@ -849,6 +851,7 @@ export class NavController extends Ion {
|
||||
if (this.keyboard.isOpen()) {
|
||||
// the keyboard is still open!
|
||||
// no problem, let's just close for them
|
||||
this.keyboard.close();
|
||||
this.keyboard.onClose(() => {
|
||||
// keyboard has finished closing, transition complete
|
||||
this._transComplete();
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Directive, Optional} from 'angular2/angular2';
|
||||
import {Directive, Optional} from 'angular2/core';
|
||||
import {NavController} from './nav-controller';
|
||||
import {NavRegistry} from './nav-registry';
|
||||
|
||||
@@ -8,11 +8,11 @@ import {NavRegistry} from './nav-registry';
|
||||
*
|
||||
* Basic usage:
|
||||
* ```html
|
||||
* <button [nav-push]="pushPage"></button>
|
||||
* <button [navPush]="pushPage"></button>
|
||||
* ```
|
||||
* To specify parameters you can use array syntax or the `nav-params` property:
|
||||
* ```html
|
||||
* <button [nav-push]="pushPage" [nav-params]="params"></button>
|
||||
* <button [navPush]="pushPage" [navParams]="params"></button>
|
||||
* ```
|
||||
* Where `pushPage` and `params` are specified in your component, and `pushPage`
|
||||
* contains a reference to a [@Page component](../../../config/Page/):
|
||||
@@ -20,7 +20,7 @@ import {NavRegistry} from './nav-registry';
|
||||
* ```ts
|
||||
* import {LoginPage} from 'login';
|
||||
* @Page({
|
||||
* template: `<button [nav-push]="pushPage" [nav-params]="params"></button>`
|
||||
* template: `<button [navPush]="pushPage" [navParams]="params"></button>`
|
||||
* })
|
||||
* class MyPage {
|
||||
* constructor(){
|
||||
@@ -34,14 +34,14 @@ import {NavRegistry} from './nav-registry';
|
||||
* You can also use syntax similar to Angular2's router, passing an array to
|
||||
* NavPush:
|
||||
* ```html
|
||||
* <button [nav-push]="[pushPage, params]"></button>
|
||||
* <button [navPush]="[pushPage, params]"></button>
|
||||
* ```
|
||||
* @demo /docs/v2/demos/nav-push-pop/
|
||||
* @see {@link /docs/v2/components#navigation Navigation Component Docs}
|
||||
* @see {@link ../NavPop NavPop API Docs}
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[nav-push]',
|
||||
selector: '[navPush]',
|
||||
inputs: [
|
||||
'instruction: navPush',
|
||||
'params: navParams'
|
||||
@@ -69,7 +69,7 @@ export class NavPush {
|
||||
|
||||
if (this.instruction instanceof Array) {
|
||||
if (this.instruction.length > 2) {
|
||||
throw 'Too many [nav-push] arguments, expects [View, { params }]'
|
||||
throw 'Too many [navPush] arguments, expects [View, { params }]'
|
||||
}
|
||||
destination = this.instruction[0];
|
||||
params = this.instruction[1] || this.params;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Directive, ElementRef, DynamicComponentLoader, Attribute} from 'angular2/angular2';
|
||||
import {Directive, ElementRef, DynamicComponentLoader, Attribute} from 'angular2/core';
|
||||
import {
|
||||
RouterOutlet,
|
||||
Router,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {ChangeDetectorRef, Component, Directive, ElementRef, Host, Optional, forwardRef, Inject, NgZone, Compiler, AppViewManager, Renderer, ViewContainerRef} from 'angular2/angular2';
|
||||
import {ChangeDetectorRef, Component, Directive, ElementRef, Host, Optional, forwardRef, Inject, NgZone, Compiler, AppViewManager, Renderer, ViewContainerRef} from 'angular2/core';
|
||||
|
||||
import {IonicApp} from '../app/app';
|
||||
import {Config} from '../../config/config';
|
||||
@@ -103,9 +103,9 @@ import {ViewController} from './view-controller';
|
||||
inputs: [
|
||||
'root'
|
||||
],
|
||||
defaultInputs: {
|
||||
'swipeBackEnabled': true
|
||||
},
|
||||
// defaultInputs: {
|
||||
// 'swipeBackEnabled': true
|
||||
// },
|
||||
template: '<template #contents></template>'
|
||||
})
|
||||
export class Nav extends NavController {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {SlideEdgeGesture} from 'ionic/gestures/slide-edge-gesture';
|
||||
import {SlideEdgeGesture} from '../../gestures/slide-edge-gesture';
|
||||
|
||||
|
||||
export class SwipeBackGesture extends SlideEdgeGesture {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Component} from 'angular2/angular2';
|
||||
import {Component} from 'angular2/core';
|
||||
import {App, NavController} from 'ionic/ionic';
|
||||
import {Page, Config, IonicApp} from 'ionic/ionic';
|
||||
import {NavParams, NavController, ViewController, IONIC_DIRECTIVES} from 'ionic/ionic';
|
||||
@@ -32,16 +32,22 @@ class MyCmpTest{}
|
||||
<button ion-item class="e2eFrom1To2" (click)="pushFullPage()">Push to FullPage</button>
|
||||
<button ion-item (click)="pushPrimaryHeaderPage()">Push to PrimaryHeaderPage</button>
|
||||
<button ion-item (click)="pushAnother()">Push to AnotherPage</button>
|
||||
<button ion-item [nav-push]="[pushPage, {id: 42}]">Push FullPage w/ [nav-push] array</button>
|
||||
<button ion-item [nav-push]="pushPage" [nav-params]="{id:40}">Push w/ [nav-push] and [nav-params]</button>
|
||||
<button ion-item [nav-push]="[\'FirstPage\', {id: 22}]">Push w/ [nav-push] array and string view name</button>
|
||||
<button ion-item nav-push="FirstPage" [nav-params]="{id: 23}">Push w/ nav-push and [nav-params]</button>
|
||||
|
||||
<ion-input>
|
||||
<ion-label>Text Input</ion-label>
|
||||
<textarea></textarea>
|
||||
</ion-input>
|
||||
|
||||
<button ion-item [navPush]="[pushPage, {id: 42}]">Push FullPage w/ [navPush] array</button>
|
||||
<button ion-item [navPush]="pushPage" [navParams]="{id:40}">Push w/ [navPush] and [navParams]</button>
|
||||
<button ion-item [navPush]="[\'FirstPage\', {id: 22}]">Push w/ [navPush] array and string view name</button>
|
||||
<button ion-item [navPush]="FirstPage" [navParams]="{id: 23}">Push w/ [navPush] and [navParams]</button>
|
||||
<button ion-item (click)="setPages()">setPages() (Go to PrimaryHeaderPage)</button>
|
||||
<button ion-item (click)="setRoot()">setRoot(PrimaryHeaderPage) (Go to PrimaryHeaderPage)</button>
|
||||
<button ion-item (click)="nav.pop()">Pop</button>
|
||||
<button ion-item (click)="reload()">Reload</button>
|
||||
|
||||
<button *ng-for="#i of pages" ion-item (click)="pushPrimaryHeaderPage()">Page {{i}}</button>
|
||||
<button *ngFor="#i of pages" ion-item (click)="pushPrimaryHeaderPage()">Page {{i}}</button>
|
||||
</ion-list>
|
||||
<my-cmp></my-cmp>
|
||||
</ion-content>`,
|
||||
@@ -195,18 +201,26 @@ class PrimaryHeaderPage {
|
||||
|
||||
@Page({
|
||||
template: `
|
||||
<ion-navbar *navbar hide-back-button>
|
||||
<ion-navbar *navbar hideBackButton>
|
||||
<ion-title>Another Page Header</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>
|
||||
<p>Back button hidden w/ <code>ion-navbar hide-back-button</code></p>
|
||||
<p><button (click)="nav.pop()">Pop</button></p>
|
||||
<p><button (click)="pushFullPage()">Push to FullPage</button></p>
|
||||
<p><button (click)="pushPrimaryHeaderPage()">Push to PrimaryHeaderPage</button></p>
|
||||
<p><button (click)="pushFirstPage()">Push to FirstPage</button></p>
|
||||
<p><button (click)="setRoot()">setRoot(FirstPage)</button></p>
|
||||
<p><button (click)="toggleBackButton()">Toggle hide-back-button</button></p>
|
||||
<p><button (click)="setBackButtonText()">Set Back Button Text</button></p>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
|
||||
<ion-input>
|
||||
<ion-label>Text Input</ion-label>
|
||||
<textarea></textarea>
|
||||
</ion-input>
|
||||
|
||||
<ion-item>Back button hidden w/ <code>ion-navbar hideBackButton</code></ion-item>
|
||||
<button ion-item (click)="nav.pop()">Pop</button>
|
||||
<button ion-item (click)="pushFullPage()">Push to FullPage</button>
|
||||
<button ion-item (click)="pushPrimaryHeaderPage()">Push to PrimaryHeaderPage</button>
|
||||
<button ion-item (click)="pushFirstPage()">Push to FirstPage</button>
|
||||
<button ion-item (click)="setRoot()">setRoot(FirstPage)</button>
|
||||
<button ion-item (click)="toggleBackButton()">Toggle hideBackButton</button>
|
||||
<button ion-item (click)="setBackButtonText()">Set Back Button Text</button>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
`
|
||||
})
|
||||
|
||||
@@ -75,7 +75,7 @@ export class Account {
|
||||
@Page({
|
||||
template: `
|
||||
<ion-navbar *navbar primary>
|
||||
<button menu-toggle>
|
||||
<button menuToggle>
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
<ion-title>Account Dashboard</ion-title>
|
||||
@@ -106,7 +106,7 @@ export class Dashboard {
|
||||
@Page({
|
||||
template: `
|
||||
<ion-navbar *navbar danger>
|
||||
<button menu-toggle>
|
||||
<button menuToggle>
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
<ion-title>Account Profile</ion-title>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
<button menu-toggle>
|
||||
<button menuToggle>
|
||||
<icon menu></icon>
|
||||
</button>
|
||||
<ion-title>First View</ion-title>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Component, Directive, Optional, ElementRef, Renderer, TemplateRef, forwardRef, Inject, ViewContainerRef} from 'angular2/angular2';
|
||||
import {Component, Directive, Optional, ElementRef, Renderer, TemplateRef, forwardRef, Inject, ViewContainerRef} from 'angular2/core';
|
||||
|
||||
import {Ion} from '../ion';
|
||||
import {Icon} from '../icon/icon';
|
||||
@@ -74,7 +74,7 @@ class ToolbarBackground {
|
||||
'<span class="back-default">{{bbText}}</span>' +
|
||||
'</span>' +
|
||||
'</button>' +
|
||||
'<ng-content select="[menu-toggle],ion-buttons[left]"></ng-content>' +
|
||||
'<ng-content select="[menuToggle],ion-buttons[left]"></ng-content>' +
|
||||
'<ng-content select="ion-buttons[start]"></ng-content>' +
|
||||
'<ng-content select="ion-buttons[end],ion-buttons[right]"></ng-content>' +
|
||||
'<div class="toolbar-content">' +
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import {Animation} from '../../animations/animation';
|
||||
import {extend} from 'ionic/util';
|
||||
import {extend} from '../../util';
|
||||
|
||||
|
||||
/**
|
||||
@@ -43,7 +43,9 @@ export class OverlayController {
|
||||
} else {
|
||||
reject();
|
||||
}
|
||||
})
|
||||
}, rejectReason => {
|
||||
console.error(rejectReason);
|
||||
});
|
||||
|
||||
return promise;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {ChangeDetectorRef, Component, ElementRef, Compiler, AppViewManager, NgZone, Renderer} from 'angular2/angular2';
|
||||
import {ChangeDetectorRef, Component, ElementRef, Compiler, AppViewManager, NgZone, Renderer} from 'angular2/core';
|
||||
|
||||
import {IonicApp} from '../app/app';
|
||||
import {Config} from '../../config/config';
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import {FORM_DIRECTIVES, NgControl, NgControlGroup,
|
||||
Component, ElementRef, Injectable, NgClass, NgIf, NgFor, Renderer} from 'angular2/angular2';
|
||||
import {Component, ElementRef, Injectable, Renderer} from 'angular2/core';
|
||||
import {NgClass, NgIf, NgFor, FORM_DIRECTIVES} from 'angular2/common';
|
||||
|
||||
import {OverlayController} from '../overlay/overlay-controller';
|
||||
import {Config} from '../../config/config';
|
||||
@@ -274,15 +274,15 @@ const OVERLAY_TYPE = 'popup';
|
||||
'<div (click)="cancel($event)" tappable disable-activated class="backdrop"></div>' +
|
||||
'<div class="popup-wrapper">' +
|
||||
'<div class="popup-head">' +
|
||||
'<h2 class="popup-title" [inner-html]="d.title" *ng-if="d.title"></h2>' +
|
||||
'<h3 class="popup-sub-title" [inner-html]="d.subTitle" *ng-if="d.subTitle"></h3>' +
|
||||
'<h2 class="popup-title" [innerHTML]="d.title" *ngIf="d.title"></h2>' +
|
||||
'<h3 class="popup-sub-title" [innerHTML]="d.subTitle" *ngIf="d.subTitle"></h3>' +
|
||||
'</div>' +
|
||||
'<div class="popup-body">' +
|
||||
'<div [inner-html]="d.template" *ng-if="d.template"></div>' +
|
||||
'<input type="{{d.inputType || \'text\'}}" placeholder="{{d.inputPlaceholder}}" *ng-if="d.showPrompt" class="prompt-input">' +
|
||||
'<div [innerHTML]="d.template" *ngIf="d.template"></div>' +
|
||||
'<input type="{{d.inputType || \'text\'}}" placeholder="{{d.inputPlaceholder}}" *ngIf="d.showPrompt" class="prompt-input">' +
|
||||
'</div>' +
|
||||
'<div class="popup-buttons" *ng-if="d.buttons.length">' +
|
||||
'<button clear *ng-for="#btn of d.buttons" (click)="buttonTapped(btn, $event)" [inner-html]="btn.text" class="popup-button"></button>' +
|
||||
'<div class="popup-buttons" *ngIf="d.buttons.length">' +
|
||||
'<button clear *ngFor="#btn of d.buttons" (click)="buttonTapped(btn, $event)" [innerHTML]="btn.text" class="popup-button"></button>' +
|
||||
'</div>' +
|
||||
'</div>',
|
||||
host: {
|
||||
|
||||
@@ -1,8 +1,10 @@
|
||||
import {Component, Directive, ElementRef, Host, Optional, NgControl, Query, QueryList} from 'angular2/angular2';
|
||||
import {Component, Directive, ElementRef, Host, Optional, Query, QueryList} from 'angular2/core';
|
||||
import {NgControl} from 'angular2/common';
|
||||
|
||||
import {Config} from '../../config/config';
|
||||
import {Ion} from '../ion';
|
||||
import {ListHeader} from '../list/list';
|
||||
import {Form} from '../../util/form';
|
||||
|
||||
|
||||
/**
|
||||
@@ -16,7 +18,7 @@ import {ListHeader} from '../list/list';
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-list radio-group ng-control="clientside">
|
||||
* <ion-list radio-group ngControl="clientside">
|
||||
*
|
||||
* <ion-list-header>
|
||||
* Clientside
|
||||
@@ -200,7 +202,8 @@ export class RadioButton extends Ion {
|
||||
constructor(
|
||||
@Host() @Optional() group: RadioGroup,
|
||||
elementRef: ElementRef,
|
||||
config: Config
|
||||
config: Config,
|
||||
private form: Form
|
||||
) {
|
||||
super(elementRef, config);
|
||||
|
||||
@@ -213,16 +216,24 @@ export class RadioButton extends Ion {
|
||||
*/
|
||||
ngOnInit() {
|
||||
super.ngOnInit();
|
||||
this.group.registerRadio(this);
|
||||
this.labelId = 'label-' + this.id;
|
||||
if (!this.id) {
|
||||
this.id = 'rb-' + this.form.nextId();
|
||||
}
|
||||
this.labelId = 'lbl-' + this.id;
|
||||
|
||||
if (this.group) {
|
||||
this.group.registerRadio(this);
|
||||
} else {
|
||||
console.error('<ion-radio> must be within a <ion-list radio-group>');
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
click(event) {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
click(ev) {
|
||||
ev.preventDefault();
|
||||
ev.stopPropagation();
|
||||
this.check();
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
NgControlName,
|
||||
NgFormModel,
|
||||
FormBuilder
|
||||
} from 'angular2/angular2';
|
||||
} from 'angular2/common';
|
||||
|
||||
|
||||
@App({
|
||||
|
||||
@@ -4,9 +4,9 @@
|
||||
|
||||
<ion-content>
|
||||
|
||||
<form (submit)="doSubmit($event)" [ng-form-model]="fruitsForm">
|
||||
<form (submit)="doSubmit($event)" [ngFormModel]="fruitsForm">
|
||||
|
||||
<ion-list radio-group ng-control="fruits">
|
||||
<ion-list radio-group ngControl="fruits">
|
||||
|
||||
<ion-list-header>
|
||||
Fruits
|
||||
@@ -43,12 +43,12 @@
|
||||
<code><b>fruits.value:</b> {{fruitsForm.controls.fruits.value}}</code><br>
|
||||
</div>
|
||||
|
||||
<form (submit)="doSubmit($event)" [ng-form-model]="currencyForm">
|
||||
<ion-list radio-group ng-control="currenciesControl">
|
||||
<form (submit)="doSubmit($event)" [ngFormModel]="currencyForm">
|
||||
<ion-list radio-group ngControl="currenciesControl">
|
||||
<ion-list-header>
|
||||
Currencies
|
||||
</ion-list-header>
|
||||
<ion-radio *ng-for="#currency of currencies" [checked]="currency==selectedCurrency" [value]="currency">{{currency}}</ion-radio>
|
||||
<ion-radio *ngFor="#currency of currencies" [checked]="currency==selectedCurrency" [value]="currency">{{currency}}</ion-radio>
|
||||
</ion-list>
|
||||
</form>
|
||||
|
||||
@@ -56,7 +56,7 @@
|
||||
<code><b>currenciesControl.value:</b> {{currencyForm.controls.currenciesControl.value}}</code>
|
||||
</div>
|
||||
|
||||
<ion-list radio-group [(ng-model)]="relationship">
|
||||
<ion-list radio-group [(ngModel)]="relationship">
|
||||
<ion-radio value="friends">Friends</ion-radio>
|
||||
<ion-radio value="enemies">Enemies</ion-radio>
|
||||
</ion-list>
|
||||
|
||||
@@ -1,40 +1,62 @@
|
||||
import {Component, NgIf, NgClass, ElementRef, EventEmitter, Host} from 'angular2/angular2'
|
||||
import {Component, ElementRef, EventEmitter, Host} from 'angular2/core'
|
||||
import {NgIf, NgClass} from 'angular2/common';
|
||||
|
||||
import {Content} from '../content/content';
|
||||
import * as util from 'ionic/util';
|
||||
import {raf, ready, CSS} from 'ionic/util/dom';
|
||||
import * as util from '../../util';
|
||||
import {raf, ready, CSS} from '../../util/dom';
|
||||
|
||||
|
||||
/**
|
||||
* @name Refresher
|
||||
* @description
|
||||
* Allows you to add pull-to-refresh to an Content component.
|
||||
*
|
||||
* Place it as the first child of your Content or Scroll element.
|
||||
*
|
||||
* When refreshing is complete, call `refresher.complete()` from your controller.
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-content>
|
||||
* <ion-refresher (starting)="doStarting()"
|
||||
* (refresh)="doRefresh($event, refresher)"
|
||||
* (pulling)="doPulling($event, amt)">
|
||||
* </ion-refresher>
|
||||
*
|
||||
* </ion-content>
|
||||
|
||||
* ```
|
||||
*
|
||||
* ```ts
|
||||
* <ion-refresher (starting)="doStarting()" (refresh)="doRefresh($event, refresher)" (pulling)="doPulling($event, amt)">
|
||||
* export class MyClass {
|
||||
* constructor(){}
|
||||
* doRefresh(refresher) {
|
||||
* console.log('Refreshing!', refresher);
|
||||
*
|
||||
* setTimeout(() => {
|
||||
* console.log('Pull to refresh complete!', refresher);
|
||||
* refresher.complete();
|
||||
* })
|
||||
* }
|
||||
*
|
||||
* doRefresh(refresher) {
|
||||
* console.log('Refreshing!', refresher);
|
||||
* doStarting() {
|
||||
* console.log('Pull started!');
|
||||
* }
|
||||
*
|
||||
* setTimeout(() => {
|
||||
* console.log('Pull to refresh complete!', refresher);
|
||||
* refresher.complete();
|
||||
* })
|
||||
* }
|
||||
*
|
||||
* doStarting() {
|
||||
* console.log('Pull started!');
|
||||
* }
|
||||
*
|
||||
* doPulling(amt) {
|
||||
* console.log('You have pulled', amt);
|
||||
* doPulling(amt) {
|
||||
* console.log('You have pulled', amt);
|
||||
* }
|
||||
* }
|
||||
* ```
|
||||
* @demo /docs/v2/demos/refresher/
|
||||
* @demo /docs/v2/demos/refresher/
|
||||
*
|
||||
* @property {string} [pullingIcon] - the icon you want to display when you begin to pull down
|
||||
* @property {string} [pullingText] - the text you want to display when you begin to pull down
|
||||
* @property {string} [refreshingIcon] - the icon you want to display when performing a refresh
|
||||
* @property {string} [refreshingText] - the text you want to display when performing a refresh
|
||||
*
|
||||
* @property {any} (refresh) - the methond on your class you want to perform when you refreshing
|
||||
* @property {any} (starting) - the methond on your class you want to perform when you start pulling down
|
||||
* @property {any} (pulling) - the methond on your class you want to perform when you are pulling down
|
||||
*
|
||||
*/
|
||||
@Component({
|
||||
@@ -56,19 +78,19 @@ import {raf, ready, CSS} from 'ionic/util/dom';
|
||||
template:
|
||||
'<div class="refresher-content" [class.refresher-with-text]="pullingText || refreshingText">' +
|
||||
'<div class="icon-pulling">' +
|
||||
'<i class="icon" [ng-class]="pullingIcon"></i>' +
|
||||
'<i class="icon" [ngClass]="pullingIcon"></i>' +
|
||||
'</div>' +
|
||||
'<div class="text-pulling" [inner-html]="pullingText" *ng-if="pullingText"></div>' +
|
||||
'<div class="text-pulling" [innerHTML]="pullingText" *ngIf="pullingText"></div>' +
|
||||
'<div class="icon-refreshing">' +
|
||||
'<i class="icon" [ng-class]="refreshingIcon"></i>' +
|
||||
'<i class="icon" [ngClass]="refreshingIcon"></i>' +
|
||||
'</div>' +
|
||||
'<div class="text-refreshing" [inner-html]="refreshingText" *ng-if="refreshingText"></div>' +
|
||||
'<div class="text-refreshing" [innerHTML]="refreshingText" *ngIf="refreshingText"></div>' +
|
||||
'</div>',
|
||||
directives: [NgIf, NgClass]
|
||||
})
|
||||
export class Refresher {
|
||||
/**
|
||||
* TODO
|
||||
* @private
|
||||
* @param {Content} content TODO
|
||||
* @param {ElementRef} elementRef TODO
|
||||
*/
|
||||
@@ -86,11 +108,15 @@ export class Refresher {
|
||||
this.pulling = new EventEmitter('pulling');
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
ngOnInit() {
|
||||
this.initEvents();
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Initialize touch and scroll event listeners.
|
||||
*/
|
||||
initEvents() {
|
||||
@@ -129,6 +155,9 @@ export class Refresher {
|
||||
sc.addEventListener('scroll', this._handleScrollListener);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
onDehydrate() {
|
||||
console.log('DEHYDRATION');
|
||||
let sc = this.content.scrollElement;
|
||||
@@ -138,7 +167,7 @@ export class Refresher {
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @private
|
||||
* @param {TODO} val TODO
|
||||
*/
|
||||
overscroll(val) {
|
||||
@@ -147,7 +176,7 @@ export class Refresher {
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @private
|
||||
* @param {TODO} target TODO
|
||||
* @param {TODO} newScrollTop TODO
|
||||
*/
|
||||
@@ -161,7 +190,7 @@ export class Refresher {
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @private
|
||||
* @param {TODO} enabled TODO
|
||||
*/
|
||||
setScrollLock(enabled) {
|
||||
@@ -183,7 +212,7 @@ export class Refresher {
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @private
|
||||
*/
|
||||
activate() {
|
||||
//this.ele.classList.add('active');
|
||||
@@ -192,7 +221,7 @@ export class Refresher {
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @private
|
||||
*/
|
||||
deactivate() {
|
||||
// give tail 150ms to finish
|
||||
@@ -205,6 +234,9 @@ export class Refresher {
|
||||
}, 150);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
start() {
|
||||
// startCallback
|
||||
this.isRefreshing = true;
|
||||
@@ -213,7 +245,7 @@ export class Refresher {
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @private
|
||||
*/
|
||||
show() {
|
||||
// showCallback
|
||||
@@ -221,7 +253,7 @@ export class Refresher {
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @private
|
||||
*/
|
||||
hide() {
|
||||
// showCallback
|
||||
@@ -229,7 +261,7 @@ export class Refresher {
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @private
|
||||
*/
|
||||
tail() {
|
||||
// tailCallback
|
||||
@@ -237,7 +269,7 @@ export class Refresher {
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @private
|
||||
*/
|
||||
complete() {
|
||||
setTimeout(() => {
|
||||
@@ -258,7 +290,7 @@ export class Refresher {
|
||||
}
|
||||
|
||||
/**
|
||||
* TODO
|
||||
* @private
|
||||
* @param {TODO} Y TODO
|
||||
* @param {TODO} duration TODO
|
||||
* @param {Function} callback TODO
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {Component, ElementRef, onInit} from 'angular2/angular2';
|
||||
import {Component, ElementRef, onInit} from 'angular2/core';
|
||||
|
||||
import {Ion} from '../ion';
|
||||
import {Config} from '../../config/config';
|
||||
@@ -6,7 +6,7 @@ import {Gesture} from '../../gestures/gesture';
|
||||
import {CSS} from '../../util/dom';
|
||||
import {Animation} from '../../animations/animation';
|
||||
|
||||
import * as util from 'ionic/util';
|
||||
import * as util from '../../util';
|
||||
|
||||
/**
|
||||
* @name Scroll
|
||||
|
||||
@@ -32,6 +32,7 @@ $searchbar-ios-input-clear-icon-size: 18px !default;
|
||||
ion-searchbar {
|
||||
padding: $searchbar-ios-padding-top-bottom $searchbar-ios-padding-left-right;
|
||||
background: $searchbar-ios-background-color;
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid $searchbar-ios-border-color;
|
||||
min-height: $searchbar-ios-min-height;
|
||||
}
|
||||
@@ -103,6 +104,7 @@ ion-searchbar {
|
||||
min-height: 30px;
|
||||
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
padding: 0;
|
||||
|
||||
visibility: hidden;
|
||||
@@ -121,6 +123,12 @@ ion-searchbar {
|
||||
.searchbar-input {
|
||||
padding-left: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
// Searchbar Focused
|
||||
// -----------------------------------------
|
||||
|
||||
.searchbar-focused {
|
||||
.searchbar-ios-cancel {
|
||||
transform: translateX(0);
|
||||
flex: 0 0 auto;
|
||||
@@ -129,7 +137,6 @@ ion-searchbar {
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Searchbar in Toolbar
|
||||
// -----------------------------------------
|
||||
|
||||
@@ -148,7 +155,7 @@ ion-searchbar {
|
||||
}
|
||||
}
|
||||
|
||||
.searchbar-left-aligned .searchbar-ios-cancel {
|
||||
.searchbar-focused .searchbar-ios-cancel {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import {ElementRef, Pipe, NgControl, Renderer, FORM_DIRECTIVES, NgIf, NgClass} from 'angular2/angular2';
|
||||
import {ElementRef, Renderer, Directive, Host, forwardRef, ViewChild, Output, EventEmitter} from 'angular2/core';
|
||||
import {NgIf, NgClass, NgControl, FORM_DIRECTIVES} from 'angular2/common';
|
||||
|
||||
import {Ion} from '../ion';
|
||||
import {Config} from '../../config/config';
|
||||
@@ -10,48 +11,49 @@ import {Button} from '../button/button';
|
||||
* @name Searchbar
|
||||
* @module ionic
|
||||
* @description
|
||||
* Manages the display of a search bar which can be used to search or filter items.
|
||||
* Manages the display of a Searchbar which can be used to search or filter items.
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-searchbar [(ng-model)]="defaultSearch"></ion-searchbar>
|
||||
* <ion-searchbar [(ngModel)]="defaultSearch"></ion-searchbar>
|
||||
* ```
|
||||
*
|
||||
* @property [placeholder] - sets input placeholder to value passed in
|
||||
* @property [show-cancel] - shows the cancel button based on boolean value passed in
|
||||
* @property [cancel-text] - sets the cancel button text to the value passed in
|
||||
* @property [cancel-action] - the function that gets called by clicking the cancel button
|
||||
* @property {function} [cancelButtonAction] - the function that gets called by clicking the cancel button
|
||||
* @property {string} [cancelButtonText=Cancel] - sets the cancel button text to the value passed in
|
||||
* @property {boolean} [hideCancelButton=false] - Hides the cancel button
|
||||
* @property {string} [placeholder=Search] - Sets input placeholder to the value passed in
|
||||
*
|
||||
* @see {@link /docs/v2/components#search Search Component Docs}
|
||||
*/
|
||||
@ConfigComponent({
|
||||
selector: 'ion-searchbar',
|
||||
defaultInputs: {
|
||||
'showCancel': false,
|
||||
'cancelText': 'Cancel',
|
||||
'placeholder': 'Search'
|
||||
},
|
||||
inputs: ['cancelAction'],
|
||||
inputs: [
|
||||
'cancelButtonAction',
|
||||
'cancelButtonText',
|
||||
'hideCancelButton',
|
||||
'placeholder'
|
||||
],
|
||||
outputs: ['input'],
|
||||
host: {
|
||||
'[class.searchbar-left-aligned]': 'shouldLeftAlign',
|
||||
'[class.searchbar-focused]': 'isFocused',
|
||||
},
|
||||
template:
|
||||
'<div class="searchbar-input-container">' +
|
||||
'<button (click)="cancelSearchbar($event, query)" clear dark class="searchbar-md-cancel"><icon arrow-back></icon></button>' +
|
||||
'<button (click)="cancelSearchbar($event, query)" (mousedown)="cancelSearchbar($event, query)" clear dark class="searchbar-md-cancel">' +
|
||||
'<icon arrow-back></icon>' +
|
||||
'</button>' +
|
||||
'<div class="searchbar-search-icon"></div>' +
|
||||
'<input [(value)]="query" (focus)="inputFocused()" (blur)="inputBlurred()" ' +
|
||||
'(input)="inputChanged($event)" class="searchbar-input" type="search" [attr.placeholder]="placeholder">' +
|
||||
'<button clear *ng-if="query" class="searchbar-clear-icon" (click)="clearInput($event)"></button>' +
|
||||
'<input [value]="query" (blur)="inputBlurred($event)" (focus)="inputFocused()" class="searchbar-input" type="search" [attr.placeholder]="placeholder">' +
|
||||
'<button clear *ngIf="query" class="searchbar-clear-icon" (click)="clearInput()" (mousedown)="clearInput()"></button>' +
|
||||
'</div>' +
|
||||
'<button clear *ng-if="showCancel" (click)="cancelSearchbar($event, query)" class="searchbar-ios-cancel">{{cancelText}}</button>',
|
||||
directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button]
|
||||
'<button clear (click)="cancelSearchbar($event)" (mousedown)="cancelSearchbar($event)" [hidden]="hideCancelButton" class="searchbar-ios-cancel">{{cancelButtonText}}</button>',
|
||||
directives: [FORM_DIRECTIVES, NgIf, NgClass, Icon, Button, forwardRef(() => SearchbarInput)]
|
||||
})
|
||||
export class Searchbar extends Ion {
|
||||
/**
|
||||
* @private
|
||||
* This holds the searchbar input value used for querying
|
||||
*/
|
||||
@ViewChild(forwardRef(() => SearchbarInput)) searchbarInput;
|
||||
query: string;
|
||||
blurInput = true;
|
||||
|
||||
constructor(
|
||||
elementRef: ElementRef,
|
||||
@@ -63,22 +65,124 @@ export class Searchbar extends Ion {
|
||||
this.renderer = renderer;
|
||||
this.elementRef = elementRef;
|
||||
|
||||
this.input = new EventEmitter('input');
|
||||
|
||||
// If there is no control then we shouldn't do anything
|
||||
if (!ngControl) return;
|
||||
|
||||
this.ngControl = ngControl;
|
||||
this.ngControl.valueAccessor = this;
|
||||
|
||||
this.query = '';
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* After the view has initialized check if the searchbar has a value
|
||||
* and then store that value in query
|
||||
* On Initialization check for attributes
|
||||
*/
|
||||
ngOnInit() {
|
||||
let hideCancelButton = this.hideCancelButton;
|
||||
if (typeof hideCancelButton === 'string') {
|
||||
this.hideCancelButton = (hideCancelButton === '' || hideCancelButton === 'true');
|
||||
}
|
||||
|
||||
this.cancelButtonText = this.cancelButtonText || 'Cancel';
|
||||
this.placeholder = this.placeholder || 'Search';
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* After the view has initialized check if the Searchbar has a value
|
||||
*/
|
||||
ngAfterViewInit() {
|
||||
// If the user passes in a value to the model we should left align
|
||||
this.shouldLeftAlign = this.ngControl.value && this.ngControl.value.trim() != '';
|
||||
this.query = this.ngControl.value || '';
|
||||
this.shouldLeftAlign = this.searchbarInput.value && this.searchbarInput.value.trim() != '';
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Sets the Searchbar to focused and aligned left on input focus.
|
||||
*/
|
||||
inputFocused() {
|
||||
this.isFocused = true;
|
||||
this.shouldLeftAlign = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Sets the Searchbar to not focused and checks if it should align left
|
||||
* based on whether there is a value in the searchbar or not.
|
||||
*/
|
||||
inputBlurred() {
|
||||
// blurInput determines if it should blur
|
||||
// if we are clearing the input we still want to stay focused in the input
|
||||
if (this.blurInput == false) {
|
||||
this.searchbarInput.elementRef.nativeElement.focus();
|
||||
this.blurInput = true;
|
||||
return;
|
||||
}
|
||||
//console.log("Blurring input");
|
||||
this.isFocused = false;
|
||||
this.shouldLeftAlign = this.searchbarInput.value && this.searchbarInput.value.trim() != '';
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Clears the input field and triggers the control change.
|
||||
*/
|
||||
clearInput() {
|
||||
//console.log("Clearing input");
|
||||
this.searchbarInput.writeValue('');
|
||||
this.searchbarInput.onChange('');
|
||||
this.blurInput = false;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Clears the input field and tells the input to blur since
|
||||
* the clearInput function doesn't want the input to blur
|
||||
* then calls the custom cancel function if the user passed one in.
|
||||
*/
|
||||
cancelSearchbar(event, value) {
|
||||
//console.log("Cancel searchbar");
|
||||
this.clearInput();
|
||||
this.blurInput = true;
|
||||
|
||||
this.cancelButtonAction && this.cancelButtonAction(event, value);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Updates the value of query
|
||||
*/
|
||||
updateQuery(value) {
|
||||
this.query = value;
|
||||
this.input.next(value);
|
||||
}
|
||||
}
|
||||
|
||||
@Directive({
|
||||
selector: '.searchbar-input',
|
||||
host: {
|
||||
'(keyup)': 'inputChanged($event)'
|
||||
}
|
||||
})
|
||||
export class SearchbarInput {
|
||||
constructor(
|
||||
@Host() searchbar: Searchbar,
|
||||
elementRef: ElementRef,
|
||||
renderer: Renderer
|
||||
) {
|
||||
this.searchbar = searchbar;
|
||||
this.renderer = renderer;
|
||||
this.elementRef = elementRef;
|
||||
|
||||
if (!searchbar.ngControl) return;
|
||||
|
||||
this.onChange = (_) => {};
|
||||
this.onTouched = (_) => {};
|
||||
|
||||
this.ngControl = searchbar.ngControl;
|
||||
this.ngControl.valueAccessor = this;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -86,7 +190,10 @@ export class Searchbar extends Ion {
|
||||
* Write a new value to the element.
|
||||
*/
|
||||
writeValue(value) {
|
||||
this.query = value;
|
||||
this.value = value;
|
||||
if (typeof value === 'string') {
|
||||
this.searchbar.updateQuery(value);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -107,52 +214,11 @@ export class Searchbar extends Ion {
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Updates the value of the control when the searchbar input changes.
|
||||
* Update the Searchbar input value when the input changes
|
||||
*/
|
||||
inputChanged(event) {
|
||||
this.writeValue(event.target.value);
|
||||
this.onChange(event.target.value);
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Sets the searchbar to focused and aligned left on input focus.
|
||||
*/
|
||||
inputFocused() {
|
||||
this.isFocused = true;
|
||||
this.shouldLeftAlign = true;
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Sets the searchbar to not focused and checks if it should align left
|
||||
* based on whether there is a value in the searchbar or not on input blur.
|
||||
*/
|
||||
inputBlurred() {
|
||||
this.isFocused = false;
|
||||
this.shouldLeftAlign = this.ngControl.value && this.ngControl.value.trim() != '';
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Clears the input field and triggers the control change.
|
||||
*/
|
||||
clearInput(event) {
|
||||
this.writeValue('');
|
||||
this.onChange('');
|
||||
}
|
||||
|
||||
/**
|
||||
* @private
|
||||
* Blurs the input field, clears the input field and removes the left align
|
||||
* then calls the custom cancel function if the user passed one in.
|
||||
*/
|
||||
cancelSearchbar(event, query) {
|
||||
this.element = this.elementRef.nativeElement.querySelector('input');
|
||||
this.element.blur();
|
||||
this.clearInput();
|
||||
this.shouldLeftAlign = false;
|
||||
|
||||
this.cancelAction && this.cancelAction(event, query);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,47 +0,0 @@
|
||||
import {NgControl, FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2';
|
||||
|
||||
import {App} from 'ionic/ionic';
|
||||
import {SearchPipe} from 'ionic/components/searchbar/searchbar';
|
||||
|
||||
|
||||
function randomTitle() {
|
||||
var items = ['Soylent', 'Pizza', 'Pumpkin', 'Apple', 'Bologna', 'Turkey', 'Kabob', 'Salad', 'Fruit bowl', 'Fish Tacos', 'Chimichongas', 'Meatloaf'];
|
||||
return items[Math.floor(Math.random() * items.length)];
|
||||
}
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html',
|
||||
providers: [NgControl],
|
||||
directives: [FORM_DIRECTIVES]
|
||||
})
|
||||
class E2EApp {
|
||||
constructor() {
|
||||
var fb = new FormBuilder();
|
||||
this.searchQuery = '';
|
||||
|
||||
this.items = []
|
||||
for(let i = 0; i < 100; i++) {
|
||||
this.items.push({
|
||||
title: randomTitle()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
doThis() {
|
||||
console.log('Doing this');
|
||||
}
|
||||
|
||||
getItems() {
|
||||
var q = this.searchQuery;
|
||||
console.log('Its changing');
|
||||
if(q.trim() == '') {
|
||||
return this.items;
|
||||
}
|
||||
return this.items.filter((v) => {
|
||||
if(v.title.toLowerCase().indexOf(q.toLowerCase()) >= 0) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
|
||||
<!-- <ion-view nav-title="Search Bar"> -->
|
||||
|
||||
<ion-content>
|
||||
<!-- <form [ng-form-model]="form"> -->
|
||||
|
||||
<ion-searchbar [(ng-model)]="searchQuery"></ion-searchbar>
|
||||
<ion-list inset #list>
|
||||
<ion-item-sliding *ng-for="#item of getItems()" (click)="doThis">
|
||||
{{item.title}}
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
<!-- </form> -->
|
||||
</ion-content>
|
||||
|
||||
<!-- </ion-view> -->
|
||||
@@ -1,4 +1,4 @@
|
||||
import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2';
|
||||
import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/common';
|
||||
|
||||
import {App} from 'ionic/ionic';
|
||||
import {SearchPipe} from 'ionic/components/searchbar/searchbar';
|
||||
@@ -8,7 +8,7 @@ import {SearchPipe} from 'ionic/components/searchbar/searchbar';
|
||||
directives: [FORM_DIRECTIVES]
|
||||
})
|
||||
class E2EApp {
|
||||
defaultSearch: string;
|
||||
defaultSearch: string = 'filter';
|
||||
customPlaceholder: string;
|
||||
defaultCancel: string;
|
||||
customCancel: string;
|
||||
@@ -25,11 +25,11 @@ class E2EApp {
|
||||
this.clickedCustomAction = true;
|
||||
}
|
||||
|
||||
triggerInput() {
|
||||
triggerInput(ev) {
|
||||
// The defaultSearch doesn't get updated before this function is called
|
||||
// so we have to wrap it in a timeout
|
||||
setTimeout(() => {
|
||||
console.log(this.defaultSearch);
|
||||
console.log("Triggered input", this.defaultSearch);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,20 +1,24 @@
|
||||
<ion-content>
|
||||
<h5 padding-left padding-top> Search - Default </h5>
|
||||
<ion-searchbar [(ng-model)]="defaultSearch" (input)="triggerInput()" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
|
||||
<ion-searchbar [(ngModel)]="defaultSearch" (input)="triggerInput($event)" class="e2eDefaultFloatingSearchbar"></ion-searchbar>
|
||||
|
||||
<p padding-left>
|
||||
Default Search: <b>{{ defaultSearch }}</b>
|
||||
</p>
|
||||
|
||||
<h5 padding-left> Search - Custom Placeholder </h5>
|
||||
<ion-searchbar [(ng-model)]="customPlaceholder" placeholder="Filter Schedules" class="e2eCustomPlaceholderFloatingSearchbar"></ion-searchbar>
|
||||
<ion-searchbar [(ngModel)]="customPlaceholder" placeholder="Filter Schedules" class="e2eCustomPlaceholderFloatingSearchbar"></ion-searchbar>
|
||||
|
||||
<h5 padding-left> Search - Default Cancel Button </h5>
|
||||
<ion-searchbar [(ng-model)]="defaultCancel" show-cancel="true" class="e2eDefaultCancelButtonFloatingSearchbar"></ion-searchbar>
|
||||
<h5 padding-left> Search - Hide Cancel Button </h5>
|
||||
<ion-searchbar [(ngModel)]="defaultCancel" hideCancelButton class="e2eDefaultCancelButtonFloatingSearchbar"></ion-searchbar>
|
||||
|
||||
<h5 padding-left> Search - Custom Cancel Button Danger </h5>
|
||||
<ion-searchbar [(ng-model)]="customCancel" show-cancel="true" cancel-text="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
|
||||
<ion-searchbar [(ngModel)]="customCancel" cancelButtonText="Really Long Cancel" class="e2eCustomCancelButtonFloatingSearchbar" danger></ion-searchbar>
|
||||
|
||||
<h5 padding-left> Search - Custom Cancel Action</h5>
|
||||
<ion-searchbar [(ng-model)]="customCancelAction" show-cancel="true" cancel-text="Done" [cancel-action]="myCancelAction" class="e2eCustomCancelActionFloatingSearchbar"></ion-searchbar>
|
||||
<ion-searchbar [(ngModel)]="customCancelAction" cancelButtonText="Done" [cancelAction]="myCancelAction" class="e2eCustomCancelActionFloatingSearchbar"></ion-searchbar>
|
||||
|
||||
<div *ng-if="clickedCustomAction">
|
||||
<div *ngIf="clickedCustomAction">
|
||||
Clicked custom action with input = {{customCancelAction}}
|
||||
</div>
|
||||
</ion-content>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {NgControl, FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2';
|
||||
import {NgControl, FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/common';
|
||||
|
||||
import {App} from 'ionic/ionic';
|
||||
import {SearchPipe} from 'ionic/components/searchbar/searchbar';
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
<!-- <ion-view nav-title="Search Bar"> -->
|
||||
|
||||
<ion-content>
|
||||
<!-- <form [ng-form-model]="form"> -->
|
||||
<!-- <form [ngFormModel]="form"> -->
|
||||
|
||||
<ion-searchbar [(ng-model)]="searchQuery"></ion-searchbar>
|
||||
<ion-searchbar [(ngModel)]="searchQuery"></ion-searchbar>
|
||||
<ion-list inset #list>
|
||||
<ion-item *ng-for="#item of getItems()">
|
||||
<ion-item *ngFor="#item of getItems()">
|
||||
{{item.title}}
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
@@ -5,22 +5,22 @@
|
||||
<ion-content>
|
||||
<h5 padding-left padding-top> Search - Default Toolbar </h5>
|
||||
<ion-toolbar>
|
||||
<ion-searchbar [(ng-model)]="defaultToolbarSearch" show-cancel="true" class="e2eDefaultToolbarSearchbar"></ion-searchbar>
|
||||
<ion-searchbar [(ngModel)]="defaultToolbarSearch" class="e2eDefaultToolbarSearchbar"></ion-searchbar>
|
||||
</ion-toolbar>
|
||||
|
||||
<h5 padding-left padding-top> Search - Primary Toolbar </h5>
|
||||
<ion-toolbar primary>
|
||||
<ion-searchbar [(ng-model)]="primaryToolbarSearch" show-cancel="true" class="e2ePrimaryToolbarSearchbar"></ion-searchbar>
|
||||
<ion-searchbar [(ngModel)]="primaryToolbarSearch" class="e2ePrimaryToolbarSearchbar"></ion-searchbar>
|
||||
</ion-toolbar>
|
||||
|
||||
<h5 padding-left padding-top> Search - Danger Toolbar </h5>
|
||||
<ion-toolbar danger>
|
||||
<ion-searchbar [(ng-model)]="dangerToolbarSearch" show-cancel="true" class="e2eDangerToolbarSearchbar"></ion-searchbar>
|
||||
<ion-searchbar [(ngModel)]="dangerToolbarSearch" class="e2eDangerToolbarSearchbar"></ion-searchbar>
|
||||
</ion-toolbar>
|
||||
|
||||
<h5 padding-left padding-top> Search - Light Toolbar </h5>
|
||||
<ion-toolbar light>
|
||||
<ion-searchbar [(ng-model)]="lightToolbarSearch" show-cancel="true" class="e2eLightToolbarSearchbar"></ion-searchbar>
|
||||
<ion-searchbar [(ngModel)]="lightToolbarSearch" class="e2eLightToolbarSearchbar"></ion-searchbar>
|
||||
</ion-toolbar>
|
||||
|
||||
</ion-content>
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import {Directive, Renderer, ElementRef, Host, Optional, NgControl} from 'angular2/angular2';
|
||||
import {Directive, Renderer, ElementRef, Host, Optional} from 'angular2/core';
|
||||
import {NgControl} from 'angular2/common';
|
||||
|
||||
import {Ion} from '../ion';
|
||||
import {Config} from '../../config/config';
|
||||
@@ -9,12 +10,12 @@ import {Config} from '../../config/config';
|
||||
* @description
|
||||
* A Segment is a group of buttons, sometimes known as Segmented Controls, that allow the user to interact with a compact group of a number of controls.
|
||||
* Segments provide functionality similar to tabs, selecting one will unselect all others. You should use a tab bar instead of a segmented control when you want to let the user move back and forth between distinct pages in your app.
|
||||
* You could use Angular 2's `ng-model` or `FormBuilder` API. For an overview on how `FormBuilder` works, checkout [Angular 2 Forms](http://learnangular2.com/forms/), or [Angular FormBuilder](https://angular.io/docs/ts/latest/api/common/FormBuilder-class.html)
|
||||
* You could use Angular 2's `ngModel` or `FormBuilder` API. For an overview on how `FormBuilder` works, checkout [Angular 2 Forms](http://learnangular2.com/forms/), or [Angular FormBuilder](https://angular.io/docs/ts/latest/api/common/FormBuilder-class.html)
|
||||
*
|
||||
*
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-segment [(ng-model)]="relationship" danger>
|
||||
* <ion-segment [(ngModel)]="relationship" danger>
|
||||
* <ion-segment-button value="friends">
|
||||
* Friends
|
||||
* </ion-segment-button>
|
||||
@@ -27,8 +28,8 @@ import {Config} from '../../config/config';
|
||||
* Or with `FormBuilder`
|
||||
*
|
||||
*```html
|
||||
* <form [ng-form-model]="myForm">
|
||||
* <ion-segment ng-control="mapStyle" danger>
|
||||
* <form [ngFormModel]="myForm">
|
||||
* <ion-segment ngControl="mapStyle" danger>
|
||||
* <ion-segment-button value="standard">
|
||||
* Standard
|
||||
* </ion-segment-button>
|
||||
@@ -141,7 +142,7 @@ export class Segment extends Ion {
|
||||
* @property {string} [value] - the value of the segment-button.
|
||||
* @usage
|
||||
* ```html
|
||||
* <ion-segment [(ng-model)]="relationship" primary>
|
||||
* <ion-segment [(ngModel)]="relationship" primary>
|
||||
* <ion-segment-button value="friends">
|
||||
* Friends
|
||||
* </ion-segment-button>
|
||||
@@ -154,8 +155,8 @@ export class Segment extends Ion {
|
||||
* Or with `FormBuilder`
|
||||
*
|
||||
*```html
|
||||
* <form [ng-form-model]="myForm">
|
||||
* <ion-segment ng-control="mapStyle" danger>
|
||||
* <form [ngFormModel]="myForm">
|
||||
* <ion-segment ngControl="mapStyle" danger>
|
||||
* <ion-segment-button value="standard">
|
||||
* Standard
|
||||
* </ion-segment-button>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2';
|
||||
import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/common';
|
||||
|
||||
import {App} from 'ionic/ionic';
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<ion-toolbar>
|
||||
<ion-segment [(ng-model)]="relationship">
|
||||
<ion-segment [(ngModel)]="relationship">
|
||||
<ion-segment-button value="friends" class="e2eSegmentFriends">
|
||||
Friends
|
||||
</ion-segment-button>
|
||||
@@ -30,8 +30,8 @@
|
||||
|
||||
<h4>Map mode: NgControl</h4>
|
||||
|
||||
<form (submit)="doSubmit($event)" [ng-form-model]="myForm">
|
||||
<ion-segment ng-control="mapStyle" danger>
|
||||
<form (submit)="doSubmit($event)" [ngFormModel]="myForm">
|
||||
<ion-segment ngControl="mapStyle" danger>
|
||||
<ion-segment-button value="standard" class="e2eSegmentStandard">
|
||||
Standard
|
||||
</ion-segment-button>
|
||||
@@ -47,14 +47,14 @@
|
||||
<p>
|
||||
Map mode: <b>{{myForm.controls.mapStyle.value}}</b> -
|
||||
|
||||
<span [ng-switch]="myForm.controls.mapStyle.value">
|
||||
<span *ng-switch-when="'standard'">
|
||||
<span [ngSwitch]="myForm.controls.mapStyle.value">
|
||||
<span *ngSwitchWhen="'standard'">
|
||||
<b>Standard</b>
|
||||
</span>
|
||||
<span *ng-switch-when="'hybrid'">
|
||||
<span *ngSwitchWhen="'hybrid'">
|
||||
<b>Hybrid</b>
|
||||
</span>
|
||||
<span *ng-switch-when="'sat'">
|
||||
<span *ngSwitchWhen="'sat'">
|
||||
<b>Satellite</b>
|
||||
</span>
|
||||
</span>
|
||||
@@ -64,7 +64,7 @@
|
||||
|
||||
<h4>Model style: NgModel</h4>
|
||||
|
||||
<ion-segment [(ng-model)]="modelStyle" dark>
|
||||
<ion-segment [(ngModel)]="modelStyle" dark>
|
||||
<ion-segment-button value="A">
|
||||
Model A
|
||||
</ion-segment-button>
|
||||
@@ -83,7 +83,7 @@
|
||||
</ion-content>
|
||||
|
||||
<ion-toolbar position="bottom" primary>
|
||||
<ion-segment [(ng-model)]="appType" light>
|
||||
<ion-segment [(ngModel)]="appType" light>
|
||||
<ion-segment-button value="paid">
|
||||
Primary
|
||||
</ion-segment-button>
|
||||
@@ -97,7 +97,7 @@
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar position="bottom">
|
||||
<ion-segment [(ng-model)]="appType" danger>
|
||||
<ion-segment [(ngModel)]="appType" danger>
|
||||
<ion-segment-button value="paid">
|
||||
Light
|
||||
</ion-segment-button>
|
||||
@@ -111,7 +111,7 @@
|
||||
</ion-toolbar>
|
||||
|
||||
<ion-toolbar position="bottom">
|
||||
<ion-segment [(ng-model)]="appType" dark>
|
||||
<ion-segment [(ngModel)]="appType" dark>
|
||||
<ion-segment-button value="paid">
|
||||
Light
|
||||
</ion-segment-button>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/angular2';
|
||||
import {FORM_DIRECTIVES, FormBuilder, Validators, Control, ControlGroup} from 'angular2/common';
|
||||
|
||||
import {App, Page} from 'ionic/ionic';
|
||||
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
</ion-navbar>
|
||||
|
||||
<ion-toolbar>
|
||||
<ion-segment [(ng-model)]="signInType">
|
||||
<ion-segment [(ngModel)]="signInType">
|
||||
<ion-segment-button value="new">
|
||||
New
|
||||
</ion-segment-button>
|
||||
@@ -32,14 +32,14 @@
|
||||
</ion-col>
|
||||
</ion-row>
|
||||
|
||||
<div [ng-switch]="signInType">
|
||||
<div *ng-switch-when="'existing'">
|
||||
<div [ngSwitch]="signInType">
|
||||
<div *ngSwitchWhen="'existing'">
|
||||
Signing up as an <b>Existing User</b>.
|
||||
</div>
|
||||
<div *ng-switch-when="'new'">
|
||||
<div *ngSwitchWhen="'new'">
|
||||
Signing up as a <b>New User</b>.
|
||||
</div>
|
||||
<div *ng-switch-when="'test'">
|
||||
<div *ngSwitchWhen="'test'">
|
||||
Signing up as a <b>Test User</b>.
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,9 +1,12 @@
|
||||
import {Directive, Attribute, NgZone} from 'angular2/angular2'
|
||||
import {Directive, Attribute, NgZone} from 'angular2/core'
|
||||
|
||||
import {Platform} from '../../platform/platform';
|
||||
|
||||
|
||||
class DisplayWhen {
|
||||
/**
|
||||
* @private
|
||||
*/
|
||||
export class DisplayWhen {
|
||||
|
||||
constructor(conditions, platform, ngZone) {
|
||||
this.isMatch = false;
|
||||
@@ -58,13 +61,13 @@ class DisplayWhen {
|
||||
* Complements the [hide-when attribute](../HideWhen).
|
||||
* @usage
|
||||
* ```html
|
||||
* <div show-when="ios">I am only visible on iOS!</div>
|
||||
* <div showWhen="ios">I am only visible on iOS!</div>
|
||||
* ```
|
||||
* @demo /docs/v2/demos/show-when/
|
||||
* @see {@link ../HideWhen HideWhen API Docs}
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[show-when]',
|
||||
selector: '[showWhen]',
|
||||
host: {
|
||||
'[hidden]': 'hidden'
|
||||
}
|
||||
@@ -72,7 +75,7 @@ class DisplayWhen {
|
||||
export class ShowWhen extends DisplayWhen {
|
||||
|
||||
constructor(
|
||||
@Attribute('show-when') showWhen: string,
|
||||
@Attribute('showWhen') showWhen: string,
|
||||
platform: Platform,
|
||||
ngZone: NgZone
|
||||
) {
|
||||
@@ -95,13 +98,13 @@ export class ShowWhen extends DisplayWhen {
|
||||
* Complements the [show-when attribute](../ShowWhen).
|
||||
* @usage
|
||||
* ```html
|
||||
* <div hide-when="android">I am hidden on Android!</div>
|
||||
* <div hideWhen="android">I am hidden on Android!</div>
|
||||
* ```
|
||||
* @demo /docs/v2/demos/hide-when/
|
||||
* @see {@link ../ShowWhen ShowWhen API Docs}
|
||||
*/
|
||||
@Directive({
|
||||
selector: '[hide-when]',
|
||||
selector: '[hideWhen]',
|
||||
host: {
|
||||
'[hidden]': 'hidden'
|
||||
}
|
||||
@@ -109,7 +112,7 @@ export class ShowWhen extends DisplayWhen {
|
||||
export class HideWhen extends DisplayWhen {
|
||||
|
||||
constructor(
|
||||
@Attribute('hide-when') hideWhen: string,
|
||||
@Attribute('hideWhen') hideWhen: string,
|
||||
platform: Platform,
|
||||
ngZone: NgZone
|
||||
) {
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
NgControlName,
|
||||
NgFormModel,
|
||||
FormBuilder
|
||||
} from 'angular2/angular2';
|
||||
} from 'angular2/common';
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
|
||||
@@ -4,56 +4,56 @@
|
||||
|
||||
<ion-content padding>
|
||||
|
||||
<p show-when="ios" style="background:blue; color:white">
|
||||
show-when="ios"
|
||||
<p showWhen="ios" style="background:blue; color:white">
|
||||
showWhen="ios"
|
||||
</p>
|
||||
|
||||
<p show-when="android" style="background:green; color:white">
|
||||
show-when="android"
|
||||
<p showWhen="android" style="background:green; color:white">
|
||||
showWhen="android"
|
||||
</p>
|
||||
|
||||
<p show-when="android,ios" style="background:yellow;">
|
||||
show-when="android,ios"
|
||||
<p showWhen="android,ios" style="background:yellow;">
|
||||
showWhen="android,ios"
|
||||
</p>
|
||||
|
||||
<p show-when="core" style="background:#ddd;">
|
||||
show-when="core"
|
||||
<p showWhen="core" style="background:#ddd;">
|
||||
showWhen="core"
|
||||
</p>
|
||||
|
||||
<p show-when="mobile" style="background:orange;">
|
||||
show-when="mobile"
|
||||
<p showWhen="mobile" style="background:orange;">
|
||||
showWhen="mobile"
|
||||
</p>
|
||||
|
||||
<p show-when="phablet" style="background:red;">
|
||||
show-when="phablet"
|
||||
<p showWhen="phablet" style="background:red;">
|
||||
showWhen="phablet"
|
||||
</p>
|
||||
|
||||
<p show-when="tablet" style="background:black;color:white">
|
||||
show-when="tablet"
|
||||
<p showWhen="tablet" style="background:black;color:white">
|
||||
showWhen="tablet"
|
||||
</p>
|
||||
|
||||
<p show-when="iphone" style="background:purple; color:white;">
|
||||
show-when="iphone"
|
||||
<p showWhen="iphone" style="background:purple; color:white;">
|
||||
showWhen="iphone"
|
||||
</p>
|
||||
|
||||
<p show-when="landscape" style="background:pink;">
|
||||
show-when="landscape"
|
||||
<p showWhen="landscape" style="background:pink;">
|
||||
showWhen="landscape"
|
||||
</p>
|
||||
|
||||
<p show-when="portrait" style="background:maroon; color:white;">
|
||||
show-when="portrait"
|
||||
<p showWhen="portrait" style="background:maroon; color:white;">
|
||||
showWhen="portrait"
|
||||
</p>
|
||||
|
||||
<p hide-when="ios" style="background:blue; color:white">
|
||||
hide-when="ios"
|
||||
<p hideWhen="ios" style="background:blue; color:white">
|
||||
hideWhen="ios"
|
||||
</p>
|
||||
|
||||
<p hide-when="android" style="background:green; color:white">
|
||||
hide-when="android"
|
||||
<p hideWhen="android" style="background:green; color:white">
|
||||
hideWhen="android"
|
||||
</p>
|
||||
|
||||
<p hide-when="android,ios" style="background:yellow;">
|
||||
hide-when="android,ios"
|
||||
<p hideWhen="android,ios" style="background:yellow;">
|
||||
hideWhen="android,ios"
|
||||
</p>
|
||||
|
||||
</ion-content>
|
||||
|
||||
@@ -251,7 +251,7 @@ button.swiper-pagination-bullet {
|
||||
.swiper-container-3d .swiper-slide-shadow-bottom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
@@ -485,11 +485,6 @@ ion-slides {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.swiper-slide {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
import {Directive, Component, ElementRef, Host, NgClass, EventEmitter} from 'angular2/angular2';
|
||||
import {Directive, Component, ElementRef, Host, EventEmitter} from 'angular2/core';
|
||||
import {NgClass} from 'angular2/common';
|
||||
|
||||
import {Ion} from '../ion';
|
||||
import {Animation} from 'ionic/animations/animation';
|
||||
import {Gesture} from 'ionic/gestures/gesture';
|
||||
import {DragGesture} from 'ionic/gestures/drag-gesture';
|
||||
import {Animation} from '../../animations/animation';
|
||||
import {Gesture} from '../../gestures/gesture';
|
||||
import {DragGesture} from '../../gestures/drag-gesture';
|
||||
import {Config} from '../../config/config';
|
||||
import {dom} from 'ionic/util';
|
||||
import {dom} from '../../util';
|
||||
import {CSS} from '../../util/dom';
|
||||
import * as util from 'ionic/util';
|
||||
import * as util from '../../util';
|
||||
|
||||
import {Swiper} from './swiper-widget';
|
||||
import {Scroll} from '../scroll/scroll';
|
||||
@@ -33,7 +34,7 @@ import {Scroll} from '../scroll/scroll';
|
||||
* ```ts
|
||||
* @Page({
|
||||
* template: `
|
||||
* <ion-slides pager (slide-changed)="onSlideChanged($event)" loop="true" autoplay="true">
|
||||
* <ion-slides pager (slideChanged)="onSlideChanged($event)" loop="true" autoplay="true">
|
||||
* <ion-slide>
|
||||
* <h3>Thank you for choosing the Awesome App!</h3>
|
||||
* <p>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
<ion-slides [options]="extraOptions" id="slider" style="background-color: black" zoom>
|
||||
<ion-slide *ng-for="#image of images">
|
||||
<ion-slide *ngFor="#image of images">
|
||||
<img data-src="{{getImageUrl(image)}}" slide-lazy>
|
||||
</ion-slide>
|
||||
</ion-slides>
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
</ion-buttons>
|
||||
<ion-title>Grid Icons</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-slides pager (slide-changed)="onSlideChanged($event)" loop="true" autoplay="true">
|
||||
<ion-slides pager (slideChanged)="onSlideChanged($event)" loop="true" autoplay="true">
|
||||
<ion-slide>
|
||||
<h3>Thank you for choosing the Awesome App!</h3>
|
||||
<div id="logo">
|
||||
|
||||
37
ionic/components/slides/test/loop/index.ts
Normal file
37
ionic/components/slides/test/loop/index.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
import {App, IonicApp} from 'ionic/ionic';
|
||||
|
||||
@App({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class MyApp {
|
||||
constructor(app: IonicApp) {
|
||||
this.app = app;
|
||||
|
||||
this.slides = [
|
||||
{
|
||||
name: "Slide 1",
|
||||
class: "yellow"
|
||||
},
|
||||
{
|
||||
name: "Slide 2",
|
||||
class: "red"
|
||||
},
|
||||
{
|
||||
name: "Slide 3",
|
||||
class: "blue"
|
||||
}
|
||||
];
|
||||
}
|
||||
|
||||
onSlideChanged(slider) {
|
||||
console.log('Slide changed', slider);
|
||||
console.log("active index", slider.activeIndex);
|
||||
}
|
||||
|
||||
ngOnInit() {
|
||||
setTimeout(() => {
|
||||
this.slider = this.app.getComponent('loopSlider');
|
||||
console.log('Got slider', this.slider);
|
||||
});
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user