syncfusion-blazor-dashboard-layout

Syncfusion Blazor でのダッシュボードレイアウトの実装

Syncfusion Blazor Dashboard Layout コンポーネントは、レスポンシブでインタラクティブなダッシュボードを構築するための包括的なソリューションを提供します。このスキルでは、ドラッグ＆ドロップ、サイズ変更、状態の永続化、画面サイズへの適応などの高度な機能を備えた、柔軟なパネルベースのレイアウトの作成方法を説明します。

このスキルを使用する場面

次のような場合に、このスキルを使用してください。

• ダッシュボードやグリッドベースのパネルレイアウトを作成する
• ドラッグ＆ドロップでユーザーがパネルを並べ替えられるようにする
• サイズ制約を設けてパネルのサイズを変更できるようにする
• 画面サイズに応じて適応するレスポンシブレイアウトを構築する
• ユーザーのレイアウト設定を保存および復元する
• ヘッダーや動的コンテンツを含む複雑なマルチパネル表示を作成する
• パネルのスタイルや外観をカスタマイズする
• 動的なシナリオでパネルの重なりを防止する

コンポーネントの概要

SfDashboardLayout は、パネルをサイズ変更可能かつドラッグ可能なコンテナーとして扱い、設定可能なグリッド上に配置するグリッドベースのダッシュボードを作成します。主な機能は次のとおりです。

• グリッドベースの配置。Row および Column プロパティを使用します
• 柔軟なサイズ設定。セル単位で幅（SizeX）と高さ（SizeY）を指定します
• サイズ制約。MinSizeX、MaxSizeX、MinSizeY、MaxSizeY プロパティを使用します
• ドラッグ＆ドロップ。衝突の処理とパネルの自動移動に対応します
• サイズ変更。複数の方向に対応した、カスタマイズ可能なサイズ変更ハンドルを使用します
• フローティングパネル。空きスペースを埋めるように自動的に上へ移動します
• 状態の永続化。localStorage に保存し、プログラムから保存、読み込み、リセットできます
• テンプレート。ヘッダーと動的コンテンツに使用できます
• レスポンシブデザイン。モバイル向けに調整するメディアクエリのブレークポイントに対応します
• セルベースのグリッド。列数、セルの縦横比、間隔を設定できます

ドキュメントとナビゲーションガイド

はじめに 📄 references/getting-started.md

• WebAssembly アプリおよびサーバーアプリでのダッシュボードレイアウトの設定
• NuGet パッケージのインストール（Syncfusion.Blazor.Layouts、Syncfusion.Blazor.Themes）
• 名前空間と Syncfusion サービスの設定
• スタイルシートとスクリプトリソースの追加
• 基本パネルを使った最初のダッシュボードの作成

コアレイアウトの設定 📄 references/panel-positioning-sizing.md

• パネルの行と列の位置指定
• SizeX および SizeY によるパネル寸法の設定
• 最小／最大サイズの制約（MinSizeX、MaxSizeX、MinSizeY、MaxSizeY）
• パネル ID の管理と一意な識別
• セルベースのグリッドシステムについて

インタラクティブ機能 📄 references/drag-drop-functionality.md

• ドラッグアンドドロップによる並べ替えの有効化
• 衝突の自動検出とパネルの移動
• DraggableHandle プロパティによるドラッグハンドルのカスタマイズ
• ドラッグハンドルの対象指定に CSS セレクターを使用
• ドラッグ操作中のプレースホルダー表示

📄 references/resizing-floating-panels.md

• AllowResizing プロパティによるパネルのサイズ変更の有効化
• ResizableHandles プロパティによるサイズ変更方向のカスタマイズ
• AllowFloating によるフローティングパネルで空きスペースを活用
• フローティング動作とパネルの自動上方移動

グリッドの設定とスタイル 📄 references/grid-configuration-styling.md

