چک‌باکس فنریSpring Check

وابستگی‌ها

نوع تعامل

با هر کلیک، خانه‌ی چک‌باکس از وسط پر می‌شود، کمی ورم می‌کند و تیک با کشیده‌شدن می‌نشیند؛ هم‌زمان متنش کم‌رنگ و با یک خط از سرِ خواندن خط می‌خورد. هرچه بکشید تا از حالت میانی رد شود، فنر مقدار را به نزدیک‌ترین سر می‌برد. کلید Space و Enter هم همین کار را می‌کنند، ولی بی‌انیمیشن می‌پرند تا در حرکتِ Tab تاخیر حس نشود.

پراپ‌ها

پراپ‌هایی که برای تغییر این کامپوننت می‌توانید بدهید. ستاره‌دارها الزامی‌اند.

نصب

فایل کامپوننت داخل پروژه‌ی خودتان می‌نشیند؛ فقط وابستگی‌های بالا اضافه می‌شود.

نحوه‌ی استفاده

"use client";

import { useState } from "react";
import { SpringCheck } from "@/components/farsify/spring-check";

export function TodoItem() {
  const [done, setDone] = useState(false);

  return (
    <SpringCheck
      label="ساخت بیلد"
      checked={done}
      onChange={setDone}
    />
  );
}

// بدون کنترل — مقدار اولیه‌ی تیک‌خورده
<SpringCheck label="هماهنگی جلسه" defaultChecked />

// رنگ برند، خانه‌ی بزرگ‌تر و خط از وسط
<SpringCheck
  label="به‌روزرسانی تغییرات"
  color="var(--color-brand)"
  fillColor="var(--color-brand)"
  checkColor="#ffffff"
  boxSize={34}
  strike="center"
/>

نکته‌های ریز

• برای فهرست کارها `bounce` را حدود ۰.۱ و `strikeLag` را ۰ بگذارید؛ حرکتِ کمتر برای چیزی که پشتِ سر هم کلیک می‌شود بهتر است.
• `color` هم متن و هم قاب را می‌کشد، پس اگر رنگ برند می‌دهید مطمئن شوید `fillColor` با آن کنتراست دارد، وگرنه تیک دیده نمی‌شود.
• اگر `strike="none"` بدهید، متن فقط کم‌رنگ می‌شود. برای برچسب‌های بلند همین بهتر است چون خط روی متن‌های چندخطی وسط را می‌زند.

مالکیت کد

• کد بعد از نصب مالِ شماست؛ هر تغییری که خواستید بدهید و در پروژه‌ی خودتان نگهش دارید.
• متن‌باز است و برای پروژه‌های شخصی و تجاری آزاد است — حتی در کد بسته.
• لطفاً نام و پیوند فارسیفای را در جایی از پروژه‌تان نگه دارید.