التقييم

يعرض مكوّن التقييم مؤشراً قائماً على النجوم بأنماط صُلب وخطّي وتلوين العلامة التجارية وخيارات أحجام متعددة.

Loading demo: rating-real-world

التثبيت

npx sdaia-ui@latest add rating

import { Rating } from "@/components/ui/rating"

<Rating value={3} size="medium" style="solid" />

مكوّن التقييم الافتراضي بنجوم صُلبة بالحجم المتوسط.

Loading demo: rating-default

تقييم نجوم بأشكال نجوم خطّية (فارغة).

Loading demo: rating-outline

تقييم نجوم بأشكال نجوم صُلبة ممتلئة.

Loading demo: rating-solid

تقييم نجوم بألوان العلامة التجارية.

Loading demo: rating-brand

نجوم مكوّن التقييم بأحجام من صغير جداً إلى كبير جداً.

Loading demo: rating-sizes

خصائص مكوّن Rating.

Prop	Type	Default	Required
value	number	-	optional
defaultValue	number	0	optional
max	number	5	optional
size	'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'	'md'	optional
style	'solid' \| 'outline'	'solid'	optional
brand	boolean	true	optional
step	0.5 \| 1	0.5	optional
direction	'ltr' \| 'rtl'	'ltr'	optional
disabled	boolean	false	optional
readOnly	boolean	false	optional
hoverable	boolean	true	optional
starColor	string	-	optional
emptyStarColor	string	-	optional
onValueChange	(value: number) => void	-	optional