تعویض متن

text-swapانیمیشن

برچسب وضعیت سر جاش عوض میشه: متن قبلی با کمی تاری بالا میره و متن جدید از پایین می‌آد.

سیستم طراحی

نصب

با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگی‌هاش را می‌نویسه.
$ npx vibefarsi add text-swap
نصب دستی
محتوای تب «کد» را در components/animations/text-swap.tsx بگذارید. کلیدفریم را هم به globals.css اضافه کنید.
$ npm i lucide-react
کپی کل فایلregistry json

استفاده

usage.tsx

1import { TextSwap } from "@/components/animations/text-swap"23const labels = ["ذخیره", "در حال ذخیره…", "ذخیره شد"]4<Button><TextSwap value={labels[step]} options={labels} /></Button>

پراپ‌ها

پراپ	نوع	پیش‌فرض	توضیح
value	string	-	متن فعلی؛ هر تغییرش انیمیت میشه.
options	string[]	-	همه‌ی برچسب‌های ممکن تا عرض به اندازه‌ی بلندترین رزرو بشه و دکمه نپره.
duration	number	150	میلی‌ثانیه برای هر نیمه‌ی جابه‌جایی.
direction	"up" \| "down"	"up"	جهت خروج متن قبلی.

قبلینشان اعلان بعدیظهور پنل