🚀 Big News: Socket Acquires Coana to Bring Reachability Analysis to Every Appsec Team.Learn more

timeline-vuejs

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

timeline-vuejs

Minimalist Timeline with VueJS

1.1.7
latest
Version published
Weekly downloads
579
-14.6%
Maintainers
1
Weekly downloads
 
Created

Timeline Vuejs

npm downloads Twitter

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

PropsTypeDefaultDescription
timelineItemsArray[ ]Items value of the timeline
messageWhenNoItemsStringMessage when there are no items
colorDotsString#2da1bfColor of the dots
uniqueTimelineBooleanfalseIf true, the timeline isn't separated
uniqueYearBooleanfalseIf true, the timeline isn't separated when is the same year
orderString (desc or asc)Type of order
dateLocaleStringLocale of the browserType 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>

License

timeline-vuejs © Pablo Sirera, released under the MIT License.
Authored and maintained by Pablo Sirera with help from contributors.

pablosirera.com · GitHub Pablo Sirera · Twitter @pablosirera

FAQs

Package last updated on 30 Jul 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts