javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(react): update component usage docs (#17615)

Browse Source
This commit is contained in:
Josh Thomas
2019-02-26 08:54:01 -06:00
committed by GitHub
parent f44c17e03b
commit 22d1aeebaa
113 changed files with 7207 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
core/src/components/menu/usage/react.md Normal file
View File

@@ -0,0 +1,63 @@
```tsx
import React from 'react';
import { IonMenu, IonHeader, IonToolbar, IonTitle, IonContent, IonList, IonItem, IonRouterOutlet } from '@ionic/react';
const Example: React.SFC<{}> = () => (
<>
<IonMenu side="start" menuId="first">
<IonHeader>
<IonToolbar color="primary">
<IonTitle>Start Menu</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
<IonItem>Menu Item</IonItem>
<IonItem>Menu Item</IonItem>
<IonItem>Menu Item</IonItem>
<IonItem>Menu Item</IonItem>
<IonItem>Menu Item</IonItem>
</IonList>
</IonContent>
</IonMenu>
<IonMenu side="start" menuId="custom" class="my-custom-menu">
<IonHeader>
<IonToolbar color="tertiary">
<IonTitle>Custom Menu</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
<IonItem>Menu Item</IonItem>
<IonItem>Menu Item</IonItem>
<IonItem>Menu Item</IonItem>
<IonItem>Menu Item</IonItem>
<IonItem>Menu Item</IonItem>
</IonList>
</IonContent>
</IonMenu>
<IonMenu side="end" type="push">
<IonHeader>
<IonToolbar color="danger">
<IonTitle>End Menu</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent>
<IonList>
<IonItem>Menu Item</IonItem>
<IonItem>Menu Item</IonItem>
<IonItem>Menu Item</IonItem>
<IonItem>Menu Item</IonItem>
<IonItem>Menu Item</IonItem>
</IonList>
</IonContent>
</IonMenu>
<IonRouterOutlet></IonRouterOutlet>
</>
);
export default Example;
```