Divisor

Categoría: Contención
Tokens: comp.divider
Nivel: Base

Descripción general

Web: tanrei-divider; schedule
SwiftUI: TanreiDivider; schedule
Jetpack Compose: TanreiDivider; schedule
Flutter: TanreiDivider; schedule
React Native: Divider; schedule

Generado a partir de docs/status/status.json, specs/divider.spec.json

En una lista y en una barra de herramientas

Bandeja de entrada

Archivo

Papelera

Uso

Los ejemplos de Web y React muestran la especificación actual. SwiftUI, Compose, Flutter y React Native van rezagados: todavía ofrecen la revisión anterior del divisor, que solo dibuja líneas continuas y no admite longitudes ni grosor por divisor, y sus ejemplos muestran esa revisión hasta que se pongan al día.

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

<!-- Se alinea con una lista cuyo texto empieza 72 px hacia dentro. -->
<tanrei-divider inset="start" inset-length="72"></tanrei-divider>

<!-- Una línea de corte sobre un cupón y un salto de sección ligero. -->
<tanrei-divider line-style="dashed" line-cap="round"></tanrei-divider>
<tanrei-divider line-style="wavy" amplitude="4" wavelength="24"></tanrei-divider>

<!-- Una línea más gruesa solo para este divisor: sus puntos, sus trazos y su onda conservan las proporciones. -->
<tanrei-divider thickness="2"></tanrei-divider>
<tanrei-divider line-style="dotted" line-cap="round" thickness="4"></tanrei-divider>

<!-- Los grupos de una barra de herramientas significan algo: expón el divisor como un separador. -->
<div role="toolbar" aria-label="Formato" style="display: flex">
  <tanrei-button variant="text" label="Negrita"><span slot="icon">format_bold</span></tanrei-button>
  <tanrei-divider orientation="vertical" decorative="false"></tanrei-divider>
  <tanrei-button variant="text" label="Insertar enlace"><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
}

// El eje se indica de forma explícita, no se toma de la pila que lo contiene.
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()
}

// Un divisor vertical ocupa la altura de la fila, así que dale una a la fila.
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 da a un divisor vertical la altura de la fila.
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="Negrita" onPress={toggleBold}>format_bold</IconButton>
  <Divider orientation="vertical" decorative={false} />
  <IconButton accessibilityLabel="Insertar enlace" onPress={insertLink}>link</IconButton>
</View>

Especificaciones

Orientaciones y márgenes interiores

Estilos de línea

Grosor: el propio de un divisor, con extremos redondeados en los patrones más gruesos

Una línea de puntos o de trazos siempre tiene un punto o un trazo entero en ambos extremos: el divisor dibuja tantos como quepan con al menos la separación entre ellos, y ensancha todas las separaciones en la misma medida. Se ve igual en los dos extremos, en cualquiera de las dos direcciones y con cualquier longitud. Una onda está hecha de arcos de circunferencia, estirados hasta formar un número entero de ondas para que empiece y termine en la línea media. Un divisor ondulado es más alto que los demás: el doble de la amplitud más el grosor de la línea, 5 de forma predeterminada en lugar de 1.

Las longitudes de los puntos, de los trazos y de la onda son tokens derivados del grosor de la línea, de modo que un sistema de diseño que dibuja divisores más gruesos obtiene un patrón mayor con el mismo aspecto. thickness hace lo mismo para un solo divisor: ocupa el lugar del token dondequiera que se lea el grosor, y los puntos, los trazos y la onda conservan sus proporciones respecto a él. El margen interior no se escala. Las propiedades por divisor (insetLength, thickness, dashLength, gap, amplitude, wavelength) se usan tal como se dan, en la unidad de la plataforma, y ningún dial las escala. Un valor negativo o no finito, o un thickness, un dashLength o un wavelength de 0, recurre al token y se notifica en las compilaciones de depuración. Una propiedad que el estilo actual no dibuja se ignora.

Anatomía

Dibujado sobre el fixture horizontal, tal como lo dibuja el paquete web.

Parte	Descripción
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.

Propiedades

Propiedad	Tipo	Valor predeterminado	Descripción
`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.

Estados

Comportamiento

Requisitos en formato EARS. Cada implementación de plataforma se prueba contra estos identificadores. El texto de los requisitos se muestra tal como está en la especificación, en inglés.

ID	Requisito
`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.

Correspondencia de nombres por plataforma

