NavigationBar

import { NavigationBar } from "material.slint";
export component Example inherits Window {
    width: 400px;
    height: 200px;
    background: transparent;
    NavigationBar {
        width: parent.width;
        height: 80px;
        items: [
            { icon: @image-url("icons/home.svg"), text: "Home" },
            { icon: @image-url("icons/search.svg"), text: "Search" },
            { icon: @image-url("icons/settings.svg"), text: "Settings" }
        ];
    }
}

slint

A NavigationBar is a bottom navigation component that displays a row of navigation items with icons and labels. It’s commonly used for primary navigation in mobile applications.

Properties

current_item

int (in-out) default: 0

The index of the currently selected navigation item.

NavigationBar {
    current_item: 0;
}

slint

items

[NavigationItem] default: <???>

An array of navigation items to display in the bar.

Functions

select(index: int)

Selects the navigation item at the specified index.

NavigationBar {
    clicked() => {
        self.select(1);
    }
}

slint