如何在 Bootstrap 中悬停时突出显示网格行并使其在单击时被选中？

Question

我正在 Blazor 中将数据加载到包含 3 列的网格中。对于网格结构，我使用了 Bootstrap 行和列。如果我需要在悬停时突出显示行并使用 onClick 事件保持选择行，那么实现它的最佳方法是什么？

以下是我填充数据的方法。

<div class="container-fluid">
    <div class="row">
        <div class="col">User Name</div>
        <div class="col">First Name</div>
        <div class="col">Last Name</div>
    </div>

    @foreach (var user in users)
    {
        <div class="row">
            <div class="col">@user.UserName</div>
            <div class="col">@user.FirstName</div>
            <div class="col">@user.LastName</div>
        </div>
    }
</div>

谢谢。

Answer 1

您需要维护行的选定状态。这是一个包装任何行类型的通用视图模型：

public class RowState<TItem>
{
    public RowState(TItem item) => Item = item;
    public TItem Item { get; set; }
    public bool IsSelected { get; set; }
}

然后对选定和悬停使用样式类：

.hover-row:hover {
    background-color: #0000ff33;
}

.selected-row {
    background-color: #0000ff77;
}

我使用采用视图模型的UserRow.razora将行分成其自己的组件。[Parameter]RowState<User>

这简化了处理单击事件的逻辑以及 css 类突出显示该行的逻辑。

UserRow.razor

<div class="row hover-row @CssClass" @onclick="RowClicked" >
    <div class="col">@User.UserName</div>
    <div class="col">@User.FirstName</div>
    <div class="col">@User.LastName</div>
</div>

@code {
    [Parameter]
    public RowState<User> UserRowState { get; set; }   

    private void RowClicked() => UserRowState.IsSelected = !UserRowState.IsSelected;

    private User User => UserRowState.Item;
    private bool IsSelected => UserRowState.IsSelected;
    private string CssClass => IsSelected ? "selected-row" : "";
}

重构你的原始代码：

<div class="container-fluid">
    <div class="row">
        <div class="col">User Name</div>
        <div class="col">First Name</div>
        <div class="col">Last Name</div>
    </div>

    @foreach (var user in UserRows)
    {
        <UserRow UserRowState=user />     
    }
</div>

@code {
    IEnumerable<RowState<User>> UserRows = User.DemoData
        .Select(user => new RowState<User>(user))
        .ToList();
}

这是一个有效的REPL