Un índice dentro de la página que resalta el título que está en ese momento en la parte superior de la pantalla.
Por qué ayuda
- Sigue al lector
- Enlaces de salto
- Sencillo
Dónde encaja
- Documentación
- Artículos largos
- Páginas de ajustes
Ejemplo
<div style="display:flex;align-items:flex-start;gap:1.5rem">
<div id="spy-demo" style="flex:1;min-width:0">
@foreach (var heading in new[] { "Overview", "Install", "Usage", "Options", "FAQ" })
{
<h3 id="spy-@heading.ToLowerInvariant()">@heading</h3>
<p style="min-height:9rem">Scroll this page: the link of the heading at the top is highlighted in the list on the right. @heading heading text.</p>
}
</div>
<ScrollSpy Selector="#spy-demo h3[id]" Offset="120" />
</div>Un breve fragmento. Añade @using RayCraft.Blazor.Components a tu página y usa un modo de renderizado interactivo.
Incluido en RayCraft Free. Hay ejemplos que funcionan en el repositorio de GitHub (MIT); contiene código de ejemplo y demostración, no el código de la biblioteca.