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="" 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="" HighlightedText="" /> </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=""> <ToolBarContent> <MudText Typo="Typo.h6">Periodic Elements</MudText> <MudToolBarSpacer /> <MudTextField @bind-Value="" 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="" /> </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="" 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="" HighlightedText="" /> </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.
<MudTextField Style="max-width:250px" @bind-Value="" 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="" HighlightedText="" UntilNextBoundary="" CaseSensitive="" Class="@(untilNextBoundary ? "pa-1 mud-elevation-2 mud-theme-primary":"")" /> </MudText> } </MudPaper> <MudSwitch @bind-Checked="" Label="UntilNextBoundary" Color="Color.Primary" /> <MudSwitch @bind-Checked="" 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." }; }