.net core 顶部带有菜单的Blazor模板

我已经从VS2019模板创建了一个新的blazor应用程序，该模板将菜单作为侧边栏。我花了一上午的大部分时间试图让菜单像当前的MVC模板一样出现在页面顶部，但完全没有成功

---

有没有人有一个blazor模板，从侧面和顶部移除导航栏？

blazor中的侧栏并不是什么特别的东西。如果您选中

MainLayout.razor

，您将看到对带有

侧栏的导航菜单组件的引用

类：

<div class="sidebar">
    <NavMenu />
</div>

将Razor的

site.css

的内容复制到Blazor的

site.css

。该文件应如下所示：

修改Blazor的

Shared\MainLayout.razor

以模仿razor的

Shared\\u Layout.cshtml

中的结构：

单击处理程序只是将

collapse

类添加或删除到从Razor复制的基本navbar样式中

@code {
    bool collapseNavMenu = true;

    string baseMenuClass = "navbar-collapse d-sm-inline-flex flex-sm-row-reverse";

    string NavMenuCssClass => baseMenuClass + (collapseNavMenu ? " collapse" : "");

    void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}

这将产生一个水平菜单，右侧有一个切换器：

---

我昨天刚刚经历了同样的事情。非常令人沮丧。我摆脱了侧边栏，把菜单放在最上面。不幸的是，在我这样做之后，在小型设备中，当菜单在单击切换按钮后展开时，品牌、切换按钮和菜单都垂直居中于展开区域，人们只希望在该区域中显示菜单项。品牌和切换按钮应保持在最上面一行

今天早上，我看到一篇帖子（）建议修改Blazor模板中包含的引导css。要获得默认行为，您需要将其（和site.css）从_Host.cshtml中注释出来，并将其替换为正式的引导css文件

当我这样做的时候，菜单开始几乎正常工作。奇怪的格式消失了。我现在的问题是，在小型设备上，选择菜单后，菜单不会折叠。我假设这与Blazor处理UI更改的方式有关。换句话说，由于菜单内容在进行选择后没有更改，因此不会重新渲染菜单

---

如果我找到了折叠菜单的方法，我会把它贴在这里。

按照@Panagiotis Kanavos的建议，我成功地为顶部菜单栏创建了一个基本模板/解决方案：

---

Blazor使用HTML和CSS。该菜单与Angular（或任何SPA）模板故意使用的菜单几乎没有区别。水平菜单来自Bootstrap，它不是MVC特有的，它只是一个菜单。如果我没记错的话，Blazor也使用引导功能。这是真的，但是要想让侧边栏越过顶部到目前为止是不可能的。而且，这不仅仅是“删除”引导功能4导航的情况，因为当前提供的模板与razor组件集成。@Calanus真正的问题是整个网站的风格和布局。即使从NavMenu内的navbar中删除所有类，布局也会受到主要内容的

main

和

toprows

样式类的影响。

site.css

中指定的布局用于垂直导航栏，其余用于内容。您应该从适合您的站点的新样式表开始。只是为了进行实验，您可以清除

site.css

文件，或者复制一个现有的样式表。如果您再次尝试，请插入一个MVC导航栏并替换css。已取得进展，但没有链接可点击。blazor中还有一些其他的东西在影响它。“删除blazor的site.css中的所有内容，除了第一行：“我不能强调这一点，不要删除main.css中的所有内容，你必须保留“#blazor error ui”和“#blazor error ui.discover”css规则。如果您不保留这些，那么在开发应用程序时，您将不会看到任何异常发生时的通知。如果使用服务器端blazor，这并不糟糕，因为VS调试器通常会中断，但在WASM模型中，除非保留错误ui样式，否则在浏览器代码中不会看到异常。我很高兴不仅仅是我！我认为您可以使用标准模板中的razor代码来折叠菜单-我将在本周内检查它-最后-一个格式良好的工作示例。谢谢你的链接。我不知道为什么把菜单放在最上面这么重要。这正是我想要的。我有一个垂直主导航栏，并使用您的示例在组件内创建了一个子菜单水平导航栏。删除了“固定顶”类，效果非常好。谢谢。很好的例子，我认为这个答案应该被接受。我实际上使用@Panagiotis Kanavos Advice创建了github示例，所以他有这么多观点是公平的。我在遇到同样的问题时遇到了这个答案-我很好奇你是不是像Pangiotis所描述的那样从

dotnet new webapp

开始的？我试图重现相同的结果，但没有得到相同的结果。。

@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

a.navbar-brand {
    white-space: normal;
    text-align: center;
    word-break: break-all;
  }
...

@inherits LayoutComponentBase


<header>
  <NavMenu />
</header>

<div class="container">
    <main role="main" class="pb-3">
        @Body
    </main>
</div>

<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
    <div class="container">
        <a class="navbar-brand" href="">blazornav</a>
        <button class="navbar-toggler" type="button" @onclick="ToggleNavMenu">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="@NavMenuCssClass"  @onclick="ToggleNavMenu">
            <ul class="navbar-nav flex-grow-1">
                <li class="nav-item">
                    <NavLink class="nav-link text-dark" href="" Match="NavLinkMatch.All">
                        <span class="oi oi-home" aria-hidden="true"></span> Home
                    </NavLink>                
                </li>
                <li class="nav-item">
                    <NavLink class="nav-link text-dark" href="counter">
                        <span class="oi oi-plus" aria-hidden="true"></span> Counter
                    </NavLink>
                </li>
                <li class="nav-item">
                    <NavLink class="nav-link text-dark" href="fetchdata">
                        <span class="oi oi-list-rich" aria-hidden="true"></span> Fetch data
                    </NavLink>
                </li>
            </ul>
        </div>
    </div>
</nav>

@code {
    bool collapseNavMenu = true;

    string baseMenuClass = "navbar-collapse d-sm-inline-flex flex-sm-row-reverse";

    string NavMenuCssClass => baseMenuClass + (collapseNavMenu ? " collapse" : "");

    void ToggleNavMenu()
    {
        collapseNavMenu = !collapseNavMenu;
    }
}