Customization in Vue Timeline component

23 Dec 202422 minutes to read

You can customize the Timeline items’ dot size, connectors, dot borders, dot outer space, and more to personalize their appearance. This section explains the different ways for styling the items.

Connector styling

Common styling

You can define the styles applicable to the all the Timeline item connectors.

<template>
  <div class="container" style="height:250px;margin-top: 50px;">
    <ejs-timeline id="timeline" css-class="custom-connector">
      <e-items>
        <e-item content='Eat' />
        <e-item content='Code' />
        <e-item content='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";

.custom-connector .e-timeline-item.e-connector::after {
  border-color: #f7c867;
  border-width: 1.4px;
}
</style>
<template>
  <div class="container" style="height:250px;margin-top: 50px;">
    <ejs-timeline id="timeline" css-class="custom-connector">
      <e-items>
        <e-item content='Eat' />
        <e-item content='Code' />
        <e-item content='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";

.custom-connector .e-timeline-item.e-connector::after {
  border-color: #f7c867;
  border-width: 1.4px;
}
</style>

Individual styling

You can also apply unique styles to individual connectors, to differentiate specific items within the Timeline.

<template>
  <div class="container" style="height:250px;margin-top: 50px;">
    <ejs-timeline id="timeline" css-class="custom-connector">
      <e-items>
        <e-item content='Eat' css-class="state-initial" />
        <e-item content='Code' css-class="state-intermediate" />
        <e-item content='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";

  .custom-connector .e-timeline-item.state-initial.e-connector::after {
    border: 1.5px #f8c050 dashed;
  }

  .custom-connector .e-timeline-item.state-intermediate.e-connector::after {
    border: 1.5px #4d85f5 dashed;
  }
</style>
<template>
  <div class="container" style="height:250px;margin-top: 50px;">
    <ejs-timeline id="timeline" css-class="custom-connector">
      <e-items>
        <e-item content='Eat' css-class="state-initial" />
        <e-item content='Code' css-class="state-intermediate" />
        <e-item content='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";

  .custom-connector .e-timeline-item.state-initial.e-connector::after {
    border: 1.5px #f8c050 dashed;
  }

  .custom-connector .e-timeline-item.state-intermediate.e-connector::after {
    border: 1.5px #4d85f5 dashed;
  }
</style>

Dot styling

Dot color

You can modify the color of the dots to highlight specific Timeline items.

<template>
  <div class="container" style="height:250px;margin-top: 50px;">
    <ejs-timeline id="timeline" css-class="dot-color">
      <e-items>
        <e-item content='Ordered' css-class="state-completed" />
        <e-item content='Shipped' css-class="state-progress" />
        <e-item content='Delivered' />
      </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";

.dot-color .state-completed .e-dot {
  background-color: #ff9900;
  outline: 1px dashed #ff9900;
  border-color: #ff9900;
}

.dot-color .state-progress .e-dot {
  background: #33cc33;
  outline: 1px dashed #33cc33;
  border-color: #33cc33;
}
</style>
<template>
  <div class="container" style="height:250px;margin-top: 50px;">
    <ejs-timeline id="timeline" css-class="dot-color">
      <e-items>
        <e-item content='Ordered' css-class="state-completed" />
        <e-item content='Shipped' css-class="state-progress" />
        <e-item content='Delivered' />
      </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";

.dot-color .state-completed .e-dot {
  background-color: #ff9900;
  outline: 1px dashed #ff9900;
  border-color: #ff9900;
}

.dot-color .state-progress .e-dot {
  background: #33cc33;
  outline: 1px dashed #33cc33;
  border-color: #33cc33;
}
</style>

Dot size

You can adjust the size of the dot to make it larger or smaller by using the --dot-size variable.

<template>
  <div class="container" style="height:250px;margin-top: 50px;">
    <ejs-timeline id="timeline" css-class="dot-size">
      <e-items>
        <e-item content='Extra Small' css-class="x-small" />
        <e-item content='Small' css-class="small" />
        <e-item content='Medium' css-class="medium" />
        <e-item content='Large' css-class="large" />
      </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";

.dot-size .e-dot {
  background: #33cc33;
}

.dot-size .x-small .e-dot {
  --dot-size: 12px;
}

.dot-size .small .e-dot {
  --dot-size: 18px;
}

.dot-size .medium .e-dot {
  --dot-size: 24px;
}

