ember-confetti
v1.2.0
Published
Confetti rain components for Ember applications
Downloads
45
Readme
ember-confetti
This addon exposes an {{confetti-rain}} component for your ember application.
You can see it in action in this demo page.
Usage
Install the addon and insert the component in any template.
{{confetti-rain}}The component will start a confetti rain when rendered or you can toggle the rain by setting the isEnabled attribute.
{{!--
No confetti rain :-(
--}}
{{confetti-rain isEnabled=false}}Number of particles
By default, a total of 150 particles are rendered, you can change this number by setting maxParticles.
{{confetti-rain maxParticles=10}}Overriding z-index
By default z-index is set to max 32bit integer value, to override this you can set a custom class to the component and set your desired z-index value.
{{confetti-rain class="my-confetti"}}.my-confetti {
z-index: 10!important;
}Note that you need to use the !important suffix so the rule is applied correctly.
Full screen
By default confetti-rain component will fill parent's container. If you want to render the component to fill the entire screen you can use ember-wormhole to achieve this.
$ ember install ember-wormholeAnd then you can change your templates like this
my-foo-component.hbs
{{#ember-wormhole to="my-container"}}
{{confetti-rain}}
{{/ember-wormhole}}And place the container at <body> level.
application.hbs
{{yield}}
<div id="my-container"></div>And that's it, now the parent container for the confetti-rain component will be the <body> tag.
Installation
To install the addon just run
$ ember install ember-confettiDevelopment
$ git clone https://github.com/san650/ember-confetti
$ cd $_
$ yarnRunning tests
$ yarn testProject's health
Acknowledgement
The confetti idea is based on Linmiao Xu's codepen http://codepen.io/linrock/pen/Amdhr
License
ember-confetti is licensed under the MIT license.
See LICENSE for the full license text.