jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge pull request #113 from hirakei1203/add/khirano/rating_component

Browse Source 
feat: Added New Rating component (basic)
This commit is contained in:
Ilya Artamonov
2022-12-14 22:16:40 +03:00
committed by GitHub
parent cb30c50c59 dd889c4f2a
commit b6a0e125e2
8 changed files with 195 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
docs/components/rating/examples/RatingCountExample.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<div class="vp-raw flex flex-col">
<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>
</div>
</template>
<script setup>
import { Rating } from '../../../../src/index'
</script>

2
docs/components/rating/examples/RatingExample.vue
View File

@@ -1,6 +1,6 @@
<template>
<div class="vp-raw flex flex-col">
<Rating></Rating>
<Rating rating=4></Rating>
</div>
</template>
<script setup>

13
docs/components/rating/examples/RatingStarSizesExample.vue Normal file
View File

@@ -0,0 +1,13 @@
<template>
<div class="vp-raw flex flex-col gap-5">
<!-- Small -->
<Rating size="sm" rating=4 ></Rating>
<!-- Medium -->
<Rating size="md" rating=4></Rating>
<!-- Large -->
<Rating size="lg" rating=4></Rating>
</div>
</template>
<script setup>
import { Rating } from '../../../../src/index'
</script>

12
docs/components/rating/examples/RatingWithTextExample.vue Normal file
View File

@@ -0,0 +1,12 @@
<template>
<div class="vp-raw flex flex-col">
<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>
</div>
</template>
<script setup>
import { Rating } from '../../../../src/index'
</script>

65
docs/components/rating/rating.md
View File

@@ -1,15 +1,78 @@
<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>
<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 />