Components/Data display

EBadge Badge

import EUI 1.0

Examples

Custom colors and offsets

QML sourceQML

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("Messages") } } EBadge { isDot: true offset: Qt.point(-4, 4) EButton { text: qsTr("Notifications") } } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Badge

QML sourceQML

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("Messages") } }

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

badgeDelegateComponent

Component slot for custom badge; null uses the default content. See this page’s examples for delegate context.

Defaultnull

colorcolor

Custom color; a transparent value usually selects theme or semantic colors.

DefaultDynamic binding

contentalias

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

DefaultAlias: contentHost.data

enabledbool

Allow interaction; false disables the control.

Defaulttrue

heightreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitHeight

hiddenbool

Hide the badge.

Defaultfalse

isDotbool

Display the badge as a dot.

Defaultfalse

maxint

Maximum displayed badge number; larger values display the maximum followed by +.

Default99

offsetpoint

Offset array [x, y] in pixels.

Fields: x, y

DefaultQt.point(0, 0)

showZerobool

Show the badge when its value is 0.

Defaultfalse

styleTypeint

Semantic color style.

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

DefaultEStyle.Danger

valuevar

Current value; read or write through property bindings, with arrays for multiple or range selection.

Default""

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

Component size in pixels; may be bound to its parent layout.

DefaultimplicitWidth

badgeVisibleboolRead only

Actual badge visibility after hidden and value checks.

DefaultComputed at runtime

displayValuestringRead only

Display text after formatting, progress or badge rules.

DefaultComputed at runtime

hasValueboolRead only

Whether the badge value meets display conditions.

DefaultComputed at runtime