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

Назначьте пользовательский активатор, если слот активатора не используется. Строкой может быть любой действительный querySelector, а Object может быть любым допустимым узлом

Имя
allow-overflow
По умолчанию
false
Тип
boolean

Удалить перемещение переполнения для содержимого

Имя
attach
По умолчанию
false
Тип
any

Указывает, какой элемент DOM должен отделить этот компонент. Используйте либо селектор CSS, либо ссылку на объект для элемента.

Имя
auto
По умолчанию
false
Тип
boolean

Список центров по выбранному элементу

Имя
bottom
По умолчанию
false
Тип
boolean

Выровнять компонент по нижнему краю

Имя
close-delay
По умолчанию
0
Тип
number | string

Миллисекунды до закрытия компонента

Имя
close-on-click
По умолчанию
true
Тип
boolean

Указывает, должен ли меню закрываться на внешнем активаторе.

Имя
close-on-content-click
По умолчанию
true
Тип
boolean

Указывает, должен ли меню закрываться при нажатии на его содержимое

Имя
content-class
По умолчанию
undefined
Тип
any

Применяет пользовательский класс к отдельному элементу. Это полезно, потому что содержимое перемещается в конец приложения и не является таргетингом по классам, переданным непосредственно в компонент.

Имя
dark
По умолчанию
false
Тип
boolean

Components.Menus.

Имя
disable-keys
По умолчанию
false
Тип
boolean

Components.Menus.

Имя
disabled
По умолчанию
false
Тип
boolean

Отключает меню

Имя
fixed
По умолчанию
false
Тип
boolean

Установите фиксированный элемент

Имя
full-width
По умолчанию
false
Тип
boolean

Форсировать 100% ширины

Имя
input-activator
По умолчанию
false
Тип
boolean

Components.Menus.

Имя
lazy
По умолчанию
false
Тип
boolean

Условно отображает контент на смонтированном. Будет показывать только контент, если он активирован

Имя
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-left
По умолчанию
0
Тип
number | string

Сдвиг содержимого влево

Имя
nudge-right
По умолчанию
0
Тип
number | string

Сдвиг содержимого вправо

Имя
nudge-top
По умолчанию
0
Тип
number | string

Сдвиг содержимого вверх

Имя
nudge-width
По умолчанию
0
Тип
number | string

Сдвинуть ширину содержимого

Имя
offset-overflow
По умолчанию
false
Тип
boolean

Заставляет компонент переворачиваться на противоположную сторону при перемещении из-за переполнения

Имя
offset-x
По умолчанию
false
Тип
boolean

Сдвиньте меню по оси x. Работает вместе с направлением влево / вправо

Имя
offset-y
По умолчанию
false
Тип
boolean

Смещение меню по оси y. Работает вместе с направлением сверху / снизу

Имя
open-delay
По умолчанию
0
Тип
number | string

Миллисекунды перед открытием компонента

Имя
open-on-click
По умолчанию
true
Тип
boolean

Указывает, следует ли открывать меню при нажатии активатора

Имя
open-on-hover
По умолчанию
false
Тип
boolean

Указывает, следует ли открывать меню при наведении активатора

Имя
origin
По умолчанию
'top left'
Тип
string

Устанавливает начало перехода

Имя
position-x
По умолчанию
undefined
Тип
number

Используется для размещения содержимого, если не используется слот активатора

Имя
position-y
По умолчанию
undefined
Тип
number

Используется для размещения содержимого, если не используется слот активатора

Имя
return-value
По умолчанию
undefined
Тип
any

Components.Menus.

Имя
right
По умолчанию
false
Тип
boolean

Выровнять компонент справа

Имя
top
По умолчанию
false
Тип
boolean

Выровнять компонент в по верхнему краю

Имя
transition
По умолчанию
v-menu-transition
Тип
boolean | string

Устанавливает компонентный переход. Может быть одним из встроенных переходов или вашим собственным.

Имя
value
По умолчанию
undefined
Тип
any

Контроль видимости

Имя
z-index
По умолчанию
undefined
Тип
number | string

Z-индекс, используемый для компонента

Примеры

Абсолютное положение

Меню также могут быть помещены абсолютно поверх элемента активатора с помощью absolute prop. Попробуйте щёлкнуть в любом месте изображения.

Абсолютное положение без активатора

Меню также можно использовать без активатора, используя absolute вместе с реквизитами position-x и position-y. Попробуйте щёлкнуть правой кнопкой мыши в любом месте изображения.

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.

Меню

Меню можно размещать практически в любом компоненте.

Пользовательские переходы

Vuetify поставляется с 3 стандартными переходами, scale, slide-x и slide-y. Вы также можете создать свой собственный и передать его в качестве аргумента перехода. Для примера того, как построены стоковые переходы,посетите это.

Popover menu

Меню можно настроить как статическое при открытии, что позволяет ему функционировать как popover. Это может быть полезно, когда в содержимом меню есть несколько интерактивных элементов.

Edit this page | language on Github