Todos los componentes (204)

Separador

Superficies · Separator · .amset-separator

Qué es y cuándo usarlo

Raya de separación. Sin texto es un separator a secas; con texto deja de ser una línea y pasa a ser un rótulo entre dos rayas, como el «o» entre dos formas de entrar.

Cuándo usarlo

Para partir bloques dentro de una tarjeta o de un panel cuando el espacio en blanco no basta.
Con texto: el «o» entre dos caminos para lo mismo, o el rótulo de un grupo («Ajustes avanzados»), con align="start".
orientation="vertical" entre piezas de una fila: dentro de un contenedor flex se estira a lo alto.
space ajusta el margen; none para listas apretadas.
Un rótulo largo parte en varias líneas y cada raya se queda con un mínimo, en vez de salirse de la pantalla.

Cuándo no

Entre grupos de una barra de herramientas: BarSeparator, dentro de Toolbar.
La cabecera de una sección: un encabezado de verdad (h2, h3). El texto del separador no es un encabezado y no sale al navegar por ellos.

Teclado: no es enfocable.

Accesibilidad: sin texto es un separator (en horizontal, un <hr>; en vertical, con aria-orientation="vertical"). Con texto deja de serlo: las rayas son decorativas (aria-hidden) y solo se lee el texto.

Aspecto fino: variables CSS --amset-separator-*: -color (por defecto --amset-divider), -thickness, -style (dashed o dotted dan una raya discontinua) y -space, el margen que pone la prop space: --amset-space-2 (sm), -4 (md) o -6 (lg).

Cómo se ve

Arriba

o bien

Abajo

<Separator />
<Separator>o bien</Separator>

Props

Se importa con import { Separator } from '@amset/ui'. Las obligatorias van marcadas.

Prop	Tipo	Para qué sirve
`align`	`"center" \| "start" \| "end"`	Donde va el texto cuando lo hay.
`children`	`ReactNode`	Texto en medio de la linea: "o", "Ajustes avanzados". Sin el, la linea es decorativa y no se anuncia.
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`orientation`	`SeparatorOrientation`	—
`space`	`"sm" \| "md" \| "lg" \| "none"`	Margen alrededor. `none` para separar dentro de una lista apretada.

Acepta además los atributos del elemento que pinta: className, style, data-*, aria-* y sus eventos.

Mandos

Estas variables CSS son la forma de adaptarlo. Se declaran sobre el selector del componente, no en :root: la hoja las redeclara en la propia regla y una declaración en el mismo elemento gana siempre.

Variable	Por defecto
`--amset-separator-color`	`var(--amset-divider)`
`--amset-separator-thickness`	`var(--amset-border-width)`
`--amset-separator-style`	`solid`
`--amset-separator-space`	`var(--amset-space-4)`
`--amset-separator-rule`	`var(--amset-separator-thickness) var(--amset-separator-style) var(--amset-separator-color)`

Cómo se cambia

.amset-separator {
  --amset-separator-color: ...;
  --amset-separator-thickness: ...;
}

En el banco de pruebas

Cada estado y cada variante, para tocarlos de uno en uno, en su ficha de ui.amset.tech: