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

Components renaming (#225)

Browse Source 
* refactor: eslint config adjusted for better diff's

* refactor: stricter linting
 + dependencies updated

* refactoring: paragraph component
 - component
 - docs

* refactoring: heading component
 - component
 - docs

* Update docs/components/heading.md

Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com>

* refactoring: link component
 - component
 - docs

* refactoring: image component
 - component
 - docs

* refactoring: alert component
 - component
 - docs

* refactoring: avatar component
 - component
 - docs

* refactoring: removed unnecessary code
    - component names come from the file name

* refactoring: breadcrumb component
 - component
 - docs

* refactoring: accordion component
 - component
 - docs

* refactoring: buttom component
 - component
 - docs

* refactoring: badge component
 - component
 - docs

* refactoring: card component
 - component
 - docs

* refactoring: order of components in docs updated

* refactoring: unnecessary semicolons removed

* refactoring: button group component
 - component
 - docs

* refactoring: carousel component
 - component
 - docs

* refactoring: dropdown component
 - component
 - docs

* refactoring: footer component
 - component
 - docs

* refactoring:list-group component
 - component
 - docs

* refactoring: modal component
 - component
 - docs

* refactoring: navbar component
 - component
 - docs

* refactoring: pagination component
 - component
 - docs

* refactoring: progress component
 - component
 - docs

* refactoring: rating component
 - component
 - docs

* refactoring: spinner component
 - component
 - docs

* refactoring: table component
 - component
 - docs

* refactoring: tabs component
 - component
 - docs

* feat: Updated pagination examples

* lint: Lister fixes

* feat: Sidebar component and some fixes

* feat: Input component

* feat: Some fixes

* feat: Some fixes

* chore: update deps

* refactor: removed old Modal component

* refactor: radio component and some fixes

* fix: fixed path error

* refactor: Range component

* refactoring: timeline component
 - component
 - docs

* refactor: Select component

* refactoring: toast component
 - component
 - docs

* refactoring: tooltip component
 - component
 - docs

* refactoring: sidebar component
 - component
 - docs

* refactoring: input component
 - component
 - docs

* refactoring: fileInput component
 - component
 - docs

* refactoring: select component
 - component
 - docs

* refactoring: textarea component
 - component
 - docs

* refactoring: checkbox component
 - component
 - docs

* refactoring: radio component
 - component
 - docs

* refactoring: toggle component
 - component
 - docs

* refactoring: range component
 - component
 - docs

* local configs linted

* documentation quick start updated

* flowbite-themable refactored to fit new linters and style guide

* random linter fixes

* refactoring: toast-provider component
 - component
 - docs

* final linter fixes

* lint: Linter fixes

* fix: Fixed types

* fix: Fixed card component

* docs: Updated card examples

* fix: Fixed tabs

* refactor: Heading component refactoring

* Fwb rename - few fixes after component review (#237)

* fix: button documentation

* fix: model type in range examples

* chore: Toast marked as WIP

---------

Co-authored-by: Sqrcz <naorniakowski@slashlab.pl>
Co-authored-by: Sqrcz <naorniakowski@gmail.com>
This commit is contained in:
Ilya Artamonov
2023-10-23 18:23:14 +03:00
committed by GitHub
parent ea6fcf1a4c
commit d316cf3a12
600 changed files with 16349 additions and 10239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

121
docs/components/rating.md
View File

@@ -1,77 +1,82 @@
<script setup>
import RatingExample from './rating/examples/RatingExample.vue'
import RatingWithTextExample from './rating/examples/RatingWithTextExample.vue'
import RatingCountExample from './rating/examples/RatingCountExample.vue'
import RatingStarSizesExample from './rating/examples/RatingStarSizesExample.vue'
import FwbRatingExample from './rating/examples/FwbRatingExample.vue'
import FwbRatingExampleWithText from './rating/examples/FwbRatingExampleWithText.vue'
import FwbRatingExampleCount from './rating/examples/FwbRatingExampleCount.vue'
import FwbRatingExampleStarSizes from './rating/examples/FwbRatingExampleStarSizes.vue'
</script>
# Vue Rating - 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" />
</template>
```
<RatingExample />
<fwb-rating-example />
```vue
<template>
<fwb-rating :rating="4" />
</template>
<script setup>
import { FwbRating } from 'flowbite-vue'
</script>
```
## 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 />
<fwb-rating-example-with-text />
```vue
<template>
<fwb-rating :rating="4.75">
<template #besideText>
<p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">
4.75 out of 5
</p>
</template>
</fwb-rating>
</template>
<script setup>
import { FwbRating } from 'flowbite-vue'
</script>
```
## 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 />
<fwb-rating-example-count />
```vue
<template>
<fwb-rating
:rating="1"
:scale="1"
review-link="#"
review-text="73 reviews"
>
<template #besideText>
<p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">
4.95
</p>
</template>
</fwb-rating>
</template>
<script setup>
import { FwbRating } from 'flowbite-vue'
</script>
```
## 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" />
<!-- Medium -->
<Rating size="md" :rating="4" />
<!-- Large -->
<Rating size="lg" :rating="4" />
</template>
```
<RatingStarSizesExample />
<fwb-rating-example-star-sizes />
```vue
<template>
<fwb-rating size="sm" :rating="4" />
<fwb-rating size="md" :rating="4" />
<fwb-rating size="lg" :rating="4" />
</template>
<script setup>
import { FwbRating } from 'flowbite-vue'
</script>
```