Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/zwacky/st-flippy
- Owner: zwacky
- Created: 2017-09-16T19:29:12.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2017-10-04T12:28:04.000Z (about 7 years ago)
- Last Synced: 2024-11-04T10:44:07.768Z (about 1 month ago)
- Topics: stenciljs, web-components
- Language: TypeScript
- Homepage:
- Size: 52.7 KB
- Stars: 5
- Watchers: 3
- Forks: 2
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-stenciljs - ST-Flippy
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`