Tesserae - Masonry

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();
        }
    }
}

API reference

class

Masonry

public class Masonry : IContainer<Masonry, IComponent>, IHasBackgroundColor, IHasMarginPadding, ISpecialCaseStyling

A masonry (Pinterest-style) layout that flows items of varying heights into columns of equal width.

Constructors

Constructor

Masonry

public Masonry(int columns, int gutter = 10)

Initializes a new instance of this class.

Properties

Property

Masonry.Background

public string Background { get ; set ; }

Gets or sets the CSS background of the component.

Property

Masonry.Margin

public string Margin { get ; set ; }

Gets or sets the CSS margin of the component.

Property

Masonry.Padding

public string Padding { get ; set ; }

Gets or sets the CSS padding of the component.

Property

Masonry.StylingContainer

public HTMLElement StylingContainer

Gets or sets the styling container.

Property

Masonry.PropagateToStackItemParent

public bool PropagateToStackItemParent

Gets or sets the propagate to stack item parent.

Methods

Method

Masonry.Add

public void Add(IComponent component)

Adds the given item to the component.

Method

Masonry.Clear

public virtual void Clear()

Clears the component's current state.

Method

Masonry.Replace

public void Replace(IComponent newComponent, IComponent oldComponent)

Replaces an existing item with a new one.

Method

Masonry.Remove

public void Remove(IComponent component)

Removes the given item from the component.

Method

Masonry.Render

public virtual HTMLElement Render()

Renders the component's root HTML element.

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

Masonry

Description

Usage

API reference

Constructors

Masonry

Properties

Masonry.Background

Masonry.Margin

Masonry.Padding

Masonry.StylingContainer

Masonry.PropagateToStackItemParent

Methods

Masonry.Add

Masonry.Clear

Masonry.Replace

Masonry.Remove

Masonry.Render

Samples

Masonry Layout with Dynamic Cards

See also

Referenced by