الإطار القابل لتغيير الحجم

نظرة عامة

link

Web

tanrei-resizable-frame

clock_loader_40

SwiftUI

TanreiResizableFrame

radio_button_unchecked

Jetpack Compose

TanreiResizableFrame

radio_button_unchecked

Flutter

TanreiResizableFrame

radio_button_unchecked

React Native

ResizableFrame

radio_button_unchecked

مولَّد من docs/status/status.json, specs/resizable-frame.spec.json

معاينة يغيّر الشخص حجمها من حافة النهاية والحافة السفلية والزاوية

اسحب أحد المقابض، أو انتقل إلى واحد منها بالمفتاح Tab واستخدم مفاتيح الأسهم.

يمنح الإطار القابل لتغيير الحجم (resizable frame) ما يحتويه عرضًا وارتفاعًا يستطيع الشخص تغييرهما. ومقابضه هي مقابض تغيير الحجم: حين تُسحب تغيّر الحجم؛ وحين تُحرَّك من لوحة المفاتيح تغيّره خطوة بعد خطوة؛ وحين تُضغط دون سحب تبدّل بين أكبر حجم والحجم الذي كان قبله. ويحفظ الإطار الحجم، ويخبرك حين يغيّره الشخص، ويعطي كل مقبض الحجم قيمةً له لتقرأه التقنيات المساعدة.

وله مظهران. الطراز Outlined صندوق بزوايا مستديرة وخط رفيع واحد، ومقابضه خارجه كي لا تغطي شيئًا: هو المكان الذي تفحص فيه كيف تستجيب صفحة أو مكوّن للمساحة التي تُعطى له. الطراز Plain لا يرسم شيئًا من عنده: المحتوى يرسم سطحه الخاص، وكل مقبض يقف على حافته، مثل درج تنقل يوسّعه الشخص ليتسع للأسماء الطويلة، أو شريط جانبي يضيّقه ليفسح للعمل الذي بجانبه.

على الويب هو <tanrei-resizable-frame>. والمنصات الأخرى لم تنفّذه بعد.

الاستخدام

link

<!-- معاينة تُفحص بعرض هاتف وجهاز لوحي وحاسوب محمول: ينجذب السحب إلى كل عرض منها. -->
<tanrei-resizable-frame width="390" height="640" snap-widths="360 600 1024" width-label="تغيير عرض المعاينة">
  <iframe title="المعاينة" src="/preview"></iframe>
</tanrei-resizable-frame>

<!-- شريط جانبي في نهاية التخطيط: بالطراز plain، ويتغيّر حجمه من حافة البداية. -->
<tanrei-resizable-frame id="side" variant="plain" handles="start" min-width="240" max-width="560" size-indicator="none" width-label="تغيير حجم الشريط الجانبي">
  <aside>…</aside>
</tanrei-resizable-frame>

<script type="module">
  import '@tanrei/web/components/resizable-frame';
  const side = document.querySelector('#side');
  // احتفظ بالعرض الذي اختاره الشخص من زيارة إلى التي تليها.
  side.width = Number(localStorage.getItem('side-bar')) || 320;
  side.addEventListener('change', (e) => localStorage.setItem('side-bar', String(e.detail.width)));
</script>

import { ResizableFrame } from '@tanrei/react';

<ResizableFrame
  variant="plain"
  handles={['start']}
  width={width}
  minWidth={240}
  maxWidth={560}
  sizeIndicator="none"
  widthLabel="تغيير حجم الشريط الجانبي"
  onChange={(e) => setWidth(e.detail.width)}
>
  <aside>…</aside>
</ResizableFrame>

المواصفات

link

البنية

