79 lines
1.8 KiB
Markdown
79 lines
1.8 KiB
Markdown
<script setup>
|
|
import RatingExample from './examples/RatingExample.vue'
|
|
import RatingWithTextExample from './examples/RatingWithTextExample.vue'
|
|
import RatingCountExample from './examples/RatingCountExample.vue'
|
|
import RatingStarSizesExample from './examples/RatingStarSizesExample.vue'
|
|
</script>
|
|
# Vue Rating Component - Flowbite
|
|
|
|
## Default rating
|
|
Use this simple example of a star rating component for showing review results.
|
|
```vue
|
|
<script setup>
|
|
import { Rating } from 'flowbite-vue'
|
|
</script>
|
|
<template>
|
|
<Rating rating=4></Rating>
|
|
</template>
|
|
```
|
|
|
|
<RatingExample />
|
|
|
|
## Rating with text
|
|
If you also want to show a text near the stars you can use this example as a reference.
|
|
```vue
|
|
<script setup>
|
|
import { Rating } from 'flowbite-vue'
|
|
</script>
|
|
<template>
|
|
<Rating rating=4>
|
|
<template #besideText>
|
|
<p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">4.95 out of 5</p>
|
|
</template>
|
|
</Rating>
|
|
</template>
|
|
```
|
|
|
|
<RatingWithTextExample />
|
|
|
|
## Rating count
|
|
Aggregate more results by using this example to show the amount of reviews and the average score.
|
|
```vue
|
|
<script setup>
|
|
import { Rating } from 'flowbite-vue'
|
|
</script>
|
|
<template>
|
|
<Rating
|
|
rating=1
|
|
scale=1
|
|
review-text="73 reviews"
|
|
review-link="#"
|
|
>
|
|
<template #besideText>
|
|
<p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">4.95</p>
|
|
</template>
|
|
|
|
</Rating>
|
|
</template>
|
|
```
|
|
|
|
<RatingCountExample />
|
|
|
|
## Star sizes
|
|
Check out the different sizing options for the star review component from small, medium, and large.
|
|
```vue
|
|
<script setup>
|
|
import { Rating } from 'flowbite-vue'
|
|
</script>
|
|
<template>
|
|
<!-- Small -->
|
|
<Rating size="sm" rating=4 ></Rating>
|
|
<!-- Medium -->
|
|
<Rating size="md" rating=4></Rating>
|
|
<!-- Large -->
|
|
<Rating size="lg" rating=4></Rating>
|
|
</template>
|
|
```
|
|
|
|
<RatingStarSizesExample />
|