536 lines
17 KiB
Markdown
536 lines
17 KiB
Markdown
# Rating
|
|
|
|
Star rating component with customizable count, icons, and read-only mode.
|
|
|
|
## Tag
|
|
|
|
`Rating`
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Default | Description |
|
|
| :----------- | :--------------------------- | :--------------- | :----------------------------------------------- |
|
|
| `value` | `number \| Signal<number>` | `0` | Current rating value |
|
|
| `count` | `number \| Signal<number>` | `5` | Number of stars/items |
|
|
| `mask` | `string` | `'mask-star'` | Mask shape (mask-star, mask-star-2, mask-heart) |
|
|
| `readonly` | `boolean \| Signal<boolean>` | `false` | Disable interaction |
|
|
| `class` | `string` | `''` | Additional CSS classes (DaisyUI + Tailwind) |
|
|
|
|
## Live Examples
|
|
|
|
### Basic Rating
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-basic" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
const BasicDemo = () => {
|
|
const rating = $(3);
|
|
|
|
return Div({ class: 'flex flex-col gap-2 items-center' }, [
|
|
Rating({
|
|
value: rating,
|
|
count: 5,
|
|
onchange: (value) => rating(value)
|
|
}),
|
|
Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / 5`)
|
|
]);
|
|
};
|
|
$mount(BasicDemo, '#demo-basic');
|
|
```
|
|
|
|
### Heart Rating
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-heart" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
const HeartDemo = () => {
|
|
const rating = $(4);
|
|
|
|
return Div({ class: 'flex flex-col gap-2 items-center' }, [
|
|
Rating({
|
|
value: rating,
|
|
count: 5,
|
|
mask: 'mask-heart',
|
|
onchange: (value) => rating(value)
|
|
}),
|
|
Div({ class: 'text-sm opacity-70' }, () => `${rating()} hearts`)
|
|
]);
|
|
};
|
|
$mount(HeartDemo, '#demo-heart');
|
|
```
|
|
|
|
### Star with Outline
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-star2" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
const Star2Demo = () => {
|
|
const rating = $(2);
|
|
|
|
return Div({ class: 'flex flex-col gap-2 items-center' }, [
|
|
Rating({
|
|
value: rating,
|
|
count: 5,
|
|
mask: 'mask-star-2',
|
|
onchange: (value) => rating(value)
|
|
}),
|
|
Div({ class: 'text-sm opacity-70' }, () => `${rating()} stars`)
|
|
]);
|
|
};
|
|
$mount(Star2Demo, '#demo-star2');
|
|
```
|
|
|
|
### Read-only Rating
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-readonly" class="bg-base-100 p-6 rounded-xl border border-base-300 flex items-center justify-center"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
const ReadonlyDemo = () => {
|
|
const rating = $(4.5);
|
|
|
|
return Div({ class: 'flex flex-col gap-2 items-center' }, [
|
|
Rating({
|
|
value: rating,
|
|
count: 5,
|
|
readonly: true
|
|
}),
|
|
Div({ class: 'text-sm opacity-70' }, 'Average rating: 4.5/5 (read-only)')
|
|
]);
|
|
};
|
|
$mount(ReadonlyDemo, '#demo-readonly');
|
|
```
|
|
|
|
### Custom Count
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-custom" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-4"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
const CustomDemo = () => {
|
|
const rating = $(3);
|
|
const count = $(10);
|
|
|
|
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
|
Div({ class: 'flex items-center gap-4' }, [
|
|
Span({ class: 'text-sm' }, 'Number of stars:'),
|
|
Input({
|
|
type: 'number',
|
|
value: count,
|
|
class: 'input input-sm w-24'
|
|
})
|
|
]),
|
|
Rating({
|
|
value: rating,
|
|
count: count,
|
|
onchange: (value) => rating(value)
|
|
}),
|
|
Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / ${count()}`)
|
|
]);
|
|
};
|
|
$mount(CustomDemo, '#demo-custom');
|
|
```
|
|
|
|
### Product Review
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-review" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
const ReviewDemo = () => {
|
|
const quality = $(4);
|
|
const price = $(3);
|
|
const support = $(5);
|
|
|
|
const average = () => Math.round(((quality() + price() + support()) / 3) * 10) / 10;
|
|
|
|
return Div({ class: 'flex flex-col gap-4' }, [
|
|
Div({ class: 'text-lg font-bold' }, 'Product Review'),
|
|
Div({ class: 'flex flex-col gap-2' }, [
|
|
Div({ class: 'flex justify-between items-center' }, [
|
|
Span({ class: 'text-sm w-24' }, 'Quality:'),
|
|
Rating({
|
|
value: quality,
|
|
count: 5,
|
|
size: 'sm',
|
|
onchange: (v) => quality(v)
|
|
})
|
|
]),
|
|
Div({ class: 'flex justify-between items-center' }, [
|
|
Span({ class: 'text-sm w-24' }, 'Price:'),
|
|
Rating({
|
|
value: price,
|
|
count: 5,
|
|
size: 'sm',
|
|
onchange: (v) => price(v)
|
|
})
|
|
]),
|
|
Div({ class: 'flex justify-between items-center' }, [
|
|
Span({ class: 'text-sm w-24' }, 'Support:'),
|
|
Rating({
|
|
value: support,
|
|
count: 5,
|
|
size: 'sm',
|
|
onchange: (v) => support(v)
|
|
})
|
|
])
|
|
]),
|
|
Div({ class: 'divider my-1' }),
|
|
Div({ class: 'flex justify-between items-center' }, [
|
|
Span({ class: 'font-bold' }, 'Overall:'),
|
|
Div({ class: 'text-2xl font-bold text-primary' }, () => average())
|
|
])
|
|
]);
|
|
};
|
|
$mount(ReviewDemo, '#demo-review');
|
|
```
|
|
|
|
### All Variants
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-variants" class="bg-base-100 p-6 rounded-xl border border-base-300 flex flex-col gap-6"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
const VariantsDemo = () => {
|
|
return Div({ class: 'flex flex-col gap-6' }, [
|
|
Div({ class: 'text-center' }, [
|
|
Div({ class: 'text-sm mb-2' }, 'Mask Star'),
|
|
Rating({ value: $(3), count: 5, mask: 'mask-star' })
|
|
]),
|
|
Div({ class: 'text-center' }, [
|
|
Div({ class: 'text-sm mb-2' }, 'Mask Star 2 (yellow)' ),
|
|
Rating({ value: $(4), count: 5, mask: 'mask-star-2', class: 'rating-warning' })
|
|
]),
|
|
Div({ class: 'text-center' }, [
|
|
Div({ class: 'text-sm mb-2' }, 'Mask Heart'),
|
|
Rating({ value: $(5), count: 5, mask: 'mask-heart', class: 'rating-error' })
|
|
]),
|
|
Div({ class: 'text-center' }, [
|
|
Div({ class: 'text-sm mb-2' }, 'Half Stars (read-only)'),
|
|
Rating({ value: $(3.5), count: 5, readonly: true })
|
|
])
|
|
]);
|
|
};
|
|
$mount(VariantsDemo, '#demo-variants');
|
|
```
|
|
|
|
### Interactive Feedback
|
|
|
|
<div class="card bg-base-200 border border-base-300 shadow-sm my-6">
|
|
<div class="card-body">
|
|
<h3 class="card-title text-sm uppercase opacity-50 mb-4">Live Demo</h3>
|
|
<div id="demo-feedback" class="bg-base-100 p-6 rounded-xl border border-base-300"></div>
|
|
</div>
|
|
</div>
|
|
|
|
```javascript
|
|
const FeedbackDemo = () => {
|
|
const rating = $(0);
|
|
const feedback = $(false);
|
|
|
|
const messages = {
|
|
1: 'Very disappointed 😞',
|
|
2: 'Could be better 😕',
|
|
3: 'Good 👍',
|
|
4: 'Very good 😊',
|
|
5: 'Excellent! 🎉'
|
|
};
|
|
|
|
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
|
Div({ class: 'text-center' }, [
|
|
Div({ class: 'text-sm mb-2' }, 'How was your experience?'),
|
|
Rating({
|
|
value: rating,
|
|
count: 5,
|
|
onchange: (value) => {
|
|
rating(value);
|
|
feedback(true);
|
|
if (value >= 4) {
|
|
Toast('Thank you for your positive feedback!', 'alert-success', 2000);
|
|
} else if (value <= 2) {
|
|
Toast('We appreciate your feedback and will improve!', 'alert-warning', 2000);
|
|
} else {
|
|
Toast('Thanks for your rating!', 'alert-info', 2000);
|
|
}
|
|
}
|
|
})
|
|
]),
|
|
() => rating() > 0
|
|
? Div({ class: 'alert alert-soft text-center' }, [
|
|
messages[rating()] || `Rating: ${rating()} stars`
|
|
])
|
|
: null
|
|
]);
|
|
};
|
|
$mount(FeedbackDemo, '#demo-feedback');
|
|
```
|
|
|
|
<script>
|
|
(function() {
|
|
const initRatingExamples = () => {
|
|
|
|
// 1. Basic Rating
|
|
const basicTarget = document.querySelector('#demo-basic');
|
|
if (basicTarget && !basicTarget.hasChildNodes()) {
|
|
const BasicDemo = () => {
|
|
const rating = $(3);
|
|
|
|
return Div({ class: 'flex flex-col gap-2 items-center' }, [
|
|
Rating({
|
|
value: rating,
|
|
count: 5,
|
|
onchange: (value) => rating(value)
|
|
}),
|
|
Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / 5`)
|
|
]);
|
|
};
|
|
$mount(BasicDemo, basicTarget);
|
|
}
|
|
|
|
// 2. Heart Rating
|
|
const heartTarget = document.querySelector('#demo-heart');
|
|
if (heartTarget && !heartTarget.hasChildNodes()) {
|
|
const HeartDemo = () => {
|
|
const rating = $(4);
|
|
|
|
return Div({ class: 'flex flex-col gap-2 items-center' }, [
|
|
Rating({
|
|
value: rating,
|
|
count: 5,
|
|
mask: 'mask-heart',
|
|
onchange: (value) => rating(value)
|
|
}),
|
|
Div({ class: 'text-sm opacity-70' }, () => `${rating()} hearts`)
|
|
]);
|
|
};
|
|
$mount(HeartDemo, heartTarget);
|
|
}
|
|
|
|
// 3. Star with Outline
|
|
const star2Target = document.querySelector('#demo-star2');
|
|
if (star2Target && !star2Target.hasChildNodes()) {
|
|
const Star2Demo = () => {
|
|
const rating = $(2);
|
|
|
|
return Div({ class: 'flex flex-col gap-2 items-center' }, [
|
|
Rating({
|
|
value: rating,
|
|
count: 5,
|
|
mask: 'mask-star-2',
|
|
onchange: (value) => rating(value)
|
|
}),
|
|
Div({ class: 'text-sm opacity-70' }, () => `${rating()} stars`)
|
|
]);
|
|
};
|
|
$mount(Star2Demo, star2Target);
|
|
}
|
|
|
|
// 4. Read-only Rating
|
|
const readonlyTarget = document.querySelector('#demo-readonly');
|
|
if (readonlyTarget && !readonlyTarget.hasChildNodes()) {
|
|
const ReadonlyDemo = () => {
|
|
const rating = $(4.5);
|
|
|
|
return Div({ class: 'flex flex-col gap-2 items-center' }, [
|
|
Rating({
|
|
value: rating,
|
|
count: 5,
|
|
readonly: true
|
|
}),
|
|
Div({ class: 'text-sm opacity-70' }, 'Average rating: 4.5/5 (read-only)')
|
|
]);
|
|
};
|
|
$mount(ReadonlyDemo, readonlyTarget);
|
|
}
|
|
|
|
// 5. Custom Count
|
|
const customTarget = document.querySelector('#demo-custom');
|
|
if (customTarget && !customTarget.hasChildNodes()) {
|
|
const CustomDemo = () => {
|
|
const rating = $(3);
|
|
const count = $(10);
|
|
|
|
return Div({ class: 'flex flex-col gap-4 w-full' }, [
|
|
Div({ class: 'flex items-center gap-4' }, [
|
|
Span({ class: 'text-sm' }, 'Number of stars:'),
|
|
Input({
|
|
type: 'number',
|
|
value: count,
|
|
class: 'input input-sm w-24',
|
|
oninput: (e) => count(parseInt(e.target.value) || 1)
|
|
})
|
|
]),
|
|
Rating({
|
|
value: rating,
|
|
count: count,
|
|
onchange: (value) => rating(value)
|
|
}),
|
|
Div({ class: 'text-sm opacity-70' }, () => `Rating: ${rating()} / ${count()}`)
|
|
]);
|
|
};
|
|
$mount(CustomDemo, customTarget);
|
|
}
|
|
|
|
// 6. Product Review
|
|
const reviewTarget = document.querySelector('#demo-review');
|
|
if (reviewTarget && !reviewTarget.hasChildNodes()) {
|
|
const ReviewDemo = () => {
|
|
const quality = $(4);
|
|
const price = $(3);
|
|
const support = $(5);
|
|
|
|
const average = () => Math.round(((quality() + price() + support()) / 3) * 10) / 10;
|
|
|
|
return Div({ class: 'flex flex-col gap-4' }, [
|
|
Div({ class: 'text-lg font-bold' }, 'Product Review'),
|
|
Div({ class: 'flex flex-col gap-2' }, [
|
|
Div({ class: 'flex justify-between items-center' }, [
|
|
Span({ class: 'text-sm w-24' }, 'Quality:'),
|
|
Rating({
|
|
value: quality,
|
|
count: 5,
|
|
size: 'sm',
|
|
onchange: (v) => quality(v)
|
|
})
|
|
]),
|
|
Div({ class: 'flex justify-between items-center' }, [
|
|
Span({ class: 'text-sm w-24' }, 'Price:'),
|
|
Rating({
|
|
value: price,
|
|
count: 5,
|
|
size: 'sm',
|
|
onchange: (v) => price(v)
|
|
})
|
|
]),
|
|
Div({ class: 'flex justify-between items-center' }, [
|
|
Span({ class: 'text-sm w-24' }, 'Support:'),
|
|
Rating({
|
|
value: support,
|
|
count: 5,
|
|
size: 'sm',
|
|
onchange: (v) => support(v)
|
|
})
|
|
])
|
|
]),
|
|
Div({ class: 'divider my-1' }),
|
|
Div({ class: 'flex justify-between items-center' }, [
|
|
Span({ class: 'font-bold' }, 'Overall:'),
|
|
Div({ class: 'text-2xl font-bold text-primary' }, () => average())
|
|
])
|
|
]);
|
|
};
|
|
$mount(ReviewDemo, reviewTarget);
|
|
}
|
|
|
|
// 7. All Variants
|
|
const variantsTarget = document.querySelector('#demo-variants');
|
|
if (variantsTarget && !variantsTarget.hasChildNodes()) {
|
|
const VariantsDemo = () => {
|
|
return Div({ class: 'flex flex-col gap-6' }, [
|
|
Div({ class: 'text-center' }, [
|
|
Div({ class: 'text-sm mb-2' }, 'Mask Star'),
|
|
Rating({ value: $(3), count: 5, mask: 'mask-star' })
|
|
]),
|
|
Div({ class: 'text-center' }, [
|
|
Div({ class: 'text-sm mb-2' }, 'Mask Star 2 (yellow)' ),
|
|
Rating({ value: $(4), count: 5, mask: 'mask-star-2', class: 'rating-warning' })
|
|
]),
|
|
Div({ class: 'text-center' }, [
|
|
Div({ class: 'text-sm mb-2' }, 'Mask Heart'),
|
|
Rating({ value: $(5), count: 5, mask: 'mask-heart', class: 'rating-error' })
|
|
]),
|
|
Div({ class: 'text-center' }, [
|
|
Div({ class: 'text-sm mb-2' }, 'Half Stars (read-only)'),
|
|
Rating({ value: $(3.5), count: 5, readonly: true })
|
|
])
|
|
]);
|
|
};
|
|
$mount(VariantsDemo, variantsTarget);
|
|
}
|
|
|
|
// 8. Interactive Feedback
|
|
const feedbackTarget = document.querySelector('#demo-feedback');
|
|
if (feedbackTarget && !feedbackTarget.hasChildNodes()) {
|
|
const FeedbackDemo = () => {
|
|
const rating = $(0);
|
|
const feedback = $(false);
|
|
|
|
const messages = {
|
|
1: 'Very disappointed 😞',
|
|
2: 'Could be better 😕',
|
|
3: 'Good 👍',
|
|
4: 'Very good 😊',
|
|
5: 'Excellent! 🎉'
|
|
};
|
|
|
|
return Div({ class: 'flex flex-col gap-4 items-center' }, [
|
|
Div({ class: 'text-center' }, [
|
|
Div({ class: 'text-sm mb-2' }, 'How was your experience?'),
|
|
Rating({
|
|
value: rating,
|
|
count: 5,
|
|
onchange: (value) => {
|
|
rating(value);
|
|
feedback(true);
|
|
if (value >= 4) {
|
|
Toast('Thank you for your positive feedback!', 'alert-success', 2000);
|
|
} else if (value <= 2) {
|
|
Toast('We appreciate your feedback and will improve!', 'alert-warning', 2000);
|
|
} else {
|
|
Toast('Thanks for your rating!', 'alert-info', 2000);
|
|
}
|
|
}
|
|
})
|
|
]),
|
|
() => rating() > 0
|
|
? Div({ class: 'alert alert-soft text-center' }, [
|
|
messages[rating()] || `Rating: ${rating()} stars`
|
|
])
|
|
: null
|
|
]);
|
|
};
|
|
$mount(FeedbackDemo, feedbackTarget);
|
|
}
|
|
};
|
|
|
|
initRatingExamples();
|
|
|
|
if (window.$docsify) {
|
|
window.$docsify.plugins = [].concat(window.$docsify.plugins || [], (hook) => {
|
|
hook.doneEach(initRatingExamples);
|
|
});
|
|
}
|
|
})();
|
|
</script>
|