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