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 ​

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

Døme ​

html
<div class="instui-drawer-layout" id="drawer" open>
  <aside class="tray">Navigasjon</aside>
  <main class="content" role="region">Hovudinnhald</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;

Modifikatorar ​

ModifikatorSkildring
.-openVis skuffa sjølv når attributtet open manglar.
.-placement-endDokke skuffa på inline-end-sida.
.-placement-startDokke skuffa på inline-start-sida (standard; set denne eksplisitt).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

Delar ​

DelSkildring
.contentHovudpanelet.
.traySidepanelet.

Tilpassa eigenskapar ​

EigenskapTypeStandardSkildring
--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 ​

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.