فهرست سنجاق
pin-listانیمیشنآیتمهایی که با کلیک بین بخش سنجاقشده و همه جابهجا میشن و با FLIP نرم حرکت میکنن.
سنجاقشده
همه
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add pin-listنصب دستی
محتوای تب «کد» را در
components/animations/pin-list.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { PinList } from "@/components/animations/pin-list"23<PinList items={[{ id: "1", name: "خانه", info: "داشبورد", icon: Home, pinned: true }, …]} />پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| items | PinListItem[] | - | id، name، info، icon، pinned. |
| labels | { pinned?; unpinned? } | "سنجاقشده" / "همه" | عنوان دو بخش. |
| onChange | (items) => void | - | بعد از هر سنجاق یا برداشتن سنجاق. |