BottomAppBar

import { BottomAppBar } from "material.slint";
export component Example inherits Window {
    width: 400px;
    height: 200px;
    background: transparent;
    BottomAppBar {
        width: parent.width;
        height: 80px;
        icon-buttons: [
            { icon: @image-url("icons/home.svg"), tooltip: "Home", enabled: true },
            { icon: @image-url("icons/search.svg"), tooltip: "Search", enabled: true }
        ];
        fab-icon: @image-url("icons/add.svg");
    }
}

slint

A BottomAppBar is a bottom navigation bar that displays icon buttons and an optional floating action button.

Properties

fab-icon

image default: the empty image

The icon for the floating action button.

icon-buttons

[struct IconButtonItem] default: a struct with all default values

IconButtonItem

This structure represents a IconButtonItem with x and y coordinate

icon (image): The icon to display in the button.
tooltip (string): The tooltip to display when hovering over the button.
enabled (bool): Whether the button is enabled.

An array of icon button items to display in the bar.

Callbacks

fab-clicked()

Invoked when the floating action button is clicked.

icon-button-clicked(index: int)

Invoked when an icon button is clicked.