@empathyco/x-components
Version:
Empathy X Components
62 lines (45 loc) • 1.79 kB
Markdown
---
title: BaseRating
---
# BaseRating
Rating component. This component renders a set of elements filled based on the value passed as
prop.
## Props
| Name | Description | Type | Default |
| ------------------ | ------------------------------------------------------------------ | ------------------- | -------------- |
| <code>value</code> | Numeric value used to calculates the width of the filled elements. | <code>number</code> | <code></code> |
| <code>max</code> | Maximum number of elements to paint. | <code>number</code> | <code>5</code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| ------------------------ | ------------------------------------ | ----------------------------------------- |
| <code>empty-icon</code> | The content to render as empty icon | None |
| <code>filled-icon</code> | The content to render as filled icon | None |
## Examples
This component receives a `value` as prop and renders a set of elements, which will be filled based
on this value.
### Basic usage
```vue
<template>
<BaseRating :value="5.23" />
</template>
<script setup>
import { BaseRating } from "@empathyco/x-components";
</script>
```
### Customizing its contents
```vue
<template>
<BaseRating :value="7.15" :max="10">
<template #filled-icon>
<TestIcon />
</template>
<template #empty-icon>
<TestIcon />
</template>
</BaseRating>
</template>
<script setup>
import { BaseRating } from "@empathyco/x-components";
import TestIcon from "./TestIcon.vue";
</script>
```