CSS: drawer-layout ​

.instui-drawer-layout — Un layout diviso con un vassoio laterale comprimibile e un pannello principale a scorrimento.

-placement-end e il predefinito (start) usano entrambi le proprietà logiche flex-direction/inset-inline-*, non left/right, quindi il lato del vassoio segue automaticamente direction/dir="rtl" — non sono necessarie regole RTL separate.

Source: drawer-layout.css

Accessibilità ​

Quando il vassoio funge da navigazione, etichettarlo con un'intestazione accessibile o aria-label. Dare a .content role="region" (convenzione DrawerLayout di InstUI) e nominarlo con aria-label/aria-labelledby quando il contesto da solo non lo identifica.

Uso ​

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

Esempi ​

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

Struttura ​

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;

Modificatori ​

ModificatoreDescrizione
.-openMostra il vassoio anche quando l'attributo open è assente.
.-placement-endAncorare il vassoio sul lato inline-end.
.-placement-startAncorare il vassoio sul lato inline-start (predefinito; impostalo esplicitamente).
.-should-overlay-trayInteraction — Render the tray as an overlay instead of shrinking content inline.

Parti ​

ParteDescrizione
.contentIl pannello principale.
.trayIl pannello laterale.

Proprietà personalizzate ​

ProprietàTipoPredefinitoDescrizione
--pantoken-bp-md——Soglia di larghezza per la modalità overlay (30em, tematizzata tramite utility responsive).

Supporto browser ​

  • I membri drawer-layout.tray/drawer-layout.content passano automaticamente alla modalità overlay tramite una query @container una volta che la inline-size di questo elemento scende al di sotto di tray-width + --pantoken-bp-md. Il comportamento @pantoken/interactions commuta inoltre [should-overlay-tray]/.-should-overlay-tray (una sovrascrittura manuale) ed emette overlaytraychange per le app che necessitano del cambiamento come evento.

Sottocomponenti ​

Correlati ​

  • tray — Un overlay autonomo sul bordo; questo layout mantiene vassoio e contenuto nello stesso flusso.
  • context-view — Una superficie ancorata più piccola per azioni contestuali e dettagli.