Rate UPDATED

Rate is a set of radio buttons that allow the user to rate something.

Basic usage

Rate uses a five-point scale by default, you can also set max to set the maximum score. Then confirm the rating by clicking on the stars.

Rate: 2

Rate: 6

<script lang="ts" name="ORateBasic" setup>
const val = ref(2)
const valMax = ref(6)
</script>

<template>
  <div fscw gap-6>
    <div>
      <p text-baseText>
        Rate: {{ val }}
      </p>
      <ORate v-model="val" />
    </div>
    <div>
      <p text-baseText>
        Rate: {{ valMax }}
      </p>
      <ORate v-model="valMax" :max="10" />
    </div>
  </div>
</template>

<script lang="ts" name="ORateBasic" setup>
const val = ref(2)
const valMax = ref(6)
</script>

<template>
  <div fscw gap-6>
    <div>
      <p text-baseText>
        Rate: {{ val }}
      </p>
      <ORate v-model="val" />
    </div>
    <div>
      <p text-baseText>
        Rate: {{ valMax }}
      </p>
      <ORate v-model="valMax" :max="10" />
    </div>
  </div>
</template>

Custom color

You can set the color of the rating icon via color, and also via void-color for unselected rating icons.

Rate: 2

Rate: 4

<script lang="ts" name="ORateCustomColor" setup>
const val = ref(2)
const valPrimary = ref(4)
</script>

<template>
  <div fscw gap-6>
    <div>
      <p text-baseText>
        Rate: {{ val }}
      </p>
      <ORate v-model="val" color="teal" void-color="error" />
    </div>
    <div>
      <p text-baseText>
        Rate: {{ valPrimary }}
      </p>
      <ORate v-model="valPrimary" color="secondary" void-color="primary" />
    </div>
  </div>
</template>

<script lang="ts" name="ORateCustomColor" setup>
const val = ref(2)
const valPrimary = ref(4)
</script>

<template>
  <div fscw gap-6>
    <div>
      <p text-baseText>
        Rate: {{ val }}
      </p>
      <ORate v-model="val" color="teal" void-color="error" />
    </div>
    <div>
      <p text-baseText>
        Rate: {{ valPrimary }}
      </p>
      <ORate v-model="valPrimary" color="secondary" void-color="primary" />
    </div>
  </div>
</template>

Half star

Half-stars can also be achieved by adding an allow-half attribute when rating.

Rate: 2.5

<script lang="ts" name="ORateHalfStar" setup>
const val = ref(2.5)
</script>

<template>
  <div fscw gap-6>
    <div>
      <p text-baseText>
        Rate: {{ val }}
      </p>
      <ORate v-model="val" allow-half />
    </div>
  </div>
</template>

<script lang="ts" name="ORateHalfStar" setup>
const val = ref(2.5)
</script>

<template>
  <div fscw gap-6>
    <div>
      <p text-baseText>
        Rate: {{ val }}
      </p>
      <ORate v-model="val" allow-half />
    </div>
  </div>
</template>

Rate Props

Name	Type	Default	Description
modelValue / v-model	`number`	`0`	Binding value.
max	`number`	`5`	Max rating score.
readonly	`boolean`	`false`	Whether Rate is read-only.
allow-half	`boolean`	`false`	Whether picking half start is allowed.
color	`string`	`warning`	Selected icon color.
void-color	`string`	`undefined`	Unselected icon color.
text	`string`	`undefined`	Text displayed at the end of the star.

Rate Methods

Name	Parameters	Description
change	`(value: number) => void`	Triggers when rate value is changed.

Rate UPDATED #

Basic usage #

Custom color #

Half star #

Rate Props #