The v-menu component shows a menu at the position of the element used to activate it.
Выберите нужный компонент ниже и посмотрите доступные параметры, слоты, события и функции.
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.
Удалить перемещение переполнения для содержимого
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.
Применить в компоненте тёмную тему. Вы можете найти больше информации в документации Material Design для [тёмных тем оформления] (https://material.io/design/color/dark-theme.html).
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
Устанавливает максимальную ширину для содержимого
Устанавливает минимальную ширину для содержимого
Сдвиг содержимое вниз
Сдвиг содержимого влево
Сдвиг содержимого вправо
Сдвиг содержимого вверх
Сдвинуть ширину содержимого
Заставляет компонент переворачиваться на противоположную сторону при перемещении из-за переполнения
Сдвиньте меню по оси x. Работает вместе с направлением влево / вправо
Смещение меню по оси y. Работает вместе с направлением сверху / снизу
Milliseconds to wait before opening component. Only works with the open-on-hover prop
Указывает, следует ли открывать меню при нажатии активатора
Указывает, следует ли открывать меню при наведении активатора
Sets the transition origin on the element. You can find more information on the MDN documentation for transition origin.
Используется для размещения содержимого, если не используется слот активатора
Используется для размещения содержимого, если не используется слот активатора
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-индекс, используемый для компонента
При использовании активируется компонент при нажатии (или наведение на определённые компоненты). Это вручную останавливает распространение события. Без этого слота, если вы откроете компонент через свою модель, вам нужно будет вручную остановить распространение события
{
attrs: { role: string, aria-haspopup: boolean, aria-expanded: string }
on: { [eventName]: eventHandler }
value: boolean
}Слот Vue по умолчанию.
$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-x и slide-y. Вы также можете создать свой собственный и передать его в качестве аргумента перехода. Для примера того, как построены стоковые переходы,посетите это.
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. Попробуйте щёлкнуть правой кнопкой мыши в любом месте изображения.
Меню можно размещать практически в любом компоненте.
Меню можно настроить как статическое при открытии, что позволяет ему функционировать как 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.
Готовы к большему? Продолжить чтение с: