docs()menus

This commit is contained in:
mhartington
2015-12-16 17:05:21 -05:00
parent a8a88649c2
commit 7138e61e2d
3 changed files with 74 additions and 15 deletions

View File

@ -5,7 +5,23 @@ import {Menu} from './menu';
/** /**
* TODO * @name MenuClose
* @description
* Place `menuClose` on a button to automatically close an open menu. Note that the menu's id must be either
* `leftMenu` or `rightMenu`
*
* @usage
* ```html
* <ion-menu [content]="mycontent" id="leftMenu">
* <ion-content>
* <ion-list>
* <ion-item menuClose>Close the menu</ion-item>
* </ion-list>
* </ion-content>
* </ion-menu>
*
* <ion-nav #mycontent [root]="rootPage"></ion-nav>
* ```
* @demo /docs/v2/demos/menu/ * @demo /docs/v2/demos/menu/
* @see {@link /docs/v2/components#menus Menu Component Docs} * @see {@link /docs/v2/components#menus Menu Component Docs}
* @see {@link ../../menu/Menu Menu API Docs} * @see {@link ../../menu/Menu Menu API Docs}

View File

@ -7,7 +7,19 @@ import {Menu} from './menu';
/** /**
* TODO * @name MenuToggle
* @description
* Toggle a menu by placing this directive on any item.
* Note that the menu's id must be either `leftMenu` or `rightMenu`
*
* @usage
* ```html
*<ion-content>
* <h3>Page 1</h3>
* <button menuToggle>Toggle Menu</button>
*</ion-content>
*
* ```
* @demo /docs/v2/demos/menu/ * @demo /docs/v2/demos/menu/
* @see {@link /docs/v2/components#menus Menu Component Docs} * @see {@link /docs/v2/components#menus Menu Component Docs}
* @see {@link ../../menu/Menu Menu API Docs} * @see {@link ../../menu/Menu Menu API Docs}

View File

@ -9,16 +9,19 @@ import * as gestures from './menu-gestures';
/** /**
* @name Menu
* @description
* _For basic Menu usage, see the [Menu section](../../../../components/#menus) * _For basic Menu usage, see the [Menu section](../../../../components/#menus)
* of the Component docs._ * of the Component docs._
* *
* Menu is a side-menu navigation that can be dragged out or toggled to show. * Menu is a side-menu navigation that can be dragged out or toggled to show.
* *
* @usage
* In order to use Menu, you must specify a [reference](https://angular.io/docs/ts/latest/guide/user-input.html#local-variables) * In order to use Menu, you must specify a [reference](https://angular.io/docs/ts/latest/guide/user-input.html#local-variables)
* to the content element that Menu should listen on for drag events, using the * to the content element that Menu should listen on for drag events, using the `content` property:
* `content` property: *
* ```html * ```html
* <ion-menu [content]="contentRef"> * <ion-menu [content]="mycontent">
* <ion-content> * <ion-content>
* <ion-list> * <ion-list>
* ... * ...
@ -26,13 +29,13 @@ import * as gestures from './menu-gestures';
* </ion-content> * </ion-content>
* </ion-menu> * </ion-menu>
* *
* <ion-nav #content-ref [root]="rootPage"></ion-nav> * <ion-nav #mycontent [root]="rootPage"></ion-nav>
* ``` * ```
* *
* By default, Menus are on the left, but this can be overriden with the `side` * By default, Menus are on the left, but this can be overriden with the `side`
* property: * property:
* ```html * ```html
* <ion-menu [content]="contentRef" side="right"></ion-menu> * <ion-menu [content]="mycontent" side="right"></ion-menu>
* ``` * ```
* *
* Menus can optionally be given an `id` attribute which allows the app to * Menus can optionally be given an `id` attribute which allows the app to
@ -48,9 +51,37 @@ import * as gestures from './menu-gestures';
* style. By default, Menu will adjust to the correct style for the platform, * style. By default, Menu will adjust to the correct style for the platform,
* but this can be overriden using the `type` property: * but this can be overriden using the `type` property:
* ```html * ```html
* <ion-menu [content]="contentRef" type="overlay"></ion-menu> * <ion-menu [content]="mycontent" type="overlay"></ion-menu>
* ``` * ```
* *
* To programatically interact with the menu, you first get the menu component.
*
* ```ts
* @Page({
* `<ion-menu [content]="mycontent" id="leftMenu"></ion-menu>
* <ion-nav #mycontent [root]="rootPage"></ion-nav>`
* )}
* export class MyClass{
* constructor(app: IonicApp){
* this.app = app;
* this.menu;
* }
*
* // Wait until the page is ready
* ngAfterViewInit(){
* this.menu = this.app.getComponent('leftMenu');
* }
*
* // Open the menu programatically
* openMenu(){
* this.menu.open();
* }
*
* }
* ```
*
* If you want to use any of the APIs down below, make sure to grabe the menu component by it's ID
*
* @demo /docs/v2/demos/menu/ * @demo /docs/v2/demos/menu/
* *
* @see {@link /docs/v2/components#menus Menu Component Docs} * @see {@link /docs/v2/components#menus Menu Component Docs}
@ -187,7 +218,7 @@ export class Menu extends Ion {
/** /**
* Sets the state of the Menu to open or not. * Sets the state of the Menu to open or not.
* @param {boolean} isOpen If the Menu is open or not. * @param {boolean} isOpen If the Menu is open or not.
* @return {Promise} TODO * @return {Promise} returns a promise once set
*/ */
setOpen(shouldOpen) { setOpen(shouldOpen) {
// _isPrevented is used to prevent unwanted opening/closing after swiping open/close // _isPrevented is used to prevent unwanted opening/closing after swiping open/close
@ -298,24 +329,24 @@ export class Menu extends Ion {
} }
/** /**
* TODO * Progamatically open the Menu
* @return {TODO} TODO * @return {Promise} returns a promise when the menu is fully opened
*/ */
open() { open() {
return this.setOpen(true); return this.setOpen(true);
} }
/** /**
* TODO * Progamatically close the Menu
* @return {TODO} TODO * @return {Promise} returns a promise when the menu is fully closed
*/ */
close() { close() {
return this.setOpen(false); return this.setOpen(false);
} }
/** /**
* TODO * Toggle the menu. If it's closed, it will open, and if opened, it will close
* @return {TODO} TODO * @return {Promise} returns a promise when the menu has been toggled
*/ */
toggle() { toggle() {
return this.setOpen(!this.isOpen); return this.setOpen(!this.isOpen);