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';
|
import { updateVisibility } from './menu-toggle-util';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @slot - Content is placed inside the toggle to act as the click target.
|
||||||
|
*/
|
||||||
@Component({
|
@Component({
|
||||||
tag: 'ion-menu-toggle',
|
tag: 'ion-menu-toggle',
|
||||||
styleUrl: 'menu-toggle.scss',
|
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 -->
|
<!-- 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
|
## Properties
|
||||||
|
|
||||||
| Property | Attribute | Description | Type | Default |
|
| 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` |
|
| `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/)*
|
*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