Other

Keyboard input

keys

keysdefault: empty keys

A keys represents a key combined with a list of modifiers. This is the primitive type used to detect if a KeyEvent should trigger a given key binding.

Key bindings in Slint are based on logical keys — the character a key produces on the current keyboard layout — not the physical position of a key on the keyboard. See Key Bindings for details.

Rust

In Rust, properties or struct fields of the keys type are mapped to slint::Keys.

C++

In C++, properties or struct fields of the keys type are mapped to slint::Keys.

NodeJS

In JavaScript, properties or struct fields of the keys type are mapped to the Keys class.

Python

In Python, properties or struct fields of the keys type are mapped to Keys.

keys values have the following member function:

to-string() -> string

Returns a platform-native description of the key combination.

export component KeysToString inherits FocusScope {
    undo := KeyBinding {
        keys: @keys(Control + Z);
        activated => { debug("UNDO") }
    }

    Text {
        text: "Press \{undo.keys.to-string()} to undo!";
        // Results in "Press ⌘Z to undo!" on macOS
        // Results in "Press Ctrl+Z to undo!" on other platforms
    }
}

slint

Animation

easing

easingdefault: linear

The easing type allows defining an easing curve for animations.

To specify an easing curve, use the values from the Easing namespace. For example you can use Easing.ease-out or Easing.ease-in-quad. The namespace consists of the following names (see easings.net ↗ for a visual reference):

• linear
• ease-in-quad
• ease-out-quad
• ease-in-out-quad
• ease
• ease-in
• ease-out
• ease-in-out
• ease-in-quart
• ease-out-quart
• ease-in-out-quart
• ease-in-quint
• ease-out-quint
• ease-in-out-quint
• ease-in-expo
• ease-out-expo
• ease-in-out-expo
• ease-in-sine
• ease-out-sine
• ease-in-out-sine
• ease-in-back
• ease-out-back
• ease-in-out-back
• ease-in-circ
• ease-out-circ
• ease-in-out-circ
• ease-in-elastic
• ease-out-elastic
• ease-in-out-elastic
• ease-in-bounce
• ease-out-bounce
• ease-in-out-bounce
• cubic-bezier(a, b, c, d) as in CSS

Additionally, in expressions of type easing, those names are available directly.

struct AnimationData {
    curve: easing,
}

component Custom inherits Rectangle {
    property<AnimationData> animation: {
        // Using the Easing namespace.
        curve: Easing.ease-in-circ,
    };

  animate x {
      // In easing expressions the names are available via global scope.
      easing: ease-out-bounce;
  }
}

slint

Interaction Types

data-transfer

data-transferdefault: an empty data-transfer

A data-transfer value is the payload carried by drag-and-drop and clipboard operations. It abstracts over the file-type transfer mechanisms supported by each platform. It can carry plain text, an image, and a list of local file paths simultaneously.

The type is opaque in Slint code: construct a data-transfer value and read its content via callbacks implemented in the host language. See DragAndDrop for an end-to-end example.

Rust

In Rust, properties or struct fields of the data-transfer type are mapped to slint::DataTransfer.

C++

In C++, properties or struct fields of the data-transfer type are mapped to slint::DataTransfer.

NodeJS

In JavaScript, properties or struct fields of the data-transfer type are mapped to the DataTransfer class.

Python

In Python, properties or struct fields of the data-transfer type are mapped to DataTransfer.

MouseCursor

MouseCursordefault: default

The MouseCursor type is used in the TouchArea element.

Built-in shape

Set to one of the built-in shapes by specifying the name:

TouchArea {
    mouse-cursor: ew-resize;
}

TouchArea {
    mouse-cursor: MouseCursor.ew-resize;
}

slint

Represents different types of mouse cursors. It’s a subset of the mouse cursors available in CSS. For details and pictograms see the MDN Documentation for cursor ↗. Depending on the backend and used OS unidirectional resize cursors may be replaced with bidirectional ones.

• default: The systems default cursor.
• none: No cursor is displayed.
• help: A cursor indicating help information.
• pointer: A pointing hand indicating a link.
• progress: The program is busy but can still be interacted with.
• wait: The program is busy.
• crosshair: A crosshair.
• text: A cursor indicating selectable text.
• alias: An alias or shortcut is being created.
• copy: A copy is being created.
• move: Something is to be moved.
• no-drop: Something can’t be dropped here.
• not-allowed: An action isn’t allowed
• grab: Something is grabbable.
• grabbing: Something is being grabbed.
• col-resize: Indicating that a column is resizable horizontally.
• row-resize: Indicating that a row is resizable vertically.
• n-resize: Unidirectional resize north.
• e-resize: Unidirectional resize east.
• s-resize: Unidirectional resize south.
• w-resize: Unidirectional resize west.
• ne-resize: Unidirectional resize north-east.
• nw-resize: Unidirectional resize north-west.
• se-resize: Unidirectional resize south-east.
• sw-resize: Unidirectional resize south-west.
• ew-resize: Bidirectional resize east-west.
• ns-resize: Bidirectional resize north-south.
• nesw-resize: Bidirectional resize north-east-south-west.
• nwse-resize: Bidirectional resize north-west-south-east.

Custom shape

To set a custom mouse cursor, provide an image and a hotspot. The hotspot is the point in the image, given in image pixels from the top-left corner, that is aligned with the actual pointer position. It is clamped to the image bounds.

TouchArea {
    mouse-cursor: MouseCursor.custom(@image-url("cursor.png"), 0, 0);
}

slint