Skip to main content

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

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ázovPopis
dividerŠtýluje shadow časť divider.

CSS vlastné premenné

NázovPopis
--wje-img-compare-divider-areaVlastná CSS premenná na štýlovanie komponentu (img compare divider area).
--wje-img-compare-divider-backgroundVlastná CSS premenná na štýlovanie komponentu (img compare divider background).
--wje-img-compare-divider-sizeVlastná CSS premenná na štýlovanie komponentu (img compare divider size).
--wje-img-compare-divider-leftVlastná CSS premenná na štýlovanie komponentu (img compare divider left).
--wje-img-compare-positionVlastná CSS premenná na štýlovanie komponentu (img compare position).
--wje-img-compare-clip-pathVlastná CSS premenná na štýlovanie komponentu (img compare clip path).

Sloty

NázovPopis
beforeSlot pre obsah zobrazený pred hlavným prvkom.
afterSlot pre obsah zobrazený za hlavným prvkom.