Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

timeline-vuejs

Package Overview
Dependencies
Maintainers
1
Versions
47
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

timeline-vuejs

Minimalist Timeline with VueJS

  • 1.1.5
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
809
increased by6.03%
Maintainers
1
Weekly downloads
 
Created
Source

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

Keywords

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

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc