ページレイアウト

PageLayoutコンポーネントは、ヘッダー、ナビゲーション、ボディ、フッターの4つの領域からなる構造化されたCSSグリッドレイアウトを提供します。ポータル全体で一貫したページ構造を作成するために使われます。

レイアウトエリア

レイアウトは以下の領域を持つCSSグリッドを使用しています。

• Header — 上部は幅全体にまたがっています。通常、保存・更新ボタンやページタイトル付きの MenuBar が含まれています。
• Navigation — ヘッダーの左列。サイドナビゲーションメニューに使用。巻物は本文とは独立して書かれます。
• Body — メインコンテンツエリア。独立してスクロールし、自動的にパディングを受け取る。
• Footer — 下の幅が全幅にわたっている。通常、著作権やステータスに関する情報が含まれています。

トグル領域

各エリアは HeaderVisible、 NavigationVisible、 FooterVisible のパラメータを使って表示または隠すことができます。非表示になると、そのエリアはグリッドレイアウトから完全に消されます。

スタイリング

各領域はカスタムスタイリング用の Class パラメータと Style パラメータ(例: HeaderClass、 HeaderStyle、 BodyClass、 BodyStyleなど)の両方をサポートしています。最上層コンテナは Class と Styleもサポートしています。

ネストレイアウト

PageLayoutを別のPageLayoutのBodyの中に入れ子にしてサブページレイアウトを作成することができます。子レイアウトは親を自動で検出し、ヘッダーの枠取りスタイリングを減らしたchild-layoutCSSクラスを適用します。

スクロールの挙動

本文部分はヘッダーやフッターとは独立してスクロールし、固定されています。ページ間を移動する際、本文は自動的にスクロールして上部に向かいます。ナビゲーションエリアも独立してスクロールします。

電話画面

768pxより狭い画面では、本文の横にナビゲーションのスペースがありません。Reactでは、 PageLayout がこれを処理します。ナビゲーションはヘッダーの最後にメニューボタンで置き換えられ、リンクをたどると閉じる引き出しで開きます。 collapseNavigationOnMobile={false} をサイドナビゲーションに設定してください。Blazorでは、レイアウトが選択します:プロジェクトテンプレートがワイドスクリーンの Navigation エリアにナビゲーションを配置し、狭い画面では引き出しにメニューボタンを追加します。