KDE API Reference

Contents

Element QML Type

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

Import Statement: import org.kde.union.impl

Attached Properties

Attached Signals

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 : QVariantMap

A map of extra attributes to provide to the theme.

These can be used to provide extra criteria to be used to style an element. They can be used to do things like select a specific theme to use for an element.


Element.colorSet : ColorSet

The color set to use for this element.

The color set determines a specific set of system colors that should be used in the appropriate context.

See also Union::Element::ColorSet.


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.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.

Note: The corresponding handler is onUpdated.