组件/数据展示

ECard 卡片

import EUI 1.0

示例与代码

悬停阴影与标题、页脚插槽

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECard { shadow: "hover" width: Math.min(480, parent.width) footer: qsTr("更新于 2026-10-10") headerDelegate: Component { Row { spacing: 12 EText { font.bold: true text: qsTr("项目动态") } ETag { styleType: EStyle.Success text: qsTr("进行中") } } } EText { width: parent.width wrapMode: Text.WordWrap text: qsTr("卡片支持原有正文内容接口，并可自定义标题与页脚。") } }

效果

运行代码，体验组件交互

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

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

卡片

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECard { width: 360 header: qsTr("项目状态") footer: qsTr("更新于今天") EText { text: qsTr("所有任务已完成") } }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

contentalias

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

默认值别名：body.data

enabledbool

是否允许交互；false 时控件禁用。

默认值true

footerstring

卡片底部文字。

默认值""

footerDelegateComponent

自定义底部内容的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

headerstring

卡片头部文字。

默认值""

headerDelegateComponent

自定义头部内容或表头的 Component 插槽；null 使用默认内容。 委托上下文见本页示例。

默认值null

heightreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitHeight

shadowstring

卡片阴影的显示策略。

always
hover
never

默认值继承 Provider，默认 "never"

visiblebool

是否显示组件。

默认值true

widthreal

组件尺寸，单位为像素；可绑定父布局尺寸。

默认值implicitWidth