Components/Data display

ESegmented Segmented

import EUI 1.0

Examples

Value binding, disabled options and keyboard navigation

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { spacing: 12 width: parent.width ESegmented { id: segmented width: 360 block: true value: "day" model: [{ label: qsTr("Day"), value: "day" }, { label: qsTr("Week"), value: "week" }, { label: qsTr("Month"), value: "month" }, { label: qsTr("Year"), value: "year", disabled: true }] } EText { text: qsTr("Current value: ") + segmented.currentValue } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Segmented

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ESegmented { model: [qsTr("Day"), qsTr("Week"), qsTr("Month")] onSelected: function(value, index) { console.log(value) } }

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

blockbool

Make the segmented control fill the available width.

Defaultfalse

currentIndexint

Index of the current selected or displayed item.

-1: no selection
0 and above: item index

Default0

directionstring

Component layout direction.

"horizontal" / "vertical"

Default"horizontal"

enabledbool

Allow interaction; false disables the control.

Defaulttrue

heightreal

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

DefaultimplicitHeight

modelvar

Array of text, numbers or option objects.

Fields:
label, value, disabled

Default[]

optionDelegateComponent

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

Defaultnull

propsvar

Object configuring data field mappings and node behavior.

Fields:
label, value, disabled

Default({})

sizeint

Control size; inherits the nearest EConfigProvider by default.

EStyle.Small
EStyle.Medium
EStyle.Large

DefaultInherited; EStyle.Medium by default

validateEventbool

Request enclosing-form validation when the value changes.

Defaulttrue

valuevar

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

Defaultundefined

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

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

DefaultimplicitWidth

currentItemvarRead only

Data object of the current segmented option.

DefaultComputed at runtime

currentValuevarRead only

Actual value of the current option.

DefaultComputed at runtime

Signals

SignaturePurpose

selected(var value, int index)

Emitted when a segment is selected; value is its value and index is its index.

Methods

SignaturePurpose

selectValue(key)

Select an option by its value.

select(index)

Select the item identified by the given index or key.