From 8cc0cfbdadf341b7618968b9ff20f049ef9e0a12 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Tue, 10 Oct 2023 10:56:20 -0400 Subject: [PATCH 1/2] docs(menu): clarify multiple side menu behavior --- docs/api/menu.md | 2 +- .../multiple/angular/example_component_ts.md | 18 +++++++++++++++--- static/usage/v7/menu/multiple/demo.html | 18 +++++++++++++++--- static/usage/v7/menu/multiple/javascript.md | 18 +++++++++++++++--- static/usage/v7/menu/multiple/react.md | 18 +++++++++++++++--- static/usage/v7/menu/multiple/vue.md | 18 +++++++++++++++--- 6 files changed, 76 insertions(+), 16 deletions(-) diff --git a/docs/api/menu.md b/docs/api/menu.md index 8549e9a88a5..71bc3acbb72 100644 --- a/docs/api/menu.md +++ b/docs/api/menu.md @@ -60,7 +60,7 @@ 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`. +When multiple menus exist on the same side, we need refer to them by ID instead of side. Otherwise, the wrong menu may be activated. import Multiple from '@site/static/usage/v7/menu/multiple/index.md'; diff --git a/static/usage/v7/menu/multiple/angular/example_component_ts.md b/static/usage/v7/menu/multiple/angular/example_component_ts.md index 18edbc360a5..d0b3f5b874d 100644 --- a/static/usage/v7/menu/multiple/angular/example_component_ts.md +++ b/static/usage/v7/menu/multiple/angular/example_component_ts.md @@ -10,19 +10,31 @@ export class ExampleComponent { constructor(private menuCtrl: MenuController) {} openFirstMenu() { - // Open the menu by menu-id + /** + * Open the menu by menu-id + * We refer to the menu using an ID + * because multiple "start" menus exist. + */ this.menuCtrl.enable(true, 'first-menu'); this.menuCtrl.open('first-menu'); } openSecondMenu() { - // Open the menu by menu-id + /** + * Open the menu by menu-id + * We refer to the menu using an ID + * because multiple "start" menus exist. + */ this.menuCtrl.enable(true, 'second-menu'); this.menuCtrl.open('second-menu'); } openEndMenu() { - // Open the menu by side + /** + * Open the menu by side + * We can refer to the menu by side + * here because only one "end" menu exists + */ this.menuCtrl.open('end'); } } diff --git a/static/usage/v7/menu/multiple/demo.html b/static/usage/v7/menu/multiple/demo.html index 2845db551d8..64876321f8a 100644 --- a/static/usage/v7/menu/multiple/demo.html +++ b/static/usage/v7/menu/multiple/demo.html @@ -62,19 +62,31 @@ diff --git a/static/usage/v7/menu/multiple/javascript.md b/static/usage/v7/menu/multiple/javascript.md index 240b4a79157..b5b0c346dda 100644 --- a/static/usage/v7/menu/multiple/javascript.md +++ b/static/usage/v7/menu/multiple/javascript.md @@ -43,19 +43,31 @@ diff --git a/static/usage/v7/menu/multiple/react.md b/static/usage/v7/menu/multiple/react.md index 9ba2357603c..48b77c72aa2 100644 --- a/static/usage/v7/menu/multiple/react.md +++ b/static/usage/v7/menu/multiple/react.md @@ -5,19 +5,31 @@ import { menuController } from '@ionic/core/components'; function Example() { async function openFirstMenu() { - // Open the menu by menu-id + /** + * Open the menu by menu-id + * We refer to the menu using an ID + * because multiple "start" menus exist. + */ await menuController.enable(true, 'first-menu'); await menuController.open('first-menu'); } async function openSecondMenu() { - // Open the menu by menu-id + /** + * Open the menu by menu-id + * We refer to the menu using an ID + * because multiple "start" menus exist. + */ await menuController.enable(true, 'second-menu'); await menuController.open('second-menu'); } async function openEndMenu() { - // Open the menu by side + /** + * Open the menu by side + * We can refer to the menu by side + * here because only one "end" menu exists + */ await menuController.open('end'); } diff --git a/static/usage/v7/menu/multiple/vue.md b/static/usage/v7/menu/multiple/vue.md index f9a4932767f..58a27c042e2 100644 --- a/static/usage/v7/menu/multiple/vue.md +++ b/static/usage/v7/menu/multiple/vue.md @@ -51,19 +51,31 @@ components: { IonButton, IonContent, IonHeader, IonMenu, IonPage, IonTitle, IonToolbar, menuController }, setup() { const openFirstMenu = async () => { - // Open the menu by menu-id + /** + * Open the menu by menu-id + * We refer to the menu using an ID + * because multiple "start" menus exist. + */ await menuController.enable(true, 'first-menu'); await menuController.open('first-menu'); }; const openSecondMenu = async () => { - // Open the menu by menu-id + /** + * Open the menu by menu-id + * We refer to the menu using an ID + * because multiple "start" menus exist. + */ await menuController.enable(true, 'second-menu'); await menuController.open('second-menu'); }; const openEndMenu = async () => { - // Open the menu by side + /** + * Open the menu by side + * We can refer to the menu by side + * here because only one "end" menu exists + */ await menuController.open('end'); }; From 15c9f22e89522eb144b5557a42e864ad0dfb4a12 Mon Sep 17 00:00:00 2001 From: Liam DeBeasi Date: Wed, 11 Oct 2023 09:47:05 -0400 Subject: [PATCH 2/2] remove enable calls --- static/usage/v7/menu/multiple/angular/example_component_ts.md | 2 -- static/usage/v7/menu/multiple/demo.html | 2 -- static/usage/v7/menu/multiple/javascript.md | 2 -- static/usage/v7/menu/multiple/react.md | 2 -- static/usage/v7/menu/multiple/vue.md | 2 -- 5 files changed, 10 deletions(-) diff --git a/static/usage/v7/menu/multiple/angular/example_component_ts.md b/static/usage/v7/menu/multiple/angular/example_component_ts.md index d0b3f5b874d..3c4f3f1fbb8 100644 --- a/static/usage/v7/menu/multiple/angular/example_component_ts.md +++ b/static/usage/v7/menu/multiple/angular/example_component_ts.md @@ -15,7 +15,6 @@ export class ExampleComponent { * We refer to the menu using an ID * because multiple "start" menus exist. */ - this.menuCtrl.enable(true, 'first-menu'); this.menuCtrl.open('first-menu'); } @@ -25,7 +24,6 @@ export class ExampleComponent { * We refer to the menu using an ID * because multiple "start" menus exist. */ - this.menuCtrl.enable(true, 'second-menu'); this.menuCtrl.open('second-menu'); } diff --git a/static/usage/v7/menu/multiple/demo.html b/static/usage/v7/menu/multiple/demo.html index 64876321f8a..911160d8663 100644 --- a/static/usage/v7/menu/multiple/demo.html +++ b/static/usage/v7/menu/multiple/demo.html @@ -67,7 +67,6 @@ * We refer to the menu using an ID * because multiple "start" menus exist. */ - await menuController.enable(true, 'first-menu'); await menuController.open('first-menu'); } @@ -77,7 +76,6 @@ * We refer to the menu using an ID * because multiple "start" menus exist. */ - await menuController.enable(true, 'second-menu'); await menuController.open('second-menu'); } diff --git a/static/usage/v7/menu/multiple/javascript.md b/static/usage/v7/menu/multiple/javascript.md index b5b0c346dda..cecfc4c71af 100644 --- a/static/usage/v7/menu/multiple/javascript.md +++ b/static/usage/v7/menu/multiple/javascript.md @@ -48,7 +48,6 @@ * We refer to the menu using an ID * because multiple "start" menus exist. */ - await menuController.enable(true, 'first-menu'); await menuController.open('first-menu'); } @@ -58,7 +57,6 @@ * We refer to the menu using an ID * because multiple "start" menus exist. */ - await menuController.enable(true, 'second-menu'); await menuController.open('second-menu'); } diff --git a/static/usage/v7/menu/multiple/react.md b/static/usage/v7/menu/multiple/react.md index 48b77c72aa2..d77ae05a8a8 100644 --- a/static/usage/v7/menu/multiple/react.md +++ b/static/usage/v7/menu/multiple/react.md @@ -10,7 +10,6 @@ function Example() { * We refer to the menu using an ID * because multiple "start" menus exist. */ - await menuController.enable(true, 'first-menu'); await menuController.open('first-menu'); } @@ -20,7 +19,6 @@ function Example() { * We refer to the menu using an ID * because multiple "start" menus exist. */ - await menuController.enable(true, 'second-menu'); await menuController.open('second-menu'); } diff --git a/static/usage/v7/menu/multiple/vue.md b/static/usage/v7/menu/multiple/vue.md index 58a27c042e2..1fb4e986f44 100644 --- a/static/usage/v7/menu/multiple/vue.md +++ b/static/usage/v7/menu/multiple/vue.md @@ -56,7 +56,6 @@ * We refer to the menu using an ID * because multiple "start" menus exist. */ - await menuController.enable(true, 'first-menu'); await menuController.open('first-menu'); }; @@ -66,7 +65,6 @@ * We refer to the menu using an ID * because multiple "start" menus exist. */ - await menuController.enable(true, 'second-menu'); await menuController.open('second-menu'); };