Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/zwacky/st-flippy

Easily flip elements - built with StencilJS
https://github.com/zwacky/st-flippy

stenciljs web-components

Last synced: about 1 month ago
JSON representation

Easily flip elements - built with StencilJS

Awesome Lists containing this project

README

        

# st-flippy

## Examples

* **Vanilla**: https://jsbin.com/falipumuri/edit?html,output
* **AngularJS**: https://jsbin.com/qegirayowo/edit?html,js,output
* **React**: can't get it to run on JS-REPL sites... would look similar to this: https://jsbin.com/lubukodike/edit?html,js,output

## Usage

Just add `` into your app.

Then in the template:

```


{HERE COMES YOUR FRONT}


{HERE COMES YOUR BACK}

```

**Caveat**: Currently the flippy component is not a blocked element. Add its height and `display: block` and it should work with your layout.

## API (params)

Mandatory params (either `is-flipped` or `flip-(back-)events`):

* **is-flipped**: boolean
* **flip-events**: string, concatenated with ','
* **flip-back-events**: string, concatenated with ','

Optional params:

* **flip-duration**: number, default `400`
* **flip-timing-function**: string, default `ease-in`