diff --git a/docs/api/menu.md b/docs/api/menu.md index 1918527a15a..8549e9a88a5 100644 --- a/docs/api/menu.md +++ b/docs/api/menu.md @@ -18,27 +18,26 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill'; -The Menu component is a navigation drawer that slides in from the side of the current view. -By default, it slides in from the left, but the side can be overridden. -The menu will be displayed differently based on the mode, however the display type can be changed to any of the available menu types. -The menu element should be a sibling to the root content element. -There can be any number of menus attached to the content. -These can be controlled from the templates, or programmatically using the MenuController. +The menu component is a navigation drawer that slides in from the side of the current view. By default, it uses the start side, making it slide in from the left for LTR and right for RTL, but the side can be overridden. The menu will be displayed differently based on the mode, however the display type can be changed to any of the available menu types. + +The menu element should be a sibling to the root content element. There can be any number of menus attached to the content. These can be controlled from the templates, or programmatically using the `MenuController`. ## Basic Usage -import BasicUsage from '@site/static/usage/v7/menu/basic/index.md'; +import Basic from '@site/static/usage/v7/menu/basic/index.md'; + + - ## Menu Toggle -The [ion-menu-toggle](./menu-toggle) component can be used to create custom button that can open or close the menu. +The [menu toggle](./menu-toggle) component can be used to create custom button that can open or close the menu. import MenuToggle from '@site/static/usage/v7/menu/toggle/index.md'; + ## Menu Types The `type` property can be used to customize how menus display in your application. @@ -47,6 +46,27 @@ import MenuType from '@site/static/usage/v7/menu/type/index.md'; + +## Menu Sides + +Menus are displayed on the `"start"` side by default. In apps that use left-to-right direction, this is the left side, and in right-to-left apps, this will be the right side. Menus can also be set to display on the `"end"` side, which is the opposite of `"start"`. + +If menus on both sides are needed in an app, the menu can be opened by passing the `side` value to the `open` method on `MenuController`. If a side is not provided, the menu on the `"start"` side will be opened. See the [multiple menus](#multiple-menus) section below for an example using `MenuController`. + +import Sides from '@site/static/usage/v7/menu/sides/index.md'; + + + + +## Multiple Menus + +When multiple menus exist on the same side, we need to enable the menu that we want to open before it can be opened. This can be done by calling the `enable` method on the `MenuController`. We can then call `open` on a menu based on its `menuId` or `side`. + +import Multiple from '@site/static/usage/v7/menu/multiple/index.md'; + + + + ## Theming ### CSS Shadow Parts diff --git a/static/code/stackblitz/v7/html/index.ts b/static/code/stackblitz/v7/html/index.ts index 071bc801d6c..2cc510047cd 100644 --- a/static/code/stackblitz/v7/html/index.ts +++ b/static/code/stackblitz/v7/html/index.ts @@ -1,6 +1,6 @@ import { defineCustomElements } from '@ionic/core/loader'; -import { createAnimation, createGesture, loadingController, modalController, pickerController, toastController } from '@ionic/core'; +import { createAnimation, createGesture, loadingController, menuController, modalController, pickerController, toastController } from '@ionic/core'; /* Core CSS required for Ionic components to work properly */ import '@ionic/core/css/core.css'; @@ -24,6 +24,7 @@ import './theme/variables.css'; defineCustomElements(); (window as any).loadingController = loadingController; +(window as any).menuController = menuController; (window as any).modalController = modalController; (window as any).pickerController = pickerController; (window as any).toastController = toastController; diff --git a/static/usage/v7/menu/multiple/angular/example_component_html.md b/static/usage/v7/menu/multiple/angular/example_component_html.md new file mode 100644 index 00000000000..a81d2020f5d --- /dev/null +++ b/static/usage/v7/menu/multiple/angular/example_component_html.md @@ -0,0 +1,43 @@ +```html + + + + First Menu + + + This is the first menu content. + + + + + + Second Menu + + + This is the second menu content. + + + + + + End Menu + + + This is the end menu content. + + +
+ + + Menu + + + +

Tap a button below to open a specific menu.

