메뉴 (Menu)

v-menu 컴포넌트는 (메뉴를) 활성화할 요소의 위치에 메뉴를 보여줍니다.

사용법

Remember to put the element that activates the menu in the activator slot.

API

v-menu
이름
absolute
디폴트
false
타입
boolean

요소를 절대 위치 시킴

이름
activator
디폴트
undefined
타입
any

activator 슬롯이 사용되지 않을 경우 커스텀 activator 를 지정. 유효한 임의의 querySelector 문자열이나 유효한 노드(node) 객체가 가능

이름
allow-overflow
디폴트
false
타입
boolean

Removes overflow re-positioning for the content

이름
attach
디폴트
false
타입
any

Specifies which DOM element that this component should detach to. Use either a CSS selector string or an object reference to the element.

이름
auto
디폴트
false
타입
boolean

선택 항목의 중앙 요소

이름
bottom
디폴트
false
타입
boolean

컴포넌트를 아랫쪽(bottom)으로 정렬

이름
close-delay
디폴트
0
타입
number | string

컴포넌트가 닫히기 전에 기다리는 시간(밀리세컨드)

이름
close-on-click
디폴트
true
타입
boolean

활성자의 바깥을 클릭하면 메뉴를 닫음

이름
close-on-content-click
디폴트
true
타입
boolean

메뉴의 컨텐츠를 클릭하면 메뉴를 닫음

이름
content-class
디폴트
undefined
타입
any

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.

이름
dark
디폴트
false
타입
boolean

Components.Menus.

이름
disable-keys
디폴트
false
타입
boolean

Components.Menus.

이름
disabled
디폴트
false
타입
boolean

메뉴를 비활성화

이름
fixed
디폴트
false
타입
boolean

요소의 위치를 고정

이름
full-width
디폴트
false
타입
boolean

100% 너비(width)를 가지도록 강제

이름
input-activator
디폴트
false
타입
boolean

Components.Menus.

이름
lazy
디폴트
false
타입
boolean

mounted에서 컨텐츠를 조건부로 렌더링. 컨첸츠가 활성화 되었을 경우에만 렌더링합니다.

이름
left
디폴트
false
타입
boolean

요소를 왼쪽으로 정렬

이름
light
디폴트
false
타입
boolean

Components.Menus.

이름
max-height
디폴트
auto
타입
any

컨탠츠의 최대 높이를 설정

이름
max-width
디폴트
auto
타입
number | string

컨텐츠의 최대 너비

이름
min-width
디폴트
undefined
타입
number | string

컨텐츠의 최소 너비

이름
nudge-bottom
디폴트
0
타입
number | string

Nudge the content to the bottom

이름
nudge-left
디폴트
0
타입
number | string

Nudge the content to the left

이름
nudge-right
디폴트
0
타입
number | string

Nudge the content to the right

이름
nudge-top
디폴트
0
타입
number | string

Nudge the content to the top

이름
nudge-width
디폴트
0
타입
number | string

Nudge the content width

이름
offset-overflow
디폴트
false
타입
boolean

Causes the component to flip to the opposite side when repositioned due to overflow

이름
offset-x
디폴트
false
타입
boolean

메뉴의 x축 오프셋. left/right 방향과 결합하여 작동

이름
offset-y
디폴트
false
타입
boolean

메유의 y축 오프셋. top/bottom 방향과 결합하여 작동

이름
open-delay
디폴트
0
타입
number | string

컴포넌트가 열리기 전에 기다리는 시간(밀리세컨드)

이름
open-on-click
디폴트
true
타입
boolean

활성자(activator)를 클릭하면 메뉴가 열림

이름
open-on-hover
디폴트
false
타입
boolean

활성자(activator) 위에 마우스를 올리면(hover) 메뉴가 열림

이름
origin
디폴트
'top left'
타입
string

트랜지션 중심(origin)을 설정

이름
position-x
디폴트
undefined
타입
number

activator 슬롯이 사용되지 않을 경우 컨텐츠의 포지션

이름
position-y
디폴트
undefined
타입
number

activator 슬롯이 사용되지 않을 경우 컨텐츠의 포지션

이름
return-value
디폴트
undefined
타입
any

Components.Menus.

이름
right
디폴트
false
타입
boolean

요소를 오른쪽으로 정렬

이름
top
디폴트
false
타입
boolean

요소를 위쪽(top)으로 정렬

이름
transition
디폴트
v-menu-transition
타입
boolean | string

컴포넌트 트랜지션을 설정. 내장 트랜지션과 사용자 트랜지션 모두 가능

이름
value
디폴트
undefined
타입
any

표시여부를 조절 (Controls visibility)

이름
z-index
디폴트
undefined
타입
number | string

컴포넌트의 z-index

예제

절대위치 (Absolute position)

메뉴는 또한 absolute prop을 사용하는 요소의 위에 절대적으로 (원하는 위치에) 나타낼 수 있습니다. 이미지의 아무곳이나 클릭해보세요.

활성자가 없는 절대위치 (Absolute position without activator)

또한 absoluteposition-x, position-y prop들을 함께 사용하면 활성자(activator) 없이도 메뉴를 원하는 절대좌표에 나타낼 수 있습니다. 이미지의 아무곳에나 오른쪽 클릭을 해보세요.

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. 이는 메뉴 안에 여러 인터렉티브한 아이템이 있을 때 유용합니다.

Edit this page | language on Github