Vuetify

ショップ

企業向け

v-menuコンポーネントは、アクティブにするために使用される要素の位置にメニューを表示します。

メニューをアクティブにする要素を activatorスロットに忘れずに配置してください。

確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。

以下に、簡単な例から複雑な例まで示します。

メニューは、absolute propを使って、アクティベーター要素の上に絶対的に配置することもできる。画像のどこかをクリックしてみてください。

Menus can be accessed using hover instead of clicking with the open-on-hover prop.

Vuetify comes with 3 standard transitions, scale, slide-x and slide-y. You can also create your own and pass it as the transition argument. For an example of how the stock transitions are constructed, visit here.

メニューを無効にできます。無効なメニューは開くことができません。

メニューをX軸でオフセットして、アクティベータを隠さないようにすることができます。

メニューをY軸でオフセットして、アクティベータを隠さないようにすることができます。

Menus can have their border-radius set by the rounded prop. Additional information about rounded classes is on the Border Radius page.

New in v2.3

フォーカスが失ったときメニューを閉じることができます。

コンテンツがクリックされたときに v-menu を閉じるかどうかを設定することができます。

Menus can also be used without an activator by using absolute together with the props position-x and position-y. Try right-clicking anywhere on the image.

A menu can be configured to be static when opened, allowing it to function as a popover. This can be useful when there are multiple interactive items within the menu contents.

デフォルトでは、v-menu コンポーネントは 切り離されて アプリケーションのルートに移動します。動的コンテンツのDOMへの挿入 を適切にサポートするためには、attach propを使用する必要があります。これにより、tabキーを押したときに、フォーカスがアクティベーターからコンテンツに転送されるようになります。

準備はいいですか? 以下から続きが読めます。

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!