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