From 1525cf1540f9f6c3b5dad4e1fe6a038decf68831 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 28 Oct 2022 14:28:41 -0400 Subject: [PATCH 1/2] docs(menu): add multiple menus playground --- static/code/stackblitz/html/index.ts | 3 +- .../angular/example_component_html.md | 43 ++++++++++ .../multiple/angular/example_component_ts.md | 29 +++++++ static/usage/menu/multiple/demo.html | 81 +++++++++++++++++++ static/usage/menu/multiple/index.md | 26 ++++++ static/usage/menu/multiple/javascript.md | 62 ++++++++++++++ static/usage/menu/multiple/react.md | 71 ++++++++++++++++ static/usage/menu/multiple/vue.md | 74 +++++++++++++++++ 8 files changed, 388 insertions(+), 1 deletion(-) create mode 100644 static/usage/menu/multiple/angular/example_component_html.md create mode 100644 static/usage/menu/multiple/angular/example_component_ts.md create mode 100644 static/usage/menu/multiple/demo.html create mode 100644 static/usage/menu/multiple/index.md create mode 100644 static/usage/menu/multiple/javascript.md create mode 100644 static/usage/menu/multiple/react.md create mode 100644 static/usage/menu/multiple/vue.md diff --git a/static/code/stackblitz/html/index.ts b/static/code/stackblitz/html/index.ts index 952785602e6..6b73623bcdd 100644 --- a/static/code/stackblitz/html/index.ts +++ b/static/code/stackblitz/html/index.ts @@ -1,6 +1,6 @@ import { defineCustomElements } from '@ionic/core/loader'; -import { loadingController, modalController, pickerController, toastController } from '@ionic/core'; +import { 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/menu/multiple/angular/example_component_html.md b/static/usage/menu/multiple/angular/example_component_html.md new file mode 100644 index 00000000000..a81d2020f5d --- /dev/null +++ b/static/usage/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/menu/multiple/angular/example_component_ts.md b/static/usage/menu/multiple/angular/example_component_ts.md new file mode 100644 index 00000000000..18edbc360a5 --- /dev/null +++ b/static/usage/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/menu/multiple/demo.html b/static/usage/menu/multiple/demo.html new file mode 100644 index 00000000000..1f499476a2e --- /dev/null +++ b/static/usage/menu/multiple/demo.html @@ -0,0 +1,81 @@ + + + + + + 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/menu/multiple/index.md b/static/usage/menu/multiple/index.md new file mode 100644 index 00000000000..6f4000d3342 --- /dev/null +++ b/static/usage/menu/multiple/index.md @@ -0,0 +1,26 @@ +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/menu/multiple/javascript.md b/static/usage/menu/multiple/javascript.md new file mode 100644 index 00000000000..240b4a79157 --- /dev/null +++ b/static/usage/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/menu/multiple/react.md b/static/usage/menu/multiple/react.md new file mode 100644 index 00000000000..581e73ad600 --- /dev/null +++ b/static/usage/menu/multiple/react.md @@ -0,0 +1,71 @@ +```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/menu/multiple/vue.md b/static/usage/menu/multiple/vue.md new file mode 100644 index 00000000000..c26d78425c7 --- /dev/null +++ b/static/usage/menu/multiple/vue.md @@ -0,0 +1,74 @@ +```html + + + +``` From 157b758691d428a899d9fb62c4d608b787a066a8 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Fri, 28 Oct 2022 14:46:07 -0400 Subject: [PATCH 2/2] docs(menu): add sides example --- docs/api/menu.md | 38 +++++++++++++++----- static/usage/menu/sides/angular.md | 23 ++++++++++++ static/usage/menu/sides/demo.html | 38 ++++++++++++++++++++ static/usage/menu/sides/index.md | 17 +++++++++ static/usage/menu/sides/javascript.md | 23 ++++++++++++ static/usage/menu/sides/react.md | 41 +++++++++++++++++++++ static/usage/menu/sides/vue.md | 52 +++++++++++++++++++++++++++ 7 files changed, 223 insertions(+), 9 deletions(-) create mode 100644 static/usage/menu/sides/angular.md create mode 100644 static/usage/menu/sides/demo.html create mode 100644 static/usage/menu/sides/index.md create mode 100644 static/usage/menu/sides/javascript.md create mode 100644 static/usage/menu/sides/react.md create mode 100644 static/usage/menu/sides/vue.md diff --git a/docs/api/menu.md b/docs/api/menu.md index e24612796f9..c329d5ad11f 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/menu/basic/index.md'; +import Basic from '@site/static/usage/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/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/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 `MenuControler`. + +import Sides from '@site/static/usage/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/menu/multiple/index.md'; + + + + ## Theming ### CSS Shadow Parts diff --git a/static/usage/menu/sides/angular.md b/static/usage/menu/sides/angular.md new file mode 100644 index 00000000000..79974502524 --- /dev/null +++ b/static/usage/menu/sides/angular.md @@ -0,0 +1,23 @@ +```html + + + + Menu Content + + + This is the menu content. + +
+ + + Menu + + + + + + + Tap the button in the toolbar to open the menu. + +
+``` diff --git a/static/usage/menu/sides/demo.html b/static/usage/menu/sides/demo.html new file mode 100644 index 00000000000..76824169f39 --- /dev/null +++ b/static/usage/menu/sides/demo.html @@ -0,0 +1,38 @@ + + + + + + Menu + + + + + + + + + + + Menu Content + + + This is the menu content. + + +
+ + + Menu + + + + + + + Tap the button in the toolbar to open the menu. + +
+ + + diff --git a/static/usage/menu/sides/index.md b/static/usage/menu/sides/index.md new file mode 100644 index 00000000000..8d84494f8c2 --- /dev/null +++ b/static/usage/menu/sides/index.md @@ -0,0 +1,17 @@ +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/menu/sides/javascript.md b/static/usage/menu/sides/javascript.md new file mode 100644 index 00000000000..24b45371bc9 --- /dev/null +++ b/static/usage/menu/sides/javascript.md @@ -0,0 +1,23 @@ +```html + + + + Menu Content + + + This is the menu content. + +
+ + + Menu + + + + + + + Tap the button in the toolbar to open the menu. + +
+``` diff --git a/static/usage/menu/sides/react.md b/static/usage/menu/sides/react.md new file mode 100644 index 00000000000..6a29b85360e --- /dev/null +++ b/static/usage/menu/sides/react.md @@ -0,0 +1,41 @@ +```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/menu/sides/vue.md b/static/usage/menu/sides/vue.md new file mode 100644 index 00000000000..f74bbf906ee --- /dev/null +++ b/static/usage/menu/sides/vue.md @@ -0,0 +1,52 @@ +```html + + + +```