mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
docs(menu-toggle): add usage examples and slot docs (#24570)
This commit is contained in:
Sean Perkins
@ -5,6 +5,9 @@ import { menuController } from '../../utils/menu-controller';
|
||||
|
||||
import { updateVisibility } from './menu-toggle-util';
|
||||
|
||||
/**
|
||||
* @slot - Content is placed inside the toggle to act as the click target.
|
||||
*/
|
||||
@Component({
|
||||
tag: 'ion-menu-toggle',
|
||||
styleUrl: 'menu-toggle.scss',
|
||||
|
||||
@ -9,6 +9,151 @@ In case it's desired to keep `ion-menu-toggle` always visible, the `autoHide` pr
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
### Angular
|
||||
|
||||
```html
|
||||
<ion-app>
|
||||
<ion-menu side="start" menuId="first" contentId="main">
|
||||
<ion-header>
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-title>Example Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
<div class="ion-page" id="main">
|
||||
<ion-content class="ion-padding">
|
||||
<ion-menu-toggle>
|
||||
<ion-button>Toggle Menu</ion-button>
|
||||
</ion-menu-toggle>
|
||||
</ion-content>
|
||||
</div>
|
||||
</ion-app>
|
||||
```
|
||||
|
||||
|
||||
### Javascript
|
||||
|
||||
```html
|
||||
<ion-app>
|
||||
<ion-menu side="start" menu-id="first" content-id="main">
|
||||
<ion-header>
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-title>Example Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
<div class="ion-page" id="main">
|
||||
<ion-content class="ion-padding">
|
||||
<ion-menu-toggle>
|
||||
<ion-button>Toggle Menu</ion-button>
|
||||
</ion-menu-toggle>
|
||||
</ion-content>
|
||||
</div>
|
||||
</ion-app>
|
||||
```
|
||||
|
||||
|
||||
### React
|
||||
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonMenuToggle, IonButton } from '@ionic/react';
|
||||
|
||||
export const MenuExample: React.FC = () => (
|
||||
<>
|
||||
<IonMenu side="start" menuId="first">
|
||||
<IonHeader>
|
||||
<IonToolbar color="primary">
|
||||
<IonTitle>Example Menu</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent>
|
||||
<IonList>
|
||||
<IonItem>Menu Item</IonItem>
|
||||
</IonList>
|
||||
</IonContent>
|
||||
</IonMenu>
|
||||
<IonContent>
|
||||
<IonMenuToggle>
|
||||
<IonButton>Toggle Menu</IonButton>
|
||||
</IonMenuToggle>
|
||||
</IonContent>
|
||||
</>
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
### Vue
|
||||
|
||||
```html
|
||||
<template>
|
||||
<ion-menu side="start" menu-id="first" content-id="main">
|
||||
<ion-header>
|
||||
<ion-toolbar color="primary">
|
||||
<ion-title>Example Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<div class="ion-page" id="main">
|
||||
<ion-content>
|
||||
<ion-menu-toggle>
|
||||
<ion-button>Toggle Menu</ion-button>
|
||||
</ion-menu-toggle>
|
||||
</ion-content>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonItem,
|
||||
IonList,
|
||||
IonMenu,
|
||||
IonMenuToggle,
|
||||
IonButton,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
menuController
|
||||
} from '@ionic/vue';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonItem,
|
||||
IonList,
|
||||
IonMenu,
|
||||
IonMenuToggle,
|
||||
IonButton,
|
||||
IonTitle,
|
||||
IonToolbar
|
||||
}
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
@ -17,6 +162,13 @@ In case it's desired to keep `ion-menu-toggle` always visible, the `autoHide` pr
|
||||
| `menu` | `menu` | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle. If this property is not used, `ion-menu-toggle` will toggle the first menu that is active. | `string \| undefined` | `undefined` |
|
||||
|
||||
|
||||
## Slots
|
||||
|
||||
| Slot | Description |
|
||||
| ---- | --------------------------------------------------------------- |
|
||||
| | Content is placed inside the toggle to act as the click target. |
|
||||
|
||||
|
||||
----------------------------------------------
|
||||
|
||||
*Built with [StencilJS](https://stenciljs.com/)*
|
||||
|
||||
24
core/src/components/menu-toggle/usage/angular.md
Normal file
24
core/src/components/menu-toggle/usage/angular.md
Normal file
@ -0,0 +1,24 @@
|
||||
```html
|
||||
<ion-app>
|
||||
<ion-menu side="start" menuId="first" contentId="main">
|
||||
<ion-header>
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-title>Example Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
<div class="ion-page" id="main">
|
||||
<ion-content class="ion-padding">
|
||||
<ion-menu-toggle>
|
||||
<ion-button>Toggle Menu</ion-button>
|
||||
</ion-menu-toggle>
|
||||
</ion-content>
|
||||
</div>
|
||||
</ion-app>
|
||||
```
|
||||
|
||||
24
core/src/components/menu-toggle/usage/javascript.md
Normal file
24
core/src/components/menu-toggle/usage/javascript.md
Normal file
@ -0,0 +1,24 @@
|
||||
```html
|
||||
<ion-app>
|
||||
<ion-menu side="start" menu-id="first" content-id="main">
|
||||
<ion-header>
|
||||
<ion-toolbar color="secondary">
|
||||
<ion-title>Example Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
<div class="ion-page" id="main">
|
||||
<ion-content class="ion-padding">
|
||||
<ion-menu-toggle>
|
||||
<ion-button>Toggle Menu</ion-button>
|
||||
</ion-menu-toggle>
|
||||
</ion-content>
|
||||
</div>
|
||||
</ion-app>
|
||||
```
|
||||
|
||||
28
core/src/components/menu-toggle/usage/react.md
Normal file
28
core/src/components/menu-toggle/usage/react.md
Normal file
@ -0,0 +1,28 @@
|
||||
```tsx
|
||||
import React from 'react';
|
||||
import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonMenuToggle, IonButton, IonPage } from '@ionic/react';
|
||||
|
||||
export const MenuExample: React.FC = () => (
|
||||
<>
|
||||
<IonMenu side="start" menuId="first" contentId="main">
|
||||
<IonHeader>
|
||||
<IonToolbar color="primary">
|
||||
<IonTitle>Example Menu</IonTitle>
|
||||
</IonToolbar>
|
||||
</IonHeader>
|
||||
<IonContent>
|
||||
<IonList>
|
||||
<IonItem>Menu Item</IonItem>
|
||||
</IonList>
|
||||
</IonContent>
|
||||
</IonMenu>
|
||||
<IonPage id="main">
|
||||
<IonContent>
|
||||
<IonMenuToggle>
|
||||
<IonButton>Toggle Menu</IonButton>
|
||||
</IonMenuToggle>
|
||||
</IonContent>
|
||||
</IonPage>
|
||||
</>
|
||||
);
|
||||
```
|
||||
53
core/src/components/menu-toggle/usage/vue.md
Normal file
53
core/src/components/menu-toggle/usage/vue.md
Normal file
@ -0,0 +1,53 @@
|
||||
```html
|
||||
<template>
|
||||
<ion-menu side="start" menu-id="first" content-id="main">
|
||||
<ion-header>
|
||||
<ion-toolbar color="primary">
|
||||
<ion-title>Example Menu</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-list>
|
||||
<ion-item>Menu Item</ion-item>
|
||||
</ion-list>
|
||||
</ion-content>
|
||||
</ion-menu>
|
||||
|
||||
<div class="ion-page" id="main">
|
||||
<ion-content>
|
||||
<ion-menu-toggle>
|
||||
<ion-button>Toggle Menu</ion-button>
|
||||
</ion-menu-toggle>
|
||||
</ion-content>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonItem,
|
||||
IonList,
|
||||
IonMenu,
|
||||
IonMenuToggle,
|
||||
IonButton,
|
||||
IonTitle,
|
||||
IonToolbar
|
||||
} from '@ionic/vue';
|
||||
import { defineComponent } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonItem,
|
||||
IonList,
|
||||
IonMenu,
|
||||
IonMenuToggle,
|
||||
IonButton,
|
||||
IonTitle,
|
||||
IonToolbar
|
||||
}
|
||||
});
|
||||
</script>
|
||||
```
|
||||
Reference in New Issue
Block a user