Components/Form components

EMention Mention

import EUI 1.0

Examples

Mention

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 EMention { whole: true prefix: ["@", "#"] options: [{label: "Alice"}, {label: "Bob"}, {label: "Carol"}] onSearched: console.log(pattern, prefix) } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Multiline mentions, values and custom labels

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 EMention { id: webUploadMention whole: true type: "textarea" prefix: ["@", "#"] width: Math.min(520, parent.width) options: [{label: "Alice Chen", value: "alice"}, {label: "Bob Wang", value: "bob"}, {label: "Carol", value: "carol", disabled: true}] placeholderText: qsTr("Type @ or # to mention a member; Backspace removes a whole mention") labelDelegate: Component { EText { property var option property int optionIndex: -1 text: option ? option.label + " (@" + option.value + ")" : "" } } headerDelegate: Component { EText { leftPadding: 20 text: qsTr("Team members") } } footerDelegate: Component { EText { leftPadding: 20 text: qsTr("Display the label and insert the value") } } } EText { width: parent.width wrapMode: Text.WordWrap text: qsTr("Actual text: ") + webUploadMention.text } }

Preview

Run the code to try the component

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

Code runs in this browser Licenses

Mention a member

QML sourceQML

import EUI 1.0 import QtQuick 2.15 import QtQuick.Layouts 1.15 import QtQuick.Controls 2.15 EMention { width: 360 options: exampleData.models.Members }

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

checkIsWholevar

Callback determining whether text is a complete mention token.

Defaultnull

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.

Defaultfalse

echoModeenum

Display mode for the input text.

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

DefaultDynamic binding

enabledbool

Allow interaction; false disables the control.

Defaulttrue

filterOptionvar

Mention option filter (pattern, option), returning whether it is visible.

Defaultnull

fitInputWidthbool

Match the suggestion popup width to the input.

Defaulttrue

fontfont

Font settings for the family, size and text style.

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

Defaultapplication font

footerDelegateComponent

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

Defaultnull

formattervar

Formatting callback converting a value to displayed text.

Defaultnull

headerDelegateComponent

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

Defaultnull

heightreal

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

DefaultimplicitHeight

labelDelegateComponent

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

Defaultnull

loadingbool

Whether the component is loading.

Defaultfalse

loadingDelegateComponent

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

Defaultnull

maximumLengthint

Maximum allowed input characters.

Default32767

offsetint

Offset relative to layout, scroll target or popup reference, in pixels.

Default0

optionsvar

Array of selectable mention options.

Fields:
label, value, 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.

Default""

placementstring

Position of the mention list relative to the editor.

"top" / "bottom"

Default"bottom"

popupMaxHeightint

Maximum suggestion popup height in pixels.

Default220

popupWidthint

Popup or menu width in pixels; 0 selects automatic width.

Default0

prefixvar

Prefix or suffix text; Mention prefix is a trigger character or character array.

Default"@"

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

propsvar

Object configuring data field mappings and node behavior.

Fields:
label, value, disabled

Default({value: "value", label: "label", disabled: "disabled"})

readOnlybool

Prevent user editing or rating while allowing programmatic value changes.

Defaultfalse

showArrowbool

Show the popup or tour arrow.

Defaultfalse

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

splitstring

Separator inserted after a committed mention.

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)

Default0

textstring

Displayed text.

Default""

textColorcolor

Text color.

DefaultDynamic binding

typestring

Type of input editor.

"input" / "textarea"

Default"input"

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

visiblebool

Whether the component is visible.

Defaulttrue

wholebool

Delete mentions as complete tokens.

Defaultfalse

widthreal

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

DefaultimplicitWidth

activePrefixstringRead only

Trigger prefix used by the current mention token.

DefaultComputed at runtime

dropdownVisibleboolRead only

Whether the mention suggestion popup is visible.

DefaultComputed at runtime

editorvarRead only

Internal input reference for inspecting input state or managing focus.

DefaultComputed at runtime

hasValidationErrorboolRead only

Whether validation state is Error.

DefaultComputed at runtime

inputvarRead only

Internal input reference for inspecting input state or managing focus.

DefaultComputed at runtime

matchesvarRead only

Filtered mention suggestion matches.

DefaultComputed at runtime

mentionPositionintRead only

Position of the current mention token in the text.

DefaultComputed at runtime

tokenvarRead only

Token information for the current mention input.

DefaultComputed at runtime

tooltipvarRead only

Reference to the internal menu, popup or tooltip.

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

cleared()

Emitted after the contents are cleared with the clear action.

formatFailed(string message)

Emitted when input formatting fails; message explains why.

mentioned(var value)

Emitted when a mention is inserted; value is the selected mention value.

selected(var value, string prefix)

Emitted when a mention candidate is selected; value is its value and prefix is the current trigger prefix.

searched(string pattern, string prefix)

Emitted when searching mention candidates; pattern is the query and prefix is the trigger prefix.

wholeRemoved(string pattern, string prefix)

Emitted when a whole mention is removed; pattern is its text and prefix is its prefix.

Methods

SignaturePurpose

close()

Close the component panel or popup.

open()

Open the component panel or popup.

choose(index)

Choose the suggestion at index.