SearchBar

import { SearchBar } from "material.slint";
export component Example inherits Window {
    width: 300px;
    height: 100px;
    background: transparent;
    SearchBar {
        placeholder: "Search...";
        width: 280px;
        height: 56px;
    }
}

slint

A SearchBar is a text input field designed for search functionality, with optional leading/trailing icons and avatar.

Properties

avatar

image default: the empty image

An optional avatar image displayed in the search bar.

avatar_background

color default: #00000000

The background color for the avatar.

current_item

int (in-out) default: 0

The index of the currently selected search result item.

empty_text

string default: ""

Text displayed when there are no search results.

items

[ListItem] default: <???>

An array of search result items to display.

leading_icon

image default: the empty image

The icon displayed at the start of the search bar.

placeholder

string default: ""

The placeholder text displayed when the search bar is empty.

text

string (in-out) default: ""

The current text in the search bar.

trailing_icon

image default: the empty image

The icon displayed at the end of the search bar.

Callbacks

action(index: int)

Invoked when a search result item action is triggered.

SearchBar {
    action(index) => {
        debug("Search action at index: ", index);
    }
}

slint

accepted(text: string)

Invoked when the user presses Enter in the search bar.

SearchBar {
    accepted(text) => {
        debug("Search accepted: ", text);
    }
}

slint

edited(text: string)

Invoked when the text in the search bar changes.

SearchBar {
    edited(text) => {
        debug("Search text edited: ", text);
    }
}

slint

key_pressed(event: KeyEvent) -> EventResult

Invoked when a key is pressed in the search bar.

key_released(event: KeyEvent) -> EventResult

Invoked when a key is released in the search bar.