CSS: drawer-layout

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

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

Forrás: drawer-layout.css

Akadálymentesség

Ha a tálca navigációként szolgál, lássa el egy akadálymentes címsorral vagy aria-label attribútummal. Adjon a(z) .content elemnek role="region"-t (az InstUI DrawerLayout konvenciója), és nevezze el a(z) aria-label/aria-labelledby segítségével, ha a kontextus önmagában nem azonosítja.

Használat

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

Példák

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

Felépítés

.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
.-open	Jelenítse meg a tálcát akkor is, ha a(z) open attribútum hiányzik.
.-placement-end	Dokkolja a tálcát az inline-end oldalra.
.-placement-start	Dokkolja a tálcát az inline-start oldalra (az alapértelmezett; explicit módon állítja be).
.-should-overlay-tray	Interaction — Render the tray as an overlay instead of shrinking content inline.

Részek

Rész	Leírás
.content	A fő panel.
.tray	Az oldalsó panel.

Egyéni tulajdonságok

Tulajdonság	Típus	Alapértelmezett	Leírás
--pantoken-bp-md	—	—	Szélességi küszöbérték az overlay módhoz (30em, reszponzív segédprogramokon keresztül témázva).

Böngészőtámogatás

• A(z) drawer-layout.tray/drawer-layout.content tagok automatikusan overlay módra váltanak egy @container lekérdezés révén, amint az elem inline-size mérete a tálcaszélesség + --pantoken-bp-md alá csökken. A(z) @pantoken/interactions viselkedés ezen felül átváltja a(z) [should-overlay-tray]/.-should-overlay-tray értéket (kézi felülbírálás), és overlaytraychange eseményt bocsát ki azon alkalmazások számára, amelyeknek eseményként van szükségük a változásra.

Alkomponensek

• drawer-layout.content
• drawer-layout.tray
• tray

Kapcsolódó

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