@paraboly/pwc-choices
    TypeScript icon, indicating that this package has built-in type declarations

    6.5.2 • Public • Published

    Built With Stencil

    WebComponent PWC README Boilerplate

    Fully customizable readme boilerplate for web component with StencilJS via Paraboly

    npm version npm Platform - Platform Free Web License: MIT

    WebComponent PWC README Boilerplate

    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/pwc-choices@latest/dist/pwc-choices/pwc-choices.esm.js"
    ></script>
    <script
      nomodule
      src="https://unpkg.com/@paraboly/pwc-choices@latest/dist/pwc-choices/pwc-choices.js"
    ></script>
    • Then you can use the element anywhere in your template, JSX, html etc

    Node Modules

    • Run npm install @paraboly/pwc-choices --save
    • Put a script tag similar to this <script src='node_modules/@paraboly/pwc-choices/dist/pwc-choices.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-choices --save
    • Add an import to the npm packages import @paraboly/pwc-choices;
    • 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

    • [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.

    Install

    npm i @paraboly/pwc-choices

    DownloadsWeekly Downloads

    2

    Version

    6.5.2

    License

    MIT

    Unpacked Size

    5.46 MB

    Total Files

    133

    Last publish

    Collaborators

    • parabolynpm