साइज़ हैंडल

अवलोकन

link

Web

tanrei-handle

clock_loader_40

SwiftUI

TanreiHandle

radio_button_unchecked

Jetpack Compose

TanreiHandle

radio_button_unchecked

Flutter

TanreiHandle

radio_button_unchecked

React Native

Handle

radio_button_unchecked

इससे जनरेट किया गया: docs/status/status.json, specs/handle.spec.json

ऊँचाई बदलने वाला हैंडल, चौड़ाई बदलने वाला हैंडल, और कोने में दोनों बदलने वाला हैंडल

साइज़ हैंडल किसी ऐसी चीज़ के किनारे या कोने पर लगता है जिसका साइज़ कोई बदल सकता है: शीट का ऊपरी किनारा, टेक्स्ट फ़ील्ड का निचला कोना, किसी पेन या प्रीव्यू का किनारा। खींचने पर वह बताता है कि वह कितना हिला; कीबोर्ड से हिलाने पर, कौन-सा कदम माँगा गया; बिना खींचे दबाने पर, यही बात। वह ख़ुद किसी चीज़ का साइज़ कभी नहीं बदलता। साइज़ वह चीज़ रखती है जिस पर हैंडल लगा है, वही तय करती है कि एक कदम कितना है, और साइज़ हैंडल को लौटाती है ताकि सहायक तकनीक उसे पढ़ सके।

वेब पर यह <tanrei-handle> है। बाक़ी प्लैटफ़ॉर्म ने इसे अभी इम्प्लीमेंट नहीं किया है।

इस्तेमाल

link

<div class="notes">
  <textarea aria-label="नोट्स"></textarea>
  <!-- निचले किनारे पर: यह ऊँचाई बदलता है। value मालिक की है, मालिक की इकाई में। -->
  <tanrei-handle label="नोट्स का साइज़ बदलें" value="4" min="2" max="12" value-text="4 लाइनें"></tanrei-handle>
</div>

<script type="module">
  import '@tanrei/web/components/handle';
  const handle = document.querySelector('.notes tanrei-handle');
  const notes = document.querySelector('.notes textarea');
  const lineHeight = 24;
  let start = 0;
  const show = (lines) => {
    lines = Math.min(12, Math.max(2, Math.round(lines)));
    notes.rows = lines;
    handle.value = lines;
    handle.valueText = `${lines} लाइनें`;
  };
  handle.addEventListener('resizestart', () => (start = notes.rows));
  // दबाने की जगह से दूरी, पिक्सेल में: block नीचे की ओर पॉज़िटिव है।
  handle.addEventListener('resize', (e) => show(start + e.detail.block / lineHeight));
  // यहाँ एक कदम एक लाइन है; Home और End सबसे छोटा और सबसे बड़ा माँगते हैं।
  handle.addEventListener('step', (e) => {
    const { direction, amount } = e.detail;
    show(amount === 'limit' ? (direction < 0 ? 2 : 12) : notes.rows + direction * (amount === 'large' ? 3 : 1));
  });
  // बिना खींचे दबाया गया: अपने जाने हुए दो साइज़ के बीच बदलें, ताकि किसी साइज़ के लिए खींचना ज़रूरी न हो।
  handle.addEventListener('activate', () => show(notes.rows < 12 ? 12 : 2));
</script>

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

<Handle
  label="नोट्स का साइज़ बदलें"
  value={rows}
  min={2}
  max={12}
  valueText={`${rows} लाइनें`}
  onResizeStart={() => setStart(rows)}
  onResize={(e) => setRows(clamp(start + e.detail.block / 24))}
  onStep={(e) => setRows(stepped(rows, e.detail))}
  onActivate={() => setRows(rows < 12 ? 12 : 2)}
/>

स्पेक

link

इस्तेमाल होने तक नहीं दिखता: पॉइंटर उस पर ले जाएँ, या Tab से उस तक पहुँचें

संरचना

भाग	विवरण
1 container	The box the line is drawn in: a pill across the line for one axis, a square at its corner for two. It carries hover, focus and press, and draws nothing at rest.
2 line	The drawn mark: a capsule with round ends across the axis it resizes (a horizontal capsule for a handle that changes a height), or a quarter of a circle with round ends that bows toward its corner for a handle that changes both. A drawn line, never a glyph of the icon set.
3 target	The hit area: at least the minimum target, centred on the line, reaching past the box the handle stands on where it must. It is not drawn.
4 focus-ring · वैकल्पिक	Gap-then-ring indicator around the container, shown for keyboard focus.

