v-timeline-component v0.0.1

v-timeline-component

Customizable Timeline Component for Vue

Features

• Layout Customization: Choose between vertical and horizontal layouts to suit your application's needs.
• Event Customization: Provide your own events with title, date, and description.
• Custom Content Support: Utilize slots to insert custom content for each event.
• Styling Customization: Adjust the color, marker size, and line width to match your desired aesthetic.

Basic Example (Vertical Layout)

<TimelineComponent
  :timeline-events="myEvents"
  layout="vertical"
  color="#333"
  marker-size="1rem"
  line-width="3px"
/>

Basic Example (Horizontal Layout)

<TimelineComponent
  :has-custom-content="true"
  :timeline-events="myEvents"
  layout="horizontal"
  color="#666"
  marker-size="0.75rem"
  line-width="2px">

  <template v-slot="{ event, index }">
    <h4>{{ event.title }}</h4>
    <p>Event Index: {{ index }}</p>
  </template>
</TimelineComponent>

Available Props