ion-menu
Menuコンポーネントは、現在のビューの横からスライドするナビゲーションパネルです。 デフォルトでは左からスライドしますが、サイドはオーバーライドできます。 Menuの表示はmodeによって異なりますが、表示するtypeはmenuのtypeによって変更することができます。 menu要素は、root content要素と同じ深度である必要があります。 コンテンツにつけるMenuの数に制限はありません。 これらはテンプレートから、またはプログラムでMenuControllerを使用して制御できます。
基本的な使い方
Menu Toggle
ion-menu-toggle コンポーネントを使用して、メニューを開いたり閉じたりするカスタムボタンを作成することができます。
Menu Types
typeプロパティは、アプリケーションでのメニューの表示方法をカスタマイズするために使用することができます。
テーマ
CSS Shadow Parts
Interfaces
MenuCustomEvent
必須ではありませんが、このコンポーネントから発行される Ionic イベントでより強く型付けを行うために、CustomEvent インターフェースの代わりにこのインターフェースを使用することが可能です。
interface MenuCustomEvent<T = any> extends CustomEvent {
detail: T;
target: HTMLIonMenuElement;
}
プロパティ
contentId
| Description | The id of the main content. When using a router this is typically ion-router-outlet. When not using a router, this is typically your main view's ion-content. This is not the id of the ion-content inside of your ion-menu. |
| Attribute | content-id |
| Type | string ｜ undefined |
| Default | undefined |
disabled
| Description | If true, the menu is disabled. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
maxEdgeStart
| Description | The edge threshold for dragging the menu open. If a drag/swipe happens over this value, the menu is not triggered. |
| Attribute | max-edge-start |
| Type | number |
| Default | 50 |
menuId
| Description | An id for the menu. |
| Attribute | menu-id |
| Type | string ｜ undefined |
| Default | undefined |
side
| Description | Which side of the view the menu should be placed. |
| Attribute | side |
| Type | "end" ｜ "start" |
| Default | 'start' |
swipeGesture
| Description | If true, swiping the menu is enabled. |
| Attribute | swipe-gesture |
| Type | boolean |
| Default | true |
type
| Description | The display type of the menu. Available options: "overlay", "reveal", "push". |
| Attribute | type |
| Type | string ｜ undefined |
| Default | undefined |
イベント
| Name | Description |
|---|---|
ionDidClose | Emitted when the menu is closed. |
ionDidOpen | Emitted when the menu is open. |
ionWillClose | Emitted when the menu is about to be closed. |
ionWillOpen | Emitted when the menu is about to be opened. |
メソッド
close
| Description | Closes the menu. If the menu is already closed or it can't be closed, it returns false. |
| Signature | close(animated?: boolean) => Promise<boolean> |
isActive
| Description | Returns true is the menu is active.A menu is active when it can be opened or closed, meaning it's enabled and it's not part of a ion-split-pane. |
| Signature | isActive() => Promise<boolean> |
isOpen
| Description | Returns true is the menu is open. |
| Signature | isOpen() => Promise<boolean> |
open
| Description | Opens the menu. If the menu is already open or it can't be opened, it returns false. |
| Signature | open(animated?: boolean) => Promise<boolean> |
setOpen
| Description | Opens or closes the button. If the operation can't be completed successfully, it returns false. |
| Signature | setOpen(shouldOpen: boolean, animated?: boolean) => Promise<boolean> |
toggle
| Description | Toggles the menu. If the menu is already open, it will try to close, otherwise it will try to open it. If the operation can't be completed successfully, it returns false. |
| Signature | toggle(animated?: boolean) => Promise<boolean> |
CSS Shadow Parts
| Name | Description |
|---|---|
backdrop | The backdrop that appears over the main content when the menu is open. |
container | The container for the menu content. |
CSSカスタムプロパティ
| Name | Description |
|---|---|
--background | Background of the menu |
--height | Height of the menu |
--max-height | Maximum height of the menu |
--max-width | Maximum width of the menu |
--min-height | Minimum height of the menu |
--min-width | Minimum width of the menu |
--width | Width of the menu |
Slots
No slots available for this component.