| 1 | // Copyright © SixtyFPS GmbH <info@slint.dev> |
|---|
| 2 | // SPDX-License-Identifier: MIT |
|---|
| 3 | |
|---|
| 4 | import { Carousel } from "carousel.slint" ; |
|---|
| 5 | import { Card } from "card.slint" ; |
|---|
| 6 | import { Theme } from "theme.slint" ; |
|---|
| 7 | |
|---|
| 8 | export component MainWindow inherits Window { |
|---|
| 9 | private property <[{ title: string, image: image}]> navigation-items: [ |
|---|
| 10 | { title: "Settings" , image: @image-url("svg/settings_black.svg" ) }, |
|---|
| 11 | { title: "Home" , image: @image-url("svg/home_black.svg" ) }, |
|---|
| 12 | { title: "About" , image: @image-url("svg/info_black.svg" ) }, |
|---|
| 13 | ]; |
|---|
| 14 | private property <int> selected-index: 1; |
|---|
| 15 | |
|---|
| 16 | title: "Carousel example" ; |
|---|
| 17 | width: 320px; |
|---|
| 18 | height: 240px; |
|---|
| 19 | background: Theme.window-background; |
|---|
| 20 | padding: Theme.spacing-regular; |
|---|
| 21 | forward-focus: carousel; |
|---|
| 22 | default-font-family: Theme.font-family; |
|---|
| 23 | |
|---|
| 24 | carousel := Carousel { |
|---|
| 25 | y: (root.height - self.height) / 2; |
|---|
| 26 | height: 100%; |
|---|
| 27 | itemWidth: Theme.size-medium; |
|---|
| 28 | count: root.navigation-items.length; |
|---|
| 29 | selected-index <=> root.selected-index; |
|---|
| 30 | spacing: Theme.spacing-medium; |
|---|
| 31 | |
|---|
| 32 | for item[index] in root.navigation-items : Card { |
|---|
| 33 | clicked => { root.selected-index = index; } |
|---|
| 34 | |
|---|
| 35 | is-selected: index == root.selected-index; |
|---|
| 36 | title: item.title; |
|---|
| 37 | image-source: item.image; |
|---|
| 38 | y: (parent.height - self.height) / 2; |
|---|
| 39 | } |
|---|
| 40 | } |
|---|
| 41 | } |
|---|
| 42 | |
|---|
