ButtonStyle

Defines the visual settings of a button.

Fields

  • border_style (BorderStyle): Defines the style of the background border.
  • icon_style (IconStyle): Defines the style of the icon.
  • text_style (TextStyle): Defines the style of the text.
  • layout_style (LayoutStyle): Defines the style of the layout.

ButtonBase

The ButtonBase represents the base for button elements that can be styled by using ButtonStyle.

Properties

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

Callbacks

  • clicked(): Invoked when clicked: A finger or the left mouse button is pressed, then released on this element.

Example

import { ButtonBase, TextBase } from "@vivi/foundation.slint";

export component MyButton inherits ButtonBase {
    in property <string> text <=> text_label.text;

    width: 60px;
    height: 20px;

    style: {
        background: black,
        border_radius: 8px,
        text_style: {
            foreground: white,
            font_size: 12px,
            font_weight: 400,
        }
    };

    text_label := TextBase {
        style: root.text_style;
        vertical_alignment: center;
        horizontal_alignment: center;
    }
}

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

    MyButton {
        text: "Click me";

        clicked => {
            debug("Button clicked");
        }
    }
}