MudHighlighter - MudBlazor

Use it in combination with other components

Example with a MudList

This is the first item

This is the second item

This is the third item

<MudPaper Elevation="0">
    <MudList>
        <MudListSubheader>
            <MudTextField @bind-Value="@searchTerm" AdornmentIcon="@Icons.Filled.Brush"
                          Adornment="Adornment.End" Immediate="true" Variant="Variant.Outlined" />
        </MudListSubheader>

        @foreach (var sentence in sentences)
        {
            <MudListItem @key="sentence" Icon="@Icons.Filled.Folder">
                <MudHighlighter Text="@sentence" HighlightedText="@searchTerm" />
            </MudListItem>
        }
    </MudList>
</MudPaper>

@code {
    string searchTerm = "item";
    IEnumerable<string> sentences = new List<string>
    {
        "This is the first item", "This is the second item", "This is the third item"
    };


}

Example with a MudTable

Name
Hydrogen
Helium
Lithium
Beryllium
Boron
Carbon
Nitrogen
Oxygen
Fluorine
Neon
Sodium
Magnesium
Aluminium
Silicon
Phosphorus
Sulfur
Chlorine
Argon
Potassium
Calcium
Scandium
Titanium
Vanadium
Chromium
Manganese
Iron
Cobalt
Nickel
Copper
Zinc
Gallium
Germanium
Arsenic
Selenium
Bromine
Krypton
Rubidium
Strontium
Yttrium
Zirconium
Niobium
Molybdenum
Technetium
Ruthenium
Rhodium
Palladium
Silver
Cadmium
Indium
Tin
Antimony
Tellurium
Iodine
Xenon
Caesium
Barium
Hafnium
Tantalum
Tungsten
Rhenium
Osmium
Iridium
Platinum
Gold
Mercury
Thallium
Lead
Bismuth
Polonium
Astatine
Radon
Francium
Radium
Rutherfordium
Dubnium
Seaborgium
Bohrium
Hassium
Meitnerium
Darmstadtium
Roentgenium
Copernicium
Nihonium
Flerovium
Moscovium
Livermorium
Tennessine
Oganesson

@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudTable Items="@Elements">
    <ToolBarContent>
        <MudText Typo="Typo.h6">Periodic Elements</MudText>
        <MudToolBarSpacer />
        <MudTextField @bind-Value="@searchTerm" Placeholder="Search" Adornment="Adornment.End" AdornmentIcon="@Icons.Filled.Search" IconSize="Size.Medium" Class="mt-0" Immediate="true"></MudTextField>
    </ToolBarContent>

    <HeaderContent>
        <MudTh>Name</MudTh>
    </HeaderContent>

    <RowTemplate>
        <MudTd DataLabel="Name">
            <MudHighlighter Text="@context.Name" HighlightedText="@searchTerm" />
        </MudTd>
    </RowTemplate>

</MudTable>

@code {
    private string searchTerm = "ch";
    private IEnumerable<Element> Elements = new List<Element>();

    protected override async Task OnInitializedAsync()
    {
        Elements = await httpClient.GetFromJsonAsync<List<Element>>("webapi/periodictable");
    } 
}

Give it the style you want

Style it with the Class or Style properties

This is the first item

This is the second item

This is the third item

<MudPaper Elevation="0">
    <MudList>
        <MudListSubheader>
            <MudTextField @bind-Value="@searchTerm" AdornmentIcon="@Icons.Filled.Brush"
                          Adornment="Adornment.End" Immediate="true" Variant="Variant.Outlined" />
        </MudListSubheader>

        @foreach (var sentence in sentences)
        {
            <MudListItem @key="sentence" Icon="@Icons.Filled.Folder">
                <MudHighlighter Class="mud-primary-text"
                             Style="background-color:transparent;font-weight:bold"
                             Text="@sentence"
                             HighlightedText="@searchTerm" />
            </MudListItem>
        }
    </MudList>
</MudPaper>

@code {
    string searchTerm = "it";
    IEnumerable<string> sentences = new List<string>
    {
        "This is the first item", "This is the second item", "This is the third item"
    };


}

Highlight full words or choose if it should be case sensitive

Set the UntilNextBoundary property to true if you want to highlight the text until the next regex boundary occurs, or the CaseSensitive property to decide if you want to perform a case sensitive highlight

Highlighted Text

MudBlazor is an ambitious Material Design component framework for Blazor with an emphasis on ease of use and clear structure.

MudLists are easily customizable and scrollable lists. Make them suit your needs with avatars, icons, or something like checkboxes.

Use mud-* classes to customize your MudBlazor components.

UntilNextBoundary

CaseSensitive

<MudTextField Style="max-width:250px" @bind-Value="@highlightedText" Immediate="true" Label="Highlighted Text" />
<MudPaper Class="pa-4 mt-4" Elevation="0">
    @foreach (var paragraph in paragraphs)
    {
        <MudText @key="paragraph" Class="ma-2">
            <MudHighlighter Text="@paragraph"
                         HighlightedText="@highlightedText"
                         UntilNextBoundary="@untilNextBoundary"
                         CaseSensitive="@caseSensitive"
                         Class="@(untilNextBoundary ? "pa-1 mud-elevation-2 mud-theme-primary":"")" />
        </MudText>
    }

</MudPaper>
<MudSwitch @bind-Checked="@untilNextBoundary" Label="UntilNextBoundary" Color="Color.Primary" />
<MudSwitch @bind-Checked="@caseSensitive" Label="CaseSensitive" Color="Color.Primary" />

@code{
    string highlightedText = "Mud";
    bool untilNextBoundary;
    bool caseSensitive;
    IEnumerable<string> paragraphs = new List<string>
{
        "MudBlazor is an ambitious Material Design component framework for Blazor with an emphasis on ease of use and clear structure.",
        "MudLists are easily customizable and scrollable lists. Make them suit your needs with avatars, icons, or something like checkboxes.",
        "Use mud-* classes to customize your MudBlazor components."
    };

}