StateLayer

The StateLayer can be used to create custom widget with a state indication like pressed or hovered. The state layer should be placed between the background and the content of the widget.

Properties

• border_radius (in length): Defines the size of the radius. (default value: 0)
• pressed (in bool): Set to true to display the state layer in the pressed state. (default value: false)
• has_hover (in bool): Set to true to display the state layer in the hovered state. (default value: false)
• has_focus (in bool): Set to true to display the state layer in the focused state. (default value: false)
• has_error (in bool): Set to true to display the state layer in the error state. (default value: false)
• focus_padding (in length): Defines the padding of the focus border (default value: 2px)

Example

import { StateLayer } from "@vivi/magic.slint";

export component MyWidget inherits Rectangle {
    width: 60px;
    height: 20px;
    background: green;

    touch_area := TouchArea {}

    StateLayer {
        pressed: touch_area.pressed;
        has_hover: touch_area.has_hover;
    }
}

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

    MyWidget {}
}