imagetimeline-vuejs v1.0.7

Demo Timeline Vue

📦 Install

npm install imagetimeline-vuejs --save

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

// component.vue
<script>
  import Timeline from 'imagetimeline-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',
    dataTimeline: [
      {
        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.',
        image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Kreta_-_Europastra%C3%9Fe75_1.jpg/500px-Kreta_-_Europastra%C3%9Fe75_1.jpg'
      },
      {
        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.',
        image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Kreta_-_Europastra%C3%9Fe75_1.jpg/500px-Kreta_-_Europastra%C3%9Fe75_1.jpg'
      },
      {
        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.',
        image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Kreta_-_Europastra%C3%9Fe75_1.jpg/500px-Kreta_-_Europastra%C3%9Fe75_1.jpg'
      },
      {
        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.',
        image: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/15/Kreta_-_Europastra%C3%9Fe75_1.jpg/500px-Kreta_-_Europastra%C3%9Fe75_1.jpg'
      }
    ]
  })
}
</script>

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>
...

Available props