Menuメニュー

メニューコンポーネントは、縦方向に並んだ一連のオプションを提供します。ユーザーがボタンやその他のコントロールを操作すると、メニューが表示されます。

ドロップダウンメニューを実装する必要がある場合は、<mdui-dropdown> コンポーネントと組み合わせることができます。

使用方法

コンポーネントを必要に応じてインポートします：

import 'mdui/components/menu.js';
import 'mdui/components/menu-item.js';

コンポーネントの TypeScript 型を必要に応じてインポートします：

import type { Menu } from 'mdui/components/menu.js';
import type { MenuItem } from 'mdui/components/menu-item.js';

使用例：

Item 1

Item 2

<mdui-menu>
  <mdui-menu-item>Item 1</mdui-menu-item>
  <mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>

<mdui-menu-item> コンポーネントで icon と end-icon 属性を設定すると、メニュー項目の左側と右側に Material Icons アイコンを追加できます。end-text 属性を設定すると、右側にテキストを追加できます。また、icon、end-icon、end-text スロットを使用して、メニュー項目の左側と右側にアイコンとテキストを追加することもできます。

メニュー項目の左側に他の項目と揃えるためのスペースを確保したい場合は、icon 属性を空文字列に設定します。

Item 1

Item 2

Ctrl+X

Item 3

<mdui-menu>
  <mdui-menu-item icon="visibility" end-icon="add_circle" end-text="Ctrl+X">Item 1</mdui-menu-item>
  <mdui-menu-item>
    Item 2
    <mdui-icon slot="icon" name="visibility"></mdui-icon>
    <mdui-icon slot="end-icon" name="add_circle"></mdui-icon>
    <span slot="end-text">Ctrl+X</span>
  </mdui-menu-item>
  <mdui-menu-item icon="">Item 3</mdui-menu-item>
</mdui-menu>

ソース

単一選択または複数選択モードでは、selected-icon 属性または selected-icon スロットを使用して選択状態のアイコンを設定できます。

Item 1

Item 2

<mdui-menu selects="multiple">
  <mdui-menu-item value="item-1" selected-icon="cloud_done">Item 1</mdui-menu-item>
  <mdui-menu-item value="item-2">
    <mdui-icon slot="selected-icon" name="done_outline"></mdui-icon>
    Item 2
  </mdui-menu-item>
</mdui-menu>

ソース

リンク

<mdui-menu-item> コンポーネントに href 属性を設定すると、メニュー項目をリンクに変換できます。この場合、リンク関連の属性 download、target、rel も使用できます。

Item 1

Item 2

<mdui-menu>
  <mdui-menu-item href="https://www.mdui.org" target="_blank">Item 1</mdui-menu-item>
  <mdui-menu-item>Item 2</mdui-menu-item>
</mdui-menu>

ソース

サブメニュー

<mdui-menu-item> コンポーネントで submenu スロットを使用して、サブメニュー項目の要素を指定できます。

Line spacing Single

1.5

Double

Custom: 1.2

Paragraph style

<mdui-menu>
  <mdui-menu-item>
    Line spacing
    <mdui-menu-item slot="submenu">Single</mdui-menu-item>
    <mdui-menu-item slot="submenu">1.5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Double</mdui-menu-item>
    <mdui-menu-item slot="submenu">Custom: 1.2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Paragraph style</mdui-menu-item>
</mdui-menu>

ソース

<mdui-menu> コンポーネントで、submenu-trigger 属性を使用してサブメニューのトリガー方法を設定できます。

Line spacing Single

1.5

Double

Custom: 1.2

Paragraph style

<mdui-menu submenu-trigger="click">
  <mdui-menu-item>
    Line spacing
    <mdui-menu-item slot="submenu">Single</mdui-menu-item>
    <mdui-menu-item slot="submenu">1.5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Double</mdui-menu-item>
    <mdui-menu-item slot="submenu">Custom: 1.2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Paragraph style</mdui-menu-item>
</mdui-menu>

ソース

submenu-trigger 属性が hover に設定されている場合、<mdui-menu> コンポーネントで submenu-open-delay と submenu-close-delay 属性を使用してサブメニューの開く遅延と閉じる遅延を設定できます。

Line spacing Single

1.5

Double

Custom: 1.2

Paragraph style

<mdui-menu submenu-trigger="hover" submenu-open-delay="1000" submenu-close-delay="1000">
  <mdui-menu-item>
    Line spacing
    <mdui-menu-item slot="submenu">Single</mdui-menu-item>
    <mdui-menu-item slot="submenu">1.5</mdui-menu-item>
    <mdui-menu-item slot="submenu">Double</mdui-menu-item>
    <mdui-menu-item slot="submenu">Custom: 1.2</mdui-menu-item>
  </mdui-menu-item>
  <mdui-menu-item>Paragraph style</mdui-menu-item>
