Components/Visual effectsIntroduced in 1.3.0

ERipple Ripple

import EUI 1.0

Examples

Click ripple

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ERipple { height: 80 width: 280 ERectangle { radius: 8 anchors.fill: parent color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: qsTr("Click anywhere") anchors.centerIn: parent } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Slow ripple

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ERipple { height: 80 width: 280 duration: 900 ERectangle { radius: 8 anchors.fill: parent color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: qsTr("Click anywhere") anchors.centerIn: parent } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Ripple color

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ERipple { height: 80 width: 280 color: "#67c23a" ERectangle { radius: 8 anchors.fill: parent color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: qsTr("Click anywhere") anchors.centerIn: parent } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Compact surface

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ERipple { height: 48 width: 180 ERectangle { radius: 8 anchors.fill: parent color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: qsTr("Click anywhere") anchors.centerIn: parent } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Disabled effect

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ERipple { height: 80 width: 280 enabled: false ERectangle { radius: 8 anchors.fill: parent color: EPaletteManager.ThemePalette.surfaceHover(ETheme.dark) EText { text: qsTr("Click anywhere") anchors.centerIn: parent } } }

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

contentalias

Content slot; declare QML child objects directly inside the component.

Defaultbody.data

durationint

Ripple expansion and fade duration in milliseconds.

Default450

targetItem

Item that displays ripples and receives taps.

Defaultnull

colorcolor

Color of the ripple.

DefaultEPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary)

Signals

SignaturePurpose

triggered(real x, real y)

Emitted when a ripple starts; x and y are its origin coordinates.

Methods

SignaturePurpose

pulse(x, y)

Play a ripple at coordinates x and y.