Rating
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