AnuUNMAINTAINEDRating
Basic
Rating component allows users to rate content.
<script setup lang="ts">
import { ref } from 'vue'
const rating = ref(0)
</script>
<template>
<ARating v-model="rating" />
</template>Colors
You can use color prop to change the rating color.
<script setup lang="ts">
import { ref } from 'vue'
const rating = ref(0)
</script>
<template>
<ARating
v-model="rating"
color="primary"
/>
</template>Sizing
You can use font-size utility to adjust the size of rating.
TIP
You can use padding utilities along with all: variant (all:px-3) to increase the gap between each rating icon.
<script setup lang="ts">
import { ref } from 'vue'
const rating = ref(0)
</script>
<template>
<div class="flex flex-col gap-2">
<ARating
v-model="rating"
class="text-sm"
/>
<ARating
v-model="rating"
class="text-base"
/>
<ARating
v-model="rating"
class="text-lg"
/>
<ARating v-model="rating" />
<ARating
v-model="rating"
class="text-2xl"
/>
</div>
</template>Custom icon
You can use custom icon by providing empty-icon and full-icon props.
TIP
ARating component also supports half-icon prop to customize the half icon when using halve prop.
<script setup lang="ts">
import { ref } from 'vue'
const rating = ref(0)
</script>
<template>
<ARating
v-model="rating"
empty-icon="i-bx:heart"
full-icon="i-bx:bxs-heart"
color="danger"
/>
</template>Halve
You can use halve prop to allow half rating.
<script setup lang="ts">
import { ref } from 'vue'
const rating = ref(0)
</script>
<template>
<ARating
v-model="rating"
halve
/>
</template>No hover hint
You can use no-hover-hint prop to disable visual changes of value before click.
<script setup lang="ts">
import { ref } from 'vue'
const rating = ref(0)
</script>
<template>
<ARating
v-model="rating"
halve
no-hover-hint
/>
</template>Length
You can use length prop to change the amount of items.
<script setup lang="ts">
import { ref } from 'vue'
const rating = ref(0)
</script>
<template>
<div class="flex flex-col gap-2">
<ARating
v-model="rating"
length="3"
/>
</div>
</template>Animate
Use animate prop to animate hovered rating icon.
TIP
You can use no-hover-hint prop along with animate prop to only animate and prevent filling the rating icon on hover.
<script setup lang="ts">
import { ref } from 'vue'
const rating = ref(0)
</script>
<template>
<ARating
v-model="rating"
animate
empty-icon="i-bx:heart"
full-icon="i-bx:bxs-heart"
color="danger"
/>
</template>States
ARating also supports readonly & disabled states.
When rating is readonly or disabled, rating won't animate and you won't get hover hint. This means, when you set rating in readonly or disabled state, you are implicitly setting :animate="false" & :no-hover-hint="true".
NOTE
When rating is readonly or disabled, a-rating-animated class won't apply.
<script setup lang="ts">
import { ref } from 'vue'
const rating = ref(3)
</script>
<template>
<ARating
v-model="rating"
readonly
/>
<ARating
v-model="rating"
disabled
/>
</template>API
Sets amount of rating items
Disable rating selection
Make rating component readonly
Animate icon on hover
Allows the award of half a point
Sets empty icon
Sets half-filled icon
Sets filled icon
Allows to see visual changes of value on hover
Bind v-model value to rating