CSS: drawer-layout ​

.instui-drawer-layout — Diviherdži layout mii leat gávdnonmuvvan boazu-tray ja ovddasmahttun scrollaš obsah-paanu.

-placement-end ja dohkkehuvvon (start) dáhkái geavahit flex-direction/inset-inline-* logála properties, ii left/right, danne tray side álggu ráhkadit direction/dir="rtl" automatihkalaš — ii leat váileva RTL-rávdaid váiledit.

Source: drawer-layout.css

Guhkkinjohka ​

Maid tray galgá bargat navigašuvnnas, leat dát gullat juohkehaš oažžuheapmi dahje aria-label. Dáhkát .content role="region" (InstUI DrawerLayout konventuvdna) ja nammasse aria-label/aria-labelledby go kontekstta ain ii válddeš ráhkaduvvon maid son lea.

Buktáhašvuohta ​

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

Exempla ​

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

Structura ​

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;

Modifisuvnnat ​

ModifisererDeskripción
.-openOappáhusa tray vaikko open atributta leat ustit.
.-placement-endDokkáhusa tray inline-end beaivviin.
.-placement-startDokkáhusa tray inline-start beaivviin (doaibma; sáhttá setta sávvat rõssemaid).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

Dála ​

DálaDeskripción
.contentOvttas dovdda.
.traySivu panel.

Ovvun-propertijat ​

PropertyTypeDefaultDeskripción
--pantoken-bp-md——Gávtti váldu overlay-modiin (30em, tema sutejuvvon responsiivut utilitehtaid).

Browsera geavahit ​

  • drawer-layout.tray/drawer-layout.content členat dál buktet overlay-modiin automatihkalaš čuovggain @container query go dan elementa inline-size olggos leat vuollán tray-width + --pantoken-bp-md. @pantoken/interactions bártnan máđai dagahit [should-overlay-tray]/.-should-overlay-tray (manuala jälbidus) ja geavaha overlaytraychange aplikatsioonain mii fertehii váldit dan muuttun sáhttit.

Almmuhuvvot komponenttat ​

Dálkkodat ​

  • tray — Álbmotráhkis egđus overlay; dán layout:s boađe leat tray ja obsah sama vuoluid.
  • context-view — Ovtta anchorede surface kontekstualvuođa gaska ja detaila.