+ + Open First Menu + Open Second Menu + Open End Menu + +
+``` diff --git a/static/usage/v7/menu/multiple/angular/example_component_ts.md b/static/usage/v7/menu/multiple/angular/example_component_ts.md new file mode 100644 index 00000000000..18edbc360a5 --- /dev/null +++ b/static/usage/v7/menu/multiple/angular/example_component_ts.md @@ -0,0 +1,29 @@ +```ts +import { Component } from '@angular/core'; +import { MenuController } from '@ionic/angular'; + +@Component({ + selector: 'app-example', + templateUrl: 'example.component.html', +}) +export class ExampleComponent { + constructor(private menuCtrl: MenuController) {} + + openFirstMenu() { + // Open the menu by menu-id + this.menuCtrl.enable(true, 'first-menu'); + this.menuCtrl.open('first-menu'); + } + + openSecondMenu() { + // Open the menu by menu-id + this.menuCtrl.enable(true, 'second-menu'); + this.menuCtrl.open('second-menu'); + } + + openEndMenu() { + // Open the menu by side + this.menuCtrl.open('end'); + } +} +``` diff --git a/static/usage/v7/menu/multiple/demo.html b/static/usage/v7/menu/multiple/demo.html new file mode 100644 index 00000000000..2845db551d8 --- /dev/null +++ b/static/usage/v7/menu/multiple/demo.html @@ -0,0 +1,82 @@ + + + + + + Menu + + + + + + + + + + + + + + First Menu + + + This is the first menu content. + + + + + + Second Menu + + + This is the second menu content. + + + + + + End Menu + + + This is the end menu content. + + +
+ + + Menu + + + +

Tap a button below to open a specific menu.

+ + Open First Menu + Open Second Menu + Open End Menu + +
+ + + + + diff --git a/static/usage/v7/menu/multiple/index.md b/static/usage/v7/menu/multiple/index.md new file mode 100644 index 00000000000..049f17a5833 --- /dev/null +++ b/static/usage/v7/menu/multiple/index.md @@ -0,0 +1,27 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; + +import react from './react.md'; + +import vue from './vue.md'; + +import angular_example_component_html from './angular/example_component_html.md'; +import angular_example_component_ts from './angular/example_component_ts.md'; + + diff --git a/static/usage/v7/menu/multiple/javascript.md b/static/usage/v7/menu/multiple/javascript.md new file mode 100644 index 00000000000..240b4a79157 --- /dev/null +++ b/static/usage/v7/menu/multiple/javascript.md @@ -0,0 +1,62 @@ +```html + + + + First Menu + + + This is the first menu content. + + + + + + Second Menu + + + This is the second menu content. + + + + + + End Menu + + + This is the end menu content. + + +
+ + + Menu + + + +

Tap a button below to open a specific menu.

+ + Open First Menu + Open Second Menu + Open End Menu + +
+ + +``` diff --git a/static/usage/v7/menu/multiple/react.md b/static/usage/v7/menu/multiple/react.md new file mode 100644 index 00000000000..9ba2357603c --- /dev/null +++ b/static/usage/v7/menu/multiple/react.md @@ -0,0 +1,77 @@ +```tsx +import React from 'react'; +import { IonButton, IonContent, IonHeader, IonMenu, IonPage, IonTitle, IonToolbar } from '@ionic/react'; +import { menuController } from '@ionic/core/components'; + +function Example() { + async function openFirstMenu() { + // Open the menu by menu-id + await menuController.enable(true, 'first-menu'); + await menuController.open('first-menu'); + } + + async function openSecondMenu() { + // Open the menu by menu-id + await menuController.enable(true, 'second-menu'); + await menuController.open('second-menu'); + } + + async function openEndMenu() { + // Open the menu by side + await menuController.open('end'); + } + + return ( + <> + + + + First Menu + + + This is the first menu content. + + + + + + Second Menu + + + This is the second menu content. + + + + + + End Menu + + + This is the end menu content. + + + + + + Menu + + + +

Tap a button below to open a specific menu.

+ + + Open First Menu + + + Open Second Menu + + + Open End Menu + + + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/menu/multiple/vue.md b/static/usage/v7/menu/multiple/vue.md new file mode 100644 index 00000000000..f9a4932767f --- /dev/null +++ b/static/usage/v7/menu/multiple/vue.md @@ -0,0 +1,74 @@ +```html + + + +``` diff --git a/static/usage/v7/menu/sides/angular.md b/static/usage/v7/menu/sides/angular.md new file mode 100644 index 00000000000..b9f7a01069d --- /dev/null +++ b/static/usage/v7/menu/sides/angular.md @@ -0,0 +1,21 @@ +```html + + + + Menu Content + + + This is the menu content. + +
+ + + Menu + + + + + + Tap the button in the toolbar to open the menu. +
+``` diff --git a/static/usage/v7/menu/sides/demo.html b/static/usage/v7/menu/sides/demo.html new file mode 100644 index 00000000000..6b636752ae4 --- /dev/null +++ b/static/usage/v7/menu/sides/demo.html @@ -0,0 +1,37 @@ + + + + + + Menu + + + + + + + + + + + + Menu Content + + + This is the menu content. + + +
+ + + Menu + + + + + + Tap the button in the toolbar to open the menu. +
+ + + diff --git a/static/usage/v7/menu/sides/index.md b/static/usage/v7/menu/sides/index.md new file mode 100644 index 00000000000..f62678655f6 --- /dev/null +++ b/static/usage/v7/menu/sides/index.md @@ -0,0 +1,18 @@ +import Playground from '@site/src/components/global/Playground'; + +import javascript from './javascript.md'; +import react from './react.md'; +import vue from './vue.md'; +import angular from './angular.md'; + + diff --git a/static/usage/v7/menu/sides/javascript.md b/static/usage/v7/menu/sides/javascript.md new file mode 100644 index 00000000000..543806395fc --- /dev/null +++ b/static/usage/v7/menu/sides/javascript.md @@ -0,0 +1,21 @@ +```html + + + + Menu Content + + + This is the menu content. + +
+ + + Menu + + + + + + Tap the button in the toolbar to open the menu. +
+``` diff --git a/static/usage/v7/menu/sides/react.md b/static/usage/v7/menu/sides/react.md new file mode 100644 index 00000000000..cbb73598dae --- /dev/null +++ b/static/usage/v7/menu/sides/react.md @@ -0,0 +1,30 @@ +```tsx +import React from 'react'; +import { IonButtons, IonContent, IonHeader, IonMenu, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/react'; +function Example() { + return ( + <> + + + + Menu Content + + + This is the menu content. + + + + + Menu + + + + + + Tap the button in the toolbar to open the menu. + + + ); +} +export default Example; +``` diff --git a/static/usage/v7/menu/sides/vue.md b/static/usage/v7/menu/sides/vue.md new file mode 100644 index 00000000000..66448f05bf6 --- /dev/null +++ b/static/usage/v7/menu/sides/vue.md @@ -0,0 +1,41 @@ +```html + + + +```