CSS: drawer-layout ​

.instui-drawer-layout — Un diseño dividido con una bandeja lateral plegable y un panel principal desplazable.

-placement-end y el valor predeterminado (start) usan propiedades lógicas flex-direction/inset-inline-*, no left/right, por lo que el lado de la bandeja sigue automáticamente direction/dir="rtl" — no se necesitan reglas RTL separadas.

Source: drawer-layout.css

Accesibilidad ​

Cuando la bandeja actúe como navegación, etiquétela con un encabezado accesible o aria-label. Dé a .content role="region" (convención DrawerLayout de InstUI) y nómbrela con aria-label/aria-labelledby cuando el contexto por sí solo no la identifique.

Uso ​

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

Ejemplos ​

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;

Modificadores ​

ModificadorDescripción
.-openMostrar la bandeja incluso cuando falta el atributo open.
.-placement-endAnclar la bandeja en el lado inline-end.
.-placement-startAnclar la bandeja en el lado inline-start (el predeterminado; lo establece explícitamente).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

Partes ​

ParteDescripción
.contentEl panel principal.
.trayEl panel lateral.

Propiedades personalizadas ​

PropiedadTipoPredeterminadoDescripción
--pantoken-bp-md——Umbral de ancho para el modo superpuesto (30em, tematizado mediante utilidades responsivas).

Compatibilidad con navegadores ​

  • Los miembros drawer-layout.tray/drawer-layout.content cambian a modo superpuesto automáticamente mediante una consulta @container una vez que el inline-size de este elemento cae por debajo de tray-width + --pantoken-bp-md. El comportamiento @pantoken/interactions además alterna [should-overlay-tray]/.-should-overlay-tray (una anulación manual) y emite overlaytraychange para las aplicaciones que necesiten el cambio como evento.

Subcomponentes ​

Relacionado ​

  • tray — Una superposición de borde independiente; este diseño mantiene la bandeja y el contenido en el mismo flujo.
  • context-view — Una superficie anclada más pequeña para acciones contextuales y detalles.