گروه رادیویی چیپی که گزینه‌ی انتخابی ورم می‌کند و همسایه‌هایش را با فنر به عقب می‌راند.
ورودی‌ها · کلیک / صفحه‌کلید
با انتخاب هر گزینه، همان چیپ بزرگ می‌شود و بقیه کمی جمع می‌شوند و از سرِ جا کنار می‌روند. هرچه گزینه دورتر باشد، دیرتر راه می‌افتد؛ نتیجه یک موج ملایم است نه حرکت یک‌تکه. فلش‌های صفحه‌کلید گزینه‌ی بعدی و قبلی را می‌برند و Home و End به دو سر می‌جهند.
پراپ‌هایی که برای تغییر این کامپوننت می‌توانید بدهید. ستاره‌دارها الزامی‌اند.
itemsJellyRadioItem[]پیش‌فرض: ["خاموش", "کم", "متوسط", "زیاد", "بیشینه"]گزینه‌ها. می‌توانید رشته بدهید یا شیءی با value و label و آیکن و disabled.
valuestringمقدار کنترل‌شده. برای حالت uncontrolled این پراپ را ندهید و defaultValue بدهید.
defaultValuestringگزینه‌ی انتخاب‌شده در حالت uncontrolled. پیش‌فرض اولین گزینه است.
onChange(value: string, index: number) => voidبا هر انتخاب، مقدار و ایندکس گزینه‌ی تازه را برمی‌گرداند.
sizesm | md | lgپیش‌فرض: mdاندازه‌ی چیپ‌ها: کوچک ۲۸، متوسط ۳۶ و بزرگ ۴۴ پیکسل بلندی.
chipColorstringپیش‌فرض: #27272aرنگ پس‌زمینه‌ی چیپ‌های غیرفعال.
activeColorstringپیش‌فرض: #f5f5f5رنگ پس‌زمینه‌ی چیپ انتخاب‌شده.
textColorstringپیش‌فرض: #f5f5f5رنگ متن چیپ‌های غیرفعال. رنگِ هاور هم از همین ساخته می‌شود.
activeTextColorstringپیش‌فرض: #18181bرنگ متن چیپ انتخاب‌شده.
gapnumberپیش‌فرض: 8فاصله‌ی بین چیپ‌ها بر حسب پیکسل.
radiusnumberپیش‌فرض: 18شعاع گوشه‌ی چیپ‌ها. برای چیپ کاملاً قرصی، نصفِ بلندی را بدهید.
swellnumberپیش‌فرض: 0.2میزان بزرگ‌شدن چیپِ فعال، نسبت به اندازه‌ی خودش.
bargenumberپیش‌فرض: 6چند پیکسل اضافه به راندنِ همسایه‌ها اضافه شود.
shrinknumberپیش‌فرض: 0.05میزان کوچک‌شدن همسایه‌ها.
jellynumberپیش‌فرض: 1شدت ژله‌ای‌بودن. با ۰ حرکت به یک بزرگ‌نمایی ساده تبدیل می‌شود؛ بالاتر از ۱ کشیدگی اغراق‌شده می‌شود.
bouncenumberپیش‌فرض: 0.25جهندگی فنر. بالاتر از ۰.۴ بیش از حد لرزان دیده می‌شود.
staggernumberپیش‌فرض: 22فاصله‌ی زمانی شروع حرکت هر همسایه، بر حسب میلی‌ثانیه.
stiffnessnumberپیش‌فرض: 580سفتی فنر. کمتر یعنی حرکت نرم‌تر و کندتر.
disabledbooleanپیش‌فرض: falseکل گروه را غیرفعال و کم‌رنگ می‌کند.
ariaLabelstringپیش‌فرض: گزینههابرچسب گروه برای صفحه‌خوان. حتماً به موضوع سؤال نزدیکش کنید.
فایل کامپوننت داخل پروژه‌ی خودتان می‌نشیند؛ فقط وابستگی‌های بالا اضافه می‌شود.
npx shadcn@latest add farsify/jelly-radio"use client";
import { JellyRadio } from "@/components/farsify/jelly-radio";
export function VolumeLevel() {
return (
<JellyRadio
ariaLabel="سطح صدا"
items={["خاموش", "کم", "متوسط", "زیاد", "بیشینه"]}
defaultValue="متوسط"
onChange={(value) => console.log(value)}
/>
);
}
// با رنگ‌های برند و اندازه‌ی بزرگ
<JellyRadio
size="lg"
chipColor="var(--color-brand)"
activeColor="#ffffff"
textColor="#ffffff"
activeTextColor="#007bff"
/>