CSS: drawer-layout

.instui-drawer-layout — Une mise en page divisée avec un tiroir latéral pliable et un volet de contenu principal défilant.

-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 titre accessible ou aria-label. Donnez à .content role="region" (convention DrawerLayout d'InstUI) et nommez‑le avec aria-label/aria-labelledby lorsque le contexte seul ne l'identifie pas.

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	Ancrer le tiroir sur le côté inline-end.
.-placement-start	Ancrer le tiroir sur le 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 volet principal.
.tray	Le panneau latéral.

Propriétés personnalisées

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

Prise en charge des navigateurs

• Les membres drawer-layout.tray/drawer-layout.content basculent automatiquement en mode superposition via une requête @container une fois que la taille inline de cet élément baisse 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 du changement en tant qu'événement.

Sous-composants

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

Liés

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