Timeline visualizes a series of chained events.
import Timeline from 'primevue/timeline';
Timeline requires a value for the collection of events and content slot that receives an object as a parameter to return content.
<Timeline :value="events">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
Content location relative the line is defined with the align property.
<Timeline :value="events" class="w-full md:w-20rem">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
<Timeline :value="events" align="right" class="w-full md:w-20rem">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
<Timeline :value="events" align="alternate" class="w-full md:w-20rem">
<template #content="slotProps">
{{ slotProps.item.status }}
</template>
</Timeline>
Additional content at the other side of the line can be provided with the opposite property.
<Timeline :value="events">
<template #opposite="slotProps">
<small class="p-text-secondary">{{slotProps.item.date}}</small>
</template>
<template #content="slotProps">
{{slotProps.item.status}}
</template>
</Timeline>
Sample implementation with custom content and styled markers.
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!
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!
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!
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!
<Timeline :value="events" align="alternate" class="customized-timeline">
<template #marker="slotProps">
<span class="flex w-2rem h-2rem align-items-center justify-content-center text-white border-circle z-1 shadow-1" :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-1" />
<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" text></Button>
</template>
</Card>
</template>
</Timeline>
TimeLine orientation is controlled with the layout property, default is vertical having horizontal as the alternative.
<Timeline :value="events" layout="horizontal" align="top">
<template #content="slotProps">
{{ slotProps.item }}
</template>
</Timeline>
<Timeline :value="events" layout="horizontal" align="bottom">
<template #content="slotProps">
{{ slotProps.item }}
</template>
</Timeline>
<Timeline :value="events" layout="horizontal" align="alternate">
<template #opposite> </template>
<template #content="slotProps">
{{ slotProps.item }}
</template>
</Timeline>
Following is the list of structural style classes, for theming classes visit theming page.
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.