CSS: drawer-layout

.instui-drawer-layout — Razporeditev z razdeljenim pogledom, ki ima zložljiv bočni pladenj in glavno pomično vsebino.

-placement-end in privzeto (start) uporabljata logične lastnosti flex-direction/inset-inline-*, ne left/right, zato se stran pladnja samodejno prilagodi direction/dir="rtl" — ločena pravila za RTL niso potrebna.

Source: drawer-layout.css

Dostopnost

Ko pladenj služi kot navigacija, ga označite z dostopnim naslovom ali aria-label. Dajte .content role="region" (konvencija InstUI DrawerLayout) in ga poimenujte z aria-label/aria-labelledby, kadar kontekst sam po sebi ne identificira.

Uporaba

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

Primeri

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

Struktura

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

Spremenljivke (modifikatorji)

Modifikator	Opis
.-open	Prikažite pladenj tudi, ko atribut open manjka.
.-placement-end	Pripnite pladenj na inline-end stran.
.-placement-start	Pripnite pladenj na inline-start stran (privzeto; nastavi ga eksplicitno).
.-should-overlay-tray	Interaction — Render the tray as an overlay instead of shrinking content inline.

Delii

Del	Opis
.content	Glavno okno.
.tray	Bočna plošča.

Lastnosti po meri

Lastnost	Tip	Privzeto	Opis
--pantoken-bp-md	—	—	Prag širine za prehod v slojno (overlay) način (30em, temu se upravlja preko tem in odzivnih pripomočkov).

Podpora brskalnika

• Člani drawer-layout.tray/drawer-layout.content se samodejno preklopijo v slojni način prek @container poizvedbe, ko inline-size tega elementa pade pod širino pladnja + --pantoken-bp-md. Vedenje @pantoken/interactions dodatno preklaplja [should-overlay-tray]/.-should-overlay-tray (ročni preglas) in odda overlaytraychange za aplikacije, ki potrebujejo to spremembo kot dogodek.

Podkomponente

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

Sorodno

• tray — Samostojen robni slojni element; ta razporeditev ohranja pladenj in vsebino v istem toku.
• context-view — Manjša pritrjena površina za kontekstualna dejanja in podrobnosti.