From 4050d7664e4f31a1b0860d3936c73157820b6663 Mon Sep 17 00:00:00 2001 From: LeoLavanyaD Date: Mon, 20 Jul 2026 00:19:27 +0530 Subject: [PATCH] 857238: Update Blazor Media Query documentation and namespaces Updated links and namespace references in the Blazor documentation. --- .../getting-started-with-server-app.md | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/blazor/media-query/getting-started-with-server-app.md b/blazor/media-query/getting-started-with-server-app.md index 286c1183fa..a10bb83928 100644 --- a/blazor/media-query/getting-started-with-server-app.md +++ b/blazor/media-query/getting-started-with-server-app.md @@ -55,7 +55,7 @@ cd BlazorApp {% endtabcontents %} -N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc#interactivity-location) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). ## Install the required Blazor packages @@ -115,12 +115,12 @@ dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} ## Add import namespaces -After the package is installed, open the **~/Components/_Imports.razor** file and import the `Syncfusion.Blazor` namespace. +After the package is installed, open the **~/Components/_Imports.razor** file and import the `Syncfusion.Blazor.Core` namespace. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} -@using Syncfusion.Blazor +@using Syncfusion.Blazor.Core {% endhighlight %} {% endtabs %} @@ -162,12 +162,12 @@ Open a Razor file located in the **~/Components/Pages/*.razor** (for example, ** N> If the interactivity location is set to `Per page/component`, define a render mode at the top of the razor file. (For example `InteractiveServer`). If the Interactivity is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. +The Media Query component monitors the viewport width and updates the ActiveBreakPoint value as the screen size changes between defined breakpoints such as Small, Medium, and Large. This value can be used to conditionally apply styles or modify the layout. In the following example, the [ActiveBreakPoint](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SfMediaQuery.html#Syncfusion_Blazor_SfMediaQuery_ActiveBreakpoint) parameter is used to determine the currently active breakpoint and dynamically update the layout based on the screen size. + {% tabs %} {% highlight razor tabtitle="Home.razor" %} -@rendermode InteractiveServer - -@using Syncfusion.Blazor +@using Syncfusion.Blazor.Core
@@ -434,9 +434,11 @@ dotnet run {% previewsample "https://blazorplayground.syncfusion.com/embed/BDrxjwDVpxkmgMAI?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Media Query Component](images/blazor-media-query.webp)" %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/MediaQuery). +N> You can refer to the [Blazor Media Query](https://www.syncfusion.com/blazor-components/blazor-media-query) feature tour to explore its key features and capabilities. You can also browse the [Blazor Media Query examples](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/MediaQuery) to learn how to render and configure the component. ## See also -1. [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -2. [Getting Started with Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) \ No newline at end of file +1. [Getting Started with Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +2. [Getting Started with Blazor Server App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +3. [Getting Started with Blazor WebAssembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +4. [Breakpoints in Blazor Media Query Component](https://blazor.syncfusion.com/documentation/media-query/break-points)