Skip to content

Commit

Permalink
feat: add rating component (fix #374)
Browse files Browse the repository at this point in the history
  • Loading branch information
@saadeghi
saadeghi committed Jan 8, 2022
1 parent 7b37212 commit 6285227
Show file tree
Hide file tree
Showing 4 changed files with 195 additions and 0 deletions.
36 changes: 36 additions & 0 deletions src/components/styled/rating.css
View file
@@ -0,0 +1,36 @@
.rating{
:where(input){
animation: rating-pop var(--animation-input, 0.25s) ease-out;
@apply appearance-none w-6 h-6 bg-base-content bg-opacity-100;
}
& .rating-hidden{
@apply w-2 bg-transparent;
}
input:checked ~ input{
@apply bg-opacity-20;
}
input:focus-visible{
@apply transition-transform ease-in-out duration-300;
transform: translateY(-.125em);
}

& input:active:focus{
animation: none;
}

& input:active:focus{
transform: translateY(-.125em);
}
}

@keyframes rating-pop {
0% {
transform: translateY(-.125em);
}
40% {
transform: translateY(-.125em);
}
100% {
transform: translateY(0);
}
}
6 changes: 6 additions & 0 deletions src/components/unstyled/rating.css
View file
@@ -0,0 +1,6 @@
.rating{
@apply relative inline-flex;
:where(input){
@apply cursor-pointer;
}
}
139 changes: 139 additions & 0 deletions src/docs/pages/components/rating.vue
View file
@@ -0,0 +1,139 @@
<template>
<div>
<ClassTable v-bind:data="{
components : [
{ class: 'rating', desc: 'Wrapper component for radio buttons' },
],
utility : [
{ class: 'rating-hidden', desc: 'hides the input. Useful to clear the the rating' },
],
responsive : [
{ class: 'btn-lg', desc: 'Large rating' },
{ class: 'btn-md', desc: 'Medium rating (default)' },
{ class: 'btn-sm', desc: 'Small rating' },
{ class: 'btn-xs', desc: 'Extra small rating' },
],
}"/>
<Wrapper title="rating">

<div class="rating">
<input class="mask mask-star" type="radio" name="rating-1">
<input class="mask mask-star" type="radio" name="rating-1" checked>
<input class="mask mask-star" type="radio" name="rating-1">
<input class="mask mask-star" type="radio" name="rating-1">
<input class="mask mask-star" type="radio" name="rating-1">
</div>

</Wrapper>
<Wrapper title="mask-star-2 bg-warning">

<div class="rating">
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-2">
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-2" checked>
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-2">
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-2">
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-2">
</div>

</Wrapper>
<Wrapper title="mask-heart bg-error">

<div class="gap-1 rating">
<input class="mask mask-heart bg-error" type="radio" name="rating-3">
<input class="mask mask-heart bg-error" type="radio" name="rating-3" checked>
<input class="mask mask-heart bg-error" type="radio" name="rating-3">
<input class="mask mask-heart bg-error" type="radio" name="rating-3">
<input class="mask mask-heart bg-error" type="radio" name="rating-3">
</div>

</Wrapper>
<Wrapper title="mask-star-2 bg-green-500">

<div class="rating">
<input class="bg-green-500 mask mask-star-2" type="radio" name="rating-4">
<input class="bg-green-500 mask mask-star-2" type="radio" name="rating-4" checked>
<input class="bg-green-500 mask mask-star-2" type="radio" name="rating-4">
<input class="bg-green-500 mask mask-star-2" type="radio" name="rating-4">
<input class="bg-green-500 mask mask-star-2" type="radio" name="rating-4">
</div>

</Wrapper>


<Wrapper title="rating rating-xs">

<div class="rating rating-xs">
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-5">
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-5" checked>
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-5">
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-5">
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-5">
</div>

</Wrapper>
<Wrapper title="rating rating-sm">

<div class="rating rating-sm">
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-6">
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-6" checked>
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-6">
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-6">
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-6">
</div>

</Wrapper>
<Wrapper title="rating rating-md">

<div class="rating rating-md">
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-7">
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-7" checked>
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-7">
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-7">
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-7">
</div>

</Wrapper>
<Wrapper title="rating rating-lg">

<div class="rating rating-lg">
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-8">
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-8" checked>
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-8">
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-8">
<input class="mask mask-star-2 bg-warning" type="radio" name="rating-8">
</div>

</Wrapper>
<Wrapper title="with `rating-hidden` (to clear the rating)">

<div class="rating">
<input class="rating-hidden" type="radio" name="rating-9">
<input class="mask mask-star-2" type="radio" name="rating-9">
<input class="mask mask-star-2" type="radio" name="rating-9" checked>
<input class="mask mask-star-2" type="radio" name="rating-9">
<input class="mask mask-star-2" type="radio" name="rating-9">
<input class="mask mask-star-2" type="radio" name="rating-9">
</div>

</Wrapper>

</div>
</template>


<script>
export default {
head() {
return {
title: "daisyUI — Tailwind CSS star rating component",
meta: [
{
hid: 'description',
name: 'description',
content: 'Tailwind CSS star rating example - Tailwind CSS star rating example'
}
]
}
}
}
</script>
14 changes: 14 additions & 0 deletions src/utilities/unstyled/rating.css
View file
@@ -0,0 +1,14 @@
.rating{
&-xs input {
@apply w-3 h-3;
}
&-sm input {
@apply w-4 h-4;
}
&-md input {
@apply w-6 h-6;
}
&-lg input {
@apply w-10 h-10;
}
}

0 comments on commit 6285227

Please sign in to comment.