Directory

← Back

scratch-box

Web component wrapper around custom animated checkbox (from codepen)

Author

Rating

Popularity

<100

scratch-box

scratch-box is a web component wrapper around the "CUSTOM ANIMATED CHECKBOXES" codepen by Sara Soueidan.

To use from CDN:

        <scratch-box>
            <span slot=labelTxt>Create demo</span>
        </scratch-box>
        <scratch-box>
            <span slot=labelTxt>Write article</span>
        </scratch-box>
        <scratch-box>
            <span slot=labelTxt>Excercise</span>
        </scratch-box>
        <style>
                @import url(https://fonts.googleapis.com/css?family=Indie+Flower);
            </style>
        <script type="module" src="https://unpkg.com/scratch-box@0.0.2/scratch-box.js?module"></script>
    </div>

or

        <scratch-box>
            <span slot=labelTxt>Create demo</span>
        </scratch-box>
        <scratch-box>
            <span slot=labelTxt>Write article</span>
        </scratch-box>
        <scratch-box>
            <span slot=labelTxt>Excercise</span>
        </scratch-box>
        <style>
                @import url(https://fonts.googleapis.com/css?family=Indie+Flower);
            </style>
        <script type="module" src="https://cdn.pika.dev/scratch-box"></script>
    </div>

Or

npm install -s scratch-box

Demo

Compatibility

(Loading compatibility data...)

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

Dependencies

  • trans-render#0.0.131
  • xtal-element#0.0.83
  • es-module-shims#0.4.5
Released
2019-09-21
Maturity
IMPORTED
License
MIT License

Compatibility

Framework
Browser
Browser Independent

scratch-box - Vaadin Add-on Directory

Web component wrapper around custom animated checkbox (from codepen) scratch-box - Vaadin Add-on Directory
# scratch-box scratch-box is a web component wrapper around the ["CUSTOM ANIMATED CHECKBOXES" codepen](https://codepen.io/SaraSoueidan/pen/40433575e3d0d026c7d9c00eb45522a1?editors=1100) by Sara Soueidan. To use from CDN: ```html Create demo Write article Excercise
``` or ```html Create demo Write article Excercise ``` Or > npm install -s scratch-box [Demo](https://jsfiddle.net/bahrus/7e4j60w5/)
Online