Skip to content

Commit 157b758

Browse files
brandyscarneybrandyscarney
committed
docs(menu): add sides example
1 parent 1525cf1 commit 157b758

File tree

7 files changed

+223
-9
lines changed

7 files changed

+223
-9
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/menu/basic/index.md';
27+
import Basic from '@site/static/usage/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/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/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 `MenuControler`.
55+
56+
import Sides from '@site/static/usage/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/menu/multiple/index.md';
66+
67+
<Multiple />
68+
69+
5070
## Theming
5171

5272
### CSS Shadow Parts

‎static/usage/menu/sides/angular.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
```html
2+
<ion-menu side="end" contentId="main-content">
3+
<ion-header>
4+
<ion-toolbar>
5+
<ion-title>Menu Content</ion-title>
6+
</ion-toolbar>
7+
</ion-header>
8+
<ion-content class="ion-padding">This is the menu content.</ion-content>
9+
</ion-menu>
10+
<div class="ion-page" id="main-content">
11+
<ion-header>
12+
<ion-toolbar>
13+
<ion-title>Menu</ion-title>
14+
<ion-buttons slot="end">
15+
<ion-menu-button></ion-menu-button>
16+
</ion-buttons>
17+
</ion-toolbar>
18+
</ion-header>
19+
<ion-content class="ion-padding">
20+
Tap the button in the toolbar to open the menu.
21+
</ion-content>
22+
</div>
23+
```

‎static/usage/menu/sides/demo.html

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
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@6/dist/ionic/ionic.esm.js"></script>
10+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@6/css/ionic.bundle.css" />
11+
</head>
12+
<body>
13+
<ion-app>
14+
<ion-menu side="end" content-id="main-content">
15+
<ion-header>
16+
<ion-toolbar>
17+
<ion-title>Menu Content</ion-title>
18+
</ion-toolbar>
19+
</ion-header>
20+
<ion-content class="ion-padding">This is the menu content.</ion-content>
21+
</ion-menu>
22+
23+
<div class="ion-page" id="main-content">
24+
<ion-header>
25+
<ion-toolbar>
26+
<ion-title>Menu</ion-title>
27+
<ion-buttons slot="end">
28+
<ion-menu-button></ion-menu-button>
29+
</ion-buttons>
30+
</ion-toolbar>
31+
</ion-header>
32+
<ion-content class="ion-padding">
33+
Tap the button in the toolbar to open the menu.
34+
</ion-content>
35+
</div>
36+
</ion-app>
37+
</body>
38+
</html>

‎static/usage/menu/sides/index.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import Playground from '@site/src/components/global/Playground';
2+
3+
import javascript from './javascript.md';
4+
import react from './react.md';
5+
import vue from './vue.md';
6+
import angular from './angular.md';
7+
8+
<Playground
9+
code={{
10+
javascript,
11+
react,
12+
vue,
13+
angular,
14+
}}
15+
src="usage/menu/sides/demo.html"
16+
devicePreview
17+
/>

‎static/usage/menu/sides/javascript.md

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
```html
2+
<ion-menu side="end" content-id="main-content">
3+
<ion-header>
4+
<ion-toolbar>
5+
<ion-title>Menu Content</ion-title>
6+
</ion-toolbar>
7+
</ion-header>
8+
<ion-content class="ion-padding">This is the menu content.</ion-content>
9+
</ion-menu>
10+
<div class="ion-page" id="main-content">
11+
<ion-header>
12+
<ion-toolbar>
13+
<ion-title>Menu</ion-title>
14+
<ion-buttons slot="end">
15+
<ion-menu-button></ion-menu-button>
16+
</ion-buttons>
17+
</ion-toolbar>
18+
</ion-header>
19+
<ion-content class="ion-padding">
20+
Tap the button in the toolbar to open the menu.
21+
</ion-content>
22+
</div>
23+
```

‎static/usage/menu/sides/react.md

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
```tsx
2+
import React from 'react';
3+
import {
4+
IonButtons,
5+
IonContent,
6+
IonHeader,
7+
IonMenu,
8+
IonMenuButton,
9+
IonPage,
10+
IonTitle,
11+
IonToolbar
12+
} from '@ionic/react';
13+
function Example() {
14+
return (
15+
<>
16+
<IonMenu side="end" contentId="main-content">
17+
<IonHeader>
18+
<IonToolbar>
19+
<IonTitle>Menu Content</IonTitle>
20+
</IonToolbar>
21+
</IonHeader>
22+
<IonContent className="ion-padding">This is the menu content.</IonContent>
23+
</IonMenu>
24+
<IonPage id="main-content">
25+
<IonHeader>
26+
<IonToolbar>
27+
<IonTitle>Menu</IonTitle>
28+
<IonButtons slot="end">
29+
<IonMenuButton></IonMenuButton>
30+
</IonButtons>
31+
</IonToolbar>
32+
</IonHeader>
33+
<IonContent className="ion-padding">
34+
Tap the button in the toolbar to open the menu.
35+
</IonContent>
36+
</IonPage>
37+
</>
38+
);
39+
}
40+
export default Example;
41+
```

‎static/usage/menu/sides/vue.md

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
```html
2+
<template>
3+
<ion-menu side="end" content-id="main-content">
4+
<ion-header>
5+
<ion-toolbar>
6+
<ion-title>Menu Content</ion-title>
7+
</ion-toolbar>
8+
</ion-header>
9+
<ion-content class="ion-padding">This is the menu content.</ion-content>
10+
</ion-menu>
11+
<ion-page id="main-content">
12+
<ion-header>
13+
<ion-toolbar>
14+
<ion-title>Menu</ion-title>
15+
<ion-buttons slot="end">
16+
<ion-menu-button></ion-menu-button>
17+
</ion-buttons>
18+
</ion-toolbar>
19+
</ion-header>
20+
<ion-content class="ion-padding">
21+
Tap the button in the toolbar to open the menu.
22+
</ion-content>
23+
</ion-page>
24+
</template>
25+
26+
<script lang="ts">
27+
import {
28+
IonButtons,
29+
IonContent,
30+
IonHeader,
31+
IonMenu,
32+
IonMenuButton,
33+
IonPage,
34+
IonTitle,
35+
IonToolbar
36+
} from '@ionic/vue';
37+
import { defineComponent } from 'vue';
38+
39+
export default defineComponent({
40+
components: {
41+
IonButtons,
42+
IonContent,
43+
IonHeader,
44+
IonMenu,
45+
IonMenuButton,
46+
IonPage,
47+
IonTitle,
48+
IonToolbar
49+
},
50+
});
51+
</script>
52+
```

0 commit comments

Comments
 (0)