Blazor

  • Code Examples
  • Upgrade Guide
  • User Guide
  • Demos
  • Support
  • Forums
  • Download
Class SfMediaQuery

    Show / Hide Table of Contents

    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
    SfBaseComponent.OnAfterRenderAsync(Boolean)
    SfBaseComponent.Dispose()
    SfBaseComponent.Dispose(Boolean)
    SfBaseComponent.OnObservableChange(String, Object, Boolean, NotifyCollectionChangedEventArgs)
    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
    SfBaseComponent.OnInitializedAsync()

    OnParametersSetAsync()

    Declaration
    protected override Task OnParametersSetAsync()
    Returns
    Type Description
    System.Threading.Tasks.Task
    Back to top Generated by DocFX
    Copyright © 2001 - 2023 Syncfusion Inc. All Rights Reserved