Skip to main content
View as Markdown

Composants de superposition

Les composants de superposition flottent au-dessus de la page : dialogues de confirmation, tiroirs latéraux, popovers, info-bulles, toasts et espaces réservés d'état de chargement. Les composants flottants (popover, tooltip, hover-card) partagent le positionnement floatingSide/floatingAlign, et les composants de la famille dialog s'ouvrent depuis un trigger et piègent le focus tant qu'ils sont ouverts. Tous acceptent l'ensemble partagé props ainsi que les modules visibility et responsive.

components:
  - type: dialog
    title: Confirm
    trigger: { type: button, content: 'Open' }
    children:
      - { type: text, content: 'Are you sure?' }

dialog

Un dialogue modal ouvert depuis un déclencheur. Cliquer sur l'arrière-plan ou appuyer sur Échap le ferme ; le focus est piégé dans le dialogue tant qu'il est ouvert.

Propriété Description
title Titre du dialogue.
description Texte de support sous le titre.
trigger L'élément qui ouvre le dialogue au clic.
children Composants rendus à l'intérieur du panneau du dialogue.
props Attributs HTML (p. ex. className pour le dimensionnement du panneau).

alert-dialog

Un dialogue de confirmation pour les actions destructives, avec des boutons de confirmation/annulation explicites.

Propriété Description
content Le message de confirmation.
confirmLabel Libellé du bouton de confirmation.
cancelLabel Libellé du bouton d'annulation.
trigger L'élément qui ouvre le dialogue d'alerte.
action L'action invoquée à la confirmation (p. ex. une suppression crud).

drawer

Un panneau qui glisse depuis un bord de l'écran.

Propriété Description
drawerSide Bord depuis lequel le tiroir glisse : left, right, top, bottom.
drawerSize Préréglage de taille : sm, md, lg, full.
trigger L'élément qui ouvre le tiroir.
children Composants rendus à l'intérieur du panneau du tiroir.

popover

Un panneau flottant ancré à un déclencheur, ouvert au clic.

Propriété Description
trigger L'élément qui ouvre le popover.
floatingSide Côté préféré par rapport au déclencheur (top, right, bottom, left).
floatingAlign Alignement le long de ce côté (start, center, end).
children Composants rendus à l'intérieur du popover.

tooltip

Un petit indice au survol ancré à un déclencheur.

Propriété Description
tooltipContent Le texte de l'indice.
tooltipDelay Délai avant l'apparition de l'info-bulle (ms).
floatingSide Côté préféré par rapport au déclencheur.
floatingAlign Alignement le long de ce côté.

hover-card

Un popover plus riche qui s'ouvre au survol (p. ex. un aperçu de profil).

Propriété Description
trigger L'élément qui révèle la carte au survol.
floatingSide Côté préféré par rapport au déclencheur.
floatingAlign Alignement le long de ce côté.
openDelay Délai avant l'ouverture au survol (ms).
closeDelay Délai avant la fermeture après le départ du pointeur (ms).
children Composants rendus à l'intérieur de la carte.

toast

Une notification transitoire. Les toasts sont généralement émis depuis le gestionnaire onSuccess/onError d'une action plutôt que placés directement dans l'arbre ; le placement au niveau de la page se configure via page.toasts.

Propriété Description
variant Style : success, error, warning, info (aussi default/destructive).
message Texte du toast (prend en charge les références $variable).
duration Durée de masquage automatique en millisecondes (défaut : 5000).
actionLabel Libellé optionnel de bouton d'action.
actionUrl URL optionnelle vers laquelle le bouton d'action navigue.

Plusieurs toasts s'empilent sans se chevaucher ; la position se configure par page (p. ex. top-right, bottom-center).

progress

Une barre de progression ou un indicateur circulaire affichant l'achèvement.

Propriété Description
progressValue Valeur courante.
progressMax Valeur maximale.
props.showLabel Afficher le texte de pourcentage à côté de la barre.
props.size Préréglage de taille (p. ex. sm pour une barre plus fine).
props.progressVariant Définir sur circle pour un indicateur de progression circulaire avec le pourcentage affiché au centre.

skeleton

Un espace réservé de chargement affiché pendant que le contenu se charge.

Propriété Description
skeletonVariant Forme : text, circular, ou rectangular.
skeletonWidth Largeur de l'espace réservé.
skeletonHeight Hauteur de l'espace réservé.
props.animate Définir sur true pour une animation pulsante.

Pages connexes