FocusTouchArea

Use FocusTouchArea to control what happens when the region it covers is touched or interacted with using the mouse. The clicked callback is also emitted when the element has focus and enter is pressed.

Properties

  • enabled (in bool): If set to false the touch area is disabled.
  • has_hover (out bool): FocusTouchArea sets this to true when the mouse is over it.
  • has_focus (out bool): FocusTouchArea sets this to true when the area has keyboard focus.
  • pressed (out bool): Set to true by the FocusTouchArea when the mouse is pressed over it.
  • enter_pressed (out bool): Set to true by the FocusTouchArea when the area has focus and enter key is pressed.
  • mouse_cursor (out MouseCursor): The mouse cursor type when the mouse is hovering the FocusTouchArea.

Callbacks

  • clicked(): Invoked when clicked: A finger or the left mouse button is pressed, then released on this element.
  • key_pressed(/_ event_/ KeyEvent): Invoked when element has focus and a key is pressed. Ignores enter key.

Example

import { FocusTouchArea } from "@vivi/foundation.slint";

export component Example inherits Window {
    width: 200px;
    height: 100px;

    touch-area := FocusTouchArea {
        width: parent.width;
        height: parent.height;

        clicked => {
            rect2.background = #ff0;
        }
    }

    Rectangle {
        x:0;
        width: parent.width / 2;
        height: parent.height;
        background: area.pressed ? blue: red;
    }

    rect2 := Rectangle {
        x: parent.width / 2;
        width: parent.width / 2;
        height: parent.height;
    }
}