Vue- horizontal-timeline: Parallel timetable element for Vue.js #.\n\nVue-horizontal-timeline is a straightforward parallel timeline element made along with Vue.js (deal with Vue 2 & Vue 3).\nDemonstration.\nConnect along with a working Demo on https:\/\/codesandbox.io\/s\/o4o10xynoz.\nStorybook.\nVisit https:\/\/vue-horizontal-timeline.netlify.com.\nExactly how to put in.\nnpm.\n$ npm install vue-horizontal-timeline-- conserve.\nanecdote (encouraged).\n$ yarn incorporate vue-horizontal-timeline.\nFlying start.\nVue.js.\nYou can easily import in your main.js data.\nimport Vue from \"vue\".\nimport VueHorizontalTimeline from \"vue-horizontal-timeline\".\n\nVue.use( VueHorizontalTimeline)'.\n\nOr in your area in any type of component.\n\n' import VueHorizontalTimeline from \"vue-horizontal-timeline\".\n\/\/ In v0.8+ you do not need to have the brackets over.\n\nexport default \ncomponents: \nVueHorizontalTimeline,.\n,.\n.\nNuxt.js.\nYou can easily import as a Nuxt.js plugin.\n~\/ plugins\/vue-horizontal-timeline. js'.\n\n' bring in Vue from \"vue\".\nimport VueHorizontalTimeline from \"vue-horizontal-timeline\".\n\nVue.use( VueHorizontalTimeline).\n\nand after that import it in your 'nuxt.config.js' documents.\n\nplugins: [~\/ plugins\/vue-horizontal-timeline. js\"].\nBasic usage.\n\n\n\n\n\nProps.\nthings.\nStyle: Range.\nDefault: null.\nExplanation: Array of challenge be actually featured. Should contend least an information building.\nitem-selected.\nStyle: Item.\nDefault: {-String.Split- -}\nDescription: Things that is actually specified when it is actually clicked. Keep in mind that clickable uphold have to be actually set to true.\nitem-unique-key.\nKind: Strand.\nDefault: \".\nExplanation: Trick to establish a blue perimeter to the memory card when it is clicked (clickable.\nprop should be readied to real).\ntitle-attr.\nKind: Strand.\nDefault: 'headline'.\nDescription: Name of the residential property inside the objects, that remain in the things array, to place the cards headline.\ntitle-centered.\nType: Boolean.\nDefault: incorrect.\nClassification: Streamlines the cards label.\ntitle-class.\nStyle: String.\nNonpayment: \".\nDescription: If you intend to prepare a custom-made course to the memory cards title, established it below.\ntitle-substr.\nStyle: Cord.\nDefault: 18.\nDescription: Amount of figures to feature inside the cards title. Over this, will definitely put a '...' mask.\ncontent-attr.\nKind: Cord.\nNonpayment: 'web content'.\nSummary: Name of the residential property inside the items, that are in the items collection, to establish the memory cards material.\ncontent-centered.\nType: Boolean.\nNonpayment: incorrect.\nClassification: Streamlines all the cards content text.\ncontent-class.\nType: Cord.\nNonpayment: \".\nDescription: If you desire to set a customized lesson to the memory cards material, specified it listed below.\ncontent-substr.\nStyle: Strand.\nDefault: 250.\nClassification: Lot of figures to show inside the memory cards material. Above this, are going to place a '...' disguise.\nmin-width.\nType: String.\nDefault: '200px'.\nDescription: Min-width of the timetable.\nmin-height.\nType: Cord.\nNonpayment: \".\nClassification: Min-height of the timeline.\ntimeline-padding.\nStyle: Strand.\nDefault: \".\nClassification: Cushioning of the timetable.\ntimeline-background.\nKind: String.\nDefault: '#E 9E9E9'.\nDescription: History color of the entire timeline.\nline-color.\nKind: Chain.\nDefault: '
03A9F4'.Classification: Different colors of free throw line inside the timetable.clickable.Kind: Boolean.Default: real.Explanation: Helps make the memory card clickable that returns the things.You may additionally modify the measure different colors and the type of each item utilizing the stepCssClass and also boxCssClass attributes inside each thing:.const example1 = label: "Headline instance 1",.web content:." Lorem ipsum dolor rest amet, consectetur adipiscing elit. Ut ex-spouse dolor, malesuada luctus scelerisque hvac, auctor vitae risus. Vivamus risus dolor, faucibus a bibendum quis, facilisis eget odio.",.stepCssClass: 'has-step-green',.boxCssClass: 'has-color-red'..Growth.Keep in mind: Payments are actually really accepted, nevertheless is quite significant to open a new problem using the issue template before you begin working on everything, so our team can easily review it before palm.Fork the task and also enter this influences in your terminal.$ git duplicate https://github.com/YOUR_GITHUB_USERNAME/vue-horizontal-timeline.git.$ cd vue-horizontal-timeline.$ anecdote.Storybook.For aesthetic testing, this venture consists of storybook which you may run by carrying out the next order.$ anecdote storybook.Jest.Just before making the PR, if you changed something that needs to become tested, please produce the examinations inside the tests/unit file.To run the tests, you may use the following demand.$ anecdote examination: device.CSS.All the CSS goes to src/assets/css/ style.scss.If you help make any sort of changes because file, you will definitely require to manage yarn build to develop it, because the component makes use of the minified model at src/assets/css/ style.min.css.Commitlint.This job follows the commitlint standards, along with small modifications.You may dedicate making use of npm run dedicate to aid you with that said.There's a pre-push hook that runs all the unit tests just before you can drive it.If an inaccuracy develops, you can easily make use of the npm operate commit: retry demand that rushes the previous npm run commit that you actually filled up.