Image Comparer
The Image Comparer element is used to compare two images. It displays the images on top of each other and allows you to reveal the bottom image using the built-in slider.
Basic Usage
The demonstration is a basic comparison of two images to make it clear how the slider and view splitting works.
When to use
Use wje-img-comparer to display content that improves the readability, scannability, or context of the information.
When not to use
Do not use it as a substitute for structured data where precise interaction is needed.
Accessibility
Add alternative text for images, legible contrasts and text equivalents for icons without descriptions.
Recommended practices
- Compress media and use lazy loading for large lists.
- Keep information priorities consistent for tabs and lists.
- Do not repeat the same information in text and icon at the same time with no added value.
Attributes and properties
Pre tento komponent nie sú dostupné žiadne vlastnosti.
Events
Pre tento komponent nie sú dostupné žiadne udalosti.
Methods
Pre tento komponent nie sú dostupné žiadne verejné metódy.
CSS shadow parts
| Názov | Popis |
|---|---|
divider | Štýluje shadow časť divider. |
CSS custom variables
| Názov | Popis |
|---|---|
--wje-img-compare-divider-area | Vlastná CSS premenná na štýlovanie komponentu (img compare divider area). |
--wje-img-compare-divider-background | Vlastná CSS premenná na štýlovanie komponentu (img compare divider background). |
--wje-img-compare-divider-size | Vlastná CSS premenná na štýlovanie komponentu (img compare divider size). |
--wje-img-compare-divider-left | Vlastná CSS premenná na štýlovanie komponentu (img compare divider left). |
--wje-img-compare-position | Vlastná CSS premenná na štýlovanie komponentu (img compare position). |
--wje-img-compare-clip-path | Vlastná CSS premenná na štýlovanie komponentu (img compare clip path). |
Slots
| Názov | Popis |
|---|---|
before | Slot pre obsah zobrazený pred hlavným prvkom. |
after | Slot pre obsah zobrazený za hlavným prvkom. |