Saltar al contenido
CONTENT · FREE

Highlighter

Marca las coincidencias de búsqueda dentro del texto para que los usuarios las encuentren al instante.

Marca cada aparición de un texto de búsqueda dentro de una cadena, sin distinguir mayúsculas salvo que lo pidas.

Por qué ayuda

  • Marca las coincidencias
  • Opción de mayúsculas
  • Sencillo

Dónde encaja

  • Resultados de búsqueda
  • Listas
  • Documentación
El control Highlighter en una página de RayCraft

Ejemplo

<SearchBox @bind-Value="_query" Label="Filter" Placeholder="Try 'ar'" SearchOnInput="true" OnSearch="@(_ => { })" />
<ul>
    @foreach (var country in _countries.Where(c => string.IsNullOrEmpty(_query) || c.Contains(_query, StringComparison.OrdinalIgnoreCase)))
    {
        <li><Highlighter Text="@country" Query="@_query" /></li>
    }
</ul>

@code {
    private string? _query = "ar";
    private readonly string[] _countries = ["Bulgaria", "Argentina", "Germany", "Norway", "Portugal", "Canada", "Spain"];
}

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