Aller au contenu
DONNÉES LÉGÈRES · FREE

VirtualList

Faites défiler des centaines de milliers d’éléments en douceur.

Faites défiler des centaines de milliers d’éléments en douceur. VirtualList ne dessine que les lignes visibles.

Pourquoi c’est utile

  • Fluide avec des listes énormes
  • Seulement les lignes visibles
  • Simple

Où il trouve sa place

  • Journaux
  • Catalogues
  • Sélections
Le contrôle VirtualList dans une page RayCraft

Exemple

<VirtualList TItem="string" Label="Log lines" Items="_lines" @bind-SelectedItem="_selected" Height="14rem" ItemHeight="34" />
<p>Selected: @(_selected ?? "none")</p>

<VirtualList TItem="Person" Label="People with a template" Items="_people" Height="12rem" ItemHeight="44" Selectable="false">
    <ItemTemplate Context="person">
        <strong>@person.Name</strong> <span>@person.Department</span>
    </ItemTemplate>
</VirtualList>

@code {
    private readonly List<string> _lines = Enumerable.Range(1, 200000).Select(n => $"Line {n:N0}: request processed").ToList();
    private readonly List<Person> _people = Enumerable.Range(0, 5000).Select(n => SampleData.People[n % SampleData.People.Count] with { Name = $"{SampleData.People[n % SampleData.People.Count].Name} {n + 1}" }).ToList();
    private string? _selected;
}

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.

Tous les contrôles ยท Documentation