QLayout 允许你将视图配置为 3x3 矩阵，包含可选的左侧和/或右侧 Drawer。如果你还没有阅读，请先阅读 QLayout 文档页面。
¥QLayout allows you to configure your views as a 3x3 matrix, containing optional left-side and/or right-side Drawers. If you haven’t already, please read QLayout documentation page first.
QDrawer 是 QLayout 的侧边栏部分。
¥QDrawer is the sidebar part of your QLayout.
布局构建器(Layout Builder)
¥Layout Builder
点击下方按钮搭建你的布局框架。
¥Scaffold your layout(s) by clicking on the button below.
Layout Builderlaunch用法(Usage)
¥Usage
提示
由于 QDrawer 需要布局，而 QLayout 默认管理整个窗口，因此出于演示目的，我们将使用容器化的 QLayout。但请记住，你绝对不需要为 QDrawer 使用容器化的 QLayout。
¥Since QDrawer needs a layout and QLayout by default manages the entire window, then for demoing purposes we are going to use containerized QLayouts. But remember that by no means you are required to use containerized QLayouts for QDrawer.
如果 QDrawer 内容也包含图片，并且你想使用触摸操作将其关闭，你可能需要为它们添加
draggable="false"，否则原生浏览器的行为可能会产生负面影响。¥If the QDrawer content also has images and you want to use touch actions to close it, you might want to add
draggable="false"to them, otherwise the native browser behavior might interfere in a negative way.
危险
默认情况下，QDrawer 附带触摸操作。如果这会干扰你的抽屉内容组件，请通过指定布尔值 no-swipe-close 属性来禁用它。
¥By default, QDrawer has touch actions attached to it. If this interferes with your drawer content components, disable it by specifying the Boolean no-swipe-close property.
警告
当 QDrawer 设置为叠加模式时，无论 QLayout 的 “view” 属性配置为 “l/r” 还是 “L/R”，它都会强制其进入固定位置。此外，如果在 iOS 平台上，并且 QLayout 已容器化，由于无法克服的平台限制，QDrawer 也将被强制使用固定位置。
¥When QDrawer is set into overlay mode, it will force it to go into fixed position, regardless if QLayout’s “view” prop is configured with “l/r” or “L/R”. Also, if on iOS platform and QLayout is containerized, the fixed position will also be forced upon QDrawer due to platform limitations that cannot be overcome.
基本(Basic)
¥Basic
考虑使用带有以下路由属性（例如 to）的 QItems。为了演示目的，未添加这些属性，因为这会破坏 UMD 版本。
¥Consider using QItems with routing props (like to) below. For demoing purposes these props have not been added as it would break the UMD version.
迷你模式(Mini-mode)
¥Mini-mode
Drawer 可以在两种模式下运行：‘normal’ 和 ‘mini’，你可以使用 上的布尔值 mini 属性在它们之间切换 QLayoutDrawer。
¥Drawer can operate in two modes: ‘normal’ and ‘mini’, and you can switch between them by using the Boolean mini property on QLayoutDrawer.
警告
请注意，mini 模式在移动端行为中不适用。
¥Please note that mini mode does not apply when in mobile behavior.
有一些 CSS 类可以帮助你在处理 “mini” 模式时自定义抽屉。这些非常有用，尤其是在使用 “click” 触发器时：
¥There are some CSS classes that will help you customize the drawer when dealing with “mini” mode. These are very useful especially when using the “click” trigger:
| 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 类。
¥You can also write your own CSS classes based on the fact that QLayoutDrawer has q-drawer--standard CSS class when in “normal” mode and q-drawer--mini when in “mini” mode. Also, when drawer is in “mobile” behavior, it gets q-drawer--mobile CSS class.
鼠标悬停/鼠标移出触发器(Mouseover/mouseout trigger)
¥Mouseover/mouseout trigger
考虑使用带有以下路由属性（例如 to）的 QItems。为了演示目的，未添加这些属性，因为这会破坏 UMD 版本。
¥Consider using QItems with routing props (like to) below. For demoing purposes these props have not been added as it would break the UMD version.
从迷你模式到覆盖模式(Mini to overlay)
¥Mini to overlay
mini-to-overlay 布尔属性将始终固定抽屉菜单的位置，无论你在 view 属性中的配置如何，但它在布局中占用的空间仅与迷你模式下的宽度相同。
¥The mini-to-overlay Boolean property will always set your drawer with fixed position, regardless of your configuration from the view prop, but will occupy space on the layout only as wide as when in mini-mode.
点击触发器(Click trigger)
¥Click trigger
在下面的示例中，当处于 “mini” 模式时，如果用户点击“抽屉”按钮，我们会切换到普通模式。
¥In the example below, when in “mini” mode, if the user clicks on Drawer then we switch to normal mode.
考虑使用带有以下路由属性（例如 to）的 QItems。为了演示目的，未添加这些属性，因为这会破坏 UMD 版本。
¥Consider using QItems with routing props (like to) below. For demoing purposes these props have not been added as it would break the UMD version.
插槽(Slots)
¥Slots
默认情况下，在 “mini” 模式下，Quasar CSS 会隐藏一些 DOM 元素，以提供简洁的窄抽屉式菜单。但肯定存在需要深度调整的用例。你可以为此使用 QLayoutDrawer 的 “mini” Vue 插槽。在 “mini” 模式下，此插槽的内容将替换抽屉的默认内容。
¥By default, when in “mini” mode, Quasar CSS hides a few DOM elements to provide a neat narrow drawer. But there may certainly be use-cases where you need a deep tweak. You can use the “mini” Vue slot of QLayoutDrawer just for that. The content of this slot will replace your drawer’s default content when in “mini” mode.
叠加模式(Overlay mode)
¥Overlay mode
叠加模式可防止抽屉式导航栏占用布局空间，而是将其悬停在页面上。无论你从 view 属性进行的配置如何，这都会始终将你的抽屉设置为固定位置。
¥The overlay mode prevents the drawer from occupying space on the layout and rather hover over the page instead. This will always set your drawer with fixed position, regardless of your configuration from the view prop.
在下面的示例中，点击菜单图标即可查看抽屉的实际效果。最好在桌面上查看，窗口宽度至少为 500px（这是本演示中设置的断点）。
¥On the example below, click the menu icon to see the drawer in action. It’s best viewed on a desktop with a window of at least 500px width (this is the breakpoint that is set on this demo).