@empathyco/x-components
Version:
Empathy X Components
49 lines (34 loc) • 1.53 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
<BaseRating :value="5.23" />
```
### Customizing its contents
```vue
<BaseRating :value="7.15" :max="10">
<template #filled-icon>
<TestIcon/>
</template>
<template #empty-icon>
<TestIcon/>
</template>
</BaseRating>
```