1 | // Copyright © SixtyFPS GmbH <info@slint.dev> |
2 | // SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-1.1 OR LicenseRef-Slint-commercial |
3 | |
4 | TwoRectangle := Rectangle { |
5 | |
6 | callback clicked; |
7 | |
8 | Rectangle { |
9 | x: 50phx; |
10 | y: 50.0phx; |
11 | width: 25phx; |
12 | height: 25phx; |
13 | background: red; |
14 | |
15 | my_area := TouchArea { |
16 | width: 25phx; |
17 | height: 25phx; |
18 | clicked => { root.clicked() } |
19 | } |
20 | } |
21 | } |
22 | |
23 | ButtonRectangle := Rectangle { |
24 | property<string> button_text; |
25 | callback clicked; |
26 | width: 100phx; |
27 | height: 75phx; |
28 | |
29 | inner := Rectangle { |
30 | background: { area.pressed ? green : root.background }; |
31 | animate background { duration: 500ms; } |
32 | area := TouchArea { |
33 | width: inner.width; |
34 | height: inner.height; |
35 | clicked => { root.clicked() } |
36 | } |
37 | Text { |
38 | animate x { duration: 500ms; } |
39 | animate y { duration: 500ms; } |
40 | x: { area.pressed ? 60phx : 50phx; } |
41 | y: { area.pressed ? 20phx : 10phx; } |
42 | text: button_text; |
43 | width: root.width; |
44 | height: root.height; |
45 | horizontal-alignment: left; |
46 | vertical-alignment: center; |
47 | } |
48 | animate x { duration: 500ms; } |
49 | animate y { duration: 500ms; } |
50 | animate width { duration: 500ms; } |
51 | animate height { duration: 500ms; } |
52 | x: { area.pressed ? 0phx-10phx : 0phx } |
53 | y: { area.pressed ? 0phx-10phx : 0phx; } |
54 | width: { area.pressed ? (root.width + 20phx) : root.width; } |
55 | height: { area.pressed ? (root.height + 20phx) : root.height; } |
56 | } |
57 | } |
58 | |
59 | Hello := Rectangle { |
60 | |
61 | callback foobar; |
62 | callback plus_clicked; |
63 | callback minus_clicked; |
64 | |
65 | background: white; |
66 | |
67 | TwoRectangle { |
68 | width: 100phx; |
69 | height: 100phx; |
70 | background: blue; |
71 | clicked => { foobar() } |
72 | } |
73 | Rectangle { |
74 | x: 100phx; |
75 | y: 100phx; |
76 | width: (100phx); |
77 | height: {100phx} |
78 | background: green; |
79 | Rectangle { |
80 | x: 50phx; |
81 | y: 50.0phx; |
82 | width: 25phx; |
83 | height: 25phx; |
84 | background: yellow; |
85 | } |
86 | } |
87 | Image { |
88 | x: 200phx; |
89 | y: 200phx; |
90 | source: @image-url("../../../examples/memory/icons/tile_logo.png" ); |
91 | } |
92 | |
93 | ButtonRectangle { |
94 | background: #888; |
95 | x: 50phx; |
96 | y: 225phx; |
97 | clicked => { counter += 1 } |
98 | button_text: "+" ; |
99 | } |
100 | property<int> counter; |
101 | counter_label := Text { x: 100phx; y: 300phx; text: counter; color: black; } |
102 | ButtonRectangle { |
103 | background: #888; |
104 | x: 50phx; |
105 | y: 350phx; |
106 | clicked => { minus_clicked() } |
107 | button_text: "-" ; |
108 | } |
109 | |
110 | Path { |
111 | x: 100phx; |
112 | y: 300phx; |
113 | fill: green; |
114 | stroke: black; |
115 | stroke_width: 2px; |
116 | |
117 | MoveTo { |
118 | x: 0; |
119 | y: 0; |
120 | } |
121 | |
122 | LineTo { |
123 | x: 100; |
124 | y: 50; |
125 | } |
126 | LineTo { |
127 | x: 0; |
128 | y: 100; |
129 | } |
130 | |
131 | ArcTo { |
132 | x: 0; |
133 | y: 0; |
134 | radius_x: 10; |
135 | radius_y: 10; |
136 | } |
137 | |
138 | // M 0 0 C 15.3333 3.6667 92 1 48 46 Q -25 54 0 0 |
139 | CubicTo { |
140 | x: 48; |
141 | y: 46; |
142 | control-1-x: 15; |
143 | control-1-y: 3; |
144 | control-2-x: 92; |
145 | control-2-y: 1; |
146 | } |
147 | |
148 | QuadraticTo { |
149 | x: 0; |
150 | y: 0; |
151 | control-x: -25; |
152 | control-y: 54; |
153 | } |
154 | |
155 | Close {} |
156 | } |
157 | |
158 | Path { |
159 | commands: ta.pressed ? root.arrow_down_commands : root.funky-shape-commands; |
160 | x: 100phx; |
161 | y: 500phx; |
162 | stroke: black; |
163 | stroke_width: 2px; |
164 | } |
165 | |
166 | ta := TouchArea { |
167 | |
168 | } |
169 | |
170 | property <string> arrow_down_commands: "M21.8,311.1l84.2-82.1c15.7-15.2,41-15.2,56.7,0l341.1,304.1l333.7-297.5c15.5-15.2,41-15.2,56.6,0l84.3,82.1c15.6,15.2,15.6,40,0,55.2L531.7,771c-15.7,15.3-41,15.3-56.7,0l-6.9-6.7L21.8,366.3C6.1,351,6.1,326.3,21.8,311.1z" ; |
171 | property <string> funky_shape_commands: "M 100 300 Q 150 50 250 150 C 250 300 300 300 300 450 A 50 50 0 1 0 450 450 L 550 300" ; |
172 | property <length> width2 <=> root.width; |
173 | } |
174 | |
175 | /* |
176 | |
177 | ```cpp |
178 | auto handle = Hello::create(); |
179 | const Hello &instance = *handle; |
180 | assert(!instance.window().is_visible()); |
181 | instance.window().show(); |
182 | assert(instance.window().is_visible()); |
183 | assert(instance.get_width2() > 0); // default size from the backend |
184 | instance.window().set_size(slint::LogicalSize({123., 456.})); |
185 | assert_eq(instance.get_width2(), 123.); |
186 | instance.window().hide(); |
187 | assert(!instance.window().is_visible()); |
188 | ``` |
189 | |
190 | |
191 | ```rust |
192 | let instance = Hello::new().unwrap(); |
193 | assert!(!instance.window().is_visible()); |
194 | instance.window().show().unwrap(); |
195 | assert!(instance.window().is_visible()); |
196 | assert!(instance.get_width2() > 0.); // default size from the backend |
197 | instance.window().set_size(slint::LogicalSize::new(123., 456.)); |
198 | assert_eq!(instance.get_width2(), 123.); |
199 | instance.window().hide().unwrap(); |
200 | assert!(!instance.window().is_visible()); |
201 | ``` |
202 | |
203 | ```js |
204 | var instance = new slint.Hello(); |
205 | assert(!instance.window.visible); |
206 | instance.window.show(); |
207 | assert(instance.window.visible); |
208 | instance.window.hide(); |
209 | assert(!instance.window.visible); |
210 | ``` |
211 | |
212 | */ |
213 | |