نوارِ بخش‌بندی با انگشتِ شیشه‌ایِ کشسان: موقعِ پریدن کش می‌آد، لنگر می‌ندازه و با مومنتوم به خونه‌ی تازه می‌لغزه.

وابستگی‌ها

نوع تعامل

با کلیک روی هر خونه، انگشتِ شیشه‌ای با فنر به اون خونه می‌پره و وسطِ راه کش می‌آد و لبه‌ی دنباله‌اش اسکواش می‌شه. با کشیدنِ انگشت روی نوار می‌شه خونه‌ها رو جابه‌جا کرد؛ رهاکردن با سرعت، مومنتوم می‌ده و نزدیک‌ترین خونه رو می‌نشونه. کلیدهای جهت هم کار می‌کنن — توی RTL `ArrowLeft` جلو می‌بره.

پراپ‌ها

گزینه‌هایی که می‌تونی به کامپوننت بدی؛ ستاره‌دارها اجباری‌اند.

نصب

{
  "registries": {
    "@farsify": "https://farsify.ir/r/{name}.json"
  }
}

نمونه

"use client";

import { useState } from "react";
import { RubberSegment } from "@/components/farsify/rubber-segment";

export function ViewSwitch() {
  const [view, setView] = useState("فهرست");

  return (
    <RubberSegment
      aria-label="نمای فایل‌ها"
      items={["فهرست", "تخته", "تقویم"]}
      value={view}
      onChange={setView}
    />
  );
}

// گزینه‌ها می‌توانند شیء باشند — برای آیکن یا مقدارِ جدا از برچسب
<RubberSegment
  items={[
    { value: "mobile", label: "موبایل" },
    { value: "tablet", label: "تبلت" },
    { value: "desktop", label: "دسکتاپ" },
  ]}
  defaultValue="tablet"
  size="lg"
/>

// بدونِ کشیدگی و بدونِ کشیدن؛ انتخاب فقط با کلیک
<RubberSegment items={["روز", "هفته", "ماه"]} stretch={0} draggable={false} />

نکته‌ها

• برای فارسی، نوارِ سه‌چهار گزینه‌ای بهترین جاست؛ `equalSlots` رو روشن بذار تا خونه‌ها هم‌اندازه باشن و انگشت وسط نلرزه.
• این کامپوننت نیازی به آینه‌سازیِ دستی نداره: جهتِ خوندنِ چیدمان از فلکسِ خودِ صفحه می‌آد و کلیدهای جهت هم بر اساسِ `direction` عوض می‌شن — توی RTL `ArrowLeft` جلو می‌بره.
• اگه نشانگرها خیلی کم‌رنگن (پس‌زمینه‌ی روشن با نوارِ روشن)، `trackColor` رو یه پله تیره‌تر از سطح بذار، نه یه پله روشن‌تر؛ این تنها جاییه که کنتراستِ نوار به چشم می‌آد.
• با `prefers-reduced-motion` پرشِ فنری به یه تغییرِ ساده تبدیل می‌شه؛ مومنتوم و کشیدگی هم خاموش می‌شن ولی انتخاب درست کار می‌کنه.

مجوز

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