diff --git a/blazor-toc.html b/blazor-toc.html index df9359ea5a..0ac00666ce 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -3010,6 +3010,8 @@
  • Breakpoints
    • +
  • Integration
    • +
  • Global Reuse
  • API Reference
    • diff --git a/blazor/media-query/images/blazor-media-query-reusable.gif b/blazor/media-query/images/blazor-media-query-reusable.gif new file mode 100644 index 0000000000..9125acbe45 Binary files /dev/null and b/blazor/media-query/images/blazor-media-query-reusable.gif differ diff --git a/blazor/media-query/images/blazor-media-query-with-grid.gif b/blazor/media-query/images/blazor-media-query-with-grid.gif new file mode 100644 index 0000000000..a56fb9476a Binary files /dev/null and b/blazor/media-query/images/blazor-media-query-with-grid.gif differ diff --git a/blazor/media-query/media-query-integration.md b/blazor/media-query/media-query-integration.md new file mode 100644 index 0000000000..d80f64fc54 --- /dev/null +++ b/blazor/media-query/media-query-integration.md @@ -0,0 +1,85 @@ +--- +layout: post +title: Media Query component Integration with other components | Syncfusion +description: Checkout and learn here all about how to integrate the Media Query with other component like Chart and much more details. +platform: Blazor +control: Media Query +documentation: ug +--- + +# Media Query with other components integration + +The Blazor Media Query component enhances the responsiveness of web application, allowing you to perform conditional rendering or styling to achieve a dynamic UI adpatable for various screen sizes. + +In the following code example, showcasing the Data Grid to demonstrate the dynamic updating of adaptive functionalities based on the matched media breakpoint using [ActiveBreakpoint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfMediaQuery.html#Syncfusion_Blazor_SfMediaQuery_ActiveBreakpoint) property. + +```cshtml + +@using Syncfusion.Blazor +@using Syncfusion.Blazor.Grids + + + +Active media name: @activeBreakpoint + +@{ + var renderingMode = RowDirection.Horizontal; + var enableAdaptiveUIMode = false; + var containerHeight = "100%"; + + if (activeBreakpoint == "Small") + { + enableAdaptiveUIMode = true; + renderingMode = RowDirection.Vertical; + containerHeight = "600px"; + } + else if (activeBreakpoint == "Medium") + { + enableAdaptiveUIMode = true; + } + else + { + enableAdaptiveUIMode = false; + } +} + +
    + + + + + + + + + + +
    + +@code { + private string activeBreakpoint { get; set; } + private List orders { get; set; } + + protected override void OnInitialized() + { + orders = Enumerable.Range(1, 75).Select(x => new Order() + { + OrderID = 1000 + x, + CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)], + Freight = 2.1 * x, + OrderDate = DateTime.Now.AddDays(-x), + }).ToList(); + } + + public class Order + { + public int? OrderID { get; set; } + public string CustomerID { get; set; } + public DateTime? OrderDate { get; set; } + public double? Freight { get; set; } + } +} + +``` + +![Blazor Media Query integration in Grid](images/blazor-media-query-with-grid.gif) \ No newline at end of file diff --git a/blazor/media-query/media-query-reusable.md b/blazor/media-query/media-query-reusable.md new file mode 100644 index 0000000000..44ff560364 --- /dev/null +++ b/blazor/media-query/media-query-reusable.md @@ -0,0 +1,86 @@ +--- +layout: post +title: Reuse of Blazor Media Query component | Syncfusion +description: Checkout and learn here all about how to use the Media Query component at the global level reuse on all pages and much more. +platform: Blazor +control: Media Query +documentation: ug +--- + +# Global level reuse of Blazor Media Query component + +You can globally reuse the Media Query component in any `razor` pages within web application to achieve a more flexible and responsive layout design. + +Define the Media Query component along with layout `Body` property within the `CascadingValue` component in **MainLayout.razor** page. + +{% tabs %} +{% highlight razor %} + +@inherits LayoutComponentBase + +
    +
    + +
    +
    +
    + About +
    +
    + + + @Body + +
    +
    +
    + +@code { + [Parameter] + public string activeBreakPoint { get; set; } +} + +{% endhighlight %} +{% endtabs %} + +If you are using .NET 8, configure the `@rendermode` in the `` section of the **~/Components/App.razor** file, as shown below: + +```html + + .... + + +``` + +In the below example, the `activeBreakPoint` was accessed in the **Home.razor** and **Counter.razor** files. + +{% tabs %} +{% highlight C# tabtitle="Home" hl_lines="3 10" %} + +The active breakpoint is @activeBreakPointValue +

    +
    Home Page
    + +@code { + [CascadingParameter] + public string activeBreakPointValue { get; set; } +} +.... + +{% endhighlight %} +{% highlight C# tabtitle="Counter" hl_lines="3 11" %} + +The active breakpoint is @activeBreakPointValue +

    +
    Counter Page
    + +@code { + [CascadingParameter] + public string activeBreakPointValue { get; set; } +} +.... + +{% endhighlight %} +{% endtabs %} + +![Reusable Blazor Media Query Component](images/blazor-media-query-reusable.gif) \ No newline at end of file