حرکت جستجو در هویت‌ها

جستجو در همهٔ محصولات توکاپس یک بنیان دارد: از ، با همان ساختار، کیبورد، ARIA و هندسه. آنچه تغییر می‌کند فقط حرکت است: باز شدن پنل، واکنش به تایپ، ورود نتایج و نشانگر ردیف فعال. هر کارت را باز کنید و تایپ کنید (مثلاً «ایده» یا با ی/ک عربی «ايده»).

هسته توکاپس

پنل از زیر نوار می‌لغزد؛ ردیف‌ها پلکانی بالا می‌آیند؛ در تایپ خط زیرین ضخیم می‌شود.

ایده‌پردازی

پنل از ذره‌بین شکوفا می‌شود؛ تطبیق‌ها از تار به واضح؛ در تایپ ذره‌بین می‌تپد.

سرمایه‌گذاری جمعی

پنل مثل صورت‌حساب از بالا باز می‌شود؛ ردیف‌ها مثل شمارنده می‌غلتند؛ بی‌جهش.

کشف محصول

فنری و بازیگوش؛ آیکون ردیف فعال می‌پرد و می‌چرخد.

روایت‌ها

مثل جوهر از تاری پدیدار می‌شود؛ ردیف‌ها آهسته نقش می‌بندند.

سازمانی

بی‌نمایش و دقیق؛ همه‌چیز کوتاه و فوری.

بنیان ثابت

فوکوس بدون کادر تیز: خط نرم زیر جستجو از مرکز باز می‌شود؛ ردیف فعال با پس‌زمینهٔ نرم و نوار لبه نشان داده می‌شود (در کنتراست بالا کادر برمی‌گردد).
جستجوی فارسی‌آگاه: ی/ک عربی، ارقام فارسی/عربی و اعراب یکسان می‌شوند؛ چندواژه‌ای؛ نتایج نزدیک‌تر به عنوان بالاتر.
بخش تطبیق‌یافته در عنوان و توضیح برجسته است ().
وضعیت تا مکث کوتاه کاربر روی ردیف جستجو می‌ماند تا هویت‌ها تایپ را متحرک کنند.
کاهش حرکت: همهٔ انیمیشن‌ها حذف می‌شوند.

استفاده

TSX

import { CommandMenu } from '@tokapps/tuk/overlays';<CommandMenu items={commands} onSelect={(item) => run(item.id)} />

اعمال یک هویت — روی والد کافی است؛ پالت آن را به پورتال می‌برد:

TSX

<div data-theme="ideation">  <CommandMenu items={commands} onSelect={(item) => run(item.id)} hotkey={false} trigger={<Button>جستجو</Button>} /></div>

ساخت حرکت برای هویت تازه

فایل بسازید؛ سلکتورها با شروع شوند.
فقط اسلات‌های و وضعیت‌های ، ، را متحرک کنید.
keyframeها را با پیشوند نام‌گذاری کنید و فقط از و استفاده کنید.
فایل را در import کنید.

حرکت جستجو در هویت‌ها

هسته توکاپس

پنل از زیر نوار می‌لغزد؛ ردیف‌ها پلکانی بالا می‌آیند؛ در تایپ خط زیرین ضخیم می‌شود.

ایده‌پردازی

پنل از ذره‌بین شکوفا می‌شود؛ تطبیق‌ها از تار به واضح؛ در تایپ ذره‌بین می‌تپد.

سرمایه‌گذاری جمعی

پنل مثل صورت‌حساب از بالا باز می‌شود؛ ردیف‌ها مثل شمارنده می‌غلتند؛ بی‌جهش.

کشف محصول

فنری و بازیگوش؛ آیکون ردیف فعال می‌پرد و می‌چرخد.

روایت‌ها

مثل جوهر از تاری پدیدار می‌شود؛ ردیف‌ها آهسته نقش می‌بندند.

سازمانی

بی‌نمایش و دقیق؛ همه‌چیز کوتاه و فوری.

بنیان ثابت

فوکوس بدون کادر تیز: خط نرم زیر جستجو از مرکز باز می‌شود؛ ردیف فعال با پس‌زمینهٔ نرم و نوار لبه نشان داده می‌شود (در کنتراست بالا کادر برمی‌گردد).

جستجوی فارسی‌آگاه: ی/ک عربی، ارقام فارسی/عربی و اعراب یکسان می‌شوند؛ چندواژه‌ای؛ نتایج نزدیک‌تر به عنوان بالاتر.

بخش تطبیق‌یافته در عنوان و توضیح برجسته است ().

وضعیت تا مکث کوتاه کاربر روی ردیف جستجو می‌ماند تا هویت‌ها تایپ را متحرک کنند.

کاهش حرکت: همهٔ انیمیشن‌ها حذف می‌شوند.

استفاده

TSX

import { CommandMenu } from '@tokapps/tuk/overlays';<CommandMenu items={commands} onSelect={(item) => run(item.id)} />

اعمال یک هویت — روی والد کافی است؛ پالت آن را به پورتال می‌برد:

TSX

<div data-theme="ideation">  <CommandMenu items={commands} onSelect={(item) => run(item.id)} hotkey={false} trigger={<Button>جستجو</Button>} /></div>

ساخت حرکت برای هویت تازه

فایل بسازید؛ سلکتورها با شروع شوند.

فقط اسلات‌های و وضعیت‌های ، ، را متحرک کنید.

keyframeها را با پیشوند نام‌گذاری کنید و فقط از و استفاده کنید.

فایل را در import کنید.