Vue- horizontal-timeline: Parallel timetable component for Vue.js #.\n\nVue-horizontal-timeline is a straightforward parallel timeline element created along with Vue.js (team up with Vue 2 & Vue 3).\nDemonstration.\nConnect along with an operating Trial on https:\/\/codesandbox.io\/s\/o4o10xynoz.\nStorybook.\nMost likely to https:\/\/vue-horizontal-timeline.netlify.com.\nExactly how to put in.\nnpm.\n$ npm set up vue-horizontal-timeline-- conserve.\nanecdote (suggested).\n$ anecdote incorporate vue-horizontal-timeline.\nQuick start.\nVue.js.\nYou can import in your main.js report.\nimport Vue from \"vue\".\nimport VueHorizontalTimeline coming from \"vue-horizontal-timeline\".\n\nVue.use( VueHorizontalTimeline)'.\n\nOr even regionally in any sort of element.\n\n' import VueHorizontalTimeline coming from \"vue-horizontal-timeline\".\n\/\/ In v0.8+ you do not need the brackets over.\n\nexport nonpayment \nelements: \nVueHorizontalTimeline,.\n,.\n.\nNuxt.js.\nYou may import as a Nuxt.js plugin.\n~\/ plugins\/vue-horizontal-timeline. js'.\n\n' import Vue coming from \"vue\".\nbring in VueHorizontalTimeline coming from \"vue-horizontal-timeline\".\n\nVue.use( VueHorizontalTimeline).\n\nand then import it in your 'nuxt.config.js' report.\n\nplugins: [~\/ plugins\/vue-horizontal-timeline. js\"].\nStandard use.\n\n\n\n\n\nProps.\nthings.\nType: Collection.\nNonpayment: null.\nDescription: Variety of objects to be actually featured. Should contend least a web content residential property.\nitem-selected.\nType: Object.\nDefault: {-String.Split- -}\nSummary: Item that is actually specified when it is actually clicked. Take note that clickable uphold should be actually readied to real.\nitem-unique-key.\nType: Strand.\nDefault: \".\nDescription: Key to specify a blue border to the card when it is actually clicked (clickable.\nprop need to be readied to true).\ntitle-attr.\nKind: String.\nDefault: 'title'.\nSummary: Name of the home inside the things, that are in the items range, to put the memory cards label.\ntitle-centered.\nStyle: Boolean.\nNonpayment: incorrect.\nDescription: Centralizes the cards label.\ntitle-class.\nType: Cord.\nDefault: \".\nDescription: If you would like to prepare a personalized lesson to the cards label, prepared it listed here.\ntitle-substr.\nType: String.\nDefault: 18.\nDescription: Variety of figures to display inside the cards headline. Above this, will definitely establish a '...' mask.\ncontent-attr.\nType: String.\nNonpayment: 'web content'.\nSummary: Name of the residential property inside the objects, that reside in the items range, to put the cards web content.\ncontent-centered.\nType: Boolean.\nDefault: misleading.\nClassification: Centralizes all the cards satisfied message.\ncontent-class.\nKind: String.\nDefault: \".\nClassification: If you want to prepare a custom-made class to the memory cards information, established it here.\ncontent-substr.\nType: String.\nNonpayment: 250.\nClassification: Variety of personalities to present inside the cards information. Above this, are going to set a '...' disguise.\nmin-width.\nStyle: Cord.\nNonpayment: '200px'.\nDescription: Min-width of the timeline.\nmin-height.\nKind: Cord.\nDefault: \".\nClassification: Min-height of the timeline.\ntimeline-padding.\nKind: Cord.\nNonpayment: \".\nClassification: Extra padding of the timeline.\ntimeline-background.\nKind: Strand.\nDefault: '#E 9E9E9'.\nClassification: Background color of the whole timeline.\nline-color.\nKind: String.\nDefault: '
03A9F4'.Description: Shade of free throw line inside the timetable.clickable.Style: Boolean.Nonpayment: accurate.Summary: Creates the card clickable that returns the object.You can also modify the action different colors and also the type of each item utilizing the stepCssClass and also boxCssClass characteristics inside each thing:.const example1 = label: "Title example 1",.material:." Lorem ipsum dolor rest amet, consectetur adipiscing elit. Ut ex dolor, malesuada luctus scelerisque ac, auctor vitae risus. Vivamus risus dolor, faucibus a bibendum quis, facilisis eget odio.",.stepCssClass: 'has-step-green',.boxCssClass: 'has-color-red'..Growth.Take note: Additions are really accepted, nevertheless is incredibly necessary to open up a brand new concern using the concern layout before you start servicing everything, so our team can easily review it prior to hand.Fork the task and enter this influences in your terminal.$ git clone https://github.com/YOUR_GITHUB_USERNAME/vue-horizontal-timeline.git.$ cd vue-horizontal-timeline.$ anecdote.Storybook.For graphic testing, this job contains storybook which you can run by carrying out the next command.$ yarn storybook.Jest.Prior to making the public relations, if you modified something that requires to become tested, feel free to make the exams inside the tests/unit directory.To operate the exams, you can use the upcoming order.$ anecdote examination: device.CSS.All the CSS is at src/assets/css/ style.scss.If you produce any changes because data, you will certainly require to run anecdote create to build it, given that the part uses the minified version at src/assets/css/ style.min.css.Commitlint.This project observes the commitlint guidelines, along with slight adjustments.You may devote utilizing npm run commit to aid you keeping that.There is actually a pre-push hook that runs all the unit evaluates before you can push it.If an error happens, you may make use of the npm run dedicate: retry command that runs the previous npm operate devote that you currently packed.
Articles You Can Be Interested In