blazor mudblazor 扩展组件？使顶部的标签可点击？或者在它后面添加按钮？

Question

我知道很喜欢使用 mudblazor / 但我不是 UI 开发人员，所以如果有人能给我指明方向，我会很高兴;)

假设我有一个简单的泥文本组件

<MudTextField @bind-Value="TextValue" Label="Standard" Variant="Variant.Text"></MudTextField>

我需要在它周围创建一些包装器，在它后面添加一些带有字段历史的图标（不允许它始终位于组件的上部/下部/紧随组件之后） 所以最后我希望它是这样的

<HistoryWrapper @icon="someMudblazorIcon" @onclick="someMethodThatWillOpenPopupWindowWithHistry">
    <MudTextField @bind-Value="TextValue" Label="Standard" Variant="Variant.Text"></MudTextField>
</HistoryWrapper >

请给我指出这样做的方向吗？我应该使用 renderfragment 来做到这一点吗？有更好的办法吗？

感谢和问候

Answer 1

有几种方法可以做到这一点。 我的首选选择是继承基本控件并添加额外的功能。

这是我向

MudTextField

添加图标的示例。 技巧是将基本

BuildRenderTree

内容捕获到

RenderFragment

委托中，然后将其添加到子组件标记中的适当位置。 这样做的主要好处是您不需要实现大量直通代码。

@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;
    }
}

但是，在您的具体情况下，您可以使用标准

MudTextField

控件，使用

Adornment

参数，特别是

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;
    }
}