Vue- Incentives - Vue.js Supplied #.\n\nVue-rewards allows you add micro-interactions to your Vue 3 app, as well as perks users along with the rain of confetti, emoji or even balloons in few seconds.\n\nVue 3 only. Not appropriate with Vue 2.\nThis package deal is actually a port of react-rewards.\nDemo.\nRight here is actually a simple demo and listed here's the code for the demo.\nAround.\nvue-rewards lets you incorporate micro-interactions to your app, and perks consumers with the storm of confetti, emoji or even balloons in few seconds.\nFiring confetti around the page might appear like a questionable tip, however consider that rewarding users for their actions is actually certainly not.\nIf a big cloud of smiling emoji does not fit your treatment properly, try modifying the physics config to create it much more understated.\nYou can read more when it come to micro-interactions in my blog post-- https:\/\/www.thedevelobear.com\/post\/microinteractions\/.\nSetup.\npnpm put up vue-rewards.\nor even.\nyarn include vue-rewards.\nor even.\nnpm put in vue-rewards.\nIf you organize to use this with the Options API at that point you are going to require to incorporate the observing code to your main.js (or even you might find the plugin sign up in plugins\/index. js):.\nimport createApp coming from \"vue\".\nbring in Application coming from \".\/ App.vue\".\nimport VueRewards coming from \"vue-rewards\".\n\/\/ your various other plugins will certainly be imported below.\n\nconst app = createApp( App).\n\n\/\/ This is the main part.\napp.use( VueRewards).\n\napp.mount(\" #app\").\nConsumption.\nSo as to use the perks, you'll need to offer a component that will definitely end up being the source of the animation. This element requires to have an ID that matches the one made use of - it could be anywhere in the DOM as long as the I.d. match.\nYou can position the component inside a switch, facility it and also shoot up from the button.\nYou can easily place it atop the viewport along with posture: \"fixed\" and change the angle to 270, to fire downwards.\nTry, practice, enjoy yourself!\nComputer animation particles are readied to posture: 'taken care of' by nonpayment, yet this may be changed by means of a config item.\nYou can use this package deal in both the composition API and the choices API.\nUsing the Composition API.\n\n\n\nPermit's commemorate!\n\nClick me!\n\n\nMaking Use Of the Options API.\nBecause we registered the plugin earlier our team presently possess access to the $reward strategy in our elements. $reward coincides as useReward. To receive the like above our experts do:.\n\nAllow's commemorate!\n\nHit me!\n\n\n\n\nProps & config.\nuseReward\/$ perks params:.\ntitle.\nkind.\nclassification.\nrequired.\nnonpayment.\nid.\ncord.\nA distinct i.d. of the factor you wish to shoot from.\nindeed.\n\ntype.\nstrand.\n' confetti'.\n' balloons'.\n'em oji'.\nyes.\n' confetti'.\nconfig.\nthings.\nan arrangement item explained below.\nno.\nview below.\nConfetti config things:.\nname.\ntype.\nclassification.\ndefault.\nlife time.\nnumber.\nopportunity of lifestyle.\n200.\nangle.\nnumber.\npreliminary instructions of fragments in levels.\n90.\ndecay.\nvariety.\njust how much the rate reduces along with each frame.\n0.94.\nescalate.\namount.\nspreading of fragments in levels.\n45.\nstartVelocity.\namount.\nfirst velocity of particles.\n35.\nelementCount.\namount.\nbits volume.\n50.\nelementSize.\namount.\nbit size in px.\n8.\nzIndex.\namount.\nz-index of bits.\n0\nsetting.\ncord.\nsome of CSSProperties [' position'] - e.g. \"outright\".\n\" corrected\".\ncolours.\nstrand [] A range of different colors made use of when generating confetti.\n[#A 45BF1', '# 25C6F6', '# 72F753', '#F 76C88', '#F 5F770'] onAnimationComplete.\n() => gap.\nA function that operates when animation completes.\nboundless.\nBalloons config object:.\nname.\nkind.\nclassification.\nnonpayment.\nlife time.\nvariety.\ntime of lifestyle.\n600.\nviewpoint.\nnumber.\ninitial instructions of balloons in degrees.\n90.\ntooth decay.\nvariety.\nthe amount of the rate reduces along with each frame.\n0.999.\nescalate.\namount.\nescalate of balloons in degrees.\nFifty.\nstartVelocity.\nnumber.\nfirst rate of the balloons.\n3.\nelementCount.\namount.\nballoons quantity.\n10.\nelementSize.\namount.\nballoons dimension in px.\nTwenty.\nzIndex.\namount.\nz-index of balloons.\n0\nsetting.\ncord.\namong CSSProperties [' position'] - e.g. \"complete\".\n\" repaired\".\ncolours.\ncord [] A collection of shades made use of when creating balloons.\n[#A 45BF1', '# 25C6F6', '# 72F753', '#F 76C88', '
F 5F770'] onAnimationComplete.() => space.A function that functions when computer animation completes.boundless.Emoji config object:.name.type.description.nonpayment.lifetime.variety.time of lifestyle.200.angle.variety.initial direction of emoji in degrees.90.degeneration.number.how much the speed reduces along with each frame.0.94.spread.number.spread of emoji in degrees.Forty five.startVelocity.number.first speed of emoji.35.elementCount.variety.emoji volume.Twenty.elementSize.amount.emoji dimension in px.25.zIndex.amount.z-index of emoji.0position.string.some of CSSProperties [' placement'] - e.g. "absolute"." repaired".emoji.strand [] A range of emoji to shoot.onAnimationComplete.() => void.A feature that functions when animation completes.undefined.
Articles You Can Be Interested In