Components/Data displayIntroduced in 1.3.0

ECompare Compare

import EUI 1.0

Examples

Drag comparison

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECompare { value: 50 height: 220 width: Math.min(540, parent.width) beforeSource: "qrc:/example/images/gallery/neon-red.jpg" afterSource: "qrc:/example/images/gallery/neon-purple.jpg" }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Hover comparison

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECompare { height: 220 hover: true width: Math.min(540, parent.width) beforeSource: "qrc:/example/images/gallery/neon-red.jpg" afterSource: "qrc:/example/images/gallery/neon-purple.jpg" }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Vertical comparison

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECompare { height: 220 vertical: true width: Math.min(540, parent.width) beforeSource: "qrc:/example/images/gallery/neon-red.jpg" afterSource: "qrc:/example/images/gallery/neon-purple.jpg" }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Custom handle

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECompare { height: 220 width: Math.min(540, parent.width) beforeSource: "qrc:/example/images/gallery/neon-red.jpg" afterSource: "qrc:/example/images/gallery/neon-purple.jpg" handleComponent: EText { text: "◆" verticalAlignment: Text.AlignVCenter horizontalAlignment: Text.AlignHCenter } }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Keyboard and endpoints

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECompare { value: 0 height: 220 width: Math.min(540, parent.width) Accessible.description: "Arrow keys, Home, End" beforeSource: "qrc:/example/images/gallery/neon-red.jpg" afterSource: "qrc:/example/images/gallery/neon-purple.jpg" }

Preview

Run the code to try the component

Edit text, properties, or events, then select Run.

Code runs in this browser Licenses

Properties

PropertyDescriptionValues and default

valuereal

Percentage of the before content revealed, from 0 to 100.

Default50

hoverbool

Update comparison ratio on pointer hover.

Defaultfalse

afterSourceurl

Image URL for the after layer.

Default""

beforeSourceurl

Image URL for the before layer.

Default""

verticalbool

Use a horizontal divider to reveal content vertically.

Defaultfalse

afterComponentComponent

Custom content replacing the after image.

Defaultnull

beforeComponentComponent

Custom content replacing the before image.

Defaultnull

handleComponentComponent

Custom comparison handle content.

Defaultnull

fractionrealRead only

Comparison fraction clamped between 0 and 1.

DefaultisFinite(value) ? Math.max(0, Math.min(100, value)) / 100 : 0.5

Signals

SignaturePurpose

moved(real value)

Emitted when the user adjusts the comparison divider; value is its position.

Methods

SignaturePurpose

setValue(next)

Set a new numeric value within the component limits.