# Menus
v-menu
コンポーネントは、アクティベート要素の位置にメニューを表示します。
# 使い方
メニューを有効にする要素を activator
スロットに入れてください。
# API
# サンプル
# Props
# Absolute
メニューは absolute プロパティを使用してアクティベーター要素の上に絶対的に配置することもできます。 画像上の任意の場所をクリックしてみてください。
# アクティベーター無しのabsolute
メニューは absolute と position-x や position-y プロパティを併用することで、アクティベーターなしでも使用できます。 画像上の任意の場所を右クリックしてみてください。
# クリックで閉じる
フォーカスが失ったときメニューを閉じることができます。
# コンテンツクリック時に閉じる
コンテンツがクリックされた時にv-menu
を閉じるかどうか設定することができます。
# Disabled
メニューを無効にすることができます。 無効化されたメニューを開くことはできません。
# Offset x
メニューをX軸でオフセットして、アクティベータを隠さないようにすることができます。
# Offset y
メニューをY軸でオフセットして、アクティベータを隠さないようにすることができます。
# Open on hover
メニューは、 open-on-hover プロパティで、クリックする代わりにホバーすることでアクセスできます。
# Rounded
メニューは rounded プロパティで border-radius を設定できます。 rounded クラスの詳細については、 Border Radius ページを参照してください。
# Slots
# アクティベーターとツールチップ
新しいv-slot
構文では、ネストされたアクティベーター、例えばv-menu
とv-tooltip
が同じアクティベーターボタンに適用されているものが正しく機能するためには特定の設定が必要です。 注:同じ構文が v-dialog
w/v-tooltip
のような他のネストされたアクティベータにも使われています。
# その他
# カスタムトランジション
Vuetifyには、 scale、 slide-x 、 slide-y の3つの標準トランジションが付属しています。 独自のトランジションを作成し、 transition引数として渡すこともできます。 For an example of how the stock transitions are constructed, visit here.
# Popover メニュー
メニューを開いたときに静的になるように構成して、ポップオーバーとして機能させることができます。 メニュー内に複数のインタラクティブな項目がある場合に便利です。
# コンポーネントでの使用
メニューはほぼすべてのコンポーネント内に配置できます。
# アクセシビリティ
デフォルトでは、 v-menu
コンポーネントは切り離されて(detached)、アプリケーションのルートに移動されます。 動的コンテンツのDOMへの挿入を適切にサポートするには、attach propを使用する_必要_があります。 これにより、 tab キーを押すと、アクティベーターからコンテンツにフォーカスが転送されます。