菜单
v-menu
组件展示一个菜单在用于激活它的元素的位置上。
API
给元素设置绝对定位
在未使用激活器插槽激活器4.字符串可以是任何有效的查询选择器(querySelector),对象(Object)可以是任何有效的Node对象。
移除内容的移除重新定位
指定该组件应该分离到哪个DOM元素,使用CSS选择器字符串或元素的对象应用。
在所选择的元素上居中列表
将组件向底部对齐
关闭组件前等待的毫秒数
指定菜应该在外部激活器被点击时关闭。
指定点击内容时菜单是否应该关闭。
将自定义类应用于分离的元素。这是很有用的,因为内容被移动到应用程序的末尾,而不是直接通过组件传递给类。
Components.Menus.
Components.Menus.
禁用菜单
给元素设置固定定位
Forces 100% width
Components.Menus.
有条件地渲染内容,只有激活时才会渲染内容
将组件向左边对齐
Components.Menus.
设置内容的最大高度
设置内容的最大宽度
设置内容的最小宽度
向底部微调内容
向左侧微调内容
向右侧微调内容
向顶部微调内容
微调内容宽度
当由于溢出而重新定位时,导致组件翻转到另一侧
在x轴上偏移菜单,与左/右方向一起工作
在y轴上偏移菜单,与上/下方向一起工作
打开组件前等待的毫秒数
指定是否在激活器点击时打开菜单
指定是否在激活器悬停时打开菜单
设置过渡原点
用于在不使用激活器插槽时定位内容
用于在不使用激活器插槽时定位内容
Components.Menus.
将组件向右边对齐
将组件向顶部对齐
设置组件过渡效果,可以是内置的过渡配置或者是您自己的配置的其中一个。
控制可见性
用于组件的z-index
示例
绝对定位
菜单也可以使用absolute
属性绝对定位在激活元素的顶部。尝试点击图片上的任何地方。
没有激活时的绝对定位
菜单也可以通过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
.
悬停
菜单可以使用悬停进行访问,而不是用open-on-hover
属性进行点击。
菜单
菜单可以放在几乎任何组件中
自定义过渡
Vuetify带有3个标准过渡,scale、slide-x和slide-y。您也可以创建自己的并将其作为过渡参数传递。有关如何构建内置过渡的示例,请访问此处。
弹出菜单
可以将菜单配置为在打开时为静态,使其可以用作弹出窗口。当菜单内容有多个交互项时,这可能很有用。