Skip to content

Commit d57ab7e

Browse files
brandyscarneybrandyscarney
authored
docs(menu): add playgrounds for menu sides and multiple menus (#3049)
1 parent 8e35d5f commit d57ab7e

File tree

15 files changed

+593
-10
lines changed

15 files changed

+593
-10
lines changed

‎docs/api/menu.md

Lines changed: 29 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -18,27 +18,26 @@ import EncapsulationPill from '@components/page/api/EncapsulationPill';
1818
<EncapsulationPill type="shadow" />
1919

2020

21-
The Menu component is a navigation drawer that slides in from the side of the current view.
22-
By default, it slides in from the left, but the side can be overridden.
23-
The menu will be displayed differently based on the mode, however the display type can be changed to any of the available menu types.
24-
The menu element should be a sibling to the root content element.
25-
There can be any number of menus attached to the content.
26-
These can be controlled from the templates, or programmatically using the MenuController.
21+
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.
22+
23+
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`.
2724

2825
## Basic Usage
2926

30-
import BasicUsage from '@site/static/usage/v7/menu/basic/index.md';
27+
import Basic from '@site/static/usage/v7/menu/basic/index.md';
28+
29+
<Basic />
3130

32-
<BasicUsage />
3331

3432
## Menu Toggle
3533

36-
The [ion-menu-toggle](./menu-toggle) component can be used to create custom button that can open or close the menu.
34+
The [menu toggle](./menu-toggle) component can be used to create custom button that can open or close the menu.
3735

3836
import MenuToggle from '@site/static/usage/v7/menu/toggle/index.md';
3937

4038
<MenuToggle />
4139

40+
4241
## Menu Types
4342

4443
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';
4746

4847
<MenuType />
4948

49+
50+
## Menu Sides
51+
52+
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"`.
53+
54+
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`.
55+
56+
import Sides from '@site/static/usage/v7/menu/sides/index.md';
57+
58+
<Sides />
59+
60+
61+
## Multiple Menus
62+
63+
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`.
64+
65+
import Multiple from '@site/static/usage/v7/menu/multiple/index.md';
66+
67+
<Multiple />
68+
69+
5070
## Theming
5171

5272
### CSS Shadow Parts

‎static/code/stackblitz/v7/html/index.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { defineCustomElements } from '@ionic/core/loader';
22

3-
import { createAnimation, createGesture, loadingController, modalController, pickerController, toastController } from '@ionic/core';
3+
import { createAnimation, createGesture, loadingController, menuController, modalController, pickerController, toastController } from '@ionic/core';
44

55
/* Core CSS required for Ionic components to work properly */
66
import '@ionic/core/css/core.css';
@@ -24,6 +24,7 @@ import './theme/variables.css';
2424
defineCustomElements();
2525

2626
(window as any).loadingController = loadingController;
27+
(window as any).menuController = menuController;
2728
(window as any).modalController = modalController;
2829
(window as any).pickerController = pickerController;
2930
(window as any).toastController = toastController;

‎static/usage/v7/menu/multiple/angular/example_component_html.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
```html
2+
<ion-menu menuId="first-menu" contentId="main-content">
3+
<ion-header>
4+
<ion-toolbar>
5+
<ion-title>First Menu</ion-title>
6+
</ion-toolbar>
7+
</ion-header>
8+
<ion-content class="ion-padding">This is the first menu content.</ion-content>
9+
</ion-menu>
10+
11+
<ion-menu menuId="second-menu" contentId="main-content">
12+
<ion-header>
13+
<ion-toolbar>
14+
<ion-title>Second Menu</ion-title>
15+
</ion-toolbar>
16+
</ion-header>
17+
<ion-content class="ion-padding">This is the second menu content.</ion-content>
18+
</ion-menu>
19+
20+
<ion-menu side="end" contentId="main-content">
21+
<ion-header>
22+
<ion-toolbar>
23+
<ion-title>End Menu</ion-title>
24+
</ion-toolbar>
25+
</ion-header>
26+
<ion-content class="ion-padding">This is the end menu content.</ion-content>
27+
</ion-menu>
28+
29+
<div class="ion-page" id="main-content">
30+
<ion-header>
31+
<ion-toolbar>
32+
<ion-title>Menu</ion-title>
33+
</ion-toolbar>
34+
</ion-header>
35+
<ion-content class="ion-padding">
36+
<p>Tap a button below to open a specific menu.</p>
37+
38+
<ion-button expand="block" (click)="openFirstMenu()">Open First Menu</ion-button>
39+
<ion-button expand="block" (click)="openSecondMenu()">Open Second Menu</ion-button>
40+
<ion-button expand="block" (click)="openEndMenu()">Open End Menu</ion-button>
41+
</ion-content>
42+
</div>
43+
```

‎static/usage/v7/menu/multiple/angular/example_component_ts.md

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
```ts
2+
import { Component } from '@angular/core';
3+
import { MenuController } from '@ionic/angular';
4+
5+
@Component({
6+
selector: 'app-example',
7+
templateUrl: 'example.component.html',
8+
})
9+
export class ExampleComponent {
10+
constructor(private menuCtrl: MenuController) {}
11+
12+
openFirstMenu() {
13+
// Open the menu by menu-id
14+
this.menuCtrl.enable(true, 'first-menu');
15+
this.menuCtrl.open('first-menu');
16+
}
17+
18+
openSecondMenu() {
19+
// Open the menu by menu-id
20+
this.menuCtrl.enable(true, 'second-menu');
21+
this.menuCtrl.open('second-menu');
22+
}
23+
24+
openEndMenu() {
25+
// Open the menu by side
26+
this.menuCtrl.open('end');
27+
}
28+
}
29+
```

‎static/usage/v7/menu/multiple/demo.html

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Menu</title>
7+
<link rel="stylesheet" href="../../../common.css" />
8+
<script src="../../../common.js"></script>
9+
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@7/css/ionic.bundle.css" />
11+
12+
<script type="module">
13+
import { menuController } from 'https://cdn.jsdelivr.net/npm/@ionic/core@7/dist/ionic/index.esm.js';
14+
window.menuController = menuController;
15+
</script>
16+
</head>
17+
18+
<body>
19+
<ion-app>
20+
<ion-menu menu-id="first-menu" content-id="main-content">
21+
<ion-header>
22+
<ion-toolbar>
23+
<ion-title>First Menu</ion-title>
24+
</ion-toolbar>
25+
</ion-header>
26+
<ion-content class="ion-padding">This is the first menu content.</ion-content>
27+
</ion-menu>
28+
29+
<ion-menu menu-id="second-menu" content-id="main-content">
30+
<ion-header>
31+
<ion-toolbar>
32+
<ion-title>Second Menu</ion-title>
33+
</ion-toolbar>
34+
</ion-header>
35+
<ion-content class="ion-padding">This is the second menu content.</ion-content>
36+
</ion-menu>
37+
38+
<ion-menu side="end" content-id="main-content">
39+
<ion-header>
40+
<ion-toolbar>
41+
<ion-title>End Menu</ion-title>
42+
</ion-toolbar>
43+
</ion-header>
44+
<ion-content class="ion-padding">This is the end menu content.</ion-content>
45+
</ion-menu>
46+
47+
<div class="ion-page" id="main-content">
48+
<ion-header>
49+
<ion-toolbar>
50+
<ion-title>Menu</ion-title>
51+
</ion-toolbar>
52+
</ion-header>
53+
<ion-content class="ion-padding">
54+
<p>Tap a button below to open a specific menu.</p>
55+
56+
<ion-button expand="block" onclick="openFirstMenu()">Open First Menu</ion-button>
57+
<ion-button expand="block" onclick="openSecondMenu()">Open Second Menu</ion-button>
58+
<ion-button expand="block" onclick="openEndMenu()">Open End Menu</ion-button>
59+
</ion-content>
60+
</div>
61+
</ion-app>
62+
63+
<script>
64+
async function openFirstMenu() {
65+
// Open the menu by menu-id
66+
await menuController.enable(true, 'first-menu');
67+
await menuController.open('first-menu');
68+
}
69+
70+
async function openSecondMenu() {
71+
// Open the menu by menu-id
72+
await menuController.enable(true, 'second-menu');
73+
await menuController.open('second-menu');
74+
}
75+
76+
async function openEndMenu() {
77+
// Open the menu by side
78+
await menuController.open('end');
79+
}
80+
</script>
81+
</body>
82+
</html>

‎static/usage/v7/menu/multiple/index.md

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
5+
import react from './react.md';
6+
7+
import vue from './vue.md';
8+
9+
import angular_example_component_html from './angular/example_component_html.md';
10+
import angular_example_component_ts from './angular/example_component_ts.md';
11+
12+
<Playground
13+
version="7"
14+
code={{
15+
javascript,
16+
react,
17+
vue,
18+
angular: {
19+
files: {
20+
'src/app/example.component.html': angular_example_component_html,
21+
'src/app/example.component.ts': angular_example_component_ts,
22+
},
23+
},
24+
}}
25+
src="usage/v7/menu/multiple/demo.html"
26+
devicePreview
27+
/>

‎static/usage/v7/menu/multiple/javascript.md

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
```html
2+
<ion-menu menu-id="first-menu" content-id="main-content">
3+
<ion-header>
4+
<ion-toolbar>
5+
<ion-title>First Menu</ion-title>
6+
</ion-toolbar>
7+
</ion-header>
8+
<ion-content class="ion-padding">This is the first menu content.</ion-content>
9+
</ion-menu>
10+
11+
<ion-menu menu-id="second-menu" content-id="main-content">
12+
<ion-header>
13+
<ion-toolbar>
14+
<ion-title>Second Menu</ion-title>
15+
</ion-toolbar>
16+
</ion-header>
17+
<ion-content class="ion-padding">This is the second menu content.</ion-content>
18+
</ion-menu>
19+
20+
<ion-menu side="end" content-id="main-content">
21+
<ion-header>
22+
<ion-toolbar>
23+
<ion-title>End Menu</ion-title>
24+
</ion-toolbar>
25+
</ion-header>
26+
<ion-content class="ion-padding">This is the end menu content.</ion-content>
27+
</ion-menu>
28+
29+
<div class="ion-page" id="main-content">
30+
<ion-header>
31+
<ion-toolbar>
32+
<ion-title>Menu</ion-title>
33+
</ion-toolbar>
34+
</ion-header>
35+
<ion-content class="ion-padding">
36+
<p>Tap a button below to open a specific menu.</p>
37+
38+
<ion-button expand="block" onclick="openFirstMenu()">Open First Menu</ion-button>
39+
<ion-button expand="block" onclick="openSecondMenu()">Open Second Menu</ion-button>
40+
<ion-button expand="block" onclick="openEndMenu()">Open End Menu</ion-button>
41+
</ion-content>
42+
</div>
43+
44+
<script>
45+
async function openFirstMenu() {
46+
// Open the menu by menu-id
47+
await menuController.enable(true, 'first-menu');
48+
await menuController.open('first-menu');
49+
}
50+
51+
async function openSecondMenu() {
52+
// Open the menu by menu-id
53+
await menuController.enable(true, 'second-menu');
54+
await menuController.open('second-menu');
55+
}
56+
57+
async function openEndMenu() {
58+
// Open the menu by side
59+
await menuController.open('end');
60+
}
61+
</script>
62+
```

0 commit comments

Comments
 (0)