Skip to main content
View as Markdown

Composants média

Les composants média rendent des images, icônes, vidéos, audio et cadres intégrés. Ils gèrent le dimensionnement responsive, le chargement différé, les attributs d'accessibilité et le bac à sable de sécurité. Tous acceptent l'ensemble partagé props (où vivent la plupart des attributs média) ainsi que les modules visibility et responsive ; les références $record.* se résolvent dans props.src, props.alt, etc.

components:
  - type: image
    props: { src: '$record.cover', alt: '$record.title', loading: lazy, objectFit: cover }
  - type: icon
    props: { name: check-circle, size: 20, color: 'var(--color-primary)' }

image

Une image responsive.

Propriété Description
props.src URL de l'image (requis ; prend en charge $record.*).
props.alt Texte alternatif (requis pour l'accessibilité).
props.loading lazy diffère le chargement jusqu'à proximité de la fenêtre.
props.srcset Sources candidates pour la sélection responsive.
props.sizes Indices de taille de source associés à srcset.
props.width Largeur intrinsèque (empêche le décalage de mise en page).
props.height Hauteur intrinsèque.
props.objectFit Mise à l'échelle : cover, contain, fill, none.

Un chargement échoué affiche un espace réservé. Encadrez une image dans un link pour la rendre cliquable.

icon

Une icône SVG inline du jeu d'icônes Lucide.

Propriété Description
props.name Nom d'icône Lucide (mappe vers le SVG correspondant ; prend en charge $variable).
props.size Largeur/hauteur en pixels (défaut : 24).
props.color Couleur de trait SVG (par défaut currentColor ; prend en charge $variable).
props.strokeWidth Largeur de trait SVG (défaut : 2).
props.className Classes Tailwind (p. ex. utilitaires de couleur).
props.ariaLabel Libellé accessible — définit role="img" et aria-label ; sans lui l'icône est aria-hidden.

Les icônes se rendent correctement comme enfants de button et link, et émettent data-testid="icon-{name}".

video

Un lecteur vidéo prenant en charge les fichiers directs et les intégrations YouTube/Vimeo.

Propriété Description
props.src URL vidéo directe ou URL d'intégration (YouTube/Vimeo se convertissent automatiquement en iframe).
props.poster Image d'aperçu affichée avant la lecture.
props.controls Afficher les contrôles de lecture.
props.autoplay Lecture automatique au chargement.
props.muted Démarrer en sourdine.
props.loop Lecture en boucle.
props.aspectRatio Dimensionnement responsive (16:9, 4:3, ou personnalisé).
props.tracks Pistes de sous-titres/légendes (format VTT).

audio

Un lecteur audio.

Propriété Description
props.src URL audio (requis pour l'audio à source unique).
props.controls Afficher les contrôles de lecture.
props.autoplay Lecture automatique au chargement.
props.loop Lecture en boucle.
props.sources Formats multiples avec types MIME (pour repli inter-navigateurs).

iframe

Un cadre externe intégré.

Propriété Description
props.src URL du cadre (requis).
props.title Titre accessible (requis pour l'accessibilité).
props.sandbox Attribut sandbox restreignant les capacités du cadre (sécurité).
props.allow Permissions accordées (p. ex. caméra, microphone).
props.width / props.height / props.aspectRatio Dimensionnement responsive.

Un diaporama de diapositives enfants défilant horizontalement ou verticalement.

Propriété Description
children Composants de diapositive.
props.orientation Direction de défilement : horizontal ou vertical.
props Attributs HTML supplémentaires (p. ex. options de lecture automatique/boucle).

aspect-ratio

Un encadreur qui maintient un ratio d'aspect fixe pour son enfant (généralement un élément média).

Propriété Description
props.ratio Le ratio d'aspect à imposer (p. ex. 16:9).
children Le composant média (ou autre) à contraindre.

Pages connexes