• Columns プロパティによるグリッドの設定
• CellAspectRatio プロパティによるセルの縦横比
• CellSpacing プロパティによるセル間隔（行と列の間隔）
• ShowGridLines プロパティによるグリッドの表示
• パネルのヘッダー、コンテンツ、背景の CSS カスタマイズ
• CSS クラス：.e-panel-header、.e-panel-content、.e-resize

レスポンシブデザインとアダプティブデザイン 📄 references/responsive-adaptive-design.md

• さまざまな画面サイズに対応する組み込みのレスポンシブサポート
• カスタムブレークポイント用の MediaQuery プロパティ
• 低解像度時の自動スタッキングレイアウト（既定値は 600px）
• モバイルフレンドリーな設定
• 手動設定なしでのレスポンシブ動作

パネルのテンプレートとヘッダー 📄 references/panel-templates-headers.md

• パネルのタイトルとヘッダー用の HeaderTemplate
• パネルのメインコンテンツ用の ContentTemplate
• カスタムスタイル用の CssClass プロパティ
• パネル内での HTML とコンポーネントのレンダリング
• 空のスペースのレンダリング防止

状態管理と永続化 📄 references/state-persistence.md

• EnablePersistence プロパティによる永続化の有効化
• 自動保存／復元のための localStorage 連携
• 現在の状態を文字列として取得する GetPersistDataAsync
• 保存した状態を復元する SetPersistDataAsync
• 保存した状態を消去する ResetPersistDataAsync
• 永続化に必要なコンポーネント ID

API リファレンス 📄 references/api-reference.md

• SfDashboardLayout コンポーネント API の完全なドキュメント
• 型、既定値、受け入れ可能な値を含む全 14 個のプロパティ
• パラメーター、戻り値の型、説明を含む全 11 個のメソッド
• 引数の型と使用例を含む全 8 個のイベント
• DashboardLayoutPanel コンポーネントのプロパティ（全 17 個）
• プログラムによるパネルデータ設定用の PanelModel クラスのプロパティ
• 完全な例を含むイベント引数クラス
• 8 つの方向値すべてを含む ResizableHandle 列挙型
• すべてのプロパティとメソッドの動作するコード例
• 関連ドキュメントへの相互参照

高度なシナリオとトラブルシューティング 📄 references/advanced-scenarios.md

• 動的なレンダリングにおいて一意な ID を使ってパネルの重なりを防止
• すべてのパネルを同じ位置に配置する設定
• 複雑なレイアウトのパフォーマンス最適化
• 複雑なマルチパネル表示パターン
• よくある問題と特殊なケースのトラブルシューティング

クイックスタートの例

@using Syncfusion.Blazor.Layouts

<SfDashboardLayout CellSpacing="@(new double[]{10, 10})" Columns="5">
    <DashboardLayoutPanels>
        <DashboardLayoutPanel>
            <HeaderTemplate><div>Panel 1</div></HeaderTemplate>
            <ContentTemplate><div>Your content here</div></ContentTemplate>
        </DashboardLayoutPanel>
        <DashboardLayoutPanel SizeX=2 SizeY=2 Column=1>
            <HeaderTemplate><div>Panel 2</div></HeaderTemplate>
            <ContentTemplate><div>Your content here</div></ContentTemplate>
        </DashboardLayoutPanel>
        <DashboardLayoutPanel SizeY=2 Column=3>
            <HeaderTemplate><div>Panel 3</div></HeaderTemplate>
            <ContentTemplate><div>Your content here</div></ContentTemplate>
        </DashboardLayoutPanel>
    </DashboardLayoutPanels>
</SfDashboardLayout>

<style>
    .e-panel-header {
        background-color: rgba(0, 0, 0, .1);
        text-align: center;
    }
    .e-panel-content {
        text-align: center;
        margin-top: 10px;
    }
</style>

一般的なパターン

基本的な3パネルダッシュボード

