Encarts
Pour afficher des informations secondaires à côté du contenu principal d’une page, utilisez le composant <Aside>
.
Import
Utilisation
Affichez un encart (également connus sous le nom de « admonition » ou « aside » en anglais) en utilisant le composant <Aside>
.
Le composant <Aside>
peut avoir un attribut facultatif type
, qui contrôle la couleur, l’icône et le titre par défaut de l’encart.
Starlight fournit également une syntaxe personnalisée pour afficher des encarts dans du contenu Markdown et MDX comme alternative au composant <Aside>
.
Voir le guide « Création de contenu en Markdown » pour plus de détails sur la syntaxe personnalisée.
Utiliser des titres personnalisés
Remplacez les titres par défaut des encarts en utilisant l’attribut title
.
import { Aside } from '@astrojs/starlight/components';
<Aside type="caution" title="Attention !"> Un encart d'avertissement *avec* un titre personnalisé.</Aside>
{% aside type="caution" title="Attention !" %}Un encart d'avertissement *avec* un titre personnalisé.{% /aside %}
Props de <Aside>
Implémentation : Aside.astro
Le composant <Aside>
accepte les props suivantes :
type
Type : 'note' | 'tip' | 'caution' | 'danger'
Par défaut : 'note'
Le type d’encart à afficher :
- L’encart
note
(par défaut) est bleu et affiche une icône d’information. - L’encart
tip
est violet et affiche une icône de fusée. - L’encart
caution
est jaune et affiche une icône d’avertissement triangulaire. - L’encart
danger
est rouge et affiche une icône d’avertissement octogonale.
title
Type : string
Le titre de l’encart à afficher.
Si title
n’est pas défini, le titre par défaut du type
de l’encart en cours sera utilisé.