BlazorPro.BlazorSize 2.3.0

A JavaScript interop for Blazor used to detect the browser's screen size and perform Media Query tests. BlazorSize uses the DOM API `matchMedia` to test screen size. BlazorSize was created to allow Blazor components to render adaptively.

Install-Package BlazorPro.BlazorSize -Version 2.3.0
dotnet add package BlazorPro.BlazorSize --version 2.3.0
<PackageReference Include="BlazorPro.BlazorSize" Version="2.3.0" />
For projects that support PackageReference, copy this XML node into the project file to reference the package.
paket add BlazorPro.BlazorSize --version 2.3.0
The NuGet Team does not provide support for this client. Please contact its maintainers for support.

BlazorSize is a JavaScript interop library for Blazor that is used to detect the Browser's current size, change in size, and test media queries.

BlazorSize was designed to allow Razor Components to implement adaptive rendering. Handle mobile/desktop rendering changes at runtime with ease and complement your apps CSS media queries with programmatic work flows.

Add the NuGet package

Package Manager

Install-Package BlazorPro.BlazorSize 

CLI

dotnet add package BlazorPro.BlazorSize 

.csproj

<PackageReference Include="BlazorPro.BlazorSize" Version="2.*" />

Reference the JavaScript interop

Add the JavaScript interop to your application's index.html or _hosts.cshtml

    <!--<script src="_content/BlazorPro.BlazorSize/blazorSize.js" type="module"></script>-->
    <script src="_content/BlazorPro.BlazorSize/blazorSize.min.js"></script>

Import the namespace

Add a reference to the namespace in your _Imports.razor or at the top of a page.

@using BlazorPro.BlazorSize

Add the MediaQueryList

Add a MediaQueryList to your application's main layout or root. The MediaQueryList is responsponsible for communicating with all MediaQuery components in your app. The MediaQueryList component will consolidate redundant media queries and manage resources so that unused event listeners are disposed of properly.

<MediaQueryList>
    <div class="sidebar">
        <NavMenu />
    </div>

    <div class="main">
        <div class="top-row px-4">
            <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
        </div>

        <div class="content px-4">
            @Body
        </div>
    </div>
</MediaQueryList>

Add a MediaQuery and bind

Using the @bind-Matches directive we can easily bind to a browser's media query and respond to it.

@if (IsSmall)
{
    <WeatherCards Data="forecasts"></WeatherCards>
}
else
{
    <WeatherGrid Data="forecasts"></WeatherGrid>
}

@if (IsMedium)
{
    <span>Medium</span>
}

<MediaQuery Media="@Breakpoints.OnlyMedium" @bind-Matches="IsMedium" />
<MediaQuery Media="@Breakpoints.SmallDown" @bind-Matches="IsSmall" />

@code {
    WeatherForecast[] forecasts;

    bool IsMedium = false;
    bool IsSmall = false;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
    }
}

No-Code Templates

The MediaQuery component can also use templates instead of the @bind directive. Templates are useful for swapping out UI bits when the screen size changes.


<MediaQuery Media="@Breakpoints.SmallDown">
    <Matched>
        <WeatherCards Data="forecasts"></WeatherCards>
    </Matched>
    <Unmatched>
        <WeatherGrid Data="forecasts"></WeatherGrid>
    </Unmatched>
</MediaQuery>

BlazorSize is a JavaScript interop library for Blazor that is used to detect the Browser's current size, change in size, and test media queries.

BlazorSize was designed to allow Razor Components to implement adaptive rendering. Handle mobile/desktop rendering changes at runtime with ease and complement your apps CSS media queries with programmatic work flows.

Add the NuGet package

Package Manager

Install-Package BlazorPro.BlazorSize 

CLI

dotnet add package BlazorPro.BlazorSize 

.csproj

<PackageReference Include="BlazorPro.BlazorSize" Version="2.*" />

Reference the JavaScript interop

Add the JavaScript interop to your application's index.html or _hosts.cshtml

    <!--<script src="_content/BlazorPro.BlazorSize/blazorSize.js" type="module"></script>-->
    <script src="_content/BlazorPro.BlazorSize/blazorSize.min.js"></script>

Import the namespace

Add a reference to the namespace in your _Imports.razor or at the top of a page.

@using BlazorPro.BlazorSize

Add the MediaQueryList

Add a MediaQueryList to your application's main layout or root. The MediaQueryList is responsponsible for communicating with all MediaQuery components in your app. The MediaQueryList component will consolidate redundant media queries and manage resources so that unused event listeners are disposed of properly.

<MediaQueryList>
    <div class="sidebar">
        <NavMenu />
    </div>

    <div class="main">
        <div class="top-row px-4">
            <a href="http://blazor.net" target="_blank" class="ml-md-auto">About</a>
        </div>

        <div class="content px-4">
            @Body
        </div>
    </div>
</MediaQueryList>

Add a MediaQuery and bind

Using the @bind-Matches directive we can easily bind to a browser's media query and respond to it.

@if (IsSmall)
{
    <WeatherCards Data="forecasts"></WeatherCards>
}
else
{
    <WeatherGrid Data="forecasts"></WeatherGrid>
}

@if (IsMedium)
{
    <span>Medium</span>
}

<MediaQuery Media="@Breakpoints.OnlyMedium" @bind-Matches="IsMedium" />
<MediaQuery Media="@Breakpoints.SmallDown" @bind-Matches="IsSmall" />

@code {
    WeatherForecast[] forecasts;

    bool IsMedium = false;
    bool IsSmall = false;

    protected override async Task OnInitializedAsync()
    {
        forecasts = await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json");
    }
}

No-Code Templates

The MediaQuery component can also use templates instead of the @bind directive. Templates are useful for swapping out UI bits when the screen size changes.


<MediaQuery Media="@Breakpoints.SmallDown">
    <Matched>
        <WeatherCards Data="forecasts"></WeatherCards>
    </Matched>
    <Unmatched>
        <WeatherGrid Data="forecasts"></WeatherGrid>
    </Unmatched>
</MediaQuery>

Release Notes

2.3.0
     Fixed additional regressions from 2.2.0, update recommended.
     2.2.0
     Fixed possible regressions, update recommended.
     Updated Blazor dependencies.
     2.1.1
     Fixed MSBuild including *.json files breaking NuGet pkg.
     2.0.0
     Added MediaQueryList & MediaQuery components.
     1.2.2
     Fixes initalization issues with Client-Side Blazor
     1.2.0
     Full-release

NuGet packages (1)

Showing the top 1 NuGet packages that depend on BlazorPro.BlazorSize:

Package Downloads
Blazm.Components
A collection of Blazor components

GitHub repositories

This package is not used by any popular GitHub repositories.

Version History

Version Downloads Last updated
2.3.0 2,050 8/11/2020
2.0.2 5,516 4/21/2020
1.2.2 4,060 1/26/2020
1.2.1 127 1/23/2020
1.2.0 191 1/22/2020