@avine/ng-timeline

Timeline

Angular component that displays a list of events in chronological order.

Demo

Check out demo here.

Usage

Component

import { Component } from '@angular/core';
import { TIMELINE_DIRECTIVES, provideTimelineBreakpoint } from '@avine/ng-timeline';

@Component({
  selector: 'app-timeline-demo',
  standalone: true,
  imports: [TIMELINE_DIRECTIVES],
  providers: [provideTimelineBreakpoint('1280px')], // This is optional
  templateUrl: './timeline.component.html',
})
export class TimelineDemoComponent {
  items = ['Step 1', 'Step 2', 'Step 3'];
}

Template

<!-- Using items input -->
<timeline-container [items]="items" />

<!-- Using timeline-item components  -->
<timeline-container>
  <timeline-item>Step 1</timeline-item>

  <timeline-item>Step 2</timeline-item>

  <timeline-item>
    <ng-template timelineIcon>
      <!-- your SVG icon comes here -->
    </ng-template>

    Step 3
  </timeline-item>
</timeline-container>

API

The different sizes should be entered as numbers (you should not specify units such as em or rem).

These sizes will be treated as em relative to the font-size of the root element of the timeline.

Input	Type	Default	Description
items	string[]	[]	The list of items to display.
pendingFromIndex	NumberInput	undefined	Display the items as pending from the specified index.
bgColor	string | undefined	undefined	Indicates the background color of the timeline.
lineSize	TimelineLineSize	{}	Determines the size of the line between bullets.
bulletPoints	BooleanInput	false	Display bullet points instead of bullet content.
reverse	BooleanInput	false	Reverse the bullet and content positions.
vertical	BooleanInput	false	Display timeline in horizontal or vertical direction.
verticalContentSize	NumberInput	false	Limit the size (width) of the content when the timeline is vertical.
breakpoint	string | boolean | null	false	Switch between vertical and horizontal timeline based on a breakpoint.

TimelineLineSize

Determines the size of the line between bullets.

interface TimelineLineSize {
  horizontal?: number;
  vertical?: number;
}

Breakpoint

Switch between vertical and horizontal timeline based on a breakpoint.

If breakpoint is set to true then the default value is used (1024px).

You can provide a different default value using the provideTimelineBreakpoint function:

import { provideTimelineBreakpoint } from '@avine/ng-timeline';

@Component({
  providers: [provideTimelineBreakpoint('1280px')],
})
export class TimelineDemoComponent {}

Or by providing the TIMELINE_BREAKPOINT injection token:

import { TIMELINE_BREAKPOINT } from '@avine/ng-timeline';

@Component({
  providers: [{ provide: TIMELINE_BREAKPOINT, useValue: '1280px' }],
})
export class TimelineDemoComponent {}

Sass customization

You can fully customize the Timeline CSS using Sass.

Below the list of Sass variables:

@use 'node_modules/@avine/ng-timeline/src/lib/scss/timeline.scss' with (
  $timeline-background-color: #fff,

  $timeline-line-thickness: 3px,
  $timeline-line-color: #ced4da,

  $timeline-line-size-horizontal: 10,
  $timeline-line-size-vertical: 2,

  $timeline-bullet-font-size: 1.5,
  $timeline-bullet-outline-size: 0.5,
  $timeline-bullet-border-size: 2px,
  $timeline-bullet-size: 3,

  $timeline-bullet-border-color: #6ea8fe,
  $timeline-bullet-background-color: #0d6efd,
  $timeline-bullet-color: #fff,

  $timeline-pending-bullet-scale: 0.875,
  $timeline-pending-bullet-border-color: #dee2e6,
  $timeline-pending-bullet-background-color: #adb5bd,
  $timeline-pending-bullet-color: #e9ecef,
  $timeline-pending-content-color: #999,

  $timeline-vertical-content-size: auto
);

License

MIT