Element QML Type

Provides attached properties that provide information about an element and its hierarchy. More...

• List of all members, including inherited members

Attached Properties

• attributes : list<Attribute>
• elementId : string
• hints : list<Hint>
• parentElement : Element
• states : StatesGroup
• states.activeFocus : bool
• states.activeStates : Union::Element::States
• states.checked : bool
• states.enabled : bool
• states.highlighted : bool
• states.hovered : bool
• states.pressed : bool
• states.visualFocus : bool
• type : string

Attached Signals

• updated()

Detailed Description

Element can be attached to any Item type to provide information about that item and turn it into a styleable element. The information is used by style rules to determine if they should apply to this element. This means you should provide as much information as possible about the element, as that allows style rules to be more specific if needed.

To access the properties provided by the matched style rules, use the Style attached type.

Example usage:

Rectangle {
    id: element

    Union.Element.type: "CustomControl"
    Union.Element.elementId: "custom-control"
    Union.Element.states {
        hovered: hover.hovered
        pressed: press.active
    }

    color: Union.Style.color

    HoverHandler {
        id: hover
    }

    TapHandler {
        id: press
    }
}

This would create an element that can be matched by the style rules Type(CustomControl), Id(custom-control), State(Hovered) or State(Pressed) or any combination thereof.

See also Style, Union::Element, and Union::Selector.

Attached Property Documentation

Element.attributes : list<Attribute>

A list of attributes to provide to the element.

This is a list of ElementAttribute instances that is used to build the internal list of attributes of the element.

Attributes are extra information that can be used by a style to adjust how an element is styled. An example is Button's display property, which adjusts what elements of a button should be visible.

Element.elementId : string

A unique id for the element.

Note that this is expected to be unique across the entire application, although this is not currently enforced.

Element.hints : list<Hint>

A list of hints to provide to the element.

This is a list of ElementHint instances that is used to build the internal list of hints of the element.

Hints are extra information that can be used by a style to adjust how a certain element is styled. An example is info/warning/error variants of a button.

See also ElementHint.

Element.parentElement : Element

The parent element of this element.

This is mostly useful to inspect what this element thinks its parent is, to verify that the element's hierarchy matches with what is expected.

Element.states : StatesGroup

Grouped property to set the states of the element.

Element.states.activeFocus : bool

Does the element have active focus?

This sets the `Element::State::ActiveFocus` state on the element if set to `true`.

Element.states.activeStates : Union::Element::States

The set of active states of this StatesGroup.

This will contain all the states that are currently active, as set by the other properties.

Element.states.checked : bool

Is the element checked?

This sets the `Element::State::Checked` state on the element if set to `true`.

Element.states.enabled : bool

Is the element enabled?

This sets the `Element::State::Disabled` state on the element if set to `false`.

Note that this behavior is inverted from most other states here, as "Enabled" is expected to be the default state of an element.

Element.states.highlighted : bool

Should this element be highlighted?

This sets the `Element::State::Highlighted` state on the element if set to `true`.

Element.states.hovered : bool

Is the element hovered?

This sets the `Element::State::Hovered` state on the element if set to `true`.

Element.states.pressed : bool

Is the element pressed?

This sets the `Element::State::Pressed` state on the element if set to `true`.

Element.states.visualFocus : bool

Does the element have visual focus?

This sets the `Element::State::VisualFocus` state on the element if set to `true`.

Element.type : string

The type of element.

Attached Signal Documentation

updated()

Emitted whenever the structure of elements changed.

This will be emitted whenever one of the properties of this element changes, or one of its parent elements changes, including things like state changed. If you make use of `query()` you should re-fetch the query when this signal is emitted.