Visualización de datos

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

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.

Prueba la vista previa con el cursor y el teclado. Comprueba el foco visible y la composición en pantallas estrechas dentro de tu página. Usa el número de ficha o el identificador cuando pidas el componente a tu agente.

Propiedades: accent, fontSize, showLineDiff, focusBlurOnHover

¿Qué frameworks están disponibles?

El catálogo incluye estas versiones: react, vue, svelte, astro, html. La vista previa de esta página utiliza React.

¿Cómo accedo a la implementación?

El código, las versiones y los comandos de instalación están disponibles en el panel superior.

Conecta tu agente

Relacionados

2074Typewriter code blockVisualización de datosUn panel de código de color de sintaxis que revela un breve fragmento, un carácter a la vez, como si se estuviera escribiendo en vivo.

2075Typewriter code panelVisualización de datosUn panel de edición de código que escribe un fragmento carácter por carácter detrás de un símbolo de intercalación parpadeante, con un encabezado de nombre de archivo y un botón de copiar.

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.

2302Auto-Scroll Message ListVisualización de datosUn panel de chat desplazable que se mantiene fijado al mensaje más reciente a menos que el lector se desplace hacia arriba, momento en el que aparece un botón flotante para saltar al último.

1917Avatar Lineup HoverVisualización de datosUna fila de círculos de avatar superpuestos donde, al pasar el cursor sobre uno, se eleva por encima de sus vecinos y se revela una información sobre herramientas con el nombre.

1918Avatar StackVisualización de datosUna fila de avatares circulares superpuestos que separa y levanta el que está debajo del puntero, revelando una información sobre herramientas con el nombre encima.