Rating
Default
0 of 5
<script lang="ts">
import { Rating } from 'stwui';
</script>
<Rating name="rating-1" showValue />
<br />
<Rating name="rating-2" value={3} class="text-orange-400" />Half
<script lang="ts">
import { Rating } from 'stwui';
</script>
<Rating name="rating-3" half />
<br />
<Rating name="rating-4" value={3} half class="text-orange-400" />Size
<script lang="ts">
import { Rating } from 'stwui';
</script>
<Rating name="rating-5" size="sm" />
<br />
<Rating name="rating-6" value={3} class="text-orange-400" />
<br />
<Rating name="rating-7" value={3} size="lg" class="text-purple-400" />Show Value
0 of 5
3 of 5
3 of 5
0 of 5
3 of 5
3.5 of 5
<script lang="ts">
import { Rating } from 'stwui';
</script>
<Rating name="rating-5" size="sm" showValue />
<br />
<Rating name="rating-6" value={3} class="text-orange-400" showValue />
<br />
<Rating name="rating-7" value={3} size="lg" class="text-purple-400" showValue />
<br />
<Rating name="rating-8" size="sm" half showValue />
<br />
<Rating name="rating-9" value={3} half class="text-orange-400" showValue />
<br />
<Rating name="rating-10" value={3.5} half size="lg" class="text-purple-400" showValue />Rating Props
| half | boolean | false |
| outOf | number | 5 |
| name | string | |
| value | number | 0 |
| size | 'sm' | 'md' | 'lg' | md |
| showValue | boolean | false |