nili/ui
enfaartr
Tüm bileşenler

Rating

Genel görünüm
28 export5 varyant ekseni58 prop5 dosya
import { Rating, RatingAlignment, RatingBar, RatingBarArea, RatingBarLabels, RatingBarType } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Etkileşimli

Simgelerin altında bir radyo kümesi var; böylece ok tuşları çalışır ve değer formla birlikte gönderilir. name onu yerel gönderime bağlar.

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

Salt okunur

Yalnızca gösterim — bir ortalama, bir değerlendirme puanı. Bir radyo kümesi yerine tek bir görsel rolü çizer ve kesirli değer kabul eder; 4,5 yarım yıldız çizer.

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

Simge ve boş durum

type yıldız ya da kalbi seçer ve rengi belirler. empty dış çizgi ile dolu gri simge arasında seçim yapar — ikincisi kalabalık bir yüzeyde daha iyi okunur.

yıldız · kalp
boş: çizgi · dolu
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} />
    </>
  )
}

Puan ve değerlendirme

alignment, Figma’nın Rating & Review bloğudur: ratings çıplak satır, vertical açıklamayı altına, horizontal yanına koyar.

dikey
4,5Doğrulanmış alıcılardan 128 değerlendirmeye göre.Değerlendirmeleri oku
yatay
128 değerlendirme
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"
      />
    </>
  )
}

Puan çubuğu

Beş noktalı bir memnuniyet ölçeği — anket denetimi, yıldız satırı değil. Dört tür ve rakamlar yerel ayarı izler.

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

Yorumlu puan çubuğu

Anket bloğunun tamamı: ölçek artı serbest metin alanı. Yorum gösterildiğinde commentLabel zorunludur — çıplak bir metin alanını adlandıracak bir şey yoktur.

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