组件/数据展示

EBadge 徽章

import EUI 1.0

示例与代码

自定义颜色与偏移

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Row { spacing: 36 EBadge { value: 12 color: "#409eff" offset: Qt.point(4, 2) EButton { text: qsTr("消息") } } EBadge { isDot: true offset: Qt.point(-4, 4) EButton { text: qsTr("通知") } } }

效果

运行代码，体验组件交互

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

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

徽章

QML 代码QML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EBadge { max: 99 value: 120 EButton { text: qsTr("消息") } }

效果

运行代码，体验组件交互

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

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

属性

属性说明取值与默认值

badgeDelegateComponent

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

默认值null

colorcolor

自定义颜色；透明值通常表示使用当前主题或语义配色。

默认值动态绑定

contentalias

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

默认值别名：contentHost.data

enabledbool

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

默认值true

heightreal

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

默认值implicitHeight

hiddenbool

隐藏徽章。

默认值false

isDotbool

把徽章显示为圆点。

默认值false

maxint

徽章数字上限，超过时显示为上限加 +。

默认值99

offsetpoint

偏移数组 [x, y]，单位为像素。

字段：x, y

默认值Qt.point(0, 0)

showZerobool

徽章值为 0 时仍显示。

默认值false

styleTypeint

语义配色风格。

EStyle.Default
EStyle.Primary
EStyle.Success
EStyle.Info
EStyle.Warning
EStyle.Danger

默认值EStyle.Danger

valuevar

当前值；通过属性绑定读写，数组形式用于多选或范围选择。

默认值""

visiblebool

是否显示组件。

默认值true

widthreal

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

默认值implicitWidth

badgeVisiblebool只读

徽章经过隐藏及值判断后的实际显示状态。

默认值由运行时计算

displayValuestring只读

经过格式化、进度或徽章规则处理后的显示文字。

默认值由运行时计算

hasValuebool只读

徽章值是否满足显示条件。

默认值由运行时计算