Paridad no significa API idénticas. Cada plataforma expresa el mismo contrato con su propio estilo.

Especificación	Web	SwiftUI	Jetpack Compose	Flutter	React Native
Componente	`tanrei-divider`	`TanreiDivider`	`TanreiDivider`	`TanreiDivider`	`Divider`
`orientation` · Propiedad	`orientation`	`axis`	`orientation`	`axis`	`orientation`
`inset` · Propiedad	`inset`	`inset`	`inset`	`inset`	`inset`
`insetLength` · Propiedad	`insetLength`	`insetLength`	`insetLength`	`insetLength`	`insetLength`
`thickness` · Propiedad	`thickness`	`thickness`	`thickness`	`thickness`	`thickness`
`lineStyle` · Propiedad	`lineStyle`	`lineStyle`	`lineStyle`	`lineStyle`	`lineStyle`
`lineCap` · Propiedad	`lineCap`	`lineCap`	`cap`	`strokeCap`	`lineCap`
`dashLength` · Propiedad	`dashLength`	`dashLength`	`dashLength`	`dashLength`	`dashLength`
`gap` · Propiedad	`gap`	`gap`	`gap`	`gap`	`gap`
`amplitude` · Propiedad	`amplitude`	`amplitude`	`amplitude`	`amplitude`	`amplitude`
`wavelength` · Propiedad	`wavelength`	`wavelength`	`wavelength`	`wavelength`	`wavelength`
`decorative` · Propiedad	`decorative`	`isDecorative`	`decorative`	`excludeFromSemantics`	`decorative`
Notas	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.

Tokens