الجزء	الوصف
1 container	The box the content is laid out in, as wide and as tall as the frame's size. Outlined, its corners rounded and edged with one hairline, and the content clipped to it; plain, nothing drawn. It gives the content no fill of its own.
2 content	Whatever the product puts in the frame: a component, an embedded document, a layout, a navigation drawer. The frame gives it its width and its height and does nothing else to it.
3 start-handle · اختياري	A Handle (axis horizontal) centred along the start edge: it changes the width from that edge (a side bar at the end of a layout).
4 end-handle · اختياري	A Handle (axis horizontal) centred along the end edge: it changes the width.
5 bottom-handle · اختياري	A Handle (axis vertical) centred along the bottom edge: it changes the height.
6 corner-handle · اختياري	A Handle (axis both, corner bottom-end) at the bottom-end corner: it changes both.
7 size-indicator · اختياري	A small label inside the box at its top-end corner that shows the size as width × height in pixels while a handle is held or has keyboard focus, or always.

الخصائص

الخاصية	النوع	القيمة الافتراضية	الوصف
variant	outlined | plain	"outlined"	outlined: a box with rounded corners and one hairline, its handles outside it so that they cover nothing — where a person checks how content responds to its room (a preview). plain: no edge and no corners of its own, the content drawing its own surface, and each handle centred on its edge — the edge of a pane (a navigation drawer, a side bar).
handles	strings	end	Which handles the frame draws: any of start, end, bottom and bottom-end, in any combination. start is for content at the end of a layout, which grows toward the start (a side bar); end for content at its start (a preview, a navigation drawer). An empty list draws none, and the frame is a box of the size the product sets.
width	number	null	The width of the box in pixels. Null takes the width the layout gives. A drag, a key or an activation changes it, and the frame keeps the width the person gave until the product sets another; a product that keeps a person's width (a drawer's, from one visit to the next) stores it from change and sets it again.
height	number	null	The height of the box in pixels. Null takes the height the layout gives where it gives one (a row that stretches its items, a grid's cell, a pane beside the page), and the content's height where it does not, within minHeight and maxHeight. Changed as width is.
minWidth	number	null	The least width a person can give. Null takes comp.resizable-frame.container.min-width (320 in the default system: the width at which content must reflow without scrolling sideways, WCAG 1.4.10). A pane sets its own (a navigation drawer's least).
maxWidth	number	null	The greatest width. Null is the width the layout gives the frame.
minHeight	number	null	The least height. Null takes comp.resizable-frame.container.min-height.
maxHeight	number	null	The greatest height. Null is unlimited where the layout lets the frame grow.
snapWidths	numbers		Widths in whole pixels a drag of a handle that changes the width snaps to (360, 600, 1024: a common phone, a tablet, a small laptop). A width within comp.resizable-frame.snap-distance of one is taken as that one.
step	number	10	How many pixels one arrow key changes a size by.
largeStep	number	100	How many pixels Shift with an arrow key, Page Up or Page Down changes a size by.
sizeIndicator	none | active | always	"active"	When the size indicator is drawn: never; while a handle is held or has keyboard focus; or all the time. A pane that is not checked for its size (a navigation drawer) sets none.
widthLabel	string	""	The accessible name of the start and the end handle ("Resize preview width", "Resize navigation"). Required while one of them is drawn.
heightLabel	string	""	The accessible name of the bottom handle ("Resize preview height"). Required while it is drawn.
cornerLabel	string	""	The accessible name of the corner handle ("Resize preview"). Required while it is drawn.

المنافذ

المنفذ	الوصف
default	The content: a component, an embedded document, a layout, a navigation drawer. A fixture's string is drawn as plain text in it.

الأحداث

الحدث	الوصف
resize	The size changed during a drag; emitted in every frame it changes. Carries width and height in pixels.
change	A person finished changing the size: a drag ended, a key changed it, or a handle was activated. Carries width and height. Not emitted when the product sets a size.

الحالات

السلوك

متطلبات بصيغة EARS. يُختبر تنفيذ كل منصة مقابل هذه المعرّفات. يُعرض نص المتطلبات كما ورد في ملف المواصفة، بالإنجليزية.

المعرّف	المتطلب
RSF-1	THE resizable frame SHALL lay out its container as a box of its width and its height — width while it is not null and otherwise the width the layout gives it, height while it is not null and otherwise the height the layout gives it or, where the layout gives none, its content's height — each kept within its least and greatest (minWidth or comp.resizable-frame.container.min-width, and the lesser of maxWidth and the layout's width; minHeight or comp.resizable-frame.container.min-height, and maxHeight), with no fill and no elevation of its own, placed at the start edge of the room the layout gives it, or at its end edge WHILE handles names start and not end, so that the edge a person drags is the one that moves.
RSF-2	WHILE variant is outlined THE resizable frame SHALL draw its container with comp.resizable-frame.container.shape corners eased by sys.shape.corner-smoothing, edged inside with a line comp.resizable-frame.outline.width wide in comp.resizable-frame.outline.color, SHALL lay its content out at the box's width and clip it to the box's shape, and WHILE the content is taller than the box SHALL scroll it inside the box and make the box one focus stop, so that a keyboard scrolls it; WHILE variant is plain THE resizable frame SHALL draw no edge and no corners, SHALL give the content the box's width and height to fill, and SHALL clip nothing: the content draws its own surface and scrolls itself. In both THE resizable frame SHALL style nothing inside the content.
RSF-3	THE resizable frame SHALL draw the handles that handles names and no other: for start and end a Handle with axis horizontal centred along that edge, for bottom a Handle with axis vertical centred along the bottom edge, for bottom-end a Handle with axis both and corner bottom-end at that corner, each at size medium, and each with a hit area that meets the minimum target by its own rule (HDL-5). WHILE variant is outlined each handle SHALL stand outside the box, its box comp.resizable-frame.handle.gap beyond the edge (beyond both edges for the corner), and THE resizable frame SHALL keep room for them outside the box, so that they never cover the content; WHILE variant is plain each handle SHALL be centred on its edge (its corner on the box's corner) and take no room.
RSF-4	WHILE a drag of a handle lasts THE resizable frame SHALL change its width by the inline distance of the end and the corner handle, and by that distance taken the other way for the start handle, and its height by the block distance of the bottom and the corner handle, from the size it had when the drag began, kept within its least and greatest, following the drag without a motion, and SHALL emit resize with the new width and height in every frame the size changes; WHEN the drag ends THE resizable frame SHALL keep the size and emit change once, and none WHERE the size did not change.
RSF-5	WHILE a drag of a handle that changes the width lasts and snapWidths names widths THE resizable frame SHALL take a width within comp.resizable-frame.snap-distance of one of them as that width, and SHALL let the width go on with the drag once it is farther than that.
RSF-6	WHILE a drag of a handle lasts THE resizable frame SHALL keep every embedded document in its content from taking pointer input, so that the drag is not lost when the pointer passes over it, and SHALL give it input again WHEN the drag ends.
RSF-7	WHEN a handle emits step THE resizable frame SHALL change the size the step's axis stands for — the width for the inline axis, the height for the block axis — by step pixels for amount one and by largeStep pixels for amount large, wider toward the edge the handle stands on (toward the end for the end and the corner handle, toward the start for the start handle) and taller downward, and to its least for amount limit with direction −1 (Home) and to its greatest with direction 1 (End), kept within its least and greatest, and SHALL emit change once WHERE the size changed; it SHALL move to the new size over comp.resizable-frame.motion.resize-duration with comp.resizable-frame.motion.resize-easing, and at once where motion is reduced.
RSF-8	WHEN the start or the end handle is activated THE resizable frame SHALL make its width its greatest WHILE it is narrower, and SHALL give it back the width it had before the person last made it the greatest WHILE it already is the greatest (the least width where it had none); the bottom handle SHALL do the same with the height, the content's height standing for the greatest WHILE maxHeight is null; the corner handle SHALL do both. Each SHALL move as RSF-7 says and emit change once, so that no size the frame offers depends on a drag (WCAG 2.5.7).
RSF-9	THE resizable frame SHALL give each handle the value its size stands for — the width in pixels for the start and the end handle, the height for the bottom and the corner handle — with its least and greatest as min and max, and SHALL name the start and the end handle by widthLabel, the bottom handle by heightLabel and the corner handle by cornerLabel; WHILE a drawn handle's label is empty THE resizable frame SHALL still render it, and in debug builds report that it has no accessible name.
RSF-10	WHILE sizeIndicator is always, or sizeIndicator is active and a handle is held by a press or a drag or has keyboard focus, THE resizable frame SHALL draw its size indicator inside the box, comp.resizable-frame.size-indicator.offset from its top and end edges, over the content: the width, the character ×, and the height, in whole pixels written with the platform's digits for the layout's language and without grouping, in comp.resizable-frame.size-indicator.label.typescale and comp.resizable-frame.size-indicator.label.color, on a container comp.resizable-frame.size-indicator.container.height high, padded by comp.resizable-frame.size-indicator.container.padding-inline at its sides, with comp.resizable-frame.size-indicator.container.shape corners, filled with comp.resizable-frame.size-indicator.container.color; it SHALL take no input, and SHALL be hidden from assistive technology, which reads each size as its handle's value.
RSF-11	WHEN the size indicator appears or goes THE resizable frame SHALL fade it in over comp.resizable-frame.motion.indicator-enter-duration with comp.resizable-frame.motion.indicator-enter-easing and out over comp.resizable-frame.motion.indicator-exit-duration with comp.resizable-frame.motion.indicator-exit-easing, and at once where motion is reduced; WHILE a drag lasts it SHALL update the numbers in every frame, without a motion.
RSF-12	WHEN the product sets width or height THE resizable frame SHALL draw the new size at once and SHALL NOT emit resize or change; WHEN the layout's width becomes narrower than the frame's width THE resizable frame SHALL be as wide as the layout allows and keep the width the person gave for when there is room again.
RSF-13	WHERE the layout direction is right-to-left THE resizable frame SHALL mirror its layout: the box at the right of its room (at its left WHILE it stands at the end edge, RSF-1), the end handle on the box's left edge and the start handle on its right, the corner handle at the bottom-left corner, so that a drag away from the box widens it, and the size indicator at the top-left, its numbers still written left to right, the width at the left of the height, as a size is written in every language.
RSF-14	THE resizable frame SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the frame is shown THE resizable frame SHALL draw itself for the new direction at once, without a motion of its own, keeping its size.
RSF-15	WHERE the platform draws with a person's own forced colors THE resizable frame SHALL draw the outlined box's edge in the platform's text color, and its size indicator's text in the platform's text color on the platform's canvas color, with an edge of comp.resizable-frame.outline.width in the text color around it.
RSF-16	IF handles names a value other than start, end, bottom and bottom-end, or variant or sizeIndicator a value the component does not define, THE resizable frame SHALL ignore that handle, draw the variant as outlined or treat the indicator as active, and in debug builds report the unknown value; IF a value of snapWidths is not a whole number of pixels above zero THE resizable frame SHALL ignore it and in debug builds report it.
RSF-17	THE resizable frame SHALL have no words of its own and SHALL read none of the product's words: widthLabel, heightLabel and cornerLabel are about this one frame, and the size indicator is made of digits and a mark.
RSF-18	THE resizable frame SHALL add to the focus order its handles after its content, in the order start, end, bottom, bottom-end, and no other stop of its own but the box while it scrolls (RSF-2).
RSF-19	WHILE variant is outlined and a fine pointer is over the frame — its box or a handle's target — THE resizable frame SHALL draw its handles at rest (the handle's revealed), so that a person who points at a preview sees where to take it; WHILE variant is plain THE resizable frame SHALL leave each handle out of sight until it is used, as the Handle does (HDL-23), so that a pane's edge stays quiet under a pointer that only passes over the pane.

مطابقة الأسماء بين المنصات

التكافؤ لا يعني واجهات برمجية متطابقة. تعبّر كل منصة عن العقد نفسه بأسلوبها.

المواصفة	Web	SwiftUI	Jetpack Compose	Flutter	React Native
المكوّن	tanrei-resizable-frame	TanreiResizableFrame	TanreiResizableFrame	TanreiResizableFrame	ResizableFrame
variant · الخاصية	variant	variant	variant	variant	variant
handles · الخاصية	handles	handles	handles	handles	handles
width · الخاصية	width	width	width	width	width
height · الخاصية	height	height	height	height	height
minWidth · الخاصية	minWidth	minWidth	minWidth	minWidth	minWidth
maxWidth · الخاصية	maxWidth	maxWidth	maxWidth	maxWidth	maxWidth
minHeight · الخاصية	minHeight	minHeight	minHeight	minHeight	minHeight
maxHeight · الخاصية	maxHeight	maxHeight	maxHeight	maxHeight	maxHeight
snapWidths · الخاصية	snapWidths	snapWidths	snapWidths	snapWidths	snapWidths
step · الخاصية	step	step	step	step	step
largeStep · الخاصية	largeStep	largeStep	largeStep	largeStep	largeStep
sizeIndicator · الخاصية	sizeIndicator	sizeIndicator	sizeIndicator	sizeIndicator	sizeIndicator
widthLabel · الخاصية	widthLabel	widthLabel	widthLabel	widthLabel	widthLabel
heightLabel · الخاصية	heightLabel	heightLabel	heightLabel	heightLabel	heightLabel
cornerLabel · الخاصية	cornerLabel	cornerLabel	cornerLabel	cornerLabel	cornerLabel
resize · الحدث	resize	onResize	onResize	onResize	onResize
change · الحدث	change	onChange	onChange	onChanged	onChange
ملاحظات	<tanrei-resizable-frame variant handles="end bottom-end" width height min-width max-width min-height max-height snap-widths="360 600 1024" step large-step size-indicator width-label height-label corner-label> with the content in the default slot. handles and snapWidths are array properties; their attributes are space-separated or a JSON array. The handles are <tanrei-handle> in the shadow root. RSF-6 sets pointer-events: none on every slotted <iframe>, <object> and <embed> (and every one inside the slotted content) between the handles' resizestart and resizeend. resize and change are composed, bubbling CustomEvents with { width, height }; the Handle's own events stay in the shadow root.	width and height are Binding<CGFloat?>; snapWidths is [CGFloat]. Content is the view builder.	snapWidths: List<Dp>; sizes in Dp. Content is the trailing composable.	snapWidths: List<double>. Content is child.	snapWidths: number[]. Content is children.

الرموز

الرمز	يشير إلى	القيمة المحلولة (فاتح)
--tanrei-comp-resizable-frame-container-min-height	—	200px
--tanrei-comp-resizable-frame-container-min-width	—	320px
--tanrei-comp-resizable-frame-container-shape	sys.shape.corner.large	12px
--tanrei-comp-resizable-frame-handle-gap	sys.space.space100	8px
--tanrei-comp-resizable-frame-motion-indicator-enter-duration	sys.motion.role.appear.hint.enter	250ms
--tanrei-comp-resizable-frame-motion-indicator-enter-easing	sys.motion.easing.enter	cubic-bezier(0.2, 0, 0, 1)
--tanrei-comp-resizable-frame-motion-indicator-exit-duration	sys.motion.role.appear.hint.exit	200ms
--tanrei-comp-resizable-frame-motion-indicator-exit-easing	sys.motion.easing.exit	cubic-bezier(0.3, 0, 1, 1)
--tanrei-comp-resizable-frame-motion-resize-duration	sys.motion.role.resize.default	300ms
--tanrei-comp-resizable-frame-motion-resize-easing	sys.motion.easing.spatial	cubic-bezier(0.2, 0, 0, 1)
--tanrei-comp-resizable-frame-outline-color	sys.color.outline-variant	#000000 · 8%
--tanrei-comp-resizable-frame-outline-width	sys.border.hairline	1px
--tanrei-comp-resizable-frame-size-indicator-container-color	sys.color.inverse-surface	#1f1f1f
--tanrei-comp-resizable-frame-size-indicator-container-height	—	24px
--tanrei-comp-resizable-frame-size-indicator-container-padding-inline	sys.space.space100	8px
--tanrei-comp-resizable-frame-size-indicator-container-shape	sys.shape.corner.small	6px
--tanrei-comp-resizable-frame-size-indicator-label-color	sys.color.inverse-on-surface	#f1f1f1
--tanrei-comp-resizable-frame-size-indicator-offset	sys.space.space100	8px
--tanrei-comp-resizable-frame-snap-distance	sys.space.space100	8px
--tanrei-comp-resizable-frame-size-indicator-label-typescale	sys.typescale.code-small	400 12px/1.3333

نماذج الاختبار

عروض مرجعية. تلتقط كل المنصات لقطة لكل نموذج بالمعرّف نفسه حتى يمكن مقارنة النتائج.

default

width: 480 height: 240 widthLabel: Resize preview width slots: default

all-handles

handles: ["end","bottom","bottom-end"] width: 480 height: 240 widthLabel: Resize preview width heightLabel: Resize preview height cornerLabel: Resize preview slots: default

bottom-only

handles: ["bottom"] width: 480 height: 240 heightLabel: Resize preview height slots: default

indicator-always

width: 390 height: 240 sizeIndicator: always widthLabel: Resize preview width slots: default

no-handles

handles: [] width: 360 height: 200 slots: default

plain

variant: plain width: 280 height: 240 minWidth: 200 sizeIndicator: none widthLabel: Resize navigation slots: default

plain-start

variant: plain handles: ["start"] width: 280 height: 240 minWidth: 200 sizeIndicator: always widthLabel: Resize side bar slots: default

rtl

handles: ["end","bottom-end"] width: 480 height: 240 sizeIndicator: always widthLabel: Resize preview width cornerLabel: Resize preview direction: rtl slots: default

مولَّد من specs/resizable-frame.spec.json, tokens/comp/resizable-frame.tokens.json, design/tokens/

الإرشادات

link

متى يُستخدم

link

استخدمه حيث ينبغي أن يعطي الشخص شيئًا المساحة التي يريدها، ويرى ما يفعله بها: معاينة لصفحة أو لمكوّن بعرض آخر، أو جزء من الواجهة بجانب المحتوى الرئيسي، أو لوحة أدوات.

تحتاج إلى	استخدم
أن يزيد ارتفاع الحقل وحده مع نصه	مقبض الزاوية الخاص بـحقل النص.
لوحة ترتفع من الحافة السفلية	اللوحة السفلية، التي ترسم مقبض السحب الخاص بها.
اختيار بين أحجام ثابتة قليلة، ولا شيء بينها	زر مقسّم يبدّل بينها.
تصغير ما يُعرض كما تُصغَّر صورة، لا إعطاؤه مساحة أقل	ليس هذا المكوّن: الإطار القابل لتغيير الحجم يغيّر المساحة، ولا يغيّر أبدًا مقياس ما يحتويه.

مظهراه

link

variant	يرسم	يُستخدم لـ
outlined (الافتراضي)	زوايا مستديرة وخطًّا رفيعًا واحدًا، والمقابض في مساحتها الخاصة خارج الصندوق. ومرور الفأرة فوق الإطار يُظهر المقابض.	معاينة: يُرى المحتوى كاملًا، ولا يغطيه شيء من الإطار.
plain	لا شيء من عنده: يملأ المحتوى الصندوق بسطحه الخاص. ويقف كل مقبض على حافته ولا يظهر إلا حين يُشار إليه أو يتلقى التركيز أو يُضغط باستمرار.	حافة جزء من الواجهة: درج التنقل، والشريط الجانبي.

مقابضه

link

handles	يقف على	يغيّر
end (الافتراضي)	حافة النهاية	العرض. لمحتوى في بداية التخطيط: معاينة، أو درج تنقل.
start	حافة البداية	العرض، ويزيد نحو البداية. لمحتوى في نهاية التخطيط: شريط جانبي. ويقف الصندوق حينها في نهاية مساحته.
bottom	الحافة السفلية	الارتفاع.
bottom-end	الزاوية السفلية في جهة النهاية	الاثنين معًا.

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

الأحجام

link

الخاصيتان width و height هما حجم الصندوق بالبكسل. وما دامتا null يأخذ الصندوق العرض الذي يعطيه التخطيط والارتفاع الذي يعطيه التخطيط، أو ارتفاع المحتوى حيث لا يعطي التخطيط ارتفاعًا. وما إن يحرّك الشخص مقبضًا حتى يصير الحجم حجمه، ويبقى حتى تضبط أنت حجمًا آخر. والحجم الذي تضبطه يُرسم فورًا ولا يُطلق أي حدث؛ والتخطيط الأضيق يضيّق الصندوق، ثم يعيد إليه عرضه حين تتوفر المساحة من جديد.

أصغر عرض هو minWidth، وهو 320 بكسل ما دمت لم تضبط غيره: العرض الذي يجب أن يُعاد فيه ترتيب المحتوى دون تمرير جانبي. اضبط قيمتك الخاصة لجزء من الواجهة، فلدرج التنقل أصغر عرض خاص به. وأكبر عرض هو maxWidth، أو المساحة التي يعطيها التخطيط. أما snapWidths فهي عروض ينجذب إليها السحب حين يمر بها، مثل عرض هاتف شائع وجهاز لوحي وحاسوب محمول صغير.

ما يخبرك به

link

الحدث	متى
resize	مع كل تحديث للرسم يغيّر فيه السحب الحجم: width و height.
change	بعد أن يغيّر الشخص الحجم: انتهى سحب، أو حرّكه مفتاح، أو ضُغط مقبض دون سحب. احفظ الحجم هنا إن كنت تحتفظ بحجم الشخص.

مؤشر الحجم

link

طوال الضغط على مقبض أو وجود تركيز لوحة المفاتيح عليه، تُظهر تسمية صغيرة في الزاوية العلوية من جهة النهاية في الصندوق الحجمَ، مثل «390 × 640». وضبط sizeIndicator على always يُظهرها طوال الوقت، لمعاينة يُفحص حجمها؛ وضبطه على none لا يُظهرها أبدًا، لجزء من الواجهة لا يقرأ أحد حجمه. وتُكتب بأرقام لغة الصفحة ومن اليسار إلى اليمين في كل تخطيط، ولا تقرؤها التقنيات المساعدة: فهي تقرأ قيمة كل مقبض بدلًا منها.

افعل

link

• أعطِ كل مقبض مرسوم اسمًا يقول ما الذي يغيّر حجمه: widthLabel، heightLabel، cornerLabel («تغيير عرض المعاينة»، «تغيير حجم الشريط الجانبي»).
• اضبط أصغر عرض يبقى المحتوى عنده صالحًا للعمل، وأكبر عرض يترك بقية الصفحة صالحة للاستخدام.
• احفظ حجم الشخص حيث سيعود إليه: عرض الدرج أو الشريط الجانبي، من الحدث change.

لا تفعل

link

• لا ترسم مقابض تغيير حجم خاصة بك حول المحتوى: استخدم هذا الإطار، وبالطراز plain لحافة جزء من الواجهة.
• لا تستخدمه لتصغير المحتوى كما تُصغَّر صورة: فهو يغيّر المساحة لا المقياس.
• لا تنزع مقابض جزء من الواجهة يُفترض أن يغيّر الشخص حجمه: فالمفاتيح والضغط هي ما يستخدمه من لا يستطيع السحب.

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

link

الدور

none (a group of the product's content and its handles); each handle is a focusable separator

التسمية

Each handle is named by its label (widthLabel for the start and the end handle, heightLabel, cornerLabel) and tells its size as its value in pixels, with its least and greatest. The size indicator is hidden: it draws what the handles already tell.

الحد الأدنى للهدف

تستوفي مساحة اللمس الحد الأدنى لحجم الهدف حتى لو كان الحجم المرئي أصغر. minimum 32px · pointer 44px · spacing 8px · touch 48px

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

المفاتيح	الإجراء
Tab	Moves through the content, then the handles: start, end, bottom, corner.
Arrow keys on a handle	Change the size by step pixels; with Shift, by largeStep (HDL-9, RSF-7). On the start handle the arrow toward the start widens.
Page Up / Page Down	Change the size by largeStep.
Home / End	Give the size its least or its greatest.
Enter / Space	Switch between the greatest size and the size before it (RSF-8).

ملاحظات

• The default least width, 320, is the width at which content must reflow without a sideways scroll (WCAG 1.4.10), so that a person checking a design can reach that width and no narrower by accident; a product sets minWidth lower for a narrower check, and a pane sets its own.
• Dragging movements (WCAG 2.5.7): every size is also reachable by activating a handle (the greatest and the one before) and by its keys.
• The keys follow the window splitter pattern of the ARIA Authoring Practices: each handle is a separator with a value, Home and End give the least and the greatest.

مولَّد من specs/resizable-frame.spec.json, tokens/sys/measure.tokens.json

ما يتكفل به المكوّن

link

• كل مقبض فاصل يقبل التركيز، وهو مقسِّم النوافذ في ARIA Authoring Practices، يسمّيه نص تسميته، وقيمته الحجم بالبكسل، ومداه أصغر حجم وأكبره.
• تأتي المقابض بعد المحتوى في ترتيب التركيز: البداية، ثم النهاية، ثم الأسفل، ثم الزاوية. ولا يكون الصندوق بالطراز outlined موضع توقف للتركيز إلا ما دام محتواه أطول منه ويُمرَّر.
• مفاتيح الأسهم تغيّر الحجم بمقدار step بكسل، و Shift مع سهم و Page Up و Page Down بمقدار largeStep؛ ويعطي Home و End أصغر حجم وأكبره. وفي مقبض البداية يوسّع السهمُ المتجه نحو البداية.
• المفتاح Enter أو Space، أو ضغطة دون سحب، يبدّل بين أكبر حجم والحجم الذي كان قبله، فيُبلغ كل حجم دون سحب.
• طوال السحب لا يأخذ أي مستند مضمَّن في المحتوى المؤشر، فلا يضيع السحب حين يمر المؤشر فوقه.
• مؤشر الحجم مخفي عن التقنيات المساعدة؛ فهو يرسم ما تقوله قيم المقابض أصلًا. وحيث يُطلب تقليل الحركة تنتقل التغييرات التي يُحدثها مفتاح أو ضغطة فورًا.
• في وضع الألوان المفروضة تأخذ الحافة بالطراز outlined ونص المؤشر لون النص، وتأخذ خلفية المؤشر لون اللوحة (canvas).

ما عليك فعله

link

• أعطِ كل مقبض ترسمه تسميته. من دونها يُرسم المقبض ويعمل، وتبلّغ عنه نسخة التصحيح.
• تأكّد من أن المحتوى يعمل في كل حجم تسمح به، بدءًا من أصغر عرض.