ion-menu
The Menu component is a navigation drawer that slides in from the side of the current view. By default, it slides in from the left, 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.
Basic Usage
Menu Toggle
The ion-menu-toggle component can be used to create custom button that can open or close the menu.
Menu Types
The type property can be used to customize how menus display in your application.
Theming
CSS Shadow Parts
Interfaces
MenuCustomEvent
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;
}
Properties
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 | string ｜ undefined |
| Default | undefined |
Events
| Name | Description |
|---|---|
ionDidClose | メニューが閉じられたときに発します。 |
ionDidOpen | メニューが開いているときに発行されます。 |
ionWillClose | メニューが閉じられようとするときに発します。 |
ionWillOpen | メニューが開かれようとするときに発します。 |
Methods
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 Custom Properties
| Name | Description |
|---|---|
--background | メニューの背景 |
--height | メニューの高さ |
--max-height | メニューの最大の高さ |
--max-width | メニューの最大幅 |
--min-height | メニューの高さの最小値 |
--min-width | メニューの最小幅 |
--width | メニューの幅 |
Slots
No slots available for this component.