Token	Alias de	Valor resuelto (claro)
`--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

Fixtures

Representaciones canónicas. Todas las plataformas capturan cada fixture con el mismo identificador para poder comparar los resultados.

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

Generado a partir de specs/divider.spec.json, tokens/comp/divider.tokens.json, design/tokens/

Pautas

Cuándo usarlo

Usa un divisor donde el espacio por sí solo no deja claro un límite: entre las filas de una lista densa, entre las secciones de una página de configuración, entre grupos de acciones de una barra de herramientas. Donde la separación entre dos grupos, o un cambio de superficie, ya muestra dónde termina uno, omite la línea. Un diseño con menos líneas se recorre con la vista más fácilmente.

Una sola línea fina

La línea del divisor es la línea fina del sistema de diseño: sys.color.outline-variant, con el ancho de la línea fina. En el sistema predeterminado, las demás líneas delgadas que ve una persona son de ese mismo color: el borde de un botón outlined, el contorno de un chip, la línea entre los grupos de un menú, el borde de una barra de navegación o de un panel de navegación, la línea bajo una fila de lista. Conservan sus propios tokens, y el sistema predeterminado les da un único valor, para que una pantalla tenga un solo tipo de línea. Un divisor que coloques tú no necesita un color propio para coincidir con ellas.

Dónde un componente separa sus propias partes

Algunos componentes separan sus propias partes, y ahí no añades un divisor:

Un menú separa un grupo de lo que tiene al lado.
Un grupo de botones conectado y un botón con menú separan sus mitades.
Un panel de navegación dibuja un divisor antes de una sección que lo pide (divider).
Una fila de lista dibuja la línea bajo sí misma (divider), empezando donde empieza su texto.

Cómo se distinguen las partes dentro de un componente es una única elección para todo el sistema de diseño: con una línea donde se tocan, que es lo predeterminado, o con una separación de espacio vacío. Un componente puede apartarse de la elección del sistema mediante su propio token, y una instancia mediante su propiedad separation: el menú, el grupo de botones, el botón con menú y el indicador de progreso la tienen. Con una separación, esos componentes no dibujan ninguna línea, así que un divisor añadido a mano sería la única línea que quedaría, y ya no coincidiría.

El componente divisor en sí no forma parte de esa elección. Un <tanrei-divider> que colocas entre tu propio contenido es siempre una línea.

Cómo elegir un margen interior

Margen interior	Úsalo para
Ninguno	Un límite a lo ancho de todo el contenedor: entre secciones, bajo una cabecera.
Inicio	Entre las filas de una lista cuyas filas empiezan con un icono o un avatar. La línea empieza donde empieza el texto, de modo que la columna inicial se lee como una sola.
Ambos	Un corte dentro de un grupo que no debe parecer un límite del contenedor: un divisor intermedio.

Define insetLength solo en un divisor que deba alinearse con un contenido cuyo margen interior difiere del resto de las listas del producto. Se aplica dondequiera que inset aplique el margen interior, y no hace nada mientras inset sea none.

Cómo elegir un estilo de línea

Estilo de línea	Úsalo para
Continua	Casi todos los divisores. Es el valor predeterminado.
De trazos	Un límite de otro tipo dentro del mismo producto: una línea de corte sobre un cupón, el borde de algo provisional.
De puntos	Un corte más ligero que una línea continua. Cubre aproximadamente un tercio de su longitud, así que se ve más tenue con el mismo color.
Ondulada	Un salto de sección que debe leerse como un tipo de límite distinto del de las líneas continuas que lo rodean. Ocupa más espacio en perpendicular a su eje que las demás.

Los extremos redondeados (lineCap="round") convierten cada punto en un disco y cada trazo en una barra redondeada, y redondean los extremos de una línea continua u ondulada. Los extremos redondeados se quedan dentro de la longitud de la línea, de modo que un margen interior sigue siendo exacto. En la línea fina predeterminada, un extremo redondeado no se aprecia: está pensado para un divisor con un thickness propio y para los sistemas de diseño que dibujan líneas más gruesas.

Evita

No dibujes una línea entre cada par de elementos. Usa primero el espaciado, y un divisor donde el espaciado no baste.
No uses un divisor como borde o contorno de un contenedor. No tiene contenedor ni forma.
No lo hagas más grueso ni le des color para darle significado. thickness es para un patrón que necesita espacio para verse, o para una raya que coincida con líneas más gruesas a su alrededor. Al color del divisor no se le exige una relación de contraste, porque el contenido que separa debe entenderse sin él.
No añadas un divisor dentro de un componente que separa sus propias partes, por ejemplo entre los grupos de un menú o las filas de una lista. Usa la propiedad del propio componente.
No pongas un divisor en el borde de una caja que se desplaza para decir que hay más contenido más allá. Un área de desplazamiento marca ese borde, solo mientras hay contenido más allá, con la forma que eligió el sistema de diseño.
No dejes que un estilo de línea transmita un significado por sí solo. Si una línea de trazos significa «corta por aquí», dilo también con texto.
No dependas de él como encabezado. «— o —» entre dos formularios son dos divisores y una etiqueta, y es la etiqueta la que transmite el significado.

Accesibilidad

Rol: separator
Etiquetado: 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.
Objetivo mínimo: El área de pulsación cumple el tamaño mínimo de objetivo aunque el tamaño visual sea menor. minimum 32px · pointer 44px · spacing 8px · touch 48px

Teclado

Teclas	Acción

Notas

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.

Generado a partir de specs/divider.spec.json, tokens/sys/measure.tokens.json

De qué se encarga el componente

Cuando es decorativo (lo predeterminado), queda oculto para la tecnología de apoyo en todas las plataformas.
Cuando no es decorativo, en la web se expone como un separador con su orientación. Las plataformas de Apple, Android y Flutter no tienen rol de separador: ahí se mantiene en el árbol de accesibilidad sin nombre, y dice tanto como cada plataforma permite.
Nunca puede recibir el foco ni recibe entrada, así que nunca estorba a los controles que tiene a cada lado.
Su línea tiene al menos un píxel de dispositivo de grosor. Una línea continua, de puntos o de trazos se alinea con la cuadrícula de píxeles en perpendicular a su eje, así que nunca se ve borrosa; una onda se dibuja con suavizado de bordes.
El estilo de línea no le dice nada a la tecnología de apoyo: un divisor de puntos, de trazos u ondulado que no es decorativo es el mismo separador que uno continuo.
En la web, el modo de colores forzados vuelve a dibujar todos los estilos de línea con el color de texto del sistema.

Qué debes hacer tú

Expresa con texto cualquier significado que le des a un estilo de línea, como una línea de corte. La tecnología de apoyo no transmite el estilo, y una línea de puntos o de trazos se ve más tenue que una continua.
Da a cada grupo su propio nombre cuando la agrupación importe. Un separador no tiene nombre, así que no puede decir cuáles son los grupos.
No uses un divisor para sostener la estructura de una página. De eso se encargan los encabezados y las regiones de referencia (landmarks); una línea solo se ve.

Código fuente e incidencias en GitHub