上部にメニューがあるBlazorテンプレート質問する

Question

Blazor のサイドバーは特別なものではありません。確認すると、MainLayout.razor次のクラスを持つ NavMenu コンポーネントへの参照が表示されますsidebar。

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

開けてみると、NavMenu.razorそれはただのBootstrap ナビゲーションバー再利用可能なコンポーネントに便利に梱包されています。

アップデート

Blazor は Bootstrap を使用するため、残りの問題は Blazor の問題ではなく、スタイルシートの問題になります。

Blazor テンプレートのスタイルシートは、この特定の Explorer のようなレイアウト (左側に垂直ナビゲーションバー、右側にメイン領域) 用に構築されました。色、サイズ、そして最も重要なフローは、これに合わせて設計されています。単一のスタイルクラスを変更するだけでは不十分です。

一方、レイザーページスタイルシートは、上部にメニュー、中央にコンテナーと行、フッターとヘッダーがある「クラシック」な Bootstrap の外観用に作成されました。つまり、新しい Razor Pages アプリケーションからスタイルシートとレイアウトを「借用」できるということです。

新しいプロジェクトを作成するdotnet new webapp
Blazor のsite.css最初の行以外のすべてを削除します。

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

Razor の内容をsite.cssBlazor にコピーします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;
  }
...

Blazor をShared\MainLayout.razorRazor の構造を模倣するように変更しますShared\_Layout.cshtml。

@inherits LayoutComponentBase


<header>
  <NavMenu />
</header>

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

PrivacyBlazor テンプレートにはページがないため、ここにはフッターはありません。

Shared\NavMenu.razorRazor テンプレートの構造とスタイルを使用するように変更します。<a>要素は要素に置き換える必要がありますNavLink。もう 1 つの注意点は、Razor のトグルがdata-toggle="collapse" data-targetBlazor では機能しない属性を介して機能することです。そのため、クリックハンドラーが必要になります。

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

クリックハンドラは、collapseRazorからコピーされた基本ナビゲーションバースタイルにクラスを追加または削除するだけです。

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

これにより、右側にトグルがある水平メニューが表示されます。

Answer 1