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 { MaterialPalette, MaterialFontSettings } from "styling.slint";
5
6export component Switch {
7 in property <string> text <=> i-label.text;
8 in property <bool> enabled: true;
9 out property <bool> has-focus: i-focus-scope.has-focus;
10 in-out property <bool> checked;
11
12 callback toggled;
13
14 function toggle-checked() {
15 if(!root.enabled) {
16 return;
17 }
18
19 root.checked = !root.checked;
20 root.toggled();
21 }
22
23 min-height: max(32px, i-layout.min-height);
24 vertical-stretch: 0;
25 horizontal-stretch: 0;
26 forward-focus: i-focus-scope;
27 accessible-enabled: root.enabled;
28 accessible-label <=> i-label.text;
29 accessible-checkable: true;
30 accessible-checked <=> root.checked;
31 accessible-role: switch;
32 accessible-action-default => {
33 root.checked = !root.checked;
34 root.toggled();
35 }
36
37 states [
38 disabled-selected when !root.enabled && root.checked : {
39 i-label.opacity: 0.38;
40 i-label.color: MaterialPalette.accent-background;
41 track.opacity: 0.12;
42 i-handle.opacity: 0.38;
43 i-handle.width: 24px;
44 i-handle.x: track.width - 28px - 4px;
45 }
46 disabled when !root.enabled : {
47 i-label.opacity: 0.38;
48 i-label.color: MaterialPalette.accent-background;
49 track.opacity: 0.12;
50 i-handle.opacity: 0.38;
51 }
52 pressed when i-touch-area.pressed && !root.checked : {
53 state-layer.opacity: 0.12;
54 i-handle.background: MaterialPalette.control-foreground-variant;
55 i-handle.width: 28px;
56 i-handle.x: track.border-width;
57 }
58 pressed-selected when i-touch-area.pressed && root.checked : {
59 state-layer.opacity: 0.12;
60 state-layer.background: MaterialPalette.control-foreground;
61 track.background: MaterialPalette.accent-background;
62 track.border-color: MaterialPalette.accent-background;
63 i-handle.background: MaterialPalette.accent-container;
64 i-handle.width: 28px;
65 i-handle.x: track.width - 28px - 4px;
66 }
67 hover-selected when i-touch-area.has-hover && root.checked : {
68 state-layer.opacity: 0.08;
69 track.background: MaterialPalette.accent-background;
70 track.border-color: MaterialPalette.accent-background;
71 i-handle.background: MaterialPalette.accent-container;
72 i-handle.width: 24px;
73 i-handle.x: track.width - 24px - 4px;
74 }
75 hover when i-touch-area.has-hover && !root.checked : {
76 state-layer.background: MaterialPalette.control-foreground;
77 state-layer.opacity: 0.08;
78 i-handle.background: MaterialPalette.control-foreground-variant;
79 }
80 selected when !i-touch-area.has-hover && root.checked : {
81 track.background: MaterialPalette.accent-background;
82 track.border-color: MaterialPalette.accent-background;
83 i-handle.background: MaterialPalette.accent-container;
84 i-handle.width: 24px;
85 i-handle.x: track.width - 24px - 4px;
86 }
87 focused-selected when i-focus-scope.has-focus && root.checked : {
88 state-layer.opacity: 0.12;
89 track.background: MaterialPalette.accent-background;
90 track.border-color: MaterialPalette.accent-background;
91 i-handle.background: MaterialPalette.accent-container;
92 i-handle.width: 24px;
93 i-handle.x: track.width - 24px - 4px;
94 }
95 focused when i-focus-scope.has-focus && !root.checked : {
96 state-layer.background: MaterialPalette.control-foreground;
97 state-layer.opacity: 0.12;
98 }
99 ]
100
101 i-layout := VerticalLayout {
102 alignment: center;
103
104 HorizontalLayout {
105 spacing: 16px;
106
107 Rectangle {
108 width: 52px;
109 height: 32px;
110
111 track := Rectangle {
112 border-radius: 16px;
113 border-width: 2px;
114 border-color: MaterialPalette.border;
115 background: MaterialPalette.control-background-variant;
116 }
117
118 i-handle := Rectangle {
119 x: 8px;
120 y: (parent.height - self.height) / 2;
121 width: 16px;
122 height: self.width;
123 border-radius: self.width / 2;
124 background: MaterialPalette.border;
125
126 state-layer := Rectangle {
127 width: 40px;
128 height: 40px;
129 x: (parent.width - self.width) / 2;
130 y: (parent.height - self.height) / 2;
131 opacity: 0;
132 background: MaterialPalette.accent-background;
133 border-radius: 20px;
134
135 animate opacity { duration: 300ms; easing: ease; }
136 }
137
138 animate background, width, x { duration: 75ms; easing: linear; }
139 }
140
141 animate background, border-color{ duration: 75ms; easing: linear; }
142 }
143
144 i-label := Text {
145 color: MaterialPalette.control-foreground;
146 horizontal-alignment: left;
147 vertical-alignment: center;
148 vertical-stretch: 0;
149 font-size: MaterialFontSettings.title-small.font-size;
150 font-weight: MaterialFontSettings.title-small.font-weight;
151 }
152 }
153 }
154
155 i-touch-area := TouchArea {
156 enabled <=> root.enabled;
157
158 clicked => {
159 root.toggle-checked();
160 }
161 }
162
163 i-focus-scope := FocusScope {
164 x: 0;
165 width: 0px; // Do not react on clicks
166 enabled <=> root.enabled;
167
168 key-pressed(event) => {
169 if (event.text == " " || event.text == "\n") {
170 root.toggle-checked();
171 return accept;
172 }
173 return reject;
174 }
175 }
176}
177