نظرة عامة
يديرResizeHandle حجمًا رقميًا ويعرض فاصلًا قابلًا للتركيز. يطبّق التطبيق ذلك الحجم على اللوحة؛ ولا يغيّر المقبض حجم عنصر آخر تلقائيًا.
استخدام
استخدمedge لحدود اللوحة، أو axis="y" لتغيير حجم الارتفاع المضمّن وaxis="x" لتغيير حجم العرض المضمّن. امنح المقبض اسمًا محددًا لإمكانية الوصول، واستخدم aria-controls لتحديد اللوحة.
onValueChange أحدث حجم إلى تخطيط اللوحة دون التحكم بالمقبض. لا يضبط defaultValue سوى الحجم الأولي.
الحالة المتحكَّم بها
value؛ واستخدم onValueCommitted لحفظ الحجم النهائي. أبقِ value وdefaultValue منفصلين، وحافظ على نمط الملكية نفسه طوال دورة حياة المكوّن.
حواف اللوحة والفجوات
يحدّدedge="left", "right", "top" or "bottom" كلاً من المحور والاتجاه المادي للزيادة. تؤدي الحركة إلى اليسار إلى زيادة الحافة اليسرى، وتؤدي الحركة إلى الأعلى إلى زيادة الحافة العلوية، وينطبق العكس على الحافتين اليمنى والسفلية. يبقى هذا السلوك كما هو في المحتوى من اليمين إلى اليسار. استخدم إما edge أو axis وdirection.
مع edge، يكون الموضع الافتراضي هو "edge". ضع المقبض داخل لوحة ذات position: 'relative' لوضعه بمحاذاة ذلك الحد. يبقي placement="inline" المقبض في التدفق العادي. استخدم placement="gap" بين اللوحات الشقيقة واضبط عرضه أو ارتفاعه عبر style عندما يحتاج التخطيط إلى فجوة. لا تحتوي مقابض الفجوات على مقبض إمساك مرئي افتراضياً.
onActivate لإجراء طي اختياري.
لوحة المفاتيح والحدود
بالنسبة إلىaxis="y"، يزيد السهم لأسفل الحجم ويقلله السهم لأعلى. بالنسبة إلى axis="x"، يزيد «يمين» ويقلل «يسار» في المحتوى من اليسار إلى اليمين؛ وتنعكس الاتجاهات عند استخدام موفر الاتجاه مع direction="rtl".
تستخدم مفاتيح الأسهم step، وقيمته الافتراضية هي 10. ينتقل Home إلى min، وينتقل End إلى max. يتم تجاهل المفاتيح المضغوطة مع Alt أو Control أو Meta. يستخدم السحب بالمؤشر الحركة بالبكسل ولا يلتزم بـ step. يبقى كلا التفاعلين ضمن الحدود. لا تنقل ضغطات المؤشر التركيز؛ ويصل مستخدمو لوحة المفاتيح إلى المقبض باستخدام Tab. يمنع disabled تغيير الحجم ويزيل المقبض من ترتيب التنقل بمفتاح Tab.
يصف اتجاه الفاصل الحافة الفاصلة: أفقي لتغيير الارتفاع وعمودي لتغيير العرض.
الاتجاهات المادية والتكبير
عيّنdirection="normal" أو direction="reverse" عندما يجب أن تتبع زيادة الحجم اتجاها ماديا ثابتا، بغض النظر عن اتجاه النص. يزداد الحجم في الوضع العادي مع الحركة نحو اليمين أو الأسفل. يزداد الحجم في الوضع العكسي مع الحركة نحو اليسار أو الأعلى. احذف direction للاحتفاظ بسلوك اتجاه النص الموضح أعلاه.
يقبل scale عامل تكبير موجبا أو دالة تعيد واحدا. يأخذ المقبض عينة منه عند ضغط المؤشر ويقسم حركة المؤشر على تلك القيمة. تبقى خطوات لوحة المفاتيح دون تغيير.
دورة حياة الإيماءة
يبلغonValueChange عن القيم المباشرة. يبلغ onValueCommitted عن القيمة النهائية بعد سحب ناجح بالمؤشر أو تغيير فعّال بلوحة المفاتيح. تلتزم مفاتيح Home وEnd والأسهم فورا عندما تغيّر الحجم.
يتلقى onResizeStart أول قيمة مرشحة ضمن الحدود بعد أن يتجاوز المؤشر dragThreshold. تكون قيمة الحد الافتراضية 5 مع edge و0 بخلاف ذلك، وتقاس بالبكسلات المادية. يتلقى onResizeEnd القيمة { cancelled, value } لسحب بدأ بالفعل. تلغي Escape وإلغاء المؤشر وفقدان التقاط المؤشر وإلغاء التركيب الإيماءة دون التزام؛ ويؤدي تعطيل المقبض إلى إلغائها عند حدث المؤشر التالي له. يستدعي الإلغاء onValueChange بقيمة البداية، مع تقييدها بالحدود الحالية. يتلقى onResizeEnd تلك القيمة المستعادة.
وفّر onActivate لمعالجة نقرة دون سحب، أو Enter أو Space. يمنع تجاوز الحد نقرة المؤشر التالية من التفعيل، حتى عندما يعود المؤشر إلى موضع بدايته.
تعمل المعالجات الأصلية قبل تفاعل المقبض. يؤدي استدعاء preventDefault() في onPointerDown أو onKeyDown إلى تخطي ذلك التفاعل. يؤدي منع onPointerMove إلى تخطي ذلك التحديث فقط وإبقاء الإيماءة نشطة. يؤدي منع onPointerUp إلى إلغاء السحب واستعادة القيمة المحددة الابتدائية وتخطي onValueCommitted. يظل إلغاء المؤشر وفقدان الالتقاط ينهيان الإيماءة.
مقبض مخصص
تستهدفref والسمات الأصلية وclassName وstyle ومعالجات الأحداث الأصلية جذر الفاصل، وهو div افتراضياً. لا يستهدف المرجع اللوحة التي تم تغيير حجمها أو مقبض السحب المرئي.
يستبدل children قبضة الإمساك المرئية، ويخفيها children={null}؛ ولا يستبدل سلوك الفاصل. يمكن لـrender استبدال العنصر الجذر، وعندها يستهدف المرجع ذلك البديل. يجب على الأغلفة المخصصة تمرير الخصائص والمرجع المقدّمين لكي تصل خصائص التركيز والتقاط المؤشر ومعالجات لوحة المفاتيح وسمات إمكانية الوصول إلى العنصر نفسه.
الخصائص
"x" | "y"
افتراضي:"y without edge"
Pointer movement axis without
edge: y for height or x for width.number | (readonly string[] & number)
افتراضي:"150"
Initial size when the handle owns its state.
"normal" | "reverse"
Physical increasing direction. Omit to follow the horizontal text direction; use
normal or reverse for a fixed physical edge.boolean
افتراضي:"false"
Disables resizing and removes the handle from the tab order.
number
افتراضي:"5 with edge; 0 otherwise"
Physical pointer distance required before resizing starts. Movement below the threshold remains a click. Defaults to 5 with
edge and 0 otherwise."bottom" | "left" | "right" | "top"
Physical panel edge. Determines the movement axis and increasing direction, independently of text direction.
number
افتراضي:"500"
Maximum allowed size.
number
افتراضي:"50"
Minimum allowed size.
(() => void)
Called for a click without dragging, Enter, or Space.
((details: { cancelled: boolean; value: number; }) => void)
Called after a started drag ends, with its final value and whether it was cancelled. Cancellation restores the starting value within the current bounds.
((value: number) => void)
Called once with the first bounded drag value after the threshold is crossed.
((value: number) => void)
Called with the bounded size during pointer or keyboard interaction and with the restored value on cancellation.
((value: number) => void)
Called with the final size after a successful drag or an effective keyboard size change. Cancellation does not commit.
"edge" | "gap" | "inline"
افتراضي:"edge with edge; inline otherwise"
Layout mode:
inline stays in normal flow, edge positions the handle on the panel edge, and gap sits between panels. Defaults to edge when edge is set and inline otherwise.ReactElement<unknown, string | JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, {}>
Allows you to replace the component’s HTML element
with a different tag, or compose it with another component.Accepts a
ReactElement or a function that returns the element to render.number | (() => number)
افتراضي:"1"
Pointer scale or resolver sampled at pointer down. Movement is divided by this positive scale; keyboard steps are unchanged.
number
افتراضي:"10"
Keyboard arrow increment. Pointer movement uses the pixel delta.
number
Current controlled size. Update it in
onValueChange and apply it to the element being resized.