CSS: drawer-layout

.instui-drawer-layout — 一個分割佈局，具有可摺疊的側邊抽屜和可捲動的主要內容窗格。

-placement-end 與預設（start）都使用 flex-direction/inset-inline-* 邏輯屬性，而非 left/right，因此抽屜的側邊會自動遵循 direction/dir="rtl" — 不需要額外的 RTL 規則。

Source: drawer-layout.css

無障礙

當抽屜作為導覽使用時，請以可存取的標題或 aria-label 為其標記。為 .content 提供 role="region"（InstUI 的 DrawerLayout 慣例），並在僅靠上下文無法辨識時，用 aria-label/aria-labelledby 為其命名。

使用方法

@import "@pantoken/components/components.css";
@import "@pantoken/components/drawer-layout.css";

範例

<div class="instui-drawer-layout" id="drawer" open>
  <aside class="tray">Navigation</aside>
  <main class="content" role="region">Main content</main>
</div>

結構

.instui-drawer-layout
  drawer-layout.tray (component)
  drawer-layout.content (component)

flowchart TD n0[".instui-drawer-layout"]:::cssdoc-root n1(["drawer-layout.tray"]):::cssdoc-component n2(["drawer-layout.content"]):::cssdoc-component n0 --> n1 n0 --> n2 click n1 "/api/css/drawer-layout.tray.md" click n2 "/api/css/drawer-layout.content.md" classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

修飾器

修飾器	說明
.-open	即使未設定 open 屬性，也要顯示抽屜。
.-placement-end	將抽屜停靠在 inline-end 側。
.-placement-start	將抽屜停靠在 inline-start 側（預設；明確設定為此）。
.-should-overlay-tray	Interaction — Render the tray as an overlay instead of shrinking content inline.

部件

部件	說明
.content	主要窗格。
.tray	側邊面板。

自訂屬性

屬性	型別	預設	說明
--pantoken-bp-md	—	—	覆蓋模式的寬度閾值（30em，可透過響應式工具設定主題）。

瀏覽器支援

• 當本元素的 inline-size 降到 抽屜寬度 + --pantoken-bp-md 以下時，drawer-layout.tray/drawer-layout.content 成員會透過 @container 查詢自動切換到覆蓋模式。@pantoken/interactions 的行為還會切換 [should-overlay-tray]/.-should-overlay-tray（手動覆蓋），並釋出 overlaytraychange 事件，供需要此變更的應用使用。

子元件

• drawer-layout.content
• drawer-layout.tray
• tray

相關

• tray — 一個獨立的邊緣覆蓋；此佈局將抽屜與內容保留在相同流程中。
• context-view — 一個較小的錨定面板，用於情境性操作與細節。