Rate

Default

Rate divides rating scores into several levels and these levels can be distinguished by using different background colors. By default background colors are the same, but you can assign them an array with three element to reflect three levels using the colors attribute, and their two thresholds can be defined by low-threshold and high-threshold, or you can assign them with a object which key is the threshold between two levels and value is the corresponding color.

Code copied

<template>
  <div class="demo-rate-block">
    <span class="demonstration">Default</span>
    <s-rate v-model="value1" />
  </div>
  <div class="demo-rate-block">
    <span class="demonstration">Color for different levels</span>
    <s-rate v-model="value2" :colors="colors" />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value1 = ref(2)
const value2 = ref(null)
const colors = ref(['#99A9BF', '#F7BA2A', '#FF9900'])
</script>

<style scoped>
.demo-rate-block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px rgba(var(--sax-border-color));
  display: inline-block;
  width: 49%;
  box-sizing: border-box;
}
.demo-rate-block:last-child {
  border-right: none;
}
.demo-rate-block .demonstration {
  display: block;
  color: rgba(var(--sax-text-color-secondary));
  font-size: 14px;
  margin-bottom: 20px;
}
</style>

Size

Rate has small,default and large sizes.

Code copied

<template>
  <div class="demo-rate center">
    <s-rate v-model="value" size="large" />
    <s-rate v-model="value" />
    <s-rate v-model="value" size="small" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(2)
</script>

<style scoped lang="scss">
.demo-rate {
  display: flex;
  flex-direction: column;
}
</style>

With allow-half

Add attribute allow-half Half star allowed

Code copied

<template>
  <div class="center">
    <s-rate v-model="value" allow-half />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(0)
</script>

With text

Using text to indicate rating score

Add attribute show-text to display text at the right of Rate. You can assign texts for different scores using texts. texts is an array whose length should be equal to the max score max.

Code copied

<template>
  <div class="center con-rate">
    <s-rate
      v-model="value"
      :texts="['oops', 'disappointed', 'normal', 'good', 'great']"
      show-text
    />
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const value = ref(0)
</script>

<style lang="scss" scoped>
.con-rate {
  display: flex;
  align-items: center;
  justify-content: center;
  .s-rate {
    width: 120px;
    text-align: left;
  }
}
</style>

Clearable

You can reset the value to 0 when you click at the same value again.

Code copied

<template>
  <div class="center">
    <s-rate v-model="value" clearable />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(3)
</script>

More icons

You can use different icons to distinguish different rate components.

You can customize icons by passing icons an array with three elements or a object which key is the threshold between two levels and value is the corresponding icon. In this example, we also use void-icon to set the icon if it is unselected.

Code copied

<template>
  <div class="center">
    <s-rate
      v-model="value"
      :icons="icons"
      void-icon="bxs:heart"
      :colors="['#409eff', '#67c23a', '#FF9900']"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(3)
const icons = [
  'bxs:heart',
  'bxs:heart',

Read-only

Read-only Rate is for displaying rating score. Half star is supported.

Use attribute disabled to make the component read-only. Add show-score to display the rating score at the right side. Additionally, you can use attribute score-template to provide a score template. It must contain {value}, and {value} will be replaced with the rating score.

Code copied

<template>
  <div class="center">
    <s-rate
      v-model="value"
      disabled
      show-score
      text-color="#ff9900"
      score-template="{value} points"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(3)
</script>

<style lang="scss" scoped></style>

API