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 | メインコンテンツの id です。ルータを使用する場合は、通常 ion-router-outlet となります。ルータを使用しない場合は、通常、メインビューの ion-content となります。これは ion-menu 内の ion-content の ID ではありません。 |
| Attribute | content-id |
| Type | string ｜ undefined |
| Default | undefined |
disabled
| Description | trueの場合、メニューは無効化される。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
maxEdgeStart
| Description | ドラッグでメニューを開く際のエッジのしきい値です。この値を超えてドラッグ/スワイプが行われた場合、メニューはトリガーされない。 |
| Attribute | max-edge-start |
| Type | number |
| Default | 50 |
menuId
| Description | メニューのIDです。 |
| Attribute | menu-id |
| Type | string ｜ undefined |
| Default | undefined |
side
| Description | メニューがビューのどの側に配置されるべきか。 |
| Attribute | side |
| Type | "end" ｜ "start" |
| Default | 'start' |
swipeGesture
| Description | trueの場合、スワイプによるメニュー操作が有効になる。 |
| Attribute | swipe-gesture |
| Type | boolean |
| Default | true |
type
| Description | メニューの表示形式を指定します。利用可能なオプション。overlay", "reveal", "push"`. |
| Attribute | type |
| Type | "overlay" ｜ "push" ｜ "reveal" ｜ undefined |
| Default | undefined |
イベント
| Name | Description | Bubbles |
|---|---|---|
ionDidClose | メニューが閉じられたときに発行されます。 | true |
ionDidOpen | メニューが開いているときに発行されます。 | true |
ionWillClose | メニューが閉じられようとするときに発行されます。 | true |
ionWillOpen | メニューが開かれようとするときに発行されます。 | true |
メソッド
close
| Description | メニューを閉じる。メニューが既に閉じられていたり、閉じることができない場合は、falseを返します。 |
| Signature | close(animated?: boolean) => Promise<boolean> |
isActive
| Description | メニューがアクティブであれば true を返します。 メニューがアクティブな状態とは、メニューを開いたり閉じたりできる状態、つまり有効な状態であり、ion-split-paneの一部でない状態であることを意味します。 |
| Signature | isActive() => Promise<boolean> |
isOpen
| Description | メニューが開いている場合は true を返します。 |
| Signature | isOpen() => Promise<boolean> |
open
| Description | メニューを開く。メニューが既に開いているか、開くことができない場合は、falseを返します。 |
| Signature | open(animated?: boolean) => Promise<boolean> |
setOpen
| Description | ボタンを開いたり閉じたりします。操作が正常に完了しない場合は false を返します。 |
| Signature | setOpen(shouldOpen: boolean, animated?: boolean) => Promise<boolean> |
toggle
| Description | メニューを切り替えます。メニューが既に開かれている場合は閉じようとし、そうでない場合は開こうとします。操作が正常に完了しない場合は、falseを返します。 |
| Signature | toggle(animated?: boolean) => Promise<boolean> |
CSS Shadow Parts
| Name | Description |
|---|---|
backdrop | メニューを開いているときに、メインコンテンツの上に表示される背景です。 |
container | メニューの内容を格納するコンテナです。 |
CSSカスタムプロパティ
| Name | Description |
|---|---|
--background | メニューの背景 |
--height | メニューの高さ |
--max-height | メニューの最大の高さ |
--max-width | メニューの最大幅 |
--min-height | メニューの高さの最小値 |
--min-width | メニューの最小幅 |
--width | メニューの幅 |
Slots
No slots available for this component.