Components/Data displayIntroduced in 1.3.0

EChip Chip

import EUI 1.0

Examples

Basic chip

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Row { spacing: 12 EChip { text: "EUI" } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Icon chip

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Row { spacing: 12 EChip { text: "EUI" iconSource: EIcons.HOUSE } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Avatar chip

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Row { spacing: 12 EChip { text: "EUI" avatarSource: "qrc:/example/images/gallery/avatar-01.jpg" } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Removable chip

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Row { spacing: 12 EChip { text: "EUI" closable: true onClosed: visible = false } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Status and size

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Row { spacing: 12 EChip { text: "EUI" size: EStyle.Large styleType: EStyle.Success } }

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

hitbool

Show tag outline emphasis.

Defaultfalse

textstring

Displayed text.

Default""

iconSourceint

Icon used by the component.

EIcons.*
0 (no icon)

Default0

roundbool

Use rounded pill button styling.

Defaulttrue

checkedbool

Whether the control is checked or active.

Defaultfalse

avatarSourceurl

Avatar image URL displayed inside a tag.

Default""

closablebool

Show the close editor or remove tag button.

Defaultfalse

checkablebool

Allow clicks to toggle the checked state.

Defaultfalse

effectstring

Visual theme of the component.

light
dark

Default"light"

styleTypeint

Semantic color style.

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

DefaultEStyle.Primary

sizeint

Default descendant control size passed to EConfigProvider.

EStyle.Small
EStyle.Medium
EStyle.Large

DefaultEControlConfig.sizeFor(control)

colorcolor

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

DefaultEPaletteManager.BasePalette.transparent

darkEffectboolRead only

Whether the visual effect is dark.

Defaulteffect === "dark" || checkable && checked

Signals

SignaturePurpose

closed()

Emitted after the component closes.

clicked()

Emitted when the content is clicked.

changed(bool checked)

Emitted when tag selection changes; checked is its selected state.