メインコンテンツまでスキップ
Version: v6

ion-menu-toggle

shadow

コンテンツ

MenuToggleコンポーネントを使用すると、Menuの表示/非表示を切り替えることができます。

デフォルトでは、選択したMenuがアクティブな場合にのみ表示されます。Menuは、開いたり閉じたりできるときにアクティブになります。Menuが無効になっている場合、または分割ペインとして表示されている場合、メニューは非アクティブとしてマークされ、ion-menu-toggleが非表示になります。

ion-menu-toggle を常に表示しておきたい場合は、autoHideプロパティをfalseに設定できます。

使い方

<ion-app>
<ion-menu side="start" menuId="first" contentId="main">
<ion-header>
<ion-toolbar color="secondary">
<ion-title>Example Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<ion-item>Menu Item</ion-item>
</ion-list>
</ion-content>
</ion-menu>
<div class="ion-page" id="main">
<ion-content class="ion-padding">
<ion-menu-toggle>
<ion-button>Toggle Menu</ion-button>
</ion-menu-toggle>
</ion-content>
</div>
</ion-app>

プロパティ

autoHide

DescriptionAutomatically hides the content when the corresponding menu is not active.

By default, it's true. Change it to false in order to keep ion-menu-toggle always visible regardless the state of the menu.
Attributeauto-hide
Typeboolean
Defaulttrue
DescriptionOptional property that maps to a Menu's menuId prop. Can also be start or end for the menu side. This is used to find the correct menu to toggle.

If this property is not used, ion-menu-toggle will toggle the first menu that is active.
Attributemenu
Typestring | undefined
Defaultundefined

イベント

No events available for this component.

メソッド

No public methods available for this component.

CSS Shadow Parts

No CSS shadow parts available for this component.

CSSカスタムプロパティ

No CSS custom properties available for this component.

Slots

NameDescription
``Content is placed inside the toggle to act as the click target.