کشیدن برای تأیید
swipe-to-confirmانیمیشندستگیرهای که از راست به چپ میکشید تا پرداخت تأیید بشه و اگر زود رها کنید، برمیگرده.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add swipe-to-confirmنصب دستی
محتوای تب «کد» را در
components/animations/swipe-to-confirm.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { SwipeToConfirm } from "@/components/animations/swipe-to-confirm"23<SwipeToConfirm label="برای پرداخت بکشید" doneLabel="پرداخت انجام شد" onConfirm={pay} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| label / doneLabel | string | - | متن قبل و بعد از تأیید. |
| onConfirm | () => void | - | وقتی دستگیره به انتها رسید. |
نکتهها
- برای کاربر کیبورد، Enter یا Space روی دستگیره مستقیم تأیید میکنه و کشیدن اجباری نیست.