اینتراکشنها
هر کنترلی که کاربر لمسش میکند یک پراپ interaction دارد که واکنشش به فشردن و هاور را تعیین میکند. پیشفرضها آراماند؛ هر محصول بسته به لحن و مخاطبش برای هر کامپوننت واکنش مناسب را انتخاب میکند. نام مقدارها در همهٔ کامپوننتها یک معنی دارد: press یعنی فشردن، pop یعنی ظاهر شدن با جهش، peek یعنی پیشنمایش روی هاور.
اصول
فقط روی کنترلِ قابلتغییر
کامپوننت disabled، readOnly یا در حال بارگذاری هیچ واکنشی نشان نمیدهد؛ واکنش یعنی «این کار میکند».
بدون شفافیت
ظاهر و پنهان شدن با scale و جابهجایی است و همهٔ رنگها توکن توپُرند؛ هیچ اینتراکشنی opacity ندارد.
احترام به reduced-motion
اگر کاربر در سیستمعامل «کاهش حرکت» را روشن کرده باشد، همه بدون انیمیشن عوض میشوند.
هاور با کیبورد هم
هر پیشنمایشی که روی هاور دیده میشود (peek و hint) با فوکوس کیبورد هم دیده میشود.
راستبهچپ از اول
جهت لغزش، کشآمدن، فلش و باریکهها با dir صفحه برمیگردد؛ چیزی برای RTL جدا نوشته نمیشود.
یک بار روی گروه
CheckboxGroup، RadioGroup، ToggleGroup و Tabs مقدار را به فرزندان میدهند تا یک فرم یکدست بماند.
Switch
پیشفرض:slidelabels جدا از interaction است و با همه ترکیب میشود.
slideفقط لغزش دسته و تغییر رنگ ریل.
کِی: فهرستهای بلند تنظیمات که آرامش بصری مهمتر است.
stretchدسته هنگام فشردن به سمت مقصد کش میآید و بعد میلغزد.
کِی: تنظیمات اصلی که باید حس فیزیکی و قطعی داشته باشند، مثل حالت پرواز.
peekروی هاور دسته کمی جلو میرود و باریکهای از رنگ حالت بعدی دیده میشود.
کِی: جایی که کاربر قبل از کلیک باید بفهمد کلید چه میکند؛ مثلاً اولین تجربهٔ کاربر.
morphعلامت داخل دسته از ○ (خاموش) به | (روشن) تغییر شکل میدهد.
کِی: وقتی وضعیت باید بدون اتکا به رنگ هم خوانا باشد (دسترسپذیری، کمبینی رنگ).
hintروی هاور، فلشی در ریل جهت حرکت دسته را نشان میدهد.
کِی: کلیدهای کمتکرار یا مخاطب تازهکار؛ در راستبهچپ جهت فلش خودکار برمیگردد.
Checkbox
پیشفرض:noneروی CheckboxGroup یک بار بدهید تا به همهٔ گزینهها برسد. دموها خودشان روشن و خاموش میشوند؛ none را مبنای مقایسه بگیرید. پیشنمایش peek را با بردن نشانگر روی چکباکس خاموش ببینید.
noneتیک بیدرنگ ظاهر و پنهان میشود.
کِی: جدولهای پرتراکم و فهرستهای خیلی بلند.
pressچکباکس هنگام فشردن تا ۸۲٪ کوچک میشود؛ تیک بیحرکت است.
کِی: فرمهای طولانی؛ بازخورد لمس هست ولی چشم را خسته نمیکند.
poppress و تیک با چرخش و جهش ظاهر میشود و خود جعبه هم یک ضربهٔ کوچک میخورد.
کِی: انتخابی که باید دیده شود، مثل پذیرفتن قوانین یا افزودن به فهرست.
peekpop و روی هاور تیکِ کمرنگ پیشنمایش میشود.
کِی: فهرستهای انتخاب چندتایی که کاربر باید بداند کدام ردیف را میزند.
drawpress و تیک مثل نوشتن با قلم از ابتدا تا انتها کشیده و موقع خاموش شدن پاک میشود.
کِی: فهرست کارها و مراحل؛ حس «انجام شد» میدهد.
Radio Group
پیشفرض:noneمعمولاً روی RadioGroup داده میشود؛ هر گزینه میتواند جداگانه عوضش کند.
noneنقطه بیدرنگ جابهجا میشود.
کِی: فرمهای فشرده.
pressگزینه هنگام فشردن تا ۸۲٪ کوچک میشود.
کِی: فرمهای عادی.
poppress و نقطه با جهش ظاهر میشود و دایره یک ضربهٔ کوچک میخورد.
کِی: انتخاب پلن یا روش ارسال که تصمیم مهمی است.
peekpop و روی هاور نقطهٔ کمرنگ پیشنمایش میشود.
کِی: گزینههای نزدیک به هم که کاربر قبل از کلیک باید مطمئن شود.
Tabs
پیشفرض:noneروی خود Tabs داده میشود و به همهٔ برگهها میرسد. slide و stretch شامل press هم هستند. دموها خودشان برگه را عوض میکنند تا فرق حرکت کنار هم دیده شود؛ با اولین کلیک میایستند.
noneپسزمینهٔ برگهٔ فعال بیدرنگ جابهجا میشود.
کِی: مبنای مقایسه؛ برگههایی که خیلی زیاد عوض میشوند.
pressبرگه هنگام فشردن کمی کوچک میشود.
کِی: برگههای زیاد یا اسکرولشونده که حرکت قرص شلوغشان میکند.
slideیک قرص واحد از برگهٔ قبلی تا برگهٔ جدید میلغزد.
کِی: ناوبری اصلی صفحه؛ کاربر میبیند از کجا به کجا رفت.
stretchقرص کشدار جابهجا میشود؛ لبهٔ جلو اول میرود و لبهٔ عقب دنبالش میآید.
کِی: فیلترهای کوتاه و سگمنتها در محصولات پرانرژی؛ مسیر حرکت پررنگتر دیده میشود.
Button، Toggle و ToggleGroup
پیشفرض:noneToggleGroup مقدار را به همهٔ دکمههایش میدهد. Button در هر چهار فریمورک این پراپ را دارد.
pressدکمه هنگام فشردن کمی کوچک میشود تا کلیک حس فیزیکی داشته باشد.
کِی: دکمهٔ اصلی صفحه، دکمههای نوار ابزار و هر عملی که زیاد تکرار میشود.
استفاده
مقدار را روی خود کامپوننت یا روی گروهش بدهید. مقدارهای مجاز هر کامپوننت در جدول پراپهای صفحهٔ خودش و در خروجی MCP دیگ آمده است.
<Switch interaction="stretch" />
<CheckboxGroup interaction="pop">
<Checkbox value="sms" />
<Checkbox value="email" />
</CheckboxGroup>
<Tabs defaultValue="all" interaction="slide">…</Tabs>
<Button interaction="press">ثبت سفارش</Button>زیر کاپوت
هر کامپوننت مقدار را روی ویژگی data-interaction میگذارد و همهٔ واکنشها با کلاسهای Tailwind روی همین ویژگی ساخته میشوند. نوعها، منحنیهای حرکت و کلاسهای مشترک در lib/primitives/interaction.ts هستند؛ نسخههای Vue، Svelte و Angular هم با همان ویژگی و همان کلاسها همرفتار میشوند.
/* press روی دکمه، در هر چهار فریمورک یکسان */
motion-safe:data-[interaction=press]:active:scale-[0.96]