组件/视觉效果引入于 1.3.0

ERipple 涟漪

import EUI 1.0

示例与代码

点击涟漪

QML 代码QML

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("点击任意位置") anchors.centerIn: parent } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

慢速涟漪

QML 代码QML

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("点击任意位置") anchors.centerIn: parent } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

自定义颜色

QML 代码QML

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("点击任意位置") anchors.centerIn: parent } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

紧凑区域

QML 代码QML

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("点击任意位置") anchors.centerIn: parent } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

禁用效果

QML 代码QML

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("点击任意位置") anchors.centerIn: parent } } }

效果

运行代码，体验组件交互

可修改文字、属性和事件，再点击运行。

代码在当前浏览器中运行 许可

属性

属性说明取值与默认值

contentalias

内容插槽；直接在组件内部声明 QML 子对象。

默认值body.data

durationint

涟漪展开并淡出的时长，单位为毫秒。

默认值450

targetItem

显示涟漪并监听点击的目标控件。

默认值null

colorcolor

涟漪的颜色。

默认值EPaletteManager.ThemePalette.fetchColorForStyle(EStyle.Primary)

信号

签名作用

triggered(real x, real y)

触发水波纹时触发，x、y 为波纹起点坐标。

方法

签名作用

pulse(x, y)

在 x、y 指定位置播放水波纹。