twitter-bootstrap - 如何在悬停时突出显示网格行并使其在 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

您需要维护行的选定状态。这是包装任何行类型的通用 View 模型:

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.razor用[Parameter]这需要 RowState<User> View 模型。

这简化了处理点击事件的逻辑和 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