Time Line

import { AXTimeLineModule } from '@acorex/components/time-line';

Timeline component provides a visual representation of events or milestones in chronological order, often presented in a linear or vertical layout. This component helps users easily track progress or understand the sequence of events over time, making it ideal for applications that need to showcase historical data, project timelines, or key milestones in a clear and engaging way.

Overview

In this section, you can test different options of this component and see the output in real time

January 1, 2024

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse dolor deleniti cupiditate nostrum id. Ipsum error enim ipsa, libero velit voluptate porro dolor quaerat. Similique quis qui voluptatum odio unde.

January 10, 2024

Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse dolor deleniti cu piditate nostrum id. Ipsum error enim ipsa, libero velit voluptate porro dolor quaerat. Similique quis qui voluptatum odio unde.

February 6, 2024

Icon

Collapse

Usage

A simple example of using ax-time-line

Preview

Code

With Icon

TimeLine with icon inside it.

Preview

Code

No Icon

TimeLine with no icon inside it.

Preview

Code

Design Tokens

Design tokens are variables that define the visual style of ACoreX components. You can use them to change colors, typography, spacing, and other visual aspects.

Default component colors use system surface colors.

--ax-comp-time-line-active-bg-color	var(--ax-sys-color-primary-lightest-surface)	this variable specifies the background color for the active step or event in a timeline component. It highlights the current or completed status, making it visually distinct from inactive steps.
--ax-comp-time-line-active-text-color	var(--ax-sys-color-on-primary-lightest-surface)	defines the text color for the active step or event in a timeline component. It ensures the text is legible and stands out against the background of the active step.
--ax-comp-time-line-deactivate-bg-color	var(--ax-sys-color-darkest-surface)	this variable specifies the background color for inactive or deactivated steps or events in a timeline component. It visually distinguishes these steps as incomplete or not yet reached.
--ax-comp-time-line-icon-text-color	var(--ax-comp-time-line-icon-text-color)	this variable specifies the color of the text or icons displayed within timeline step markers. It ensures that the icons or text are clearly visible and harmonize with the overall design of the timeline component.
--ax-comp-time-line-icon-bg-color	var(--ax-comp-time-line-icon-bg-color)	defines the background color of the icons displayed within the timeline component. It enhances the visibility of the icons and provides a consistent design for each timeline step.