بازشو
collapsibleکامپوننتدکمهی «نمایش بیشتر» که یک بلوک را با انیمیشن ارتفاع باز و بسته میکنه و محتوا را از DOM حذف نمیکنه تا وضعیت فرم داخلش بمونه.
هزینهی ارسال۴۵٬۰۰۰ تومان
نصب
با CLI
اگر هنوز init نکردید، اول از راهنمای نصب پروژه را آماده کنید. بعد این دستور کامپوننت و وابستگیهاش را مینویسه.
$ npx vibefarsi add collapsibleنصب دستی
محتوای تب «کد» را در
components/ui/collapsible.tsxبگذارید.$ npm i lucide-reactکپی کل فایلregistry json
استفاده
usage.tsx
1import { Collapsible } from "@/components/ui/collapsible"23<Collapsible trigger="نمایش جزئیات" openLabel="پنهان کردن">4 <p>هزینهی ارسال بر اساس وزن و شهر مقصد محاسبه میشود.</p>5</Collapsible>پراپها
| پراپ | نوع | پیشفرض | توضیح |
|---|---|---|---|
| trigger | ReactNode | - | برچسب دکمه. شورون کنارش خودش میچرخه. |
| openLabel | ReactNode | - | برچسب در حالت باز، مثل «پنهان کردن». اگر ندید همان trigger میمونه. |
| open / defaultOpen / onOpenChange | boolean | - | کنترلشده یا آزاد. |
نکتههای راستچین
- انیمیشن با grid-template-rows از 0fr به 1fr انجام میشه، پس ارتفاعی اندازهگیری نمیشه و با هر محتوایی کار میکنه.
- در حالت بسته، بلوک inert میشه تا لینک و فیلدهای داخلش با Tab پیدا نشن. برای چند بخش پشت سر هم از Accordion استفاده کنید.