CSS: drawer-layout ​

.instui-drawer-layout — Et delt oppsett med en sammenleggbar sidetray og et primært rullebart innholdspanel.

-placement-end og standarden (start) bruker begge flex-direction/inset-inline-* logiske egenskaper, ikke left/right, så trayens side følger automatisk direction/dir="rtl" — ingen separate RTL-regler er nødvendig.

Source: drawer-layout.css

Tilgjengelighet ​

Når trayen fungerer som navigasjon, merk den med en tilgjengelig overskrift eller aria-label. Gi .content role="region" (InstUIs DrawerLayout-konvensjon) og navngi den med aria-label/aria-labelledby når kontekst alene ikke identifiserer den.

Bruk ​

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

Eksempler ​

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;

Modifikatorer ​

ModifikatorBeskrivelse
.-openVis trayen selv når open-attributtet mangler.
.-placement-endDokker trayen på inline-end-siden.
.-placement-startDokker trayen på inline-start-siden (standard; setter det eksplisitt).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

Deler ​

DelBeskrivelse
.contentHovedpanelet.
.traySidepanelet.

Egendefinerte egenskaper ​

EgenskapTypeStandardBeskrivelse
--pantoken-bp-md——Breddegrense for overlay-modus (30em, tematisk via responsive hjelpere).

Nettleserstøtte ​

  • Medlemmene drawer-layout.tray/drawer-layout.content bytter automatisk til overlay-modus via en @container-forespørsel når dette elementets inline-size faller under tray-bredde + --pantoken-bp-md. @pantoken/interactions-atferden veksler i tillegg [should-overlay-tray]/.-should-overlay-tray (en manuell overstyring) og utløser overlaytraychange for apper som trenger endringen som en hendelse.

Underkomponenter ​

Relatert ​

  • tray — En frittstående kant-overlay; dette oppsettet holder tray og innhold i samme flyt.
  • context-view — En mindre forankret flate for kontekstuelle handlinger og detaljer.