CSS: drawer-layout ​

.instui-drawer-layout — Egy osztott elrendezés összecsukható oldalsó tálcával és egy fő, görgethető tartalmi panellel.

-placement-end és az alapértelmezett (start) egyaránt a flex-direction/inset-inline-* logikai tulajdonságokat használja, nem a left/right-ot, így a tray oldala a direction/dir="rtl"-t automatikusan követi — külön RTL-szabályokra nincs szükség.

Source: drawer-layout.css

Hozzáférhetőség ​

Ha a tálca navigációként működik, címkézd meg egy hozzáférhető címsorral vagy aria-label-lel. Add meg a .content-nek a role="region"-t (InstUI's DrawerLayout convention), és nevezd meg aria-label/aria-labelledby segítségével, ha a kontextus önmagában nem azonosítja.

Használat ​

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

Példák ​

html
<div class="instui-drawer-layout" id="drawer" open>
  <aside class="tray">Navigáció</aside>
  <main class="content" role="region">Fő tartalom</main>
</div>

Struktúra ​

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;

Módosítók ​

MódosítóLeírás
.-openA tálca megjelenítése akkor is, ha az open attribútum hiányzik.
.-placement-endRögzítse a tálcát az inline-végi oldalra.
.-placement-startRögzítse a tálcát az inline-start oldalon (ez az alapértelmezett; kifejezetten beállítja).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

Részek ​

RészLeírás
.contentA fő panel.
.trayAz oldalsó panel.

Egyéni tulajdonságok ​

TulajdonságTípusAlapértelmezettLeírás
--pantoken-bp-md——Szélességküszöb az átfedéses módhoz (30em, reszponzív segédosztályokkal témázva).

Böngészőtámogatás ​

A drawer-layout.tray/drawer-layout.content tagok automatikusan átváltanak overlay módra egy @container lekérdezés hatására, amint ennek az elemnek az inline-mérete a tray-width + --pantoken-bp-md alá csökken. A @pantoken/interactions viselkedés ezen felül váltogatja a [should-overlay-tray] attribútumot és a .-should-overlay-tray osztályt (kézi felülbírálat), valamint kibocsátja az overlaytraychange eseményt azoknak az alkalmazásoknak, amelyek eseményként igénylik a változást.

Alkomponensek ​

Kapcsolódó ​

  • tray — Önálló, él menti átfedés; ez az elrendezés a tray-t és a tartalmat ugyanabban a folyamban tartja.
  • context-view — Egy kisebb, rögzített felület kontextuális műveletekhez és részletekhez.