如何解决如何使用Blazor组件定位特定的div?
<div class="top-row px-3">
<b>App:<i>Title</i></b>
<!-- wait for it ... -->
<div class="menu">
Menu Bar Here
</div>
</div>
我将有几个MenuBar
组件,只需单击一下按钮即可将它们替换为div类menu
。如何使用Blazor组件定位该div?
更新
我想我找到了Chris Sainty的解决方案。
修改
为了阐明我打算完成的工作:
我有2个组成部分:
-
<MenuBar1 />
-
<MenuBar2 />
两者都包含不同的html来构造一个简单的菜单栏。我有导航链接,单击该导航链接将引发onClick
事件。
如何单击链接时可以换出 MenuBar 组件?
解决方法
Blazor不使用Javascript策略。 为此,您必须将HTML与代码混合。
<div class="top-row px-3">
<b>App:<i>Title</i></b>
<!-- wait for it ... -->
<div class="menu">
@if (Version == "v1")
{
<p>version 1</p>
}
else if (Version == "v2")
{
<p>version 2</p>
}
</div>
</div>
对于动态菜单,请在共享文件夹中添加文件。 文件名=类名 例如 MenuButton .razor
@inject NavigationManager navManager
<button @onclick="(e)=>navManager.NavigateTo(route)">@(label)</button>
@code {
[Parameter]
public string label { get; set; }
[Parameter]
public string route { get; set; }
}
要消耗该分量
<div class="top-row px-3">
<b>App:<i>Title</i></b>
<!-- wait for it ... -->
<div class="menu">
<MenuButton label="Choice 1" route="/route1" />
<MenuButton label="Choice 2" route="/route2" />
</div>
</div>
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。