دکمهی سهحالته
morph-buttonانیمیشنیک دکمه با سه حالت عادی، در حال انجام و انجام شد، که حالتها درجا محو میشن و عرضش نمیپره.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add morph-buttonنصب دستی
محتوای تب «کد» را در
components/animations/morph-button.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { MorphButton } from "@/components/animations/morph-button"23<MorphButton onAction={() => subscribe(email)} loadingText="در حال ثبت…" doneText="ثبت شد">خبرم کن</MorphButton>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| onAction | () => Promise<unknown> | void | - | تا resolve بشه، حالت «در حال انجام» میمونه. |
| loadingText / doneText | string | - | متن دو حالت بعدی. |
| resetAfter | number | 2200 | میلیثانیه تا برگشت به حالت عادی. صفر یعنی هرگز. |