I known hot to use mudblazor / but im not a UI developer so if someone can point me a direction i would be very happy 😉
Lets say that i have a simple mudtext component
<MudTextField @bind-Value="TextValue" Label="Standard" Variant="Variant.Text"></MudTextField>
and i would need to create some wrapper around it that will add some icon after it with hisotry of the field (not allow it to be upper / lower / just after the component always)
so at the end i would like it to be as
<HistoryWrapper @icon="someMudblazorIcon" @onclick="someMethodThatWillOpenPopupWindowWithHistry">
<MudTextField @bind-Value="TextValue" Label="Standard" Variant="Variant.Text"></MudTextField>
</HistoryWrapper >
please point me god direction to do this? shoud i do this using renderfragment? ot some better way?
thanks and regards
There are several ways to do this. My prefered option is to inherit from the base control and add the extra functionality.
Here’s an example where I add an icon to MudTextField. The trick is to capture the base BuildRenderTree content into a RenderFragment delegate and then add it at the appropriate position in the child component’s markup. They key benefit in doing it this way is you don’t need to implement a lot of passthrough code.
@inherits MudTextField<T>
@typeparam T
<MudGrid>
<MudItem>
@_content
</MudItem>
<MudItem>
<MudIcon Icon="@Icons.Custom.Brands.Microsoft" Title="API" @onclick="this.OnClick"/>
</MudItem>
</MudGrid>
<div >
</div>
@code {
private RenderFragment? _content => (builder) => base.BuildRenderTree(builder);
private Task OnClick()
{
return Task.CompletedTask;
}
}
However, in your specific case, you can probably use the standard MudTextField control using the Adornment parameters and specifically OnAdornmentClick.
<MudTextField
@bind-Value="_string"
Label="Clearable Standard"
Variant="Variant.Text"
Clearable="true"
Adornment="Adornment.End"
AdornmentIcon="@Icons.Custom.Brands.MudBlazor"
AdornmentColor="Color.Primary"
OnAdornmentClick="this.OnAdornmentClicked"
Immediate="true" />
@code {
private string? _string;
private Task OnAdornmentClicked()
{
return Task.CompletedTask;
}
}
4