Rate

Used for Showrate

Basic Usage

Simply insert content using the default slot.

Default (no color distinction)

With color distinction

<template>
  <div flex>
    <div class="block">
      <span class="demonstration">Default (no color distinction)</span>
      <b-rate v-model="value1" allow-half show-text></b-rate>
    </div>
    <div class="block">
      <span class="demonstration">With color distinction</span>
      <b-rate v-model="value2" :colors="colors"></b-rate>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value1 = ref(null)
const value2 = ref(null)
const colors = ['#99A9BF', '#F7BA2A', '#fa8c16']
</script>

<style scoped>
.block {
  padding: 30px 0;
  text-align: center;
  border-right: 1px solid #eff2f6;
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
}
</style>

Customicon

<template>
  <div flex>
    <b-rate
      v-model="value"
      :icon-classes="iconClasses"
      void-icon-class="heart"
      :colors="['#99A9BF', '#F7BA2A', '#fa8c16']"
    ></b-rate>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const value = ref(null)
const iconClasses = ['heart-fill', 'heart-fill', 'heart-fill']
</script>

readonly

3.7

<template>
  <b-rate :model-value="3.7" disabled show-score text-color="#fa8c16" score-template="3.7"></b-rate>
</template>

<script setup lang="ts"></script>

Attributes

Parameter	Description	Type	Options	Default
value / v-model	Bound value	number	—	0
max	Maximum score	number	—	5
disabled	Whether read-only	boolean	—	false
allow-half	Whether to allow half selection	boolean	—	false
low-threshold	Threshold between low and medium scores; the value itself falls into the low category	number	—	2
high-threshold	Threshold between high and medium scores; the value itself falls into the high category	number	—	4
colors	Icon color array with 3 elements, corresponding to 3 score levels	array	—	['#F7BA2A', '#F7BA2A', '#F7BA2A']
void-color	Color of unselected icons	string	—	#C6D1DE
disabled-void-color	Color of unselected icons when read-only	string	—	#EFF2F7
icon-classes	Icon class name array with 3 elements, corresponding to 3 score levels	array	—	['star', 'star', 'star']
void-icon-class	Class name of unselected icons	string	—	star
disabled-void-icon-class	Class name of unselected icons when read-only	string	—	star
show-text	Whether to show auxiliary text. If true, the text content corresponding to the current score is selected from the texts array	boolean	—	false
show-score	Whether to show current score. show-score and show-text cannot both be true	boolean	—	false
text-color	Color of auxiliary text	string	—	#1F2D3D
texts	Auxiliary text array	array	—	['Terrible', 'Disappointed', 'Average', 'Satisfied', 'Amazing']
score-template	Score display template	string	—

Events

Event Name	Description	Callback Parameters
change	Triggers when score changes	Changed score