[英]How to make a dropdown menu in Blazor
I am trying to make a simple dropdown menu in my Blazor app.我正在尝试在我的 Blazor 应用程序中制作一个简单的下拉菜单。 It is declared in my
Header.razor
as shown below:在我的
Header.razor
中声明如下图:
<div class="header-sign">
<div class="dropdown" id="toggleDropdown">
<button class="button-md" type="button">
<i data-feather="user"></i>
<span>Personal cab</span>
</button>
<ul class="dropdown-list">
<li class="dropdown-item">
<a class="dropdown-link" href="">
<p class="text-md">Cabinet</p>
</a>
</li>
<li class="dropdown-item">
<a class="dropdown-link" href="">
<p class="text-md">Sign out</p>
</a>
</li>
</ul>
</div>
</div>
The dropdown can be triggered via JS script like this:下拉菜单可以通过 JS 脚本触发,如下所示:
$("#toggleDropdown").on("mouseenter", () => {
$(this).find(".dropdown-list").addClass("is-active");
});
I have my header declared in MainLayout.razor
like shown below:我在 MainLayout.razor 中声明了我的
MainLayout.razor
,如下所示:
@inherits LayoutComponentBase
<Header></Header>
<main class="main">
@Body
</main>
<Footer></Footer>
And this approach doesn't work.而且这种方法行不通。
Everything changes if I replace the above-mentioned Header.razor
with razor page Header.cshtml
with exactly the same markup and render it in _Layout.cshtml
in such a way:如果我用完全相同的标记将上面提到的
Header.razor
替换为 razor 页面Header.cshtml
并以这种方式在_Layout.cshtml
中呈现它,一切都会改变:
@await Html.PartialAsync("Header")
Looks like the above markup can only work in *.cshtml
files but cannot in *.razor
and I don't quiet understand the reason.看起来上面的标记只能在
*.cshtml
文件中工作,但不能在*.razor
中工作,我不太明白原因。 Why does it behave this way?为什么会这样?
Huge thanks to Mohammed Alwedaei, I figured out how to solve my question.非常感谢 Mohammed Alwedaei,我想出了如何解决我的问题。 His remark that the dropdown should be activated on a click and not on a hover really solved it to me.
他说下拉菜单应该在点击时激活,而不是在 hover 上,这真的解决了我的问题。
We should just keep state of a dropdown list and toggle classes of it in a bit tricky way (with a ternary operator @(isActive? "is-active": "")
).我们应该只保留下拉列表的 state 并以一种有点棘手的方式切换它的类(使用三元运算符
@(isActive? "is-active": "")
)。 To make the dropdown work as intended, we should define @onclick
attribute and also @onblur
to disable it when user clicks somewhere else.为了使下拉菜单按预期工作,我们应该定义
@onclick
属性和@onblur
以在用户单击其他地方时禁用它。
The code below works just fine:下面的代码工作得很好:
<div class="header-sign">
<div class="dropdown" id="toggleDropdown">
<button @onclick="Show" @onblur="Hide" class="button-md" type="button">
<i data-feather="user"></i>
<span>Personal cab</span>
</button>
<ul class="dropdown-list @(isActive ? "is-active" : "")">
<li class="dropdown-item">
<a class="dropdown-link" href="/cabinet">
<p class="text-md">Cabinet</p>
</a>
</li>
<li class="dropdown-item">
<a @onclick="LogOutAsync" class="dropdown-link" href="">
<p class="text-md">LogOut</p>
</a>
</li>
</ul>
</div>
</div>
@code {
private bool isActive = false;
private void Show()
{
isActive = true;
}
private void Hide()
{
isActive = false;
}
private async Task LogOutAsync()
{
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.