Vue- horizontal-timeline: Parallel timeline component for Vue.js #.\n\nVue-horizontal-timeline is a simple straight timeline element made along with Vue.js (partner with Vue 2 & Vue 3).\nDemonstration.\nInteract along with an operating Demonstration on https:\/\/codesandbox.io\/s\/o4o10xynoz.\nStorybook.\nGo to https:\/\/vue-horizontal-timeline.netlify.com.\nExactly how to mount.\nnpm.\n$ npm set up vue-horizontal-timeline-- save.\nyarn (suggested).\n$ anecdote incorporate vue-horizontal-timeline.\nQuick start.\nVue.js.\nYou can easily import in your main.js data.\nbring in Vue coming from \"vue\".\nbring in VueHorizontalTimeline coming from \"vue-horizontal-timeline\".\n\nVue.use( VueHorizontalTimeline)'.\n\nOr in your area in any kind of part.\n\n' bring in VueHorizontalTimeline from \"vue-horizontal-timeline\".\n\/\/ In v0.8+ you do not need to have the brackets over.\n\nexport default \nelements: \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 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\"].\nSimple usage.\n\n\n\n\n\nProps.\nitems.\nStyle: Collection.\nDefault: null.\nExplanation: Assortment of contest be actually displayed. Need to contend minimum a material building.\nitem-selected.\nStyle: Object.\nNonpayment: {-String.Split- -}\nDescription: Item that is established when it is clicked on. Note that clickable uphold have to be actually set to true.\nitem-unique-key.\nKind: Strand.\nDefault: \".\nDescription: Key to specify a blue perimeter to the memory card when it is clicked (clickable.\nuphold need to be set to true).\ntitle-attr.\nKind: Strand.\nDefault: 'headline'.\nExplanation: Call of the residential property inside the things, that remain in the items variety, to place the memory cards headline.\ntitle-centered.\nType: Boolean.\nNonpayment: misleading.\nDescription: Streamlines the cards headline.\ntitle-class.\nType: String.\nNonpayment: \".\nClassification: If you would like to set a customized lesson to the memory cards headline, prepared it listed here.\ntitle-substr.\nKind: Strand.\nDefault: 18.\nDescription: Number of figures to show inside the memory cards label. Over this, are going to establish a '...' cover-up.\ncontent-attr.\nStyle: Cord.\nNonpayment: 'content'.\nExplanation: Call of the residential property inside the items, that remain in the items collection, to establish the memory cards content.\ncontent-centered.\nType: Boolean.\nDefault: misleading.\nClassification: Streamlines all the memory cards satisfied text message.\ncontent-class.\nStyle: Strand.\nDefault: \".\nDescription: If you wish to specify a customized lesson to the cards content, set it below.\ncontent-substr.\nKind: String.\nDefault: 250.\nDescription: Variety of characters to present inside the memory cards information. Over this, will establish a '...' hide.\nmin-width.\nKind: Cord.\nDefault: '200px'.\nClassification: Min-width of the timetable.\nmin-height.\nType: Cord.\nNonpayment: \".\nClassification: Min-height of the timetable.\ntimeline-padding.\nType: Strand.\nDefault: \".\nDescription: Extra padding of the timetable.\ntimeline-background.\nKind: Cord.\nDefault: '#E 9E9E9'.\nClassification: History color of the entire timetable.\nline-color.\nType: Chain.\nDefault: '
03A9F4'.Classification: Colour of free throw line inside the timeline.clickable.Kind: Boolean.Default: correct.Summary: Helps make the memory card clickable that returns the object.You may also alter the measure colour and also the design of each thing utilizing the stepCssClass and also boxCssClass qualities inside each item:.const example1 = label: "Title example 1",.material:." Lorem ipsum dolor sit 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: Additions are actually very invited, having said that is really significant to open up a brand new concern utilizing the problem design template prior to you start dealing with everything, so our company can explain it before hand.Fork the task as well as enter this regulates in your terminal.$ git duplicate https://github.com/YOUR_GITHUB_USERNAME/vue-horizontal-timeline.git.$ cd vue-horizontal-timeline.$ yarn.Storybook.For graphic testing, this task consists of storybook which you can run through doing the upcoming demand.$ anecdote storybook.Jest.Just before helping make the public relations, if you modified one thing that requires to be checked, satisfy help make the examinations inside the tests/unit file.To run the exams, you can easily utilize the next command.$ anecdote test: system.CSS.All the CSS is at src/assets/css/ style.scss.If you produce any improvements during that file, you will require to run yarn create to construct it, due to the fact that the component makes use of the minified version at src/assets/css/ style.min.css.Commitlint.This project adheres to the commitlint suggestions, with slight changes.You may dedicate using npm run commit to assist you with that said.There is actually a pre-push hook that jogs all the device evaluates prior to you can drive it.If a mistake takes place, you can easily use the npm operate devote: retry order that dashes the previous npm run commit that you currently filled up.
Articles You Can Be Interested In