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 で名前を付けてください。

使用法 ​

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

例 ​

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

構造 ​

text
.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;

修飾子 ​

修飾子説明
.-openopen 属性がなくてもトレイを表示します。
.-placement-endトレイを inline-end 側にドックします。
.-placement-startトレイを inline-start 側にドックします（デフォルト；明示的に設定します）。
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

パーツ ​

パート説明
.contentメインペインです。
.trayサイドパネルです。

カスタムプロパティ ​

プロパティ型デフォルト説明
--pantoken-bp-md——オーバーレイモードの幅しきい値（30em、レスポンシブユーティリティでテーマ化）。

ブラウザ対応 ​

  • この要素のインラインサイズがトレイ幅 + --pantoken-bp-md 未満になると、drawer-layout.tray/drawer-layout.content のメンバーは @container クエリにより自動的にオーバーレイモードに切り替わります。@pantoken/interactions の動作はさらに [should-overlay-tray]/.-should-overlay-tray（手動オーバーライド）を切り替え、変更をイベントとして必要とするアプリ向けに overlaytraychange を発行します。

サブコンポーネント ​

関連項目 ​

  • tray — 独立したエッジオーバーレイ。 このレイアウトではトレイとコンテンツが同じフロー内にあります。
  • context-view — 文脈的な操作や詳細表示のための、より小さな固定されたサーフェスです。