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