samuelli / flippy-card

A Flippable 'card' web component based on Paul Lewis' UI Experiment

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

<flippy-card>

A Flippable "card" based on Paul Lewis' UI Experiment

Published on webcomponents.org

Installation

  1. Install bower per their instructions, such as via:
    npm install -g bower
    
  2. Using bower install the package to your project
    cd $YOUR_PROJECT_DIR
    bower install diddledan/flippy-card
    

You will now find a folder called bower_components in your project root which contains the webcomponents polyfill, and the validate-string element files along with any dependencies required.

Usage

<flippy-card id="thecard" axis="Y" current-side='front'>
    <div slot="front">
        This is the Front
        <paper-button onclick='flipit'>FLIP IT!</paper-button>
    </div>
    <div slot="back">
        This is the Back<br/>MoreContent<br/>Expando Divboxus!
        <paper-button onclick='flipit'>Flip it again, Sam!</paper-button>
    </div>
</flippy-card>
<script type="javascript">
function flipit() {
    document.getElementById('thecard').flip();
}
</script>

Contributing

  1. Fork it!
  2. Create your feature branch: git checkout -b my-new-feature
  3. Commit your changes: git commit -am 'Add some feature'
  4. Push to the branch: git push origin my-new-feature
  5. Submit a pull request :D

Credits

License

MIT License

See the LICENSE file in the root folder of this package.

About

A Flippable 'card' web component based on Paul Lewis' UI Experiment

License:MIT License


Languages

Language:JavaScript 69.0%Language:HTML 31.0%