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

[IconButtonItem] default: a IconButtonItem with default values

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

Callbacks

fab_clicked()

Invoked when the floating action button is clicked.

BottomAppBar {
    fab_clicked() => {
        debug("FAB clicked");
    }
}

slint

icon_button_clicked(index: int)

Invoked when an icon button is clicked.

BottomAppBar {
    icon_button_clicked(index) => {
        debug("Icon button clicked at index: ", index);
    }
}

slint