Timeline

Timeline visualizes a series of chained events.

Import #


import { TimelineModule } from 'primeng/timeline';

Basic #

Timeline receives the events with the value property as a collection of arbitrary objects. In addition, content template is required to display the representation of an event. Example below is a sample events array that is used throughout the documentation.

Ordered
Processing
Shipped
Delivered 


<p-timeline [value]="events">
    <ng-template pTemplate="content" let-event>
        {{ event.status }}
    </ng-template>
</p-timeline>

Alignment #

Content location relative the line is defined with the align property.

Ordered
Processing
Shipped
Delivered
Ordered
Processing
Shipped
Delivered
Ordered
Processing
Shipped
Delivered 


<p-timeline [value]="events" class="w-full md:w-20rem">
    <ng-template pTemplate="content" let-event>
        {{ event.status }}
    </ng-template>
</p-timeline>

<p-timeline [value]="events" class="w-full md:w-20rem" align="right">
    <ng-template pTemplate="content" let-event>
        {{ event.status }}
    </ng-template>
</p-timeline>

<p-timeline [value]="events" class="w-full md:w-20rem" align="alternate">
    <ng-template pTemplate="content" let-event>
        {{ event.status }}
    </ng-template>
</p-timeline>

Opposite #

Additional content at the other side of the line can be provided with the opposite property.

Ordered
15/10/2020 10:30
Processing
15/10/2020 14:00
Shipped
15/10/2020 16:15
Delivered
16/10/2020 10:00


<p-timeline [value]="events">
    <ng-template pTemplate="content" let-event>
        <small class="p-text-secondary">{{ event.date }}</small>
    </ng-template>
    <ng-template pTemplate="opposite" let-event>
        {{ event.status }}
    </ng-template>
</p-timeline>

Template #

Sample implementation with custom content and styled markers.

Ordered
15/10/2020 10:30
undefined

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

Processing
15/10/2020 14:00

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

Shipped
15/10/2020 16:15

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!

Delivered
16/10/2020 10:00

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas! 



<p-timeline [value]="events" align="alternate" styleClass="customized-timeline">
    <ng-template pTemplate="marker" let-event>
        <span class="custom-marker shadow-2" [style.backgroundColor]="event.color">
            <i [ngClass]="event.icon"></i>
        </span>
    </ng-template>
    <ng-template pTemplate="content" let-event>
        <p-card [header]="event.status" [subheader]="event.date">
            <img *ngIf="event.image" [src]="'https://primefaces.org/cdn/primeng/images/demo/product/' + event.image" [alt]="event.name" width="200" class="shadow-2" />
            <p>
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate
                neque quas!
            </p>
            <button pButton label="Read more" class="p-button-text"></button>
        </p-card>
    </ng-template>
</p-timeline>

Horizontal #

TimeLine orientation is controlled with the layout property, default is vertical having horizontal as the alternative.

2020
2021
2022
2023
2020
2021
2022
2023
 
2020
 
2021
 
2022
 
2023 


<p-timeline [value]="events" layout="horizontal" align="top">
    <ng-template pTemplate="content" let-event>
        {{ event }}
    </ng-template>
</p-timeline>

<p-timeline [value]="events" layout="horizontal" align="bottom">
    <ng-template pTemplate="content" let-event>
        {{ event }}
    </ng-template>
</p-timeline>

<p-timeline [value]="events" layout="horizontal" align="alternate">
    <ng-template pTemplate="content" let-event>
        {{ event }}
    </ng-template>
    <ng-template pTemplate="opposite" let-event><span>&nbsp;</span></ng-template>
</p-timeline>

Style #

Following is the list of structural style classes, for theming classes visit theming page.

NameElement
p-timelineContainer element.
p-timeline-leftContainer element when alignment is left.
p-timeline-rightContainer element when alignment is right.
p-timeline-topContainer element when alignment is top.
p-timeline-bottomContainer element when alignment is bottom.
p-timeline-alternateContainer element when alignment is alternating.
p-timeline-verticalContainer element of a vertical timeline.
p-timeline-horizontalContainer element of a horizontal timeline.
p-timeline-eventEvent element.
p-timeline-event-oppositeOpposite of an event content.
p-timeline-event-contentEvent content.
p-timeline-event-separatorSeparator element of an event.
p-timeline-event-markerMarker element of an event.
p-timeline-event-connectorConnector element of an event.
Accessibility guide documents the specification of this component based on WCAG guidelines, the implementation is in progress.

Accessibility #

Screen Reader

Timeline uses a semantic ordered list element to list the events. No specific role is enforced, still you may use any aria role and attributes as any valid attribute is passed to the list element.

Keyboard Support

Component does not include any interactive elements.

PrimeNG 16.4.1 by PrimeTek