Vue Next Timeline

A simple component to display a timeline in horizontal format with Vue3.

Status

Demo

How to install

npm

npm install vue-next-timeline --save

Quick start

Globally

You can import in your main.js file

import App from './App.vue'
import { createApp } from 'vue'
import VueNextTimeline from 'vue-next-timeline'
 
const app = createApp(App)
app.component(VueNextTimeline)

Locally in any component

import VueNextTimeline from 'vue-next-timeline'
 
export default {
  components: {
    VueNextTimeline
  }
};

Basic usage

<template>
  <vue-next-timeline :items="items" />
</template>
 
<script>
  export default {
    data() {
      const item1 =  {
        title: '2013',
        content: 'The international year of mathematics on planet Earth. The international year of mathematics on planet Earth',
        color: '#2785ab'
      }
      const item2 = {
        title: '2014',
        content: 'International Year of Family Farming',
        color: '#f89714'
      }
      const item3 = {
        title: '2015',
        content: 'International Year of Light and Light-Based Technologies',
        color: '#f65b78'
      }
      const items = [item1, item2, item3]
 
      return { items }
    }
  };
</script> 

Props

Property name	Type	Default	Description
items	Array	[]	Array of objects to be displayed. Must have at least a content property
item-unique-key	String	null	Key with unique value of each item in the array. Used for the v-for Key
item-title-key	String	'title'	Key to display the item title
item-content-key	String	'content'	Key to display the contents of the item
item-clickable	Boolean	true	Indicates if the title or content can be clicked to launch a $emit event with the clicked element
min-width	String	'700px'	Minimum width of the upper div of the component
max-width	String	'1220px'	Maximum width of the upper div of the component
min-width-item	String	'200px'	Minimum width of each item
max-width-item	String	'400px'	Maximum width of each item
text-align	String	'center'	Alignment of item content and title
class-name	String	''	Class to be used for custom styles

Development

Note: Contributions are very welcomed, however is very important to open a new issue using the issue template before you start working on anything, so we can discuss it before hand

Fork the project and enter this commands in your terminal

git clone https://github.com/cristianpoleyJS/vue-next-timeline.git
cd vue-next-timeline
npm install
npm run serve

Commitlint

This project follows the commitlint guidelines, with minor changes.

Contribute 🍺

License

MIT © cristianpoleyJS