Skip to content

Documentation(857238): Update Blazor Media Query documentation and namespaces #9821

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LeoLavanyaD wants to merge 1 commit into
base: hotfix/hotfix-v34.1.29
Choose a base branch
from
Open

Documentation(857238): Update Blazor Media Query documentation and namespaces #9821

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 11 additions & 9 deletions blazor/media-query/getting-started-with-server-app.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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 %}
Expand Down Expand Up @@ -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

<SfMediaQuery @bind-ActiveBreakPoint="activeBreakpoint"></SfMediaQuery>
<br />
Expand Down Expand Up @@ -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)
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)