syncfusion-blazor-media-query

Syncfusion Blazor Media Query

Syncfusion Blazor Media Query コンポーネントは、現在の画面サイズを検出し、定義されたブレークポイントに基づいてレイアウトの変更を実行します。これにより、あらゆるデバイスの画面サイズで最適なユーザーエクスペリエンスを提供する、レスポンシブで適応性の高いアプリケーションを構築できます。

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

次のような場合にこのスキルを使用します。

• さまざまな画面サイズ（モバイル、タブレット、デスクトップ）に適応するレスポンシブレイアウトを構築する
• 現在のデバイスのブレークポイントに基づいてコンポーネントを条件付きでレンダリングする
• 画面幅に応じて動的にスタイルを適用する
• Media Query を他の Syncfusion コンポーネント（Data Grid、Charts など）と統合する
• カスケード値を使用して、複数のページで再利用できるレスポンシブパターンを作成する

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

はじめに

📄 参照先： references/getting-started.md

• NuGet パッケージのインストール（Visual Studio、VSCode、.NET CLI）
• 名前空間のインポートとサービスの登録
• テーマのスタイルシート設定
• 最初のコンポーネントの実装

ブレークポイントとメディアクエリ

📄 参照先： references/breakpoints-and-media-queries.md

• 組み込みブレークポイント（Small、Medium、Large）の理解
• ActiveBreakpoint プロパティのバインド
• 組み込みブレークポイントの変更
• カスタムメディアブレークポイントの作成

レスポンシブレイアウトのパターン

📄 参照先： references/responsive-layout-patterns.md

• ActiveBreakpoint プロパティへのバインド
• 画面サイズに応じた条件付きレンダリング
• プロパティを動的に調整するパターン
• レイアウトの適応戦略

コンポーネントの統合

📄 参照先： references/component-integration.md

• MainLayout.razor を使用したコンポーネントの全体的な再利用
• カスケード値とパラメーター
• レスポンシブなテーブルを実現するための Data Grid との統合
• 複数コンポーネントのレイアウトに関するベストプラクティス

クイックスタートの例

@using Syncfusion.Blazor

<SfMediaQuery @bind-ActiveBreakPoint="currentBreakpoint"></SfMediaQuery>

<h3>Current Breakpoint: @currentBreakpoint</h3>

@if (currentBreakpoint == "Small")
{
    <p>You are viewing on a mobile device</p>
}
else if (currentBreakpoint == "Medium")
{
    <p>You are viewing on a tablet</p>
}
else
{
    <p>You are viewing on a desktop</p>
}

@code {
    private string currentBreakpoint { get; set; }
}

よくあるユースケース

1. レスポンシブな Data Grid

画面サイズに応じて列を非表示または表示し、行のレンダリングモードを調整します。

Small → Vertical row layout, hide non-essential columns
Medium → Adaptive mode enabled
Large → Horizontal layout, all columns visible

2. レスポンシブなナビゲーション

デスクトップではナビゲーション全体を表示し、モバイルではハンバーガーメニューを表示します。

Small → Collapse navigation to hamburger menu
Large → Show full navigation bar

3. 複数列のレイアウト

利用可能なスペースに応じてグリッドレイアウトを調整します。

Small → 1-column layout
Medium → 2-column layout
Large → 3-column layout

4. アプリ全体のレスポンシブ対応

アプリケーション全体を MainLayout.razor でラップし、Media Query をカスケードします。

MainLayout → Provides activeBreakpoint to all pages
Child Pages → Use CascadingParameter to access breakpoint
Result → Entire app responds to screen size changes

主なプロパティ

プロパティ	型	説明
ActiveBreakPoint	string	現在一致しているブレークポイント名（Small、Medium、Large、またはカスタム）
MediaBreakpoints	List	名前とメディアクエリ文字列を含むカスタムブレークポイント

よく使われるパターン

パターン 1：シンプルな条件付きレンダリング

<SfMediaQuery @bind-ActiveBreakPoint="bp"></SfMediaQuery>

@if (bp == "Small")
{
    <MobileLayout />
}
else if (bp == "Medium")
{
    <TabletLayout />
}
else
{
    <DesktopLayout />
}

パターン 2：コンポーネントプロパティの動的な設定

<SfMediaQuery @bind-ActiveBreakPoint="bp"></SfMediaQuery>

@{
    var pageSize = bp == "Small" ? 10 : 25;
    var allowPaging = bp != "Small";
}

<SfGrid PageSettings="@new GridPageSettings { PageSize = pageSize }">
    ...
</SfGrid>

パターン 3：レスポンシブなナビゲーション

<SfMediaQuery @bind-ActiveBreakPoint="bp"></SfMediaQuery>

@if (bp == "Small")
{
    <button @onclick="ToggleMenu">☰ Menu</button>
}
else
{
    <nav>Full Navigation Bar</nav>
}