BaseRatingFilterLabel

Renders a label for a rating filter, allowing to override the elements used to paint the rating.

Props

Name	Description	Type	Default
filter	The filter data to render.	BooleanFilter
max	Maximum number of elements to paint.	number	5

Slots

Name	Description	Bindings (name - type - description)
rating-icon-filled	Filled icon content	None
rating-icon-empty	Empty icon content	None

Example

Renders a label for a rating filter, allowing to override the elements used to paint the rating. The filter label must be a valid number string. For example: '3', '2.5', '0.25'

Basic usage

<BaseRatingFilterLabel :filter="filter" />

Customizing color

Its possible to change the default color directly with color CSS attribute. For more elaborated styles it's possible to style the inner svg icons.

<BaseRatingFilterLabel :filter="filter" style="color: gold" />

Customizing its contents

The max prop can be used to set the max rating number. It will render as many icons as the this max value.

<BaseRatingFilterLabel :filter="filter" :max="max" />

The default icons can be changed using the rating-icon-filled and rating-icon-empty icons, to represent the filled empty and empty icon in the rating component.

<BaseRatingFilterLabel :filter="filter" :max="max">
  <template #rating-icon-filled>♥</template>
  <template #rating-icon-empty>♡</template>
</BaseRatingFilterLabel>