import Timeline from 'primevue/timeline';
<script src="https://unpkg.com/primevue@^3/core/core.min.js"></script>
<script src="https://unpkg.com/primevue@^3/timeline/timeline.min.js"></script>
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.
export default {
data() {
return {
events: [
{status: 'Ordered', date: '15/10/2020 10:30', icon: 'pi pi-shopping-cart', color: '#9C27B0', image: 'game-controller.jpg'},
{status: 'Processing', date: '15/10/2020 14:00', icon: 'pi pi-cog', color: '#673AB7'},
{status: 'Shipped', date: '15/10/2020 16:15', icon: 'pi pi-shopping-cart', color: '#FF9800'},
{status: 'Delivered', date: '16/10/2020 10:00', icon: 'pi pi-check', color: '#607D8B'}
],
events2: [
"2020", "2021", "2022", "2023"
]
}
}
}
<Timeline :value="events">
<template #content="slotProps">
{{slotProps.item.status}}
</template>
</Timeline>
Default layout of the timeline is vertical, setting layout to "horizontal" displays the items horizontally.
<Timeline :value="events" layout="horizontal>
<template #content="slotProps">
{{slotProps.item.status}}
</template>
</Timeline>
Location of the timeline bar is defined using the align property.
<Timeline :value="events" align="right">
<template #content="slotProps">
{{slotProps.item.status}}
</template>
</Timeline>
In addition, the "alternate" alignment option make the contents take turns around the timeline bar.
<Timeline :value="events" align="alternate">
<template #content="slotProps">
{{slotProps.item.status}}
</template>
</Timeline>
Content to be placed at the other side of the bar is defined with the opposite template.
<Timeline :value="events">
<template #opposite="slotProps">
<small class="p-text-secondary">{{slotProps.item.date}}</small>
</template>
<template #content="slotProps">
{{slotProps.item.status}}
</template>
</Timeline>
marker template allows placing a custom event marker instead of the default one. Below is an example with custom markers and content.
<Timeline :value="events" align="alternate" class="customized-timeline">
<template #marker="slotProps">
<span class="custom-marker shadow-2" :style="{backgroundColor: slotProps.item.color}">
<i :class="slotProps.item.icon"></i>
</span>
</template>
<template #content="slotProps">
<Card>
<template #title>
{{slotProps.item.status}}
</template>
<template #subtitle>
{{slotProps.item.date}}
</template>
<template #content>
<img v-if="slotProps.item.image" :src="'images/product/' + slotProps.item.image" :alt="slotProps.item.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 label="Read more" class="p-button-text"></Button>
</template>
</Card>
</template>
</Timeline>
Connector is an element that binds two events together, use the connector slot to use your own element instead of the default one. If you just require to customize simple properties like the color and width, apply the "p-timeline-event-connector" class to your element to use the built-in positioning.
<Timeline :value="events">
<template #content="slotProps">
{{slotProps.item.status}}
</template>
<template #connector>
<div class="p-timeline-event-connector" style="width:4px; color: blue"></div>
</template>
</Timeline>
| Name | Type | Default | Description |
|---|---|---|---|
| value | array | null | An array of events to display. |
| align | string | left | Position of the timeline bar relative to the content. Valid values are "left", "right" and "alternate" for vertical layout and "top", "bottom" for horizontal layout. |
| layout | string | vertical | Orientation of the timeline, valid values are "vertical" and "horizontal". |
| dataKey | string | null | Name of the field that uniquely identifies the a record in the data. |
| Name | Parameters |
|---|---|
| opposite |
item: Position of the event index: Index of the event |
| marker |
item: Custom marker of the event index: Index of the event |
| content |
item: Content of the event index: Index of the event |
| connector |
item: Connector of the event index: Index of the event |
Following is the list of structural style classes, for theming classes visit
| Name | Element |
|---|---|
| p-timeline | Container element. |
| p-timeline-left | Container element when alignment is left. |
| p-timeline-right | Container element when alignment is right. |
| p-timeline-top | Container element when alignment is top. |
| p-timeline-bottom | Container element when alignment is bottom. |
| p-timeline-alternate | Container element when alignment is alternating. |
| p-timeline-vertical | Container element of a vertical timeline. |
| p-timeline-horizontal | Container element of a horizontal timeline. |
| p-timeline-event | Event element. |
| p-timeline-event-opposite | Opposite of an event content. |
| p-timeline-event-content | Event content. |
| p-timeline-event-separator | Separator element of an event. |
| p-timeline-event-marker | Marker element of an event. |
| p-timeline-event-connector | Connector element of an event. |
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.
Component does not include any interactive elements.
None.