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

1.2.0 • Public • Published

wc-star-input

published coverage npm npm GitHub issues license

NPM

Star rating input web component.

Installation

You can install wc-star-input with npm, or just get started quickly with CDN.

Install from npm

To install from npm, open terminal in your project folder and run:

npm install wc-star-input

After the package is installed, then you can import the bubble web component into you code:

import 'wc-star-input';

window.onload = function() {
  let starInput = document.createElement('star-input');
  starInput.setAttribute("name", "product_rate");
  starInput.setAttribute("height", "30");
  starInput.setAttribute("width", "30");
  starInput.setAttribute("data-halfstar", "true");
  document.body.appendChild(starInput);
}

Install from CDN

There is jsDelivr CDN available for quickly integrated with your web page.

<!-- Latest version -->
<script src="https://cdn.jsdelivr.net/npm/wc-star-input"></script>

<!-- Specific version -->
<script src="https://cdn.jsdelivr.net/npm/wc-star-input@1.2.0"></script>

Basic Usages:

<html>
  <head>

    <!-- Load Bubble WebComponent library -->
    <script src="https://cdn.jsdelivr.net/npm/wc-star-input@1.2.0"></script>
    <!-- End Load -->

  </head>

  <body>

    <!-- Using "star-input" html tag to generate Bubble -->
    <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>

  </body>
</html>

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.

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 1.2.0
    1
    • latest

Version History

Package Sidebar

Install

npm i wc-star-input

Weekly Downloads

20

Version

1.2.0

License

MIT

Unpacked Size

21.7 kB

Total Files

9

Last publish

Collaborators

  • yishiashia