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. |
Pages connexes
- Présentation des pages — le modèle de composants et la substitution de variables.
- Composants de contenu — blocs de texte et de prose.
- Composants de mise en page — conteneurs et grilles pour la mise en page média.
- SEO et métadonnées — images Open Graph et indices de préchargement.
- Buckets — stockage des médias téléversés référencés par
src.
Dernière mise à jour 11 août 2026
Cette documentation a été rédigée avec de l'IA : des erreurs ou du contenu obsolète sont donc possibles. Sovrium est en bêta. Les contributions et corrections sont les bienvenues.