@paraboly/pwc-animated-checkbox

Stencil Component Starter

Usage no npm install needed!

<script type="module">
  import parabolyPwcAnimatedCheckbox from 'https://cdn.skypack.dev/@paraboly/pwc-animated-checkbox';
</script>

README

Built With Stencil

WebComponent PWC animated-checkbox

Fully customizable animated-checkbox web component with StencilJS via Paraboly

npm version npm Platform - Platform Free Web License: MIT

Basic animated-checkbox Screenshots

WebComponent PWC Animated Checkbox WebComponent PWC Animated Checkbox

Installation

Script tag

  • Publish to NPM
  • Put a script tag similar to this <script type="module" src="https://unpkg.com/@paraboly/pwc-animated-checkbox@0.0.1/dist/pwc-animated-checkbox/pwc-animated-checkbox.esm.js"></script> in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc

Node Modules

  • Run npm install @paraboly/pwc-animated-checkbox --save
  • Put a script tag similar to this <script src='node_modules/@paraboly/pwc-animated-checkbox/dist/pwc-animated-checkbox.js'></script> in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc

In a stencil-starter app

  • Run npm install @paraboly/pwc-animated-checkbox --save
  • Add an import to the npm packages import @paraboly/pwc-animated-checkbox;
  • Then you can use the element anywhere in your template, JSX, html etc

Usage

Basic animated-checkbox Usage

<pwc-animated-checkbox checkboxText="Hello Checkbox" isChecked></pwc-animated-checkbox>

Checkbox onCheckChange Listener Usage

JS Way

Also you can put this code into your html inside script tags. You can check the example as index.html

// Multiple Checkboxes
const pwcCheckboxes = document.querySelectorAll("pwc-animated-checkbox");
pwcCheckboxes.forEach(element => {
  element.addEventListener("checkedEvent", event => {
    console.log("Event: ", event.detail);
  });
})  
// Selects the first checkbox
const pwcCheckbox = document.querySelector("pwc-animated-checkbox");
pwcCheckbox.addEventListener("checkedEvent", event => {
console.log("First Element Event: ", event.detail);

Future Plans

  • Color Customization
  • Animation Bug Fix

Authors

FreakyCoder, kuray.ogun@paraboly.com | kurayogun@gmail.com

License

WebComponent PWC animated-checkbox is available under the MIT license. See the LICENSE file for more info.