البناء · جديد

اللوحات القابلة لتغيير الحجم

لوحات يغيّر الناس حجمها بسحب المقبض بينها: محررات متجاورة، وصناديق وارد، ولوحات معلومات.

المعاينة

المعكوسة هي المحتوى الإنجليزي نفسه من اليمين إلى اليسار، لتفصل خطأ الاتجاه عن خطأ الترجمة.

التثبيت

قريبًايُفتح التثبيت من السجل مع الإطلاق. حتى ذلك الحين، هذا هو الأمر الذي ستستخدمه.

npx shadcn@latest add @ritla/resizable

الاعتماديات التي يضيفها: @phosphor-icons/react

الاستخدام

import { ResizableGroup, ResizableHandle, ResizablePanel } from "@/components/ui/resizable";

<ResizableGroup>
  <ResizablePanel defaultSize={36} minSize={20}>Sidebar</ResizablePanel>
  <ResizableHandle withGrip />
  <ResizablePanel minSize={30}>Content</ResizablePanel>
</ResizableGroup>

أمثلة

عمودي

‏orientation="vertical": أعلى وأسفل. السهم للأسفل يطيل اللوحة العليا.

متداخل

مجموعة عمودية داخل لوحة. المجموعة الداخلية bare ومقبضها بلا مسكة، كما في Figma.

تذكّر الأحجام

‏storageKey يحفظ الأحجام في هذا المتصفح فيبقى التخطيط بعد إعادة التحميل، وonLayoutChange يعطيها لتحفظها لكل مستخدم على خادمك.

مرجع الخصائص

ResizableGroup

الخاصية	النوع	الافتراضي	الوصف
`orientation`	`"horizontal" \| "vertical"`	`"horizontal"`	خاصية Layout: متجاورة أو أعلى وأسفل. للتداخل ضع مجموعة داخل لوحة.
`storageKey`	`string`		يحفظ الأحجام في `localStorage` بهذا المفتاح.
`onLayoutChange`	`(sizes: number[]) => void`		الأحجام (٪، بالترتيب) بعد كل تغيير.
`bare`	`boolean`	`false`	بلا إطار، لمجموعة داخل لوحة.

ResizablePanel

الخاصية	النوع	الافتراضي	الوصف
`defaultSize`	`number`		الحجم الأول (٪). اللوحات بلا حجم تتقاسم الباقي.
`minSize`	`number`	`10`	أصغر حجم (٪)، كي لا ينهار المحتوى.
`maxSize`	`number`	`100`	أكبر حجم (٪).

ResizableHandle

الخاصية	النوع	الافتراضي	الوصف
`withGrip`	`boolean`	`false`	خاصية Grip: حين يكون تغيير الحجم هو المهمة الأساسية.
`label`	`string`	`"Resize" / «تغيير الحجم»`	اسم المقبض لقارئ الشاشة.
`step`	`number`	`5`	خطوة مفاتيح الأسهم (٪).

إمكانية الوصول

لوحة المفاتيح

المفاتيح مكتوبة للاتجاه من اليسار إلى اليمين. في الاتجاه من اليمين يتبادل السهمان دورهما: السهم المتجه مع اتجاه القراءة ينقلك إلى الأمام.

المفتاح	ما يفعله
`Tab`	إلى المقبض.
`ArrowRightArrowLeft`	يحرّك المقبض بخطوات؛ بالعربية السهم الأيسر يوسّع اللوحة الأولى.
`ArrowDownArrowUp`	في المجموعة العمودية.
`HomeEnd`	إلى أصغر وأكبر حجم للوحة الأولى.

ARIA

المقبض role="separator" قابل للتركيز، له aria-valuenow وaria-valuemin وaria-valuemax (حجم اللوحة الأولى) وaria-controls.
منطقة سحبه 48px تغطي 24px من كل لوحة، داخل حشوها.

ملاحظات العربية والاتجاه

ينعكس

اللوحة الأولى على اليمين.
السحب والأسهم تتبع اتجاه القراءة.

لا ينعكس

المجموعات العمودية لا تتغير، ونقاط المسكة لا تنعكس.

الأرقام: الأحجام المعلنة تتبع إعداد الأرقام في واجهتك.
الخط العربي: المجموعة لا تفرض خطًا؛ اللوحات تحمل محتواها.
النص ثنائي الاتجاه: ‏Kanz يبني المقسّم بنفسه لأن البدائل الشائعة تثبّت السهم الأيسر على تصغير اللوحة الأولى حتى بالعربية.

كل المكونات ›