डिवाइडर

अवलोकन

link

Web

tanrei-divider

schedule

SwiftUI

TanreiDivider

schedule

Jetpack Compose

TanreiDivider

schedule

Flutter

TanreiDivider

schedule

React Native

Divider

schedule

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

लिस्ट में और टूलबार में

इनबॉक्सआर्काइवट्रैश

format_boldformat_italiclink

इस्तेमाल

link

Web और React के उदाहरण मौजूदा स्पेक दिखाते हैं। SwiftUI, Compose, Flutter और React Native पीछे हैं: वे अभी डिवाइडर का पिछला संशोधन देते हैं, जो सिर्फ़ ठोस रेखाएँ बनाता है और किसी एक डिवाइडर के लिए लंबाइयाँ या मोटाई नहीं लेता, और जब तक वे बराबरी पर नहीं आते, उनके उदाहरण वही संशोधन दिखाते हैं।

<tanrei-divider></tanrei-divider>
<tanrei-divider inset="start"></tanrei-divider>

<!-- उस लिस्ट की सीध में, जिसका टेक्स्ट 72 px भीतर से शुरू होता है। -->
<tanrei-divider inset="start" inset-length="72"></tanrei-divider>

<!-- कूपन के ऊपर फाड़ने की रेखा, और एक हल्का सेक्शन ब्रेक। -->
<tanrei-divider line-style="dashed" line-cap="round"></tanrei-divider>
<tanrei-divider line-style="wavy" amplitude="4" wavelength="24"></tanrei-divider>

<!-- सिर्फ़ इस डिवाइडर के लिए मोटी रेखा: इसके बिंदु, डैश और लहर अपना अनुपात बनाए रखते हैं। -->
<tanrei-divider thickness="2"></tanrei-divider>
<tanrei-divider line-style="dotted" line-cap="round" thickness="4"></tanrei-divider>

<!-- टूलबार के ग्रुप का कोई अर्थ है: डिवाइडर को सेपरेटर के रूप में सहायक तकनीक को दें। -->
<div role="toolbar" aria-label="फ़ॉर्मैटिंग" style="display: flex">
  <tanrei-button variant="text" label="बोल्ड"><span slot="icon">format_bold</span></tanrei-button>
  <tanrei-divider orientation="vertical" decorative="false"></tanrei-divider>
  <tanrei-button variant="text" label="लिंक डालें"><span slot="icon">link</span></tanrei-button>
</div>

<script type="module">
  import '@tanrei/web/components/divider';
</script>

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

<Divider />
<Divider inset="start" insetLength={72} />
<Divider lineStyle="dashed" lineCap="round" />
<Divider lineStyle="wavy" amplitude={4} wavelength={24} />
<Divider lineStyle="dotted" lineCap="round" thickness={4} />
<Divider orientation="vertical" decorative={false} />

import Tanrei

VStack(spacing: 0) {
  inboxRow
  TanreiDivider(inset: .start)
  archiveRow
}

// अक्ष बताया जाता है, घेरने वाले स्टैक से नहीं लिया जाता।
HStack { formattingButtons; TanreiDivider(axis: .vertical, isDecorative: false); insertLinkButton }

import androidx.compose.foundation.gestures.Orientation
import io.github.chnotchy.tanrei.components.TanreiDivider
import io.github.chnotchy.tanrei.components.TanreiDividerInset

Column {
    InboxRow()
    TanreiDivider(inset = TanreiDividerInset.Start)
    ArchiveRow()
}

// खड़ा डिवाइडर पंक्ति की ऊँचाई भरता है, इसलिए पंक्ति को ऊँचाई दें।
Row(Modifier.height(IntrinsicSize.Min)) {
    FormattingButtons()
    TanreiDivider(orientation = Orientation.Vertical, decorative = false)
    InsertLinkButton()
}

import 'package:tanrei/tanrei.dart';

Column(
  children: <Widget>[
    inboxRow,
    const TanreiDivider(inset: TanreiDividerInset.start),
    archiveRow,
  ],
);

