Element

Element represents a weak reference to a UI element. Use root_element to access an instance of the root element. Use query_descendants to initiate a query into the sub-tree of elements of this element.

Use the accessible_* properties and functions to introspect and change state in UI elements in an appearance independent way. For more details about the different accessibilty properties, check out the documentation in the Slint language ↗.

Properties

is_valid

is_valid: bool

Read-only property that is true if the element reference is still valid, i.e. if the element is still in the UI.

id

id: str

Read-only property that holds the element’s qualified id.

A qualified id consists of the name of the surrounding component as well as the provided local name, separate by a double colon.

component PushButton {
    /* .. */
}

export component App {
    mybutton := PushButton { } // known as `App::mybutton`
    PushButton { } // no id
}

type_name

type_name: str

Read-only property that holds the element’s type name.

bases

bases: list[str]

Read-only property that holds a list of the element’s base types.

component ButtonBase {
    /* .. */
}

component PushButton inherits ButtonBase {
    /* .. */
}

export component App {
   mybutton := PushButton { } // <-- bases is ["PushButton", "ButtonBase"]
}

accessible_role

accessible_role: AccessibleRole

Read-only property that holds the value of the accessible-role property in Slint, if present.

accessible_label

accessible_label: str

Read-only property that holds the value of the accessible-label property in Slint, if present.

accessible_value

accessible_value: str

Read-write property that holds the value of the accessible-value property in Slint.

accessible_value_maximum

accessible_value_maximum: float

Read-only property that holds the value of the accessible-value-maximum property in Slint, if present.

accessible_value_minimum

accessible_value_minimum: float

Read-only property that holds the value of the accessible-value-minimum property in Slint, if present.

accessible_value_step

accessible_value_step: float

Read-only property that holds the value of the accessible-value-step property in Slint, if present.

accessible_description

accessible_description: str

Read-only property that holds the value of the accessible-description property in Slint, if present.

accessible_checked

accessible_checked: bool

Read-only property that holds the value of the accessible-checked property in Slint, if present.

accessible_checkable

accessible_checkable: bool

Read-only property that holds the value of the accessible-checkable property in Slint, if present.

accessible_placeholder_text

accessible_placeholder_text: str

Read-write property that holds the value of the accessible-placeholder-text property in Slint.

accessible_enabled

accessible_enabled: bool

Read-write property that holds the value of the accessible-enabled property in Slint.

accessible_read_only

accessible_read_only: bool

Read-write property that holds the value of the accessible-read-only property in Slint.

layout_kind

layout_kind: Optional[LayoutKind]

Read-only property that returns the layout kind if this element is a layout container, or None if it is not a layout element.

Layout elements such as HorizontalLayout, VerticalLayout, and GridLayout are lowered to Rectangle during compilation. This property lets you distinguish layout containers from plain rectangles.

size

size: Tuple[float, float]

Read-only property that holds size of the element in logical pixels, as a tuple of width and height.

absolute_position

absolute_position: Tuple[float, float]

Read-only property that holds the absolute position of the element in logical pixels within the window, as a tuple of x and y.

computed_opacity

computed_opacity: float

Read-only property that holds the opacity that is applied when rendering this element. This is the product of the opacity property multipled with any opacity specified by parent elements. Returns zero if the element is not valid.

Methods

invoke_accessible_default_action

invoke_accessible_default_action()

Invokes the default accessible action on the element. For example a MyButton element might declare an accessible default action that simulates a click, as in the following example:

component MyButton {
    // ...
    callback clicked();
    in property <string> text;

    TouchArea {
        clicked => { root.clicked() }
    }
    accessible-role: button;
    accessible-label: self.text;
    accessible-action-default => { self.clicked(); }
}

invoke_accessible_increment_action

invoke_accessible_increment_action()

Invokes the element’s accessible-action-increment callback, if declared. On widgets such as spinboxes, this typically increments the value.

invoke_accessible_decrement_action

invoke_accessible_decrement_action()

Invokes the element’s accessible-action-decrement callback, if declared. On widgets such as spinboxes, this typically increments the value.

invoke_accessible_expand_action

invoke_accessible_expand_action()

Invokes the element’s accessible-action-expand callback, if declared. On widgets such as spinboxes, this typically decrements the value.

single_click

single_click(button: PointerEventButton)

Simulates a single mouse click sequence on the element’s center.

double_click

double_click(button: PointerEventButton)

Simulates a mouse double click sequence on the element’s center.

query_descendants

query_descendants() -> ElementQuery

Creates a new element query into all sub-elements of this elements. This includes the children as well as the children of the children, and so forth. Use ElementQuery to refine your query. When your query is ready, run it by calling either find_first or find_all.