Skip to content
Learning Center

Démo des composants Starlight

Cette page présente les composants intégrés de Starlight, rendus directement dans un document MDX.

Icônes

Section titled “Icônes”

Icônes par défaut

Couleur + taille

Badges

Section titled “Badges”

Variantes

  • Note
  • Succès
  • Astuce
  • Attention
  • Danger

Tailles + style personnalisé

  • Petit
  • Moyen
  • Grand

Encadrés (asides)

Section titled “Encadrés (asides)”

Cartes

Section titled “Cartes”

Carte simple

Contenu intéressant à mettre en avant. Vous pouvez inclure du Markdown et du code inline comme pnpm run dev.

Carte avec icône

Sirius, Vega, Bételgeuse — quelques étoiles d’exemple.

Cartes de liens

Section titled “Cartes de liens”
Bien démarrer Accédez au guide de démarrage.
Rédiger du contenu Comment rédiger des pages en Markdown/MDX.
Documentation Starlight Documentation officielle des composants Starlight.

Grille de cartes (mise en page)

Section titled “Grille de cartes (mise en page)”

Décalage 1

Cette grille utilise la prop stagger pour créer un effet en escalier.

Décalage 2

Vous pouvez mélanger Card et LinkCard dans CardGrid.

Décalage 3

Texte de démonstration : Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Boutons de lien

Section titled “Boutons de lien”
Commencer

Référence de configuration

Voir aussi : Astro

Onglets

Section titled “Onglets”

Sirius, Vega, Bételgeuse

Onglets synchronisés (essayez de changer les deux)

Section titled “Onglets synchronisés (essayez de changer les deux)”

Groupe A

Bellatrix, Rigel, Bételgeuse

Groupe B

HD 34445 b, Gliese 179 b, WASP-82 b

Étapes

Section titled “Étapes”
  1. Importez le composant dans votre fichier MDX : 
    import { Steps } from '@astrojs/starlight/components';
  2. Entourez votre liste ordonnée avec <Steps>.
    Faites autre chose…
  3. Rédigez des étapes courtes, chacune avec une seule action.

Code

Section titled “Code”
exemple.js
console.log('Ceci pourrait venir d\'un fichier, d\'une base de données, ou d\'un CMS !');


function add(a, b) {
  return a + b;
}


console.log(add(2, 3));

Arborescence de fichiers

Section titled “Arborescence de fichiers”
  • astro.config.mjs - package.json - src - components - Header.astro - Title.astro - content - docs - guides - demo.mdx - get-started.mdx