Ir al contenido principal
Frutjam logo Frutjam
v2.2.2
Theme

Componente diferencial

Última actualización:

Visor de diferencias CSS Tailwind solo para CSS para comparar contenido uno al lado del otro con un divisor que se puede arrastrar. No se requiere JavaScript. Accesible a WCAG AA, funciona con Django, HTMX, Laravel, React y cualquier pila.

Los componentes Diff muestran diferencias entre dos versiones de contenido, ideales para mostrar cambios de código, revisiones de documentos o vistas comparativas. Construidas con HTML semántico y estilos codificados por colores, las diferencias ayudan a los usuarios a comprender qué cambió. El sistema de diferencias de Frutjam admite múltiples tipos y estilos, perfecto para interfaces de control de versiones, historial de revisiones y seguimiento de cambios.

Solo CSS, no se requiere JavaScript. WCAG AA accesible e independiente del marco: funciona con Django, HTMX, Laravel, React y cualquier pila.

Clase Tipo Descripción
diffBaseContenedor de comparación lado a lado con un divisor arrastrable
diff-item-1ModificadorPanel izquierdo (antes) de la comparación
diff-item-2ModificadorPanel derecho (después) de la comparación
diff-resizerModificadorControlador arrastrable para cambiar el tamaño de los dos paneles

Uso básico

Cree una diferencia simple en paralelo con los estados antes y después.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<figure class="diff aspect-video" tabindex="0" aria-label="Before and after comparison">
  <div class="diff-item-1" aria-label="Before">
    <div class="bg-base-100 grid place-items-center text-4xl font-bold">
      Before
    </div>
  </div>
  <div class="diff-item-2" aria-label="After">
    <div class="bg-base-200 grid place-items-center text-4xl font-bold">
      After
    </div>
  </div>
  <div class="diff-resizer" role="slider" aria-label="Comparison slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
</figure>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<figure className="diff aspect-video" tabindex="0" aria-label="Before and after comparison">
  <div className="diff-item-1" aria-label="Before">
    <div className="bg-base-100 grid place-items-center text-4xl font-bold">
      Before
    </div>
  </div>
  <div className="diff-item-2" aria-label="After">
    <div className="bg-base-200 grid place-items-center text-4xl font-bold">
      After
    </div>
  </div>
  <div className="diff-resizer" role="slider" aria-label="Comparison slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
</figure>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
<figure class="diff aspect-video" tabindex="0" aria-label="Before and after comparison">
  <div class="diff-item-1" aria-label="Before">
    <div class="bg-base-100 grid place-items-center text-4xl font-bold">
      Before
    </div>
  </div>
  <div class="diff-item-2" aria-label="After">
    <div class="bg-base-200 grid place-items-center text-4xl font-bold">
      After
    </div>
  </div>
  <div class="diff-resizer" role="slider" aria-label="Comparison slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
</figure>

Comparación de texto diferencial

Muestre los cambios de código o texto uno al lado del otro para una comparación detallada.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
<figure class="diff aspect-video" tabindex="0" aria-label="Code comparison: before and after changes">
  <div class="diff-item-1" aria-label="Before: original code">
    <div class="bg-base-100 p-4">
    <pre>const greeting = "Hello";
console.log(greeting);
let count = 0;</pre>
    </div>
  </div>
  <div class="diff-item-2" aria-label="After: updated code">
    <div class="bg-base-200 p-4">
    <pre>const greeting = "Hello World";
console.log(greeting);
let count = 1;</pre>
    </div>
  </div>
  <div class="diff-resizer" role="slider" aria-label="Comparison slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
</figure>

Diferencia con codificación de colores

Utilice colores semánticos para resaltar contenido eliminado, agregado o modificado.

html 
1
2
3
4
5
6
7
8
9
<figure class="diff aspect-video" tabindex="0" aria-label="Color-coded diff: removed and added lines">
  <div class="diff-item-1" aria-label="Removed line">
    <div class="bg-error text-on-error p-4 font-mono">- const old = "value";</div>
  </div>
  <div class="diff-item-2" aria-label="Added line">
    <div class="bg-success text-on-success p-4 font-mono">+ const updated = "value";</div>
  </div>
  <div class="diff-resizer" role="slider" aria-label="Comparison slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
</figure>

Comparación de imágenes

Compare los cambios visuales entre las imágenes de antes y después con el cambio de tamaño que se puede arrastrar.

html 
1
2
3
4
5
6
7
8
9
<figure class="diff aspect-video" tabindex="0" aria-label="Image comparison: color versus grayscale">
  <div class="diff-item-1" aria-label="Before: color version">
    <img src="https://cdn.frutjam.com/images/photo-5.jpg?format=webp&width=800&height=450" alt="Original color photo" loading="lazy">
  </div>
  <div class="diff-item-2" aria-label="After: grayscale version">
    <img src="https://cdn.frutjam.com/images/photo-5.jpg?format=webp&saturation=-100&width=800&height=450" alt="Grayscale version of the same photo" loading="lazy">
  </div>
  <div class="diff-resizer" role="slider" aria-label="Comparison slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
</figure>

Tamaños de diferencias

Controle el tamaño de la diferencia utilizando las utilidades de ancho y alto en el contenedor.

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<figure class="diff aspect-video w-64" tabindex="0" aria-label="Small diff comparison">
  <div class="diff-item-1" aria-label="Before">
    <div class="bg-base-200 grid place-items-center text-base font-bold">Small</div>
  </div>
  <div class="diff-item-2" aria-label="After">
    <div class="bg-base-100 grid place-items-center text-base font-bold">Diff</div>
  </div>
  <div class="diff-resizer" role="slider" aria-label="Comparison slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
</figure>

<figure class="diff aspect-video w-96" tabindex="0" aria-label="Medium diff comparison">
  <div class="diff-item-1" aria-label="Before">
    <div class="bg-base-200 grid place-items-center text-2xl font-bold">Medium</div>
  </div>
  <div class="diff-item-2" aria-label="After">
    <div class="bg-base-100 grid place-items-center text-2xl font-bold">Diff</div>
  </div>
  <div class="diff-resizer" role="slider" aria-label="Comparison slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
</figure>

<figure class="diff aspect-video w-full" tabindex="0" aria-label="Large diff comparison">
  <div class="diff-item-1" aria-label="Before">
    <div class="bg-primary text-on-primary grid place-items-center text-4xl font-bold">Large</div>
  </div>
  <div class="diff-item-2" aria-label="After">
    <div class="bg-secondary text-on-secondary grid place-items-center text-4xl font-bold">Diff</div>
  </div>
  <div class="diff-resizer" role="slider" aria-label="Comparison slider" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100" tabindex="0"></div>
</figure>

¿Usando Claude Code, Cursor u otro editor de IA?

Cherry MCP le brinda a su editor de IA la estructura y los nombres exactos de las clases diferencia según sea necesario. No más clases alucinadas.

Pruebe Cherry MCP