Class SfMediaQuery

The Blazor Media Query component allows developers to create responsive layouts. The component tracks changes in the browser size and notifies when the browser size matches the specified media query. The MediaBreakpoint class is used to store information about each media query breakpoint, including the Breakpoint name and the MediaQuery itself. The ActiveBreakpoint property returns the Breakpoint of the MediaBreakpoint in the MediaBreakpoints collection that matches the current browser size. This allows developers to easily create responsive layouts that adapt to different screen sizes and device types.

Inheritance
System.Object
SfBaseComponent
SfMediaQuery
Inherited Members
Namespace: Syncfusion.Blazor
Assembly: Syncfusion.Blazor.dll
Syntax
public class SfMediaQuery : SfBaseComponent
Examples
@if (String.IsNullOrEmpty(activeBreakpoint))
{
    <label>Loading...</label>
}
else
{
    @if(activeBreakpoint == "Small")
    {
        <button>Mobile</button>
    }
    else
    {
        <button>Desktop</button>
    }
}
<SfMediaQuery @bind-ActiveBreakpoint="@activeBreakpoint"></SfMediaQuery>
@code {
    private string activeBreakpoint;
}

Constructors

SfMediaQuery()

Declaration
public SfMediaQuery()

Fields

Large

Gets or sets the predefined media query ((min-width: 1024px) for Large break point. If MediaBreakpoints is not specified, this default media query will be used by SfMediaQuery.

Declaration
public static MediaBreakpoint Large
Field Value
Type Description
MediaBreakpoint

Medium

Gets or sets the predefined media query ((min-width: 768px) for Medium break point. If MediaBreakpoints is not specified, this default media query will be used by SfMediaQuery.

Declaration
public static MediaBreakpoint Medium
Field Value
Type Description
MediaBreakpoint

Small

Gets or sets the predefined media query ((max-width: 768px) for Small break point. If MediaBreakpoints is not specified, this default media query will be used by SfMediaQuery.

Declaration
public static MediaBreakpoint Small
Field Value
Type Description
MediaBreakpoint

Properties

ActiveBreakpoint

Gets the Breakpoint of the MediaQuery in MediaBreakpoints collection that matches with the current browser size. Based on the ActiveBreakpoint, developers can easily create responsive layouts that adapt to different screen sizes and device types.

Declaration
public string ActiveBreakpoint { get; set; }
Property Value
Type Description
System.String

A string value that represents the Breakpoint of the MediaQuery in MediaBreakpoints collection that matches with the browser size. The default value is null.

MediaBreakpoints

Gets or sets the collection of MediaBreakpoint that contains the Breakpoint and MediaQuery. ActiveBreakpoint is set when a MediaQuery matches with the current browser size from this collection.

Declaration
public List<MediaBreakpoint> MediaBreakpoints { get; set; }
Property Value
Type Description
System.Collections.Generic.List<MediaBreakpoint>

A collection of MediaBreakpoint that contains the Breakpoint and MediaQuery. The defaul value is empty collection.
Remarks

If MediaBreakpoints is not specified, SfMediaQuery will use built-in collection of MediaBreakpoint that contains Small, Medium and Large media queries.

OnBreakpointChanged

Gets or sets the event that is triggered when the ActiveBreakpoint is changed.

Declaration
public EventCallback<BreakpointChangedEventArgs> OnBreakpointChanged { get; set; }
Property Value
Type Description
Microsoft.AspNetCore.Components.EventCallback<BreakpointChangedEventArgs>

An event call back function. 

Methods

OnInitializedAsync()

Method invoked when the component is ready to start.

Declaration
protected override Task OnInitializedAsync()
Returns
Type Description
System.Threading.Tasks.Task

A System.Threading.Tasks.Task representing any asynchronous operation.
Overrides

OnParametersSetAsync()

Declaration
protected override Task OnParametersSetAsync()
Returns
Type Description
System.Threading.Tasks.Task