!Built With Stencil

!WebComponent PWC README Boilerplate


!Platform - Platform Free Web

src="https://raw.githubusercontent.com/paraboly/pwc-multi-filter/master/assets/Screenshots/JSLibraryBoilerplate.png" />

Live Codepen Example

Installation

$3

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

``html
type="module"
src="https://unpkg.com/@paraboly/pwc-multi-filter@latest/dist/pwc-multi-filter/pwc-multi-filter.esm.js"
>
nomodule
src="https://unpkg.com/@paraboly/pwc-multi-filter@latest/dist/pwc-multi-filter/pwc-multi-filter.js"
>
`

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

$3

- Run npm install @paraboly/pwc-multi-filter --save
- Put a script tag similar to this in the head of your index.html
- Then you can use the element anywhere in your template, JSX, html etc

$3

- Run npm install @paraboly/pwc-multi-filter --save
- Add an import to the npm packages import @paraboly/pwc-multi-filter;
- 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!

`html

`

Checkbox onCheckChange Listener Usage

$3

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

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

- [x] ~~Documentation~~
- [x] ~~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.