Mudblazor

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective


Switch to Blazor wasm
Toggle light/dark theme
GitHub repository
Toggle right-to-left/left-to-right

Community Support

Discord

Gitter

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

MudHighlighter

Use this utility component to highlight parts of the text.

See MudHighlighter API for parameter documentation.

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

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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

Periodic Elements
Name
Hydrogen
Helium
Hafnium
Hassium
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
@using System.Net.Http.Json
@using MudBlazor.Examples.Data.Models
@inject HttpClient httpClient

<MudTable Items="@GetElements()">
    <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 = "H";
    private IEnumerable<Element> _elements = new List<Element>();

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

    private IEnumerable<Element> GetElements() => _elements.Where(e => e.Name.Contains(_searchTerm));
}

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

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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

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.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<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."
    };

}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