Saltar al contenido
DISEÑO · FREE

TagCloud

Muestra palabras en tamaños que siguen su importancia.

Palabras en tamaños que siguen su peso. Los tags pueden ser enlaces, botones que seleccionan o texto simple.

Por qué ayuda

  • Tamaño según el peso
  • Enlaces o botones
  • Vista rápida

Dónde encaja

  • Temas
  • Palabras clave
  • Búsquedas populares
El control TagCloud en una página de RayCraft

Ejemplo

<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);
    }
}

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.

Todos los controles ยท Documentación