CSS: drawer-layout

.instui-drawer-layout — Une disposition partagée avec un volet latéral rétractable et un panneau de contenu principal déroulant.

-placement-end et la valeur par défaut (start) utilisent tous deux les propriétés logiques flex-direction/inset-inline-*, pas left/right, donc le côté du tiroir suit automatiquement direction/dir="rtl" — aucune règle RTL séparée n'est nécessaire.

Source: drawer-layout.css

Accessibilité

Quand le tiroir sert de navigation, étiquetez‑le avec un en‑tête accessible ou aria-label. Donnez à .content role="region" (convention DrawerLayout d'InstUI) et nommez‑le avec aria-label/aria-labelledby lorsqu'il n'est pas identifiable par le contexte seul.

Utilisation

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

Exemples

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

Structure

.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;

Modificateurs

Modificateur	Description
.-open	Afficher le tiroir même lorsque l'attribut open est absent.
.-placement-end	Amarrer le tiroir du côté inline‑end.
.-placement-start	Amarrer le tiroir du côté inline‑start (par défaut; le définit explicitement).
.-should-overlay-tray	Interaction — Render the tray as an overlay instead of shrinking content inline.

Parties

Partie	Description
.content	Le panneau principal.
.tray	Le panneau latéral.

Propriétés personnalisées

Propriété	Type	Par défaut	Description
--pantoken-bp-md	—	—	Seuil de largeur pour le mode superposé (30em, thématisé via les utilitaires responsifs).

Compatibilité des navigateurs

• Les membres drawer-layout.tray/drawer-layout.content basculent automatiquement en mode superposé via une requête @container une fois que la inline‑size de cet élément tombe en dessous de la largeur du tiroir + --pantoken-bp-md. Le comportement @pantoken/interactions bascule en outre [should-overlay-tray]/.-should-overlay-tray (un override manuel) et émet overlaytraychange pour les applications qui ont besoin de ce changement sous forme d'événement.

Sous-composants

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

Connexe

• tray — A standalone edge overlay; this layout keeps tray and content in the same flow.
• context-view — A smaller anchored surface for contextual actions and detail.