Vorher/Nachher-Vergleich — component.comparison
Zwei Fassungen übereinander mit Schieberegler: Vorher links, Nachher rechts, Griff per Maus/Tastatur — für Bild- oder Text-Vergleiche
Componentv1.0.0Datenweb.documentweb.applicationdesktop.shellbuilder.preview
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.
Entwurfhiermit möchten wir Sie darauf hinweisen, dass die Zahlung für den oben genannten Auftrag noch aussteht.
Hallo Frau Beispiel,
Ihr Auftrag #4712 ist noch offen — vermutlich ist er im Alltag untergegangen. Hier ist die Rechnung noch einmal.
ÜberarbeitetIhr Auftrag #4712 ist noch offen — vermutlich ist er im Alltag untergegangen. Hier ist die Rechnung noch einmal.
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
beforeLabel | string | "Vorher" |
afterLabel | string | "Nachher" |
beforeImage | string | "" |
afterImage | string | "" |
beforeText | string | "" |
afterText | string | "" |
position | number | 50 |
Events & Slots
Events: change
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--comparison-position | 50% |
Genutzte Design-Tokens
border.hairline color.border.default color.border.strong color.surface.default color.surface.raised color.surface.sunken color.text.default color.text.inverse elevation.control focus.ring-color focus.ring-width font.family.default leading.loose radius.full radius.surface size.05 size.2 size.32 size.5 size.8 text.md text.xs