Passer au contenu principal
Présentez les encarts sous forme de Note, Avertissement, Info, Conseil, Check, Danger, ou créez votre propre encart :
Ajoute une note dans le contenu
Cela génère un avertissement à prendre en compte
Met en avant des informations importantes
Voici un conseil utile
Cela nous donne un statut validé
Ceci est une alerte de danger
C’est un encadré personnalisé

Propriétés d’encart personnalisé

Le composant générique Callout prend en charge les icônes et couleurs personnalisées. Les encarts typés (Note, Warning, Info, Tip, Check, Danger) utilisent des icônes et couleurs prédéfinies et acceptent uniquement children et className.
string
L’icône à afficher.Options:
  • Nom d’icône Font Awesome si vous avez la propriété icons.library définie sur fontawesome dans votre docs.json
  • Nom d’icône Lucide si vous avez la propriété icons.library définie sur lucide dans votre docs.json
  • Nom d’icône Tabler si vous avez la propriété icons.library définie sur tabler dans votre docs.json
  • Un seul emoji (par exemple, 💡 ou 🚀)
  • URL vers une icône hébergée en externe
  • Chemin vers un fichier d’icône dans votre projet
  • Code SVG entouré d’accolades
Pour les icônes SVG personnalisées:
  1. Convertissez votre SVG avec le convertisseur SVGR.
  2. Collez votre code SVG dans le champ d’entrée SVG.
  3. Copiez l’élément complet <svg>...</svg> depuis le champ de sortie JSX.
  4. Enveloppez le code SVG compatible JSX dans des accolades : icon={<svg ...> ... </svg>}.
  5. Ajustez height et width selon vos besoins.
string
Le style d’icône Font Awesome. Utilisé uniquement avec les icônes Font Awesome.Options: regular, solid, light, thin, sharp-solid, duotone, brands.
string
Couleur personnalisée sous forme de code hexadécimal (par exemple, #FFC107). Définit la bordure, la teinte de fond et la couleur du texte de l’encart.
string
Classes CSS supplémentaires à appliquer à l’encart. Accepté par le composant générique Callout et par les encarts typés.