Getting Started With The Vue Timeline Component

A quick-start Vue project that shows how to create and configure the Syncfusion Vue Timeline component. Also learn how to add, align, and disable items, change the orientation, and reverse the timeline.

The Vue Timeline component enables users to display a series of data chronologically, providing a visually compelling and user-friendly experience. This showcases user activities, tracking progress, narrating historical timelines, and more. The Timeline component has two orientation modes: Horizontal: Displays items side-by-side. Vertical: Default orientation that displays items stacked.

This component enables users to align the items’ content and opposite content as follows: Before: Align the item content to the left (or top for horizontal orientation) and the opposite content to the right (or bottom). After: This default alignment aligns the item content to the right (or bottom for horizontal orientation) and the opposite content to the left (or top). Alternate: Align the content of the first item to the right and the opposite content to the left, and vice versa for subsequent items. Alternate Reverse: Align the content of the first item to the left and the opposite content to the right, and vice versa for subsequent items.

Timeline allows you to set icons, background colors, or images to customize the appearance of the dots associated with each timeline item. Display timeline items in reverse order, considering the alignment of items. It supports templates to customize the default appearance, including styling the dot items and templated content. Customizing the shape, outline color, and spacing of the dot items enhances their appearance and makes them stand out.?You can also customize the size, color, and dashed styling of the connector for each item.

Documentation: https://ej2.syncfusion.com/vue/documentation/timeline/getting-started

Demo: https://ej2.syncfusion.com/vue/demos/#/fluent2/timeline/default.html

Project prerequisites

Make sure that you have the compatible versions of Visual Studio Code, Vue, and NodeJS or a later version on your machine before starting to work on this project.

How to run this application

To run this application, you must first clone the getting-started-with-the-vue-timeline-component repository and then open it in Visual Studio Code. Build and run your project using the npm run dev command to view the output.