Skip to content
Mintlify
Mintlify
Composants

Encarts

Ajoutez des composants d'encart info, note, tip, check, warning, danger ou personnalisés pour mettre en avant les informations clés de votre documentation.

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
<Note>Ajoute une note dans le contenu</Note>
Cela génère un avertissement à prendre en compte
<Warning>Cela génère un avertissement à prendre en compte</Warning>
Met en avant des informations importantes
<Info>Met en avant des informations importantes</Info>
Voici un conseil utile
<Tip>Voici un conseil utile</Tip>
Cela nous donne un statut validé
<Check>Cela nous donne un statut validé</Check>
Ceci est une alerte de danger
<Danger>Ceci est une alerte de danger</Danger>
C’est un encadré personnalisé
<Callout icon="key" color="#FFC107" iconType="regular">Ceci est un encadré personnalisé</Callout>

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 n’acceptent que children.

iconstring

L’icône à afficher.

Options:

  • Font Awesome nom d’icône, si vous avez la propriété icons.library paramètres définie sur fontawesome dans votre docs.json
  • Lucide nom d’icône, si vous avez la propriété icons.library paramètres définie sur lucide dans votre docs.json
  • Tabler nom d’icône, si vous avez la propriété icons.library paramètres définie sur tabler dans votre docs.json
  • 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.
iconTypestring

Le style d’icône Font Awesome. Utilisé uniquement avec les icônes Font Awesome.

Options: regular, solid, light, thin, sharp-solid, duotone, brands.

colorstring

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.

Was this page helpful?Suggest editsRaise issue