1 | // Copyright © SixtyFPS GmbH <info@slint.dev> |
2 | // SPDX-License-Identifier: MIT |
3 | |
4 | #[allow (dead_code)] |
5 | fn main() { |
6 | MainWindow::new().unwrap().run().unwrap(); |
7 | } |
8 | slint::slint! { |
9 | // ANCHOR: tile |
10 | component MemoryTile inherits Rectangle { |
11 | callback clicked; |
12 | in property <bool> open_curtain; |
13 | in property <bool> solved; |
14 | in property <image> icon; |
15 | |
16 | height: 64px; |
17 | width: 64px; |
18 | background: solved ? #34CE57 : #3960D5; |
19 | animate background { duration: 800ms; } |
20 | |
21 | Image { |
22 | source: icon; |
23 | width: parent.width; |
24 | height: parent.height; |
25 | } |
26 | |
27 | // Left curtain |
28 | Rectangle { |
29 | background: #193076; |
30 | x: 0px; |
31 | width: open_curtain ? 0px : (parent.width / 2); |
32 | height: parent.height; |
33 | animate width { duration: 250ms; easing: ease-in; } |
34 | } |
35 | |
36 | // Right curtain |
37 | Rectangle { |
38 | background: #193076; |
39 | x: open_curtain ? parent.width : (parent.width / 2); |
40 | width: open_curtain ? 0px : (parent.width / 2); |
41 | height: parent.height; |
42 | animate width { duration: 250ms; easing: ease-in; } |
43 | animate x { duration: 250ms; easing: ease-in; } |
44 | } |
45 | |
46 | TouchArea { |
47 | clicked => { |
48 | // Delegate to the user of this element |
49 | root.clicked(); |
50 | } |
51 | } |
52 | } |
53 | |
54 | export component MainWindow inherits Window { |
55 | MemoryTile { |
56 | icon: @image-url("icons/bus.png" ); |
57 | clicked => { |
58 | self.open_curtain = !self.open_curtain; |
59 | } |
60 | } |
61 | } |
62 | // ANCHOR_END: tile |
63 | } |
64 | |