Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

wc-star-input

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

wc-star-input

Star rating input WebComponent

1.2.0
latest
Source
npm

Version published: last year

Weekly downloads: 1

Maintainers: 1

Weekly downloads

Created: 3 years ago

Source

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.

Keywords

FAQs

What is wc-star-input?

Is wc-star-input popular?

Is wc-star-input well maintained?

Package last updated on 09 Nov 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install