// IntrinsicHeight खड़े डिवाइडर को पंक्ति की ऊँचाई देता है।
IntrinsicHeight(
  child: Row(
    children: <Widget>[
      ...formattingButtons,
      const TanreiDivider(axis: Axis.vertical, excludeFromSemantics: false),
      insertLinkButton,
    ],
  ),
);

import { Divider, IconButton } from '@tanrei/react-native';

<Divider />
<Divider inset="start" />

<View style={{ flexDirection: 'row' }}>
  <IconButton accessibilityLabel="बोल्ड" onPress={toggleBold}>format_bold</IconButton>
  <Divider orientation="vertical" decorative={false} />
  <IconButton accessibilityLabel="लिंक डालें" onPress={insertLink}>link</IconButton>
</View>

स्पेक

link

ओरिएंटेशन और इनसेट

रेखा की शैलियाँ

मोटाई: किसी एक डिवाइडर की अपनी, मोटे पैटर्न पर गोल कैप के साथ

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

बिंदुओं, डैश और लहर की लंबाइयाँ रेखा की मोटाई से व्युत्पन्न टोकन हैं, इसलिए जो डिज़ाइन सिस्टम मोटे डिवाइडर बनाता है, उसे उसी रूप वाला बड़ा पैटर्न मिलता है। thickness यही काम एक डिवाइडर के लिए करता है: जहाँ भी मोटाई पढ़ी जाती है, वहाँ वह टोकन की जगह लेता है, और बिंदु, डैश और लहर उसके साथ अपना अनुपात बनाए रखते हैं। इनसेट स्केल नहीं होता। किसी एक डिवाइडर की प्रॉपर्टी (insetLength, thickness, dashLength, gap, amplitude, wavelength) जैसी दी गई हैं वैसी ही, प्लैटफ़ॉर्म की इकाई में, इस्तेमाल होती हैं, और कोई डायल उन्हें स्केल नहीं करता। ऋणात्मक या नॉन-फ़ाइनाइट मान, या 0 का thickness, dashLength या wavelength, टोकन पर लौट जाता है और डीबग बिल्ड में रिपोर्ट किया जाता है। मौजूदा शैली जिस प्रॉपर्टी का इस्तेमाल नहीं करती, उसे अनदेखा किया जाता है।

संरचना

संरचना

वेब पैकेज जिस तरह फ़िक्स्चर horizontal बनाता है, उसी के ऊपर बनाया गया।

भाग	विवरण
1 line	The one line, horizontal or vertical: solid, dotted, dashed or wavy. Its thickness is the system's, or the one given for this divider. It is the whole component: there is no container, and no space around it.

प्रॉपर्टी

