Source: https://primeng.org/timeline

• Primary

  Surface

  PresetsAuraMaterialLaraNora

  Ripple

  RTL

• v20

  • v20

  • v19

  • v18

  • v17

• FEATURES

• API

• THEMING

• PASSTHROUGH

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 #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-80"> <ng-template #content let-event> {{ event.status }} </ng-template> </p-timeline>

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

<p-timeline [value]="events" class="w-full md:w-80" align="alternate">
    <ng-template #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.

15/10/2020 10:30

Ordered

15/10/2020 14:00

Processing

15/10/2020 16:15

Shipped

16/10/2020 10:00

Delivered

<p-timeline [value]="events"> <ng-template #opposite let-event> <small class="text-surface-500 dark:text-surface-400">{{ event.date }}</small> </ng-template> <ng-template #content let-event> {{ event.status }} </ng-template> </p-timeline>

Template #

Sample implementation with custom content and styled markers.

Ordered

15/10/2020 10:30

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!

Read more

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!

Read more

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!

Read more

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!

Read more

<p-timeline [value]="events" align="alternate" class="customized-timeline"> <ng-template #marker let-event> <span class="flex w-8 h-8 items-center justify-center text-white rounded-full z-10 shadow-sm" [style]="{ 'background-color': event.color }"> <i [class]="event.icon"></i> </span> </ng-template> <ng-template #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" /> <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> <p-button label="Read more" [text]="true" /> </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 #content let-event> {{ event }} </ng-template> </p-timeline>

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

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

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.

• Import

• Basic

• Alignment

• Opposite

• Template

• Horizontal

• Accessibility

Theme Designer

Theme Designer is the ultimate tool to customize and design your own themes featuring a visual editor, figma to theme code, cloud storage, and migration assistant.

PrimeNG 20.3.0 by PrimeTek