Vue- horizontal-timeline: Parallel timeline element for Vue.js #.\n\nVue-horizontal-timeline is actually an easy straight timeline part made along with Vue.js (partner with Vue 2 & Vue 3).\nDemo.\nInteract along with an operating Trial on https:\/\/codesandbox.io\/s\/o4o10xynoz.\nStorybook.\nVisit https:\/\/vue-horizontal-timeline.netlify.com.\nExactly how to mount.\nnpm.\n$ npm put up vue-horizontal-timeline-- conserve.\nanecdote (advised).\n$ yarn include vue-horizontal-timeline.\nFlying start.\nVue.js.\nYou may import in your main.js report.\nbring in Vue from \"vue\".\nimport VueHorizontalTimeline from \"vue-horizontal-timeline\".\n\nVue.use( VueHorizontalTimeline)'.\n\nOr locally in any element.\n\n' import VueHorizontalTimeline coming from \"vue-horizontal-timeline\".\n\/\/ In v0.8+ you don't require the braces above.\n\nexport default \nparts: \nVueHorizontalTimeline,.\n,.\n.\nNuxt.js.\nYou may import as a Nuxt.js plugin.\n~\/ plugins\/vue-horizontal-timeline. js'.\n\n' import Vue from \"vue\".\nimport VueHorizontalTimeline from \"vue-horizontal-timeline\".\n\nVue.use( VueHorizontalTimeline).\n\nand after that import it in your 'nuxt.config.js' report.\n\nplugins: [~\/ plugins\/vue-horizontal-timeline. js\"].\nGeneral use.\n\n\n\n\n\nProps.\nitems.\nKind: Collection.\nNonpayment: null.\nSummary: Range of objects to be actually shown. Must contend the very least a web content residential property.\nitem-selected.\nType: Object.\nDefault: {-String.Split- -}\nExplanation: Object that is actually established when it is clicked. Note that clickable set should be actually set to real.\nitem-unique-key.\nStyle: Strand.\nDefault: \".\nDescription: Secret to prepare a blue perimeter to the card when it is clicked on (clickable.\nset must be actually set to correct).\ntitle-attr.\nStyle: Cord.\nDefault: 'title'.\nDescription: Call of the residential property inside the objects, that remain in the things assortment, to put the memory cards headline.\ntitle-centered.\nStyle: Boolean.\nDefault: untrue.\nClassification: Centralizes the cards title.\ntitle-class.\nKind: Cord.\nNonpayment: \".\nClassification: If you desire to specify a personalized class to the cards headline, prepared it below.\ntitle-substr.\nType: String.\nDefault: 18.\nDescription: Number of figures to show inside the cards title. Above this, will certainly put a '...' disguise.\ncontent-attr.\nStyle: String.\nNonpayment: 'material'.\nExplanation: Name of the property inside the things, that are in the items collection, to place the cards content.\ncontent-centered.\nKind: Boolean.\nNonpayment: inaccurate.\nDescription: Rationalizes all the memory cards satisfied message.\ncontent-class.\nType: String.\nNonpayment: \".\nClassification: If you intend to establish a personalized training class to the memory cards material, set it listed below.\ncontent-substr.\nStyle: Strand.\nNonpayment: 250.\nDescription: Amount of characters to display inside the cards web content. Over this, will certainly place a '...' disguise.\nmin-width.\nKind: Cord.\nDefault: '200px'.\nClassification: Min-width of the timetable.\nmin-height.\nType: Strand.\nDefault: \".\nClassification: Min-height of the timetable.\ntimeline-padding.\nType: String.\nNonpayment: \".\nDescription: Cushioning of the timetable.\ntimeline-background.\nType: String.\nDefault: '#E 9E9E9'.\nClassification: History colour of the entire timetable.\nline-color.\nType: String.\nNonpayment: '
03A9F4'.Description: Different colors of the line inside the timetable.clickable.Kind: Boolean.Nonpayment: correct.Summary: Produces the memory card clickable that returns the things.You may likewise change the action color and the type of each thing utilizing the stepCssClass as well as boxCssClass characteristics inside each item:.const example1 = headline: "Label instance 1",.web content:." Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ex-spouse 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'..Development.Keep in mind: Contributions are actually incredibly welcomed, nevertheless is really crucial to open a brand new concern using the concern template before you begin focusing on everything, so our team can explain it just before palm.Fork the task and 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 visual screening, this job includes storybook which you can easily run by performing the upcoming command.$ anecdote storybook.Banter.Before making the public relations, if you altered something that needs to have to be evaluated, feel free to produce the tests inside the tests/unit folder.To operate the exams, you can easily use the upcoming command.$ anecdote examination: unit.CSS.All the CSS goes to src/assets/css/ style.scss.If you make any changes in that data, you will definitely require to run yarn develop to construct it, since the part utilizes the minified model at src/assets/css/ style.min.css.Commitlint.This project observes the commitlint suggestions, with minor adjustments.You can dedicate using npm run dedicate to assist you with that.There's a pre-push hook that jogs all the system checks before you can drive it.If a mistake develops, you may use the npm run dedicate: retry demand that runs the previous npm operate commit that you presently loaded.
Articles You Can Be Interested In