The v-menu component shows a menu at the position of the element used to activate it.
제공되는 Props, Slots, Events 와 함수들을 이용하여 원하는 컴포넌트를 직접 구현해 보세요.
Applies position: absolute to the component.
Designate a custom activator when the activator slot is not used. String can be any valid querySelector and Object can be any valid Node.
Removes overflow re-positioning for the content
Specifies which DOM element that this component should detach to. String can be any valid querySelector and Object can be any valid Node. This will attach to the root v-app component by default.
선택 항목의 중앙 요소
Aligns the component towards the bottom.
Milliseconds to wait before closing component. Only works with the open-on-hover prop
활성자의 바깥을 클릭하면 메뉴를 닫음
메뉴의 컨텐츠를 클릭하면 메뉴를 닫음
Applies a custom class to the detached element. This is useful because the content is moved to the beginning of the v-app component (unless the attach prop is provided) and is not targettable by classes passed directly on the component.
Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark themes.
Removes all keyboard interaction
메뉴를 비활성화
Will force the components content to render on mounted. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.
Applies position: fixed to the component.
Detaches the menu content inside of the component as opposed to the document.
Aligns the component towards the left.
Applies the light theme variant to the component.
Sets the max height of the menu content
컨텐츠의 최대 너비
컨텐츠의 최소 너비
Nudge the content to the bottom
Nudge the content to the left
Nudge the content to the right
Nudge the content to the top
Nudge the content width
Causes the component to flip to the opposite side when repositioned due to overflow
메뉴의 x축 오프셋. left/right 방향과 결합하여 작동
메유의 y축 오프셋. top/bottom 방향과 결합하여 작동
Milliseconds to wait before opening component. Only works with the open-on-hover prop
활성자(activator)를 클릭하면 메뉴가 열림
활성자(activator) 위에 마우스를 올리면(hover) 메뉴가 열림
Sets the transition origin on the element. You can find more information on the MDN documentation for transition origin.
activator 슬롯이 사용되지 않을 경우 컨텐츠의 포지션
activator 슬롯이 사용되지 않을 경우 컨텐츠의 포지션
The value that is updated when the menu is closed - must be primitive. Dot notation is supported
Aligns the component towards the right.
Designates the border-radius applied to the component. You can find more information on the Border Radius page.
Removes the component's border-radius.
Aligns the content towards the top.
Sets the component transition. Can be one of the built in transitions or one your own.
Controls whether the component is visible or hidden.
컴포넌트의 z-index
When used, will activate the component when clicked (or hover for specific components). This manually stops the event propagation. Without this slot, if you open the component through its model, you will need to manually stop the event propagation
{
attrs: { role: string, aria-haspopup: boolean, aria-expanded: string }
on: { [eventName]: eventHandler }
value: boolean
}The default 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.
open-on-hover prop을 사용하면 클릭 대신 호버링으로 메뉴에 접근할 수 있습니다.
Vuetify엔 3개의 기본 트랜지션 scale, slide, slide-x, slide-y 가 있습니다. 하지만 트랜지션 인자로 직접 만든 트랜지션을 사용할 수도 있ㅅ브니다. 예를 들어 어떻게 스톡(stock) 트랜지션이 작동하는지 보려면 here를 방문하세요.
You can disable the menu. Disabled menus can't be opened.
Menu can be offset by the X axis to make the activator visible.
Menu can be offset by the Y axis to make the activator visible.
Menus can have their border-radius set by the rounded prop. Additional information about rounded classes is on the Border Radius page.
Menu can be closed when lost focus.
You can configure whether v-menu should be closed when its content is clicked.
또한 absolute 와 position-x, position-y prop들을 함께 사용하면 활성자(activator) 없이도 메뉴를 원하는 절대좌표에 나타낼 수 있습니다. 이미지의 아무곳에나 오른쪽 클릭을 해보세요.
메뉴는 또한 거의 모든 컴포넌트 안에 위치할 수 있습니다.
A menu can be configured to be static when opened, allowing it to function as a popover. 이는 메뉴 안에 여러 인터렉티브한 아이템이 있을 때 유용합니다.
By default, v-menu components are detached and moved to the root of your application. In order to properly support inserting dynamic content into the DOM, you must use the attach prop. This will ensure that focus transfers from the activator to the content when pressing the tab key.