QLayout允许您将视图配置为3x3矩阵，包含可选的左侧和/或右侧侧滑菜单。 如果尚未安装，请先阅读QLayout文档页面。
QDrawer是QLayout的侧边栏部分。
QDrawer API
布局生成器
通过单击下面的按钮来搭建您的布局。
Layout Builderlaunch用法
TIP
- 由于QDrawer需要布局，并且默认情况下QLayout管理整个窗口，因此出于演示目的，我们将使用容器化的QLayouts。 但是请记住，您绝不需要将容器化的QLayouts用于QDrawer。
- 如果QDrawer内容也包含图像，并且您想使用触摸操作将其关闭，则可能要向其添加
draggable="false"，否则本地浏览器的行为可能会产生负面影响。
WARNING
默认情况下，QDrawer附带有触摸操作。 如果这干扰了您的侧滑菜单内容组件，请通过指定布尔值“no-swipe-close”属性来禁用它。
WARNING
当QDrawer设置为覆盖(overlay)模式时，QDrawer将强制进入固定位置，无论QLayout的“view”属性是否配置为“l/r”或“L/R”。 另外，如果在iOS平台上并且QLayout已容器化，由于无法克服的平台限制，固定位置也将被强制置于QDrawer上。
基础
考虑将QItems与下面的路由属性（如to）一起使用。 出于演示目的，未添加这些属性，因为它将破坏UMD版本。
迷你模式
侧滑菜单可以在两种模式下运行：“正常”和“迷你”，您可以使用QLayoutDrawer上的布尔mini属性在它们之间进行切换。
WARNING
请注意，mini模式在mobile行为(behavior)下不适用。
在处理“mini”模式时，有一些CSS类可以帮助您自定义侧滑菜单。 这些非常有用，尤其是在使用“click”触发器时：
| CSS类 | 描述 |
|---|---|
q-mini-drawer-hide | 侧滑菜单处于“mini”或“mobile”模式时隐藏。 |
q-mini-drawer-only | 仅在侧滑菜单处于“mini”模式时显示。 |
您还可以根据以下事实编写自己的CSS类：QLayoutDrawer在“normal”模式下具有q-drawer--standardCSS类，在“mini”模式下具有q-drawer--mini。 此外，当侧滑菜单处于“mobile”行为时，它会获得q-drawer--mobileCSS类。
鼠标悬停/鼠标移开触发
考虑将QItems与下面的路由属性（如to）一起使用。 出于演示目的，未添加这些属性，因为它将破坏UMD版本。
迷你覆盖
不管您是否使用view属性进行配置，mini-to-overlay布尔属性始终将您的侧滑菜单设置为固定位置，但仅在迷你模式下会占用布局上的空间。
点击触发
在下面的示例中，当处于“mini”模式时，如果用户单击侧滑菜单，则我们将切换到普通模式。
考虑将QItems与下面的路由属性（如to）一起使用。 出于演示目的，未添加这些属性，因为它将破坏UMD版本。
槽
默认情况下，在“mini”模式下，Quasar CSS隐藏一些DOM元素以提供整洁的狭窄侧滑菜单。 但是，肯定有一些用例需要您进行深度调整。您可以为此使用QLayoutDrawer的“mini”Vue插槽。 在“mini”模式下，此插槽的内容将替换侧滑菜单的默认内容。
覆盖模式
覆盖模式可防止侧滑菜单占用布局上的空间，而是将鼠标悬停在页面上。 无论使用“view”属性的配置如何，这都将侧滑菜单始终固定在固定位置。
在下面的示例中，单击菜单图标以查看运行中的侧滑菜单。 最好在至少宽度为500px的窗口的桌面上查看（这是此演示中设置的断点）。