Aller au contenu

Encarts

Pour afficher des informations secondaires à côté du contenu principal d’une page, utilisez le composant <Aside>.

Aperçu

Import

import { Aside } from '@astrojs/starlight/components';

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.

import { Aside } from '@astrojs/starlight/components';
<Aside>Un peu de contenu dans un encart.</Aside>
<Aside type="caution">Quelques mises en garde.</Aside>
<Aside type="tip">
D'autres contenus sont également pris en charge dans les encarts.
```js
// Un extrait de code, par exemple.
```
</Aside>
<Aside type="danger">Ne communiquez votre mot de passe à personne.</Aside>
Aperçu

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>
Aperçu

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é.