MudBlazor

Community Support

Discord

GitHub Discussions

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

GitHub Discussions

Tools and resources

TryMudBlazor

Templates

Sponsor

Open Collective

MudElement

A primitive component that allows you to create your own components and render the html element you want in an interactive way.

See MudElement API for parameter documentation.

Basic example

MudElement accepts all attributes you want, plus an HtmlTag parameter that tells the component which html element to render, and Class and Style parameters for styling.

Visit our Github page
Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
Visit our
<MudElement HtmlTag="a"
            Class="ma-0"
            Style="color:red;font-weight:bold;"
            href="https://github.com/Garderoben/MudBlazor"
            target="blank"
            rel="noopener noreferrer">
    Github page
</MudElement>

Interactive example

Change the rendered html element in an interactive way:

This renders an h1 tag

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudElement HtmlTag="@htmlTag">
    This renders an <code style="color:red;">@htmlTag</code>  tag
</MudElement>

<MudButton OnClick="ChangeTag" Variant="Variant.Filled" Color="Color.Secondary">Change tag</MudButton>
@code{ 

    private string htmlTag="h1";
    private int hNumber = 2;

    private void ChangeTag()
    {
        htmlTag = "h" + hNumber;
        hNumber++;
        if (hNumber > 3) hNumber = 1;
    }
}

Passing a ref

You can pass an ElementReference to the root element that MudElement is going to render
Just make sure that you bind this reference to the Ref property of the MudElement.

Hide code example
Edit on TryMudBlazor
Copy Code
View the source on GitHub
<MudElement HtmlTag="button" @onclick="Focus" Style="padding: 4px 12px 4px 12px; background-color: #0067b8; color: #fff;">
    Click to focus
</MudElement>

@*this element is going to be focused through JS and its reference*@

<MudElement @bind-Ref="myRef" HtmlTag="input" Style="border: solid 1px #869E9E; padding: 0px 8px; height:28px;"/>
@code{
    ElementReference myRef = new ElementReference();

    async Task Focus()
    {
        //this js snippet does `document.querySelector(myRef).focus();`
       await myRef.FocusAsync();
    }
}
An error has occurred. This application may no longer respond until reloaded. Reload 🗙