Superpositions

Fenêtre contextuelle

نافذة سياقيةPopover

Stablesrc/dsm/components/popover.tsx
La fenêtre contextuelle affiche un contenu riche (texte, filtres, mini-formulaire) ancré à un déclencheur, sans quitter la page. Contrairement à l'infobulle, elle reste accessible au clic et au clavier.

Import

import { Popover } from "@/dsm/components/popover";

Exemples

Par défaut

Une explication courte ancrée à un lien.

LTR

Avec titre et fermeture

Panneau nommé, fermable explicitement.

LTR

Filtre de démarches

Mini-formulaire de filtres dans une fenêtre contextuelle.

LTR

Usage

Quand l'utiliser

  • Utilisez-la pour une explication détaillée qui ne tient pas dans une infobulle (« Comment le savoir ? »).
  • Utilisez-la pour un panneau de filtres ou d'options secondaires, accessible depuis une seule action.

Quand ne pas l'utiliser

  • N'y placez pas une action irréversible ou destructive : utilisez `AlertDialog`.
  • Ne l'utilisez pas pour un contenu qui doit rester ouvert pendant que l'utilisateur défile la page : préférez un `Drawer`.

Accessibilité & langues

Accessibilité

  • Le déclencheur reçoit `aria-expanded` et l'ouverture est disponible au clavier (Entrée, Espace).
  • Quand `closable` est actif, le bouton de fermeture porte un `aria-label` traduit.

RTL & multilingue

  • `side` accepte `inline-start` / `inline-end` : la position bascule automatiquement selon le sens de lecture.
  • Le repère visuel optionnel (showArrow) est positionné par Base UI et miroité en RTL, sans propriété physique dans le code d'usage.

Propriétés

Popover
PropriétéTypeDéfautDescription
trigger*ReactElement—Élément déclencheur, rendu via `Popover.Trigger`.
titleReactNode—Titre optionnel en tête de fenêtre.
descriptionReactNode—Texte principal, sous le titre.
side"top" | "bottom" | "inline-start" | "inline-end"bottomCôté logique d'ancrage.
align"start" | "center" | "end"centerAlignement sur l'axe perpendiculaire.
sideOffsetnumber4Distance en pixels avec le déclencheur.
showArrowbooleanfalseAffiche le repère triangulaire vers le déclencheur.
closablebooleanfalseAffiche un bouton de fermeture à côté du titre.
childrenReactNode—Contenu libre, sous le titre et la description.

Composants liés