https://github.com/mooalot/star-rating-component

A simple star rating component
https://github.com/mooalot/star-rating-component

Last synced: 4 days ago
JSON representation

A simple star rating component

• Host: GitHub
• URL: https://github.com/mooalot/star-rating-component
• Owner: mooalot
• License: mit
• Created: 2022-01-08T07:47:00.000Z (about 3 years ago)
• Default Branch: master
• Last Pushed: 2022-01-09T06:02:08.000Z (about 3 years ago)
• Last Synced: 2024-04-27T08:23:22.176Z (9 months ago)
• Language: TypeScript
• Size: 119 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# star-rating

![image](https://drive.google.com/uc?export=view&id=1xSMT5hOSHQPgEMwESSGMnXhQbJvmkiyB)

## Installation 

`npm i star-rating-component`

### Angular

Add this to your `app.module.ts`

```typescript

import { CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({

  ...

  schemas: [

    CUSTOM_ELEMENTS_SCHEMA

  ]

  ...

})

export class AppModule { }

  ```

Add this to `main.ts`

```Typescript

import { defineCustomElements } from '@igabe/star-rating/loader'

defineCustomElements(window)

```

### Other frameworks

This is just a stencil component, so it can be used in other frameworks.

## Properties

| Property        | Attribute        | Description | Type      | Default |

| --------------- | ---------------- | ----------- | --------- | ------- |

| `defaultRating` | `default-rating` | The default rating when the component is loaded            | `number`  | `3`     |

| `numStars`      | `num-stars`      | The total number of stars           | `number`  | `5`     |

| `rounded`       | `rounded`        | Gives the stars a more bubbly look            | `boolean` | `true`  |

Component does not allow for zero stars. Good for us, better reviews.

## Events

| Event          | Description | Type               |

| -------------- | ----------- | ------------------ |

| `ratingChange` | Emitted when the rating is changed            | `CustomEvent` |

## Styling

These css variables can be overridden 

```

    --rating-active-fill-color 

    --rating-inactive-fill-color 

    --rating-active-stroke-color 

    --rating-inactive-stroke-color 

    --rating-star-size 

    --rating-star-spacing 

    --rating-star-shadow-color 

```

## Example

.html

```html

```

.ts

```Typescript

ratingChange(event) {

    console.log('New rating: ', event.detail);

  }

```

.css

```css

star-rating {

    --rating-active-fill-color: #f5f846;

    --rating-inactive-fill-color: #d8d8d8;

    --rating-active-stroke-color: #ffb400;

    --rating-inactive-stroke-color: #d8d8d8;

    --rating-star-size: 2rem;

    --rating-star-spacing: 0.1rem;

    --rating-star-shadow-color: rgba(0, 0, 0, .7);

}

```

----------------------------------------------