A wrapper over pwc-tabview and pwc-filter. Provides means of dynamically managing multiple filters via a single component.
npm install @paraboly/pwc-multi-filter!WebComponent PWC README Boilerplate



!Platform - Platform Free Web

src="https://raw.githubusercontent.com/paraboly/pwc-multi-filter/master/assets/Screenshots/JSLibraryBoilerplate.png" />
- 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
- 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
- Run npm install @paraboly/pwc-multi-filter --saveimport @paraboly/pwc-multi-filter;
- Add an import to the npm packages
- Then you can use the element anywhere in your template, JSX, html etc
This is just an example from pwc-animated-checkbox, you need to change it!
`html`
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);
- [x] ~~Documentation~~
- [x] ~~LICENSE~~
- [ ] Color Customization
- [ ] Animation Bug Fix
Author, author@work_email.com | author@personal_email.com
WebComponent PWC README Boilerplate is available under the MIT license.
See the LICENSE file for more info.