Une table des matières dans la page qui met en évidence le titre actuellement en haut de l’écran.
Pourquoi c’est utile
- Suit le lecteur
- Liens de saut
- Simple
Où il trouve sa place
- Documentation
- Longs articles
- Pages de paramètres
Exemple
<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 court fragment. Ajoutez @using RayCraft.Blazor.Components à votre page et utilisez un mode de rendu interactif.
Inclus dans RayCraft Free. Des exemples fonctionnels se trouvent dans le dépôt GitHub (MIT); il contient du code d’exemple et de démonstration, pas le code de la bibliothèque.