Een inhoudsopgave op de pagina die de kop markeert die momenteel bovenaan het scherm staat.
Waarom het helpt
- Volgt de lezer
- Sprongkoppelingen
- Eenvoudig
Waar het past
- Documentatie
- Lange artikelen
- Instellingenpagina's
Voorbeeld
<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>Een kort fragment. Voeg @using RayCraft.Blazor.Components toe aan je pagina en gebruik een interactieve rendermodus.
Inbegrepen in RayCraft Free. Werkende voorbeelden staan in de GitHub-repository (MIT); het bevat voorbeeld- en democode, niet de code van de bibliotheek.