スポンサーリンク
スポンサーリンク

Blazor Server でヘッダーを1列にする

.NET CoreBlazor Server 5.0C#Visual Studio 2019

Blazor Server のテンプレートだと、ヘッダーが2列になっていて、それだと業務系WEBサイトでは使い勝手が悪いので、ヘッダーを1列にした。
ソースコードはGitHubで公開しています。

・修正前

・修正後

ソースコード構成

ソースコード変更内容を解説

Shared/MainLayout.razor

・headerの<div>と、pageの<div>を分離することで、上部をヘッダーのみ表示している。
・pageの<div>内に、sidebarとmainの<div>を設けることで、左にサイドバー、右にメインページを表示している。

Shared/NavMenu.razor

・元々あったサイドバー内のヘッダーは削除。

wwwroot/css/site.css

・.header-wrapper、.headerParent を追加。

Visual Studio プロジェクト

今回使った Visual Studio プロジェクト テンプレートは、Blazor Server 5.0 の認証無し、HTTPS無しです。

コメント

タイトルとURLをコピーしました