CSS: drawer-layout

.instui-drawer-layout — Eit delt oppsett med ei samanbrettbar side-skuff og eit hovudinnhaldspanel som kan rulla.

-placement-end og standard (start) brukar begge flex-direction/inset-inline-* logiske eigenskapar, ikkje left/right, så skuffa si side følgjer automagisk direction/dir="rtl" — inga eigne RTL-reglar trengst.

Source: drawer-layout.css

Tilgjenge

Når skuffa fungerer som navigasjon, gi ho ei tilgjengeleg overskrift eller aria-label. Gje .content role="region" (InstUI sin DrawerLayout-konvensjon) og namngje ho med aria-label/aria-labelledby når kontekst åleine ikkje identifiserer ho.

Bruk

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

Døme

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

Struktur

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

Modifikatorar

Modifikator	Skildring
.-open	Vis skuffa sjølv når attributtet open manglar.
.-placement-end	Dokke skuffa på inline-end-sida.
.-placement-start	Dokke skuffa på inline-start-sida (standard; set denne eksplisitt).
.-should-overlay-tray	Interaction — Render the tray as an overlay instead of shrinking content inline.

Delar

Del	Skildring
.content	Hovudpanelet.
.tray	Sidepanelet.

Tilpassa eigenskapar

Eigenskap	Type	Standard	Skildring
--pantoken-bp-md	—	—	Breddeterskel for overlapp-modus (30em, tematisert via responsivitetsverktøy).

Nettlesarstøtte

• Medlemmane drawer-layout.tray/drawer-layout.content går automatisk over i overlapp-modus via ei @container-spørring når dette elementet sin inline-storleik fell under skuff-breidd + --pantoken-bp-md. Den @pantoken/interactions åtferda vekslar i tillegg [should-overlay-tray]/.-should-overlay-tray (ein manuell overstyring) og sender ut overlaytraychange for appar som treng endringa som ein hending.

Underkomponentar

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

Relatert

• tray — Ein frittståande kant-overlegg; dette oppsettet held skuff og innhald i same flyt.
• context-view — Ei mindre forankra flate for kontekstuelle handlingar og detaljar.