如何在 blazor 中突出显示选定的列表项？

Question

我在剃须刀中创建了一个简单的列表component.it 是一个带有 foreach 循环的简单 HTML 列表。

<ul>
           @foreach (var itm in matchingLocations)
           {
            <li>
                <div class="d-flex">

                    <div class="py-2 pr-2">
                        <i class="fas fa-map-marker-alt text-glow-1"></i>
                    </div>
                    <div class="py-2"><span class="sub-title-2">@itm.CodeName</span></div>
                   
                </div>

            </li>

            
            }
       
    </ul>

现在我需要将以下 2 个功能添加到列表中

当点击一个列表项时，它应该突出显示。
如果我们想点击另一个项目，当一个项目已经高亮时，当前高亮的项目应该不高亮并且点击的项目应该突出显示。

。我怎样才能使用 blazor 做到这一点？有知道这方面的朋友帮帮我吧

Answer 1

有很多方法可以做到这一点。这是一个展示其中之一的演示页面：

@page "/"
@foreach (var item in Countries)
{
    <div class="@DivCss(item) p-2" @onclick="() => SetSelect(item)">
        @item.Name
    </div>
}

@code {

    List<Country> Countries = new List<Country>
{
        new Country { Name = "Australia"},
        new Country { Name = "Spain"},
        new Country { Name = "Croatia"}
    };

    List<Country> SelectedCountries = new List<Country>();

    class Country
    {
        public string Name { get; set; }
    }

    bool IsSelected(Country country)
        => SelectedCountries.Any(item => item == country);

    string DivCss(Country country)
        => IsSelected(country) ? "bg-success text-white" : "bg-light";

    void SetSelect(Country country)
    {
        if (IsSelected(country))
            SelectedCountries.Remove(country);
        else
            SelectedCountries.Add(country);
    }
}

如何在 blazor 中突出显示选定的列表项？

How to highlight selected list item in blazor?

css

razor

blazor