wc-star-input
v1.2.0
Published
Star rating input WebComponent
Downloads
9
Maintainers
yishiashiaReadme
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-inputAfter 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/[email protected]"></script>Basic Usages:
<html>
<head>
<!-- Load Bubble WebComponent library -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></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.