QLayout 允许你将视图配置为 3x3 矩阵，其中可选地包含左侧和/或右侧的侧边栏（Drawer）。如果你尚未阅读，请先查看 QLayout 文档页面。
QDrawer 是 QLayout 的侧边栏部分。
布局生成器
点击下方按钮来搭建你的布局。
布局生成器launch用法
- 由于 QDrawer 需要一个布局，而 QLayout 默认管理整个窗口，因此为了演示目的，我们使用了容器化的 QLayout。但你完全不需要为 QDrawer 使用容器化 QLayout。
- 如果 QDrawer 内容包含图片且你想使用触摸操作来关闭它，可以在图片上添加
draggable="false"，否则浏览器原生行为可能会产生负面干扰。
当侧边栏处于"移动端"行为时（布局宽度小于等于侧边栏的 breakpoint，或 behavior 被强制为"mobile"），QDrawer 会附加三个触摸手势，每个都有各自的关闭选项：
- 滑动侧边栏内容以关闭，通过
no-swipe-close禁用 - 滑动背景遮罩以关闭，通过
no-swipe-backdrop禁用 - 从屏幕边缘滑入以打开，通过
no-swipe-open禁用
当你的侧边栏包含需要滑动或平移操作的自有组件时，使用 no-swipe-close。在"桌面端"行为时这些手势都不会附加，因此在该模式下设置这些属性没有效果。
滑动打开手势由一个不可见的条带（.q-drawer__opener）提供服务，它宽 15px，横跨屏幕该侧的完整高度并位于页面内容之上，因此会捕获落在该区域的指针事件。如果你有固定在同一边缘的元素（例如 QPageSticky），请使用 no-swipe-open 禁用该条带。
该条带和背景遮罩会把水平滑动据为己有（v2.31+）：一旦滑动方向被确定，浏览器就不再同时运行自己的边缘手势，因此在 iOS Safari 上，侧边栏移动期间页面不会再滑向上一条或下一条历史记录。而从条带开始的垂直滑动仍会滚动页面。
当侧边栏以"移动端"行为显示时，它会锁定 <body> 元素的滚动，与模态框类似。容器化的 QLayout 不受影响，因为它们滚动的是自己的容器而非页面。
当 QDrawer 设置为覆盖模式时，它会被强制使用固定定位，无论 QLayout 的"view"属性是否配置了"l/r"或"L/R"。此外，如果在 iOS 平台上且 QLayout 是容器化的，由于平台限制无法克服，QDrawer 也会被强制使用固定定位。
基础
可以考虑在下方使用带路由属性（如 to）的 QItem。为了演示目的这些属性未添加，因为会破坏 UMD 版本。
桌面端和移动端行为
QDrawer 以两种行为之一运行，一些属性在不同行为下含义不同：
| "桌面端"行为 | "移动端"行为 | |
|---|---|---|
| 布局空间 | 占据空间，除非设置了 overlay | 从不占据空间 |
| 背景遮罩 | 无 | 侧边栏显示期间一直存在 |
| 触摸手势 | 无 | 已附加，如上所述 |
| Body 滚动 | 不影响 | 侧边栏显示时锁定 |
mini 模式 | 生效 | 忽略 |
breakpoint 属性（默认：1023）决定使用哪种行为：当布局宽度小于等于该值时，侧边栏处于"移动端"行为。注意这里指的是布局的宽度：即窗口的宽度（与 $q.screen 和 CSS 断点所看到的是同一个宽度，无论页面滚动条是否显示），或者对于容器化 QLayout 而言是容器的宽度。
将 behavior 属性设为 “desktop” 或 “mobile” 可以将侧边栏固定在某种行为上，无视宽度。默认值（“default”）是上述的动态切换。
一个布局每侧只能有一个侧边栏，但当两者都处于"移动端"行为时不能同时显示在屏幕上——因为每个都会用各自的背景遮罩覆盖页面。显示一个会关闭另一个，并将其 v-model 同步为 false。在"桌面端"行为时它们可以共存。
断点以上时显示
show-if-above 布尔属性会在布局处于"桌面端"行为时显示侧边栏（即使其 v-model 为 false），并在首次渲染时将 v-model 同步回 true。
它也参与布局跨越断点时的行为。进入"移动端"行为时总是隐藏侧边栏并记住它是否之前是显示的，回到"桌面端"行为时如果之前是显示的则恢复。show-if-above 额外的作用是，用户从未打开过的侧边栏也会恢复显示。当侧边栏设置了 overlay 或 behavior 固定为"mobile"时跳过此恢复。
持久性
当侧边栏处于可关闭状态（"移动端"行为，或在 overlay 模式下显示）时，除了你的 v-model 外还有三种方式可以关闭它：Escape 键、应用路由变化以及 Cordova/Capacitor 返回按钮。persistent 布尔属性关闭这三种方式。
它不影响通过点击背景遮罩或滑动来关闭，因此搭配 no-swipe-close 和 no-swipe-backdrop 可实现只有你的 v-model 能关闭的侧边栏。
迷你模式
侧边栏可以在两种模式下运行：‘正常’和’迷你’，通过 QDrawer 上的布尔属性 mini 切换。
注意 mini 模式在移动端行为下不生效。
可通过 no-mini-animation 布尔属性关闭两种模式切换时播放的过渡动画。
处理"迷你"模式时有些 CSS 类可以帮助你自定义侧边栏。尤其在使用"点击"触发器时非常有用：
| CSS 类 | 描述 |
|---|---|
q-mini-drawer-hide | 侧边栏处于"迷你"模式或"移动端"模式时隐藏 |
q-mini-drawer-only | 仅在侧边栏处于"迷你"模式时显示 |
你也可以编写自己的 CSS 类，基于以下事实：QDrawer 在"正常"模式时有 q-drawer--standard CSS 类，在"迷你"模式时有 q-drawer--mini。另外，侧边栏处于"移动端"行为时会获得 q-drawer--mobile CSS 类。
QDrawer 还会在其根元素上以 --q-drawer-width CSS 自定义属性的形式暴露当前宽度（width 或 mini-width 属性中生效的那个），这样你自己的 CSS 就可以据此进行相对尺寸计算。
鼠标悬停/离开触发
可以考虑在下方使用带路由属性（如 to）的 QItem。为了演示目的这些属性未添加，因为会破坏 UMD 版本。
迷你到覆盖
mini-to-overlay 布尔属性会始终将侧边栏设置为固定定位（无论 view 属性如何配置），但在布局上仅占据迷你模式时的宽度。
点击触发
在下面的示例中，当处于"迷你"模式时，如果用户点击侧边栏则切换到正常模式。
可以考虑在下方使用带路由属性（如 to）的 QItem。为了演示目的这些属性未添加，因为会破坏 UMD 版本。
插槽
默认情况下，处于"迷你"模式时，Quasar CSS 会隐藏一些 DOM 元素以提供简洁的窄侧边栏。但肯定有需要深度定制的场景。你可以使用 QDrawer 的"mini" Vue 插槽来实现。此插槽的内容会在"迷你"模式下替换侧边栏的默认内容。
覆盖模式
覆盖模式阻止侧边栏占据布局空间，而是悬浮在页面上方。这会始终将侧边栏设置为固定定位，无论 view 属性如何配置。
在下面的示例中，点击菜单图标可以看到侧边栏的实际效果。最好在至少 500px 宽的桌面窗口中查看（这是此演示设置的断点）。
无障碍 v2.25+
QDrawer 将其面板渲染为真正的 <aside> 元素，因此作为 QLayout 的补充地标暴露给辅助技术。覆盖状态下显示的背景遮罩和屏幕边缘不可见的滑动打开条带对辅助技术隐藏，因为它们是冗余的纯指针操作呈现。关闭的侧边栏完全离开 Tab 序列和无障碍树，不会有不可见的内容保持可达。
在 QDrawer 上设置的 role 或任何 aria-* 属性会应用到 <aside> 元素本身，因为那是辅助技术交互的元素。给它一个 aria-label（或 aria-labelledby），这样多个侧边栏可以被区分；或者当 complementary 不合适时给一个 role，必须是 aside 允许的角色，如 region、search 或 none。其他透传属性仍然指向内部滚动元素。
键盘关闭
当侧边栏处于可关闭状态（低于断点或在覆盖模式下显示）时，按 Escape 键关闭它——这是背景遮罩点击和滑动手势的键盘对应操作。persistent 属性可以禁用它，无论何时该按键被处理都会发出 escape-key 事件。
你的职责
注意在覆盖状态下侧边栏只是看起来像模态框：它不会捕获或移动键盘焦点，因此背景遮罩后面的页面仍然可通过键盘到达并可被屏幕阅读器读取。如果你的用例需要，请在打开时自行将焦点移入侧边栏。切换按钮由应用提供，因此应该自行管理 aria-expanded 状态。
当侧边栏包含主导航时，在其中的菜单外层包裹 <nav> 元素（或添加 role="navigation"）并给它一个 aria-label，这样它会被通告为独立于外围 aside 的导航地标。