Image Comparer
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
Description | Sets the initial position of the dividing line as a percentage value (0-100). |
Attribute | Position |
Type | number |
Default | 50 |
vertical
Description | If true , the images will be compared vertically instead of horizontally. |
Attribute | vertical |
Type | boolean |
Default | false |
disabled
Description | If true , interaction with the component is disabled. |
Attribute | disabled |
Type | boolean |
Default | false |
Eventy
Name | Description |
---|---|
positionChange | Called 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
Name | Description |
---|---|
before | It refers to part of the first picture. |
after | Refer to part of the second picture. |
divider | Refers to the dividing line between images. |
handle | Refers to the slide control on the dividing line. |
CSS Custom Vlastnosti
Name | Description |
---|---|
--wje-img-compare-clip-path | Defines the crop shape of the image. |
--wje-img-compare-divider-background | The background colour of the dividing line. |
---wje-img-compare-divider-area | The size of the dividing line area. |
--wje-img-compare-divider-size | The size of the dividing line. |
--wje-img-compare-divider-left | Defines the location of the dividing line. |
Sloty
Name | Description |
---|---|
before | Location for the first ("before") image. |
after | Location for the second ("after") image. |