CSS: drawer-layout ​

.instui-drawer-layout — Jaettu asettelu, jossa on supistettavissa oleva sivulokero ja päällä rullattava sisältöruutu.

-placement-end ja oletus (start) käyttävät molemmat flex-direction/inset-inline-* loogisia ominaisuuksia, eivät left/right, joten lokeron sivu seuraa automaattisesti direction/dir="rtl" — erillisiä RTL-sääntöjä ei tarvita.

Source: drawer-layout.css

Saavutettavuus ​

Kun lokero toimii navigointina, merkitse se saavutettavalla otsikolla tai aria-label. Anna .content role="region" (InstUI:n DrawerLayout‑käytäntö) ja nimeä se aria-label/aria-labelledby, jos pelkkä konteksti ei riitä tunnistamiseen.

Käyttö ​

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

Esimerkit ​

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

Rakenne ​

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;

Muokkaajat ​

MuokkaajaKuvaus
.-openNäytä lokero myös silloin, kun open‑attribuutti puuttuu.
.-placement-endKiinnitä lokero inline‑päätepään puolelle.
.-placement-startKiinnitä lokero inline‑aloituspuolelle (oletus; asettaa sen nimenomaisesti).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

Osat ​

OsaKuvaus
.contentPääruutu.
.traySivupaneeli.

Mukautetut ominaisuudet ​

OminaisuusTyyppiOletusKuvaus
--pantoken-bp-md——Leveyden kynnys peittotilalle (30em, teemoitettu responsiivisten apuohjelmien kautta).

Selaintuki ​

  • drawer-layout.tray/drawer-layout.content‑jäsenet vaihtavat automaattisesti peittotilaan @container‑haun avulla, kun tämän elementin inline‑koko laskee alle lokeron leveyden + --pantoken-bp-md. @pantoken/interactions‑käyttäytyminen lisäksi kytkee [should-overlay-tray]/.-should-overlay-tray päälle/pois (manuaalinen ohitus) ja tuottaa overlaytraychange sovelluksille, jotka tarvitsevat muutoksen tapahtumana.

Alikomponentit ​

Liittyvät ​

  • tray — Itsenäinen reunan peite; tämä asettelu pitää lokeron ja sisällön samassa virrassa.
  • context-view — Pienempi kiinnitetty pinta kontekstuaalisille toiminnoille ja yksityiskohdille.