CSS: drawer-layout ​

.instui-drawer-layout — Et delt layout med en sammenklappelig sidetray og et primært scrollbar indholdspanel.

-placement-end og standarden (start) bruger begge flex-direction/inset-inline-* logiske egenskaber, ikke left/right, så trayens side følger automatisk direction/dir="rtl" — der er ikke behov for separate RTL-regler.

Source: drawer-layout.css

Tilgængelighed ​

Når trayen fungerer som navigation, mærk den med en tilgængelig overskrift eller aria-label. Giv .content role="region" (InstUI's DrawerLayout-konvention) og navngiv den med aria-label/aria-labelledby, når konteksten alene ikke identificerer den.

Brug ​

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-attributten mangler.
.-placement-endDok trayen på inline-end-siden.
.-placement-startDok trayen på inline-start-siden (standard; angiver det eksplicit).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

Dele ​

DelBeskrivelse
.contentHovedpanelet.
.traySidepanelet.

Brugerdefinerede egenskaber ​

EgenskabTypeStandardBeskrivelse
--pantoken-bp-md——Breddegrænse for overlay-tilstand (30em, tematiseret via responsive værktøjer).

Browserunderstøttelse ​

  • Medlemmerne drawer-layout.tray/drawer-layout.content skifter automatisk til overlay-tilstand via en @container-forespørgsel, når dette elements inline-size falder under tray-bredden + --pantoken-bp-md. @pantoken/interactions-adfærden skifter desuden [should-overlay-tray]/.-should-overlay-tray (en manuel overskrivelse) og udsender overlaytraychange for apps, der har brug for ændringen som en hændelse.

Underkomponenter ​

Relateret ​

  • tray — Et selvstændigt kant-overlay; dette layout holder tray og indhold i samme flow.
  • context-view — En mindre forankret flade til kontekstuelle handlinger og detaljer.