syncfusion-blazor-media-query

# Syncfusion Blazor Media Query The Syncfusion Blazor Media Query component detects the current screen size and triggers layout changes based on defined breakpoints. This enables you to build responsive, adaptive applications that provide optimal user experiences across all device sizes. ## When to Use This Skill Use this skill when you need to: - **Build responsive layouts** that adapt to different screen sizes (mobile, tablet, desktop) - **Conditionally render components** based on the current device breakpoint - **Apply dynamic styling** based on screen width - **Integrate Media Query** with other Syncfusion components (Data Grid, Charts, etc.) - **Create reusable responsive patterns** across multiple pages using cascading values ## Documentation and Navigation Guide ### Getting Started 📄 **Read:** [references/getting-started.md](references/getting-started.md) - NuGet package installation (Visual Studio, VSCode, .NET CLI) - Namespace imports and service registration - Theme stylesheet configuration - First component implementation ### Breakpoints and Media Queries 📄 **Read:** [references/breakpoints-and-media-queries.md](references/breakpoints-and-media-queries.md) - Understanding built-in breakpoints (Small, Medium, Large) - ActiveBreakpoint property binding - Modifying built-in breakpoints - Creating custom media breakpoints ### Responsive Layout Patterns 📄 **Read:** [references/responsive-layout-patterns.md](references/responsive-layout-patterns.md) - Binding to ActiveBreakpoint property - Conditional rendering based on screen size - Dynamic property adjustment patterns - Layout adaptation strategies ### Component Integration 📄 **Read:** [references/component-integration.md](references/component-integration.md) - Global component reuse with MainLayout.razor - Cascading values and parameters - Integration with Data Grid for responsive tables - Best practices for multi-component layouts ## Quick Start Example ```razor @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; } } ``` ## Common Use Cases ### 1. Responsive Data Grid Hide or show columns based on screen size, adjust row rendering mode: ``` Small → Vertical row layout, hide non-essential columns Medium → Adaptive mode enabled Large → Horizontal layout, all columns visible ``` ### 2. Responsive Navigation Show full navigation on desktop, hamburger menu on mobile: ``` Small → Collapse navigation to hamburger menu Large → Show full navigation bar ``` ### 3. Multi-Column Layouts Adjust grid layout based on available space: ``` Small → 1-column layout Medium → 2-column layout Large → 3-column layout ``` ### 4. Global App Responsiveness Wrap entire application in MainLayout.razor with cascading Media Query: ``` MainLayout → Provides activeBreakpoint to all pages Child Pages → Use CascadingParameter to access breakpoint Result → Entire app responds to screen size changes ``` ## Key Properties | Property | Type | Description | |----------|------|-------------| | `ActiveBreakPoint` | string | The currently matching breakpoint name (Small, Medium, Large, or custom) | | `MediaBreakpoints` | List<MediaBreakpoint> | Custom breakpoints with name and media query string | ## Common Patterns ### Pattern 1: Simple Conditional Rendering ```razor <SfMediaQuery @bind-ActiveBreakPoint="bp"></SfMediaQuery> @if (bp == "Small") { <MobileLayout /> } else if (bp == "Medium") { <TabletLayout /> } else { <DesktopLayout /> } ``` ### Pattern 2: Dynamic Component Properties ```razor <SfMediaQuery @bind-ActiveBreakPoint="bp"></SfMediaQuery> @{ var pageSize = bp == "Small" ? 10 : 25; var allowPaging = bp != "Small"; } <SfGrid PageSettings="@new GridPageSettings { PageSize = pageSize }"> ... </SfGrid> ``` ### Pattern 3: Responsive Navigation ```razor <SfMediaQuery @bind-ActiveBreakPoint="bp"></SfMediaQuery> @if (bp == "Small") { <button @onclick="ToggleMenu">☰ Menu</button> } else { <nav>Full Navigation Bar</nav> } ```