Progress
FREEAnimasyonlu dolgulu çizgi ve daire ilerleme; etiket, yerelleştirilmiş değer ve belirsiz mod.
Kurulum
Terminal
npx @bloxa/cli add progress
# or: npx shadcn@latest add @bloxa/progressOtomatik kurulan paketler: motion, radix-ui
Örnekler
Boyut, renk ve değer
Storage64 / 100 GB
Quota%88
Canlı ve belirsiz
value={null} belirsiz moddur; değer gelince dolgu animasyonla ilerler.
Preparing…
Daire
%25
%60
%92
7/10
API
Her bileşen, oluşturduğu HTML elemanının özelliklerini de kabul eder.
Progress
| Özellik | Tip | Varsayılan | Açıklama |
|---|---|---|---|
| value | number | null | null | Mevcut değer; null belirsiz mod. |
| max | number | 100 | En büyük değer. |
| size | "sm" | "md" | "lg" | "md" | Yükseklik ve yazı boyutu. |
| tone | "accent" | "foreground" | "destructive" | "accent" | Dolgu rengi. |
| label | ReactNode | — | Çubuğun üstünde solda metin. |
| showValue | boolean | false | Biçimlendirilmiş değeri sağda göster. |
| formatValue | (value, max) => string | — | Özel değer metni; varsayılan yerelleştirilmiş yüzde. |
ProgressCircle
| Özellik | Tip | Varsayılan | Açıklama |
|---|---|---|---|
| value | number | — | Mevcut değer. |
| size | number | 64 | Çap (px). |
| thickness | number | 6 | Halka kalınlığı (px). |
| showValue | boolean | ReactNode | true | Ortada değer ya da kendi içeriğin. |
| label | string | — | Erişilebilir ad. |