ion-menu

概要(CONTENTS)

Ionic4项目中我们可以使用Ionic4侧边栏组件ion-menu对项目进行布局。

ion-menu官方文档地址:https://ionicframework.com/docs/api/menu

The Menu component is a navigation drawer that slides in from the side of the current view. By default, it slides in from the left, 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. 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.

ion-menu 用法(Usage)

<ion-menu side="start" menuId="first">
  <ion-header>
    <ion-toolbar color="primary">
      <ion-title>Start Menuion-title>
    ion-toolbar>
  ion-header>
  <ion-content>
    <ion-list>
      <ion-item>Menu Itemion-item>
      <ion-item>Menu Itemion-item>
      <ion-item>Menu Itemion-item>
      <ion-item>Menu Itemion-item>
      <ion-item>Menu Itemion-item>
    ion-list>
  ion-content>
ion-menu>

<ion-menu side="start" menuId="custom" class="my-custom-menu">
  <ion-header>
    <ion-toolbar color="tertiary">
      <ion-title>Custom Menuion-title>
    ion-toolbar>
  ion-header>
  <ion-content>
    <ion-list>
      <ion-item>Menu Itemion-item>
      <ion-item>Menu Itemion-item>
      <ion-item>Menu Itemion-item>
      <ion-item>Menu Itemion-item>
      <ion-item>Menu Itemion-item>
    ion-list>
  ion-content>
ion-menu>

<ion-menu side="end" type="push">
  <ion-header>
    <ion-toolbar color="danger">
      <ion-title>End Menuion-title>
    ion-toolbar>
  ion-header>
  <ion-content>
    <ion-list>
      <ion-item>Menu Itemion-item>
      <ion-item>Menu Itemion-item>
      <ion-item>Menu Itemion-item>
      <ion-item>Menu Itemion-item>
      <ion-item>Menu Itemion-item>
    ion-list>
  ion-content>
ion-menu>

<ion-router-outlet main>ion-router-outlet>
import { Component } from '@angular/core';
import { MenuController } from '@ionic/angular';

@Component({
  selector: 'menu-example',
  templateUrl: 'menu-example.html',
  styleUrls: ['./menu-example.css'],
})
export class MenuExample {

constructor(private menu: MenuController) { }

  openFirst() {
    this.menu.enable(true, 'first');
    this.menu.open('first');
  }

  openEnd() {
    this.menu.open('end');
  }

  openCustom() {
    this.menu.enable(true, 'custom');
    this.menu.open('custom');
  }
}
.my-custom-menu {
  --width: 500px;
}
<ion-app>
  <ion-menu side="start" menu-id="first">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Start Menuion-title>
      ion-toolbar>
    ion-header>
    <ion-content>
      <ion-list>
        <ion-item>Menu Itemion-item>
        <ion-item>Menu Itemion-item>
        <ion-item>Menu Itemion-item>
        <ion-item>Menu Itemion-item>
        <ion-item>Menu Itemion-item>
      ion-list>
    ion-content>
  ion-menu>

  <ion-menu side="start" menu-id="custom" class="my-custom-menu">
    <ion-header>
      <ion-toolbar color="tertiary">
        <ion-title>Custom Menuion-title>
      ion-toolbar>
    ion-header>
    <ion-content>
      <ion-list>
        <ion-item>Menu Itemion-item>
        <ion-item>Menu Itemion-item>
        <ion-item>Menu Itemion-item>
        <ion-item>Menu Itemion-item>
        <ion-item>Menu Itemion-item>
      ion-list>
    ion-content>
  ion-menu>

  <ion-menu side="end" type="push">
    <ion-header>
      <ion-toolbar color="danger">
        <ion-title>End Menuion-title>
      ion-toolbar>
    ion-header>
    <ion-content>
      <ion-list>
        <ion-item>Menu Itemion-item>
        <ion-item>Menu Itemion-item>
        <ion-item>Menu Itemion-item>
        <ion-item>Menu Itemion-item>
        <ion-item>Menu Itemion-item>
      ion-list>
    ion-content>
  ion-menu>

  <div class="ion-page" main>
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu - Basicion-title>
      ion-toolbar>
    ion-header>
    <ion-content padding>
      <ion-button expand="block" onclick="openFirst()">Open Start Menuion-button>
      <ion-button expand="block" onclick="openEnd()">Open End Menuion-button>
      <ion-button expand="block" onclick="openCustom()">Open Custom Menuion-button>
    ion-content>
  div>

ion-app>
<ion-menu-controller>ion-menu-controller>
const menuCtrl = document.querySelector('ion-menu-controller');

function openFirst() {
  menuCtrl.enable(true, 'first');
  menuCtrl.open('first');
}

function openEnd() {
  menuCtrl.open('end');
}

function openCustom() {
  menuCtrl.enable(true, 'custom');
  menuCtrl.open('custom');
}
.my-custom-menu {
  --width: 500px;
}
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 MenuIonTitle>
        IonToolbar>
      IonHeader>
      <IonContent>
        <IonList>
          <IonItem>Menu ItemIonItem>
          <IonItem>Menu ItemIonItem>
          <IonItem>Menu ItemIonItem>
          <IonItem>Menu ItemIonItem>
          <IonItem>Menu ItemIonItem>
        IonList>
      IonContent>
    IonMenu>

    <IonMenu side="start" menuId="custom" class="my-custom-menu">
      <IonHeader>
        <IonToolbar color="tertiary">
          <IonTitle>Custom MenuIonTitle>
        IonToolbar>
      IonHeader>
      <IonContent>
        <IonList>
          <IonItem>Menu ItemIonItem>
          <IonItem>Menu ItemIonItem>
          <IonItem>Menu ItemIonItem>
          <IonItem>Menu ItemIonItem>
          <IonItem>Menu ItemIonItem>
        IonList>
      IonContent>
    IonMenu>

    <IonMenu side="end" type="push">
      <IonHeader>
        <IonToolbar color="danger">
          <IonTitle>End MenuIonTitle>
        IonToolbar>
      IonHeader>
      <IonContent>
        <IonList>
          <IonItem>Menu ItemIonItem>
          <IonItem>Menu ItemIonItem>
          <IonItem>Menu ItemIonItem>
          <IonItem>Menu ItemIonItem>
          <IonItem>Menu ItemIonItem>
        IonList>
      IonContent>
    IonMenu>
    <IonRouterOutlet>IonRouterOutlet>
  >
);

export default Example;
<template>
  <ion-menu side="start" menuId="first">
    <ion-header>
      <ion-toolbar color="primary">
        <ion-title>Start Menuion-title>
      ion-toolbar>
    ion-header>
    <ion-content>
      <ion-list>
        <ion-item>Menu Itemion-item>
        <ion-item>Menu Itemion-item>
        <ion-item>Menu Itemion-item>
        <ion-item>Menu Itemion-item>
        <ion-item>Menu Itemion-item>
      ion-list>
    ion-content>
  ion-menu>

  <ion-menu side="start" menuId="custom" class="my-custom-menu">
    <ion-header>
      <ion-toolbar color="tertiary">
        <ion-title>Custom Menuion-title>
      ion-toolbar>
    ion-header>
    <ion-content>
      <ion-list>
        <ion-item>Menu Itemion-item>
        <ion-item>Menu Itemion-item>
        <ion-item>Menu Itemion-item>
        <ion-item>Menu Itemion-item>
        <ion-item>Menu Itemion-item>
      ion-list>
    ion-content>
  ion-menu>

  <ion-menu side="end" type="push">
    <ion-header>
      <ion-toolbar color