Live Codepen Example

Installation

Script tag

• Put two script tags similar to this in the head of your index.html:

<script
  type="module"
  src="https://unpkg.com/@paraboly/project-name@latest/dist/project-name/project-name.esm.js"
></script>
<script
  nomodule
  src="https://unpkg.com/@paraboly/project-name@latest/dist/project-name/project-name.js"
></script>

• Then you can use the element anywhere in your template, JSX, html etc

Node Modules

• Run npm install @paraboly/project-name --save
• Put a script tag similar to this <script src='node_modules/@paraboly/project-name/dist/project-name.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/project-name --save
• Add an import to the npm packages import @paraboly/project-name;
• Then you can use the element anywhere in your template, JSX, html etc

Usage

Basic Usage

This is just an example from pwc-animated-checkbox, you need to change it!

<pwc-animated-checkbox></pwc-animated-checkbox>

Checkbox onCheckChange Listener Usage

JS Way

This is just an example from pwc-animated-checkbox, you need to change it!

// 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

• Documentation
• LICENSE
• Color Customization
• Animation Bug Fix

Authors

Author, author@work_email.com | author@personal_email.com

License

WebComponent PWC README Boilerplate is available under the MIT license.

See the LICENSE file for more info.