Basic example

MudElement accepts all attributes you want, plus an HtmlTag parameter, that tells the component the html element that must render, and a Class and Style parameters, to style it

Visit our Github page

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

<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

@inject Microsoft.JSInterop.IJSRuntime Js


<MudElement HtmlTag="button"
            @onclick="Focus"
            Style="padding: 16px 32px;
                   background-color: var(--mud-palette-tertiary-darken);
                   color: white;
                   font-size: 18px;
                   font-weight: bold;
                   border-radius: 8px;
                   box-shadow: 0 2px 7px var(--mud-palette-tertiary-darken);">
    Click to focus
</MudElement>

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

<MudElement @bind-Ref="myRef"
            HtmlTag="input"
            Style="border: 1px solid lightgray;
                   border-radius:8px;
                   padding: 16px 32px;
                   outline-color: var(--mud-palette-tertiary-darken);
                   outline-width:5px;"/>

@code{
    ElementReference myRef = new ElementReference();

    async Task Focus()
    {
        //this js snippet does `document.querySelector(myRef).focus();`
       await myRef.FocusAsync();
    }
}

MudElement

Basic example

Interactive example

This renders an h1 tag

Passing a ref

This renders an `h1` tag