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

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

stenciljs web-components

Last synced: 4 days 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-08-01T13:16:47.084Z (3 months 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`