timeline-vuejs

    1.1.7 • Public • Published

    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

    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> 

    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

    Install

    npm i timeline-vuejs

    DownloadsWeekly Downloads

    1,139

    Version

    1.1.7

    License

    MIT

    Unpacked Size

    837 kB

    Total Files

    22

    Last publish

    Collaborators

    • pablosirera