Have ideas to improve npm?Join in the discussion! »

    @mat3e-ux/stars

    0.2.5 • Public • Published

    Version Published on webcomponents.org

    @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 {});

    Install

    npm i @mat3e-ux/stars

    DownloadsWeekly Downloads

    169

    Version

    0.2.5

    License

    ISC

    Unpacked Size

    7.2 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar