menu-toggle.d.ts 2.8KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. import { Button } from '../button/button';
  2. import { MenuController } from '../app/menu-controller';
  3. import { Navbar } from '../toolbar/navbar';
  4. import { ViewController } from '../../navigation/view-controller';
  5. /**
  6. * @name MenuToggle
  7. * @description
  8. * The `menuToggle` directive can be placed on any button to toggle a menu open or closed.
  9. * If it is added to the [NavBar](../../toolbar/Navbar) of a page, the button will only appear
  10. * when the page it's in is currently a root page. See the [Menu Navigation Bar Behavior](../Menu#navigation-bar-behavior)
  11. * docs for more information.
  12. *
  13. *
  14. * @usage
  15. *
  16. * A simple `menuToggle` button can be added using the following markup:
  17. *
  18. * ```html
  19. * <button ion-button menuToggle>Toggle Menu</button>
  20. * ```
  21. *
  22. * To toggle a specific menu by its id or side, give the `menuToggle`
  23. * directive a value.
  24. *
  25. * ```html
  26. * <button ion-button menuToggle="right">Toggle Right Menu</button>
  27. * ```
  28. *
  29. * If placing the `menuToggle` in a navbar or toolbar, it should be
  30. * placed as a child of the `<ion-navbar>` or `<ion-toolbar>`, and not in
  31. * the `<ion-buttons>` element:
  32. *
  33. * ```html
  34. * <ion-header>
  35. *
  36. * <ion-navbar>
  37. * <ion-buttons start>
  38. * <button ion-button>
  39. * <ion-icon name="contact"></ion-icon>
  40. * </button>
  41. * </ion-buttons>
  42. * <button ion-button menuToggle>
  43. * <ion-icon name="menu"></ion-icon>
  44. * </button>
  45. * <ion-title>
  46. * Title
  47. * </ion-title>
  48. * <ion-buttons end>
  49. * <button ion-button (click)="doClick()">
  50. * <ion-icon name="more"></ion-icon>
  51. * </button>
  52. * </ion-buttons>
  53. * </ion-navbar>
  54. *
  55. * </ion-header>
  56. * ```
  57. *
  58. * Similar to `<ion-buttons>`, the `menuToggle` can be positioned using
  59. * `start`, `end`, `left`, or `right`:
  60. *
  61. * ```html
  62. * <ion-toolbar>
  63. * <button ion-button menuToggle right>
  64. * <ion-icon name="menu"></ion-icon>
  65. * </button>
  66. * <ion-title>
  67. * Title
  68. * </ion-title>
  69. * <ion-buttons end>
  70. * <button ion-button (click)="doClick()">
  71. * <ion-icon name="more"></ion-icon>
  72. * </button>
  73. * </ion-buttons>
  74. * </ion-toolbar>
  75. * ```
  76. *
  77. * See the [Toolbar API docs](../../toolbar/Toolbar) for more information
  78. * on the different positions.
  79. *
  80. * @demo /docs/demos/src/menu/
  81. * @see {@link /docs/components#menus Menu Component Docs}
  82. * @see {@link ../../menu/Menu Menu API Docs}
  83. */
  84. export declare class MenuToggle {
  85. private _menu;
  86. private _viewCtrl;
  87. private _button;
  88. /**
  89. * @hidden
  90. */
  91. menuToggle: string;
  92. /**
  93. * @hidden
  94. */
  95. private _isButton;
  96. /**
  97. * @hidden
  98. */
  99. private _inNavbar;
  100. constructor(_menu: MenuController, _viewCtrl: ViewController, _button: Button, _navbar: Navbar);
  101. ngAfterContentInit(): void;
  102. /**
  103. * @hidden
  104. */
  105. toggle(): void;
  106. /**
  107. * @hidden
  108. */
  109. readonly isHidden: boolean;
  110. }