最近我在我的 Blazor WebAssembly 项目中使用 TailwindCSS 创建了一个自定义导航菜单。根据设备宽度,使用 Tailwind 隐藏和设备宽度 CSS 类显示 / 隐藏侧边栏。
在特定的设备宽度上,会显示一个菜单按钮,一个针对移动侧边栏的 div 始终被隐藏(使用 display: none),在 Blazor 中,我创建了一个 @onclick 函数,将移动侧边栏的样式设置为空(因此 display: none 被移除),反之亦然。
这一切都运作得很完美,但是这种方法存在一个问题。当点击菜单按钮时,移动侧边栏被显示,如果我现在增加设备宽度,菜单按钮会自动隐藏,移动侧边栏也会被隐藏,如果我再次减小设备宽度,则菜单按钮再次显示,但“打开”的侧边栏 div 也会被显示(因为在上一个更小的设备宽度上它也被打开了(display:none 的样式已被删除))。
行为应该是,当设备宽度增加时,移动侧边栏应始终保持其样式属性 display:none。
然而,据我所知,在 Blazor 中没有触发“更改设备宽度”的事件?有什么办法可以让它工作?
以下是一些图片和 HTML 代码,显示了“问题”:
正常尺寸视图:
移动视图:
移动侧边栏打开视图:
问题是当我从“移动侧边栏打开视图”返回到“正常大小视图”,然后再返回到“移动视图”时,它仍然会显示“移动侧边栏打开视图”(因为它仍然具有空的样式属性,相当于display: block)。
HTML / Blazor C# 代码:
在特定的设备宽度上,会显示一个菜单按钮,一个针对移动侧边栏的 div 始终被隐藏(使用 display: none),在 Blazor 中,我创建了一个 @onclick 函数,将移动侧边栏的样式设置为空(因此 display: none 被移除),反之亦然。
这一切都运作得很完美,但是这种方法存在一个问题。当点击菜单按钮时,移动侧边栏被显示,如果我现在增加设备宽度,菜单按钮会自动隐藏,移动侧边栏也会被隐藏,如果我再次减小设备宽度,则菜单按钮再次显示,但“打开”的侧边栏 div 也会被显示(因为在上一个更小的设备宽度上它也被打开了(display:none 的样式已被删除))。
行为应该是,当设备宽度增加时,移动侧边栏应始终保持其样式属性 display:none。
然而,据我所知,在 Blazor 中没有触发“更改设备宽度”的事件?有什么办法可以让它工作?
以下是一些图片和 HTML 代码,显示了“问题”:
正常尺寸视图:
![enter image description here](https://istack.dev59.com/znaey.webp)
![在此输入图片描述](https://istack.dev59.com/eLE4Y.webp)
HTML / Blazor C# 代码:
<div class="md:hidden" style=@mobileSideBarDisplay> <!-- Blazor C# string that sets the display to display: none, or removes the display entirely to show it)
<div class="fixed inset-0 flex z-40">
<!--
Off-canvas menu overlay, show/hide based on off-canvas menu state.
Entering: "transition-opacity ease-linear duration-300"
From: "opacity-0"
To: "opacity-100"
Leaving: "transition-opacity ease-linear duration-300"
From: "opacity-100"
To: "opacity-0"
-->
<div class="fixed inset-0">
<div class="absolute inset-0 bg-gray-600 opacity-75"></div>
</div>
<!-- The menu item with is Blazor onclick event -->
<div class="relative flex-1 flex flex-col max-w-xs w-full pt-5 pb-4 bg-gray-800">
<div class="absolute top-0 right-0 -mr-14 p-1">
<button class="flex items-center justify-center h-12 w-12 rounded-full focus:outline-none focus:bg-gray-600" aria-label="Close sidebar" @onclick="ToggleSidebar">
<svg class="h-6 w-6 text-white" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<! -- rest of HTML, left out for readability -->
</div>
</div>
</div>
<!-- Static sidebar for desktop -->
<div class="hidden md:flex md:flex-shrink-0">
<div class="flex flex-col w-64">
<! -- rest of HTML, left out for readability -->
</div>
</div>
<!-- Horizontal navbar with the Menu button -->
<div class="flex flex-col w-0 flex-1 overflow-hidden">
<div class="relative z-10 flex-shrink-0 flex h-16 bg-white shadow">
<!-- menu button becomes visible at a certain device-width > done with the TailWind CSS class md:hidden -->
<button class="px-4 border-r border-gray-200 text-gray-500 focus:outline-none focus:bg-gray-100 focus:text-gray-600 md:hidden" aria-label="Open sidebar" @onclick="ToggleSidebar">
<svg class="h-6 w-6" stroke="currentColor" fill="none" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h7" />
</svg>
</button>
<! -- rest of HTML, left out for readability -->
</div>
</div>
<!-- C# code for viewing mobile sidebar on Menu button press -->
@code {
private bool showMobileSideBar = false;
private string mobileSideBarDisplay => showMobileSideBar ? "" : "display: none;";
private void ToggleSidebar()
{
showMobileSideBar = !showMobileSideBar;
}
}