प्रॉपर्टी

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
axis	vertical | horizontal | both	"vertical"	Which size the handle changes. vertical: a height — the line lies across it, horizontal (a sheet's top, a field's bottom edge). horizontal: a width — the line stands upright (a pane's or a frame's end edge). both: a height and a width at once — the line is an arc at a corner (a field's or a frame's bottom-end corner).
corner	bottom-end | bottom-start | top-end | top-start	"bottom-end"	The corner an arc bows toward while axis is both, in logical terms: end is the right in a left-to-right layout and the left in a right-to-left one. Ignored for one axis.
size	small | medium	"medium"	medium for a sheet, a pane or a frame; small for the corner of a text field, where a large mark would cover the text. The hit area meets the minimum target at both sizes. A design system may add values.
value	number	null	The size the handle stands for, as its owner counts it (lines, pixels, a percentage), told to assistive technology. Null exposes the handle as a button with no value: a handle that switches between sizes its owner knows (a sheet's two heights) rather than one that sets a size.
min	number	0	The least value, told to assistive technology with value. Ignored while value is null.
max	number	100	The greatest value, told to assistive technology with value. Ignored while value is null.
valueText	string	""	The value in the product's words ("6 lines", "390 by 844"), read in place of the number. Empty reads the number.
expanded	boolean	null	While value is null: whether what the handle switches is at its larger size, told to assistive technology as the button's expanded state. Null tells no such state.
label	string	""	The accessible name, in the product's words, saying what it resizes ("Resize message", "Resize preview"). Never drawn. Required: a handle without a name is still drawn and reported in debug builds.
disabled	boolean	false	Draws the handle as unavailable; it takes no input and no focus.
revealed	boolean	false	Draws the line at rest. False (the default) keeps the handle out of sight until it is used: it appears while a fine pointer is over it, while it has keyboard focus and while a press or a drag holds it, and it is always drawn where the primary pointer cannot hover (a touch screen). Set it where the handle must be seen to be found (a sheet's grip, which tells that the sheet can be pulled), or while a pointer is over what the handle stands on.

इवेंट

इवेंट	विवरण
resizeStart	A drag began: a press on the target moved past the platform's touch slop. Carries pointerType (mouse, touch or pen).
resize	The drag moved; emitted in every frame it moves. Carries inline and block, the distance from the press in pixels: inline positive toward the end edge (to the right in a left-to-right layout, to the left in a right-to-left one), block positive downward.
resizeEnd	The drag ended, once: the press was released, or cancelled by the platform. Carries inline and block as resize does, and cancelled (true when the platform cancelled the press).
step	A key or an assistive-technology adjustment asked for a change. Carries axis (inline or block), direction (1 downward or toward the end edge, −1 upward or toward the start edge) and amount (one, large, or limit — limit with direction −1 for Home and 1 for End, the owner's least and greatest size).
activate	The handle was pressed and released without a drag, or Enter or Space was pressed while it had keyboard focus. Its owner switches between sizes it knows.

स्टेट

व्यवहार

EARS रूप में लिखी गई आवश्यकताएँ। हर प्लैटफ़ॉर्म के इम्प्लीमेंटेशन को इन ID के आधार पर टेस्ट किया जाता है। आवश्यकताओं का पाठ स्पेक फ़ाइल से ज्यों का त्यों, अंग्रेज़ी में दिखाया गया है।

ID	आवश्यकता
HDL-1	WHILE axis is vertical or horizontal THE handle SHALL draw its line as a capsule with round ends, comp.handle.line.length.medium long and comp.handle.line.thickness.medium thick for size medium (and so on for each size), lying across the axis it resizes — horizontal WHILE axis is vertical, upright WHILE axis is horizontal — centred in its container, in the line color of its state (comp.handle.standard.line.color at rest).
HDL-2	WHILE axis is both THE handle SHALL draw its line as a quarter of a circle with round ends, comp.handle.arc.radius.medium in radius and comp.handle.line.thickness.medium thick for size medium (and so on), bowed toward its corner: its centre lies comp.handle.arc.radius.medium plus comp.handle.inset in from both edges of that corner, so that the middle of the stroke comes within comp.handle.inset of each edge and the arc shares its centre with a corner of that radius; it SHALL be drawn in the line color of its state.
HDL-3	THE handle SHALL lay out its container — WHILE axis is vertical, comp.handle.container.length.medium wide and comp.handle.container.breadth.medium high for size medium (and so on); WHILE axis is horizontal, the same turned a quarter turn; WHILE axis is both, a square of comp.handle.container.breadth.medium on each side at its corner — with comp.handle.container.shape corners, filled with the container color of its state (comp.handle.standard.container.color at rest, which is clear in the default system), and SHALL take no other room: it is placed by the component it stands on, or by the product, and draws no elevation.
HDL-4	WHILE a fine pointer is over the handle, or a press or a drag holds it, THE handle SHALL draw its line comp.handle.line.active-thickness.medium thick for size medium (and so on) and, WHILE axis is vertical or horizontal, comp.handle.line.active-length.medium long (and so on), growing about its centre, and its arc at the same radius, and SHALL draw line, container and opacity from the component tokens of the highest-precedence active state, with precedence pressed over focused over hovered; focus gained by pointer or touch SHALL NOT select the focused state. WHEN it changes between these forms THE handle SHALL move its length and thickness, and its colors, over comp.handle.motion.state-duration with comp.handle.motion.state-easing, and SHALL make the change at once where motion is reduced.
HDL-5	THE handle SHALL give its target at least sys.target.touch on each side for touch input and sys.target.pointer for fine pointers, centred on its container, reaching past the box it stands on where it must, without changing its drawn size or its owner's layout; a platform that cannot tell the input type SHALL use sys.target.touch. WHILE a fine pointer is over the target THE handle SHALL show the platform's resize cursor for its axis: a vertical double arrow WHILE axis is vertical, a horizontal one WHILE it is horizontal, and WHILE it is both the diagonal one that runs through its corner (from top-left to bottom-right for a bottom-end corner in a left-to-right layout), where the platform has one.
HDL-6	WHEN a press that began on the target moves farther than the platform's touch slop THE handle SHALL emit resizeStart once with the press's pointer type, then resize with the distance from the press in every frame the press moves, and resizeEnd once WHEN the press is released or the platform cancels it; it SHALL follow the press without a motion of its own, SHALL keep receiving the press wherever it moves — past the window's edge, and over an embedded document, which takes no input while the drag lasts — SHALL NOT select text, scroll the page, move a caret or take focus because of the press or the drag (focus stays in what the person was working in: a field keeps its caret while its handle is dragged), and SHALL change no size itself: its owner sizes what it stands on from the distances (a sheet, a field, a frame).
HDL-7	WHEN a press on the target is released without having moved farther than the touch slop, or Enter or Space is pressed while the handle has keyboard focus, THE handle SHALL emit activate once and no resize; its owner switches between sizes it knows (a sheet's two heights, a field's own height and the height its text needs, a frame's whole width and the width it had), so that no size it offers depends on a drag (WCAG 2.5.7).
HDL-8	THE handle SHALL be one focus stop, and SHALL be exposed WHILE value is not null as a focusable separator — the platform's adjustable trait where it has no separator — named by label, with value as its value, min and max as its least and greatest, valueText as its value text where it is not empty, and an orientation that is its line's (horizontal WHILE axis is vertical or both, vertical WHILE axis is horizontal); and WHILE value is null as a button named by label, with the expanded state WHILE expanded is not null. Its line and container SHALL be hidden from assistive technology. WHILE label is empty THE handle SHALL still render and work, and in debug builds report that it has no accessible name.
HDL-9	WHILE the handle has keyboard focus and value is not null THE handle SHALL emit step for the arrow keys of its axis — Up Arrow and Down Arrow WHILE axis is vertical, Left Arrow and Right Arrow WHILE it is horizontal, all four WHILE it is both — with the axis they move along and the direction they point (Down 1, Up −1; the arrow toward the end edge 1, the other −1), amount large WHILE Shift is held and amount one otherwise; Page Down and Page Up SHALL emit the same as Shift with Down Arrow and Up Arrow WHILE axis is vertical or both, and as Shift with the arrows toward the end and the start edge WHILE it is horizontal; Home SHALL emit step with amount limit and direction −1 and End with amount limit and direction 1, along its axis (the block axis WHILE axis is both), following the window splitter pattern, where Home gives what it stands on its least size and End its greatest. The handle SHALL change nothing itself, and SHALL let every other key reach its owner.
HDL-10	WHEN assistive technology increments or decrements the handle (a vertical swipe on an adjustable element, the platform's increment and decrement actions) WHILE value is not null THE handle SHALL emit step with amount one, direction 1 for an increment and −1 for a decrement, along the block axis WHILE axis is vertical or both and the inline axis WHILE it is horizontal; its owner, which knows whether its size grows downward or upward, changes value accordingly.
HDL-11	WHEN the handle is pressed by pointer, touch, Enter or Space THE handle SHALL show the pressed state without delay and SHALL keep it visible for at least sys.motion.duration.press-hold, even when the press ends sooner, and for as long as a drag lasts.
HDL-12	WHILE pressed THE handle SHALL answer as sys.behavior.pressed-feedback names: overlay applies the pressed tokens to the whole container at once; ripple grows the pressed state layer from the point of contact (from the center for keyboard activation); dim applies the pressed opacity to the whole control and draws no state layer; none draws no answer to the press. Under ripple and dim only the container color stays with the state under the press; line, opacity and shape still come from the pressed tokens. Under none every part stays with the state under the press. The ripple grows over comp.handle.motion.feedback-duration with comp.handle.motion.state-easing, fades over comp.handle.motion.state-duration with comp.handle.motion.state-easing once the press has ended and press-hold has passed, and appears whole where motion is reduced.
HDL-13	THE handle SHALL ease its container corners by sys.shape.corner-smoothing (0 is a quarter circle, 0.6 the iOS continuous corner; a platform with only the OS curve draws it for any amount above 0) and show its keyboard focus as sys.behavior.focus-style names (ring or glow); a platform that cannot draw a choice SHALL fall back to the first value and state that in its README.
HDL-14	WHEN the handle receives keyboard focus THE handle SHALL show the focus ring around its container, sys.focus.offset outside it, without animation; focus gained by pointer or touch SHALL NOT show it.
HDL-15	WHILE disabled is true THE handle SHALL draw its line and container from its disabled tokens, SHALL NOT be focusable, SHALL take no press, emit no event and show no resize cursor, and SHALL expose the disabled state to assistive technology.
HDL-16	WHERE the platform draws with a person's own forced colors (the web's forced-colors mode, and a platform's equivalent where it has one) THE handle SHALL draw its line in the platform's button-text color, in the platform's highlight color while a fine pointer is over it or a press holds it, and in the platform's disabled-text color WHILE disabled is true, and its focus indicator in the platform's highlight color; it SHALL draw no container fill.
HDL-17	WHERE the layout direction is right-to-left THE handle SHALL place an arc's end corners at the left (a bottom-end arc bows toward the bottom-left), mirror the diagonal resize cursor with it, and take the arrow toward the end edge as Left Arrow (HDL-9) and the inline distance of resize as positive toward the left (HDL-6); a capsule SHALL be drawn as in a left-to-right layout.
HDL-18	THE handle 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 handle is shown THE handle SHALL draw itself for the new direction at once, without a motion of its own.
HDL-19	WHILE the text size is enlarged THE handle SHALL keep its line, its container and its target at the sizes of its size: it is a mark on an edge, enlarged with the page and not with the text.
HDL-20	WHEN size names a value that the active design system does not have, or axis or corner a value the component does not define, THE handle SHALL render with the default value (medium, vertical, bottom-end), and in debug builds report the unknown value.
HDL-21	THE handle SHALL have no words of its own and SHALL read none of the product's words: label and valueText are about the one thing this handle resizes, and are the instance's alone.
HDL-22	WHEN value, min, max, valueText or expanded changes THE handle SHALL expose the new value at once and SHALL NOT announce it by itself: a separator's value is read by assistive technology as it changes, as a slider's is.
HDL-23	WHILE revealed is false and the primary pointer can hover THE handle SHALL draw neither its line nor its container at rest, and SHALL draw them as its state says WHILE a fine pointer is over its target, WHILE it has keyboard focus and WHILE a press or a drag holds it; WHEN it comes into sight or goes out of it THE handle SHALL fade its line and container over comp.handle.motion.state-duration with comp.handle.motion.state-easing, at once where motion is reduced, and SHALL go out of sight only once the press-hold of HDL-11 has passed.
HDL-24	WHILE the handle is out of sight THE handle SHALL keep everything else it is — one stop in the focus order, its target, its resize cursor (HDL-5), its accessible name, role and value (HDL-8), its drag, its keys and its activation — so that a keyboard finds it by Tab and is shown it with its focus ring at once (WCAG 2.4.7, and 2.4.11: what has focus is in sight), a fine pointer is shown it by the resize cursor and the line as it comes over the target, and no size depends on finding it by a drag (WCAG 2.5.7, HDL-7).
HDL-25	WHERE the primary pointer cannot hover (a touch screen), and WHILE revealed is true, THE handle SHALL draw its line at rest: a mark that shows only under a hovering pointer would never be found by a finger, and a press on its unseen target would take a touch meant for what lies under it.
HDL-26	WHERE the platform has ARIA attributes (the web), WHEN the product sets an aria- attribute on the host, by the attribute or by the ARIA property that reflects it, THE handle SHALL move it to the data-aria- attribute of the same name, so that the host is no second node with its name, description or state, and SHALL expose it on the element that carries its role (HDL-8) — its separator WHILE value is not null, its button otherwise — an id reference by the elements it names in the host's tree or a tree around it, a description after its own — except those the handle owns (aria-disabled, aria-expanded), which it SHALL move and not expose. WHILE label is not empty it is the handle's name, over a name given so; WHILE label is empty, a name given so is the handle's name and SHALL NOT be reported as having none in debug builds. WHEN the product removes the aria- attribute or its data-aria- twin, or sets the ARIA property that reflects it (ariaLabel, ariaDescribedByElements…) to null, THE handle SHALL take it off that element. WHEN the product sets an aria- attribute the handle owns THE handle SHALL report it in debug builds.

प्लैटफ़ॉर्म के अनुसार नामों का मिलान

पैरिटी का मतलब एक जैसे API नहीं है। हर प्लैटफ़ॉर्म एक ही कॉन्ट्रैक्ट को अपने तरीक़े से व्यक्त करता है।

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
कंपोनेंट	tanrei-handle	TanreiHandle	TanreiHandle	TanreiHandle	Handle
axis · प्रॉपर्टी	axis	axis	axis	axis	axis
corner · प्रॉपर्टी	corner	corner	corner	corner	corner
size · प्रॉपर्टी	size	size	size	size	size
value · प्रॉपर्टी	value	value	value	value	value
min · प्रॉपर्टी	min	range.lowerBound	valueRange.start	min	min
max · प्रॉपर्टी	max	range.upperBound	valueRange.endInclusive	max	max
valueText · प्रॉपर्टी	valueText	valueText	valueText	valueText	valueText
expanded · प्रॉपर्टी	expanded	isExpanded	expanded	expanded	expanded
label · प्रॉपर्टी	label	label	label	label	label
disabled · प्रॉपर्टी	disabled	disabled	enabled	enabled	disabled
revealed · प्रॉपर्टी	revealed	revealed	revealed	revealed	revealed
resizeStart · इवेंट	resizestart	onResizeStart	onResizeStart	onResizeStart	onResizeStart
resize · इवेंट	resize	onResize	onResize	onResize	onResize
resizeEnd · इवेंट	resizeend	onResizeEnd	onResizeEnd	onResizeEnd	onResizeEnd
step · इवेंट	step	onStep	onStep	onStep	onStep
activate · इवेंट	activate	onActivate	onActivate	onActivate	onActivate
टिप्पणियाँ	<tanrei-handle axis corner size value min max value-text expanded label disabled revealed>. The shadow root holds one focusable element: role="separator" with aria-valuenow/aria-valuemin/aria-valuemax/aria-valuetext and aria-orientation while value is set, a <button> with aria-expanded while it is not. The capsule is a box with round ends, the arc an SVG circle drawn a quarter of the way round by its dash; both are aria-hidden. Out of sight (HDL-23) is opacity: 0 on the box and the line, under @media (hover: hover) only (HDL-25). The drag uses Pointer Events with setPointerCapture and touch-action: none on the target, and a pointer press refuses its mousedown, so that it takes no focus and selects nothing; an owner that holds an iframe sets pointer-events: none on it between resizestart and resizeend (HDL-6). Events are CustomEvents that bubble out of the shadow root: resizestart { pointerType }, resize { inline, block }, resizeend { inline, block, cancelled }, step { axis, direction, amount }, activate (no detail).	A DragGesture(minimumDistance:) with the platform's slop; accessibilityAdjustableAction for HDL-10 while value is set, the button trait while it is not. The resize cursor is NSCursor on macOS and the pointer style on iPadOS. Out of sight (HDL-23) only where a pointer hovers (macOS, iPadOS with a pointer); on a touch screen the line is always drawn (HDL-25).	enabled is the inverse of disabled. Modifier.pointerInput with detectDragGestures; semantics progressBarRangeInfo and setProgress while value is set, Role.Button while it is not; pointerHoverIcon for the cursor on desktop. Out of sight (HDL-23) only where a pointer hovers (a desktop window, a mouse); on a touch screen the line is always drawn (HDL-25).	enabled is the inverse of disabled. A GestureDetector with pan callbacks; Semantics(slider: true, value:, increasedValue:, onIncrease:) while value is set, button: true while it is not; MouseRegion(cursor:) for the resize cursor. Out of sight (HDL-23) only where a pointer hovers (a desktop or web target with a mouse); on a touch screen the line is always drawn (HDL-25).	A PanResponder (or Gesture Handler where the product has it); accessibilityRole="adjustable" with accessibilityActions increment and decrement while value is set, button while it is not. A touch screen has no hover, so the line is always drawn there (HDL-25); where a pointer hovers (react-native-web, Windows, macOS) it is out of sight as HDL-23 says.

टोकन

टोकन	किसका एलियास	रिज़ॉल्व किया गया मान (लाइट)
--tanrei-comp-handle-arc-radius-medium	—	16px
--tanrei-comp-handle-arc-radius-small	—	8px
--tanrei-comp-handle-container-breadth-medium	—	24px
--tanrei-comp-handle-container-breadth-small	—	16px
--tanrei-comp-handle-container-length-medium	—	48px
--tanrei-comp-handle-container-length-small	—	20px
--tanrei-comp-handle-container-shape	sys.shape.corner.full	9999px
--tanrei-comp-handle-disabled-opacity	—	1
--tanrei-comp-handle-focused-opacity	—	1
--tanrei-comp-handle-hovered-opacity	—	1
--tanrei-comp-handle-inset	sys.space.space50	4px
--tanrei-comp-handle-line-active-length-medium	—	40px
--tanrei-comp-handle-line-active-length-small	—	16px
--tanrei-comp-handle-line-active-thickness-medium	—	6px
--tanrei-comp-handle-line-active-thickness-small	—	4px
--tanrei-comp-handle-line-length-medium	—	32px
--tanrei-comp-handle-line-length-small	—	12px
--tanrei-comp-handle-line-thickness-medium	—	4px
--tanrei-comp-handle-line-thickness-small	—	3px
--tanrei-comp-handle-motion-feedback-duration	sys.motion.role.feedback	450ms
--tanrei-comp-handle-motion-state-duration	sys.motion.role.state.compact	200ms
--tanrei-comp-handle-motion-state-easing	sys.motion.easing.state	cubic-bezier(0.2, 0, 0, 1)
--tanrei-comp-handle-pressed-opacity	—	1
--tanrei-comp-handle-standard-container-color	—	#000000 · 0%
--tanrei-comp-handle-standard-disabled-container-color	—	#000000 · 0%
--tanrei-comp-handle-standard-disabled-line-color	—	#1b1b1b · 38%
--tanrei-comp-handle-standard-disabled-state-layer-color	—	#1b1b1b · 38%
--tanrei-comp-handle-standard-focused-container-color	—	#848484 · 10%
--tanrei-comp-handle-standard-focused-line-color	—	#848484
--tanrei-comp-handle-standard-focused-state-layer-color	—	#848484
--tanrei-comp-handle-standard-hovered-container-color	—	#848484 · 8%
--tanrei-comp-handle-standard-hovered-line-color	—	#4b4b4b
--tanrei-comp-handle-standard-hovered-state-layer-color	—	#848484
--tanrei-comp-handle-standard-line-color	sys.color.outline	#848484
--tanrei-comp-handle-standard-pressed-container-color	—	#848484 · 10%
--tanrei-comp-handle-standard-pressed-line-color	—	#4b4b4b
--tanrei-comp-handle-standard-pressed-state-layer-color	—	#848484
--tanrei-comp-handle-standard-state-layer-color	comp.handle.standard.line.color	#848484

फ़िक्स्चर

मानक रेंडरिंग। हर प्लैटफ़ॉर्म हर फ़िक्स्चर का स्नैपशॉट एक ही ID से लेता है, ताकि नतीजों की तुलना की जा सके।

size: small (3)

small

size: small value: 4 label: Resize message revealed: true

small-horizontal

axis: horizontal size: small value: 4 label: Resize message revealed: true

small-both

axis: both size: small value: 4 label: Resize message revealed: true

size: medium (10)

default

label: Resize sheet

revealed

label: Resize sheet revealed: true

horizontal

axis: horizontal value: 50 label: Resize preview revealed: true

both-bottom-end

axis: both value: 6 min: 3 max: 12 valueText: 6 lines label: Resize message revealed: true

both-bottom-start

axis: both corner: bottom-start value: 6 label: Resize message revealed: true

both-top-end

axis: both corner: top-end value: 6 label: Resize message revealed: true

both-top-start

axis: both corner: top-start value: 6 label: Resize message revealed: true

button-expanded

expanded: true label: Sheet height revealed: true

disabled

value: 50 label: Resize preview disabled: true revealed: true

rtl-both

axis: both value: 6 label: Resize message revealed: true direction: rtl

इससे जनरेट किया गया: specs/handle.spec.json, tokens/comp/handle.tokens.json, design/tokens/

दिशानिर्देश

link

कब इस्तेमाल करें

link

वहाँ इस्तेमाल करें जहाँ किसी को किसी चीज़ को अपनी पसंद का साइज़ देने देना चाहिए: लंबे जवाब का फ़ील्ड, नक़्शे के ऊपर की शीट, साइड पैनल, किसी पेज का दूसरी चौड़ाई पर प्रीव्यू।

आपको चाहिए	इस्तेमाल करें
लिस्ट के किसी आइटम को दूसरी जगह ले जाना	लिस्ट का क्रम बदलने वाला हैंडल, जो बिंदुओं से बनता है। लाइन साइज़ बदलती है; बिंदु जगह बदलते हैं।
कुछ तय साइज़ में से एक चुनना, बीच का कोई नहीं	सेगमेंटेड बटन, या साइज़ बदलने वाला बटन।
नीचे के किनारे से ऊपर उठने वाली शीट	बॉटम शीट, जो अपना ड्रैग हैंडल ख़ुद बनाती है।

इसके रूप

link

axis	कैसे बनता है	कहाँ लगता है
vertical (डिफ़ॉल्ट)	एक छोटी आड़ी लाइन	निचला या ऊपरी किनारा: ऊँचाई बदलता है।
horizontal	एक छोटी खड़ी लाइन	शुरू या आख़िर का किनारा: चौड़ाई बदलता है।
both	corner की ओर झुका चौथाई गोले का चाप	कोना: ऊँचाई और चौड़ाई एक साथ बदलता है।

corner लॉजिकल दिशा में लिखा जाता है: बाएँ से दाएँ लेआउट में end दायाँ है और दाएँ से बाएँ लेआउट में बायाँ, इसलिए bottom-end चाप ख़ुद पेज की दिशा के साथ चलता है।

size	किसके लिए
medium (डिफ़ॉल्ट)	शीट, पेन, फ़्रेम।
small	टेक्स्ट फ़ील्ड का कोना, जहाँ बड़ा निशान टेक्स्ट को ढक देगा।

दोनों साइज़ कम से कम टार्गेट रखते हैं। ज़रूरत हो तो छूने का हिस्सा, बनी हुई चीज़ बदले बिना, उस चीज़ के बाहर तक जाता है जिस पर हैंडल लगा है।

यह क्या बताता है, और आप क्या करते हैं

link

इवेंट	कब	आप क्या करते हैं
resizestart	खींचना शुरू हुआ: दबाने के बाद पॉइंटर टच स्लॉप से आगे चला।	शुरू का साइज़ याद रखें। जिस चीज़ का साइज़ बदल रहे हैं उसके किसी भी iframe का pointer-events बंद करें।
resize	खींचने के हर फ़्रेम में। inline और block दबाने की जगह से पिक्सेल में दूरी हैं: inline आख़िरी किनारे की ओर, block नीचे की ओर।	साइज़ तय करें: शुरू का साइज़ और दूरी, अपनी इकाई में, अपनी सीमाओं के भीतर।
resizeend	खींचना ख़त्म हुआ, एक बार। प्लैटफ़ॉर्म ने रद्द किया हो तो cancelled true है।	साइज़ रखें, या रद्द हुआ हो तो पहले जैसा करें। iframe फिर चालू करें।
step	किसी कुंजी ने बदलाव माँगा: axis, direction (1 या −1) और amount (one, large, या Home और End के लिए limit)।	तय करें कि एक कदम क्या है — एक लाइन, 1 या 10 पिक्सेल, 5% — और साइज़ उतना बदलें।
activate	बिना खींचे दबाकर छोड़ा, या Enter या Space।	अपने जाने हुए दो साइज़ के बीच बदलें: टेक्स्ट को जितनी ऊँचाई चाहिए और सबसे छोटी, पूरी चौड़ाई और पहले वाली।

हर बदलाव के बाद नया साइज़ हैंडल को value के रूप में दें (min, max के साथ, और जहाँ अकेली संख्या बात न कहे वहाँ valueText)। सहायक तकनीक यही पढ़ती है। बिना value का हैंडल एक बटन है: यह रूप वहाँ इस्तेमाल करें जहाँ हैंडल सिर्फ़ जाने हुए साइज़ के बीच बदलता है, और उसे expanded दें।

इस्तेमाल होने तक नहीं दिखता

link

हैंडल शांत रहता है: रुका हुआ हो तो कुछ नहीं बनता, ताकि वह चीज़ दिखे जिस पर वह लगा है, उसके औज़ार नहीं। वह तब दिखता है जब माउस उसके ऊपर हो, जब कीबोर्ड फ़ोकस उस तक पहुँचे, और जब तक उसे दबाया या खींचा जा रहा हो। उसके ऊपर पॉइंटर साइज़ बदलने वाला कर्सर भी ले लेता है। टच स्क्रीन पर, जहाँ होवर नहीं होता, वह हमेशा बनता है।

जहाँ हैंडल को ढूँढ़ने के लिए उसका दिखना ज़रूरी है, वहाँ revealed लगाएँ: शीट का ग्रिप, जो बताता है कि शीट खींची जा सकती है। अगर आप चाहते हैं कि पॉइंटर उस चीज़ पर हो जिस पर हैंडल लगा है तब हैंडल दिखे (कोई फ़ील्ड जो पॉइंटर आने पर अपने कोने का हैंडल दिखाए), तो उस समय भी इसे लगाएँ।

कहाँ रखें

link

हैंडल सिर्फ़ अपने बॉक्स की जगह लेता है: उसे किनारे या कोने पर आप रखते हैं। लाइन को किनारे के बीच में रखें। चाप को कोने में रखें, और उस कोने का रेडियस arc.radius और inset का जोड़ रखें, ताकि चाप और कोने का केंद्र एक हो।

करें

link

• हर हैंडल को ऐसा label दें जो बताए कि वह किसका साइज़ बदलता है: “नोट्स का साइज़ बदलें”, “प्रीव्यू का साइज़ बदलें”।
• हर बदलाव के बाद साइज़ value के रूप में लौटाएँ, valueText अपनी इकाई में।
• activate का जवाब ऐसे साइज़ से दें जिसके लिए खींचना ज़रूरी न हो।
• बदला हुआ साइज़ तब तक रखें जब तक व्यक्ति उसे फिर न बदले।

न करें

link

• किसी चीज़ को दूसरी जगह ले जाने के लिए हैंडल का इस्तेमाल न करें।
• किसी चीज़ को इतना छोटा न करें कि उसकी सामग्री इस्तेमाल न हो सके, और पेज को इतना चौड़ा न करें कि उसे आड़ा स्क्रोल करना पड़े।
• हैंडल को उस टेक्स्ट पर न रखें जिसे व्यक्ति पढ़ रहा है; वह किनारे का निशान है।

सुलभता

link

रोल

separator (focusable, with a value) while value is set; button while value is null

लेबलिंग

Named by label, which says what it resizes, in the product's words; required. A handle with a value is a focusable separator with its value, least and greatest value and value text; a handle without one is a button, with the expanded state where its owner gives one. The line is hidden.

न्यूनतम टार्गेट

दिखने वाला आकार छोटा होने पर भी हिट एरिया न्यूनतम टार्गेट साइज़ को पूरा करता है। minimum 32px · pointer 44px · spacing 8px · touch 48px

कीबोर्ड

कुंजियाँ	क्रिया
Tab	Moves focus to the handle; it is one stop, also while it is out of sight, and comes into sight with its focus ring.
Arrow keys of its axis	Ask the owner for one step along the axis (step, amount one). Shift asks for a large step.
Page Up / Page Down	Ask for a large step along the block axis (the inline axis for a handle that changes a width).
Home / End	Ask for the owner's least and greatest size (step, amount limit), as a window splitter does.
Enter / Space	Activates the handle (activate): the owner switches between the sizes it knows.

टिप्पणियाँ

• Window splitter pattern (WAI-ARIA Authoring Practices): a focusable separator with aria-valuenow, aria-valuemin and aria-valuemax, arrow keys of its orientation, Enter to collapse and restore, Home and End to the least and greatest size. The handle emits the request and its owner keeps the value, so a sheet, a field and a frame each say what a step is.
• Dragging movements (WCAG 2.5.7): every owner gives a size reachable without a drag through activate (HDL-7) — a field's height its text needs, a sheet's other height, a frame's whole width.
• A handle changes a size, never a place. A reorder handle (the list's six dots, a button that opens a move menu) is another control with other keys; the two are told apart by shape: a line is a size, dots are a place.
• Out of sight until used (HDL-23 to HDL-25). Focus visible (WCAG 2.4.7) and focus not obscured (2.4.11) ask that a keyboard user sees what has focus: the handle comes into sight with its focus ring the moment Tab reaches it. A fine pointer is told it is there by the resize cursor and the line as it comes over it. Nothing is hidden from assistive technology, and the size it offers never depends on finding it by a drag (2.5.7). A touch screen has no hover, so there it is always drawn; an owner that needs it seen at rest everywhere sets revealed (a sheet's grip).

इससे जनरेट किया गया: specs/handle.spec.json, tokens/sys/measure.tokens.json

कंपोनेंट क्या सँभालता है

link

• value हो तो वह फ़ोकस होने वाला सेपरेटर है — ARIA Authoring Practices का विंडो स्प्लिटर — जिसका नाम label है, और जिसमें उसका मान, दायरा, मान का टेक्स्ट और उसकी लाइन की दिशा है। न हो तो वह बटन है, और आप दें तो खुली हुई स्टेट के साथ।
• न दिखते समय भी वह फ़ोकस क्रम का एक स्टॉप है। कीबोर्ड फ़ोकस आते ही वह फ़ोकस रिंग के साथ तुरंत दिखता है, इसलिए कीबोर्ड इस्तेमाल करने वाले को फ़ोकस हमेशा दिखता है।
• उसकी धुरी की ऐरो कुंजियाँ एक कदम माँगती हैं, Shift के साथ ऐरो और Page Up और Page Down बड़ा कदम, Home और End सबसे छोटा और सबसे बड़ा साइज़। Enter और Space उसे एक्टिवेट करते हैं। बाक़ी हर कुंजी आप तक पहुँचती है।
• दबाने से फ़ोकस नहीं जाता और कोई टेक्स्ट नहीं चुना जाता, इसलिए हैंडल खींचते समय फ़ील्ड का कैरेट बना रहता है। खींचना विंडो के किनारे से आगे भी पॉइंटर के साथ चलता है।
• बिना खींचे दबाने पर वह एक्टिवेट होता है, इसलिए आपका दिया हर साइज़ एक क्लिक या टैप से मिल जाता है।
• बड़े टेक्स्ट में भी उसका साइज़ वही रहता है: वह किनारे का निशान है, टेक्स्ट नहीं।
• फ़ोर्स्ड कलर मोड में लाइन बटन के टेक्स्ट का रंग लेती है, पॉइंटर ऊपर हो या दबाया जाए तो हाइलाइट का रंग, और अक्षम हो तो अक्षम टेक्स्ट का रंग।
• दाएँ से बाएँ लेआउट में चाप के आख़िरी कोने बाईं ओर होते हैं, उसका तिरछा कर्सर साथ में मुड़ता है, बायाँ ऐरो आख़िरी किनारे की ओर इशारा करता है, और inline बाईं ओर पॉज़िटिव है।

आपको क्या करना है

link

• label दें। उसके बिना भी हैंडल बनता है और काम करता है, और डीबग बिल्ड इसकी रिपोर्ट करता है।
• value, min, max और valueText को उस इकाई में ताज़ा रखें जिसे लोग जानते हैं।
• activate का जवाब ऐसे साइज़ से दें जिसके लिए खींचना ज़रूरी न हो। जो खींच नहीं सकता, उसके लिए सिर्फ़ खींचना काफ़ी नहीं है।
• खींचने के दौरान, जिस चीज़ का साइज़ बदल रहे हैं उसके किसी iframe को पॉइंटर न लेने दें (pointer-events: none), वरना पॉइंटर उसके ऊपर से गुज़रते ही खींचना रुक जाएगा।
• पक्का करें कि हर उस साइज़ पर सामग्री काम करती है जिसकी आप अनुमति देते हैं।