Vue- horizontal-timeline: Parallel timeline element for Vue.js #.\n\nVue-horizontal-timeline is a straightforward parallel timetable component brought in along with Vue.js (partner with Vue 2 &amp Vue 3).\nDemonstration.\nCommunicate along with a working Demo on https:\/\/codesandbox.io\/s\/o4o10xynoz.\nStorybook.\nVisit https:\/\/vue-horizontal-timeline.netlify.com.\nJust how to put in.\nnpm.\n$ npm install vue-horizontal-timeline-- conserve.\nanecdote (recommended).\n$ anecdote incorporate vue-horizontal-timeline.\nFlying start.\nVue.js.\nYou can easily import in your main.js data.\nbring in Vue from \"vue\".\nbring in VueHorizontalTimeline coming from \"vue-horizontal-timeline\".\n\nVue.use( VueHorizontalTimeline)'.\n\nOr locally in any sort of part.\n\n' bring in VueHorizontalTimeline coming from \"vue-horizontal-timeline\".\n\/\/ In v0.8+ you don't require the brackets above.\n\nexport nonpayment \ncomponents: \nVueHorizontalTimeline,.\n,.\n.\nNuxt.js.\nYou can 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\"].\nBasic consumption.\n\n\n\n\n\nProps.\nproducts.\nStyle: Selection.\nDefault: null.\nExplanation: Assortment of objects to be presented. Need to have at least an information building.\nitem-selected.\nType: Item.\nDefault: {-String.Split- -}\nSummary: Object that is established when it is clicked. Take note that clickable prop should be actually set to real.\nitem-unique-key.\nType: Strand.\nDefault: \".\nExplanation: Key to set a blue perimeter to the memory card when it is clicked on (clickable.\nprop should be actually set to correct).\ntitle-attr.\nStyle: Cord.\nDefault: 'headline'.\nSummary: Name of the building inside the objects, that remain in the products variety, to place the cards headline.\ntitle-centered.\nKind: Boolean.\nNonpayment: misleading.\nClassification: Systematizes the cards label.\ntitle-class.\nKind: String.\nNonpayment: \".\nClassification: If you want to establish a custom-made course to the memory cards headline, established it listed here.\ntitle-substr.\nType: Cord.\nDefault: 18.\nDescription: Number of characters to present inside the memory cards title. Over this, are going to establish a '...' cover-up.\ncontent-attr.\nType: String.\nNonpayment: 'web content'.\nDescription: Name of the building inside the objects, that remain in the items array, to set the memory cards content.\ncontent-centered.\nKind: Boolean.\nDefault: untrue.\nClassification: Rationalizes all the memory cards satisfied text message.\ncontent-class.\nType: String.\nNonpayment: \".\nDescription: If you want to prepare a personalized course to the cards content, specified it below.\ncontent-substr.\nStyle: String.\nNonpayment: 250.\nDescription: Number of figures to show inside the cards material. Above this, are going to put a '...' face mask.\nmin-width.\nStyle: Cord.\nNonpayment: '200px'.\nClassification: Min-width of the timetable.\nmin-height.\nStyle: Strand.\nNonpayment: \".\nClassification: Min-height of the timetable.\ntimeline-padding.\nType: Cord.\nNonpayment: \".\nDescription: Stuffing of the timeline.\ntimeline-background.\nStyle: Strand.\nNonpayment: '#E 9E9E9'.\nDescription: History colour of the whole timetable.\nline-color.\nStyle: String.\nNonpayment: '

03A9F4'.Description: Color of free throw line inside the timetable.clickable.Style: Boolean.Nonpayment: accurate.Summary: Helps make the memory card clickable that returns the item.You can also transform the measure color and the style of each item utilizing the stepCssClass and boxCssClass features inside each product:.const example1 = label: "Label example 1",.content:." Lorem ipsum dolor rest amet, consectetur adipiscing elit. Ut ex lover dolor, malesuada luctus scelerisque air conditioning, auctor vitae risus. Vivamus risus dolor, faucibus a bibendum quis, facilisis eget odio.",.stepCssClass: 'has-step-green',.boxCssClass: 'has-color-red'..Advancement.Note: Additions are actually incredibly invited, nonetheless is incredibly crucial to open a new concern making use of the concern template just before you start focusing on just about anything, so our team can easily explain it just before palm.Fork the job as well as 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 aesthetic screening, this venture contains storybook which you can function by carrying out the next demand.$ yarn storybook.Banter.Before producing the PR, if you altered one thing that needs to become checked, please produce the examinations inside the tests/unit folder.To operate the examinations, you can make use of the upcoming order.$ anecdote exam: unit.CSS.All the CSS is at src/assets/css/ style.scss.If you produce any changes because documents, you will definitely need to have to operate anecdote construct to build it, since the component uses the minified version at src/assets/css/ style.min.css.Commitlint.This project complies with the commitlint suggestions, along with slight adjustments.You can easily devote using npm run commit to assist you with that said.There's a pre-push hook that jogs all the device evaluates prior to you can easily drive it.If an inaccuracy occurs, you may utilize the npm operate dedicate: retry order that rushes the previous npm operate devote that you presently filled.