QLayout 允許您將視圖配置為 3x3 矩陣，其中包含可選的左側和/或右側抽屜 (Drawer)。如果您尚未閱讀，請先閱讀 QLayout 文件頁面。
QDrawer 是 QLayout 的側邊欄部分。
Layout Builder
點擊下方按鈕，建立您的版面配置骨架。
Layout Builderlaunch用法
提示
- 由於 QDrawer 需要版面配置 (layout)，而 QLayout 預設管理整個視窗，因此為了演示目的，我們將使用容器化的 QLayout。但請記住，您絕不需要為了 QDrawer 而使用容器化的 QLayout。
- 如果 QDrawer 內容也包含圖片，並且您想使用觸控操作來關閉它，您可能需要為它們添加
draggable="false"屬性，否則瀏覽器原生行為可能會產生負面干擾。
警告
預設情況下，QDrawer 已附加觸控操作。如果這干擾到您的抽屜內容組件，請指定 Boolean no-swipe-close 屬性來停用它。
警告
當 QDrawer 設定為覆蓋 (overlay) 模式時，無論 QLayout 的 “view” 屬性配置為 “l/r” 還是 “L/R”，都會強制其進入固定位置。此外，如果在 iOS 平台上且 QLayout 是容器化的，由於平台限制無法克服，固定位置也會被強制應用於 QDrawer。
基本
考慮在下方使用帶有路由屬性 (例如 to) 的 QItems。為了演示目的，這些屬性尚未添加，因為它會破壞 UMD 版本。
迷你模式
抽屜 (Drawer) 可以以兩種模式運作：「正常」(normal) 和「迷你」(mini)，您可以使用 QLayoutDrawer 上的 Boolean mini 屬性在它們之間切換。
警告
請注意，「迷你」模式不適用於行動裝置行為。
有一些 CSS 類別可以幫助您在處理「迷你」模式時自訂抽屜 (drawer)。當使用「點擊」(click) 觸發器時，這些類別尤其有用
| CSS 類別 | 描述 |
|---|---|
q-mini-drawer-hide | 當抽屜 (drawer) 處於「迷你」模式或「行動裝置」模式時隱藏。 |
q-mini-drawer-only | 僅當抽屜 (drawer) 處於「迷你」模式時顯示。 |
您還可以根據以下事實編寫自己的 CSS 類別：當 QLayoutDrawer 處於「正常」模式時具有 q-drawer--standard CSS 類別，而在「迷你」模式時具有 q-drawer--mini。此外，當抽屜 (drawer) 處於「行動裝置」行為時，它會獲得 q-drawer--mobile CSS 類別。
滑鼠懸停/移開觸發器
考慮在下方使用帶有路由屬性 (例如 to) 的 QItems。為了演示目的，這些屬性尚未添加，因為它會破壞 UMD 版本。
迷你轉覆蓋
mini-to-overlay Boolean 屬性將始終將您的抽屜 (drawer) 設定為固定位置，無論您在 view 屬性中如何配置，但只會佔用版面配置上的空間，寬度與迷你模式時相同。
點擊觸發器
在下面的範例中，當處於「迷你」模式時，如果使用者點擊抽屜 (Drawer)，則我們會切換到正常模式。
考慮在下方使用帶有路由屬性 (例如 to) 的 QItems。為了演示目的，這些屬性尚未添加，因為它會破壞 UMD 版本。
插槽
預設情況下，當處於「迷你」模式時，Quasar CSS 會隱藏一些 DOM 元素，以提供整潔的窄抽屜 (drawer)。但肯定會有需要深度調整的用例。您可以將 QLayoutDrawer 的 “mini” Vue 插槽用於此目的。此插槽的內容將取代您抽屜 (drawer) 在「迷你」模式下的預設內容。
覆蓋模式
覆蓋模式可防止抽屜 (drawer) 佔用版面配置上的空間，而是懸浮在頁面上。無論您在 view 屬性中如何配置，這都會始終將您的抽屜 (drawer) 設定為固定位置。
在下面的範例中，點擊選單圖示以查看抽屜 (drawer) 的運作方式。最好在視窗寬度至少為 500 像素的桌上型電腦上查看（這是此演示中設定的斷點）。