Components/Form componentsIntroduced in 1.3.0

EListbox Listbox

import EUI 1.0

Examples

Single selection

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListbox { value: 1 width: 320 height: 200 model: [{ "label": qsTr("Design"), "value": 1 }, { "label": qsTr("Develop"), "value": 2 }, { "label": qsTr("Review"), "value": 3, "disabled": true }, { "label": qsTr("Release"), "value": 4 }] }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Multiple selection

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListbox { width: 320 height: 200 multiple: true values: [1, 2] model: [{ "label": qsTr("Design"), "value": 1 }, { "label": qsTr("Develop"), "value": 2 }, { "label": qsTr("Review"), "value": 3, "disabled": true }, { "label": qsTr("Release"), "value": 4 }] }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Filter options

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListbox { width: 320 height: 200 filterable: true model: [{ "label": qsTr("Design"), "value": 1 }, { "label": qsTr("Develop"), "value": 2 }, { "label": qsTr("Review"), "value": 3, "disabled": true }, { "label": qsTr("Release"), "value": 4 }] }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Keyboard navigation

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListbox { value: 2 width: 320 height: 200 Accessible.description: "Up, Down, Space, Enter" model: [{ "label": qsTr("Design"), "value": 1 }, { "label": qsTr("Develop"), "value": 2 }, { "label": qsTr("Review"), "value": 3, "disabled": true }, { "label": qsTr("Release"), "value": 4 }] }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Custom option

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EListbox { width: 320 height: 200 itemDelegate: EText { text: "★ " + parent.optionData.label verticalAlignment: Text.AlignVCenter } model: [{ "label": qsTr("Design"), "value": 1 }, { "label": qsTr("Develop"), "value": 2 }, { "label": qsTr("Review"), "value": 3, "disabled": true }, { "label": qsTr("Release"), "value": 4 }] }

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

modelvar

Primitive values or option objects with label, value, and disabled.

Default[]

valuesvar

Selected values when multiple is true.

Default[]

valuevar

Selected value in single selection mode.

Defaultnull

multiplebool

Allow multiple selection.

Defaultfalse

filterablebool

Allow keyword filtering.

Defaultfalse

reorderablebool

Allow entries to be reordered.

Defaultfalse

labelKeystring

Field name used as the label in object models.

Default"label"

valueKeystring

Option value field or unique identifier for object values.

Default"value"

itemDelegateComponent

Custom option content; read data from parent.optionData.

Defaultnull

filterTextalias

Text used to filter visible entries.

Defaultsearch.text

viewaliasRead only

Underlying ListView instance.

Defaultlist

itemsvarRead only

Visible entries derived from the model and filter.

Default

Show default value

Array.isArray(model) ? model.map(function(item, index) { const object = item && typeof item === "object" return {raw: item, index: index, label: String(object ? item[labelKey] === undefined ? "" : item[labelKey] : item), value: object ? item[valueKey] === undefined ? item : item[valueKey] : item, disabled: !!(object && item.disabled)} }).filter(function(item) { return item.label.toLowerCase().indexOf(search.text.toLowerCase()) >= 0 }) : []

Signals

SignaturePurpose

changed(var value)

Emitted when the selection changes; value is the new value.

itemClicked(var item, int index)

Emitted when a list item is clicked; item is its data and index is its zero-based index.

reorderRequested(int from, int to)

Emitted when reordering is requested; from and to are the old and new indices. Update the data order in the application.

Methods

SignaturePurpose

isSelected(option)

Return whether the option identified by the given key is selected.

navigate(delta)

Navigate to the specified step or relative time range.

select(index)

Select the item identified by the given index or key.