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.
Press Shift + ← or → arrow key 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://placer-toolkit.vercel.app/images/desert-at-daytime.webp"
alt="A desert at daytime"
/>
<img
slot="after"
src="https://placer-toolkit.vercel.app/images/desert-at-nighttime.webp"
alt="A desert at nighttime"
/>
</pc-comparer>
<p class="pc-caption-m pc-line-height-normal" style="margin-block-start: var(--pc-spacing-m)">
<strong>
<a
href="https://unsplash.com/photos/sand-dune-zuueig1w8WI"
rel="noreferrer noopener"
target="_blank"
>
Sand dune</a>
</strong> and
<strong>
<a
href="https://unsplash.com/photos/desert-at-night-a2kD4b0KK4s"
rel="noreferrer noopener"
target="_blank"
>
Desert at night</a>
</strong> by
<a
href="https://unsplash.com/@yamaicle"
rel="noreferrer noopener"
target="_blank"
>
Mike Yukhtenko</a> are available on
<a href="https://unsplash.com">
Unsplash</a> under the
<a
href="https://unsplash.com/license"
rel="noreferrer noopener"
target="_blank"
>
Unsplash License</a>.
</p>Use the position attribute to set the initial position of the slider. This is a percentage from 0 to 100.
| 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.
| 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.
| Name | Beschreibung | Event‐Detail |
|---|---|---|
pc-change | Emitted when the position of the handle changes. | ‐ |
Erfahre mehr über Events.
| 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.
| 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.
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, kannst du dieses Code‐Snippet kopieren und es in dein HTML einfügen.
<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, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.
import "https://cdn.jsdelivr.net/npm/placer-toolkit@1.0.0-alpha.3/cdn/components/comparer/comparer.js";Um diese Komponente manuell von npm zu importieren, kannst du dieses Code‐Snippet kopieren und es in deine JavaScript‐Datei einfügen.
import "placer-toolkit/dist/components/comparer/comparer.js";Diese Komponente importiert automatisch folgende Komponenten: