CSS: drawer-layout ​

.instui-drawer-layout — Yon layout ki divize ak yon plat bò ki ka kontrenn epi yon prensipal pan k ap defile.

-placement-end ak default (start) toude itilize flex-direction/inset-inline-* pwopriyete lojik, pa left/right, konsa bò tray a swiv direction/dir="rtl" otomatikman — pa bezwen règ RTL separe.

Source: drawer-layout.css

Aksè ​

Lè tray la sèvi kòm navigasyon, make li ak yon tit aksesib oswa aria-label. Bay .content role="region" (konvansyon DrawerLayout InstUI) epi nonmen li ak aria-label/aria-labelledby lè kontèks la pa idantifye li poukont li.

Itilizasyon ​

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

Egzanp ​

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

Estrikti ​

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;

Modifikatè ​

ModifikatèDeskripsyon
.-openMontre tray a menm lè atribi open pa prezan.
.-placement-endFè tray a doke sou bò inline-end la.
.-placement-startFè tray a doke sou bò inline-start la (default; mete l eksplisitman).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

Pati ​

PatiDeskripsyon
.contentPan prensipal la.
.trayPan bò a.

Pwopriyete koutim ​

PwopriyeteTipPa defoDeskripsyon
--pantoken-bp-md——Limit lajè pou mòd overlay (30em, tèmize atravè zouti reponn).

Sipò navigatè ​

  • Manm drawer-layout.tray/drawer-layout.content yo chanje otomatikman nan mòd overlay via yon kesyon @container yon fwa inline-size eleman sa a desann anba tray-width + --pantoken-bp-md. Konpòtman @pantoken/interactions a anplis pèmèt yo kontwole [should-overlay-tray]/.-should-overlay-tray (yon anile manyèl) epi li emèt overlaytraychange pou aplikasyon ki bezwen chanjman an kòm yon evènman.

Sou-konpozan ​

Ki gen rapò ​

  • tray — Yon overlay sou kwen ki endepandan; layout sa a kenbe tray ak kontni nan menm flux la.
  • context-view — Yon sifas ankre pi piti pou aksyon kontèksyèl ak detay.