CSS: drawer-layout ​

.instui-drawer-layout — En uppdelad layout med en kollapsbar sidofack och en primär rullbar innehållspanel.

-placement-end och standard (start) använder båda flex-direction/inset-inline-* logiska egenskaper, inte left/right, så fackets sida följer automatiskt direction/dir="rtl" — inga separata RTL-regler behövs.

Source: drawer-layout.css

Tillgänglighet ​

När facket fungerar som navigation, märk det med en tillgänglig rubrik eller aria-label. Ge .content role="region" (InstUI:s DrawerLayout-konvention) och namnge det med aria-label/aria-labelledby när kontexten ensam inte identifierar det.

Användning ​

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

Exempel ​

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

Struktur ​

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;

Modifierare ​

ModifierareBeskrivning
.-openVisa facket även när attributet open saknas.
.-placement-endFäst facket på inline-end-sidan.
.-placement-startFäst facket på inline-start-sidan (standard; anger det uttryckligen).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

Delar ​

DelBeskrivning
.contentHuvudpanelen.
.traySidopanelen.

Anpassade egenskaper ​

EgenskapTypStandardBeskrivning
--pantoken-bp-md——Breddtröskel för överläggsläge (30em, tematiserad via responsiva verktyg).

Webbläsarstöd ​

  • Medlemmarna drawer-layout.tray/drawer-layout.content växlar automatiskt till överläggsläge via en @container-fråga när detta elements inline-size sjunker under tray-width + --pantoken-bp-md. @pantoken/interactions-beteendet växlar dessutom [should-overlay-tray]/.-should-overlay-tray (en manuell åsidosättning) och avger overlaytraychange för appar som behöver förändringen som en händelse.

Underkomponenter ​

Relaterat ​

  • tray — Ett fristående kantöverlägg; denna layout håller facket och innehållet i samma flöde.
  • context-view — En mindre förankrad yta för kontextuella åtgärder och detaljer.