shadow
The menu component is a navigation drawer that slides in from the side of the current view. By default, it uses the start side, making it slide in from the left for LTR and right for RTL, but the side can be overridden. The menu will be displayed differently based on the mode, however the display type can be changed to any of the available menu types.
The menu element should be a sibling to the root content element. There can be any number of menus attached to the content. These can be controlled from the templates, or programmatically using the MenuController.
The menu toggle component can be used to create custom button that can open or close the menu.
The type property can be used to customize how menus display in your application.
Menus are displayed on the "start" side by default. In apps that use left-to-right direction, this is the left side, and in right-to-left apps, this will be the right side. Menus can also be set to display on the "end" side, which is the opposite of "start".
If menus on both sides are needed in an app, the menu can be opened by passing the side value to the open method on MenuController. If a side is not provided, the menu on the "start" side will be opened. See the multiple menus section below for an example using MenuController.
When multiple menus exist on the same side, we need refer to them by ID instead of side. Otherwise, the wrong menu may be activated.
While not required, this interface can be used in place of the CustomEvent interface for stronger typing with Ionic events emitted from this component.
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 |
| Description | trueの場合、メニューは無効化される。 |
| Attribute | disabled |
| Type | boolean |
| Default | false |
| Description | ドラッグでメニューを開く際のエッジのしきい値です。この値を超えてドラッグ/スワイプが行われた場合、メニューはトリガーされない。 |
| Attribute | max-edge-start |
| Type | number |
| Default | 50 |
| Description | メニューのIDです。 |
| Attribute | menu-id |
| Type | string ｜ undefined |
| Default | undefined |
| Description | メニューがビューのどの側に配置されるべきか。 |
| Attribute | side |
| Type | "end" ｜ "start" |
| Default | 'start' |
| Description | trueの場合、スワイプによるメニュー操作が有効になる。 |
| Attribute | swipe-gesture |
| Type | boolean |
| Default | true |
| Description | メニューの表示形式を指定します。利用可能なオプション。overlay", "reveal", "push"`. |
| Attribute | type |
| Type | "overlay" ｜ "push" ｜ "reveal" ｜ undefined |
| Default | undefined |
| Name | Description | Bubbles |
|---|
ionDidClose | メニューが閉じられたときに発行されます。 | true |
ionDidOpen | メニューが開いているときに発行されます。 | true |
ionWillClose | メニューが閉じられようとするときに発行されます。 | true |
ionWillOpen | メニューが開かれようとするときに発行されます。 | true |
| Description | メニューを閉じる。メニューが既に閉じられていたり、閉じることができない場合は、falseを返します。 |
| Signature | close(animated?: boolean, role?: string) => Promise<boolean> |
| Parameters | animated: If true, the menu will animate when closing. If false, the menu will close instantly without animation. Defaults to true.
role: The role of the element that is closing the menu. This can be useful in a button handler for determining which button was clicked to close the menu. Some examples include: "cancel", "destructive", "selected", and "backdrop". |
| Description | メニューがアクティブな場合は true を返します。メニューが開閉可能で有効化されており、ion-split-pane の一部でないときにアクティブとみなされます。 |
| Signature | isActive() => Promise<boolean> |
| Description | メニューが開いている場合は true を返します。 |
| Signature | isOpen() => Promise<boolean> |
| Description | メニューを開く。メニューが既に開いているか、開くことができない場合は、falseを返します。 |
| Signature | open(animated?: boolean) => Promise<boolean> |
| Parameters | animated: If true, the menu will animate when opening. If false, the menu will open instantly without animation. Defaults to true. |
| Description | メ ニューを開くか閉じます。操作が正常に完了できない場合は false を返します。 |
| Signature | setOpen(shouldOpen: boolean, animated?: boolean, role?: string) => Promise<boolean> |
| Parameters | shouldOpen: If true, the menu will open. If false, the menu will close.
animated: If true, the menu will animate when opening/closing. If false, the menu will open/close instantly without animation.
role: The role of the element that is closing the menu. |
| Description | メニューを切り替えます。メニューが既に開かれている場合は閉じようとし、そうでない場合は開こうとします。操作が正常に完了しない場合は、falseを返します。 |
| Signature | toggle(animated?: boolean) => Promise<boolean> |
| Parameters | animated: If true, the menu will animate when opening/closing. If false, the menu will open/close instantly without animation. Defaults to true. |
| Name | Description |
|---|
backdrop | メニューを開いているときに、メインコンテンツの上に表示される背景です。 |
container | メニューの内容を格納するコンテナです。 |
| Name | Description |
|---|
--background | メニューの背景 |
--height | メニューの高さ |
--max-height | メニューの最大の高さ |
--max-width | メニューの最大幅 |
--min-height | メニューの高さの最小値 |
--min-width | メニューの最小幅 |
--width | メニューの幅 |
| Name | Description |
|---|
--background | メニューの背景 |
--height | メニューの高さ |
--max-height | メニューの最大の高さ |
--max-width | メニューの最 大幅 |
--min-height | メニューの高さの最小値 |
--min-width | メニューの最小幅 |
--width | メニューの幅 |
No slots available for this component.