Skip to main content
View as Markdown

Composants de retour d'information

Les composants de retour d'information communiquent la progression et l'état de chargement : une barre/cercle de progression, un spinner et des espaces réservés skeleton. Tous acceptent l'ensemble partagé props ainsi que les modules visibility et responsive.

components:
  - type: progress
    progressValue: 60
    progressMax: 100
    props: { showLabel: true, size: sm }
  - type: skeleton
    skeletonVariant: rectangular
    props: { animate: true }

progress

Un indicateur de progression déterminé, rendu comme une barre ou un cercle.

Propriété Description
progressValue Valeur courante (0 à progressMax).
progressMax Valeur maximale (défaut : 100).
props.showLabel Afficher le libellé de pourcentage.
props.size Préréglage de taille (p. ex. sm pour une barre plus fine).
props.progressVariant circle rend une progression circulaire avec le pourcentage au centre.

spinner

Un spinner de chargement indéterminé pour les attentes courtes.

Propriété Description
props.size Préréglage de taille du spinner.
props Attributs HTML supplémentaires (p. ex. className pour la couleur).

skeleton

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

Propriété Description
skeletonVariant Forme : text, circular, ou rectangular.
skeletonWidth Largeur CSS (p. ex. 200px, 100%).
skeletonHeight Hauteur CSS (p. ex. 20px, 3rem).
props.animate Activer l'animation pulsante (défaut : true).

Pages connexes