diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
index cbea26c80e..8c5bf6605b 100644
--- a/packages/core/src/components.d.ts
+++ b/packages/core/src/components.d.ts
@@ -4,8 +4,6 @@
* and imports for stencil collections that might be configured in your stencil.config.js file
*/
-import 'ionicons';
-
import {
AnimationBuilder,
FrameworkDelegate,
@@ -1686,6 +1684,38 @@ declare global {
}
+import {
+ MenuButton as IonMenuButton
+} from './components/menu-button/menu-button';
+
+declare global {
+ interface HTMLIonMenuButtonElement extends IonMenuButton, HTMLStencilElement {
+ }
+ var HTMLIonMenuButtonElement: {
+ prototype: HTMLIonMenuButtonElement;
+ new (): HTMLIonMenuButtonElement;
+ };
+ interface HTMLElementTagNameMap {
+ "ion-menu-button": HTMLIonMenuButtonElement;
+ }
+ interface ElementTagNameMap {
+ "ion-menu-button": HTMLIonMenuButtonElement;
+ }
+ namespace JSX {
+ interface IntrinsicElements {
+ "ion-menu-button": JSXElements.IonMenuButtonAttributes;
+ }
+ }
+ namespace JSXElements {
+ export interface IonMenuButtonAttributes extends HTMLAttributes {
+ autoHide?: boolean;
+ menu?: string;
+ mode?: 'ios' | 'md';
+ }
+ }
+}
+
+
import {
MenuController as IonMenuController
} from './components/menu-controller/menu-controller';
diff --git a/packages/core/src/components/menu-button/menu-button.ios.scss b/packages/core/src/components/menu-button/menu-button.ios.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/core/src/components/menu-button/menu-button.md.scss b/packages/core/src/components/menu-button/menu-button.md.scss
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/core/src/components/menu-button/menu-button.tsx b/packages/core/src/components/menu-button/menu-button.tsx
new file mode 100644
index 0000000000..9dead27112
--- /dev/null
+++ b/packages/core/src/components/menu-button/menu-button.tsx
@@ -0,0 +1,64 @@
+import { Component, Element, Prop, State } from '@stencil/core';
+import { Config } from '../../index';
+
+@Component({
+ tag: 'ion-menu-button',
+ styleUrls: {
+ ios: 'menu-button.ios.scss',
+ md: 'menu-button.md.scss'
+ },
+ host: {
+ theme: 'menu-button'
+ }
+})
+export class MenuButton {
+
+ @State() custom: boolean;
+
+ /**
+ * The mode determines which platform styles to use.
+ * Possible values are: `"ios"` or `"md"`.
+ * For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+ */
+ @Prop() mode: 'ios' | 'md';
+
+ /**
+ * Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle
+ */
+ @Prop() menu: string;
+
+ /**
+ * Automatically hides the content when the corresponding menu is not
+ * active
+ */
+ @Prop() autoHide = true;
+
+
+ @Prop({ context: 'config' }) config: Config;
+
+ @Element() el: HTMLElement;
+
+ componentWillLoad() {
+ this.custom = this.el.childElementCount > 0;
+ }
+
+ render() {
+ const menuIcon = this.config.get('menuIcon', 'menu');
+
+ if (this.custom) {
+ return (
+
+
+
+ );
+ } else {
+ return (
+
+
+
+
+
+ );
+ }
+ }
+}
diff --git a/packages/core/src/components/menu-button/readme.md b/packages/core/src/components/menu-button/readme.md
new file mode 100644
index 0000000000..650285a720
--- /dev/null
+++ b/packages/core/src/components/menu-button/readme.md
@@ -0,0 +1,63 @@
+# ion-menu-button
+
+
+
+
+
+
+## Properties
+
+#### autoHide
+
+boolean
+
+Automatically hides the content when the corresponding menu is not
+active
+
+
+#### menu
+
+string
+
+Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle
+
+
+#### mode
+
+
+
+The mode determines which platform styles to use.
+Possible values are: `"ios"` or `"md"`.
+For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+
+
+## Attributes
+
+#### auto-hide
+
+boolean
+
+Automatically hides the content when the corresponding menu is not
+active
+
+
+#### menu
+
+string
+
+Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle
+
+
+#### mode
+
+
+
+The mode determines which platform styles to use.
+Possible values are: `"ios"` or `"md"`.
+For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
+
+
+
+----------------------------------------------
+
+*Built with [StencilJS](https://stenciljs.com/)*
diff --git a/packages/core/src/components/menu-toggle/menu-toggle.tsx b/packages/core/src/components/menu-toggle/menu-toggle.tsx
index c55fe97168..be4a4ca3d6 100644
--- a/packages/core/src/components/menu-toggle/menu-toggle.tsx
+++ b/packages/core/src/components/menu-toggle/menu-toggle.tsx
@@ -7,11 +7,16 @@ import { Component, Listen, Prop, State } from '@stencil/core';
export class MenuToggle {
@State() visible = false;
+
/**
* Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `right` for the menu side. This is used to find the correct menu to toggle
*/
@Prop() menu: string;
+ /**
+ * Automatically hides the content when the corresponding menu is not
+ * active
+ */
@Prop() autoHide = true;
componentDidLoad() {
diff --git a/packages/core/src/components/menu-toggle/readme.md b/packages/core/src/components/menu-toggle/readme.md
index 17064e2eba..a29e55a641 100644
--- a/packages/core/src/components/menu-toggle/readme.md
+++ b/packages/core/src/components/menu-toggle/readme.md
@@ -11,6 +11,9 @@
boolean
+Automatically hides the content when the corresponding menu is not
+active
+
#### menu
@@ -25,6 +28,9 @@ Optional property that maps to a Menu's `menuId` prop. Can also be `left` or `ri
boolean
+Automatically hides the content when the corresponding menu is not
+active
+
#### menu
diff --git a/packages/core/stencil.config.js b/packages/core/stencil.config.js
index 26acf1b53f..e04ce6c5b8 100644
--- a/packages/core/stencil.config.js
+++ b/packages/core/stencil.config.js
@@ -27,7 +27,7 @@ exports.config = {
{ components: ['ion-infinite-scroll', 'ion-infinite-scroll-content'] },
{ components: ['ion-input', 'ion-textarea'] },
{ components: ['ion-loading', 'ion-loading-controller'] },
- { components: ['ion-menu', 'ion-menu-controller'] },
+ { components: ['ion-menu', 'ion-menu-controller', 'ion-menu-toggle', 'ion-menu-button'] },
{ components: ['ion-modal', 'ion-modal-controller'] },
{ components: ['ion-nav', 'ion-page', 'ion-back-button'] },
{ components: ['ion-popover', 'ion-popover-controller'] },