Image Comparer

shadow

Element Image Comparer slúži na porovnanie dvoch obrázkov. Obrázky zobrazí na sebe a umožňuje odkrývať spodný obrázok pomocou vstavaného posuvníka.

Basic Usage

Ukážka predstavuje základné porovnanie dvoch obrázkov, aby bolo jasné, ako funguje posuvník a rozdelenie pohľadu.

Kedy použiť

Použite wje-img-comparer na zobrazenie obsahu, ktorý zlepšuje čitateľnosť, skenovateľnosť alebo kontext informácií.

Kedy nepoužiť

Nepoužívajte ho ako náhradu za štruktúrované dáta tam, kde je potrebná presná interakcia.

Prístupnosť

Doplňte alternatívny text pre obrázky, čitateľné kontrasty a textové ekvivalenty pre ikony bez popisu.

Odporúčané postupy

• Komprimujte médiá a používajte lazy loading pri veľkých zoznamoch.
• Pri kartách a zoznamoch držte konzistentné informačné priority.
• Neopakujte rovnakú informáciu súčasne textom aj ikonou bez pridanej hodnoty.

Atribúty a vlastnosti

Pre tento komponent nie sú dostupné žiadne vlastnosti.

Udalosti

Pre tento komponent nie sú dostupné žiadne udalosti.

Metódy

Pre tento komponent nie sú dostupné žiadne verejné metódy.

CSS tieňové časti

Názov	Popis
divider	Štýluje shadow časť divider.

CSS vlastné premenné

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).

Sloty

Názov	Popis
before	Slot pre obsah zobrazený pred hlavným prvkom.
after	Slot pre obsah zobrazený za hlavným prvkom.