MASA.Blazor

MASA.Blazor copied to clipboard

类似 爱心 、星星 收藏按钮，点击收藏，再次点击取消收藏。

实现为原始位置切换显示两个图标。

我们目前没有计划做这个组件，但是如果你有兴趣可以给我们提Pull Request。 我大概写了一个可用的：

• 组件 Toggle

<MButton Icon OnClick="@OnClick" @attributes="@Attributes">
    <MIcon>@Icon</MIcon>
</MButton>

@code {

    [Parameter]
    public string Icon { get; set; }

    [Parameter]
    public EventCallback<MouseEventArgs> OnClick { get; set; }

    [Parameter(CaptureUnmatchedValues = true)]
    public Dictionary<string, object> Attributes { get; set; } = new();

}

• 使用

<Toggle Icon="@icon" OnClick="@OnClick" Loading="@loading">
</Toggle>

@code {

    private string icon = "mdi-heart";
    private bool loading;

    private async Task OnClick()
    {
        // replace with your code
        loading = true;
        await Task.Delay(1000);
        loading = false;
        icon = icon == "mdi-heart" ? "mdi-star" : "mdi-heart";
    }