دکمهی شناور بازشونده
fab-morphانیمیشندکمهی گرد + خودش تبدیل به منو میشه: عرض، ارتفاع و گردی گوشهها کش میآن، علامت + به × میچرخه و گزینهها پشت سر هم میآن.
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add fab-morphنصب دستی
محتوای تب «کد» را در
components/animations/fab-morph.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { FabMorph } from "@/components/animations/fab-morph"23<FabMorph items={[{ label: "پست جدید", icon: <PenLine /> }, { label: "آپلود عکس", icon: <Image /> }]} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| items | { label; icon?; onSelect? }[] | - | گزینههای منو. |
| open / onOpenChange | boolean / (o) => void | - | اختیاری برای کنترل از بیرون. |
| width | number | 200 | عرض منوی باز؛ ارتفاع از تعداد گزینهها حساب میشه. |
نکتهها
- دکمه به گوشهی انتهایی خط چسبیده، پس در فارسی پایینچپ میشینه و منو به سمت بالا و راست باز میشه. کلیک بیرون و Escape میبندنش.