From ac7ca8756f9f713224819c46127b96ab7c79d71e Mon Sep 17 00:00:00 2001 From: Adam Bradley Date: Thu, 31 Dec 2015 21:09:30 -0600 Subject: [PATCH] docs(navCtrl): NavController#present docs --- ionic/components/action-sheet/action-sheet.ts | 53 ++++++++++++++++++- .../action-sheet/test/basic/index.ts | 6 +-- .../action-sheet/test/basic/main.html | 4 +- ionic/components/nav/nav-controller.ts | 31 +++++++++-- 4 files changed, 85 insertions(+), 9 deletions(-) diff --git a/ionic/components/action-sheet/action-sheet.ts b/ionic/components/action-sheet/action-sheet.ts index ef120f884d..973e296d7c 100644 --- a/ionic/components/action-sheet/action-sheet.ts +++ b/ionic/components/action-sheet/action-sheet.ts @@ -18,6 +18,40 @@ import {Animation} from '../../animations/animation'; * * @usage * ```ts + * + * constructor(nav: NavController) { + * this.nav = nav; + * } + * + * presentActionSheet() { + * let actionSheet = ActionSheet.create({ + * title: 'Modify your album', + * buttons: [ + * { + * text: 'Destructive', + * style: 'destructive', + * handler: () => { + * console.log('Destructive clicked'); + * } + * }, + * { + * text: 'Archive', + * handler: () => { + * console.log('Archive clicked'); + * } + * }, + * { + * text: 'Cancel', + * style: 'cancel', + * handler: () => { + * console.log('Cancel clicked'); + * } + * } + * ] + * }); + * + * this.nav.present(actionSheet); + * } * ``` * * @demo /docs/v2/demos/action-sheet/ @@ -32,30 +66,47 @@ import {Animation} from '../../animations/animation'; this.viewType = 'action-sheet'; } + /** + * @private + */ getTransitionName(direction) { let key = 'actionSheet' + (direction === 'back' ? 'Leave' : 'Enter'); return this._nav && this._nav.config.get(key); } + /** + * @param {string} title Action sheet title + */ setTitle(title) { this.data.title = title; } + /** + * @param {string} subTitle Action sheet subtitle + */ setSubTitle(subTitle) { this.data.subTitle = subTitle; } + /** + * @param {Object} button Action sheet button + */ addButton(button) { this.data.buttons.push(button); } + /** + * @param {Object} button Action sheet options + */ static create(data={}) { return new ActionSheet(data); } } - +/** +* @private +*/ @Component({ selector: 'ion-action-sheet', template: diff --git a/ionic/components/action-sheet/test/basic/index.ts b/ionic/components/action-sheet/test/basic/index.ts index 937220297a..94859b2fae 100644 --- a/ionic/components/action-sheet/test/basic/index.ts +++ b/ionic/components/action-sheet/test/basic/index.ts @@ -10,7 +10,7 @@ class E2EPage { this.nav = nav; } - openActionSheet1(ev) { + presentActionSheet1() { this.result = ''; let actionSheet = ActionSheet.create({ @@ -44,7 +44,7 @@ class E2EPage { text: 'Cancel', style: 'cancel', // will always sort to be on the bottom handler: () => { - console.log('cancel this clicked'); + console.log('Cancel clicked'); this.result = 'Canceled'; } } @@ -54,7 +54,7 @@ class E2EPage { this.nav.present(actionSheet); } - openActionSheet2(ev) { + presentActionSheet2(ev) { this.result = ''; let actionSheet = ActionSheet.create({ diff --git a/ionic/components/action-sheet/test/basic/main.html b/ionic/components/action-sheet/test/basic/main.html index b28dbb7846..7bfeeba2b4 100644 --- a/ionic/components/action-sheet/test/basic/main.html +++ b/ionic/components/action-sheet/test/basic/main.html @@ -4,8 +4,8 @@ - - + + 
     Result: {{result}}
diff --git a/ionic/components/nav/nav-controller.ts b/ionic/components/nav/nav-controller.ts
index c810591a75..1851aa5248 100644
--- a/ionic/components/nav/nav-controller.ts
+++ b/ionic/components/nav/nav-controller.ts
@@ -206,7 +206,7 @@ export class NavController extends Ion {
    *
    * ```typescript
    * class MyClass{
-   *    constructor(nav:NavController){
+   *    constructor(nav: NavController){
    *      this.nav = nav;
    *    }
    *
@@ -225,10 +225,10 @@ export class NavController extends Ion {
    *    }
    * }
    * ```
-   * @param {Any} component The name of the component you want to push on the navigation stack
+   * @param {Any} component The page component class you want to push on to the navigation stack
    * @param {Object} [params={}] Any nav-params you want to pass along to the next view
    * @param {Object} [opts={}] Any options you want to use pass to transtion
-   * @returns {Promise} Returns a promise when the transition is completed
+   * @returns {Promise} Returns a promise, which resolves when the transition has completed
    */
   push(componentType, params={}, opts={}, callback) {
     if (!componentType) {
@@ -290,6 +290,31 @@ export class NavController extends Ion {
     return promise;
   }
 
+  /**
+   * Present is how we display overlays on top of the content, from within the
+   * root level `NavController`. The `present` method is used by overlays, such
+   * as `ActionSheet`, `Alert`, and `Modal`. The main difference between `push`
+   * and `present`, is that `present` takes a `ViewController` instance, whereas
+   * `push` takes a `Page` component class. Additionally, `present` will place
+   * the overlay in the root NavController's stack.
+   *
+   * ```typescript
+   * class MyClass{
+   *    constructor(nav: NavController) {
+   *      this.nav = nav;
+   *    }
+   *
+   *    presentModal() {
+   *      let modal = Modal.create(ProfilePage);
+   *      this.nav.present(modal);
+   *    }
+   * }
+   * ```
+   *
+   * @param {ViewController} enteringView The name of the component you want to push on the navigation stack
+   * @param {Object} [opts={}] Any options you want to use pass to transtion
+   * @returns {Promise} Returns a promise, which resolves when the transition has completed
+   */
   present(enteringView, opts={}) {
     let rootNav = this.rootNav;