Encarts

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

Aperçu

Note

Incluez des informations supplémentaires non essentielles avec le composant <Aside>.

Importation

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.

MDX

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>

Markdoc

{% 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

Note

Un peu de contenu dans un encart.

Attention

Quelques mises en garde.

Astuce

D’autres contenus sont également pris en charge dans les encarts.

// Un extrait de code, par exemple.

Danger

Ne communiquez votre mot de passe à personne.

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.

MDX

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

<Aside type="caution" title="Attention !">
  Un encart d'avertissement *avec* un titre personnalisé.
</Aside>

Markdoc

{% aside type="caution" title="Attention !" %}
Un encart d'avertissement *avec* un titre personnalisé.
{% /aside %}

Aperçu

Attention !

Un encart d’avertissement avec un titre personnalisé.

Utiliser des icônes personnalisées

Remplacez les icônes par défaut des encarts en utilisant l’attribut icon défini avec le nom de l’une des icônes intégrées à Starlight.

MDX

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

<Aside type="tip" icon="starlight">
  Un encart d'astuce *avec* une icône personnalisée.
</Aside>

Markdoc

{% aside type="tip" icon="starlight" %}
Un encart d'astuce *avec* une icône personnalisée.
{% /aside %}

Aperçu

Astuce

Un encart d’astuce avec une icône personnalisée.

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

icon

Type : StarlightIcon

Un encart peut inclure un attribut icon défini avec le nom de l’une des icônes intégrées à Starlight.