v-menuコンポーネントは、アクティブにするために使用される要素の位置にメニューを表示します。
確認したいコンポーネントを下から選び、利用できる props、slots、events、functions を確認してください。
コンポーネントに position: absolute を適用します。
activator slot が使われていない場合、カスタムの activator を指定します。String には任意の有効な querySelector が、Object には任意の有効な Node が指定できます。
Removes overflow re-positioning for the content
このコンポーネントが detach するべき DOM 要素を指定します。String の場合、任意の有効な querySelector が指定でき、Object の場合、任意の有効な Node が指定できます。デフォルトでは、root の v-app コンポーネントを attach します。
Centers list on selected element
コンポーネントを下部に配置します。
Milliseconds to wait before closing component. Only works with the open-on-hover prop
外側アクティベータークリック時にメニューを閉じるかどうかを指定します。
コンテンツがクリックされたときにメニューを閉じるかどうかを指定します。
デタッチされた要素にカスタムクラスを適用します。コンテンツが v-appコンポーネントの先頭に移動され(attach propが与えられない限り)、コンポーネントに直接渡されたクラスが対象とならないので便利です。
コンポーネントにダークテーマを適応します。詳しく知りたい場合は、Material Design documentationのdark themesを参照してください。
Removes all keyboard interaction
メニューを無効にします。
コンポーネントのコンテンツを mounted 時に render することを強制します。この機能は、SEO のために crawl させたい DOM の中に render されないコンテンツを持っているときに役に立ちます。
コンポーネントに position: fixed を適用します。
ドキュメントではなく、コンポーネント内のメニューコンテンツを切り離します。
コンポーネントを左に配置します。
コンポーネントにlightテーマを適用します。
メニューコンテンツの最大高さを設定します。
コンテンツの横幅の最大値を設定します。
コンテンツの横幅の最小値を設定します。
コンテンツをbottomに移動します
コンテンツをleftに移動します
コンテンツをrightに移動します
コンテンツをtopに移動します
Nudge the content width
オーバーフローによる再配置の際、コンポーネントが反対側に反転します
X軸のメニューのオフセット。left/right方向と連動します。
Y軸のメニューのオフセット。top/bottom方向と連動します。
Milliseconds to wait before opening component. Only works with the open-on-hover prop
アクティベーターのクリック時にメニューを開くかどうかを指定します。
アクティベーターのホバー時にメニューを開くかどうかを指定します
要素にトランジションの起点を設定します。 MDNドキュメントで for transition origin の詳細を参照できます。
アクティベータースロットを使用しない場合にコンテンツを配置するために使用します
アクティベータースロットを使用しない場合にコンテンツを配置するために使用します
The value that is updated when the menu is closed - must be primitive. Dot notation is supported
コンポーネントを右に配置します。
Designates the border-radius applied to the component. You can find more information on the Border Radius page.
Removes the component's border-radius.
コンポーネントを上部に配置します。
コンポーネントのトランジションを設定します。 組み込みトランジション のいずれか、または独自のものを使用できます。
コンポーネントを表示するか非表示にするかを制御します。
コンポーネントに使用されるz-index
使用すると、クリック時 (または特定のコンポーネントではホバー時) にコンポーネントを有効にします。これにより手動でイベントの propagation を stop されます。この slot がない場合、モデル経由でコンポーネントを開いたときには、自分でイベントの propagation を stop する必要があります。
{
attrs: { role: string, aria-haspopup: boolean, aria-expanded: string }
on: { [eventName]: eventHandler }
value: boolean
}デフォルトの Vue slot
$border-radius-root !default;8 !default;以下に、簡単な例から複雑な例まで示します。
メニューは、absolute propを使って、アクティベーター要素の上に絶対的に配置することもできる。画像のどこかをクリックしてみてください。
With the new v-slot syntax, nested activators such as those seen with a v-menu and v-tooltip attached to the same activator button, need a particular setup in order to function correctly. Note: this same syntax is used for other nested activators such as v-dialog w/ v-tooltip.
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.
フォーカスが失ったときメニューを閉じることができます。
コンテンツがクリックされたときに 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.
Menus can be placed within almost any component.
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キーを押したときに、フォーカスがアクティベーターからコンテンツに転送されるようになります。