CSS: drawer-layout ​

.instui-drawer-layout — Una disposició partida amb una safata lateral plegable i un panell de contingut principal desplaçable.

-placement-end i el valor per defecte (start) utilitzen ambdós les propietats lògiques flex-direction/inset-inline-*, no left/right, així que el costat de la safata segueix direction/dir="rtl" automàticament — no calen regles RTL separades.

Source: drawer-layout.css

Accessibilitat ​

Quan la safata fa de navegació, etiquetar-la amb un encapçalament accessible o aria-label. Donar a .content role="region" (conveni DrawerLayout d'InstUI) i anomenar-la amb aria-label/aria-labelledby quan el context per si sol no l'identifiqui.

Ús ​

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

Exemples ​

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

Estructura ​

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;

Modificadors ​

ModificadorDescripció
.-openMostrar la safata fins i tot quan manca l'atribut open.
.-placement-endAncorar la safata al costat inline-end.
.-placement-startAncorar la safata al costat inline-start (el valor per defecte; establir-ho explícitament).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

Parts ​

PartDescripció
.contentEl panell principal.
.trayEl panell lateral.

Propietats personalitzades ​

PropietatTipusPredeterminatDescripció
--pantoken-bp-md——Llindar d'amplada per al mode de superposició (30em, tematitzat via utilitats responsives).

Suport del navegador ​

  • Els membres drawer-layout.tray/drawer-layout.content passen automàticament al mode de superposició mitjançant una consulta @container un cop la mida en línia d'aquest element cau per sota de l'amplada-de-la-safata + --pantoken-bp-md. El comportament @pantoken/interactions adicionalment commuta [should-overlay-tray]/.-should-overlay-tray (una anul·lació manual) i emet overlaytraychange per a aplicacions que necessitin el canvi com a esdeveniment.

Subcomponents ​

Relacionat ​

  • tray — Una superposició d'arista independent; aquesta disposició manté la safata i el contingut en el mateix flux.
  • context-view — Una superfície ancorada més petita per a accions i detalls contextuals.