Numbers Probably Matter

    wc-star-input
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.7 • Public • Published

    wc-star-input

    Published on webcomponents.org Coverage Badge Javascript TypeScript License

    NPM

    Star rating input web component.

    Install

    $ npm install wc-star-input
    

    Syntax

    <script src="star-input.js"></script>
    
    <form action="#" method="POST">
        <label for="star-input">Rate here:</label>
        <star-input
            id="star-input"
            name="stars"
            height="30"
            width="30"
            data-halfstar="true"
        >
        </star-input>
        <input type="submit" value="submit" />
    </form>

    Demo page

    The demo page: https://yishiashia.github.io/star-input.html

    Usage

    If you want to customize this web component, you can import the library and implement your new class by extend StarInput.

    import StarInput from "wc-star-input";
    
    class customizedStarInput extends StarInput {
        // override here
    }

    Customized star style

    To customize the star style, you can modify the scss variables in stars.scss.

    $empty-star-img: 'https://...';    /* The url path or base64 encode image data string */
    $full-star-img: 'data:image/...';  /* The url path or base64 encode image data string */
    $star-color:  #FFD700;             /* the display color of star icons */
    $hover-color: #FFEA00;             /* the star color when hover on it */

    Options

    name (optional)

    The name of input, it would be the POST parameter name.

    height (optional)

    The height of star icon (unit: pixel).

    width (optional)

    The width of star icon (unit: pixel).

    data-halfstar (optional)

    Allow rating with half star when setting to true.

    Install

    npm i wc-star-input

    DownloadsWeekly Downloads

    256

    Version

    1.1.7

    License

    MIT

    Unpacked Size

    21.2 kB

    Total Files

    9

    Last publish

    Collaborators

    • yishiashia