wc-star-input
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
.