کلید کش‌دارSquish Switch

وابستگی‌ها

نوع تعامل

می‌توانید مثل هر کلیدی رویش کلیک کنید، یا دستگیره را بگیرید و بکشید — همان‌طور که می‌کشید، دستگیره به‌اندازه‌ی سرعتِ حرکتتان کشیده می‌شود ولی پهن‌تر نمی‌شود، و وضعیت همان لحظه‌ی عبور از وسط عوض می‌شود. با رهاکردن، فنر آن را به نزدیک‌ترین سر می‌اندازد. روی هاور کمی بزرگ می‌شود و Escape وسطِ کشیدن، همه‌چیز را به حالت قبل برمی‌گرداند.

پراپ‌ها

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

نصب

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

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

"use client";

import { useState } from "react";
import { SquishSwitch } from "@/components/farsify/squish-switch";

export function AutoSave() {
  const [on, setOn] = useState(false);

  return (
    <SquishSwitch
      checked={on}
      onChange={setOn}
      ariaLabel="ذخیره‌ی خودکار"
    />
  );
}

// بدون کنترل — روشن از اول
<SquishSwitch label="اعلان‌ها" defaultChecked />

// رنگ برند و کشش بیشتر
<SquishSwitch
  label="همگام‌سازی خودکار"
  trackOnColor="var(--color-brand)"
  thumbOnColor="#ffffff"
  stretch={60}
  speed={70}
/>

نکته‌های ریز

• برای کلیدهای پرتکرار `speed` را حدود ۷۰ بگذارید تا حرکت آرام‌تر شود؛ سرعتِ بالا برای کلیدهایی است که کاربر با آن‌ها «بازی» می‌کند.
• اگر `stretch` را صفر کنید و `hoverScale` را ۱، یک کلید معمولیِ تمیز می‌ماند — بدون کشش و بدون واکنش هاور.
• رنگ‌ها را با متغیر CSS هم می‌توانید بدهید: `trackOnColor="var(--color-brand)"`.

مالکیت کد

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