CSS: drawer-layout ​

.instui-drawer-layout — Een gesplitste lay-out met een inklapbare zijlade en een primaire scrollbare inhoudspaneel.

-placement-end en de standaard (start) gebruiken beide flex-direction/inset-inline-* logische eigenschappen, niet left/right, dus de zijde van de lade volgt automatisch direction/dir="rtl" — er zijn geen afzonderlijke RTL-regels nodig.

Source: drawer-layout.css

Toegankelijkheid ​

Wanneer de lade dient als navigatie, label deze met een toegankelijke kop of aria-label. Geef .content role="region" (InstUI's DrawerLayout-conventie) en benoem het met aria-label/aria-labelledby wanneer context alleen het niet identificeert.

Gebruik ​

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

Voorbeelden ​

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

Structuur ​

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;

Modifiers ​

ModifierBeschrijving
.-openToon de lade zelfs wanneer het open attribuut afwezig is.
.-placement-endPlaats de lade aan de inline-eindzijde.
.-placement-startPlaats de lade aan de inline-beginzijde (de standaard; geeft dit expliciet aan).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

Onderdelen ​

OnderdeelBeschrijving
.contentHet hoofdpaneel.
.trayHet zijpaneel.

Aangepaste eigenschappen ​

EigenschapTypeStandaardBeschrijving
--pantoken-bp-md——Breedtedrempel voor overlay-modus (30em, gethematiseerd via responsieve utilities).

Browserondersteuning ​

  • De drawer-layout.tray/drawer-layout.content leden schakelen automatisch naar overlay-modus via een @container query zodra de inline-size van dit element kleiner wordt dan lade-breedte + --pantoken-bp-md. Het @pantoken/interactions gedrag schakelt daarnaast [should-overlay-tray]/.-should-overlay-tray (een handmatige override) en zendt overlaytraychange uit voor apps die de wijziging als een gebeurtenis nodig hebben.

Subcomponenten ​

Gerelateerd ​

  • tray — Een zelfstandige rand-overlay; deze lay-out houdt lade en inhoud in dezelfde flow.
  • context-view — Een kleiner verankerd oppervlak voor contextuele acties en details.