Components/Form components

ECascader Cascader

import EUI 1.0

Examples

Cascader

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 Column { width: Math.min(640, parent.width) spacing: 16 ECascader { emitPath: true multiple: true filterable: true collapseTags: true maxCollapseTags: 2 nodeDelegate: Component { EText { text: parent.node.label } } options: [{label: qsTr("China"), value: "cn", children: [ {label: qsTr("Zhejiang"), value: "zj", children: [{label: qsTr("Hangzhou"), value: "hz"}, {label: qsTr("Ningbo"), value: "nb"}]}, {label: qsTr("Shanghai"), value: "sh"}]}] } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Cascader

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 ECascader { options: exampleData.models.Regions value: exampleData.models.InitialRegion }

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

accessibleNamestring

Name read by assistive technologies; provide a readable name for controls without text.

DefaultplaceholderText

appendComponentComponent

Component slot for custom input append area or list end; null uses the default content. See this page’s examples for delegate context.

Defaultnull

checkStrictlybool

Keep parent and child selection independent.

Defaultfalse

childrenRolestring

Object field used for text, values, child nodes or indentation.

Default"children"

clearIconint

Icon used by the component.

EIcons.*
0 (no icon)

DefaultEIcons.CIRCLE_XMARK

clearablebool

Show a clear action; ratings may be cleared by clicking the current score again.

Defaulttrue

collapseTagsbool

Collapse excess selected tags.

Defaultfalse

echoModeenum

Display mode for the input text.

TextInput.Normal
TextInput.Password
TextInput.NoEcho
TextInput.PasswordEchoOnEdit

DefaultDynamic binding

emitPathbool

Emit the full cascader path; false emits only the final value.

Defaulttrue

emptyValuesvar

Values treated as empty; includes undefined, null and the empty string by default.

DefaultInherited; default [undefined, null, ""]

enabledbool

Allow interaction; false disables the control.

Defaulttrue

expandTriggerstring

Interaction that expands a cascader node.

"click" / "hover"

Default"click"

filterMethodvar

Custom filter callback using the current component's filtering arguments and result.

Defaultnull

filterablebool

Allow keyword filtering.

Defaultfalse

fontfont

Font settings for the family, size and text style.

Common fields:
family, pixelSize, pointSize
bold, italic, weight
underline, strikeout
letterSpacing, wordSpacing

Defaultapplication font

formattervar

Formatting callback converting a value to displayed text.

Defaultnull

heightreal

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

DefaultimplicitHeight

labelRolestring

Object field used for text, values, child nodes or indentation.

Default"label"

lazybool

Create content or load data on demand; data controls use load / lazyLoad.

Defaultfalse

lazyLoadvar

Lazy-load callback receiving a node and resolve; call resolve(children) to provide children.

Defaultnull

maxCollapseTagsint

Maximum directly visible tags when collapsing.

Default1

maximumLengthint

Maximum allowed input characters.

Default32767

multiplebool

Allow multiple selection.

Defaultfalse

nodeDelegateComponent

Component slot for custom tree or cascader node; null uses the default content. See this page’s examples for delegate context.

Defaultnull

optionsvar

Cascader node array; role properties customize field mappings.

Fields:
label, value, children
disabled

Default[]

parservar

Input parser converting displayed text to the underlying value.

Defaultnull

passwordVisiblebool

Display the password as plain text.

Defaultfalse

placeholderTextstring

Placeholder shown when the value is empty.

DefaultLocalized text

prefixComponentComponent

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

Defaultnull

prefixIconint

Icon used by the component.

EIcons.*
0 (no icon)

Default0

prependComponentComponent

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

Defaultnull

querystring

Current filtering or search query.

Default""

readOnlybool

Prevent user editing or rating while allowing programmatic value changes.

Defaulttrue

separatorstring

Path or breadcrumb separator text.

DefaultLocalized text

showPasswordbool

Enable password entry and visibility switching.

Defaultfalse

showWordLimitbool

Show the current character count and length limit.

Defaultfalse

sizeint

Control size; inherits the nearest EConfigProvider by default.

EStyle.Small
EStyle.Medium
EStyle.Large

DefaultInherited; EStyle.Medium by default

styleTypeint

Semantic color style.

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

DefaultEStyle.Primary

suffixComponentComponent

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

Defaultnull

suffixIconint

Icon used by the component.

EIcons.*
0 (no icon)

DefaultEIcons.CHEVRON_DOWN

textstring

Displayed text.

DefaultselectedLabel

textColorcolor

Text color.

DefaultDynamic binding

validateEventbool

Request enclosing-form validation when the value changes.

Defaulttrue

validationMessagestring

Validation message or externally supplied error text.

Default""

validationStateint

Input validation state.

EValidationState.None
EValidationState.Success
EValidationState.Warning
EValidationState.Error

DefaultEValidationState.None

valuevar

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

Default[]

valueOnClearvar

Value after clearing, or a function returning it; inherits configuration by default.

DefaultInherited; default undefined

valueRolestring

Object field used for text, values, child nodes or indentation.

Default"value"

visiblebool

Whether the component is visible.

Defaulttrue

widthreal

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

DefaultimplicitWidth

columnHeightrealRead only

Computed cascader option column height.

DefaultComputed at runtime

effectiveOptionsvarRead only

Options after field mapping.

DefaultComputed at runtime

filteredPathsvarRead only

Cascader node paths matching the query.

DefaultComputed at runtime

hasValidationErrorboolRead only

Whether validation state is Error.

DefaultComputed at runtime

nodePathsvarRead only

Full node paths in cascader data.

DefaultComputed at runtime

popupaliasRead only

Reference to the internal menu, popup or tooltip.

DefaultAlias: cascadePopup

selectedLabelstringRead only

Displayed path for the selected cascader value.

DefaultComputed at runtime

wordCountintRead only

Current input character count.

DefaultComputed at runtime

showPasswordStrengthbool

Show strength and rule checks while a password input is focused.

Defaultfalse

passwordRulesvar

Password rules with label and minLength or pattern.

Default

Show default value

[ {label: ELocale.texts.PasswordLength, minLength: 8}, {label: ELocale.texts.PasswordUppercase, pattern: /[A-Z]/}, {label: ELocale.texts.PasswordLowercase, pattern: /[a-z]/}, {label: ELocale.texts.PasswordNumber, pattern: /[0-9]/}, {label: ELocale.texts.PasswordSymbol, pattern: /[^A-Za-z0-9]/} ]

passwordStrengthrealRead only

Fraction of passed password rules, from 0 to 1.

Default

Show default value

passwordRequirements.length ? passwordRequirements.filter(function(rule) { return rule.passed }).length / passwordRequirements.length : 0

passwordRequirementsvarRead only

Rule results with label and passed fields.

Default

Show default value

Array.isArray(passwordRules) ? passwordRules.map(function(rule) { let passed = false try { if (rule && rule.minLength !== undefined) passed = text.length >= Number(rule.minLength) else if (rule && rule.pattern) { const expression = new RegExp(rule.pattern) passed = expression.test(text) } } catch (error) { passed = false } return {label: rule && rule.label ? String(rule.label) : "", passed: passed} }) : []

Signals

SignaturePurpose

selected(var value)

Emitted when the cascader selection changes; value contains the selected path or paths.

loadFailed(string message)

Emitted when loading data fails; message explains why.

Methods

SignaturePurpose

open()

Open the component panel or popup.

isChecked(path)

Return whether the specified item is checked.

clearSelection()

Clear the current selection.

checkedState(path)

Return the check state of a node or path, including partial selection.

selectLevel(level, index, expandOnly)

Select an option at a given level; expandOnly expands the next level without selecting.

loadPath(path, resolved)

Load child data for the cascader path; resolved receives the loaded data.

checkPath(path, checked)

Set the checked state of the specified cascader path.