1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: MIT
3
4import { Theme } from "../theme.slint";
5
6export component Switch {
7 in-out property <bool> checked;
8
9 callback changed(/* checked */ bool);
10 callback clicked <=> i-touch-area.clicked;
11
12 function toggle-checked() {
13 checked = !checked;
14 changed(checked);
15 }
16
17 min-height: 18px;
18 width: 2 * self.height;
19
20 states [
21 checked when checked : {
22 i-container.background: Theme.palette.lemon-green-op10;
23 i-container.border-color: Theme.palette.lemon-green;
24 i-indicator.background: Theme.palette.lemon-green;
25 i-indicator.x: i-container.width - i-indicator.width - 2 * i-container.border-width;
26 }
27 ]
28
29 i-container := Rectangle {
30 border-color: Theme.palette.slint-blue-300;
31 border-width: 2px;
32 border-radius: self.height / 2;
33
34 animate border-color { duration: Theme.durations.fast; }
35 animate background { duration: Theme.durations.fast; }
36
37 i-indicator := Rectangle {
38 x: 2 * parent.border-width;
39 height: parent.height - 4 * parent.border-width;
40 width: self.height;
41 border-radius: self.height / 2;
42 background: Theme.palette.slint-blue-300;
43
44 animate background { duration: Theme.durations.fast; }
45 animate x { duration: Theme.durations.fast; }
46 }
47 }
48
49 i-touch-area := TouchArea {
50 clicked => {
51 toggle-checked();
52 }
53 }
54}
55