پوشهٔ بازشوFolder

پوشه‌ای سه‌بعدی که با کلیک لبه‌اش باز می‌شه؛ کاغذها بیرون می‌آن، با هاور سرک می‌کشن و با کشیدن هرجا رها می‌شن.

محمدجواد

ساخته شده توسط محمدجواد

سازنده فارسی‌فای، بچه دولوپر

وابستگی‌ها

بدون وابستگی

نوع تعامل

کلیک روی بدنه‌ی پوشه باز/بسته می‌کنه؛ توی حالتِ باز، هاور روی هر کاغذ بالا می‌آوردش، کلیک بزرگ‌نمایی می‌کنه و کشیدن از پوشه بیرونش می‌بره. کلیک بیرون یا Escape می‌بنده. کاغذهای بیرون‌اومده دوباره با کشیدن داخلِ پوشه برمی‌گردن.

پراپ‌ها

گزینه‌هایی که می‌تونی به کامپوننت بدی؛ ستاره‌دارها اجباری‌اند.

items
FolderEntry[]پیش‌فرض: سه سندِ نمونه

آنچه پوشه نگه می‌دارد، حداکثر ۶ مورد. هر مورد می‌تواند رشته، `{ title, description }`، `{ image, title, alt }`، `{ content }` یا یک المانِ React باشد.

children
ReactNodeپیش‌فرض: undefined

اسنادِ دلخواه به‌صورتِ فرزند؛ هر فرزند یک کاغذ می‌شه (بر `items` مقدم است).

mode
'flap' | 'book'پیش‌فرض: 'flap'flap · book

`flap` پوشه را ایستاده نگه می‌دارد و لبه‌اش را باز می‌کنه؛ `book` آن را خوابیده می‌کنه و جلد را مثلِ کتاب ورق می‌زند.

variant
'solid' | 'glass' | 'matte'پیش‌فرض: 'solid'solid · glass · matte

جنسِ پوشه؛ `glass` لبه را شیشه‌ایِ شکست‌دهنده می‌کنه و کاغذهای داخل را از پشت نشان می‌دهد.

layout
'spread' | 'stack' | 'row'پیش‌فرض: 'spread'spread · stack · row

چیدمانِ کاغذها وقتی پوشه باز است: پخشِ آزاد، دسته‌ی عمودی یا ردیفِ منظم.

color
stringپیش‌فرض: تم‌آگاه (#8c8c8c / #27272a)

رنگِ پوشه؛ سایه‌ها و لایه‌های روشن/تیره از همان حساب می‌شوند. ندهید تا با سطحِ مونوی تم هماهنگ بماند؛ آبیِ `#3b82f6` فقط لهجه‌ی اسلاتِ آبیِ داک است.

نصب

۱. این آدرس رو یک‌بار توی components.json بذار تا shadcn مخزن فارسی‌فای رو بشناسه.

components.jsonjson
{
  "registries": {
    "@farsify": "https://farsify.ir/r/{name}.json"
  }
}

۲. بعد با دستورِ زیر کامپوننت رو نصب کن.

npx shadcn@latest add @farsify/folder

پیش‌نیاز: Tailwind CSS v4 و صفحهٔ راست‌به‌چپ dir="rtl".

نمونه

folder.tsxtsx
"use client";

import { Folder } from "@/components/farsify/folder";

const documents = [
  { title: "راهنمای برند", description: "رنگ‌ها، نشان و لحن" },
  { title: "برنامهٔ عرضه", description: "زمان‌بندی و مسئول‌ها" },
  { title: "تختهٔ الهام", description: "منابع بصری منتخب" },
];

export function ProjectFolder() {
  return (
    <Folder
      items={documents}
      label="پروژه‌ها"
      theme="dark"
    />
  );
}

// آبی را فقط وقتی بخواهید پوشه از سطحِ خنثی جدا شود بدهید
<Folder
  items={documents}
  label="پروژه‌ها"
  color="#3b82f6"
  theme="dark"
/>

// حالتِ کتابی و شیشه‌ای؛ کاغذها با کشیدن بیرون می‌آیند
<Folder
  items={documents}
  label="آرشیو"
  mode="book"
  variant="glass"
  layout="row"
  frost={0.6}
/>

// کنترل از بیرون: باز/بسته را خودتان مدیریت کنید
<Folder
  items={documents}
  label="پرونده‌ها"
  open={open}
  onOpenChange={setOpen}
/>

نکته‌ها

  • برچسب رو کوتاه و فارسی بده؛ تب با عرضِ متن رشد می‌کنه و از لبه بیرون نمی‌زنه.
  • نقاشیِ کاغذها جهت رو از CSS می‌خونه؛ `dir="rtl"` روی صفحه یا والد رو حفظ کن تا خط‌های فارسی از راست چیده شن.
  • `variant='glass'` روی WebGL2 بهترین نتیجه رو می‌ده؛ بدونِ اون همون شیشه‌ی CSS با `backdrop-filter` می‌مونه.
  • کاغذها رو می‌شه بیرون کشید و دوباره داخل انداخت؛ `onItemDrop` می‌گه کدوم حالت رخ داد.
  • توی `prefers-reduced-motion` معرفی و فنرها آروم می‌شن؛ محتوا و دسترس‌پذیری دست‌نخورده می‌مونن.
  • برای کارت‌های باریک `size` رو کم کن؛ بازشدنِ پخشِ کاغذها عرضِ بیشتری از خودِ پوشه می‌خواد.

مجوز

کد بعد از نصب مالِ خودته؛ هر تغییری خواستی بده و توی پروژه‌ی خودت نگهش دار. برای پروژه‌های شخصی و تجاری آزاده، حتی اگه کدت بسته باشه. فقط اسم و لینک فارسی‌فای رو یه جا توی پروژه نگه دار.