Vue- horizontal-timeline: Straight timetable element for Vue.js #.\n\nVue-horizontal-timeline is a simple horizontal timetable component made along with Vue.js (partner with Vue 2 &amp Vue 3).\nDemonstration.\nInteract along with a working Demo on https:\/\/codesandbox.io\/s\/o4o10xynoz.\nStorybook.\nMost likely to https:\/\/vue-horizontal-timeline.netlify.com.\nHow to put up.\nnpm.\n$ npm install vue-horizontal-timeline-- spare.\nyarn (recommended).\n$ yarn include vue-horizontal-timeline.\nQuick start.\nVue.js.\nYou can easily import in your main.js report.\nbring in Vue from \"vue\".\nimport VueHorizontalTimeline coming from \"vue-horizontal-timeline\".\n\nVue.use( VueHorizontalTimeline)'.\n\nOr regionally in any type of element.\n\n' bring in VueHorizontalTimeline from \"vue-horizontal-timeline\".\n\/\/ In v0.8+ you don't require the brackets over.\n\nexport default \ncomponents: \nVueHorizontalTimeline,.\n,.\n.\nNuxt.js.\nYou may import as a Nuxt.js plugin.\n~\/ plugins\/vue-horizontal-timeline. js'.\n\n' bring in Vue coming from \"vue\".\nimport VueHorizontalTimeline coming from \"vue-horizontal-timeline\".\n\nVue.use( VueHorizontalTimeline).\n\nand afterwards import it in your 'nuxt.config.js' report.\n\nplugins: [~\/ plugins\/vue-horizontal-timeline. js\"].\nSimple usage.\n\n\n\n\n\nProps.\nthings.\nKind: Array.\nNonpayment: null.\nExplanation: Selection of challenge be shown. Must contend least an information residential or commercial property.\nitem-selected.\nKind: Object.\nDefault: {-String.Split- -}\nSummary: Object that is set when it is clicked. Take note that clickable set have to be readied to true.\nitem-unique-key.\nType: Cord.\nNonpayment: \".\nDescription: Secret to establish a blue perimeter to the memory card when it is clicked (clickable.\nset have to be actually set to true).\ntitle-attr.\nType: Strand.\nNonpayment: 'title'.\nDescription: Call of the home inside the objects, that are in the products selection, to set the memory cards label.\ntitle-centered.\nStyle: Boolean.\nNonpayment: inaccurate.\nDescription: Rationalizes the cards label.\ntitle-class.\nKind: Strand.\nDefault: \".\nClassification: If you intend to establish a personalized training class to the cards title, set it here.\ntitle-substr.\nStyle: Strand.\nNonpayment: 18.\nClassification: Amount of personalities to feature inside the cards headline. Above this, will certainly put a '...' mask.\ncontent-attr.\nKind: Strand.\nDefault: 'web content'.\nDescription: Name of the residential property inside the things, that reside in the items selection, to set the cards material.\ncontent-centered.\nType: Boolean.\nDefault: false.\nDescription: Centralizes all the cards material message.\ncontent-class.\nKind: Cord.\nDefault: \".\nClassification: If you wish to prepare a custom-made class to the memory cards information, established it below.\ncontent-substr.\nKind: Strand.\nNonpayment: 250.\nClassification: Amount of personalities to display inside the cards information. Over this, will put a '...' hide.\nmin-width.\nType: Strand.\nNonpayment: '200px'.\nClassification: Min-width of the timetable.\nmin-height.\nType: String.\nDefault: \".\nClassification: Min-height of the timetable.\ntimeline-padding.\nType: String.\nDefault: \".\nClassification: Extra padding of the timetable.\ntimeline-background.\nKind: String.\nDefault: '#E 9E9E9'.\nDescription: History different colors of the whole timetable.\nline-color.\nType: String.\nDefault: '

03A9F4'.Description: Different colors of the line inside the timeline.clickable.Kind: Boolean.Nonpayment: true.Description: Helps make the memory card clickable that returns the object.You can easily also modify the action different colors and the design of each item making use of the stepCssClass and boxCssClass features inside each item:.const example1 = headline: "Headline instance 1",.web content:." Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ex-boyfriend dolor, malesuada luctus scelerisque air conditioner, auctor vitae risus. Vivamus risus dolor, faucibus a bibendum quis, facilisis eget odio.",.stepCssClass: 'has-step-green',.boxCssClass: 'has-color-red'..Growth.Note: Payments are quite welcomed, however is extremely important to open a brand-new concern using the concern design template before you start focusing on everything, so we can cover it before hand.Fork the venture and enter this influences in your terminal.$ git duplicate https://github.com/YOUR_GITHUB_USERNAME/vue-horizontal-timeline.git.$ cd vue-horizontal-timeline.$ yarn.Storybook.For visual testing, this project has storybook which you may function through performing the next command.$ yarn storybook.Banter.Just before helping make the PR, if you transformed one thing that requires to become assessed, feel free to make the tests inside the tests/unit folder.To run the tests, you can use the upcoming order.$ anecdote examination: system.CSS.All the CSS goes to src/assets/css/ style.scss.If you help make any kind of changes during that file, you will definitely need to run anecdote develop to create it, since the component utilizes the minified variation at src/assets/css/ style.min.css.Commitlint.This project observes the commitlint tips, along with small adjustments.You may devote making use of npm run dedicate to assist you keeping that.There is actually a pre-push hook that runs all the unit checks just before you may drive it.If a mistake happens, you may use the npm operate commit: retry demand that rushes the previous npm operate devote that you actually loaded.