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/
* @see {@link /docs/v2/components#menus Menu Component 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/
* @see {@link /docs/v2/components#menus Menu Component 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)
* of the Component docs._
*
* 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)
* to the content element that Menu should listen on for drag events, using the
* `content` property:
* to the content element that Menu should listen on for drag events, using the `content` property:
*
* ```html
* <ion-menu [content]="contentRef">
* <ion-menu [content]="mycontent">
* <ion-content>
* <ion-list>
* ...
@ -26,13 +29,13 @@ import * as gestures from './menu-gestures';
* </ion-content>
* </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`
* property:
* ```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
@ -48,9 +51,37 @@ import * as gestures from './menu-gestures';
* style. By default, Menu will adjust to the correct style for the platform,
* but this can be overriden using the `type` property:
* ```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/
*
* @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.
* @param {boolean} isOpen If the Menu is open or not.
* @return {Promise} TODO
* @return {Promise} returns a promise once set
*/
setOpen(shouldOpen) {
// _isPrevented is used to prevent unwanted opening/closing after swiping open/close
@ -298,24 +329,24 @@ export class Menu extends Ion {
}
/**
* TODO
* @return {TODO} TODO
* Progamatically open the Menu
* @return {Promise} returns a promise when the menu is fully opened
*/
open() {
return this.setOpen(true);
}
/**
* TODO
* @return {TODO} TODO
* Progamatically close the Menu
* @return {Promise} returns a promise when the menu is fully closed
*/
close() {
return this.setOpen(false);
}
/**
* TODO
* @return {TODO} TODO
* Toggle the menu. If it's closed, it will open, and if opened, it will close
* @return {Promise} returns a promise when the menu has been toggled
*/
toggle() {
return this.setOpen(!this.isOpen);