Cadres

Utilisez des cadres pour afficher des images, des schémas, des vidéos ou d’autres contenus visuels avec un style cohérent et, au besoin, des légendes. Les cadres centrent le contenu et le distinguent visuellement du texte environnant.

Photographie d’un lac entouré d’arbres, avec des montagnes au loin, dans le parc national de Yellowstone.

Légendes

Ajoutez un contexte supplémentaire à une image en utilisant la prop optionnelle caption. Les légendes s’affichent dans le cadre sous l’image.

Photographie de la vallée de Yosemite. — Le parc national de Yosemite est visité par plus de 3,5 millions de personnes chaque année.

Markdown dans les légendes

Les légendes prennent en charge la mise en forme Markdown, y compris les liens et le texte en gras.

Photo de la vallée de Yosemite. — En savoir plus sur le parc national de Yosemite et planifiez votre visite.

Photo d'un lac entouré d'arbres avec des montagnes au loin dans le parc national de Yellowstone. — Important : Consultez le site du parc pour connaître les conditions actuelles.

Conseils

Ajoutez un texte qui précède le cadre à l’aide de la prop optionnelle hint. Les conseils apparaissent au-dessus du cadre.

Si vous prévoyez de visiter le parc national de Yosemite, procurez-vous vos autorisations avant votre départ.

Vidéos

Lorsque vous placez un élément video avec autoPlay dans un cadre, celui-ci ajoute les attributs playsInline, loop et muted.

Video with autoPlay

<Frame caption="Product demo">
  <video autoPlay src="/path/to/video.mp4" />
</Frame>

Les vidéos sans autoPlay ne reçoivent aucun attribut supplémentaire par défaut.

Propriétés

caption

string

Texte affiché dans le cadre, centré sous le contenu. Prend en charge la mise en forme Markdown, y compris les liens et le texte en gras.

hint

string

Texte affiché avant le cadre.

<Frame>
  <img src="/path/image.jpg" alt="Texte alternatif descriptif" />
</Frame>

<Frame caption="Texte de légende">
  <img src="/path/image.jpg" alt="Texte alternatif descriptif" />
</Frame>

<Frame caption="Consultez la [documentation](/docs) pour plus de détails">
  <img src="/path/image.jpg" alt="Texte alternatif descriptif" />
</Frame>

<Frame caption="**Remarque :** Consultez le [guide officiel](https://example.com) pour les instructions de configuration">
  <img src="/path/image.jpg" alt="Texte alternatif descriptif" />
</Frame>

<Frame hint="Texte d'indice">
  <img src="/path/image.jpg" alt="Texte alternatif descriptif" />
</Frame>

<Frame hint="Texte d'indice" caption="Texte de légende">
  <img src="/path/image.jpg" alt="Texte alternatif descriptif" />
</Frame>

Champs

Icônes

Prise en main

Organiser

Personnaliser

Créer du contenu

Documenter des API

Déployer

Optimisation

Légendes

Markdown dans les légendes

Conseils

Vidéos

Propriétés

​Légendes

​Markdown dans les légendes

​Conseils

​Vidéos

​Propriétés

Légendes

Markdown dans les légendes

Conseils

Vidéos

Propriétés