Blazor模板，顶部带有菜单

Question

我已经从VS2019模板创建了一个新的blazor应用程序，该模板的菜单为侧边栏。我花了大部分时间来尝试使菜单像当前的MVC模板一样穿过页面顶部，但完全无法到达任何地方！

有没有人拥有从侧面和顶部移开导航栏的blazor模板？

Answer 1

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

BlazorTopMenu

Answer 2

Blazor的侧边栏没有什么特别的。如果进行检查，MainLayout.razor您会看到对NavMenu组件的引用，其sidebar类别为：

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

如果打开NavMenu.razor，则会看到它只是Bootstrap Navbar，很方便地包装在可重用的组件中。

更新资料

Blazor使用Bootstrap，它使其余问题成为样式表问题，而不是Blazor问题。

Blazor模板的样式表是为这种特定的类似于Explorer的布局而构建的-左侧为垂直导航栏，右侧为主要区域。颜色，大小和最重要的是流动是为此目的而设计的。修改单个样式类是不够的。

另一方面，Razor页面样式表是为“经典” Bootstrap外观而构建的，菜单位于顶部，容器和行位于中间，页脚和页眉。这意味着，我们可以从新的Razor Pages应用程序“借用”样式表和布局。

1. 使用创建一个新项目 dotnet new webapp
2. 删除Blazor中site.css除第一行以外的所有内容：

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

3. 将Razor's的内容复制site.css到Blazor's site.css。该文件应如下所示：

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

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

4. 修改Blazor's Shared\MainLayout.razor以模仿Razor's的结构Shared\_Layout.cshtml：

@inherits LayoutComponentBase


<header>
  <NavMenu />
</header>

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

由于PrivacyBlazor模板中没有页面，因此这里没有页脚。

5. 修改Shared\NavMenu.razor以使用Razor模板的结构和样式。<a>元素需要替换为NavLink元素。另一个棘手的部分是Razor data-toggle="collapse" data-target中的切换器通过在Blazor中不起作用的属性工作。这就是为什么需要单击处理程序的原因：

<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>

点击处理程序只是将collapse类添加或删除到从Razor复制的基本导航栏样式中

@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;
    }
}

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