123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147 |
- import { Directive, HostListener, Input, Optional } from '@angular/core';
- import { Button } from '../button/button';
- import { MenuController } from '../app/menu-controller';
- import { Navbar } from '../toolbar/navbar';
- import { ViewController } from '../../navigation/view-controller';
- /**
- * @name MenuToggle
- * @description
- * The `menuToggle` directive can be placed on any button to toggle a menu open or closed.
- * If it is added to the [NavBar](../../toolbar/Navbar) of a page, the button will only appear
- * when the page it's in is currently a root page. See the [Menu Navigation Bar Behavior](../Menu#navigation-bar-behavior)
- * docs for more information.
- *
- *
- * @usage
- *
- * A simple `menuToggle` button can be added using the following markup:
- *
- * ```html
- * <button ion-button menuToggle>Toggle Menu</button>
- * ```
- *
- * To toggle a specific menu by its id or side, give the `menuToggle`
- * directive a value.
- *
- * ```html
- * <button ion-button menuToggle="right">Toggle Right Menu</button>
- * ```
- *
- * If placing the `menuToggle` in a navbar or toolbar, it should be
- * placed as a child of the `<ion-navbar>` or `<ion-toolbar>`, and not in
- * the `<ion-buttons>` element:
- *
- * ```html
- * <ion-header>
- *
- * <ion-navbar>
- * <ion-buttons start>
- * <button ion-button>
- * <ion-icon name="contact"></ion-icon>
- * </button>
- * </ion-buttons>
- * <button ion-button menuToggle>
- * <ion-icon name="menu"></ion-icon>
- * </button>
- * <ion-title>
- * Title
- * </ion-title>
- * <ion-buttons end>
- * <button ion-button (click)="doClick()">
- * <ion-icon name="more"></ion-icon>
- * </button>
- * </ion-buttons>
- * </ion-navbar>
- *
- * </ion-header>
- * ```
- *
- * Similar to `<ion-buttons>`, the `menuToggle` can be positioned using
- * `start`, `end`, `left`, or `right`:
- *
- * ```html
- * <ion-toolbar>
- * <button ion-button menuToggle right>
- * <ion-icon name="menu"></ion-icon>
- * </button>
- * <ion-title>
- * Title
- * </ion-title>
- * <ion-buttons end>
- * <button ion-button (click)="doClick()">
- * <ion-icon name="more"></ion-icon>
- * </button>
- * </ion-buttons>
- * </ion-toolbar>
- * ```
- *
- * See the [Toolbar API docs](../../toolbar/Toolbar) for more information
- * on the different positions.
- *
- * @demo /docs/demos/src/menu/
- * @see {@link /docs/components#menus Menu Component Docs}
- * @see {@link ../../menu/Menu Menu API Docs}
- */
- export class MenuToggle {
- constructor(_menu, _viewCtrl, _button, _navbar) {
- this._menu = _menu;
- this._viewCtrl = _viewCtrl;
- this._button = _button;
- this._isButton = !!_button;
- this._inNavbar = !!_navbar;
- }
- ngAfterContentInit() {
- // Add the bar-button-menutoggle / button-menutoggle class
- if (this._isButton) {
- this._button._setClass('menutoggle', true);
- }
- }
- /**
- * @hidden
- */
- toggle() {
- const menu = this._menu.get(this.menuToggle);
- menu && menu.toggle();
- }
- /**
- * @hidden
- */
- get isHidden() {
- const menu = this._menu.get(this.menuToggle);
- if (this._inNavbar && this._viewCtrl) {
- if (!menu || !menu._canOpen()) {
- return true;
- }
- if (this._viewCtrl.isFirst()) {
- // this is the first view, so it should always show
- return false;
- }
- if (menu) {
- // this is not the root view, so see if this menu
- // is configured to still be enabled if it's not the root view
- return !menu.persistent;
- }
- }
- return false;
- }
- }
- MenuToggle.decorators = [
- { type: Directive, args: [{
- selector: '[menuToggle]',
- host: {
- '[hidden]': 'isHidden'
- }
- },] },
- ];
- /** @nocollapse */
- MenuToggle.ctorParameters = () => [
- { type: MenuController, },
- { type: ViewController, decorators: [{ type: Optional },] },
- { type: Button, decorators: [{ type: Optional },] },
- { type: Navbar, decorators: [{ type: Optional },] },
- ];
- MenuToggle.propDecorators = {
- 'menuToggle': [{ type: Input },],
- 'toggle': [{ type: HostListener, args: ['click',] },],
- };
- //# sourceMappingURL=menu-toggle.js.map
|