CSS: drawer-layout ​

.instui-drawer-layout — Skiptuuppsetning með fellanlegum hliðarloki og aðalrými sem hægt er að fletta.

-placement-end og sjálfgefna (start) nota bæði flex-direction/inset-inline-* rökfræðilegar eignir, ekki left/right, svo hliðarstaða loksins fylgir direction/dir="rtl" sjálfkrafa — engar sérstakar RTL-reglur þarf.

Source: drawer-layout.css

Aðgengi ​

Þegar lokið gegnir hlutverki sem leiðsögn, merkja það með aðgengilegri fyrirsögn eða aria-label. Gefðu .content role="region" (InstUI DrawerLayout-regla) og nefndu það með aria-label/aria-labelledby þegar samhengi eitt og sér greinir það ekki.

Notkun ​

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

Dæmi ​

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

Uppbygging ​

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;

Breytingar ​

BreytiLýsing
.-openBirta lokið jafnvel þegar open eiginleikinn er ekki til staðar.
.-placement-endFesta lokið við inline-end-hliðina.
.-placement-startFesta lokið við inline-start-hliðina (sjálfgefið; setur það skýrt).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

Hlutar ​

HlutiLýsing
.contentAðalglugginn.
.trayHliðarpanelinn.

Sérsniðnar eigindir ​

EiginleikiTegundSjálfgefiðLýsing
--pantoken-bp-md——Breiddarþröskuldur fyrir yfirlagsham (30em, þemað með móttæknihjálpartólum).

Vafrastuðningur ​

  • Meðlimirnir drawer-layout.tray/drawer-layout.content skipta sjálfkrafa í yfirlagsham gegnum @container fyrirspurn þegar inline-stærð þessa elements fellur undir lokabrettisbreidd + --pantoken-bp-md. Hegðun @pantoken/interactions skiptir einnig um [should-overlay-tray]/.-should-overlay-tray (handvirkt yfirsýnisstilling) og sendir overlaytraychange fyrir forrit sem þurfa breytinguna sem atburð.

Undirhlutir ​

Tengdar ​

  • tray — Sjálfstætt jaðar-yfirlag; þessi uppsetning heldur loki og efni í sama flæði.
  • context-view — Minna festað yfirborð fyrir samhengi aðgerðir og smáatriði.