vue-next-timeline

0.2.1 • Public • Published

Vue Next Timeline

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

Status

Version js-standard-style Downloads Dependencies

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

contributions welcome

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 🍺

Buy Me A Coffee

License

MIT © cristianpoleyJS

Package Sidebar

Install

npm i vue-next-timeline

Weekly Downloads

13

Version

0.2.1

License

MIT

Unpacked Size

68.7 kB

Total Files

4

Last publish

Collaborators

  • cristianpoley