Tesserae

Masonry

Description

The Masonry component arranges its child components in a dynamic, grid-like layout where items are organized into columns of equal width. It is part of the Collections group and is ideal for displaying cards or items with variable height, much like a Pinterest-style layout. Use this component when you need a responsive, masonry-style grid that automatically lays out items in multiple columns with a configurable gutter.

Usage

Instantiate the Masonry component using the static helper methods provided by the Tesserae.UI class. Specify the number of columns and optional gutter space (in pixels) between items. The component automatically wraps each child in a container with styling adjustments.

Below is a minimal example demonstrating how to create a Masonry layout with several card components:

masonry-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new MasonryExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class MasonryExample : IComponent
    {
        public HTMLElement Render()
        {
            // Create the Masonry layout with 4 columns and a gutter of 10px (default)
            var masonry = Masonry(4).S();

            // Add multiple card components to the Masonry layout
            for (int i = 0; i < 10; i++)
            {
                // Creating a simple card with variable height
                var card = Card(
                    VStack().AlignItemsCenter().JustifyContent(ItemJustify.Center)
                          .Children(TextBlock($"Card {i}").NoWrap()))
                          .H(100 + (i % 3) * 50);
                masonry.Add(card);
            }

            return masonry.Render();
        }
    }
}

Methods

Add(IComponent component)
Adds a new component to the masonry layout.
• Parameter: component (IComponent) - The UI component to add.
Clear()
Clears all child components from the masonry layout and re-renders the layout.
Replace(IComponent newComponent, IComponent oldComponent)
Replaces an existing child component with a new component.
• Parameters:
- newComponent (IComponent): The new component to insert.
- oldComponent (IComponent): The old component to be replaced.
Remove(IComponent component)
Removes a component from the masonry layout.
• Parameter: component (IComponent) - The component to remove.
Render()
Renders and returns the HTML element associated with the Masonry layout.

Properties

Background
Get or set the background style of the Masonry container.
• Type: string
Margin
Get or set the margin style of the Masonry container.
• Type: string
Padding
Get or set the padding style of the Masonry container.
• Type: string
StylingContainer
Returns the internal HTMLElement used for applying specialized styling.
• Type: HTMLElement
PropagateToStackItemParent
Indicates whether the styling should propagate to the parent Stack item.
• Type: bool
• Default Value: false

Samples

Masonry Layout with Dynamic Cards

In this sample, a Masonry layout is created with 4 columns. Cards with varying heights are dynamically generated and added to the layout.

masonry-2-sample.js

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using H5.Core;
using Tesserae;
using static H5.Core.dom;
using static Tesserae.UI;

namespace Tesserae.Tests
{
    internal static class App
    {
        private static void Main()
        {
            var sampleComponent = new MasonryLayoutSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class MasonryLayoutSample : IComponent
    {
        public HTMLElement Render()
        {
            // Create a Masonry instance with 4 columns
            var masonry = Masonry(4).S();

            // Generate and add 100 cards with random heights
            var random = new Random();
            for (int i = 0; i < 100; i++)
            {
                // Each card is created with a base height plus a multiple of 50px
                var height = 100 + (int)(random.NextDouble() * 6) * 50;
                var card = Card(
                    VStack()
                        .AlignItemsCenter()
                        .JustifyContent(ItemJustify.Center)
                        .Children(TextBlock($"Card {i}").NoWrap()))
                    .H(height);

                masonry.Add(card);
            }

            return masonry.Render();
        }
    }
}

Referenced by

grid