Introducción
Esta guía explica cómo instalar el paquete y dejarlo listo en cinco minutos. No hace falta experiencia previa.
Instalación
Necesitas Node 20 o superior y un gestor de paquetes. Elige el que ya uses en tu proyecto.
Con npm
npm install lumen
Con pnpm
pnpm add lumen
Uso
Importa el componente y pásale tus datos. Funciona igual en el servidor y en el navegador.
Opciones
Todas las opciones tienen un valor por defecto razonable. Cambia solo las que necesites.
Preguntas
Si algo falla, revisa la versión de Node antes que nada. Después, borra la caché y prueba otra vez.
Sommaire de page avec rail de lecture
Un sommaire latéral dont le rail suit le retrait de chaque titre et s'allume sur les sections lues pendant le défilement.
Réglages
Code
<div class="uvq12-sr"><div class="sc" tabindex="0" aria-label="Documentation"><section id="uvq12-sr-s0"><h4>Introduction</h4><p>Ce guide explique comment installer le paquet et le rendre prêt en cinq minutes. Aucune expérience préalable n'est nécessaire.</p></section><section id="uvq12-sr-s1"><h4>Installation</h4><p>Il te faut Node 20 ou plus et un gestionnaire de paquets. Prends celui que ton projet utilise déjà.</p></section><section id="uvq12-sr-s2"><h5>Avec npm</h5><p><code>npm install lumen</code></p></section><section id="uvq12-sr-s3"><h5>Avec pnpm</h5><p><code>pnpm add lumen</code></p></section><section id="uvq12-sr-s4"><h4>Utilisation</h4><p>Importe le composant et passe-lui tes données. Il fonctionne de la même façon sur le serveur et dans le navigateur.</p></section><section id="uvq12-sr-s5"><h5>Options</h5><p>Toutes les options ont une valeur par défaut raisonnable. Ne change que celles dont tu as besoin.</p></section><section id="uvq12-sr-s6"><h4>Questions</h4><p>Si quelque chose échoue, vérifie d'abord la version de Node. Ensuite, vide le cache et réessaie.</p></section></div><nav class="tc" aria-label="Sur cette page"><p>Sur cette page</p><div class="rl"><svg aria-hidden="true"><path class="b"/><path class="h"/></svg><ul><li class="l0"><a href="#uvq12-sr-s0">Introduction</a></li><li class="l0"><a href="#uvq12-sr-s1">Installation</a></li><li class="l1"><a href="#uvq12-sr-s2">Avec npm</a></li><li class="l1"><a href="#uvq12-sr-s3">Avec pnpm</a></li><li class="l0"><a href="#uvq12-sr-s4">Utilisation</a></li><li class="l1"><a href="#uvq12-sr-s5">Options</a></li><li class="l0"><a href="#uvq12-sr-s6">Questions</a></li></ul></div></nav></div>Prompt pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Navigation
Voir tout : NavigationOù l’utiliser
Un sommaire pour les pages de documentation : le rail à sa gauche rentre vers l'intérieur pour les sous-titres et s'allume sur la portion qui correspond aux sections visibles. Pendant le défilement, la surbrillance grandit, rétrécit et glisse, et un clic sur une entrée y mène en douceur. Un court script trace le chemin à partir de la position réelle des liens.
La couleur principale règle la surbrillance et les liens actifs. Ajoute ou retire des sections et des niveaux dans les données, et garde des titres courts pour que chaque entrée tienne sur une ou deux lignes.