Vuetify

Магазин

Для бизнеса

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

Выберите нужный компонент ниже и посмотрите доступные параметры, слоты, события и функции.

Ниже приведена коллекция простых и сложных примеров.

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

Доступ к меню возможен с помощью наведения, а не щелчка 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.

New in v2.3

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.

Готовы к большему? Продолжить чтение с:

Caught a mistake or want to contribute to the documentation? Edit Layout on GitHub!