.dot-size .large .e-dot {
  --dot-size: 30px;
}
</style>
<template>
  <div class="container" style="height:250px;margin-top: 50px;">
    <ejs-timeline id="timeline" css-class="dot-size">
      <e-items>
        <e-item content='Extra Small' css-class="x-small" />
        <e-item content='Small' css-class="small" />
        <e-item content='Medium' css-class="medium" />
        <e-item content='Large' css-class="large" />
      </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";

.dot-size .e-dot {
  background: #33cc33;
}

.dot-size .x-small .e-dot {
  --dot-size: 12px;
}

.dot-size .small .e-dot {
  --dot-size: 18px;
}

.dot-size .medium .e-dot {
  --dot-size: 24px;
}

.dot-size .large .e-dot {
  --dot-size: 30px;
}
</style>

Dot shadow

You can add shadow effects to the Timeline dots to make them visually engaging by using the --dot-outer-space & --dot-border variables.

<template>
  <div class="container" style="height:250px;margin-top: 50px;">
    <ejs-timeline id="timeline" css-class="dot-shadow">
      <e-items>
        <e-item content='Ordered' />
        <e-item content='Shipped' />
        <e-item content='Delivered' />
      </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";

.dot-shadow .e-dot {
  --dot-outer-space: 3px;
  --dot-border: 3px;
  --dot-size: 20px;
  outline-color: #dee2e6;
  border-color: #fff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5), 2px -2px 4px rgba(255, 255, 255, 0.5) inset;
}
</style>
<template>
  <div class="container" style="height:250px;margin-top: 50px;">
    <ejs-timeline id="timeline" css-class="dot-shadow">
      <e-items>
        <e-item content='Ordered' />
        <e-item content='Shipped' />
        <e-item content='Delivered' />
      </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";

.dot-shadow .e-dot {
  --dot-outer-space: 3px;
  --dot-border: 3px;
  --dot-size: 20px;
  outline-color: #dee2e6;
  border-color: #fff;
  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.5), 2px -2px 4px rgba(255, 255, 255, 0.5) inset;
}
</style>

Dot variant

You can achieve the desired dot variant by customizing the border, outline and background colors of the Timeline dots.

<template>
  <div class="container" style="height:250px;margin-top: 50px;">
    <ejs-timeline id="timeline" css-class="dot-variant">
      <e-items>
        <e-item content='Filled' css-class="dot-filled" />
        <e-item content='Flat' css-class="dot-flat" />
        <e-item content='Outlined' css-class="dot-outlined" />
      </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";

.dot-variant .dot-filled .e-dot::before {
  content: 'A';
  color: #fff;
}

.dot-variant .dot-flat .e-dot::before {
  content: 'B';
  color: #fff;
}

.dot-variant .dot-outlined .e-dot::before {
  content: 'C';
}

.dot-variant .dot-filled .e-dot {
  background: #33cc33;
  --dot-outer-space: 3px;
  outline-color: #81ff05;
  --dot-size: 25px;
}

.dot-variant .dot-flat .e-dot {
  background: #33cc33;
  --dot-size: 25px;
  --dot-radius: 10%;
}

.dot-variant .dot-outlined .e-dot {
  outline-color: #33cc33;
  --dot-outer-space: 3px;
  background-color: unset;
  --dot-size: 25px;
}
</style>
<template>
  <div class="container" style="height:250px;margin-top: 50px;">
    <ejs-timeline id="timeline" css-class="dot-variant">
      <e-items>
        <e-item content='Filled' css-class="dot-filled" />
        <e-item content='Flat' css-class="dot-flat" />
        <e-item content='Outlined' css-class="dot-outlined" />
      </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";

.dot-variant .dot-filled .e-dot::before {
  content: 'A';
  color: #fff;
}

.dot-variant .dot-flat .e-dot::before {
  content: 'B';
  color: #fff;
}

.dot-variant .dot-outlined .e-dot::before {
  content: 'C';
}

.dot-variant .dot-filled .e-dot {
  background: #33cc33;
  --dot-outer-space: 3px;
  outline-color: #81ff05;
  --dot-size: 25px;
}

.dot-variant .dot-flat .e-dot {
  background: #33cc33;
  --dot-size: 25px;
  --dot-radius: 10%;
}

.dot-variant .dot-outlined .e-dot {
  outline-color: #33cc33;
  --dot-outer-space: 3px;
  background-color: unset;
  --dot-size: 25px;
}
</style>

Dot outline

By adding the e-outline class to the Timeline cssClass property, you enable the dots to have an outline state.

<template>
  <div class="container" style="height:250px;margin-top: 50px;">
    <ejs-timeline id="timeline" css-class="e-outline">
      <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:250px;margin-top: 50px;">
    <ejs-timeline id="timeline" css-class="e-outline">
      <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>