Nebulous Pumpkin Moons

    vue-next-timeline

    0.2.1 • Public • Published

    Vue Next Timeline

    A simple component to display a timeline in horizontal format with Vue3.

    Status

    Version js-standard-style Downloads Dependencies

    Demo

    How to install

    npm

    npm install vue-next-timeline --save

    Quick start

    Globally

    You can import in your main.js file

    import App from './App.vue'
    import { createApp } from 'vue'
    import VueNextTimeline from 'vue-next-timeline'
     
    const app = createApp(App)
    app.component(VueNextTimeline)

    Locally in any component

    import VueNextTimeline from 'vue-next-timeline'
     
    export default {
      components: {
        VueNextTimeline
      }
    };

    Basic usage

    <template>
      <vue-next-timeline :items="items" />
    </template>
     
    <script>
      export default {
        data() {
          const item1 =  {
            title: '2013',
            content: 'The international year of mathematics on planet Earth. The international year of mathematics on planet Earth',
            color: '#2785ab'
          }
          const item2 = {
            title: '2014',
            content: 'International Year of Family Farming',
            color: '#f89714'
          }
          const item3 = {
            title: '2015',
            content: 'International Year of Light and Light-Based Technologies',
            color: '#f65b78'
          }
          const items = [item1, item2, item3]
     
          return { items }
        }
      };
    </script> 

    Props

    Property name Type Default Description
    items Array [] Array of objects to be displayed. Must have at least a content property
    item-unique-key String null Key with unique value of each item in the array. Used for the v-for Key
    item-title-key String 'title' Key to display the item title
    item-content-key String 'content' Key to display the contents of the item
    item-clickable Boolean true Indicates if the title or content can be clicked to launch a $emit event with the clicked element
    min-width String '700px' Minimum width of the upper div of the component
    max-width String '1220px' Maximum width of the upper div of the component
    min-width-item String '200px' Minimum width of each item
    max-width-item String '400px' Maximum width of each item
    text-align String 'center' Alignment of item content and title
    class-name String '' Class to be used for custom styles

    Development

    contributions welcome

    Note: Contributions are very welcomed, however is very important to open a new issue using the issue template before you start working on anything, so we can discuss it before hand

    Fork the project and enter this commands in your terminal

    git clone https://github.com/cristianpoleyJS/vue-next-timeline.git
    cd vue-next-timeline
    npm install
    npm run serve

    Commitlint

    This project follows the commitlint guidelines, with minor changes.

    Contribute 🍺

    Buy Me A Coffee

    License

    MIT © cristianpoleyJS

    Install

    npm i vue-next-timeline

    DownloadsWeekly Downloads

    6

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    68.7 kB

    Total Files

    4

    Last publish

    Collaborators

    • cristianpoley