VMenu API

Experiment and create beautiful UIs with our interactive playground!

Props

name	type	default
`activator`	Element \| 'parent' \| (string & {}) \| ComponentPublicInstance	undefined
オーバーレイのアクティベーターを明示的に設定します。
`activator-props`	unknown	{}
アクティベーターにカスタムプロパティを適用します。
`attach`	string \| boolean \| Element	false
オーバーレイコンテンツをテレポートさせるDOM要素を指定します。直接の要素参照、querySelector文字列、またはテレポートを無効にするために `true` を使用できます。デフォルトでは `body` を使用します。一般的に、最後の手段としてのみ推奨されます。デフォルトの位置決めアルゴリズムはテレポートなしでは対応できない多くのシナリオをより良く処理し、メニューがアクティベーターの子要素として配置されると予期しない動作が発生する可能性があります。
`close-delay`	string \| number	250
コンポーネントが閉じられるまでのミリ秒を指定します。open-on-hover prop があるときのみ動作します。
`close-on-back`	boolean	true
ブラウザの戻るボタンが押されたときや `$router.back()` が呼ばれたときに、元のナビゲーションをキャンセルしてオーバーレイコンテンツを閉じます。`persistent` オーバーレイはナビゲーションをキャンセルし、閉じるのではなく外側がクリックされたかのようにアニメーションします。
`close-on-content-click`	boolean	true
コンテンツがクリックされたときにメニューを閉じるかどうかを指定します。
`contained`	boolean	false
コンポーネントとスクリムのサイズをオフセット親要素に制限します。`absolute` および `attach` を含みます。（注: 親要素には position: relative が必要です)。
`content-class`	any	undefined
デタッチされた要素にカスタムクラスを適用します。コンテンツが `v-app`コンポーネントの先頭に移動され(attach propが与えられない限り)、コンポーネントに直接渡されたクラスが対象とならないので便利です。
`content-props`	any	undefined
コンテンツにカスタムプロパティを適用します。
`disabled`	boolean	false
コンポーネントをクリックまたはターゲットにできなくします。
`eager`	boolean	false
コンポーネントのコンテンツがマウント時にレンダリングされるよう強制します。これは、DOMにレンダリングされないがSEOのためにクロールされることを望むコンテンツがある場合に便利です。
`height`	string \| number	undefined
コンポーネントに高さを設定します。
`id`	string	undefined
コンポーネントの一意の識別子。
`location`	Anchor	undefined
コンポーネントの位置決めのためのアンカーポイントを指定します。方向の指示を使用して、水平、垂直、またはその両方に合わせます。
`location-strategy`	'static' \| 'connected' \| LocationStrategyFn	'connected'
コンポーネントがアクティベーターに対してどのように位置するかを指定するための関数。
`max-height`	string \| number	undefined
コンテンツの高さの最大値を設定します。
`max-width`	string \| number	undefined
コンテンツの横幅の最大値を設定します。
`min-height`	string \| number	undefined
コンテンツの高さの最小値を設定します。
`min-width`	string \| number	undefined
コンポーネントの最小幅を設定します。アクティベーターの幅を使用するには、`auto` を使用します。
`model-value`	boolean	false
コンポーネントの v-model の値です。コンポーネントが multiple prop をサポートしている場合、デフォルトでは空の配列になります。
`no-click-animation`	boolean	false
永続的な props を使用している場合、content 要素の外側をクリックしたときにバウンス効果を無効にします。
`offset`	string \| number \| number[]	undefined
対象のどちら側にあるかに基づいてコンテンツをターゲットから離す単一の値。
`opacity`	string \| number	undefined
オーバーレイの不透明度を設定します。
`open-delay`	string \| number	300
コンポーネントが開かれるまでのミリ秒を指定します。open-on-hover prop があるときのみ動作します。
`open-on-click`	boolean	undefined
アクティベーターのクリック時にメニューを開くかどうかを指定します。
`open-on-focus`	boolean	undefined
アクティベーターがフォーカスされているときにコンポーネントを有効にします。
`open-on-hover`	boolean	false
アクティベーターのホバー時にメニューを開くかどうかを指定します。
`origin`	Anchor \| 'auto' \| 'overlap'	'auto'
要素にトランジションの起点を設定します。 MDNドキュメントで for transition originの詳細を参照できます。
`persistent`	boolean	false
要素の外側をクリックしたり、escキーを押したりしても、要素を無効にすることはできません。
`scrim`	string \| boolean	false
背景を有効にするにはtrue/false、色を定義する文字列を受け入れます。
`scroll-strategy`	'none' \| 'close' \| 'block' \| 'reposition' \| ScrollStrategyFn	'reposition'
コンポーネントがアクティブになり、ユーザーがスクロールするときに使用されるストラテジー。
`submenu`	boolean	false
Opens with right arrow and closes on left instead of up/down. Implies `location="end"`. Directions are reversed for RTL.
`target`	\| Element \| 'parent' \| 'cursor' \| (string & {}) \| ComponentPublicInstance \| [number, number]	undefined
locationStrategy=“connected” の場合、オーバーレイが相対的に位置する要素またはx,y座標の配列を指定します。デフォルトではアクティベーター要素となります。
`theme`	string	undefined
このコンポーネントとその全ての子要素のテーマを指定します。
`transition`	\| string \| boolean \| (TransitionProps & { component: Component }) \| { component: Component }	{component: {name: 'VDialogTransition'}}
コンポーネントの遷移を設定します。組み込みの遷移または独自の遷移のいずれかにすることができます。
`width`	string \| number	undefined
コンポーネントに横幅を設定します。
`z-index`	string \| number	2000
コンポーネントに使用されるz-index。

イベント

name	type
`update:modelValue`	[boolean]
コンポーネントのモデルが変更されたときに発生するイベント。

Slots

{ isActive: boolean props: Record<string, any> targetRef: TemplateRef }

{ isActive: Ref<boolean> }

`activator`
使用すると、クリック (または特定のコンポーネントの場合はホバー) でコンポーネントがアクティブになります。これによりイベントの伝播が手動で停止されます。このスロットがない場合、モデルを通じてコンポーネントを開くと、イベントの伝播を手動で停止する必要があります。
`default`
デフォルトの Vue slot

公開済み

HTMLElement

() => void

HTMLElement

boolean

string

boolean

HTMLElement

HTMLElement | [number, number]

(e: Event) => void

`activatorEl`
MISSING DESCRIPTION (edit in github)
`animateClick`
MISSING DESCRIPTION (edit in github)
`contentEl`
MISSING DESCRIPTION (edit in github)
`globalTop`
MISSING DESCRIPTION (edit in github)
`id`
MISSING DESCRIPTION (edit in github)
`localTop`
MISSING DESCRIPTION (edit in github)
`scrimEl`
MISSING DESCRIPTION (edit in github)
`target`
MISSING DESCRIPTION (edit in github)
`updateLocation`
MISSING DESCRIPTION (edit in github)

SASS変数

name	default
`$menu-content-border-radius`	settings.$border-radius-root
`$menu-elevation`	8

#VMenu API

VMenu API