Question

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)

angularjavascriptreactvue

  
    
      Start Menu
    
  
  
    
      Menu Item
      Menu Item
      Menu Item
      Menu Item
      Menu Item
    
  



  
    
      Custom Menu
    
  
  
    
      Menu Item
      Menu Item
      Menu Item
      Menu Item
      Menu Item
    
  



  
    
      End Menu
    
  
  
    
      Menu Item
      Menu Item
      Menu Item
      Menu Item
      Menu Item
    
  


</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;
}

  
    
      
        Start Menu
      
    
    
      
        Menu Item
        Menu Item
        Menu Item
        Menu Item
        Menu Item
      
    
  

  
    
      
        Custom Menu
      
    
    
      
        Menu Item
        Menu Item
        Menu Item
        Menu Item
        Menu Item
      
    
  

  
    
      
        End Menu
      
    
    
      
        Menu Item
        Menu Item
        Menu Item
        Menu Item
        Menu Item
      
    
  

  class="ion-page" main>
    
      
        Menu - Basic
      
    
    
      Open Start Menu
      Open End Menu
      Open Custom Menu