# Timeline

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.

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:

using System;
using Tesserae;
using static Tesserae.UI;
using static H5.Core.dom;

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

• 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: TimelineDescription: 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: TimelineDescription: 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.

• 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.

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

using System;
using Tesserae;
using static Tesserae.UI;
using static H5.Core.dom;

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

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

using System;
using Tesserae;
using static Tesserae.UI;
using static H5.Core.dom;

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

• Stack
• Grid