Vue- horizontal-timeline: Straight timetable element for Vue.js #.\n\nVue-horizontal-timeline is an easy parallel timeline component created along with Vue.js (deal with Vue 2 & Vue 3).\nTrial.\nEngage with a functioning Trial on https:\/\/codesandbox.io\/s\/o4o10xynoz.\nStorybook.\nVisit https:\/\/vue-horizontal-timeline.netlify.com.\nJust how to install.\nnpm.\n$ npm mount vue-horizontal-timeline-- spare.\nanecdote (encouraged).\n$ anecdote incorporate vue-horizontal-timeline.\nQuick start.\nVue.js.\nYou can easily import in your main.js file.\nimport Vue from \"vue\".\nbring in VueHorizontalTimeline from \"vue-horizontal-timeline\".\n\nVue.use( VueHorizontalTimeline)'.\n\nOr even in your area in any type of part.\n\n' import VueHorizontalTimeline from \"vue-horizontal-timeline\".\n\/\/ In v0.8+ you don't need the braces above.\n\nexport nonpayment \nelements: \nVueHorizontalTimeline,.\n,.\n.\nNuxt.js.\nYou can easily 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 then import it in your 'nuxt.config.js' documents.\n\nplugins: [~\/ plugins\/vue-horizontal-timeline. js\"].\nSimple use.\n\n\n\n\n\nProps.\nproducts.\nKind: Variety.\nDefault: null.\nExplanation: Array of contest be featured. Must contend minimum a web content residential property.\nitem-selected.\nKind: Item.\nDefault: {-String.Split- -}\nSummary: Things that is prepared when it is clicked on. Take note that clickable set need to be set to accurate.\nitem-unique-key.\nKind: String.\nDefault: \".\nSummary: Trick to prepare a blue perimeter to the card when it is actually clicked on (clickable.\nuphold have to be set to real).\ntitle-attr.\nType: Cord.\nDefault: 'label'.\nExplanation: Name of the property inside the objects, that remain in the products variety, to place the cards title.\ntitle-centered.\nKind: Boolean.\nDefault: untrue.\nDescription: Centralizes the memory cards headline.\ntitle-class.\nKind: String.\nNonpayment: \".\nClassification: If you wish to specify a custom course to the memory cards label, set it below.\ntitle-substr.\nType: String.\nDefault: 18.\nClassification: Variety of personalities to show inside the cards headline. Above this, will definitely set a '...' hide.\ncontent-attr.\nType: Cord.\nDefault: 'web content'.\nExplanation: Name of the building inside the objects, that remain in the products selection, to put the memory cards content.\ncontent-centered.\nKind: Boolean.\nNonpayment: untrue.\nClassification: Streamlines all the memory cards content text message.\ncontent-class.\nStyle: Cord.\nNonpayment: \".\nClassification: If you intend to prepare a customized lesson to the memory cards content, set it listed below.\ncontent-substr.\nStyle: Cord.\nNonpayment: 250.\nClassification: Lot of characters to display inside the cards web content. Over this, will certainly set a '...' mask.\nmin-width.\nType: Strand.\nDefault: '200px'.\nClassification: Min-width of the timeline.\nmin-height.\nType: Cord.\nDefault: \".\nClassification: Min-height of the timetable.\ntimeline-padding.\nType: Strand.\nNonpayment: \".\nClassification: Stuffing of the timetable.\ntimeline-background.\nKind: String.\nDefault: '#E 9E9E9'.\nDescription: History colour of the whole timetable.\nline-color.\nStyle: Chain.\nNonpayment: '
03A9F4'.Classification: Colour of free throw line inside the timeline.clickable.Kind: Boolean.Nonpayment: true.Explanation: Produces the memory card clickable that returns the object.You may also alter the measure different colors as well as the type of each product using the stepCssClass and also boxCssClass attributes inside each item:.const example1 = label: "Label instance 1",.information:." Lorem ipsum dolor rest amet, consectetur adipiscing elit. Ut ex-boyfriend dolor, malesuada luctus scelerisque air conditioner, auctor vitae risus. Vivamus risus dolor, faucibus a bibendum quis, facilisis eget odio.",.stepCssClass: 'has-step-green',.boxCssClass: 'has-color-red'..Progression.Keep in mind: Additions are extremely accepted, nonetheless is actually incredibly necessary to open a brand new concern utilizing the concern template just before you start focusing on everything, so our company may explain it before hand.Fork the project and also 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 task consists of storybook which you can easily work by carrying out the upcoming demand.$ anecdote storybook.Banter.Prior to creating the public relations, if you transformed something that needs to become checked, satisfy create the exams inside the tests/unit folder.To operate the exams, you can utilize the next demand.$ anecdote examination: system.CSS.All the CSS is at src/assets/css/ style.scss.If you create any sort of changes during that documents, you are going to require to manage yarn create to build it, given that the part utilizes the minified version at src/assets/css/ style.min.css.Commitlint.This task observes the commitlint guidelines, along with minor modifications.You can easily commit making use of npm operate dedicate to help you with that said.There's a pre-push hook that jogs all the device tests just before you can drive it.If a mistake occurs, you may utilize the npm operate dedicate: retry demand that runs the previous npm run devote that you currently loaded.
Articles You Can Be Interested In