پنل قابل تغییر اندازه (Resizable)

ساخت گروه پنل‌ها و چیدمان‌های قابل تغییر اندازه با پشتیبانی کیبورد و دسترسی‌پذیری. این کامپوننت بر پایه پکیج react-resizable-panels ساخته شده است.

نصب (Installation)

1npx @quark-lab/rad-ui add resizable

نمونه‌ها (Examples)

نمونه پایه (Basic)

یک چیدمان دو ستونه با پنل تو در تو (عمودی).

یک

دو

سه

مشاهده کد

1import {
2  ResizableHandle,
3  ResizablePanel,
4  ResizablePanelGroup,
5} from "@/components/ui/resizable";
6
7export default function ResizableBasicExample() {
8  return (
9    <ResizablePanelGroup
10      orientation="horizontal"
11      className="max-w-sm rounded-lg border border-border"
12    >
13      <ResizablePanel defaultSize="50%">
14        <div className="flex h-[200px] items-center justify-center p-6">
15          <span className="font-semibold">یک</span>
16        </div>
17      </ResizablePanel>
18      <ResizableHandle withHandle />
19      <ResizablePanel defaultSize="50%">
20        <ResizablePanelGroup orientation="vertical" className="h-full">
21          <ResizablePanel defaultSize="25%">
22            <div className="flex h-full items-center justify-center p-6">
23              <span className="font-semibold">دو</span>
24            </div>
25          </ResizablePanel>
26          <ResizableHandle withHandle />
27          <ResizablePanel defaultSize="75%">
28            <div className="flex h-full items-center justify-center p-6">
29              <span className="font-semibold">سه</span>
30            </div>
31          </ResizablePanel>
32        </ResizablePanelGroup>
33      </ResizablePanel>
34    </ResizablePanelGroup>
35  );
36}
37

عمودی (Vertical)

با orientation="vertical" می‌توانید تغییر اندازه عمودی داشته باشید.

سربرگ

محتوا

مشاهده کد

1import {
2  ResizableHandle,
3  ResizablePanel,
4  ResizablePanelGroup,
5} from "@/components/ui/resizable";
6
7export default function ResizableVerticalExample() {
8  return (
9    <ResizablePanelGroup
10      orientation="vertical"
11      className="min-h-[200px] max-w-sm rounded-lg border border-border"
12    >
13      <ResizablePanel defaultSize="25%">
14        <div className="flex h-full items-center justify-center p-6">
15          <span className="font-semibold">سربرگ</span>
16        </div>
17      </ResizablePanel>
18      <ResizableHandle />
19      <ResizablePanel defaultSize="75%">
20        <div className="flex h-full items-center justify-center p-6">
21          <span className="font-semibold">محتوا</span>
22        </div>
23      </ResizablePanel>
24    </ResizablePanelGroup>
25  );
26}
27

هندل قابل مشاهده (Handle)

با withHandle یک هندل قابل دیدن روی جداکننده نمایش دهید.

سایدبار

محتوا

مشاهده کد

1import {
2  ResizableHandle,
3  ResizablePanel,
4  ResizablePanelGroup,
5} from "@/components/ui/resizable";
6
7export default function ResizableHandleExample() {
8  return (
9    <ResizablePanelGroup
10      orientation="horizontal"
11      className="min-h-[200px] max-w-md rounded-lg border border-border md:min-w-[450px]"
12    >
13      <ResizablePanel defaultSize="25%">
14        <div className="flex h-full items-center justify-center p-6">
15          <span className="font-semibold">سایدبار</span>
16        </div>
17      </ResizablePanel>
18      <ResizableHandle withHandle />
19      <ResizablePanel defaultSize="75%">
20        <div className="flex h-full items-center justify-center p-6">
21          <span className="font-semibold">محتوا</span>
22        </div>
23      </ResizablePanel>
24    </ResizablePanelGroup>
25  );
26}
27

مرجع API (API Reference)

ResizablePanelGroup

گروه پنل‌ها که تغییر اندازه را مدیریت می‌کند.

پراپ (Prop)	نوع (Type)	پیش‌فرض (Default)	توضیحات (Description)
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	جهت گروه پنل‌ها برای تغییر اندازه (افقی یا عمودی).
`dir`	`"rtl" \| "ltr"`	`"rtl"`	جهت چیدمان در حالت افقی. برای RTL مقدار rtl و برای LTR مقدار ltr.
`className`	`string`	`-`	کلاس‌های CSS سفارشی برای گروه پنل‌ها.

ResizablePanel

هر پنل قابل تغییر اندازه.

پراپ (Prop)	نوع (Type)	پیش‌فرض (Default)	توضیحات (Description)
`defaultSize`	`string`	`undefined`	اندازه اولیه پنل (مثل "50%").
`minSize`	`number`	`undefined`	حداقل اندازه پنل (درصد).
`maxSize`	`number`	`undefined`	حداکثر اندازه پنل (درصد).

ResizableHandle

جداکننده بین پنل‌ها.

پراپ (Prop)	نوع (Type)	پیش‌فرض (Default)	توضیحات (Description)
`withHandle`	`boolean`	`false`	نمایش هندل قابل مشاهده روی جداکننده.
`className`	`string`	`-`	کلاس‌های CSS سفارشی برای جداکننده.

دسترسی‌پذیری (Accessibility)

کیبورد (Keyboard)

جداکننده‌ها قابل فوکوس هستند و کاربران می‌توانند با کیبورد اندازه پنل‌ها را تغییر دهند (طبق رفتار پیش‌فرض react-resizable-panels).

RTL (Right-to-Left)

برای چیدمان افقی در RTL، از dir="rtl" روی ResizablePanelGroup استفاده کنید تا جهت تعاملات و چینش درست باشد.

بهترین شیوه‌ها (Best Practices)

حداقل اندازه منطقی

برای جلوگیری از کوچک شدن بیش از حد پنل‌ها، از minSize استفاده کنید.

نمایش هندل

اگر کاربران شما با قابلیت تغییر اندازه آشنا نیستند، از withHandle استفاده کنید تا جداکننده واضح‌تر باشد.

نحوه استفاده (Usage)

1import {
2  ResizableHandle,
3  ResizablePanel,
4  ResizablePanelGroup,
5} from "@/components/ui/resizable";
6
7export default function Example() {
8  return (
9    <ResizablePanelGroup orientation="horizontal">
10      <ResizablePanel defaultSize="50%">یک</ResizablePanel>
11      <ResizableHandle />
12      <ResizablePanel defaultSize="50%">دو</ResizablePanel>
13    </ResizablePanelGroup>
14  );
15}
16