nili/ui
enfaartr
همه‌ی کامپوننت‌ها

Rating

نمای کلی
۲۸ اکسپورت۵ محور واریانت۵۸ پراپ۵ فایل
import { Rating, RatingAlignment, RatingBar, RatingBarArea, RatingBarLabels, RatingBarType } from '@nili/ui';

این همان صفحه‌ی نمای کلیِ خود کتابخانه است که زنده رندر می‌شود. زبان یا تم را از هدر عوض کنید، همراهش می‌آید.

تعاملی

زیر آیکون‌ها مجموعه‌ای از رادیوهاست، پس کلیدهای جهت کار می‌کنند و مقدار همراه فرم ارسال می‌شود. name آن را به ارسال بومی گره می‌زند.

۴
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`,
      }}
    />
  )
}

فقط‌خواندنی

فقط برای نمایش — یک میانگین، یک امتیاز نقد. به‌جای مجموعه‌ای از رادیوها یک نقش تصویر می‌سازد و مقدار اعشاری می‌پذیرد، پس ۴٫۵ نیم‌ستاره می‌کشد.

۵
۴٫۵
۳٫۲
۱
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 کنارش.

عمودی
۴٫۵بر پایهٔ ۱۲۸ نقد از خریداران تأییدشده.خواندن نقدها
افقی
۱۲۸ نقد
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 الزامی است — یک textarea خالی چیزی برای نام‌گرفتن ندارد.

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!"
    />
  )
}