ion-menu
選單元件是一個導覽抽屜，會從目前視圖的側邊滑入。預設情況下，它會使用起始側，使其在從左到右 (LTR) 的情況下從左側滑入，而在從右到左 (RTL) 的情況下從右側滑入，但是側邊可以被覆寫。選單將根據模式以不同的方式顯示，但是顯示類型可以變更為任何可用的選單類型。
選單元素應該是根內容元素的同層元素。可以有任意數量的選單附加到內容。這些可以從範本控制，也可以使用 MenuController 以程式方式控制。
基本用法
選單切換
選單切換元件可以用於建立可以開啟或關閉選單的自訂按鈕。
選單類型
type 屬性可以用於自訂選單在應用程式中的顯示方式。
選單側邊
選單預設會顯示在 "start" 側邊。在使用從左到右方向的應用程式中，這是左側，而在從右到左的應用程式中，這將是右側。選單也可以設定為顯示在 "end" 側邊，這與 "start" 相反。
如果應用程式中需要兩側都有選單，則可以將 side 值傳遞到 MenuController 上的 open 方法來開啟選單。如果未提供側邊，則會開啟 "start" 側邊上的選單。請參閱下面的 多個選單 章節，其中提供使用 MenuController 的範例。
多個選單
當同一側有多個選單時，我們需要依 ID 而不是側邊來參照它們。否則，可能會啟用錯誤的選單。
主題設定
CSS 陰影部分
介面
MenuCustomEvent
雖然不是必要，但此介面可以用來取代 CustomEvent 介面，以便在從此元件發出的 Ionic 事件中獲得更強的類型。
interface MenuCustomEvent<T = any> extends CustomEvent {
detail: T;
target: HTMLIonMenuElement;
}
屬性
contentId
| 描述 | 主要內容的 id。當使用路由器時，通常為 ion-router-outlet。當不使用路由器時，通常為主要視圖的 ion-content。這不是您的 ion-menu 內部的 ion-content 的 id。 |
| 屬性 | content-id |
| 類型 | string ｜ undefined |
| 預設值 | undefined |
disabled
| 描述 | 如果為 true，則會停用選單。 |
| 屬性 | disabled |
| 類型 | boolean |
| 預設值 | false |
maxEdgeStart
| 描述 | 拖曳開啟選單的邊緣臨界值。如果拖曳/滑動超過此值，則不會觸發選單。 |
| 屬性 | max-edge-start |
| 類型 | number |
| 預設值 | 50 |
menuId
| 描述 | 選單的 ID。 |
| 屬性 | menu-id |
| 類型 | string ｜ undefined |
| 預設值 | undefined |
side
| 描述 | 選單應放置在視圖的哪一側。 |
| 屬性 | side |
| 類型 | "end" ｜ "start" |
| 預設值 | 'start' |
swipeGesture
| 描述 | 如果為 true，則啟用滑動選單。 |
| 屬性 | swipe-gesture |
| 類型 | boolean |
| 預設值 | true |
type
| 描述 | 選單的顯示類型。可用選項："overlay"、"reveal"、"push"。 |
| 屬性 | type |
| 類型 | "overlay" ｜ "push" ｜ "reveal" ｜ undefined |
| 預設值 | undefined |
事件
| 名稱 | 描述 | 冒泡 |
|---|---|---|
ionDidClose | 在關閉選單時發出。 | true |
ionDidOpen | 在開啟選單時發出。 | true |
ionWillClose | 在即將關閉選單時發出。 | true |
ionWillOpen | 在即將開啟選單時發出。 | true |
方法
close
| 描述 | 關閉選單。如果選單已關閉或無法關閉，則會傳回 false。 |
| 簽名 | close(animated?: boolean, role?: string) => Promise<boolean> |
isActive
| 描述 | 如果選單為使用中狀態，則傳回 true。當選單可以開啟或關閉時，表示它已啟用，且不屬於 ion-split-pane，則選單為使用中狀態。 |
| 簽名 | isActive() => Promise<boolean> |
isOpen
| 描述 | 如果選單為開啟狀態，則傳回 true。 |
| 簽名 | isOpen() => Promise<boolean> |
open
| 描述 | 開啟選單。如果選單已開啟或無法開啟，則會傳回 false。 |
| 簽名 | open(animated?: boolean) => Promise<boolean> |
setOpen
| 描述 | 開啟或關閉按鈕。如果無法成功完成操作，則會傳回 false。 |
| 簽名 | setOpen(shouldOpen: boolean, animated?: boolean, role?: string) => Promise<boolean> |
toggle
| 描述 | 切換選單。如果選單已開啟，則會嘗試關閉，否則會嘗試開啟。如果無法成功完成操作，則會傳回 false。 |
| 簽名 | toggle(animated?: boolean) => Promise<boolean> |
CSS 陰影部分
| 名稱 | 描述 |
|---|---|
backdrop | 選單開啟時出現在主要內容上方的背景。 |
container | 選單內容的容器。 |
CSS 自訂屬性
- iOS
- MD
| 名稱 | 描述 |
|---|---|
--background | 選單的背景 |
--height | 選單的高度 |
--max-height | 選單的最大高度 |
--max-width | 選單的最大寬度 |
--min-height | 選單的最小高度 |
--min-width | 選單的最小寬度 |
--width | 選單的寬度 |
| 名稱 | 描述 |
|---|---|
--background | 選單的背景 |
--height | 選單的高度 |
--max-height | 選單的最大高度 |
--max-width | 選單的最大寬度 |
--min-height | 選單的最小高度 |
--min-width | 選單的最小寬度 |
--width | 選單的寬度 |
插槽
此元件沒有可用的插槽。