Vue- horizontal-timeline: Straight timeline element for Vue.js #.\n\nVue-horizontal-timeline is a basic straight timeline part made with Vue.js (partner with Vue 2 & Vue 3).\nDemo.\nSocialize along with a working Demo on https:\/\/codesandbox.io\/s\/o4o10xynoz.\nStorybook.\nGo to https:\/\/vue-horizontal-timeline.netlify.com.\nJust how to set up.\nnpm.\n$ npm install vue-horizontal-timeline-- spare.\nanecdote (suggested).\n$ yarn add vue-horizontal-timeline.\nQuick start.\nVue.js.\nYou can easily import in your main.js file.\nimport Vue coming from \"vue\".\nimport VueHorizontalTimeline coming from \"vue-horizontal-timeline\".\n\nVue.use( VueHorizontalTimeline)'.\n\nOr in your area in any component.\n\n' import VueHorizontalTimeline from \"vue-horizontal-timeline\".\n\/\/ In v0.8+ you don't require the braces over.\n\nexport default \ncomponents: \nVueHorizontalTimeline,.\n,.\n.\nNuxt.js.\nYou can import as a Nuxt.js plugin.\n~\/ plugins\/vue-horizontal-timeline. js'.\n\n' import Vue coming from \"vue\".\nimport VueHorizontalTimeline from \"vue-horizontal-timeline\".\n\nVue.use( VueHorizontalTimeline).\n\nand after that import it in your 'nuxt.config.js' data.\n\nplugins: [~\/ plugins\/vue-horizontal-timeline. js\"].\nGeneral usage.\n\n\n\n\n\nProps.\nproducts.\nKind: Collection.\nNonpayment: null.\nDescription: Assortment of contest be displayed. Must contend minimum a content home.\nitem-selected.\nStyle: Item.\nNonpayment: {-String.Split- -}\nDescription: Things that is specified when it is actually clicked on. Take note that clickable uphold have to be actually set to correct.\nitem-unique-key.\nType: Strand.\nDefault: \".\nExplanation: Key to establish a blue border to the card when it is actually clicked (clickable.\nprop need to be set to true).\ntitle-attr.\nKind: Strand.\nNonpayment: 'headline'.\nDescription: Name of the building inside the things, that are in the products array, to put the cards label.\ntitle-centered.\nKind: Boolean.\nNonpayment: untrue.\nDescription: Streamlines the memory cards title.\ntitle-class.\nStyle: Cord.\nNonpayment: \".\nClassification: If you wish to set a custom-made training class to the memory cards title, established it listed below.\ntitle-substr.\nKind: String.\nNonpayment: 18.\nClassification: Amount of personalities to feature inside the cards headline. Above this, will put a '...' disguise.\ncontent-attr.\nKind: String.\nDefault: 'information'.\nDescription: Name of the residential property inside the items, that remain in the items assortment, to put the memory cards web content.\ncontent-centered.\nType: Boolean.\nDefault: misleading.\nDescription: Rationalizes all the cards material text message.\ncontent-class.\nType: Strand.\nNonpayment: \".\nDescription: If you want to set a custom lesson to the memory cards content, specified it listed below.\ncontent-substr.\nKind: Strand.\nDefault: 250.\nClassification: Number of personalities to show inside the memory cards web content. Over this, are going to place a '...' mask.\nmin-width.\nStyle: Strand.\nNonpayment: '200px'.\nDescription: Min-width of the timetable.\nmin-height.\nStyle: String.\nDefault: \".\nDescription: Min-height of the timetable.\ntimeline-padding.\nKind: Cord.\nNonpayment: \".\nClassification: Cushioning of the timeline.\ntimeline-background.\nStyle: Strand.\nDefault: '#E 9E9E9'.\nClassification: History colour of the whole timetable.\nline-color.\nStyle: Chain.\nDefault: '
03A9F4'.Description: Color of the line inside the timeline.clickable.Kind: Boolean.Default: true.Summary: Makes the memory card clickable that returns the things.You may likewise transform the measure different colors as well as the design of each item utilizing the stepCssClass and also boxCssClass qualities inside each product:.const example1 = label: "Headline example 1",.content:." Lorem ipsum dolor rest amet, consectetur adipiscing elit. Ut ex-boyfriend 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'..Advancement.Keep in mind: Payments are actually quite welcomed, having said that is very essential to open a brand-new concern utilizing the problem template just before you begin working with everything, so our company may review it prior to palm.Fork the job and enter this regulates in your terminal.$ git clone https://github.com/YOUR_GITHUB_USERNAME/vue-horizontal-timeline.git.$ cd vue-horizontal-timeline.$ yarn.Storybook.For aesthetic testing, this job consists of storybook which you can run by doing the following order.$ yarn storybook.Jest.Before producing the public relations, if you changed something that needs to have to be assessed, satisfy make the exams inside the tests/unit folder.To manage the tests, you may make use of the next command.$ anecdote test: system.CSS.All the CSS goes to src/assets/css/ style.scss.If you produce any sort of improvements during that file, you will need to have to run anecdote create to construct it, considering that the element utilizes the minified version at src/assets/css/ style.min.css.Commitlint.This job adheres to the commitlint standards, along with minor improvements.You may commit using npm operate devote to help you with that said.There is actually a pre-push hook that runs all the device assesses before you can drive it.If an inaccuracy develops, you can utilize the npm operate devote: retry order that runs the previous npm operate commit that you already filled up.