Zum Hauptinhalt springen
Frutjam logo Frutjam
v2.2.5
Theme

Diff-Komponente

Zuletzt aktualisiert:

Nur CSS-basierter Tailwind CSS-Diff-Viewer für den direkten Vergleich von Inhalten mit einer ziehbaren Trennlinie. Kein JavaScript erforderlich. WCAG AA zugänglich, funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Diff-Komponenten zeigen Unterschiede zwischen zwei Inhaltsversionen an und eignen sich ideal zum Anzeigen von Codeänderungen, Dokumentrevisionen oder Vergleichsansichten. Diffs basieren auf semantischem HTML und farbcodiertem Stil und helfen Benutzern dabei, zu verstehen, was sich geändert hat. Das Frutjam-Diff-System unterstützt mehrere Typen und Stile – perfekt für Versionskontrollschnittstellen, Revisionsverlauf und Änderungsverfolgung.

Nur CSS, kein JavaScript erforderlich. WCAG AA zugänglich und Framework-unabhängig – funktioniert mit Django, HTMX, Laravel, React und jedem Stack.

Klasse Typ Beschreibung
diffBaseVergleichscontainer nebeneinander mit verschiebbarer Trennwand
diff-item-1ModifikatorLinker (Vorher-)Bereich des Vergleichs
diff-item-2ModifikatorRechter (nachher) Bereich des Vergleichs
diff-resizerModifikatorZiehbarer Griff zum Ändern der Größe der beiden Fenster

Grundlegende Verwendung

Erstellen Sie einen einfachen Parallelvergleich mit Vorher- und Nachher-Zuständen.

Before
After 
 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>

Diff-Textvergleich

Zeigen Sie Code- oder Textänderungen nebeneinander an, um einen detaillierten Vergleich zu ermöglichen.

const greeting = "Hello";
console.log(greeting);
let count = 0;
const greeting = "Hello World";
console.log(greeting);
let count = 1;
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>

Unterschied mit Farbcodierung

Verwenden Sie semantische Farben, um entfernte, hinzugefügte oder geänderte Inhalte hervorzuheben.

- const old = "value";
+ const updated = "value";
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>

Bildvergleich

Vergleichen Sie visuelle Änderungen zwischen Vorher- und Nachher-Bildern mit der ziehbaren Größenänderung.

Original color photo
Grayscale version of the same photo
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>

Verschiedene Größen

Steuern Sie die Diff-Größe mithilfe der Dienstprogramme für Breite und Höhe im Container.

Small
Diff
Medium
Diff
Large
Diff
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>

Verwenden Sie Claude Code, Cursor oder einen anderen KI-Editor?

Cherry MCP stellt Ihrem KI-Editor bei Bedarf die genauen Diff-Klassennamen und -Strukturen zur Verfügung. Keine halluzinierten Klassen mehr.

Probieren Sie Cherry MCP