تقييم

Rating

تقييم بالنجوم متاح الوصول في React، يصلح حقلاً للإدخال أو عرضاً للقراءة فقط: دقة نصف نجمة، أحجام، درجة العلامة، ودعم كامل للوحة المفاتيح.

فتح في Storybook ↗

يجمع Rating تقييماً بالنجوم أو يعرضه. استخدم readOnly للعرض فقط، allowHalf لأنصاف النجوم، وtone="brand" للأخضر السعودي.

متى تستخدمه

استخدم Rating لقياس رضا المستفيد بعد تقديم الخدمة، أو لعرض متوسط الدرجات. فعّل readOnly للعرض، وallowHalf حين تحتاج المتوسطات دقة أكبر. أبق المقياس على 5 نجوم لأن المستخدمين يعرفونه.

لسؤال بخيارات مسماة، مثل "ما مدى سهولة الخدمة؟"، يعطي RadioGroup إجابات أوضح.

أمثلة

تقييم خدمة

قيم هذه الخدمة

دقة نصف نجمة

الجودة

متوسط للقراءة فقط

متوسط التقييم

مبني على 248 تقييمًا

الأحجام

صغير

متوسط

كبير

الخصائص

الخصائص التي يعرفها Rating. سمات العنصر الأصلي تمر كما هي.

الخاصية	النوع	الوصف
`size`	`"sm" \| "md" \| "lg"`
`value`	`number`	Controlled value (0…max). `.5` increments are allowed when `allowHalf`.
`defaultValue`	`number`	Uncontrolled initial value. Defaults to 0.
`onValueChange`	`(value: number) => void`	Fires with the chosen rating.
`max`	`number`	Number of stars. Defaults to 5.
`allowHalf`	`boolean`	Allow half-star (`.5`) precision.
`readOnly`	`boolean`	Display only - no interaction, exposed as `role="img"`.
`disabled`	`boolean`	Non-interactive and dimmed.
`name`	`string`	Submits the value under this name in native forms (`FormData`), as a number string such as `"4"` or `"3.5"`. Unrated submits `"0"`; disabled doesn't submit.
`form`	`string`	Associates the hidden input with a `<form>` by id, like the native `form` attribute.
`label`	`react.ReactNode`	Visible field label.
`helperText`	`react.ReactNode`	Hint shown below the field. Hidden while an error message is showing.
`errorMessage`	`react.ReactNode`	Message shown below the field when `error` is true.
`error`	`boolean`	Marks the field invalid: sets `aria-invalid` and error styling.
`tone`	`"default" \| "brand"`	SDGA Style axis. `default` (gold) · `brand` (SA green). Recolor per instance via the `--ddga-rating-color` CSS variable.
`icon`	`react.ReactNode`	Symbol rendered instead of the default star (e.g. a heart). Used for both the empty and filled layers - fill/empty colors come from CSS, so pass an icon that uses `currentColor`. Defaults to the SDGA star.
`formatValueText`	`(value: number, max: number) => string`	Builds the accessible value text / read-only label. Defaults to `"{value} out of {max} stars"`. Override for localization.
`id`	`string`
`className`	`string`
`aria-label`	`string`	Defines a string value that labels the current element.
`aria-labelledby`	`string`	Identifies the element (or elements) that labels the current element.

إمكانية الوصول

يحمل التقييم التفاعلي الدور slider. تغير مفاتيح الأسهم الدرجة، وينقلها مفتاحا Home وEnd إلى الطرفين. يعلن aria-valuetext القيمة مع تسميتها. يعرض التقييم للقراءة فقط صورةً باسم متاح، ليعلنه قارئ الشاشة دون أن يقبل التركيز.

أعط الأداة اسماً عبر label أو aria-label، واستخدم رسالة الخطأ لشرح التقييم الناقص.