ionic-framework
Version:
The ionic-framework package comes with both Javascript and Sass frontend dependencies, located in the root of the package, and a Node API, located in `tooling/`.
224 lines (223 loc) • 6.31 kB
TypeScript
import { EventEmitter, ElementRef, NgZone, Renderer } from 'angular2/core';
import { Ion } from '../ion';
import { IonicApp } from '../app/app';
import { Config } from '../../config/config';
import { Platform } from '../../platform/platform';
import { Keyboard } from '../../util/keyboard';
import { MenuType } from './menu-types';
/**
* @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:
*
* ```html
* <ion-menu [content]="mycontent">
* <ion-content>
* <ion-list>
* ...
* </ion-list>
* </ion-content>
* </ion-menu>
*
* <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]="mycontent" side="right"></ion-menu>
* ```
*
* Menus can optionally be given an `id` attribute which allows the app to
* 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 menuToggle and
* menuClose directives should be given menu id values of their respective
* menu.
*
* Menu supports two display styles: overlay, and reveal. Overlay
* is the traditional Android drawer style, and Reveal is the traditional iOS
* 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]="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}
* @see {@link /docs/v2/components#navigation Navigation Component Docs}
* @see {@link ../../nav/Nav Nav API Docs}
*
*/
export declare class Menu extends Ion {
private _elementRef;
private _config;
private _app;
private _platform;
private _renderer;
private _keyboard;
private _zone;
private _preventTime;
private _cntEle;
private _gesture;
private _targetGesture;
private _type;
isOpen: boolean;
isEnabled: boolean;
isSwipeEnabled: boolean;
backdrop: MenuBackdrop;
onContentClick: EventListener;
content: any;
id: string;
side: string;
type: string;
swipeEnabled: string;
maxEdgeStart: any;
opening: EventEmitter<any>;
constructor(_elementRef: ElementRef, _config: Config, _app: IonicApp, _platform: Platform, _renderer: Renderer, _keyboard: Keyboard, _zone: NgZone);
/**
* @private
*/
ngOnInit(): void;
/**
* @private
*/
_initGesture(): void;
/**
* @private
*/
_initType(type: any): void;
/**
* @private
*/
_getType(): MenuType;
/**
* Sets the state of the Menu to open or not.
* @param {boolean} isOpen If the Menu is open or not.
* @return {Promise} returns a promise once set
*/
setOpen(shouldOpen: any): Promise<void>;
/**
* @private
*/
setProgressStart(): void;
/**
* @private
*/
setProgess(value: any): void;
/**
* @private
*/
setProgressEnd(shouldComplete: any): void;
/**
* @private
*/
_before(): void;
/**
* @private
*/
_after(isOpen: any): void;
/**
* @private
*/
_prevent(): void;
/**
* @private
*/
_isPrevented(): boolean;
/**
* Progamatically open the Menu
* @return {Promise} returns a promise when the menu is fully opened
*/
open(): Promise<void>;
/**
* Progamatically close the Menu
* @return {Promise} returns a promise when the menu is fully closed
*/
close(): Promise<void>;
/**
* 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(): Promise<void>;
/**
* Used to enable or disable a menu. For example, there could be multiple
* left menus, but only one of them should be able to be dragged open.
* @param {boolean} shouldEnable True if it should be enabled, false if not.
* @return {Menu} Returns the instance of the menu, which is useful for chaining.
*/
enable(shouldEnable: any): this;
/**
* Used to enable or disable the ability to swipe open the menu.
* @param {boolean} shouldEnable True if it should be swipe-able, false if not.
* @return {Menu} Returns the instance of the menu, which is useful for chaining.
*/
swipeEnable(shouldEnable: any): this;
/**
* @private
*/
getMenuElement(): any;
/**
* @private
*/
getContentElement(): HTMLElement;
/**
* @private
*/
getBackdropElement(): any;
/**
* @private
*/
static register(name: string, cls: new (...args: any[]) => MenuType): void;
/**
* @private
*/
ngOnDestroy(): void;
static getById(app: any, menuId: any): any;
}
export declare class MenuBackdrop {
private menu;
elementRef: ElementRef;
constructor(menu: Menu, elementRef: ElementRef);
/**
* @private
*/
clicked(ev: any): void;
}