如何使用 Tailwind 在 Blazor 应用程序中单击后更改菜单项颜色 CSS
How to make menu item color change after click in Blazor app with Tailwind CSS
我已经开始使用 Tailwind CSS 构建 Blazor 服务器应用程序。我创建了具有新样式的水平菜单导航栏。但是我错过了一件事。在默认的 Blazor 模板中,当我单击菜单项时,它会更改背景颜色,直到单击其他菜单元素或更改路由组件页面 - 然后该页面菜单元素更改颜色,其他元素 return 为默认背景。我知道默认情况下它不会执行 bootstrap CSS 或 site.css。在代码中我找不到它。在_Host.cshtml中<script src="_framework/blazor.server.js"></script>
完成了吗?
我已经尝试了一些解决方案,因为这两个 NavLinks:
...
<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 class ].但是使用 Tailwind CSS 生成的活动 class 我做不到。
@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;
}
在 blazor 中,模板使用 NavLink
组件执行此操作。 NavLink
组件在根据当前导航位置以 href 开头或等于 href.
进行渲染时,在锚点对象上放置一个 class
在您的情况下,如果路线处于活动状态,您只需在元素上放置并激活 class。
<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" : "";
}
Blazor“将 navLink 转换为简单的 link”,因此可以定义一些类似
a.active{@apply bg-purple-500}
或者你的
.nav-item.active{@apply bg-purple-500}
或使用ActiveClass
并使用
.customActiveClass{@apply bg-purple-500}
但我无法想象如何使用 tailwinds
的伪类 :active
我已经开始使用 Tailwind CSS 构建 Blazor 服务器应用程序。我创建了具有新样式的水平菜单导航栏。但是我错过了一件事。在默认的 Blazor 模板中,当我单击菜单项时,它会更改背景颜色,直到单击其他菜单元素或更改路由组件页面 - 然后该页面菜单元素更改颜色,其他元素 return 为默认背景。我知道默认情况下它不会执行 bootstrap CSS 或 site.css。在代码中我找不到它。在_Host.cshtml中<script src="_framework/blazor.server.js"></script>
完成了吗?
我已经尝试了一些解决方案,因为这两个 NavLinks:
...
<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 class ].但是使用 Tailwind CSS 生成的活动 class 我做不到。
@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;
}
在 blazor 中,模板使用 NavLink
组件执行此操作。 NavLink
组件在根据当前导航位置以 href 开头或等于 href.
在您的情况下,如果路线处于活动状态,您只需在元素上放置并激活 class。
<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" : "";
}
Blazor“将 navLink 转换为简单的 link”,因此可以定义一些类似
a.active{@apply bg-purple-500}
或者你的
.nav-item.active{@apply bg-purple-500}
或使用ActiveClass
并使用
.customActiveClass{@apply bg-purple-500}
但我无法想象如何使用 tailwinds
的伪类:active