1// Copyright © SixtyFPS GmbH <info@slint.dev>
2// SPDX-License-Identifier: GPL-3.0-only OR LicenseRef-Slint-Royalty-free-2.0 OR LicenseRef-Slint-Software-3.0
3
4import { CupertinoFontSettings, CupertinoPalette } from "styling.slint";
5import { FocusBorder } from "components.slint";
6
7export component Switch {
8 in property <bool> enabled: true;
9 in property <string> text;
10 out property <bool> has-focus: i-focus-scope.has-focus;
11 in-out property <bool> checked;
12
13 callback toggled;
14
15 private property <brush> background: checked && root.enabled ? CupertinoPalette.accent-background : CupertinoPalette.alternate-control-background;
16 private property <color> text-color: CupertinoPalette.foreground;
17
18 function toggle-checked() {
19 if(!root.enabled) {
20 return;
21 }
22
23 root.checked = !root.checked;
24 root.toggled();
25 }
26
27 min-width: 26px;
28 min-height: max(15px, i-layout.min-height);
29 vertical-stretch: 0;
30 horizontal-stretch: 0;
31 accessible-enabled: root.enabled;
32 accessible-label: root.text;
33 accessible-checkable: true;
34 accessible-checked <=> root.checked;
35 accessible-role: switch;
36 accessible-action-default => {
37 root.checked = !root.checked;
38 root.toggled();
39 }
40 forward-focus: i-focus-scope;
41
42 states [
43 disabled when !root.enabled : {
44 root.opacity: 0.5;
45 }
46 pressed when i-touch-area.pressed : {
47 root.background: root.checked ? CupertinoPalette.secondary-accent-background : CupertinoPalette.secondary-control-background;
48 }
49 selected when root.checked : {
50 i-rail.background: CupertinoPalette.accent-background;
51 }
52 ]
53
54 i-layout := HorizontalLayout {
55 spacing: 12px;
56
57 VerticalLayout {
58 alignment: center;
59
60 Rectangle {
61 width: 26px;
62 height: 15px;
63 border-radius: 8px;
64
65 i-rail := Rectangle {
66 border-radius: parent.border-radius;
67 background: root.background;
68 border-width: 0.5px;
69 border-color: CupertinoPalette.border;
70 clip: true;
71
72 Rectangle {
73 border-width: 1px;
74 border-color: @radial-gradient(circle, #00000026, #00000000);
75 border-radius: parent.border-radius;
76 }
77
78 animate background, border-color { duration: 150ms; easing: linear; }
79 }
80
81 i-thumb := Rectangle {
82 x: root.checked ? parent.width - self.width - 1px : 2px;
83 y: (parent.height - self.height) / 2;
84 height: parent.height - 2px;
85 width: self.height;
86 border-radius: self.height / 2;
87 background: CupertinoPalette.control-background-thumb;
88 drop-shadow-blur: 0.5px;
89 drop-shadow-offset-y: 0.25px;
90 drop-shadow-color: #0000001F;
91
92 animate background { duration: 150ms; easing: linear; }
93 }
94
95 // focus border
96 if (root.has-focus && root.enabled) : FocusBorder {
97 border-radius: i-rail.border-radius;
98 }
99 }
100 }
101
102 if (root.text != "") : Text {
103 text: root.text;
104 color: root.text-color;
105 font-size: CupertinoFontSettings.body.font-size;
106 font-weight: CupertinoFontSettings.body.font-weight;
107 vertical-alignment: center;
108 horizontal-alignment: left;
109 }
110 }
111
112 i-touch-area := TouchArea {
113 enabled <=> root.enabled;
114
115 clicked => {
116 root.toggle-checked();
117 }
118 }
119
120 i-focus-scope := FocusScope {
121 x:0;
122 width: 0px; // Do not react on clicks
123 enabled <=> root.enabled;
124
125 key-pressed(event) => {
126 if (event.text == " " || event.text == "\n") {
127 root.toggle-checked();
128 return accept;
129 }
130 return reject;
131 }
132 }
133}
134