Tesserae - Timeline

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

API reference

class

Timeline

public class Timeline : IContainer<Timeline, IComponent>, IHasBackgroundColor, IHasMarginPadding

A Timeline component that displays events in chronological order.

Constructors

Constructor

Timeline

public Timeline()

Initializes a new instance of the Timeline class.

Properties

Property

Timeline.Background

public string Background { get ; set ; }

Gets or sets the background color of the timeline.

Property

Timeline.Margin

public string Margin { get ; set ; }

Gets or sets the margin of the timeline.

Property

Timeline.Padding

public string Padding { get ; set ; }

Gets or sets the padding of the timeline.

Property

Timeline.IsSameSide

public bool IsSameSide { get ; set ; }

Gets or sets whether the timeline items should all be on the same side.

Methods

Method

Timeline.Add

public void Add(IComponent component)

Adds a component to the timeline.

Parameters

component: The component to add.

Method

Timeline.Add

public void Add(IComponent component, string color)

Adds a component to the timeline with a specified color.

Parameters

component: The component to add.
color: The color of the timeline circle.

Method

Timeline.SameSide

public Timeline SameSide()

Sets the timeline to display items on the same side.

Returns

The current instance of the type.

Method

Timeline.SameSideIf

public Timeline SameSideIf(int minWidthPixels)

Sets the timeline to display items on the same side if the width is less than the specified minimum width.

Parameters

minWidthPixels: The minimum width in pixels.

Returns

The current instance of the type.

Method

Timeline.TimelineWidth

public Timeline TimelineWidth(UnitSize maxWidth)

Sets the maximum width of the timeline.

Parameters

maxWidth: The maximum width.

Returns

The current instance of the type.

Method

Timeline.Clear

public void Clear()

Clears all items from the timeline.

Method

Timeline.Render

public HTMLElement Render()

Renders the timeline.

Returns

The rendered HTMLElement.

Method

Timeline.Replace

public void Replace(IComponent newComponent, IComponent oldComponent)

Replaces an existing component in the timeline with a new one.

Parameters

newComponent: The new component.
oldComponent: The old component to be replaced.

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

Timeline

Description

Usage

API reference

Constructors

Timeline

Properties

Timeline.Background

Timeline.Margin

Timeline.Padding

Timeline.IsSameSide

Methods

Timeline.Add

Parameters

Timeline.Add

Parameters

Timeline.SameSide

Returns

Timeline.SameSideIf

Parameters

Returns

Timeline.TimelineWidth

Parameters

Returns

Timeline.Clear

Timeline.Render

Returns

Timeline.Replace

Parameters

Samples

Basic Timeline with Alternating Items

Timeline with Custom Width and Same Side Layout

See also