slint/demos/energy-monitor/ui/widgets/pagination.slint

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

import { Theme } from "../theme.slint";

component Bubble inherits Rectangle {
    in property <bool> selected;

    states [
        selected when selected : {
            background: Theme.palette.white;
        }
    ]

    min_width: 5px;
    min_height: 5px;
    border-radius: max(self.width, self.height) / 2;
    background: Theme.palette.slint-blue;

    i-touch-area := TouchArea {}
}

export component Pagination {
    in property <int> count;
    in property <int> selected_index;

    callback clicked <=> i-touch-area.clicked;

    min-height: 26px;
    vertical-stretch: 0;

    VerticalLayout {
        alignment: center;

        HorizontalLayout {
            alignment: center;
            spacing: Theme.spaces.small;

            for index in count : Bubble {
                selected: index == selected-index;
            }
        }
    }

    i-touch-area := TouchArea {}
}