https://github.com/san650/ember-confetti

Plug and play confetti rain for your Ember application!
https://github.com/san650/ember-confetti

component confetti ember

Last synced: 2 months ago
JSON representation

Plug and play confetti rain for your Ember application!

• Host: GitHub
• URL: https://github.com/san650/ember-confetti
• Owner: san650
• License: mit
• Created: 2017-04-21T23:28:22.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2018-09-19T18:07:25.000Z (over 6 years ago)
• Last Synced: 2024-10-04T17:55:25.411Z (3 months ago)
• Topics: component, confetti, ember
• Language: JavaScript
• Homepage: https://san650.github.io/ember-confetti/
• Size: 3.46 MB
• Stars: 9
• Watchers: 2
• Forks: 7
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# ember-confetti

[![Build Status](https://travis-ci.org/san650/ember-confetti.svg?branch=master)](https://travis-ci.org/san650/ember-confetti)

[![Ember Observer Score](https://emberobserver.com/badges/ember-confetti.svg)](https://emberobserver.com/addons/ember-confetti)

This addon exposes an `{{confetti-rain}}` component for your ember application.

![Sample](./confetti.gif)

You can see it in action in this [demo page](https://san650.github.io/ember-confetti/).

## Usage

Install the addon and insert the component in any template.

```hbs

{{confetti-rain}}

```

The component will start a confetti rain when rendered or you can toggle the rain by setting the `isEnabled` attribute.

```hbs

{{!--

  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`.

```hbs

{{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.

```hbs

{{confetti-rain class="my-confetti"}}

```

```css

.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`](https://github.com/yapplabs/ember-wormhole#ember-wormhole--) to achieve this.

```sh

$ ember install ember-wormhole

```

And then you can change your templates like this

`my-foo-component.hbs`

```hbs

{{#ember-wormhole to="my-container"}}

  {{confetti-rain}}

{{/ember-wormhole}}

```

And place the container at `` level.

`application.hbs`

```hbs

{{yield}}



```


And that's it, now the parent container for the `confetti-rain` component will be the `` tag.

## Installation

To install the addon just run

```

$ ember install ember-confetti

```

## Development

```sh

$ git clone https://github.com/san650/ember-confetti

$ cd $_

$ yarn

```

Running tests

```sh

$ yarn test

```

## Project's health

[![Build Status](https://travis-ci.org/san650/ember-confetti.svg?branch=master)](https://travis-ci.org/san650/ember-confetti)

[![Ember Observer Score](https://emberobserver.com/badges/ember-confetti.svg)](https://emberobserver.com/addons/ember-confetti)

## 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](./LICENSE) for the full license text.