</mdui-menu>

ソース

カスタムコンテンツ

<mdui-menu-item> コンポーネントで custom スロットを使用すると、メニュー項目のコンテンツを完全にカスタマイズできます。

ABS

数値の絶対値を取る

ACOS

数値のアークコサイン（ラジアン）を返す

ACOSH

数値の双曲線アークコサインを返す

<style>
  .custom-item {
    padding: 4px 12px;
  }

  .custom-item .secondary {
    display: none;
    color: #888;
    font-size: 13px;
  }

  .custom-item:hover .secondary {
    display: block
  }
</style>

<mdui-menu>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ABS</div>
      <div class="secondary">数値の絶対値を取る</div>
    </div>
  </mdui-menu-item>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ACOS</div>
      <div class="secondary">数値のアークコサイン（ラジアン）を返す</div>
    </div>
  </mdui-menu-item>
  <mdui-menu-item>
    <div slot="custom" class="custom-item">
      <div>ACOSH</div>
      <div class="secondary">数値の双曲線アークコサインを返す</div>
    </div>
  </mdui-menu-item>
</mdui-menu>

ソース

HTML 属性	JavaScript プロパティ	型	デフォルト値
`value`	`value`	`string`	-
メニューアイテムの値です。
`disabled`	`disabled`	`boolean`	`false`
メニューアイテムを無効にするかどうかを指定します。
`icon`	`icon`	`string`	-
左側に表示するMaterial Iconsのアイコン名です。`slot="icon"` で設定することもできます。左側にアイコンを表示する必要はないが、アイコン用のスペースを確保したい場合は、空の文字列を渡してプレースホルダーとすることができます。
`end-icon`	`endIcon`	`string`	-
右側に表示するMaterial Iconsのアイコン名です。`slot="end-icon"` で設定することもできます。
`end-text`	`endText`	`string`	-
右側に表示するテキストです。`slot="end-text"` で設定することもできます。
`selected-icon`	`selectedIcon`	`string`	-
選択状態のMaterial Iconsアイコン名です。`slot="selected-icon"` で設定することもできます。
`submenu-open`	`submenuOpen`	`boolean`	`false`
サブメニューを開くかどうかを指定します。
`href`	`href`	`string`	-
リンク先のURLです。この属性を設定すると、コンポーネント内部は `<a>` 要素としてレンダリングされ、リンク関連の属性が使用可能になります。
`download`	`download`	`string`	-
ダウンロードリンクの対象ファイル名です。注：`href` 属性が設定されている場合にのみ有効です。
`target`	`target`	`'_blank' \| '_parent' \| '_self' \| '_top'`	-
リンクの開き方です。次の値を指定します： `_blank`：新しいウィンドウで開く `_parent`：親フレームで開く `_self`：デフォルト。現在のフレームで開く `_top`：最上位のウィンドウで開く注：`href` 属性が設定されている場合にのみ有効です。
`rel`	`rel`	`'alternate' \| 'author' \| 'bookmark' \| 'external' \| 'help' \| 'license' \| 'me' \| 'next' \| 'nofollow' \| 'noreferrer' \| 'opener' \| 'prev' \| 'search' \| 'tag'`	-
現在のドキュメントとリンク先ドキュメントの関係です。次の値を指定します： `alternate`：現在のドキュメントの代替バージョン `author`：現在のドキュメントまたは記事の作成者 `bookmark`：直近の祖先セクションへのパーマリンク `external`：参照先ドキュメントが現在のサイトとは異なるサイトにあることを示します `help`：関連するヘルプドキュメントへのリンク `license`：現在のドキュメントのメインコンテンツが、参照先ファイルの著作権ライセンスの対象であることを示します `me`：現在のドキュメントがリンク先コンテンツの所有者を表します `next`：現在のドキュメントがシリーズの一部であり、参照先ドキュメントがシリーズの次のドキュメントです `nofollow`：現在のドキュメントの作成者または発行者が、参照先ファイルを推奨していないことを示します `noreferrer`：`Referer` ヘッダーを含めません。`noopener` と同様の効果です `opener`：ハイパーリンクが最上位のブラウジングコンテキストを作成する場合（つまり `target` 属性値が `_blank`）、補助ブラウジングコンテキストを作成します `prev`：現在のドキュメントがシリーズの一部であり、参照先ドキュメントがシリーズの前のドキュメントです `search`：現在のファイルとその関連ページを検索するために使用できるリソースへのリンクを提供します `tag`：現在のドキュメントに適用されるタグ（指定されたアドレスで識別される）を提供します注：`href` 属性が指定されている場合にのみ使用できます。
`autofocus`	`autofocus`	`boolean`	`false`
ページ読み込み完了後、自動的にフォーカスを取得するかどうかを指定します。
`tabindex`	`tabIndex`	`number`	-
Tab キーによるフォーカス移動時の、要素の順序を指定します。

