Note

This documentation describes the Timeline Vue component for native UI views for Xml templates see timeline.

Timeline

Displays a list of events in a chronological timeline. Wraps PrimeVue Timeline.

Import

import { Timeline } from '@neos/design-system'

Props

Prop	Type	Default	Description
source	Record<string, unknown>[]	[]	Array of event objects to display
orientation	'vertical' \| 'horizontal'	'vertical'	Layout direction of the timeline
align	'left' \| 'right' \| 'top' \| 'bottom' \| 'alternate'	'left'	Which side the content appears on. 'alternate' alternates left/right

Slots

Slot	Scope	Description
content	{ context: item }	Main content for each event (right/bottom side by default)
marker	{ context: item }	Custom icon or marker for each event node
opposite	{ context: item }	Content on the opposite side of the marker (e.g. date/time label)

Usage Examples

Simple vertical timeline

<Timeline :source="events">
  <template #content="{ context }">
    <Text weight="strong">{{ context.title }}</Text>
    <Text size="small">{{ context.description }}</Text>
  </template>
</Timeline>

Timeline with dates on the opposite side and custom markers

<Timeline :source="history" align="alternate">
  <template #opposite="{ context }">
    <Text size="small">{{ formatDate(context.date) }}</Text>
  </template>
  <template #marker="{ context }">
    <image :name="context.icon" size="small" />
  </template>
  <template #content="{ context }">
    <Card>
      <Text weight="strong">{{ context.title }}</Text>
      <Text>{{ context.description }}</Text>
    </Card>
  </template>
</Timeline>

Horizontal timeline

<Timeline :source="steps" orientation="horizontal" align="top">
  <template #content="{ context }">
    <Text>{{ context.step }}</Text>
  </template>
</Timeline>