Soenneker.Blazor.Masonry 2.1.463

Soenneker.Blazor.Masonry

A Blazor interop library that integrates Masonry, the cascading grid layout library

Installation

dotnet add package Soenneker.Blazor.Masonry

Usage

1. Register the interop within DI (Program.cs)

public static async Task Main(string[] args)
{
    ...
    builder.Services.AddMasonry();
}

2. Inject IMasonryInterop within your App.Razor file

@using Soenneker.Blazor.Masonry.Abstract
@inject IMasonryInterop MasonryInterop

3. Use Bootstrap Rows and columns on the page (<div class='row'></div>). Other selectors can be passed into the interop, .row is default.

4. Initialize Masonry within your Razor code in the OnAfterRenderAsync override

protected override async Task OnAfterRenderAsync(bool firstRender)
{
	if (firstRender)
		await MasonryInterop.Init();
}