Demo Timeline Vue

📦 Install

npm install timeline-vuejs --save

// main.js
import '../node_modules/timeline-vuejs/dist/timeline-vuejs.css'

// component.vue
<script>
  import Timeline from 'timeline-vuejs'

  export default {
    // ...
    components: {
      Timeline
    }
    // ...
  }
</script>

🔧 Usage

<template>
  <Timeline
    :timeline-items="timelineItems"
    :message-when-no-items="messageWhenNoItems"/>
</template>

<script>
import Timeline from 'timeline-vuejs'

export default {
  components: {
    Timeline
  }
  data: () => ({
    messageWhenNoItems: 'There are not items',
    timelineItems: [
      {
        from: new Date(2018, 7),
        title: 'Name',
        description:
          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.'
      },
      {
        from: new Date(2016, 1),
        title: 'Name',
        description:
          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.'
      },
      {
        from: new Date(2016, 6),
        title: 'Name',
        description:
          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.'
      },
      {
        from: new Date(2012, 1),
        title: 'Name',
        description:
          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius earum architecto dolor, vitae magnam voluptate accusantium assumenda numquam error mollitia, officia facere consequuntur reprehenderit cum voluptates, ea tempore beatae unde.'
      }
    ]
  })
}
</script>

Available props

| Props | Type | Default | Description | | :----------------- | :------------------: | :----------------------------------------------------- | :---------------------------------------------------------- | | timelineItems | Array | [ ] | Items value of the timeline | | messageWhenNoItems | String | | Message when there are no items | | colorDots | String | #2da1bf | Color of the dots | | uniqueTimeline | Boolean | false | If true, the timeline isn't separated | | uniqueYear | Boolean | false | If true, the timeline isn't separated when is the same year | | order | String (desc or asc) | | Type of order | | dateLocale | String | Locale of the browser | Type of locale, for example 'en-US' |

Example with order

<template>
  <Timeline
    :timeline-items="timelineItems"
    :message-when-no-items="messageWhenNoItems"
    order="desc"/>
</template>
...

Example with unique year

<template>
  <Timeline
    :timeline-items="timelineItems"
    :message-when-no-items="messageWhenNoItems"
    :unique-year="true"
    order="asc"/>
</template>
...

Example with day and month on title

If you want to show day and month on specific items, send true on prop showDayAndMonth

<script>
export default {
  data: () => ({
    timelineItems: [
      {
        from: new Date(2017, 5, 2),
        title: 'Name',
        description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
        showDayAndMonth: true
      },
      {
        from: new Date(2017, 8, 9),
        title: 'Name',
        description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.'
      }
    ]
  })
}
</script>

Example with diferent colors

<script>
export default {
  data: () => ({
    timelineItems: [
      {
        from: new Date(2017, 5, 2),
        title: 'Name',
        description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
        color: '#e74c3c'
      },
      {
        from: new Date(2017, 8, 9),
        title: 'Name',
        description: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
        color: '#2ecc71',
      }
    ]
  })
}
</script>