Template in Vue Timeline component

25 Dec 202411 minutes to read

The Timeline component allows you to customize the appearance of each item by using the template property to modify the dot items, templated contents, progress bar styling and more.

The template context receives the following information:

Type	Purpose
item	Represents the current data of the Timeline item.
itemIndex	Indicates the current index of the Timeline item.

Composition API (~/src/App.vue)

<template>
  <div class="container" style="height: 150px; margin-top: 50px; width: 600px;">
    <ejs-timeline id="timeline" orientation="Horizontal" css-class="custom-timeline" template="timelineTemplate">
      <e-items>
        <e-item content='Kickoff meeting' />
        <e-item content='Content approved' />
        <e-item content='Design approved' />
        <e-item content='Product delivered' />
      </e-items>
      <template v-slot:timelineTemplate="{ data }">
        <div :class="'template-container item-' + data.itemIndex">
          <div class="content-container">
            <div class="timeline-content"> <span v-html="data.item.content"></span></div>
          </div>
          <div class="content-connector"></div>
          <div class="progress-line">
            <span class="indicator"></span>
          </div>
        </div>
      </template>
    </ejs-timeline>
  </div>
</template>

<script setup>
import { TimelineComponent as EjsTimeline, ItemsDirective as EItems, ItemDirective as EItem } from "@syncfusion/ej2-vue-layouts";

</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";

.custom-timeline .e-timeline-item.e-item-template {
  align-items: flex-end;
}

.custom-timeline .e-timeline-items {
  justify-content: center;
}

.template-container .content-connector {
  position: absolute;
  left: 88%;
  width: 3px;
  height: 28px;
}

.template-container .content-container {
  padding: 8px;
  border-width: 1px;
  border-style: solid;
}

.content-container .timeline-content {
  font-size: 14px;
}

.container * {
  box-sizing: unset;
}

/* Color customizations - Progress line, connector line, dot border */
.item-0 .progress-line,
.item-0 .content-connector {
  background-color: rgb(233, 93, 93);
}

.item-1 .progress-line,
.item-1 .content-connector {
  background-color: rgba(247, 179, 22, 0.907);
}

.item-2 .progress-line,
.item-2 .content-connector {
  background-color: rgb(60, 184, 60);
}

.item-3 .progress-line,
.item-3 .content-connector {
  background-color: rgb(153, 29, 230);
}

.item-0 .progress-line .indicator,
.item-0 .content-container {
  border-color: rgb(233, 93, 93);
}

.item-1 .progress-line .indicator,
.item-1 .content-container {
  border-color: rgba(247, 179, 22, 0.907);
}

.item-2 .progress-line .indicator,
.item-2 .content-container {
  border-color: rgb(60, 184, 60);
}

.item-3 .progress-line .indicator,
.item-3 .content-container {
  border-color: rgb(153, 29, 230);
}

.item-0 .content-container {
  box-shadow: 2px 2px 8px rgb(233, 93, 93);
}

.item-1 .content-container {
  box-shadow: 2px 2px 8px rgba(247, 179, 22, 0.907);
}

.item-2 .content-container {
  box-shadow: 2px 2px 8px rgb(60, 184, 60);
}

.item-3 .content-container {
  box-shadow: 2px 2px 8px rgb(153, 29, 230);
}

/* START --- Customizing Dot and progress line */
.custom-timeline .template-container .indicator {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #fff;
  border-width: 6px;
  border-style: solid;
  left: 88%;
  transform: translate(-50%, -40%);
  cursor: pointer;
}

.progress-line {
  position: absolute;
  height: 10px;
  width: 100%;
  left: 0;
  top: 50%;
}

/* END --- Customizing Icon and progress line */
</style>

Options API (~/src/App.vue)

<template>
  <div class="container" style="height: 150px; margin-top: 50px; width: 600px;">
    <ejs-timeline id="timeline" orientation="Horizontal" css-class="custom-timeline" template="timelineTemplate">
      <e-items>
        <e-item content='Kickoff meeting' />
        <e-item content='Content approved' />
        <e-item content='Design approved' />
        <e-item content='Product delivered' />
      </e-items>
      <template v-slot:timelineTemplate="{ data }">
        <div :class="'template-container item-' + data.itemIndex">
          <div class="content-container">
            <div class="timeline-content"> <span v-html="data.item.content"></span></div>
          </div>
          <div class="content-connector"></div>
          <div class="progress-line">
            <span class="indicator"></span>
          </div>
        </div>
      </template>
    </ejs-timeline>
  </div>
</template>

<script>
import { TimelineComponent, ItemsDirective, ItemDirective } from "@syncfusion/ej2-vue-layouts";
export default {
  name: "App",
  components: {
    'ejs-timeline': TimelineComponent,
    'e-items': ItemsDirective,
    'e-item': ItemDirective
  },
  data() {
    return {
    }
  }
};
</script>

<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-layouts/styles/material.css";

.custom-timeline .e-timeline-item.e-item-template {
  align-items: flex-end;
}

.custom-timeline .e-timeline-items {
  justify-content: center;
}

.template-container .content-connector {
  position: absolute;
  left: 88%;
  width: 3px;
  height: 28px;
}

.template-container .content-container {
  padding: 8px;
  border-width: 1px;
  border-style: solid;
}

.content-container .timeline-content {
  font-size: 14px;
}

.container * {
  box-sizing: unset;
}

/* Color customizations - Progress line, connector line, dot border */
.item-0 .progress-line,
.item-0 .content-connector {
  background-color: rgb(233, 93, 93);
}

.item-1 .progress-line,
.item-1 .content-connector {
  background-color: rgba(247, 179, 22, 0.907);
}

.item-2 .progress-line,
.item-2 .content-connector {
  background-color: rgb(60, 184, 60);
}

.item-3 .progress-line,
.item-3 .content-connector {
  background-color: rgb(153, 29, 230);
}

.item-0 .progress-line .indicator,
.item-0 .content-container {
  border-color: rgb(233, 93, 93);
}

.item-1 .progress-line .indicator,
.item-1 .content-container {
  border-color: rgba(247, 179, 22, 0.907);
}

.item-2 .progress-line .indicator,
.item-2 .content-container {
  border-color: rgb(60, 184, 60);
}

.item-3 .progress-line .indicator,
.item-3 .content-container {
  border-color: rgb(153, 29, 230);
}

.item-0 .content-container {
  box-shadow: 2px 2px 8px rgb(233, 93, 93);
}

.item-1 .content-container {
  box-shadow: 2px 2px 8px rgba(247, 179, 22, 0.907);
}

.item-2 .content-container {
  box-shadow: 2px 2px 8px rgb(60, 184, 60);
}

.item-3 .content-container {
  box-shadow: 2px 2px 8px rgb(153, 29, 230);
}

/* START --- Customizing Dot and progress line */
.custom-timeline .template-container .indicator {
  position: absolute;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background-color: #fff;
  border-width: 6px;
  border-style: solid;
  left: 88%;
  transform: translate(-50%, -40%);
  cursor: pointer;
}

.progress-line {
  position: absolute;
  height: 10px;
  width: 100%;
  left: 0;
  top: 50%;
}

/* END --- Customizing Icon and progress line */
</style>