diff --git a/core/src/components/menu-toggle/menu-toggle.tsx b/core/src/components/menu-toggle/menu-toggle.tsx index db43b245cc..1c2534d22c 100644 --- a/core/src/components/menu-toggle/menu-toggle.tsx +++ b/core/src/components/menu-toggle/menu-toggle.tsx @@ -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', diff --git a/core/src/components/menu-toggle/readme.md b/core/src/components/menu-toggle/readme.md index 2824f4b2de..08d4103c5e 100644 --- a/core/src/components/menu-toggle/readme.md +++ b/core/src/components/menu-toggle/readme.md @@ -9,6 +9,151 @@ In case it's desired to keep `ion-menu-toggle` always visible, the `autoHide` pr +## Usage + +### Angular + +```html + + + + + Example Menu + + + + + Menu Item + + + +
+ + + Toggle Menu + + +
+ +``` + + +### Javascript + +```html + + + + + Example Menu + + + + + Menu Item + + + +
+ + + Toggle Menu + + +
+ +``` + + +### React + +```tsx +import React from 'react'; +import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonMenuToggle, IonButton } from '@ionic/react'; + +export const MenuExample: React.FC = () => ( + <> + + + + Example Menu + + + + + Menu Item + + + + + + Toggle Menu + + + +); +``` + + +### Vue + +```html + + + +``` + + + ## 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/)* diff --git a/core/src/components/menu-toggle/usage/angular.md b/core/src/components/menu-toggle/usage/angular.md new file mode 100644 index 0000000000..b69f34b801 --- /dev/null +++ b/core/src/components/menu-toggle/usage/angular.md @@ -0,0 +1,24 @@ +```html + + + + + Example Menu + + + + + Menu Item + + + +
+ + + Toggle Menu + + +
+ +``` + diff --git a/core/src/components/menu-toggle/usage/javascript.md b/core/src/components/menu-toggle/usage/javascript.md new file mode 100644 index 0000000000..3886232349 --- /dev/null +++ b/core/src/components/menu-toggle/usage/javascript.md @@ -0,0 +1,24 @@ +```html + + + + + Example Menu + + + + + Menu Item + + + +
+ + + Toggle Menu + + +
+ +``` + diff --git a/core/src/components/menu-toggle/usage/react.md b/core/src/components/menu-toggle/usage/react.md new file mode 100644 index 0000000000..f84a429667 --- /dev/null +++ b/core/src/components/menu-toggle/usage/react.md @@ -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 = () => ( + <> + + + + Example Menu + + + + + Menu Item + + + + + + + Toggle Menu + + + + +); +``` \ No newline at end of file diff --git a/core/src/components/menu-toggle/usage/vue.md b/core/src/components/menu-toggle/usage/vue.md new file mode 100644 index 0000000000..307f0d9e4d --- /dev/null +++ b/core/src/components/menu-toggle/usage/vue.md @@ -0,0 +1,53 @@ +```html + + + +``` \ No newline at end of file