प्रॉपर्टी	टाइप	डिफ़ॉल्ट	विवरण
orientation	horizontal | vertical	"horizontal"	Horizontal separates stacked content and spans the container's width; vertical separates content in a row and spans its height.
inset	none | start | both	"none"	Shortens the line to align with content: none spans the full length, start leaves the inset at the start (to line up with an inset list's text), both leaves it at both ends (a middle divider).
insetLength	number	null	The length of the inset for this divider, in the platform's unit (CSS px, pt, dp, logical pixels); null takes comp.divider.line.inset. Used only while inset is start or both: set it to line the divider up with content whose inset differs from the rest of the product's lists.
thickness	number	null	How thick this divider's line is, in the platform's unit (CSS px, pt, dp, logical pixels); null takes comp.divider.line.thickness. Set it where one divider of a product carries more weight than the rest (the line under a page's header, a break between two sections of a long form); a product whose every divider is heavier changes the token in its layer instead.
lineStyle	solid | dotted | dashed | wavy	"solid"	How the line is drawn: solid, a row of dots, a row of dashes, or a wave. Most dividers are solid; the others mark a different kind of boundary in the same product (a tear line, the edge of something provisional, a light section break).
lineCap	butt | round	"butt"	How the line's ends, and every dot's and dash's ends, are drawn: butt ends square at the length, round ends in a half-disc inside it (round dots, rounded dashes). The difference shows only on a line thicker than a hairline.
dashLength	number	null	The length of one dash of a dashed line, in the platform's unit; null takes comp.divider.line.dash.length. Ignored by the other styles.
gap	number	null	The least space between two dots of a dotted line or two dashes of a dashed line, in the platform's unit; null takes comp.divider.line.dot.gap or comp.divider.line.dash.gap. Ignored by solid and wavy.
amplitude	number	null	How far a wavy line's crests lie from its midline, in the platform's unit; null takes comp.divider.line.wave.amplitude. Ignored by the other styles.
wavelength	number	null	The length of one wave of a wavy line, a crest and a trough, in the platform's unit; null takes comp.divider.line.wave.wavelength. Ignored by the other styles.
decorative	boolean	true	Hides the divider from assistive technology. Set it to false only when the grouping is meaningful (a toolbar's or a menu's groups): the divider is then exposed as a separator.

स्टेट

व्यवहार

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

ID	आवश्यकता
DIV-1	THE divider SHALL draw one line of comp.divider.line.thickness, or of thickness while that is not null (DIV-16), in comp.divider.line.color, in the style lineStyle names (DIV-9 to DIV-12), along the full inline size of its container when orientation is horizontal, and along the full block size of its container when orientation is vertical.
DIV-2	THE divider SHALL take exactly comp.divider.line.thickness on its cross axis, or, WHERE lineStyle is wavy, twice its amplitude (DIV-12) plus comp.divider.line.thickness, whatever its length; it SHALL add no margin or padding of its own, and the space on either side of the line belongs to the layout that places it.
DIV-3	WHERE inset is start THE divider SHALL shorten the line by insetLength, or by comp.divider.line.inset while insetLength is null, at its start (the inline-start of a horizontal divider, the top of a vertical one), and WHERE inset is both it SHALL shorten the line by that length at each end; the inset stretch SHALL draw nothing, the style of DIV-9 to DIV-12 SHALL be laid out over the stretch that remains, and where the insets leave no length the divider SHALL draw nothing.
DIV-4	WHERE the layout direction is right-to-left THE divider SHALL apply the start inset of a horizontal divider at its right end and SHALL start a horizontal wavy line at its right end, mirroring it; a vertical divider's inset and wave SHALL NOT change with the direction.
DIV-5	WHILE decorative is true THE divider SHALL be hidden from assistive technology and SHALL NOT be focusable.
DIV-6	WHILE decorative is false THE divider SHALL expose the separator role and its orientation to assistive technology, SHALL have no accessible name of its own, and SHALL NOT be focusable.
DIV-7	WHEN orientation, inset, lineStyle or lineCap names a value that the divider does not define THE divider SHALL render with the default value, and in debug builds report the unknown value.
DIV-8	THE divider SHALL draw its line at least one device pixel thick; WHERE lineStyle is solid, dotted or dashed it SHALL align the line's two edges across its axis to the device pixel grid, so that the line is never spread over two partial rows or columns of pixels, and WHERE lineStyle is wavy it SHALL draw the curve antialiased.
DIV-9	WHERE lineStyle is solid THE divider SHALL draw the line as one unbroken stroke over the whole drawn stretch.
DIV-10	WHERE lineStyle is dotted THE divider SHALL draw a row of dots, each comp.divider.line.thickness long and comp.divider.line.thickness across, separated by at least gap, or comp.divider.line.dot.gap while gap is null; it SHALL draw as many dots as fit the drawn stretch with that gap between them, the first at the stretch's start and the last at its end, and SHALL widen every gap by the same amount to make them meet those ends; WHERE only one dot fits it SHALL draw that dot at the stretch's center.
DIV-11	WHERE lineStyle is dashed THE divider SHALL draw a row of dashes, each dashLength long (comp.divider.line.dash.length while dashLength is null, and never shorter than comp.divider.line.thickness) and comp.divider.line.thickness across, separated by at least gap, or comp.divider.line.dash.gap while gap is null; it SHALL draw as many dashes as fit the drawn stretch with that gap between them, the first at the stretch's start and the last at its end, and SHALL widen every gap by the same amount to make them meet those ends; WHERE only one dash fits it SHALL draw one dash, no longer than the stretch, at the stretch's center.
DIV-12	WHERE lineStyle is wavy THE divider SHALL stroke a wave about the midline of its cross axis at comp.divider.line.thickness, made of circular arcs that each span half a wavelength and alternate from one side of the midline to the other, meeting on the midline without a corner; the wavelength is wavelength, or comp.divider.line.wave.wavelength while wavelength is null, stretched or shrunk so that a whole number of waves (at least one, the nearest number) fills the drawn stretch; each arc's crest SHALL lie amplitude, or comp.divider.line.wave.amplitude while amplitude is null, from the midline to the stroke's center, but never more than a quarter of the stretched wavelength (a half circle); the wave SHALL start and end on the midline, and its first arc SHALL rise toward the top of a horizontal divider and toward the left of a vertical one.
DIV-13	WHERE lineCap is round THE divider SHALL end the solid line, every dot, every dash and the wave in half-discs of diameter comp.divider.line.thickness that lie inside the lengths DIV-9 to DIV-12 give them, so that a dot is a disc and no rounded end reaches into an inset or past the container; the wave's rounded ends SHALL be drawn at its first and last points, laid out over the drawn stretch shortened by half comp.divider.line.thickness at each end. WHERE lineCap is butt every end SHALL be square and flush with those lengths.
DIV-14	WHEN thickness, insetLength, dashLength, gap, amplitude or wavelength is null THE divider SHALL use the token that prop names; IF one of them is not a finite number, or is negative, or thickness, dashLength or wavelength is 0, THE divider SHALL use that token instead and in debug builds report the value; a value it uses SHALL be used as given, in the platform's unit, and not scaled by any dial; a prop the current lineStyle does not draw SHALL be ignored and not reported.
DIV-15	THE divider 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 divider is shown THE divider SHALL draw itself for the new direction at once, without a motion of its own, keeping what it shows and its state.
DIV-16	WHILE thickness is not null THE divider SHALL use it wherever DIV-1, DIV-2 and DIV-10 to DIV-13 name comp.divider.line.thickness — the line's extent across its axis, the side of a dot, the width of a dash and its least length, the wave's stroke, the diameter of a round cap and the divider's own size across its axis — and SHALL scale each pattern length it takes from a token rather than from a prop (comp.divider.line.dot.gap, comp.divider.line.dash.length, comp.divider.line.dash.gap, comp.divider.line.wave.amplitude and comp.divider.line.wave.wavelength) by thickness divided by comp.divider.line.thickness, so that a thicker divider keeps the pattern's proportions, as a layer that thickens the line keeps them; a pattern length given by a prop SHALL be used as given. DIV-8 holds for it: a thickness below one device pixel is drawn one device pixel thick. The thickness changes nothing that assistive technology is told, and comp.divider.line.inset and insetLength are not scaled.

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

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

स्पेक	Web	SwiftUI	Jetpack Compose	Flutter	React Native
कंपोनेंट	tanrei-divider	TanreiDivider	TanreiDivider	TanreiDivider	Divider
orientation · प्रॉपर्टी	orientation	axis	orientation	axis	orientation
inset · प्रॉपर्टी	inset	inset	inset	inset	inset
insetLength · प्रॉपर्टी	insetLength	insetLength	insetLength	insetLength	insetLength
thickness · प्रॉपर्टी	thickness	thickness	thickness	thickness	thickness
lineStyle · प्रॉपर्टी	lineStyle	lineStyle	lineStyle	lineStyle	lineStyle
lineCap · प्रॉपर्टी	lineCap	lineCap	cap	strokeCap	lineCap
dashLength · प्रॉपर्टी	dashLength	dashLength	dashLength	dashLength	dashLength
gap · प्रॉपर्टी	gap	gap	gap	gap	gap
amplitude · प्रॉपर्टी	amplitude	amplitude	amplitude	amplitude	amplitude
wavelength · प्रॉपर्टी	wavelength	wavelength	wavelength	wavelength	wavelength
decorative · प्रॉपर्टी	decorative	isDecorative	decorative	excludeFromSemantics	decorative
टिप्पणियाँ	Not an <hr>: an hr is horizontal only and always a separator. The host takes role="separator" and aria-orientation when decorative is false (set to false by decorative="false" or the property), and aria-hidden="true" otherwise. Attributes are line-style, line-cap, inset-length, dash-length, gap, amplitude and wavelength; the lengths are numbers of CSS px. A solid line stays a border (DIV-8). A dotted or dashed line is not border-style: dotted | dashed, whose dash lengths and spacing each engine chooses and which has no round cap: it is drawn from the tokens (for example a mask repeated with mask-repeat: space over a box one gap longer than the line, which places whole dashes at both ends and widens the gaps as DIV-10 and DIV-11 say). A wavy line cannot be a border at all: it is an SVG path of arcs in the shadow root, measured on resize (DIV-12). In forced-colors mode every style is drawn in the system's text color, as the border is.	SwiftUI's own Divider takes its axis from the enclosing stack; TanreiDivider(axis: .horizontal) states it (default .horizontal) so a divider looks the same wherever it is placed and its snapshot is deterministic. isDecorative: false adds the separator semantics SwiftUI's Divider does not have. Ships the previous revision (solid only). Owes DIV-1 to DIV-4, DIV-7 and DIV-8 as revised, and DIV-9 to DIV-14: lineStyle, lineCap: CGLineCap (.butt, .round) and the lengths as CGFloat?, drawn as a Path stroked with StrokeStyle(lineWidth:lineCap:dash:) (arcs with addArc).	One composable with orientation: Orientation (foundation's Orientation.Horizontal / .Vertical, as Modifier.scrollable takes it) instead of Material's two composables HorizontalDivider and VerticalDivider. Ships the previous revision (solid only). Owes DIV-1 to DIV-4, DIV-7 and DIV-8 as revised, and DIV-9 to DIV-14: lineStyle, cap: StrokeCap (StrokeCap.Butt, StrokeCap.Round, as Stroke names it) and the lengths as Dp?, drawn on a Canvas with PathEffect.dashPathEffect for dots and dashes and Path.arcTo for the wave.	One widget with axis: Axis instead of Flutter's Divider and VerticalDivider. inset is an enum resolved from comp.divider.line.inset, not Flutter's indent / endIndent lengths; insetLength replaces that length for one divider at both ends it applies to. excludeFromSemantics (as Image and GestureDetector name it) has the same polarity as decorative and defaults to true. Ships the previous revision (solid only). Owes DIV-1 to DIV-4, DIV-7 and DIV-8 as revised, and DIV-9 to DIV-14: lineStyle, strokeCap: StrokeCap (StrokeCap.butt, StrokeCap.round, as Paint names it) and the lengths as double?, drawn by a CustomPainter; dart:ui has no dash effect, so each dot and dash is its own segment, and the wave is Path.arcToPoint.	Decorative: accessible={false} and importantForAccessibility="no-hide-descendants". Not decorative: role="separator"; how far iOS and Android announce it (neither has a native separator trait) is for the package's README to state. Ships the previous revision (solid only). Owes DIV-1 to DIV-4, DIV-7 and DIV-8 as revised, and DIV-9 to DIV-14, drawn with views only (the package takes no SVG): not borderStyle: 'dotted' | 'dashed', whose spacing is the OS's and which has no length or cap; each dot and dash is a view (a round cap is its corner radius), and the wave is the package's Arc primitive, one arc per half wave, which is why DIV-12 builds the wave from circular arcs.

टोकन

टोकन	किसका एलियास	रिज़ॉल्व किया गया मान (लाइट)
--tanrei-comp-divider-line-color	sys.color.outline-variant	#000000 · 8%
--tanrei-comp-divider-line-dash-gap	—	4px
--tanrei-comp-divider-line-dash-length	—	4px
--tanrei-comp-divider-line-dot-gap	—	2px
--tanrei-comp-divider-line-inset	sys.space.space200	16px
--tanrei-comp-divider-line-thickness	sys.border.hairline	1px
--tanrei-comp-divider-line-wave-amplitude	—	2px
--tanrei-comp-divider-line-wave-wavelength	—	16px

फ़िक्स्चर

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

horizontal

{}

horizontal-inset-start

inset: start

horizontal-inset-both

inset: both

horizontal-inset-start-length

inset: start insetLength: 72

vertical

orientation: vertical

vertical-inset-start

orientation: vertical inset: start

vertical-inset-both

orientation: vertical inset: both

horizontal-separator

decorative: false

horizontal-dotted

lineStyle: dotted

horizontal-dotted-round

lineStyle: dotted lineCap: round

horizontal-dashed

lineStyle: dashed

horizontal-dashed-round

lineStyle: dashed lineCap: round

horizontal-dashed-custom

lineStyle: dashed dashLength: 12 gap: 6

horizontal-inset-both-dashed

inset: both lineStyle: dashed

horizontal-wavy

lineStyle: wavy

horizontal-wavy-custom

lineStyle: wavy amplitude: 4 wavelength: 24

vertical-dotted

orientation: vertical lineStyle: dotted

vertical-wavy

orientation: vertical lineStyle: wavy

horizontal-thick

thickness: 2

vertical-thick

orientation: vertical thickness: 2

horizontal-dotted-round-thick

thickness: 4 lineStyle: dotted lineCap: round

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

दिशानिर्देश

link

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

link

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

एक ही बारीक रेखा

link

डिवाइडर की रेखा डिज़ाइन सिस्टम की बारीक रेखा है: sys.color.outline-variant, बारीक रेखा की चौड़ाई पर। डिफ़ॉल्ट सिस्टम में व्यक्ति को दिखने वाली बाक़ी पतली रेखाएँ भी उसी रंग की हैं: outlined बटन का किनारा, चिप की आउटलाइन, मेन्यू के ग्रुप के बीच की रेखा, नेविगेशन बार या नेविगेशन ड्रॉअर का किनारा, लिस्ट की पंक्ति के नीचे की रेखा। वे अपने-अपने टोकन रखती हैं, और डिफ़ॉल्ट सिस्टम उन्हें एक ही मान देता है, ताकि स्क्रीन पर एक ही तरह की रेखा हो। आप जो डिवाइडर रखते हैं, उसे उनसे मेल खाने के लिए अपने किसी रंग की ज़रूरत नहीं है।

जहाँ कंपोनेंट अपने भाग ख़ुद अलग करता है

link

कुछ कंपोनेंट अपने भागों को ख़ुद अलग करते हैं, और वहाँ आप डिवाइडर नहीं जोड़ते:

• मेन्यू किसी ग्रुप को उसके बग़ल की चीज़ से अलग करता है।
• कनेक्टेड बटन ग्रुप और मेन्यू वाला बटन अपने दोनों हिस्सों को अलग करते हैं।
• नेविगेशन ड्रॉअर उस सेक्शन से पहले डिवाइडर बनाता है जो उसे माँगता है (divider)।
• लिस्ट की पंक्ति अपने नीचे की रेखा ख़ुद बनाती है (divider), वहाँ से शुरू करके जहाँ उसका टेक्स्ट शुरू होता है।

एक कंपोनेंट के भीतर के भाग कैसे अलग पहचाने जाएँ, यह पूरे डिज़ाइन सिस्टम के लिए एक ही चुनाव है: जहाँ वे छूते हैं वहाँ एक रेखा से, जो डिफ़ॉल्ट है, या ख़ाली जगह के गैप से। कंपोनेंट अपने टोकन के ज़रिए सिस्टम के चुनाव से हट सकता है, और कोई एक इंस्टेंस अपनी separation प्रॉपर्टी के ज़रिए: मेन्यू, बटन ग्रुप, मेन्यू वाले बटन और प्रोग्रेस इंडिकेटर के पास यह प्रॉपर्टी है। गैप में वे कंपोनेंट कोई रेखा नहीं बनाते, इसलिए आपने हाथ से जो डिवाइडर जोड़ा होगा, वही अकेली बची रेखा होगी, और अब मेल नहीं खाएगी।

डिवाइडर कंपोनेंट ख़ुद उस चुनाव का हिस्सा नहीं है। अपने कॉन्टेंट के बीच आप जो <tanrei-divider> रखते हैं, वह हमेशा एक रेखा होता है।

इनसेट चुनना

link

इनसेट	किसके लिए
कोई नहीं	पूरे कंटेनर के आर-पार की सीमा: सेक्शन के बीच, हेडर के नीचे।
Start	उस लिस्ट की पंक्तियों के बीच, जिसकी पंक्तियाँ आइकन या अवतार से शुरू होती हैं। रेखा वहीं से शुरू होती है जहाँ से टेक्स्ट, इसलिए शुरुआती कॉलम एक ही कॉलम जैसा दिखता है।
Both	ग्रुप के भीतर का ऐसा ब्रेक जो कंटेनर की सीमा जैसा नहीं दिखना चाहिए: बीच का डिवाइडर।

insetLength सिर्फ़ उस डिवाइडर पर सेट करें जिसे ऐसे कॉन्टेंट की सीध में आना है जिसका इनसेट प्रॉडक्ट की बाक़ी लिस्ट से अलग है। यह वहीं लागू होता है जहाँ inset इनसेट लगाता है, और जब तक inset none है, कुछ नहीं करता।

रेखा की शैली चुनना

link

रेखा की शैली	किसके लिए
Solid	लगभग हर डिवाइडर। यही डिफ़ॉल्ट है।
Dashed	उसी प्रॉडक्ट में अलग तरह की सीमा: कूपन के ऊपर फाड़ने की रेखा, किसी अस्थायी चीज़ का किनारा।
Dotted	ठोस रेखा से हल्का ब्रेक। यह अपनी लंबाई का लगभग एक तिहाई ढकती है, इसलिए उसी रंग में ज़्यादा हल्की दिखती है।
Wavy	ऐसा सेक्शन ब्रेक जो अपने आसपास की ठोस रेखाओं से अलग तरह की सीमा जैसा दिखना चाहिए। यह अपने अक्ष के आर-पार बाक़ी से ज़्यादा जगह लेती है।

गोल कैप (lineCap="round") हर बिंदु को एक डिस्क और हर डैश को गोल सिरों वाली पट्टी बना देते हैं, और ठोस या लहरदार रेखा के सिरों को गोल कर देते हैं। गोल सिरे रेखा की लंबाई के भीतर रहते हैं, इसलिए इनसेट सटीक रहता है। डिफ़ॉल्ट बारीक रेखा पर गोल कैप दिखता ही नहीं: वह अपने thickness वाले डिवाइडर के लिए है, और उन डिज़ाइन सिस्टम के लिए जो मोटी रेखाएँ बनाते हैं।

करें

link

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

न करें

link

• हर दो एलिमेंट के बीच रेखा न खींचें। पहले स्पेसिंग इस्तेमाल करें, और डिवाइडर वहाँ जहाँ स्पेसिंग काफ़ी न हो।
• डिवाइडर को किसी कंटेनर के बॉर्डर या आउटलाइन के रूप में इस्तेमाल न करें। उसका न कोई कंटेनर है, न कोई शेप।
• उसे कोई अर्थ देने के लिए मोटा या रंगीन न बनाएँ। thickness उस पैटर्न के लिए है जिसे दिखने के लिए जगह चाहिए, या उस रेखा के लिए जो अपने आसपास की मोटी रेखाओं से मेल खाए। डिवाइडर के रंग पर कोई कंट्रास्ट अनुपात लागू नहीं होता, क्योंकि जिस कॉन्टेंट को वह अलग करता है, वह उसके बिना भी समझ आना चाहिए।
• जो कंपोनेंट अपने भाग ख़ुद अलग करता है, उसके भीतर डिवाइडर न जोड़ें, जैसे मेन्यू के ग्रुप के बीच या लिस्ट की पंक्तियों के बीच। कंपोनेंट की अपनी प्रॉपर्टी इस्तेमाल करें।
• स्क्रॉल होने वाले बॉक्स के किनारे पर यह बताने के लिए डिवाइडर न रखें कि आगे और कॉन्टेंट है। वह किनारा स्क्रॉल एरिया दिखाता है — सिर्फ़ तब तक जब तक उसके आगे कॉन्टेंट हो, और उस रूप में जो डिज़ाइन सिस्टम ने चुना है।
• रेखा की शैली को अकेले कोई अर्थ न ढोने दें। अगर डैश वाली रेखा का मतलब “यहाँ से काटें” है, तो यह टेक्स्ट में भी कहें।
• हेडिंग के लिए इस पर निर्भर न रहें। दो फ़ॉर्म के बीच “— या —” दो डिवाइडर और एक लेबल है, और अर्थ लेबल बताता है।

सुलभता

link

रोल

separator

लेबलिंग

A divider has no accessible name. Decorative (the default), it is not in the accessibility tree; otherwise it is a separator whose orientation is exposed, and the groups on either side carry their own names.

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

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

कीबोर्ड

कुंजियाँ	क्रिया

टिप्पणियाँ

• Not interactive: a divider has no hit area, so the minimum target holds without extending anything. It never receives focus, even when it is exposed as a separator (a focusable separator is a splitter, which is a different component).
• The line is decorative for contrast purposes: comp.divider.line.color is not held to 3:1, because the content it separates must be understandable without it. A dotted or dashed line covers less of its length and reads fainter than a solid one in the same color; that is accepted for the same reason. In the default system the line is sys.color.outline-variant, the one hairline color every line of the system shares, between 1.19:1 and 3.83:1 against the surface roles depending on the scheme: visible, and never the only thing that tells two groups apart.
• The line's style carries nothing to assistive technology: a dotted, dashed or wavy divider that is not decorative is the same separator as a solid one. A product that gives a style a meaning (a tear line, a provisional section) states that meaning in text.
• Text size does not change the line: it is not text.

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

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

link

• सजावटी (डिफ़ॉल्ट) होने पर यह हर प्लैटफ़ॉर्म पर सहायक तकनीक से छिपा रहता है।
• सजावटी न होने पर वेब पर यह सहायक तकनीक को अपने ओरिएंटेशन के साथ सेपरेटर के रूप में मिलता है। Apple के प्लैटफ़ॉर्म, Android और Flutter में सेपरेटर का रोल नहीं है: वहाँ यह बिना नाम के एक्सेसिबिलिटी ट्री में रखा जाता है, और उतना बताता है जितना हर प्लैटफ़ॉर्म बता सकता है।
• इस पर कभी फ़ोकस नहीं जा सकता और यह कोई इनपुट नहीं लेता, इसलिए यह अपने दोनों ओर के कंट्रोल के रास्ते में कभी नहीं आता।
• इसकी रेखा कम से कम एक डिवाइस पिक्सल मोटी होती है। ठोस, बिंदुदार या डैश वाली रेखा अपने अक्ष के आर-पार पिक्सल ग्रिड की सीध में रखी जाती है, इसलिए वह कभी धुँधली नहीं होती; लहर ऐंटीएलियास करके बनाई जाती है।
• रेखा की शैली सहायक तकनीक को कुछ नहीं बताती: जो बिंदुदार, डैश वाला या लहरदार डिवाइडर सजावटी नहीं है, वह वैसा ही सेपरेटर है जैसा ठोस।
• वेब पर फ़ोर्स्ड कलर्स मोड हर रेखा शैली को सिस्टम के टेक्स्ट रंग में दोबारा बनाता है।

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

link

• रेखा की शैली को आप जो भी अर्थ देते हैं, जैसे फाड़ने की रेखा, उसे टेक्स्ट में बताएँ। सहायक तकनीक शैली नहीं बताती, और बिंदुदार या डैश वाली रेखा ठोस रेखा से हल्की दिखती है।
• जब ग्रुप बनाना मायने रखता हो, तो हर ग्रुप को उसका अपना नाम दें। सेपरेटर का कोई नाम नहीं होता, इसलिए वह नहीं बता सकता कि ग्रुप क्या हैं।
• पेज की संरचना बताने के लिए डिवाइडर का इस्तेमाल न करें। यह काम हेडिंग और लैंडमार्क करते हैं; रेखा सिर्फ़ दिखती है।