菜单

QMenu 组件可以很方便的展示一个菜单。它可以很好的与 QList 搭配使用，但不局限于此。

QMenu API

用法

直接将 QMenu 放置在目标 DOM 元素/组件的直接子元素中。不用担心 QMenu 会从容器继承 CSS，因为 Quasar 会将 QMenu 直接注入到 <body> 下。

基础

Submenus

尺寸和样式

上下文菜单

您还可以将 QMenu 作为上下文菜单。在桌面设备上，您需要在父容器上单击鼠标右键来触发它，而在移动设备上，长按即可。

保持

如果您希望按下 ESCAPE 或点击 QMenu 外部时不要关闭菜单，那么请使用 persistent 属性。

过渡

在下面的示例中，展示了一些过渡效果。有关可用过渡的完整列表，请转到 过渡效果 页面。

可复用的

下面的示例展示了如何创建一个可在不同目标容器中复用的菜单。

定位

通过 anchor 和 self 属性可以自定义 QMenu 弹出的位置。QMenu 最终的弹出位置是依据上述属性计算得来的，以便使其显示在可用的屏幕空间上，并在必要时切换到右侧或顶部。

对于水平定位，您可以使用 start 和 end 来自动适应 RTL 或 非 RTL。start 和 end 表示非 RTL 的 “left” ，表示 RTL 的 “right”。

<q-menu anchor="bottom left" self="top left">
  <q-item clickable>
    <q-item-section>New tab</q-item-section>
  </q-item>
  <q-item clickable>
    <q-item-section>New incognito tab</q-item-section>
  </q-item>
</q-menu>