c# - 如何使用 Tailwind CSS 在 Blazor 应用程序中单击后更改菜单项颜色

Question

我已开始使用 Tailwind CSS 构建 Blazor 服务器应用程序。我创建了具有新样式的水平菜单导航栏。但我错过了一件事。在默认 Blazor 模板中，当我单击菜单项时，它会更改背景颜色，直到单击其他菜单元素或更改路由组件页面 - 然后该页面菜单元素更改颜色，其他元素返回默认背景。我知道默认情况下它不会执行 bootstrap CSS 或 site.css。在代码中我找不到它。是在<script src="_framework/blazor.server.js"></script>完成的吗？在 _Host.cshtml 中？

我尝试了一些解决方案，例如这两个导航链接:

        ...
        <ul class="@($"{menuVisibleClass} flex flex-col bg-gray-400 px-4 py-2 md:flex md:flex-row md:bg-transparent")">
            <NavLink @onclick="ToggleActive" class="@($"nav-item {activeClass}" )"  href="/">Home</NavLink>
            <NavLink class="@($"nav-item focus:bg-purple-400")" tabindex="-1" href="/fetchdata">Counter</NavLink>      
        </ul>
    </div>
    
    @code
    {
        ...
        private bool _active = false;
        string activeClass = "";
    
        private void ToggleActive()
        {
            _active = !_active;
            activeClass = _active ? " bg-purple-400" : "";
        }
        ...
    }

但当然不是这样。我认为 JavaScript 中应该是这样的( w3schools link ):

       <div id="myDIV">
          <button class="btn">1</button>
          <button class="btn active">2</button>
          <button class="btn">3</button>
        </div>
        
        <script>
        var header = document.getElementById("myDIV");
        var btns = header.getElementsByClassName("btn");
        for (var i = 0; i < btns.length; i++) {
          btns[i].addEventListener("click", function() {
          var current = document.getElementsByClassName("active");
          current[0].className = current[0].className.replace(" active", "");
          this.className += " active";
          });
        }
        </script>

是否有类似的东西可以实现这一目标？我是否应该从每个 NAvLink 的 onclick 事件中手动传递 id，或者其他解决方案是否合适？

编辑:我发现信息( link )使用 Bootstrap NavLink 根据其 href 是否与当前 URL 匹配来切换事件 CSS 类。但对于由 Tailwind CSS 生成的事件类，我无法做到这一点。

@tailwind base;
@tailwind components;

.nav-item {
    @apply bg-gray-100 m-1 font-bold text-gray-700 px-4 py-2 rounded-sm shadow-lg;
}
.nav-item:hover {
    @apply bg-purple-300;
}
.nav-item:focus {
    @apply outline-none;
}

.nav-item:active {
    @apply bg-purple-500;
}

Answer 1

在 blazor 中，模板使用 NavLink 组件执行此操作。当基于当前导航位置以 href 开头或等于 href 的天气进行渲染时，NavLink 组件会在 anchor 对象上放置一个类。

在您的情况下，如果路由处于事件状态，您只需在元素上放置事件类即可。

<div id="myDIV">
          <button class="btn @GetActive("path1")">1</button>
          <button class="btn @GetActive("path2")">2</button>
          <button class="btn @GetActive("path3")">3</button>
</div>

@code {

    [Inject]
    NavigationManager NavigationManager { get; set; }

    protected override void OnInitialized() => NavigationManager.LocationChanged += (s, e) => StateHasChanged();

    bool IsActive(string href, NavLinkMatch navLinkMatch = NavLinkMatch.Prefix)
    {
        var relativePath = NavigationManager.ToBaseRelativePath(NavigationManager.Uri).ToLower();
        return navLinkMatch == NavLinkMatch.All ? relativePath == href.ToLower() : relativePath.StartsWith(href.ToLower());
    }

    string GetActive(string href, NavLinkMatch navLinkMatch = NavLinkMatch.Prefix) => IsActive(href, navLinkMatch) ? "active" : "";
}