名前	パラメーター	戻り値
`click`		`void`
要素のマウスクリックをシミュレートします。
`focus`	`options: FocusOptions` (オプション)	`void`
現在の要素にフォーカスを設定します。オプションとして、以下のプロパティを持つオブジェクトを渡すことができます： `preventScroll`：デフォルトでは、要素がフォーカスを取得すると、その要素がビュー内に表示されるようにページがスクロールします。ページのスクロールを防ぐには、このプロパティを `true` に設定します。
`blur`		`void`
現在の要素からフォーカスを外します。

名前
`focus`
フォーカスを取得したときに発生します。
`blur`
フォーカスを失ったときに発生します。
`submenu-open`
サブメニューが開き始めたときに発生するイベントです。`event.preventDefault()` を呼び出すことで、サブメニューが開くのを防ぐことができます。
`submenu-opened`
サブメニューのオープンアニメーションが完了したときに発生するイベントです。
`submenu-close`
サブメニューが閉じ始めたときに発生するイベントです。`event.preventDefault()` を呼び出すことで、サブメニューが閉じるのを防ぐことができます。
`submenu-closed`
サブメニューのクローズアニメーションが完了したときに発生するイベントです。

名前
デフォルト
メニューアイテムのテキスト
`icon`
メニューアイテムの左側のアイコン
`end-icon`
メニューアイテムの右側のアイコン
`end-text`
メニュー右側のテキスト
`selected-icon`
選択状態のアイコン
`submenu`
サブメニュー
`custom`
任意のカスタムコンテンツ

名前
`container`
メニューアイテムのコンテナ
`icon`
左側のアイコン
`label`
テキストコンテンツ
`end-icon`
右側のアイコン
`end-text`
右側のテキスト
`selected-icon`
選択状態のアイコン
`submenu`
サブメニュー要素

HTML 属性	JavaScript プロパティ	型	デフォルト値
`selects`	`selects`	`'single' \| 'multiple'`	-
メニューアイテムの選択可能状態です。デフォルトは選択不可です。次の値を指定します： `single`：単一選択 `multiple`：複数選択
`value`	`value`	`string \| string[]`	-
現在選択されている `<mdui-menu-item>` の値です。注：この属性のHTML属性値は常に文字列として扱われ、`selects="single"` の場合にのみHTML属性で初期値を設定できます。この属性のJavaScriptプロパティ値は、`selects="single"` の場合は文字列、`selects="multiple"` の場合は文字列の配列になります。したがって、`selects="multiple"` の場合にこの値を変更するには、JavaScriptプロパティ値を変更する必要があります。
`dense`	`dense`	`boolean`	`false`
メニューアイテムにコンパクトなレイアウトを使用するかどうかを指定します。
`submenu-trigger`	`submenuTrigger`	`'click' \| 'hover' \| 'focus' \| 'manual' \| string`	`'click hover'`
サブメニューのトリガー方法です。スペース区切りで複数の値を指定できます。次の値があります： `click`：メニューアイテムをクリックしたときにサブメニューを開く `hover`：メニューアイテムにマウスをホバーしたときにサブメニューを開く `focus`：メニューアイテムにフォーカスしたときにサブメニューを開く `manual`：プログラムからのみサブメニューの開閉が可能です。他のトリガー方法と併用できません。
`submenu-open-delay`	`submenuOpenDelay`	`number`	`200`
マウスホバーでサブメニューが開くまでの遅延時間（ミリ秒単位）です。
`submenu-close-delay`	`submenuCloseDelay`	`number`	`200`
マウスホバーでサブメニューが閉じるまでの遅延時間（ミリ秒単位）です。

名前	パラメーター	戻り値
`focus`	`options: FocusOptions` (オプション)	`void`
現在の要素にフォーカスを設定します。
`blur`		`void`
現在の要素からフォーカスを外します。

名前
`change`
メニューアイテムの選択状態が変化したときに発生します。

名前
デフォルト
サブメニューアイテム（`<mdui-menu-item>`）、区切り線（`<mdui-divider>`）などの要素

名前
`--shape-corner`
コンポーネントの角丸のサイズ。ピクセル値で直接指定できますが、デザイントークンを参照することをお勧めします。

前の章

List リスト

次の章

NavigationBar ボトムナビゲーションバー

Menuメニュー

使用方法

例

コンパクトレイアウト

メニュー項目の無効化

単一選択をサポート

複数選択をサポート

アイコン

リンク

サブメニュー

カスタムコンテンツ

`mdui-menu-item` API

プロパティ

メソッド

イベント

Slots

CSS Parts

`mdui-menu` API

プロパティ

メソッド

イベント

Slots

CSS カスタムプロパティ