Orientations in Vue Timeline component
21 Feb 20255 minutes to read
The Timeline component supports the display of items in both the horizontal and vertical direction by using the orientation property.
Vertical
In vertical orientation, the items are displayed one below the other by setting the orientation property to Vertical, which is also the default orientation.
<template>
<div class="container" style="height: 330px;margin-top: 30px;">
<ejs-timeline id="timeline" orientation="Vertical">
<e-items>
<e-item content='Day 1, 4:00 PM' oppositeContent='Check-in and campsite visit' />
<e-item content='Day 1, 7:00 PM' oppositeContent='Dinner with music' />
<e-item content='Day 2, 5:30 AM' oppositeContent='Sunrise between mountains' />
<e-item content='Day 2, 8:00 AM' oppositeContent='Breakfast and check-out' />
</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";
.container {
height: 350px;
}
</style><template>
<div class="container" style="height: 330px;margin-top: 30px;">
<ejs-timeline id="timeline" orientation="Vertical">
<e-items>
<e-item content='Day 1, 4:00 PM' oppositeContent='Check-in and campsite visit' />
<e-item content='Day 1, 7:00 PM' oppositeContent='Dinner with music' />
<e-item content='Day 2, 5:30 AM' oppositeContent='Sunrise between mountains' />
<e-item content='Day 2, 8:00 AM' oppositeContent='Breakfast and check-out' />
</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";
.container {
height: 350px;
}
</style>Horizontal
In horizontal orientation, the items are displayed in a side-by-side manner by setting the orientation property to Horizontal.
<template>
<div class="container" style="margin-top: 50px;">
<ejs-timeline id="timeline" orientation="Horizontal">
<e-items>
<e-item content='Day 1, 4:00 PM' oppositeContent='Check-in and campsite visit' />
<e-item content='Day 1, 7:00 PM' oppositeContent='Dinner with music' />
<e-item content='Day 2, 5:30 AM' oppositeContent='Sunrise between mountains' />
<e-item content='Day 2, 8:00 AM' oppositeContent='Breakfast and check-out' />
</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="margin-top: 50px;">
<ejs-timeline id="timeline" orientation="Horizontal">
<e-items>
<e-item content='Day 1, 4:00 PM' oppositeContent='Check-in and campsite visit' />
<e-item content='Day 1, 7:00 PM' oppositeContent='Dinner with music' />
<e-item content='Day 2, 5:30 AM' oppositeContent='Sunrise between mountains' />
<e-item content='Day 2, 8:00 AM' oppositeContent='Breakfast and check-out' />
</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>