A Blazor interop library that integrates Masonry, the cascading grid layout library
dotnet add package Soenneker.Blazor.Masonry
- Register the interop within DI (
Program.cs
)
public static async Task Main(string[] args)
{
...
builder.Services.AddMasonry();
}
- Inject
IMasonryInterop
within yourApp.Razor
file
@using Soenneker.Blazor.Masonry.Abstract
@inject IMasonryInterop MasonryInterop
-
Use Bootstrap Rows and columns on the page (
<div class='row'></div>
). Other selectors can be passed into the interop,.row
is default. -
Initialize Masonry within your Razor code in the
OnAfterRenderAsync
override
protected override async Task OnAfterRenderAsync(bool firstRender)
{
if (firstRender)
await MasonryInterop.Init();
}