CSS: drawer-layout ​

.instui-drawer-layout — Ein geteiltes Layout mit einer einklappbaren Seitenablage und einem primären, scrollbaren Inhaltsbereich.

-placement-end und die Standardeinstellung (Start) verwenden beide flex-direction/inset-inline-* logische Eigenschaften, nicht left/right, sodass die Seitenposition der Ablage automatisch direction/dir="rtl" folgt — es sind keine separaten RTL-Regeln erforderlich.

Source: drawer-layout.css

Barrierefreiheit ​

Wenn die Ablage als Navigation dient, mit einer zugänglichen Überschrift oder aria-label kennzeichnen. Gib .content role="region" (InstUI‑Konvention für DrawerLayout) und benenne sie mit aria-label/aria-labelledby, wenn der Kontext allein keine Identifikation erlaubt.

Verwendung ​

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

Beispiele ​

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;

Modifikatoren ​

ModifikatorBeschreibung
.-openDie Ablage anzeigen, auch wenn das open-Attribut fehlt.
.-placement-endDie Ablage an der inline‑Ende‑Seite andocken.
.-placement-startDie Ablage an der inline‑Start‑Seite andocken (Standard; explizit gesetzt).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

Teile ​

TeilBeschreibung
.contentDer Hauptbereich.
.trayDas Seitenpanel.

Benutzerdefinierte Eigenschaften ​

EigenschaftTypStandardBeschreibung
--pantoken-bp-md——Breitenschwelle für den Overlay‑Modus (30em, thematisierbar über Responsive‑Utilities).

Browser-Unterstützung ​

  • Die drawer-layout.tray/drawer-layout.content‑Mitglieder schalten automatisch in den Overlay‑Modus mittels einer @container‑Abfrage, sobald die inline‑Größe dieses Elements unter tray‑width + --pantoken-bp-md fällt. Das @pantoken/interactions‑Verhalten schaltet zusätzlich [should-overlay-tray]/.-should-overlay-tray (eine manuelle Überschreibung) um und sendet overlaytraychange für Anwendungen, die die Änderung als Ereignis benötigen.

Unterkomponenten ​

Verwandt ​

  • tray — Ein eigenständiges Rand‑Overlay; dieses Layout hält Ablage und Inhalt im selben Fluss.
  • context-view — Eine kleinere verankerte Oberfläche für kontextuelle Aktionen und Details.