MudBlazor - Blazor Component Library

API

<MudElement>

Basic example

MudElement has an HtmlTag parameter that tells it which html element to render. It also accepts all possible html attributes and passes them on to the underlying element. Furthermore, you can set the parameters Class and Style for styling.

Visit us on GitHub

Visit us on 
<MudElement HtmlTag="a"
            Class="ms-1"
            Style="color:red;font-weight:bold;"
            href="https://github.com/MudBlazor/MudBlazor"
            target="blank"
            rel="noopener noreferrer">
    GitHub
</MudElement>

Interactive example

In this example the rendered html element changes dynamically. This is the main use-case of MudElement.

The underlying tag is 'a'

<MudElement HtmlTag="@htmlTag"
            Class="reset-style"
            href="https://mudblazor.com"
            value="@($"The underlying tag is '{htmlTag}'")">
    The underlying tag is '@htmlTag'
</MudElement>

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

@code{
    private string htmlTag = "a";
    private string[] tags = new[] { "a", "button", "input" };
    private int index = 0;

    private void ChangeTag()
    {
        index = (index + 1) % tags.Length;
        htmlTag = tags[index];
    }

}

<style>
.reset-style, .reset-style * {
    all: revert;
}
</style>