Rating
Farklı simge biçimlerine sahip etkileşimli puanlama alanı.
Rating.tsx
Klasik Yıldız Puanlama (Gold & Etkileşimli)
4 / 5
Beğeni & Favori (Rose Hearts)
Seviye Göstergesi (Sage Circles)
3 / 5
Kurulum
shadcn CLI ile projenize ekleyebilir veya yukarıdaki "Kaynak Kodu" sekmesinden kodu doğrudan projenize kopyalayabilirsiniz:
$
npx shadcn@latest add https://ui.cagriozay.com.tr/r/rating.jsonKullanım Örneği
import { Rating } from "@/components/ui/Rating"
<Rating value={rating} onChange={setRating} max={5} showScore />Özellikler & Parametreler (API)
| Prop | Tür | Varsayılan | Açıklama |
|---|---|---|---|
| value | number | — | Seçili puan. |
| max | number | 5 | Maksimum puan. |
| readOnly | boolean | false | Etkileşimi kapatır. |
| size | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Glyph ölçeği. |
| glyph | "star" | "heart" | "circle" | "square" | "star" | Puan simgesi. |
| color | "gold" | "sage" | "rose" | "primary" | "gold" | Aktif simge rengi. |
| showScore | boolean | false | Sayısal puanı gösterir. |
| onChange | (value: number) => void | — | Puan değişikliği callback'i. |
| ariaLabel | string | "Puan" | Radio grubunun erişilebilir adı. |