布局侧滑菜单(Layout Drawer)

QLayout允许您将视图配置为3x3矩阵,包含可选的左侧和/或右侧侧滑菜单。 如果尚未安装,请先阅读QLayout文档页面。

QDrawer是QLayout的侧边栏部分。

安装

/*
 * No installation step is necessary.
 * It gets installed by default by @quasar/app v2+.
 */

布局生成器

通过单击下面的按钮来搭建您的布局。

Layout Builder

用法

TIP

由于QDrawer需要布局,并且默认情况下QLayout管理整个窗口,因此出于演示目的,我们将使用容器化的QLayouts。 但是请记住,您绝不需要将容器化的QLayouts用于QDrawer。

WARNING

默认情况下,QDrawer附带有触摸操作。 如果这干扰了您的侧滑菜单内容组件,请通过指定布尔值“no-swipe-close”属性来禁用它。

WARNING

当QDrawer设置为覆盖(overlay)模式时,QDrawer将强制进入固定位置,无论QLayout的“view”属性是否配置为“l/r”或“L/R”。 另外,如果在iOS平台上并且QLayout已容器化,由于无法克服的平台限制,固定位置也将被强制置于QDrawer上。

基础

Basic

考虑将QItems与下面的路由属性(如to)一起使用。 出于演示目的,未添加这些属性,因为它将破坏UMD版本。

With navigation menu
Seamless menu
Header Picture

迷你模式

侧滑菜单可以在两种模式下运行:“正常”和“迷你”,您可以使用QLayoutDrawer上的布尔mini属性在它们之间进行切换。

WARNING

请注意,mini模式mobile行为(behavior)下不适用。

在处理“mini”模式时,有一些CSS类可以帮助您自定义侧滑菜单。 这些非常有用,尤其是在使用“click”触发器时:

CSS类描述
q-mini-drawer-hide侧滑菜单处于“mini”模式时隐藏。
q-mini-drawer-only仅在侧滑菜单处于“mini”模式时显示。

您还可以根据以下事实编写自己的CSS类:QLayoutDrawer在“normal”模式下具有“q-layout-drawer-normal”CSS类,在“mini”模式下具有“q-layout-drawer-mini”。 此外,当侧滑菜单处于“mobile”行为时,它会获得q-layout-drawer-mobile CSS类。

鼠标悬停/鼠标移开触发

考虑将QItems与下面的路由属性(如to)一起使用。 出于演示目的,未添加这些属性,因为它将破坏UMD版本。

Mini-mode with mouseover/mouseout trigger

迷你覆盖

不管您是否使用view属性进行配置,mini-to-overlay布尔属性始终将您的侧滑菜单设置为固定位置,但仅在迷你模式下会占用布局上的空间。

Mini to overlay

点击触发

在下面的示例中,当处于“mini”模式时,如果用户单击侧滑菜单,则我们将切换到普通模式。

考虑将QItems与下面的路由属性(如to)一起使用。 出于演示目的,未添加这些属性,因为它将破坏UMD版本。

Mini-mode with click trigger

默认情况下,在“mini”模式下,Quasar CSS隐藏一些DOM元素以提供整洁的狭窄侧滑菜单。 但是,肯定有一些用例需要您进行深度调整。您可以为此使用QLayoutDrawer的“mini”Vue插槽。 在“mini”模式下,此插槽的内容将替换侧滑菜单的默认内容。

Mini-mode with slot

覆盖模式

覆盖模式使侧滑菜单不占用布局上的空间,而是将鼠标悬停在页面上。 无论使用“view”属性的配置如何,这都将侧滑菜单始终固定在固定位置。

在下面的示例中,单击菜单图标以查看运行中的侧滑菜单。 最好在至少宽度为500px的窗口的桌面上查看(这是此演示中设置的断点)。

Overlay mode

QDrawer API

Loading API...
Please wait...