ionc學習--07

*MaybE發表於2020-10-24

一、ion-menu元件

1.建立專案
ionic start myApp sidemenu
2.配置專案

屬性作用可選值
side配置側邊欄的位置start end
menuId側邊欄的唯一標識
type配置側邊欄的彈出方式overlay,reveal,push
swipe-gesture滑動彈出側邊欄true,false

在這裡插入圖片描述

二、ion-menu-toggle

點選的時候側邊欄消失

  <ion-content>
    <ion-list>
      <ion-menu-toggle>
      <ion-item>a</ion-item>
      </ion-menu-toggle>
      <ion-item>b</ion-item>
      <ion-item>c</ion-item>
      <ion-item>d</ion-item>
    </ion-list>
  </ion-content>

三、ion-menu-button

  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
    <ion-title>{{ folder }}</ion-title>

    <ion-buttons slot="end">
      <ion-menu-button></ion-menu-button>
    </ion-buttons>
  </ion-toolbar>

在這裡插入圖片描述

相關文章