ion-menu
メニューコンポーネントは、現在のビューの横からスライドしてくるナビゲーションドロワーです。デフォルトでは、開始側を使用し、LTRの場合は左から、RTLの場合は右からスライドさせますが、サイドをオーバーライドすることができます。メニューの表示はモードによって異なりますが、表示タイプは利用可能なメニュータイプのいずれかに変更することができます。
メニュー要素はルートコンテンツ要素の兄弟要素でなければなりません。コンテンツにはいくつでもメニューを付けることができる。これらのメニューはテンプレートから制御するか、MenuController
を使用してプログラムで制 御することができます。
基本的な使い方
Menu Toggle
menu toggle コンポーネントを使用して、メニューを開いたり閉じたりするカスタムボタンを作成することができます。
Menu Types
type
プロパティは、アプリケーションでのメニューの表示方法をカスタマイズするために使用することができます。
Menu Sides
メニューはデフォルトでは"start"
側に表示されます。左から右へ移動するアプリでは左側に、右から左へ移動するアプリでは右側に表示されます。メニューは"start"
の反対側である"end"
側に表示させることもできます。
アプリ内で両サイドのメニューが必要な場合、 MenuController
の open
メソッドに side
の値を渡すことでメニューを開くことができます。sideが指定されない場合は、"start"
側のメニューが開かれる。MenuController` を使用した例については、下記の 複数メニュー セクションを参照ください。
複数メニュー
同じサイドに複数のメニューが存在する場合、サイドではなくIDで参照する必要があります。そうしないと、間違ったメニューがアクティブになる可能性がある。
テーマ
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 | "overlay" | "push" | "reveal" | undefined |
Default | undefined |
イベント
Name | Description | Bubbles |
---|---|---|
ionDidClose | Emitted when the menu is closed. | true |
ionDidOpen | Emitted when the menu is open. | true |
ionWillClose | Emitted when the menu is about to be closed. | true |
ionWillOpen | Emitted when the menu is about to be opened. | true |
メソッド
close
Description | Closes the menu. If the menu is already closed or it can't be closed, it returns false . |
Signature | close(animated?: boolean, role?: string) => 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, role?: string) => 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カスタムプロパティ
- iOS
- MD
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 |
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.