Menu
Компонент v-menu показывает меню в позиции элемента, используемого для его активации.
API
Позиционировать элемент абсолютно
Назначьте пользовательский активатор, если слот активатора не используется. Строкой может быть любой действительный querySelector, а Object может быть любым допустимым узлом
Удалить перемещение переполнения для содержимого
Указывает, какой элемент DOM должен отделить этот компонент. Используйте либо селектор CSS, либо ссылку на объект для элемента.
Список центров по выбранному элементу
Выровнять компонент по нижнему краю
Миллисекунды до закрытия компонента
Указывает, должен ли меню закрываться на внешнем активаторе.
Указывает, должен ли меню закрываться при нажатии на его содержимое
Применяет пользовательский класс к отдельному элементу. Это полезно, потому что содержимое перемещается в конец приложения и не является таргетингом по классам, переданным непосредственно в компонент.
Components.Menus.
Components.Menus.
Отключает меню
Установите фиксированный элемент
Форсировать 100% ширины
Components.Menus.
Условно отображает контент на смонтированном. Будет показывать только контент, если он активирован
Выровнять компонент слева
Components.Menus.
Устанавливает максимальную высоту для содержимого
Устанавливает максимальную ширину для содержимого
Устанавливает минимальную ширину для содержимого
Сдвиг содержимое вниз
Сдвиг содержимого влево
Сдвиг содержимого вправо
Сдвиг содержимого вверх
Сдвинуть ширину содержимого
Заставляет компонент переворачиваться на противоположную сторону при перемещении из-за переполнения
Сдвиньте меню по оси x. Работает вместе с направлением влево / вправо
Смещение меню по оси y. Работает вместе с направлением сверху / снизу
Миллисекунды перед открытием компонента
Указывает, следует ли открывать меню при нажатии активатора
Указывает, следует ли открывать меню при наведении активатора
Устанавливает начало перехода
Используется для размещения содержимого, если не используется слот активатора
Используется для размещения содержимого, если не используется слот активатора
Components.Menus.
Выровнять компонент справа
Выровнять компонент в по верхнему краю
Устанавливает компонентный переход. Может быть одним из встроенных переходов или вашим собственным.
Контроль видимости
Z-индекс, используемый для компонента
Примеры
Абсолютное положение
Меню также могут быть помещены абсолютно поверх элемента активатора с помощью absolute prop. Попробуйте щёлкнуть в любом месте изображения.
Абсолютное положение без активатора
Меню также можно использовать без активатора, используя absolute вместе с реквизитами position-x и position-y. Попробуйте щёлкнуть правой кнопкой мыши в любом месте изображения.
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.
Меню
Меню можно размещать практически в любом компоненте.
Пользовательские переходы
Vuetify поставляется с 3 стандартными переходами, scale, slide-x и slide-y. Вы также можете создать свой собственный и передать его в качестве аргумента перехода. Для примера того, как построены стоковые переходы,посетите это.
Popover menu
Меню можно настроить как статическое при открытии, что позволяет ему функционировать как popover. Это может быть полезно, когда в содержимом меню есть несколько интерактивных элементов.