<SfDashboardLayout CellSpacing="@(new double[]{10, 10})" Columns="6">
    <DashboardLayoutPanels>
        <DashboardLayoutPanel SizeX=2>
            <HeaderTemplate><div>Metrics</div></HeaderTemplate>
            <ContentTemplate><div>250,000</div></ContentTemplate>
        </DashboardLayoutPanel>
        <DashboardLayoutPanel SizeX=2 Column=2>
            <HeaderTemplate><div>Users</div></HeaderTemplate>
            <ContentTemplate><div>45,200</div></ContentTemplate>
        </DashboardLayoutPanel>
        <DashboardLayoutPanel SizeX=2 Column=4>
            <HeaderTemplate><div>Revenue</div></HeaderTemplate>
            <ContentTemplate><div>$125,000</div></ContentTemplate>
        </DashboardLayoutPanel>
    </DashboardLayoutPanels>
</SfDashboardLayout>

ドラッグ＆ドロップとサイズ変更に対応

<SfDashboardLayout CellSpacing="@(new double[]{10, 10})" 
    Columns="6" 
    AllowDragging="true" 
    AllowResizing="true">
    
</SfDashboardLayout>

モバイル向けレスポンシブレイアウト

<SfDashboardLayout CellSpacing="@(new double[]{10, 10})" 
    Columns="5" 
    MediaQuery="max-width:600px">
    
</SfDashboardLayout>

状態の永続化パターン

<SfDashboardLayout ID="dashboard" EnablePersistence="true" CellSpacing="@(new double[]{10, 10})">
    
</SfDashboardLayout>

主なプロパティのリファレンス

プロパティ	目的	一般的な値
Columns	1行あたりのグリッドセル数	4, 5, 6, 12
Row	パネルの垂直位置（0始まり）	0, 1, 2, ...
Column	パネルの水平位置（0始まり）	0, 1, 2, ...
SizeX	セル単位でのパネル幅	1, 2, 3, ...
SizeY	セル単位でのパネル高	1, 2, 3, ...
MinSizeX/MinSizeY	最小サイズの制約	1, 2, ...
MaxSizeX/MaxSizeY	最大サイズの制約	null（無制限）または特定の値
CellSpacing	パネル間の間隔（行、列）	[10, 10], [20, 20]
CellAspectRatio	高さと幅の比率	1, 2, 0.5
AllowDragging	パネルの配置変更を有効化	true, false
AllowResizing	パネルのサイズ変更を有効化	true, false
AllowFloating	空きスペースを自動的に埋める	true, false
DraggableHandle	ドラッグ領域のCSSセレクター	".e-panel-header"
ResizableHandles	サイズ変更の方向	"e"（東）、"south-east"など
MediaQuery	モバイル向けブレークポイント	"max-width:600px"
EnablePersistence	状態をlocalStorageに保存	true, false
ID	一意のコンポーネントID（永続化に必要）	"dashboard", "layout1"

ユースケースの例

データ分析ダッシュボード ダッシュボードグリッドにチャート、グリッド、指標パネルを配置します。ユーザーが重要な指標に集中できるよう、サイズ変更を有効にします。

管理コントロールパネル 複数のSyncfusionコンポーネント（グリッド、チャート、フォーム）をパネル内に組み合わせます。レイアウトを永続化して、管理者の設定を記憶します。

SEOモニタリングダッシュボード ダッシュボードグリッドを使って、分析指標とチャートを表示します。パネルの移動に合わせてスペースを自動的に最適化できるよう、フローティングパネルを使用します。

パーソナルワークスペース ドラッグ＆ドロップ、サイズ変更、永続化を使って、ユーザーがレイアウトを自由にカスタマイズし、理想的なワークスペースを作成できるようにします。

モバイル向けレスポンシブダッシュボード デスクトップ向けに設計し、MediaQueryのブレークポイントを使って、モバイルでは1列に積み重ねたレイアウトに自動的に適応させます。