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.
Seiteninhalt mit mitlaufender Leseschiene
Ein seitliches Inhaltsverzeichnis, dessen Schiene sich mit der Einrückung biegt und beim Scrollen die gerade gelesenen Abschnitte hervorhebt.
Einstellungen
Code
<div class="uvq12-sr"><div class="sc" tabindex="0" aria-label="Dokumentation"><section id="uvq12-sr-s0"><h4>Einführung</h4><p>Diese Anleitung zeigt, wie du das Paket installierst und in fünf Minuten startklar machst. Vorkenntnisse brauchst du nicht.</p></section><section id="uvq12-sr-s1"><h4>Installation</h4><p>Du brauchst Node 20 oder neuer und einen Paketmanager. Nimm den, den dein Projekt schon nutzt.</p></section><section id="uvq12-sr-s2"><h5>Mit npm</h5><p><code>npm install lumen</code></p></section><section id="uvq12-sr-s3"><h5>Mit pnpm</h5><p><code>pnpm add lumen</code></p></section><section id="uvq12-sr-s4"><h4>Verwendung</h4><p>Importiere die Komponente und übergib ihr deine Daten. Sie funktioniert auf dem Server genauso wie im Browser.</p></section><section id="uvq12-sr-s5"><h5>Optionen</h5><p>Alle Optionen haben einen sinnvollen Standardwert. Ändere nur die, die du brauchst.</p></section><section id="uvq12-sr-s6"><h4>Fragen</h4><p>Wenn etwas nicht klappt, prüf zuerst die Node-Version. Danach den Cache leeren und es noch einmal versuchen.</p></section></div><nav class="tc" aria-label="Auf dieser Seite"><p>Auf dieser Seite</p><div class="rl"><svg aria-hidden="true"><path class="b"/><path class="h"/></svg><ul><li class="l0"><a href="#uvq12-sr-s0">Einführung</a></li><li class="l0"><a href="#uvq12-sr-s1">Installation</a></li><li class="l1"><a href="#uvq12-sr-s2">Mit npm</a></li><li class="l1"><a href="#uvq12-sr-s3">Mit pnpm</a></li><li class="l0"><a href="#uvq12-sr-s4">Verwendung</a></li><li class="l1"><a href="#uvq12-sr-s5">Optionen</a></li><li class="l0"><a href="#uvq12-sr-s6">Fragen</a></li></ul></div></nav></div>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Navigation
Alle ansehen: NavigationWofür du ihn nutzen kannst
Ein Inhaltsverzeichnis für Dokumentationsseiten: Die Schiene links davon knickt bei Unterüberschriften nach innen und hebt das Stück hervor, das zu den gerade sichtbaren Abschnitten passt. Beim Scrollen wächst, schrumpft und wandert die Markierung, und ein Klick auf einen Eintrag scrollt sanft dorthin. Ein kurzes Skript zeichnet den Pfad aus den echten Positionen der Links.
Die Hauptfarbe bestimmt Markierung und aktive Links. Füge Abschnitte und Ebenen in den Daten hinzu oder entferne sie, und halte die Überschriften so kurz, dass jeder Eintrag in ein bis zwei Zeilen passt.