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

Atribúty a Vlastnosti

Position

DescriptionSets the initial position of the dividing line as a percentage value (0-100).
AttributePosition
Typenumber
Default50

vertical

DescriptionIf true, the images will be compared vertically instead of horizontally.
Attributevertical
Typeboolean
Defaultfalse

disabled

DescriptionIf true, interaction with the component is disabled.
Attributedisabled
Typeboolean
Defaultfalse

Eventy

NameDescription
positionChangeCalled when the position of the dividing line is changed, returns the current percentage value.

Metódy

No public methods available for this component.

CSS Shadow Parts

NameDescription
beforeIt refers to part of the first picture.
afterRefer to part of the second picture.
dividerRefers to the dividing line between images.
handleRefers to the slide control on the dividing line.

CSS Custom Vlastnosti

NameDescription
--wje-img-compare-clip-pathDefines the crop shape of the image.
--wje-img-compare-divider-backgroundThe background colour of the dividing line.
---wje-img-compare-divider-areaThe size of the dividing line area.
--wje-img-compare-divider-sizeThe size of the dividing line.
--wje-img-compare-divider-leftDefines the location of the dividing line.

Sloty

NameDescription
beforeLocation for the first ("before") image.
afterLocation for the second ("after") image.