Visualización de datos

Before/After Code Diff

Before/After Code Diff: Dos paneles de código uno al lado del otro, etiquetados antes y después, con líneas agregadas y eliminadas teñidas y un efecto de enfoque flotante.

currency.tsbefore

export function formatPrice(cents) {  var dollars = cents / 100  var rounded = dollars.toFixed(2)  return '$' + rounded} export function formatList(items) {  return items.map(formatPrice).join(', ')}

currency.tsafter

export function formatPrice(cents: number, currency = "USD") {  const value = cents / 100  return new Intl.NumberFormat("en-US", {    style: "currency",    currency,  }).format(value)} export function formatList(items: number[]) {  return items.map((c) => formatPrice(c)).join(", ")}

Cómo usar Before/After Code Diff

Before/After Code Diff se presenta con el formato de vista previa «ancho» y el tema «oscuro».

Personalizar la vista previa

Estos controles se pasan a la demo. Los valores y límites describen la vista previa; consulta la implementación para conocer todas sus props.

Control	Tipo	Valor inicial	Límites de la vista previa
`accent`	`color`	`#38BDF8`	Los metadatos no indican otro límite.
`fontSize`	`number`	`13`	De 11 a 16; paso 1
`showLineDiff`	`boolean`	`true`	Los metadatos no indican otro límite.
`focusBlurOnHover`	`boolean`	`true`	Los metadatos no indican otro límite.

¿Para qué frameworks está disponible Before/After Code Diff?

Before/After Code Diff está disponible para React, Vue, Svelte, Astro, HTML. La vista previa usa React; las observaciones sobre el código corresponden a index.tsx. Revisa la versión elegida antes de asumir que ofrece las mismas interacciones.

¿Qué dependencias tiene Before/After Code Diff?

Los metadatos de React indican estas dependencias npm además de React: clsx.

¿Qué detalles de accesibilidad se observan en Before/After Code Diff?

El código React de Before/After Code Diff incluye: atributos y manejadores (aria-hidden). Son observaciones del código. Comprueba los nombres accesibles, el orden del foco y el comportamiento del teclado en la página completa.

¿Cómo maneja Before/After Code Diff el movimiento reducido?

El análisis no encontró una consulta directa con useReducedMotion() o matchMedia en el archivo index.tsx de Before/After Code Diff. Revisa la implementación completa, los estilos compartidos y la versión elegida con movimiento reducido activado; estas observaciones no garantizan que se detengan todas las animaciones.

Conecta tu agente

Componentes abiertos relacionados

Imagen fija del componente Animated metric counter de Fieldbook, de la categoría Visualización de datos.

2299Animated metric counterVisualización de datosUn gran número simple que surge desde un valor inicial hasta su objetivo en el momento en que aparece a la vista, sobrepasándose ligeramente antes de estabilizarse, con separadores de miles y un sufijo opcional.

Imagen fija del componente Billing Ledger Table de Fieldbook, de la categoría Visualización de datos.

2304Billing Ledger TableVisualización de datosFiltra estados de facturas, ordena importes y recalcula el total visible del registro.

Imagen fija del componente Concentric goal rings de Fieldbook, de la categoría Visualización de datos.

2128Concentric goal ringsVisualización de datosTres anillos de progreso anidados que se dibujan en secuencia junto a una lectura del valor objetivo y actual de cada objetivo.

Imagen fija del componente Counting number readout de Fieldbook, de la categoría Visualización de datos.

2328Counting number readoutVisualización de datosUna estadística grande que cuenta hasta su valor en una curva de desaceleración, escribiendo el texto directamente en cada fotograma para que el diseño nunca se mueva.

Imagen fija del componente Credit balance ledger de Fieldbook, de la categoría Visualización de datos.

2856Credit balance ledgerVisualización de datosConsulta créditos de cuenta y aplica un importe permitido a una factura actualizando el saldo.

Imagen fija del componente Detail list item de Fieldbook, de la categoría Visualización de datos.

2140Detail list itemVisualización de datosUna fila de lista que combina un icono o avatar principal, un título y una descripción, y una acción final, para listas de notificaciones, menús o filas de configuración.