Rate

Collect star ratings from users.

Basic Usage

<template>
  <bp-rate v-model="val" :count="5"></bp-rate>
</template>

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

const val = ref(2.5);
</script>

Half Star

Allow half-star values with half.

Full-star rating

Half-star rating

Current: 2.5

<template>
  <div style="display: flex; flex-direction: column; gap: 16px">
    <div>
      <div class="label">Full-star rating</div>
      <bp-rate v-model="val1" />
    </div>
    <div>
      <div class="label">Half-star rating</div>
      <bp-rate v-model="val2" half />
    </div>
    <div>
      <div class="label">Current: {{ val2 }}</div>
    </div>
  </div>
</template>

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

const val1 = ref(3);
const val2 = ref(2.5);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

Custom Count

Change the number of stars with count.

5 stars (default)

8 stars

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">5 stars (default)</div>
      <bp-rate v-model="val1" />
    </div>
    <div>
      <div class="label">8 stars</div>
      <bp-rate v-model="val2" :count="8" />
    </div>
  </div>
</template>

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

const val1 = ref(3);
const val2 = ref(5);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

Custom Icon

Customize icons via the icon slot ({ index }).

Custom heart icon

Custom like icon

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">Custom heart icon</div>
      <bp-rate v-model="val1">
        <template #icon>
          <IconHeartFill style="color: #f53f3f" />
        </template>
      </bp-rate>
    </div>
    <div>
      <div class="label">Custom like icon</div>
      <bp-rate v-model="val2">
        <template #icon>
          <IconThumbUpFill style="color: #165dff" />
        </template>
      </bp-rate>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { IconHeartFill, IconThumbUpFill } from "birdpaper-icon";

const val1 = ref(3);
const val2 = ref(4);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

Readonly and Disabled

Lock interaction with readonly or disabled.

Read-only

Disabled

Read-only half-star

<template>
  <div style="display: flex; gap: 40px">
    <div>
      <div class="label">Read-only</div>
      <bp-rate v-model="val" readonly />
    </div>
    <div>
      <div class="label">Disabled</div>
      <bp-rate v-model="val" disabled />
    </div>
    <div>
      <div class="label">Read-only half-star</div>
      <bp-rate v-model="halfVal" readonly half />
    </div>
  </div>
</template>

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

const val = ref(3);
const halfVal = ref(3.5);
</script>

<style scoped>
.label {
  font-size: 13px;
  color: #86909c;
  margin-bottom: 6px;
}
</style>

Rate Props

v-model	Bound value	Number	-	-
count	Total count	Number	5	-
half	Whether half selection is allowed	Boolean	-	-
readonly	Whether readonly	Boolean	-	-
disabled	Whether disabled	Boolean	-	-

Rate Slots

icon

Custom icon

{ index: number }

-