mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 03:32:21 +08:00
nav and modal docs wip
This commit is contained in:
@ -4,10 +4,18 @@ import {Overlay} from '../overlay/overlay';
|
|||||||
import {Animation} from '../../animations/animation';
|
import {Animation} from '../../animations/animation';
|
||||||
import * as util from 'ionic/util';
|
import * as util from 'ionic/util';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
*/
|
||||||
@Injectable()
|
@Injectable()
|
||||||
export class Modal extends Overlay {
|
export class Modal extends Overlay {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
* @param {Type} ComponentType TODO
|
||||||
|
* @param {Object} [opts={}] TODO
|
||||||
|
* @returns {TODO} TODO
|
||||||
|
*/
|
||||||
open(ComponentType: Type, opts={}) {
|
open(ComponentType: Type, opts={}) {
|
||||||
let defaults = {
|
let defaults = {
|
||||||
enterAnimation: 'modal-slide-in',
|
enterAnimation: 'modal-slide-in',
|
||||||
@ -17,6 +25,11 @@ export class Modal extends Overlay {
|
|||||||
return this.create(OVERLAY_TYPE, ComponentType, util.extend(defaults, opts));
|
return this.create(OVERLAY_TYPE, ComponentType, util.extend(defaults, opts));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
* @param {TODO} handle TODO
|
||||||
|
* @returns {TODO} TODO
|
||||||
|
*/
|
||||||
get(handle) {
|
get(handle) {
|
||||||
if (handle) {
|
if (handle) {
|
||||||
return this.getByHandle(handle, OVERLAY_TYPE);
|
return this.getByHandle(handle, OVERLAY_TYPE);
|
||||||
|
@ -1,14 +1,21 @@
|
|||||||
import {extend} from '../../util/util';
|
import {extend} from '../../util/util';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
*/
|
||||||
export class NavController {
|
export class NavController {
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
* @param {TODO} nav TODO
|
||||||
|
*/
|
||||||
constructor(nav) {
|
constructor(nav) {
|
||||||
this._nav = nav;
|
this._nav = nav;
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Set the history stack to match the list of component items.
|
* Set the history stack to match the list of component items.
|
||||||
|
* @param {TODO} items TODO
|
||||||
|
* @return {TODO} TODO
|
||||||
*/
|
*/
|
||||||
setItems(items) {
|
setItems(items) {
|
||||||
return this._nav.setItems(items);
|
return this._nav.setItems(items);
|
||||||
@ -16,13 +23,15 @@ export class NavController {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Clear the history stack.
|
* Clear the history stack.
|
||||||
|
* @return {TODO} TODO
|
||||||
*/
|
*/
|
||||||
clear() {
|
clear() {
|
||||||
return this._nav.clear();
|
return this._nav.clear();
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Push an ew component onto the history stack.
|
* Push a new component onto the history stack.
|
||||||
|
* @return {TODO} TODO
|
||||||
*/
|
*/
|
||||||
push() {
|
push() {
|
||||||
return this._nav.push.apply(this._nav, arguments);
|
return this._nav.push.apply(this._nav, arguments);
|
||||||
@ -30,16 +39,29 @@ export class NavController {
|
|||||||
|
|
||||||
/**
|
/**
|
||||||
* Pop the top most (visible) component off the history stack.
|
* Pop the top most (visible) component off the history stack.
|
||||||
|
* @return {TODO} TODO
|
||||||
*/
|
*/
|
||||||
pop() {
|
pop() {
|
||||||
return this._nav.pop.apply(this._nav, arguments);
|
return this._nav.pop.apply(this._nav, arguments);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
*/
|
||||||
export class NavParams {
|
export class NavParams {
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
* @param {TODO} data TODO
|
||||||
|
*/
|
||||||
constructor(data) {
|
constructor(data) {
|
||||||
this.data = data || {};
|
this.data = data || {};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
* @param {TODO} param TODO
|
||||||
|
*/
|
||||||
get(param) {
|
get(param) {
|
||||||
return this.data[param];
|
return this.data[param];
|
||||||
}
|
}
|
||||||
|
@ -1,7 +1,9 @@
|
|||||||
import {Directive} from 'angular2/angular2';
|
import {Directive} from 'angular2/angular2';
|
||||||
import {NavController} from './nav-controller';
|
import {NavController} from './nav-controller';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
*/
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[nav-push]',
|
selector: '[nav-push]',
|
||||||
properties: [
|
properties: [
|
||||||
@ -14,15 +16,22 @@ import {NavController} from './nav-controller';
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
export class NavPush {
|
export class NavPush {
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
* @param {NavController} nav TODO
|
||||||
|
*/
|
||||||
constructor(nav: NavController) {
|
constructor(nav: NavController) {
|
||||||
this.nav = nav;
|
this.nav = nav;
|
||||||
}
|
}
|
||||||
|
|
||||||
onClick(event) {
|
onClick(event) {
|
||||||
this.nav.push(this.navPush, this.pushData);
|
this.nav.push(this.navPush, this.pushData);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
*/
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '[nav-pop]',
|
selector: '[nav-pop]',
|
||||||
host: {
|
host: {
|
||||||
@ -31,6 +40,10 @@ export class NavPush {
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
export class NavPop {
|
export class NavPop {
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
* @param {NavController} nav TODO
|
||||||
|
*/
|
||||||
constructor(nav: NavController) {
|
constructor(nav: NavController) {
|
||||||
this.nav = nav;
|
this.nav = nav;
|
||||||
}
|
}
|
||||||
|
@ -8,12 +8,22 @@ import {
|
|||||||
|
|
||||||
import {Nav} from './nav';
|
import {Nav} from './nav';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
*/
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: 'ion-nav'
|
selector: 'ion-nav'
|
||||||
})
|
})
|
||||||
export class NavRouter extends RouterOutlet {
|
export class NavRouter extends RouterOutlet {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
* @param {ElementRef} _elementRef TODO
|
||||||
|
* @param {DynamicComponentLoader} _loader TODO
|
||||||
|
* @param {Router} _parentRouter TODO
|
||||||
|
* @param {string} nameAttr Value of the element's 'name' attribute
|
||||||
|
* @param {Nav} nav TODO
|
||||||
|
*/
|
||||||
constructor(_elementRef: ElementRef, _loader: DynamicComponentLoader,
|
constructor(_elementRef: ElementRef, _loader: DynamicComponentLoader,
|
||||||
_parentRouter: Router, @Attribute('name') nameAttr: string,
|
_parentRouter: Router, @Attribute('name') nameAttr: string,
|
||||||
nav: Nav) {
|
nav: Nav) {
|
||||||
@ -28,6 +38,11 @@ export class NavRouter extends RouterOutlet {
|
|||||||
nav.registerRouter(this);
|
nav.registerRouter(this);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @private
|
||||||
|
* TODO
|
||||||
|
* @param {ComponentInstruction} instruction TODO
|
||||||
|
*/
|
||||||
_activate(instruction: ComponentInstruction): Promise<any> {
|
_activate(instruction: ComponentInstruction): Promise<any> {
|
||||||
var previousInstruction = this._currentInstruction;
|
var previousInstruction = this._currentInstruction;
|
||||||
this._currentInstruction = instruction;
|
this._currentInstruction = instruction;
|
||||||
@ -38,6 +53,11 @@ export class NavRouter extends RouterOutlet {
|
|||||||
this.nav.push(componentType, instruction.params);
|
this.nav.push(componentType, instruction.params);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
* @param {TODO} type TODO
|
||||||
|
* @param {TODO} viewItem TODO
|
||||||
|
*/
|
||||||
stateChange(type, viewItem) {
|
stateChange(type, viewItem) {
|
||||||
// stateChange is called by Ionic's ViewController
|
// stateChange is called by Ionic's ViewController
|
||||||
// type could be "push" or "pop"
|
// type could be "push" or "pop"
|
||||||
@ -62,6 +82,11 @@ export class NavRouter extends RouterOutlet {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
* @param {TODO} componentType TODO
|
||||||
|
* @returns {TODO} TODO
|
||||||
|
*/
|
||||||
getPathRecognizerByComponent(componentType) {
|
getPathRecognizerByComponent(componentType) {
|
||||||
// given a componentType, figure out the best PathRecognizer to use
|
// given a componentType, figure out the best PathRecognizer to use
|
||||||
let rules = this._parentRouter.registry._rules;
|
let rules = this._parentRouter.registry._rules;
|
||||||
|
@ -3,7 +3,9 @@ import {Directive, View, ElementRef, Host, Optional, forwardRef, Injector, NgZon
|
|||||||
import {IonicComponent} from '../../config/annotations';
|
import {IonicComponent} from '../../config/annotations';
|
||||||
import {ViewController} from '../view/view-controller';
|
import {ViewController} from '../view/view-controller';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
*/
|
||||||
@IonicComponent({
|
@IonicComponent({
|
||||||
selector: 'ion-nav',
|
selector: 'ion-nav',
|
||||||
properties: [
|
properties: [
|
||||||
@ -19,6 +21,13 @@ import {ViewController} from '../view/view-controller';
|
|||||||
})
|
})
|
||||||
export class Nav extends ViewController {
|
export class Nav extends ViewController {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
* @param {ViewController} hostViewCtrl TODO
|
||||||
|
* @param {Injector} injector TODO
|
||||||
|
* @param {ElementRef} elementRef TODO
|
||||||
|
* @param {NgZone} zone TODO
|
||||||
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
@Optional() hostViewCtrl: ViewController,
|
@Optional() hostViewCtrl: ViewController,
|
||||||
injector: Injector,
|
injector: Injector,
|
||||||
@ -28,6 +37,9 @@ export class Nav extends ViewController {
|
|||||||
super(hostViewCtrl, injector, elementRef, zone);
|
super(hostViewCtrl, injector, elementRef, zone);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
*/
|
||||||
onIonInit() {
|
onIonInit() {
|
||||||
|
|
||||||
if (this.root) {
|
if (this.root) {
|
||||||
|
@ -7,8 +7,14 @@ import {SwipeHandle} from './swipe-handle';
|
|||||||
import {IonicComponent} from '../../config/annotations';
|
import {IonicComponent} from '../../config/annotations';
|
||||||
import {PaneAnchor, PaneContentAnchor, NavBarContainer} from './anchors';
|
import {PaneAnchor, PaneContentAnchor, NavBarContainer} from './anchors';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
*/
|
||||||
export class PaneController {
|
export class PaneController {
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
* @param {ViewController} viewCtrl TODO
|
||||||
|
*/
|
||||||
constructor(viewCtrl: ViewController) {
|
constructor(viewCtrl: ViewController) {
|
||||||
this.panes = [];
|
this.panes = [];
|
||||||
this.viewCtrl = viewCtrl;
|
this.viewCtrl = viewCtrl;
|
||||||
@ -18,6 +24,11 @@ export class PaneController {
|
|||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
* @param {TODO} nav TODO
|
||||||
|
* @param {Function} nav TODO
|
||||||
|
*/
|
||||||
get(itemStructure, callback) {
|
get(itemStructure, callback) {
|
||||||
// this gets or creates the Pane which similar nav items live in
|
// this gets or creates the Pane which similar nav items live in
|
||||||
// Nav items with just a navbar/content would all use the same Pane
|
// Nav items with just a navbar/content would all use the same Pane
|
||||||
|
@ -5,6 +5,9 @@ import {Pane} from './pane';
|
|||||||
import {Gesture} from 'ionic/gestures/gesture';
|
import {Gesture} from 'ionic/gestures/gesture';
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
*/
|
||||||
@Directive({
|
@Directive({
|
||||||
selector: '.swipe-handle',
|
selector: '.swipe-handle',
|
||||||
host: {
|
host: {
|
||||||
@ -12,6 +15,13 @@ import {Gesture} from 'ionic/gestures/gesture';
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
export class SwipeHandle {
|
export class SwipeHandle {
|
||||||
|
/**
|
||||||
|
* TODO
|
||||||
|
* @param {ViewController=} viewCtrl TODO
|
||||||
|
* @param {Pane} pane TODO
|
||||||
|
* @param {ElementRef} elementRef TODO
|
||||||
|
* @param {NgZone} ngZone TODO
|
||||||
|
*/
|
||||||
constructor(
|
constructor(
|
||||||
@Optional() @Inject(forwardRef(() => ViewController)) viewCtrl: ViewController,
|
@Optional() @Inject(forwardRef(() => ViewController)) viewCtrl: ViewController,
|
||||||
@Host() @Inject(forwardRef(() => Pane)) pane: Pane,
|
@Host() @Inject(forwardRef(() => Pane)) pane: Pane,
|
||||||
|
Reference in New Issue
Block a user