CSS: drawer-layout ​

.instui-drawer-layout — Trefniant wedi'i rannu gyda thryddug ochr y gellir ei chuddio a phanel cynnwys sgrolio prif.

-placement-end a'r diofyn (dechrau) y ddau yn defnyddio eiddo rhesymegol flex-direction/inset-inline-*, nid left/right, felly mae ochr y trydydd yn dilyn direction/dir="rtl" yn awtomatig — nid oes angen rheolau RTL ar wahân.

Source: drawer-layout.css

Hygyrchedd ​

Pan fo'r trydydd yn gweithredu fel llywio, labeliwch ef gyda phenawd hygyrch neu aria-label. Rhoddwch i .content role="region" (confensiwn DrawerLayout InstUI) a'i enwi gyda aria-label/aria-labelledby pan nad yw'r cyd-destun yn ei adnabod ar ei hun.

Defnydd ​

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

Enghreifftiau ​

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

Strwythur ​

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;

Modyfiwyr ​

ModyfiwrDisgrifiad
.-openDangoswch y trydydd hyd yn oed pan nad yw'r priodoledd open yn bresennol.
.-placement-endDociwch y trydydd ar ochr 'inline-end'.
.-placement-startDociwch y trydydd ar ochr 'inline-start' (y diofyn; gosodir yn eglur).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

Rhannau ​

RhanDisgrifiad
.contentY phanel prif.
.trayY panel ochr.

Priodweddau arferiad ​

EiddoMathDiofynDisgrifiad
--pantoken-bp-md——Trothwy lled ar gyfer modd gorchudd (30em, themadwyd trwy offer atebgar).

Cefnogaeth porwr ​

  • Mae aelodau drawer-layout.tray/drawer-layout.content yn newid i fodd gorchudd yn awtomatig trwy ymholiad @container unwaith y bydd maint-inline yr elfen hon yn gostwng o dan led-tray + --pantoken-bp-md. Yn ychwanegol, mae ymddygiad @pantoken/interactions yn toglo [should-overlay-tray]/.-should-overlay-tray (gorchymyn llaw) ac yn allyrru overlaytraychange ar gyfer apiau sy'n angen y newid fel digwyddiad.

Is-gydrannau ​

Perthnasol ​

  • tray — Gorchudd ymyl annibynnol; mae'r trefniant hwn yn cadw'r trydydd a'r cynnwys yn yr un llif.
  • context-view — Arwyneb wedi'i glustnodi, yn llai, ar gyfer gweithredoedd cyd-destunol a manylion.