nili/ui
enfaartr
كل المكوّنات

Rating

عرض شامل
٢٨ تصدير٥ محور تنويع٥٨ خاصيّة٥ ملف
import { Rating, RatingAlignment, RatingBar, RatingBarArea, RatingBarLabels, RatingBarType } from '@nili/ui';

هذه صفحة العرض الشامل الخاصة بالمكتبة، معروضة حيّة. غيّر اللغة أو السمة من الأعلى وسَتتبعك.

تفاعلي

تحت الأيقونات مجموعة أزرار اختيار، فتعمل مفاتيح الأسهم وتُرسَل القيمة مع النموذج. ويربطها name بالإرسال الأصلي.

4
import { Rating } from "@nili/ui"

export function Example() {
  const [score, setScore] = useState(4)

  return (
    <Rating
      value={score}
      onValueChange={setScore}
      name="score"
      labels={{
        root: "Rate this article",
        item: (score) => `${score} stars`,
      }}
    />
  )
}

للقراءة فقط

للعرض فقط — متوسّط أو درجة مراجعة. يرسم دور صورة واحدًا بدل مجموعة أزرار اختيار، ويقبل القيم الكسرية، فيرسم ٤٫٥ نصف نجمة.

5
4.5
3.2
1
4.5 (128 reviews)
import { Rating } from "@nili/ui"

export function Example() {
  return (
    <>
      <Rating readOnly value={4.5} showValue />
      <Rating
        readOnly
        value={4.5}
        valueLabel={t('reviews')}
        labels={{ summary: (value, max) => `${value} out of ${max}` }}
      />
    </>
  )
}

الرمز والحالة الفارغة

يختار type بين النجمة والقلب ويحدّد اللون. ويختار empty بين الشكل المفرّغ ورمز رمادي مملوء — والثاني أوضح على سطح مزدحم.

نجمة · قلب
الفارغ: خطي · مملوء
max=10
import { Rating } from "@nili/ui"

export function Example() {
  return (
    <>
      <Rating type="star" defaultValue={3} />
      <Rating type="heart" defaultValue={3} />
      <Rating type="star" empty="filled" defaultValue={3} />
      <Rating max={10} defaultValue={7} />
    </>
  )
}

التقييم والمراجعة

alignment هو كتلة Rating & Review في فيجما: ratings هو الصف المجرّد، وvertical يضع الوصف تحته، وhorizontal بجانبه.

رأسي
4.5استنادًا إلى ١٢٨ مراجعة من مشترين موثّقين.اقرأ المراجعات
أفقي
١٢٨ مراجعة
import { Rating, LinkButton } from "@nili/ui"

export function Example() {
  return (
    <>
      <Rating
        readOnly
        value={4.5}
        alignment="vertical"
        showValue
        description="Based on 128 reviews from verified buyers."
        linkButton={<LinkButton href="#" size="sm">Read reviews</LinkButton>}
      />

      <Rating
        readOnly
        value={4.5}
        alignment="horizontal"
        description="128 reviews"
      />
    </>
  )
}

شريط التقييم

مقياس رضا من خمس نقاط — عنصر الاستبيان لا صفّ النجوم. أربعة أنواع، والأرقام تتبع اللغة.

emoji
number
star
heart
import { RatingBar } from "@nili/ui"

export function Example() {
  return (
    <>
      <RatingBar type="emoji" labels={{ root: "How was it?" }} />
      <RatingBar type="number" labels={{ root: "How was it?" }} />
      <RatingBar type="star" labels={{ root: "How was it?" }} />
      <RatingBar type="heart" labels={{ root: "How was it?" }} />
    </>
  )
}

شريط التقييم مع تعليق

كتلة الاستبيان كاملة: المقياس مع حقل نص حر. وcommentLabel مطلوبة عند إظهار التعليق — فمربّع نص مجرّد لا شيء يسمّيه.

import { RatingBarArea } from "@nili/ui"

export function Example() {
  return (
    <RatingBarArea
      type="emoji"
      labels={{ root: "How was your experience?" }}
      commentLabel="Tell us more"
      commentPlaceholder="Tell us why!"
    />
  )
}