The BlazorLayout project provides components to handle layout in your Blazor applications.

The BlazorLayout project provides Blazor components to help you to write your layout with dedicated basic layout elements. Behind the scene it is generating standard HTML code so it can easily be used in combination of other design system resources.

Behind the scene, it is making a massive use of CSS Grid.

The idea of this project is that with a set of simple layout components we can cover a big part of the needs.

Don't hesitate to post issues, pull requests on the project or to fork and improve the project.

Package	Nuget.org
SoloX.BlazorLayout

BlazorLayout project is written by Xavier Solau. It's licensed under the MIT license.

You can checkout this Github repository or you can use the NuGet packages:

Install using the command line from the Package Manager:

Install-Package SoloX.BlazorLayout -version 1.0.0-alpha.7

Install using the .Net CLI:

dotnet add package SoloX.BlazorLayout --version 1.0.0-alpha.7

Install editing your project file (csproj):

<PackageReference Include="SoloX.BlazorLayout" Version="1.0.0-alpha.7" />

Once the package is referenced, you can add in you project _Imports.razor file all using directives to use the components.

@using SoloX.BlazorLayout.Core
@using SoloX.BlazorLayout.Containers
@using SoloX.BlazorLayout.Containers.Dock
@using SoloX.BlazorLayout.Containers.Grid
@using SoloX.BlazorLayout.Layouts

Make sure that your application project CSS file defines the box-sizing property to border-box:

* {
    box-sizing: border-box;
}

And you should also set width and height to 100% for the html and body elements:

html, body {
    width: 100%;
    height: 100%;
}

Note that you can find code examples in this repository at this location: src/examples.

The ResponsiveLayout component can be used in your MainLayout.razor file. It provides a responsive main layout implementation with a navigation menu, header, footer and outline view.

Here is a screen from one of the repository example:

The component is designed with several parameters:

The small navigation view is used depending on the size of the display view.

All containers are based on a AContainer abstract component that provides a Fill parameter. It allows you to define how the component is going to be sized:

• None: Sized to fit its own content;
• Horizontal: Sized to fill its parent space horizontally;
• Vertical: Sized to fill its parent space vertically;
• Full: Sized to fill its parent space both vertically and horizontally;

Here is the list of available containers:

All panels are based on a APanel abstract component that provides a set of parameters like Class, Style, Id that are basically mapped to the corresponding HTML element attributes.

Note that all container are also based on APanel abstract component.

Full list of APanel parameters:

• Class: The HTML element class attribute;
• Style: The HTML element style attribute;
• Id: The HTML element id attribute;
• ChildContent: The panel child RenderFragment;

The APanel also provides a ElementReference property that is referencing the HTML element associated to the panel instance once initialized and rendered.

Here is the list of available panels:

Let's say that you need to follow the size changed event of a component in your page. The project provides you with some help to setup such observer: the IResizeObserverService.

In order to use it in your application, you have to register the services in your Startup.cs file or your Program.cs. A ServiceCollection extension method is available for that purpose:

using SoloX.BlazorLayout;

// ...

// Service collection setup method.
public void ConfigureServices(IServiceCollection services)
{
    services.AddBlazorLayout();
}

Once it is setup, you can inject the IResizeObserverService in your components.

For example we can define a ResizeCallBack page that will register a resize callback with a BoxContainer:

@page "/ResizeCallBack"

@inject IResizeObserverService sizeObserverService

@implements IResizeCallBack

@implements IAsyncDisposable

<BoxContainer @ref="ContainerReference" Fill="Fill.Full">
    @* ... *@
</BoxContainer>

Note that:

• We use @ref in order to get a reference on the component instance.
• We implement IResizeCallBack in order to use this as callback in the IResizeObserverService.
• We implement IAsyncDisposable in order to dispose callback resources.

Here is the C# part of the component:

    // The BoxContainer reference used in the @ref property.
    private BoxContainer ContainerReference { get; set; }

    // The call back disposable returned by the callback registration.
    private IAsyncDisposable callBackDisposable;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // Register the callback to the IResizeObserverService once the ContainerReference is set
            // after the first render.
            // Note that it returns a disposable callback object that must be disposed to properly
            // unregister the service resources.
            callBackDisposable = await sizeObserverService
                .RegisterResizeCallBackAsync(this, ContainerReference.ElementReference);
        }

        await base.OnAfterRenderAsync(firstRender);
    }

    // Implement the IResizeCallBack interface.
    public ValueTask ResizeAsync(int width, int height)
    {
        // CallBack code....

        return ValueTask.CompletedTask;
    }

    // Dispose the callback resources.
    public async ValueTask DisposeAsync()
    {
        await callBackDisposable.DisposeAsync();
    }