Comparer
<pc-comparer> Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.
Compare visual differences between similar content with a sliding panel.
For best results, use images that share the same dimensions. The slider can be controlled by dragging or pressing the ← and → arrow keys. Tip: Press Shift + Arrow keys to move the slider in intervals of 10, or Home + End to jump to the beginning or the end.
<pc-comparer>
<img
slot="before"
src="https://images.unsplash.com/photo-1554110397-9bac083977c6?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80&sat=-100&bri=-5"
alt="Greyscale version of a fantasy desert that’s all blue"
/>
<img
slot="after"
src="https://images.unsplash.com/photo-1554110397-9bac083977c6?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80"
alt="Colour version of a fantasy desert that’s all blue"
/>
</pc-comparer>Demos#
Initial position#
Use the position attribute to set the initial position of the slider. This is a percentage from 0 to 100.
Eigenschaften#
| Name | Beschreibung | Reflektiert | Standard |
|---|---|---|---|
position | The position of the divider as a percentage. Typ: number |
| 50 |
updateComplete | Ein schreibgeschütztes Promise, das erfüllt ist, sobald die Komponente fertig aktualisiert wurde. | ‐ |
Erfahre mehr über Attribute und Eigenschaften.
Slots#
| Name | Beschreibung |
|---|---|
before | The before content, often an <img> or <svg> element. |
after | The after content, often an <img> or <svg> element. |
handle | The icon used inside the handle. |
Erfahre mehr über die Benutzung von Slots.
Events#
| Name | Beschreibung | Event‐Detail |
|---|---|---|
pc-change | Emitted when the position of the handle changes. | ‐ |
Erfahre mehr über Events.
Benutzerdefinierte Eigenschaften#
| Name | Beschreibung | Standard |
|---|---|---|
--divider-width | The width of the dividing line. | 0.125rem |
--handle-size | The size of the compare handle. | 2.5rem |
Erfahre mehr über das Anpassen von benutzerdefinierten Eigenschaften.
Parts#
| Name | Beschreibung |
|---|---|
base | The component’s base wrapper. |
before | The container that wraps the before content. |
after | The container that wraps the after content. |
divider | The divider that separates both sides. |
handle | The handle that the user drags to expose the after content. |
Erfahre mehr über das Anpassen von CSS‐Parts.
Importieren#
Wenn du den Autoloader oder den Standard‐Loader nutzt, kannst du diesen Abschnitt überspringen. Falls du „Cherry Picking“ betreibst, kannst du die folgenden Snippets verwenden, um diese Komponente zu importieren.
Um diese Komponente manuell vom CDN zu importieren, kopiere dieses Code‐Snippet und füge es in dein HTML ein.
<script type="module" src="https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/comparer/comparer.js"></script>Um diese Komponente manuell vom CDN zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.
import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/comparer/comparer.js";Um diese Komponente manuell via npm zu importieren, kopiere dieses Code‐Snippet und füge es in deine JavaScript‐Datei ein.
import "placer-toolkit/dist/components/comparer/comparer.js";Abhängigkeiten#
Diese Komponente importiert automatisch folgende Komponenten: