Components/EUI extensions

EListItem List item

import EUI 1.0

Examples

Title and description

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListItem { width: 420 title: qsTr("Project Alpha") description: qsTr("Click the controls or resize the window to explore.") }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Avatar and extra text

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListItem { width: 420 extra: "12:30" avatarText: "B" title: qsTr("Project Beta") avatarSource: "qrc:/example/images/gallery/avatar-03.jpg" }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Item actions

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListItem { width: 420 title: qsTr("Project Alpha") description: qsTr("Click the controls or resize the window to explore.") EButton { textButton: true text: qsTr("View details") } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Object data

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListItem { width: 420 avatarText: "G" itemData: ({ "title": qsTr("Project Gamma"), "description": qsTr("Click the controls or resize the window to explore.") }) avatarSource: "qrc:/example/images/gallery/avatar-04.jpg" }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Without dividers

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListItem { width: 420 extra: "QML" split: false title: qsTr("Project Alpha") }

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

actionsDelegateComponent

Custom actions area; receives itemData and itemIndex.

Defaultnull

avatarSourceurl

Avatar image URL; reads itemData.avatar by default.

DefaultitemData && typeof itemData === "object" ? itemData.avatar || "" : ""

avatarTextstring

Avatar text; the avatar is hidden when both text and URL are empty.

Default""

contentalias

Default content slot; aliases button text in EFloatButton.

Defaultactions.data

descriptionstring

Item description; reads itemData.description by default.

Default

Show default value

itemData && typeof itemData === "object" ? String(itemData.description || "") : ""

extrastring

Extra text on the right side of the item.

Default""

itemDatavar

Data for the current list item.

Fields:
title, label, description
avatar

Defaultnull

itemIndexint

Current item index in the source data.

Default-1

splitbool

Show dividers between list items.

Defaulttrue

titlestring

Item title; reads itemData.title or label by default.

Default

Show default value

itemData && typeof itemData === "object" ? String(itemData.title === undefined ? itemData.label === undefined ? "" : itemData.label : itemData.title) : itemData === null || itemData === undefined ? "" : String(itemData)