Skip to main content
Version: v6

ion-menu-button

shadow

The Menu Button component contains an icon and automatically adds functionality to open a menu when clicked.

See the menu documentation for more information.

Properties

autoHide

Description対応するメニューがアクティブでない場合、メニューボタンを自動的に非表示にします。
Attributeauto-hide
Typeboolean
Defaulttrue

color

DescriptionThe color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming.
Attributecolor
Type"danger" | "dark" | "light" | "medium" | "primary" | "secondary" | "success" | "tertiary" | "warning" | string & Record<never, never> | undefined
Defaultundefined

disabled

Descriptiontrueの場合、ユーザはメニューボタンを操作することができません。
Attributedisabled
Typeboolean
Defaultfalse
Descriptionメニューの menuId プロパティに対応するオプションのプロパティです。メニュー側には start または end を指定することもできます。これは、トグルするための正しいメニューを見つけるために使用されます。
Attributemenu
Typestring | undefined
Defaultundefined

mode

Descriptionmodeは、どのプラットフォームのスタイルを使用するかを決定します。
Attributemode
Type"ios" | "md"
Defaultundefined

type

Descriptionボタンの種類です。
Attributetype
Type"button" | "reset" | "submit"
Default'button'

Events

No events available for this component.

Methods

No public methods available for this component.

CSS Shadow Parts

NameDescription
iconメニューボタンのアイコン(ion-iconを使用)です。
nativeすべての子要素を包むネイティブ HTML ボタン要素。

CSS Custom Properties

NameDescription
--backgroundメニューボタンの背景
--background-focusedタブキーでフォーカスしたときのメニューボタンの背景色
--background-focused-opacityタブキーでフォーカスしたときのメニューボタンの背景の不透明度
--background-hoverホバー時のメニューボタンの背景
--background-hover-opacityホバー時の背景の不透明度
--border-radiusメニューボタンのボーダー半径
--colorメニューボタンの色
--color-focusedタブキーでフォーカスしたときのメニューボタンの色
--color-hoverホバー時のメニューボタンの色
--padding-bottomボタンのBottom Padding
--padding-endボタンの向きが左から右の場合はRight Padding、右から左の場合はLeft Paddingとなります。
--padding-startボタンの向きが左から右の場合はLeft Padding、右から左の場合はRight Paddingとなります。
--padding-topボタンのTop Padding

Slots

No slots available for this component.