Tesserae

Timeline

Description

The Timeline component provides a base for rendering vertical timelines. It arranges timeline items and alternates their placement (left/right) by default, but it also supports layout adjustments such as rendering all items on the same side or constraining the timeline width. Use this component when you need to visually represent events or steps in a vertical sequence in your UI.

Usage

Instantiate the Timeline component using the fluent interface provided by Tesserae.UI. You can add timeline items, adjust the timeline's maximum width, or force the timeline to render all items on the same side using the available methods.

Below is a minimal example showing how to create a simple Timeline with several text items:

timeline-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 TimelineExample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class TimelineExample : IComponent
    {
        public HTMLElement Render()
        {
            // Create a new Timeline and add some sample items
            var timeline = Timeline()
                .TimelineWidth(600.px())
                .SameSide(); // Optional: display all items on the same side

            // Adding timeline items dynamically
            for (int i = 1; i <= 5; i++)
            {
                timeline.Add(TextBlock($"Timeline item {i}"));
            }

            return timeline.Render();
        }
    }
}

Methods

SameSide()
Returns: Timeline
Description: Configures the timeline to display all timeline items on the same side rather than alternating left/right.
SameSideIf(int minWidthPixels)
Parameters:
- minWidthPixels (int): The minimum width in pixels at which the timeline will switch to the same side layout.
  Returns: Timeline
  Description: Dynamically applies the same side layout when the width of the timeline owner is less than or equal to the specified pixel value.
TimelineWidth(UnitSize maxWidth)
Parameters:
- maxWidth (UnitSize): The maximum width to be applied to the timeline.
  Returns: Timeline
  Description: Sets a maximum width for the timeline.
Add(IComponent component)
Parameters:
- component (IComponent): A timeline item component (such as a TextBlock) to be added to the timeline.
  Description: Adds a new item to the timeline and automatically recalculates its layout.
Clear()
Description: Removes all timeline items from the timeline.
Replace(IComponent newComponent, IComponent oldComponent)
Parameters:
- newComponent (IComponent): The component to add.
- oldComponent (IComponent): The component to be replaced. Description: Replaces an existing timeline item with a new one and re-establishes the layout order.

Properties

Background (string)
Get/Set: Gets or sets the background style of the timeline owner element.
Margin (string)
Get/Set: Gets or sets the margin style of the timeline owner element.
Padding (string)
Get/Set: Gets or sets the padding style of the timeline owner element.
IsSameSide (bool)
Get/Set: Gets or sets a value indicating whether all timeline items are rendered on the same side.

Samples

Basic Timeline with Alternating Items

This sample creates a timeline with alternating left/right positioned items. It adds five text items to the timeline.

timeline-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 AlternatingTimelineSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class AlternatingTimelineSample : IComponent
    {
        public HTMLElement Render()
        {
            var timeline = Timeline();
            for (int i = 1; i <= 5; i++)
            {
                timeline.Add(TextBlock($"Item {i}: Details about the timeline event."));
            }
            return timeline.Render();
        }
    }
}

Timeline with Custom Width and Same Side Layout

This sample demonstrates how to set a custom maximum width and force the timeline items to render on the same side.

timeline-3-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 CustomTimelineSample();
            document.body.style.overflow = "hidden";
            MountCenteredToBody(sampleComponent);
        }
    }

    public class CustomTimelineSample : IComponent
    {
        public HTMLElement Render()
        {
            var timeline = Timeline()
                .TimelineWidth(600.px())
                .SameSide();

            for (int i = 1; i <= 5; i++)
            {
                timeline.Add(TextBlock($"Event {i}: Timeline with same side layout."));
            }
            return timeline.Render();
        }
    }
}