---
title: "Other"
description: "The keys, easing, data-transfer, and mouse cursor types."
---
import SlintProperty from '@slint/common-files/src/components/SlintProperty.astro';
import Link from '@slint/common-files/src/components/Link.astro';
import { Tabs, TabItem } from '@astrojs/starlight/components';
import LangRefLink from '@slint/common-files/src/components/LangRefLink.astro';
import BuiltInMouseCursor from '/src/content/docs/generated/reference/enums/_BuiltInMouseCursor.md';

## Keyboard input

### keys
<SlintProperty propName="keys" typeName="keys" defaultValue='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](/master/docs/slint/reference/keyboard-input/overview.md#key-bindings) for details.

<Tabs syncKey="dev-language">
<TabItem label="Rust" icon="seti:rust">
In Rust, properties or struct fields of the keys type are mapped to <LangRefLink lang="rust-slint" relpath="struct.Keys.html">`slint::Keys`</LangRefLink>.
</TabItem>
<TabItem label="C++" icon="seti:cpp">
In C++, properties or struct fields of the keys type are mapped to <LangRefLink lang="cpp" relpath="api/slint/keys/">`slint::Keys`</LangRefLink>.
</TabItem>
<TabItem label="NodeJS" icon="node">
In JavaScript, properties or struct fields of the keys type are mapped to the <LangRefLink lang="nodejs" relpath="api/classes/keys/">`Keys`</LangRefLink> class.
</TabItem>
<TabItem label="Python" icon="seti:python">
In Python, properties or struct fields of the keys type are mapped to <LangRefLink lang="python" relpath="api/classes/keys/">`Keys`</LangRefLink>.
</TabItem>
</Tabs>
</SlintProperty>

`keys` values have the following member function:

#### to-string() -> string

Returns a platform-native description of the key combination.

```slint
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
    }
}

```

## Animation
### easing
<SlintProperty propName="easing" typeName="easing" defaultValue='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`](https://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
    -   `spring(bounce)` as defined in [Spring Animations](/master/docs/slint/reference/language/animations.md#spring-animations)

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

```slint
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;
	}
}
```
</SlintProperty>





## Interaction Types

### data-transfer
<SlintProperty propName="data" typeName="data-transfer" defaultValue='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](/master/docs/slint/guide/development/drag-and-drop.md) for an end-to-end example.

<Tabs syncKey="dev-language">
<TabItem label="Rust" icon="seti:rust">
In Rust, properties or struct fields of the data-transfer type are mapped to <LangRefLink lang="rust-slint" relpath="struct.DataTransfer.html">`slint::DataTransfer`</LangRefLink>.
</TabItem>
<TabItem label="C++" icon="seti:cpp">
In C++, properties or struct fields of the data-transfer type are mapped to <LangRefLink lang="cpp" relpath="api/slint/datatransfer/">`slint::DataTransfer`</LangRefLink>.
</TabItem>
<TabItem label="NodeJS" icon="node">
In JavaScript, properties or struct fields of the data-transfer type are mapped to the <LangRefLink lang="nodejs" relpath="api/classes/datatransfer/">`DataTransfer`</LangRefLink> class.
</TabItem>
<TabItem label="Python" icon="seti:python">
In Python, properties or struct fields of the data-transfer type are mapped to <LangRefLink lang="python" relpath="api/classes/datatransfer/">`DataTransfer`</LangRefLink>.
</TabItem>
</Tabs>

</SlintProperty>

### MouseCursor
<SlintProperty propName="mouse-cursor" typeName="MouseCursor" defaultValue='default'>
The `MouseCursor` type is used in the [TouchArea element](/master/docs/slint/reference/gestures/toucharea.md).

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

```slint
TouchArea {
    mouse-cursor: ew-resize;
}

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

<BuiltInMouseCursor />

</SlintProperty>