使用 blazorise 切换图像按钮（或图标）

Question

我在 .NET 5 应用程序中使用 Blazorise 0.9.4.7。我想要一组切换按钮，例如带有 Eye 的按钮，单击时 Eye 会变成 EyeSlash。

我已经尝试了几个无效的替代方案...有什么建议吗？

<Icon @ref="ShowIcon" Clicked="e => Show(process)" Name="IconName.Eye" />

然后在cs

public void Show(Process project)
{
    process.ToggleShow();
    ShowProcessIcon.Name = process.Show ? IconName.EyeSlash : IconName.Eye;
}

我不应该在 Icon 本身之外为 Name 分配任何内容，这也没有用。

我也试过了

<Button Clicked="e => Show(process)">
    <ChildContent>
        <Icon Name="IconName.Eye" Visibility="@(process.Show ? Visibility.Visible : 
Visibility.Invisible)"/>
        <Icon Name="IconName.EyeSlash" Visibility="@(process.Show ? Visibility.Invisible : Visibility.Visible)"/>
    </ChildContent>
</Button>

但是也没用...

提前致谢。吉列尔莫.

Answer 1

最好用一个Icon，然后根据可见状态切换Name即可

<Button Clicked="@ToggleIcon">
    <Icon Name="@(visible ? IconName.Eye : IconName.EyeSlash)" />
</Button>
@code {
    bool visible;

    Task ToggleIcon()
    {
        visible = !visible;

        return Task.CompletedTask;
    }
}

此外，使用 Task-able 方法总是比 void 更好。这样 Blazor 就会自动为你触发 StateHasChanged。

使用 blazorise 切换图像按钮（或图标）

Toggle image button (or icon) with blazorise

blazor-server-side

blazorise