Hoppa till innehållet
LAYOUT · FREE

TagCloud

Visa ord i storlekar som följer deras vikt.

Ord i storlekar som följer deras vikt. Taggar kan vara länkar, knappar som väljer eller vanlig text.

Varför det hjälper

  • Storlek efter vikt
  • Länkar eller knappar
  • Snabb överblick

Var det passar

  • Ämnen
  • Nyckelord
  • Populära sökningar
Kontrollen TagCloud på en RayCraft-sida

Exempel

<TagCloud Label="Topics" Tags="_tags" Selected="_picked" OnTagClick="Pick" />
<p>@(_picked.Count == 0 ? "Click a tag to select it." : "Selected: " + string.Join(", ", _picked))</p>

@code {
    private readonly List<string> _picked = new();

    private readonly TagCloudItem[] _tags =
    {
        new("Blazor", 42), new("Accessibility", 31), new("Charts", 25), new("Forms", 18), new("Themes", 14),
        new("Localization", 11), new("Grids", 36), new("Scheduling", 9), new("Maps", 6), new("Reports", 12), new("Icons", 4)
    };

    private void Pick(TagCloudItem tag)
    {
        if (!_picked.Remove(tag.Text)) _picked.Add(tag.Text);
    }
}

Ett kort utdrag. Lägg till @using RayCraft.Blazor.Components på din sida och använd ett interaktivt renderingsläge.

Ingår i RayCraft Free. Fungerande exempel finns i GitHub-arkiv (MIT); det innehåller exempel- och demokod, inte bibliotekets kod.

Alla kontroller ยท Dokumentation