@mat3e-ux/stars

@mat3e-ux/stars

Display rating as stars (readonly)

★★★☆☆

LIVE EXAMPLE

Setup

CDN

<script type="module" src="https://unpkg.com/@mat3e-ux/stars"></script>

npm

Install from npm:

npm i @mat3e-ux/stars

Simple one-time import:

import '@mat3e-ux/stars';

or "manual" registration:

import Stars from '@mat3e-ux/stars/component';

// same as previously
Stars.register();

// registering as a different tag:
Stars.register('just-stars');

Usage

<m3-stars max="5" current="4.62036"></m3-stars>
<m3-stars max="5" current="2.55" title="2.55"></m3-stars>
<m3-stars style="color: red" max="5" current="3.62036"></m3-stars>

Overriding symbols

You can override a default ★ and ☆ symbols, setting static properties before registering the component:

import Stars from "@mat3e-ux/stars/component";

Stars.empty = '💀';
Stars.full = '😄';
Stars.register();

Note: it will override symbols for all the <m3-stars> tags.

Alternatively, you can reuse the component and create your own with overriden symbols like:

import '@mat3e-ux/stars'; // <m3-stars> works as before
import Stars from "@mat3e-ux/stars/component";

// <m3-emoji> works with the below symbols
Stars.empty = '💀';
Stars.full = '😄';
customElements.define('m3-emoji', class extends Stars {});