메뉴 (Menu)
v-menu 컴포넌트는 (메뉴를) 활성화할 요소의 위치에 메뉴를 보여줍니다.
API
요소를 절대 위치 시킴
activator 슬롯이 사용되지 않을 경우 커스텀 activator 를 지정. 유효한 임의의 querySelector 문자열이나 유효한 노드(node) 객체가 가능
Removes overflow re-positioning for the content
Specifies which DOM element that this component should detach to. Use either a CSS selector string or an object reference to the element.
선택 항목의 중앙 요소
컴포넌트를 아랫쪽(bottom)으로 정렬
컴포넌트가 닫히기 전에 기다리는 시간(밀리세컨드)
활성자의 바깥을 클릭하면 메뉴를 닫음
메뉴의 컨텐츠를 클릭하면 메뉴를 닫음
Applies a custom class to the detached element. This is useful because the content is moved to the end of the app and is not targettable by classes passed directly on the component.
Components.Menus.
Components.Menus.
메뉴를 비활성화
요소의 위치를 고정
100% 너비(width)를 가지도록 강제
Components.Menus.
mounted에서 컨텐츠를 조건부로 렌더링. 컨첸츠가 활성화 되었을 경우에만 렌더링합니다.
요소를 왼쪽으로 정렬
Components.Menus.
컨탠츠의 최대 높이를 설정
컨텐츠의 최대 너비
컨텐츠의 최소 너비
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 방향과 결합하여 작동
컴포넌트가 열리기 전에 기다리는 시간(밀리세컨드)
활성자(activator)를 클릭하면 메뉴가 열림
활성자(activator) 위에 마우스를 올리면(hover) 메뉴가 열림
트랜지션 중심(origin)을 설정
activator 슬롯이 사용되지 않을 경우 컨텐츠의 포지션
activator 슬롯이 사용되지 않을 경우 컨텐츠의 포지션
Components.Menus.
요소를 오른쪽으로 정렬
요소를 위쪽(top)으로 정렬
컴포넌트 트랜지션을 설정. 내장 트랜지션과 사용자 트랜지션 모두 가능
표시여부를 조절 (Controls visibility)
컴포넌트의 z-index
예제
절대위치 (Absolute position)
메뉴는 또한 absolute prop을 사용하는 요소의 위에 절대적으로 (원하는 위치에) 나타낼 수 있습니다. 이미지의 아무곳이나 클릭해보세요.
활성자가 없는 절대위치 (Absolute position without activator)
또한 absolute 와 position-x, position-y prop들을 함께 사용하면 활성자(activator) 없이도 메뉴를 원하는 절대좌표에 나타낼 수 있습니다. 이미지의 아무곳에나 오른쪽 클릭을 해보세요.
Menu with activator and tooltip
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.
호버링 (Hover)
open-on-hover prop을 사용하면 클릭 대신 호버링으로 메뉴에 접근할 수 있습니다.
여러 메뉴 (Menus)
메뉴는 또한 거의 모든 컴포넌트 안에 위치할 수 있습니다.
커스텀 트랜지션 (Custom transitions)
Vuetify엔 3개의 기본 트랜지션 scale, slide, slide-x, slide-y 가 있습니다. 하지만 트랜지션 인자로 직접 만든 트랜지션을 사용할 수도 있ㅅ브니다. 예를 들어 어떻게 스톡(stock) 트랜지션이 작동하는지 보려면 here를 방문하세요.
팝오버 메뉴 (Popover menu)
A menu can be configured to be static when opened, allowing it to function as a popover. 이는 메뉴 안에 여러 인터렉티브한 아이템이 있을 때 유용합니다.