> For the complete documentation index, see [llms.txt](https://cedrus.gitbook.io/project-fusion/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cedrus.gitbook.io/project-fusion/components/basic/rating.md).

# Rating

## Usage

**app.html**

```markup
<cf-rating [properties]="myRating" [styling]="myRatingStyles"></cf-rating>
```

**app.ts**

```typescript
myRating = new RatingModel({
    label: 'Rating label',
    icon: 'stars',
    value: 1,
    max: 5,
    countFromEnd: false,
    iconsVertical: false,
    disabled: false
});

myRatingStyles = new RatingStylingModel({
    container: new StylingModel({
        class: 'my-rating-container',
    }),
    label: new StylingModel({
        class: 'my-rating-label'
    }),
    item: new StylingModel({
        class: 'my-rating-item-icon',
        dynamicClass: "'dynamic-items-class'"
    }),
    iconSize: '30px',
    filledColor: 'lightseagreen',
    emptyColor: 'darkseagreen',
});
```

**app.scss**

```css
/deep/ {
       .my-rating-item-icon:not(.cf-rating-disabled) {
              box-shadow: 1px 1px 5px seagreen;
              margin: 3px;
       }
       cf-rating .my-rating-label:not(.cf-rating-disabled) {
              color: darkseagreen;
       }
}
```

## Rating input properties

|      Attr     |   Type  | Details                                                    |
| :-----------: | :-----: | ---------------------------------------------------------- |
|     label     |  string | Label for component.                                       |
|      icon     |  string | Name of the icon (from Material or Font Awesome icons).    |
|     value     |  number | Value of rating and means number of filled/selected icons. |
|      max      |  number | Number of rating icons                                     |
|  countFromEnd | boolean | Means to start icons counting order.                       |
| iconsVertical | boolean | Means to show icons vertically.                            |
|    disabled   | boolean | Means component to be disabled.                            |

## Rating styling properties

|     Attr    |     Type     | Details                                |
| :---------: | :----------: | -------------------------------------- |
|    label    | StylingModel | Styling options for component label.   |
|     item    | StylingModel | Styling options for component items.   |
|   iconSize  |    string    | Means size of component items.         |
| filledColor |    string    | Css color name for not selected icons. |