Vue- horizontal-timeline: Straight timeline part for Vue.js #.\n\nVue-horizontal-timeline is a simple horizontal timetable part made along with Vue.js (team up with Vue 2 & Vue 3).\nDemonstration.\nSocialize along with an operating Trial on https:\/\/codesandbox.io\/s\/o4o10xynoz.\nStorybook.\nVisit https:\/\/vue-horizontal-timeline.netlify.com.\nJust how to put up.\nnpm.\n$ npm install vue-horizontal-timeline-- save.\nyarn (suggested).\n$ anecdote incorporate vue-horizontal-timeline.\nFlying start.\nVue.js.\nYou can easily import in your main.js documents.\nimport Vue from \"vue\".\nimport VueHorizontalTimeline from \"vue-horizontal-timeline\".\n\nVue.use( VueHorizontalTimeline)'.\n\nOr even locally in any sort of element.\n\n' import VueHorizontalTimeline from \"vue-horizontal-timeline\".\n\/\/ In v0.8+ you do not require the braces over.\n\nexport default \nparts: \nVueHorizontalTimeline,.\n,.\n.\nNuxt.js.\nYou can import as a Nuxt.js plugin.\n~\/ plugins\/vue-horizontal-timeline. js'.\n\n' bring in Vue from \"vue\".\nimport VueHorizontalTimeline coming 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\"].\nBasic use.\n\n\n\n\n\nProps.\nitems.\nStyle: Assortment.\nDefault: null.\nDescription: Range of contest be actually featured. Should have at the very least a material residential property.\nitem-selected.\nStyle: Object.\nNonpayment: {-String.Split- -}\nDescription: Things that is set when it is actually clicked on. Take note that clickable prop must be actually set to accurate.\nitem-unique-key.\nType: Strand.\nDefault: \".\nDescription: Trick to prepare a blue boundary to the card when it is clicked on (clickable.\nset need to be readied to real).\ntitle-attr.\nType: Strand.\nNonpayment: 'headline'.\nExplanation: Call of the home inside the things, that reside in the products collection, to place the memory cards headline.\ntitle-centered.\nKind: Boolean.\nNonpayment: incorrect.\nDescription: Rationalizes the cards label.\ntitle-class.\nStyle: Cord.\nDefault: \".\nClassification: If you want to specify a custom-made course to the cards headline, established it listed below.\ntitle-substr.\nType: Strand.\nNonpayment: 18.\nDescription: Amount of figures to present inside the cards title. Above this, will certainly establish a '...' face mask.\ncontent-attr.\nKind: String.\nDefault: 'material'.\nExplanation: Call of the residential or commercial property inside the objects, that remain in the things range, to place the memory cards web content.\ncontent-centered.\nStyle: Boolean.\nNonpayment: false.\nDescription: Rationalizes all the cards satisfied message.\ncontent-class.\nStyle: Cord.\nDefault: \".\nDescription: If you want to specify a custom-made class to the memory cards content, prepared it right here.\ncontent-substr.\nKind: String.\nDefault: 250.\nClassification: Amount of characters to present inside the memory cards material. Above this, are going to set a '...' cover-up.\nmin-width.\nType: Strand.\nNonpayment: '200px'.\nClassification: Min-width of the timeline.\nmin-height.\nType: Cord.\nDefault: \".\nClassification: Min-height of the timeline.\ntimeline-padding.\nType: Cord.\nDefault: \".\nClassification: Padding of the timeline.\ntimeline-background.\nType: String.\nNonpayment: '#E 9E9E9'.\nClassification: Background colour of the whole timeline.\nline-color.\nType: String.\nDefault: '
03A9F4'.Classification: Different colors of the line inside the timeline.clickable.Style: Boolean.Nonpayment: correct.Description: Helps make the memory card clickable that returns the object.You can easily likewise transform the action colour as well as the design of each item utilizing the stepCssClass and boxCssClass attributes inside each item:.const example1 = label: "Label example 1",.web content:." Lorem ipsum dolor rest amet, consectetur adipiscing elit. Ut ex-boyfriend 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'..Advancement.Take note: Payments are very accepted, nonetheless is actually quite essential to open up a brand new issue making use of the concern layout before you start working on anything, so our experts can easily explain it prior to palm.Fork the task and enter this commands in your terminal.$ git clone https://github.com/YOUR_GITHUB_USERNAME/vue-horizontal-timeline.git.$ cd vue-horizontal-timeline.$ anecdote.Storybook.For visual testing, this venture consists of storybook which you can easily run through carrying out the following order.$ anecdote storybook.Banter.Prior to producing the public relations, if you altered one thing that needs to become examined, satisfy create the examinations inside the tests/unit folder.To manage the examinations, you can easily make use of the following command.$ yarn examination: device.CSS.All the CSS goes to src/assets/css/ style.scss.If you help make any sort of adjustments in that file, you will certainly need to have to manage yarn develop to build it, considering that the element uses the minified variation at src/assets/css/ style.min.css.Commitlint.This project complies with the commitlint suggestions, along with minor adjustments.You can easily dedicate utilizing npm run dedicate to assist you keeping that.There's a pre-push hook that rushes all the unit tests prior to you can easily press it.If a mistake happens, you can easily make use of the npm run dedicate: retry order that jogs the previous npm run devote that you already loaded.
Articles You Can Be Interested In