Vue- horizontal-timeline: Horizontal timetable part for Vue.js #.\n\nVue-horizontal-timeline is actually a straightforward straight timeline element made with Vue.js (team up with Vue 2 & Vue 3).\nTrial.\nCommunicate along with a functioning Demo on https:\/\/codesandbox.io\/s\/o4o10xynoz.\nStorybook.\nVisit https:\/\/vue-horizontal-timeline.netlify.com.\nHow to put in.\nnpm.\n$ npm put in vue-horizontal-timeline-- conserve.\nanecdote (recommended).\n$ yarn include vue-horizontal-timeline.\nQuick start.\nVue.js.\nYou can easily import in your main.js file.\nimport Vue coming from \"vue\".\nimport VueHorizontalTimeline from \"vue-horizontal-timeline\".\n\nVue.use( VueHorizontalTimeline)'.\n\nOr even locally in any type of part.\n\n' import VueHorizontalTimeline coming from \"vue-horizontal-timeline\".\n\/\/ In v0.8+ you do not need to have the braces above.\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 from \"vue\".\nbring in VueHorizontalTimeline coming from \"vue-horizontal-timeline\".\n\nVue.use( VueHorizontalTimeline).\n\nand then import it in your 'nuxt.config.js' data.\n\nplugins: [~\/ plugins\/vue-horizontal-timeline. js\"].\nFundamental usage.\n\n\n\n\n\nProps.\nitems.\nKind: Range.\nNonpayment: null.\nSummary: Assortment of objects to be displayed. Need to have at least an information residential or commercial property.\nitem-selected.\nType: Item.\nNonpayment: {-String.Split- -}\nExplanation: Item that is set when it is clicked on. Note that clickable prop need to be readied to accurate.\nitem-unique-key.\nStyle: Cord.\nDefault: \".\nDescription: Trick to specify a blue border to the memory card when it is clicked on (clickable.\nuphold need to be actually readied to real).\ntitle-attr.\nType: Cord.\nDefault: 'headline'.\nExplanation: Name of the residential property inside the objects, that remain in the products assortment, to put the memory cards label.\ntitle-centered.\nType: Boolean.\nNonpayment: incorrect.\nDescription: Rationalizes the memory cards headline.\ntitle-class.\nStyle: Strand.\nNonpayment: \".\nDescription: If you would like to establish a custom lesson to the cards headline, established it right here.\ntitle-substr.\nStyle: Strand.\nDefault: 18.\nDescription: Number of figures to show inside the memory cards headline. Over this, will certainly put a '...' cover-up.\ncontent-attr.\nType: Cord.\nNonpayment: 'information'.\nDescription: Name of the home inside the items, that remain in the items collection, to place the cards web content.\ncontent-centered.\nStyle: Boolean.\nDefault: false.\nClassification: Rationalizes all the cards content message.\ncontent-class.\nStyle: Cord.\nDefault: \".\nClassification: If you want to establish a personalized training class to the memory cards content, specified it here.\ncontent-substr.\nKind: String.\nNonpayment: 250.\nClassification: Amount of figures to present inside the cards content. Above this, are going to set a '...' cover-up.\nmin-width.\nStyle: Strand.\nDefault: '200px'.\nDescription: Min-width of the timeline.\nmin-height.\nType: Strand.\nDefault: \".\nDescription: Min-height of the timetable.\ntimeline-padding.\nStyle: Strand.\nNonpayment: \".\nClassification: Stuffing of the timeline.\ntimeline-background.\nType: String.\nNonpayment: '#E 9E9E9'.\nClassification: History colour of the whole timetable.\nline-color.\nType: Chain.\nNonpayment: '
03A9F4'.Description: Shade of free throw line inside the timetable.clickable.Style: Boolean.Nonpayment: true.Summary: Makes the memory card clickable that returns the object.You can easily also transform the step shade and also the type of each product making use of the stepCssClass as well as boxCssClass features inside each product:.const example1 = label: "Label example 1",.information:." Lorem ipsum dolor rest amet, consectetur adipiscing elit. Ut ex-boyfriend 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'..Growth.Keep in mind: Payments are quite invited, nonetheless is actually extremely significant to open a brand new concern utilizing the problem layout before you begin servicing everything, so our experts can cover it before hand.Fork the job as well as enter this influences in your terminal.$ git clone https://github.com/YOUR_GITHUB_USERNAME/vue-horizontal-timeline.git.$ cd vue-horizontal-timeline.$ yarn.Storybook.For graphic testing, this job consists of storybook which you may operate through carrying out the following command.$ yarn storybook.Banter.Prior to producing the PR, if you changed one thing that needs to have to become assessed, please help make the exams inside the tests/unit folder.To run the tests, you can easily make use of the following command.$ anecdote exam: unit.CSS.All the CSS goes to src/assets/css/ style.scss.If you help make any sort of changes in that data, you will require to manage anecdote create to create it, due to the fact that the element makes use of the minified model at src/assets/css/ style.min.css.Commitlint.This venture complies with the commitlint tips, along with minor improvements.You can easily commit using npm run commit to assist you with that said.There's a pre-push hook that dashes all the system checks prior to you can press it.If an error takes place, you can use the npm operate devote: retry demand that jogs the previous npm operate devote that you currently loaded.
Articles You Can Be Interested In