Todos los componentes (244)

Comparador de textos

Gestión · DiffViewer · .amset-diff

Qué es y cuándo usarlo

Compara dos textos, uno tras otro o lado a lado: línea a línea y, dentro de las líneas cambiadas, palabra a palabra. Sirve para dos versiones de un texto, de un documento o de un JSON.

Cuándo usarlo

Enseñar qué cambió entre dos versiones: una nota, una plantilla, una configuración.
layout="split" pone las dos versiones lado a lado; unified (por defecto) las líneas quitadas y añadidas una tras otra.
format="json" ordena las claves y sangra los dos textos antes de compararlos, para que solo se vea lo que cambia de verdad.
context son las líneas iguales que se dejan a cada lado de un cambio; el resto se pliega en un botón que las abre. null no pliega nada.

Cuándo no

Revisar cambios dentro del editor de texto enriquecido: ya tiene su propia revisión.
Comparar datos estructurados campo a campo: una tabla de dos columnas.

Teclado: la tabla es una región que se desplaza con las flechas cuando no cabe, y los botones de líneas plegadas son botones normales.

Accesibilidad: la tabla tiene nombre (label, obligatorio). Cada línea cambiada lleva un signo y un texto escondido («Línea añadida»), así que el cambio no depende del color. Los recuentos se anuncian como estado.

Aspecto fino: variables --amset-diff-added y --amset-diff-removed (el tono de cada lado) y --amset-diff-line (el interlineado).

Cómo se ve

4 líneas añadidas3 líneas quitadas

1		Línea quitada: Precio: 89 €
	1	Línea añadida: Precio: 95 €
2	2	Material: plata 925
3		Línea quitada: Envío: 3 a 5 días
4		Línea quitada: Garantía: 1 año
	3	Línea añadida: Envío: 24 horas
	4	Línea añadida: Garantía: 2 años
	5	Línea añadida: Grabado incluido

<DiffViewer
  label="Cambios en la ficha del anillo"
  before={antes}
  after={despues}
  beforeLabel="Antes"
  afterLabel="Ahora"
  layout="split"
  summary
/>

Props

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

Prop	Tipo	Para qué sirve
`after`obligatoria	`string`	—
`before`obligatoria	`string`	—
`label`obligatoria	`string`	Que se compara: nombra la tabla para quien usa un lector de pantalla. Obligatorio.
`afterLabel`	`string`	—
`beforeLabel`	`string`	—
`className`	`string`	Se une a las clases de la biblioteca, no las sustituye.
`context`	`number \| null`	Lineas iguales que se dejan a cada lado de un cambio; el resto se pliega. `null` no pliega nada. Por defecto, 3.
`format`	`DiffFormat`	`json` ordena las claves y sangra los dos textos antes de compararlos, para que solo se vea lo que cambia de verdad.
`layout`	`DiffLayout`	`unified` pone las lineas quitadas y las añadidas una tras otra; `split` las pone lado a lado.
`lineNumbers`	`boolean`	Los numeros de linea. Por defecto, si.
`summary`	`boolean`	El recuento de lineas añadidas y quitadas sobre la tabla. Por defecto, si.

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-diff-added`	`var(--amset-success)`
`--amset-diff-removed`	`var(--amset-error)`
`--amset-diff-line`	`1.5`

Cómo se cambia

.amset-diff {
  --amset-diff-added: ...;
  --amset-diff-removed: ...;
}

En el banco de pruebas

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