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
Visit our <MudElement HtmlTag="a" Class="ma-0" Style="color:red;font-weight:bold;" href="https://github.com/MudBlazor/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=""> 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
.
<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(); } }