Items in Vue Timeline component

25 Dec 202418 minutes to read

The Timeline items can be added by using the <e-item> tag directive. Each item can be configured with options such as content, oppositeContent, dotCss, disabled and cssClass.

Adding content

You can define the Timeline item content using the content property.

String content

You can define string content for the Timeline items.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="container" style="height: 330px;margin-top: 30px;">
    <ejs-timeline id="timeline">
      <e-items>
        <e-item content='Shipped' />
        <e-item content='Departed' />
        <e-item content='Arrived' />
        <e-item content='Out for Delivery' />
      </e-items>
    </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";
</style>
<template>
  <div class="container" style="height: 330px;margin-top: 30px;">
    <ejs-timeline id="timeline">
      <e-items>
        <e-item content='Shipped' />
        <e-item content='Departed' />
        <e-item content='Arrived' />
        <e-item content='Out for Delivery' />
      </e-items>
    </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";
</style>

Templated content

You can specify the template content for the items by using the selector for an element in HTML.

app.vue
<template>
  <div class="container" style="height: 330px;margin-top: 30px;">
    <ejs-timeline id="timeline" css-class="test">
      <e-items>
        <e-item :content="'contentTemplate'" />
        <e-item :content="'contentTemplate'" />
        <e-item :content="'contentTemplate'" />
        <e-item content='Out for Delivery' />
      </e-items>
      <template v-slot:contentTemplate="{ data }">
        <div class="content-container">
          <div class="title">
            <span v-if='data.itemIndex == 0'>Shipped</span>
            <span v-else-if='data.itemIndex == 1'>Departed</span>
            <span v-else>Arrived</span>
          </div>
          <div class="description">
            <span v-if='data.itemIndex == 0'>Package details received</span>
            <span v-else-if='data.itemIndex == 1'>In-transit</span>
            <span v-else>Package arrived at nearest hub</span>
          </div>
          <div class="info">
            <span v-if='data.itemIndex == 0'>Awaiting dispatch</span>
            <span v-else-if='data.itemIndex == 1'>(International warehouse)</span>
            <span v-else>(New york - US)</span>
          </div>
        </div>
      </template>
    </ejs-timeline>
  </div>
</template>

<script>
import { TimelineComponent, ItemsDirective, ItemDirective } from "@syncfusion/ej2-vue-layouts";
export default {
  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";

.content-container {
  position: relative;
  width: 180px;
  padding: 10px;
  margin-left: 5px;
  box-shadow: rgba(9, 30, 66, 0.25) 0px 4px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  background-color: ghostwhite;
}

.content-container::before {
  content: '';
  position: absolute;
  left: -8px;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 8px solid silver;
}

.content-container .title {
  font-size: 16px;
}

.content-container .description {
  color: #999999;
  font-size: 12px;
}

.content-container .info {
  color: #999999;
  font-size: 10px;
}

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

Adding opposite content

You can add additional information to each Timeline item, by using the oppositeContent property which is positioned opposite to the item content. Similar to the content property, you can define string or function as the oppositeContent.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="container" style="height: 330px;margin-top: 30px;">
    <ejs-timeline id="timeline">
      <e-items>
        <e-item content='Breakfast' oppositeContent='8:00 AM' />
        <e-item content='Lunch' oppositeContent='1:00 PM' />
        <e-item content='Dinner' oppositeContent='8:00 PM' />
      </e-items>
    </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";
</style>
<template>
  <div class="container" style="height: 330px;margin-top: 30px;">
    <ejs-timeline id="timeline">
      <e-items>
        <e-item content='Breakfast' oppositeContent='8:00 AM' />
        <e-item content='Lunch' oppositeContent='1:00 PM' />
        <e-item content='Dinner' oppositeContent='8:00 PM' />
      </e-items>
    </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";
</style>

Dot item

You can use the dotCss property to define a CSS class that sets icons, background colors, or images to personalize the appearance of dots associated with each Timeline item.

Adding icons

You can define the CSS class to show the icon for each item using the dotCss property.

Adding images

You can include images for the Timeline items using the dotCss property, by setting the CSS background-image property.

Adding text

You can display text for the Timeline items using the dotCss property, by adding text to the CSS content property.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="container" style="height: 330px;margin-top: 30px;">
    <ejs-timeline id="timeline">
      <e-items>
        <e-item content='Default' />
        <e-item content='Icon' dotCss='e-icons e-check' />
        <e-item content='Image' dotCss='custom-image' />
        <e-item content='Text' dotCss='custom-text' />
      </e-items>
    </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";

.e-dot.custom-image {
  background-image: url(https://ej2.syncfusion.com/demos/src/listview/images/margaret.png);
}

.e-dot.custom-text::before {
  content: 'A';
}
</style>
<template>
  <div class="container" style="height: 330px;margin-top: 30px;">
    <ejs-timeline id="timeline">
      <e-items>
        <e-item content='Default' />
        <e-item content='Icon' dotCss='e-icons e-check' />
        <e-item content='Image' dotCss='custom-image' />
        <e-item content='Text' dotCss='custom-text' />
      </e-items>
    </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";

.e-dot.custom-image {
  background-image: url(https://ej2.syncfusion.com/demos/src/listview/images/margaret.png);
}

.e-dot.custom-text::before {
  content: 'A';
}
</style>

Disabling items

You can use the disabled property to disable an item when set to true. By default, the value is false.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="container" style="height: 330px;margin-top: 30px;">
    <ejs-timeline id="timeline">
      <e-items>
        <e-item content='Eat' />
        <e-item content='Code' />
        <e-item content='Repeat' :disabled='true' />
      </e-items>
    </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";
</style>
<template>
  <div class="container" style="height: 330px;margin-top: 30px;">
    <ejs-timeline id="timeline">
      <e-items>
        <e-item content='Eat' />
        <e-item content='Code' />
        <e-item content='Repeat' :disabled='true' />
      </e-items>
    </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";
</style>

CSS class

The cssClass property allows you to define a custom class to modify the appearance of the Timeline item.

Composition API (~/src/App.vue)
Options API (~/src/App.vue)
<template>
  <div class="container" style="height: 330px;margin-top: 30px;">
    <ejs-timeline id="timeline" >
      <e-items>
        <e-item content='Eat' css-class="eat" />
        <e-item content='Code' css-class="code" />
        <e-item content='Repeat' css-class="repeat" />
      </e-items>
    </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";

.eat .e-dot, .eat.e-timeline-item.e-connector::after {
  background-color: aqua;
  border-color: aqua;
}

.code .e-dot, .code.e-timeline-item.e-connector::after {
  background-color: blue;
  border-color: blue;
}

.repeat .e-dot, .repeat.e-timeline-item.e-connector::after {
  background-color: yellow;
  border-color: yellow;
}
</style>
<template>
  <div class="container" style="height: 330px;margin-top: 30px;">
    <ejs-timeline id="timeline" >
      <e-items>
        <e-item content='Eat' css-class="eat" />
        <e-item content='Code' css-class="code" />
        <e-item content='Repeat' css-class="repeat" />
      </e-items>
    </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";

.eat .e-dot, .eat.e-timeline-item.e-connector::after {
  background-color: aqua;
  border-color: aqua;
}

.code .e-dot, .code.e-timeline-item.e-connector::after {
  background-color: blue;
  border-color: blue;
}

.repeat .e-dot, .repeat.e-timeline-item.e-connector::after {
  background-color: yellow;
  border-color: yellow;
}
</style>

Search docs

Ask HelpBot