Komponente · 6 Varianten
Vorher-Nachher
components/VorherNachher.astro
v2: Tabs schalten um. Bildvergleich per Range-Input und clip-path, Trennlinie 1px. Halb, mit Label, hochkant. Alternativ Tabs oder nebeneinander.
Notizen
- Bestand: nichts. Kein Griff-Knopf, nur Linie; Range ist unsichtbar und übernimmt Tastatur.
- Bilder identisch, Vorher entsättigt (Unsplash sat=-100) als Platzhalter.
Props
| Name | Typ | Default | Notiz |
|---|---|---|---|
| variant | "schieber" | "halb" | "label" | "hochkant" | "tabs" | "nebeneinander" | "schieber" | 01–06. |
| surface | "nacht" | "paper" | "nacht" | Pflicht-Paar. |
<VorherNachher variant="schieber" surface="nacht" />01 · Schieber
Start 35 %
Anfrage. Range über dem Bild.
Nacht
Paper
02 · Halb
Start 50 %
01. —
Nacht
Paper
03 · Label
Vorher / Nachher oben
Meta. nw-label in Ecken.
Nacht
Vorher Nachher Paper
Vorher Nachher 04 · Hochkant
3:4
Bild hochkant. max-w-sm.
Nacht
Paper
05 · Tabs
Umschalten statt schieben
Tabs voll. Statisch in v1.
Nacht
Paper
06 · Nebeneinander
Zwei Bilder, zwei Captions
Galerie. Kein JS.
Nacht
Paper