Vorher/Nachher-Vergleich

Zwei Fassungen übereinander mit Schieberegler: Vorher links, Nachher rechts, Griff per Maus/Tastatur — für Bild- oder Text-Vergleiche

Im Builder nutzen

Beispiele

Text-Vergleich (Griff ziehen oder mit Pfeiltasten bewegen)

Sehr geehrte Damen und Herren,

hiermit möchten wir Sie darauf hinweisen, dass die Zahlung für den oben genannten Auftrag noch aussteht.

Entwurf

Hallo Frau Beispiel,

Ihr Auftrag #4712 ist noch offen — vermutlich ist er im Alltag untergegangen. Hier ist die Rechnung noch einmal.

Überarbeitet

Eigenschaften

Prop	Typ	Default	Builder-Label
beforeLabel	string	"Vorher"	Beschriftung links
afterLabel	string	"Nachher"	Beschriftung rechts
beforeImage	string	""	Bild links (leer = Fläche)
afterImage	string	""	Bild rechts
beforeText	string	""	Text links (statt Bild)
afterText	string	""	Text rechts
position	number	50	Startposition (%)

* Pflicht-Prop

Events & Slots

Events: ⚡ change — im Surface per on: {<event>: {action, params}} verdrahtbar.

Genutzte Design-Tokens

border.hairlinecolor.border.defaultcolor.border.strongcolor.surface.defaultcolor.surface.raisedcolor.surface.sunkencolor.text.defaultcolor.text.inverseelevation.controlfocus.ring-colorfocus.ring-widthfont.family.defaultleading.looseradius.fullradius.surfacesize.05size.2size.32size.5size.8text.mdtext.xs