Alignment in Vue Timeline component

25 Dec 202411 minutes to read

You can display the Timeline content as Before, After, Alternate and AlternateReverse by using the align property. The oppositeContent will be displayed parallel to the content when configured.

Before

In Before alignment, for horizontal orientation, the item content is placed at the top and oppositeContent at the bottom. For vertical orientation, the content is placed to the left and oppositeContent to the right.

<template>
  <div class="container" style="height: 330px;margin-top: 30px;">
    <ejs-timeline id="timeline" align="Before">
      <e-items>
        <e-item content='ReactJs' opposite-content='Owned by Facebook' />
        <e-item content='Angular' opposite-content='Owned by Google' />
        <e-item content='VueJs' opposite-content='Owned by Evan you' />
        <e-item content='Svelte' opposite-content='Owned by Rich Harris' />
      </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" align="Before">
      <e-items>
        <e-item content='ReactJs' opposite-content='Owned by Facebook' />
        <e-item content='Angular' opposite-content='Owned by Google' />
        <e-item content='VueJs' opposite-content='Owned by Evan you' />
        <e-item content='Svelte' opposite-content='Owned by Rich Harris' />
      </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>

After

In After alignment, for horizontal orientation the item content is placed at the bottom and oppositeContent at the top whereas in vertical, the content to the right and oppositeContent to the left.

<template>
  <div class="container" style="height: 330px;margin-top: 30px;">
    <ejs-timeline id="timeline" align="After">
      <e-items>
        <e-item content='ReactJs' opposite-content='Owned by Facebook' />
        <e-item content='Angular' opposite-content='Owned by Google' />
        <e-item content='VueJs' opposite-content='Owned by Evan you' />
        <e-item content='Svelte' opposite-content='Owned by Rich Harris' />
      </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" align="After">
      <e-items>
        <e-item content='ReactJs' opposite-content='Owned by Facebook' />
        <e-item content='Angular' opposite-content='Owned by Google' />
        <e-item content='VueJs' opposite-content='Owned by Evan you' />
        <e-item content='Svelte' opposite-content='Owned by Rich Harris' />
      </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>

Alternate

In Alternate alignment, the item content are arranged alternatively regardless of the Timeline orientation.

<template>
  <div class="container" style="height: 330px;margin-top: 30px;">
    <ejs-timeline id="timeline" align="Alternate">
      <e-items>
        <e-item content='ReactJs' opposite-content='Owned by Facebook' />
        <e-item content='Angular' opposite-content='Owned by Google' />
        <e-item content='VueJs' opposite-content='Owned by Evan you' />
        <e-item content='Svelte' opposite-content='Owned by Rich Harris' />
      </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" align="Alternate">
      <e-items>
        <e-item content='ReactJs' opposite-content='Owned by Facebook' />
        <e-item content='Angular' opposite-content='Owned by Google' />
        <e-item content='VueJs' opposite-content='Owned by Evan you' />
        <e-item content='Svelte' opposite-content='Owned by Rich Harris' />
      </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>

Alternate reverse

In AlternateReverse alignment, the item content are arranged in reverse alternate regardless of the Timeline orientation.

<template>
  <div class="container" style="height: 330px;margin-top: 30px;">
    <ejs-timeline id="timeline" align="AlternateReverse">
      <e-items>
        <e-item content='ReactJs' opposite-content='Owned by Facebook' />
        <e-item content='Angular' opposite-content='Owned by Google' />
        <e-item content='VueJs' opposite-content='Owned by Evan you' />
        <e-item content='Svelte' opposite-content='Owned by Rich Harris' />
      </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" align="AlternateReverse">
      <e-items>
        <e-item content='ReactJs' opposite-content='Owned by Facebook' />
        <e-item content='Angular' opposite-content='Owned by Google' />
        <e-item content='VueJs' opposite-content='Owned by Evan you' />
        <e-item content='Svelte' opposite-content='Owned by Rich Harris' />
      </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>