carousel_demo.slint

// Copyright © SixtyFPS GmbH <info@slint.dev>
// SPDX-License-Identifier: MIT

import { Carousel } from "carousel.slint";
import { Card } from "card.slint";
import { Theme } from "theme.slint";

export component MainWindow inherits Window {
    private property <[{ title: string, image: image}]> navigation-items: [
       { title: "Settings", image: @image-url("svg/settings_black.svg") },
       { title: "Home", image: @image-url("svg/home_black.svg") },
       { title: "About", image: @image-url("svg/info_black.svg") },
    ];
    private property <int> selected-index: 1;

    title: "Carousel example";
    width: 320px;
    height: 240px;
    background: Theme.window-background;
    padding: Theme.spacing-regular;
    forward-focus: carousel;
    default-font-family: Theme.font-family;

    carousel := Carousel {
        y: (root.height - self.height) / 2;
        height: 100%;
        itemWidth: Theme.size-medium;
        count: root.navigation-items.length;
        selected-index <=> root.selected-index;
        spacing: Theme.spacing-medium;

        for item[index] in root.navigation-items : Card {
            clicked => { root.selected-index = index; }

            is-selected: index == root.selected-index;
            title: item.title;
            image-source: item.image;
            y: (parent.height - self.height) / 2;
        }
    }
}